/* ============================================ */
/* 产品中心完整样式 list27.css v20260627v3      */
/* 与首页风格统一：hTitle/深色渐变/卡片hover/动画 */
/* ============================================ */

/* --- 页面级覆盖：产品区去除首页new-modules的背景 --- */
.l27_product{background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important;}
.l27_product::before,.l27_product::after{display:none !important;}

/* --- Tab导航（匹配首页核心业务卡片风格）--- */
.l27_tabs{background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.08);overflow:hidden;margin:0 0 20px 0;padding:0;border:1px solid #e8ecf1;}
.l27_tabs .list_tab_list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.l27_tabs .list_tab_item{flex:1;min-width:120px;text-align:center;border-right:1px solid #eef2f7;list-style:none;position:relative;}
.l27_tabs .list_tab_item:last-child{border-right:none;}
.l27_tabs .list_tab_item a{display:block;padding:14px 16px;color:#555;text-decoration:none;font-size:15px;font-weight:600;background:linear-gradient(180deg,#fafbfc 0%,#f5f7fa 100%);transition:all 0.3s;border-bottom:3px solid transparent;}
.l27_tabs .list_tab_item a:hover{background:linear-gradient(180deg,#e3f0ff 0%,#d0e4ff 100%);color:#0e79f3;}
.l27_tabs .list_tab_item.active a{background:linear-gradient(180deg,#0e79f3 0%,#0a5ab8 100%);color:#fff;border-bottom-color:#0a5ab8;text-shadow:0 1px 2px rgba(0,0,0,0.15);}

/* --- 分类面板(list-27首页) --- */
.list_panels{display:block;padding:0;}
.list_panel{display:block;margin-bottom:16px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:box-shadow 0.3s;}
.list_panel:hover{box-shadow:0 4px 16px rgba(14,121,243,0.1);}
.list_panel_head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #f0f2f5;background:linear-gradient(180deg,#fafbfc,#f5f7fa);}
.list_subcat_title{font-size:16px;color:#333;font-weight:600;margin:0;padding-left:12px;border-left:4px solid #0e79f3;line-height:1.2;}
.list_subcat_more{font-size:13px;color:#0e79f3;text-decoration:none;font-weight:500;transition:all 0.2s;padding:4px 12px;border-radius:4px;border:1px solid #e3f0ff;}
.list_subcat_more:hover{background:#0e79f3;color:#fff;border-color:#0e79f3;}

/* --- 产品Grid（4列，匹配首页proRight风格）--- */
.list_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 20px;}
.l27_leaf_grid{padding:18px 20px;}

/* --- 产品卡片（匹配首页proRight li风格）--- */
.list_card{display:block;text-decoration:none;color:#333;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #eee;transition:all 0.4s;position:relative;}
.list_card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(14,121,243,0.15);border-color:#0e79f3;}
.list_card_img{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f8f9fb;position:relative;}
.list_card_img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.list_card:hover .list_card_img img{transform:scale(1.08);}
.list_card_title{padding:12px 14px;font-size:14px;line-height:1.6;color:#4c4c4c;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:50px;font-weight:500;transition:color 0.3s;}
.list_card:hover .list_card_title{color:#0e79f3;}

/* --- 产品标签 --- */
.list_card_tags{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:4px;}
.list_card_tag{display:inline-block;padding:2px 8px;font-size:11px;color:#0e79f3;background:#e3f0ff;border-radius:3px;line-height:1.4;}
.list_card_tag.tag-hot{color:#ff5722;background:#fff3e0;}
.list_card_tag.tag-new{color:#4caf50;background:#e8f5e9;}

/* --- 产品对比复选框 --- */
.list_card_compare{position:absolute;top:8px;right:8px;z-index:2;}
.list_card_compare label{display:flex;align-items:center;gap:4px;font-size:11px;color:#fff;background:rgba(0,0,0,0.45);padding:3px 8px;border-radius:12px;cursor:pointer;transition:background 0.2s;backdrop-filter:blur(4px);}
.list_card_compare label:hover{background:rgba(14,121,243,0.8);}
.list_card_compare input[type="checkbox"]{width:14px;height:14px;accent-color:#0e79f3;}

/* --- 对比浮窗 --- */
.l27_compare_bar{position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -4px 20px rgba(0,0,0,0.12);z-index:1000;transform:translateY(100%);transition:transform 0.35s ease;padding:14px 0;}
.l27_compare_bar.visible{transform:translateY(0);}
.l27_compare_inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.l27_compare_items{display:flex;gap:12px;flex:1;flex-wrap:wrap;}
.l27_compare_item{background:#f5f7fa;border:1px solid #e0e0e0;border-radius:6px;padding:8px 14px;font-size:13px;color:#333;display:flex;align-items:center;gap:8px;}
.l27_compare_remove{cursor:pointer;color:#999;font-size:18px;line-height:1;transition:color 0.2s;}
.l27_compare_remove:hover{color:#d20000;}
.l27_compare_btn{padding:10px 28px;background:linear-gradient(135deg,#0e79f3,#0a5ab8);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s;box-shadow:0 2px 8px rgba(14,121,243,0.3);}
.l27_compare_btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(14,121,243,0.4);}
.l27_compare_btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none;}

/* --- 智能选型助手（匹配首页product_selector风格）--- */
.l27_selector{margin-top:24px;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:hidden;border:1px solid #e8ecf1;}
.l27_selector_head{padding:18px 22px;border-bottom:1px solid #f0f2f5;display:flex;align-items:center;gap:10px;}
.l27_selector_icon{width:34px;height:34px;background:linear-gradient(135deg,#0e79f3,#1a5dc9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;}
.l27_selector_title{font-size:18px;font-weight:600;color:#333;}
.l27_selector_desc{font-size:13px;color:#999;margin-left:8px;}
.l27_selector_steps{display:flex;justify-content:center;align-items:center;padding:20px;background:#fafbfc;border-bottom:1px solid #f0f2f5;}
.l27_step{display:flex;align-items:center;color:#bbb;font-size:14px;}
.l27_step_num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e0e0e0;color:#fff;font-weight:600;margin-right:8px;font-size:14px;transition:all 0.3s;}
.l27_step.active .l27_step_num{background:linear-gradient(135deg,#0e79f3,#1a5dc9);box-shadow:0 2px 8px rgba(14,121,243,0.3);}
.l27_step.active{color:#0e79f3;font-weight:600;}
.l27_step_line{width:50px;height:2px;background:#e0e0e0;margin:0 14px;}
.l27_selector_body{padding:28px 24px;}
.l27_selector_panel{display:none;}
.l27_selector_panel.active{display:block;animation:l27fadeUp 0.4s ease;}
@keyframes l27fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.l27_option_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.l27_option_card{background:#fff;border:2px solid #eee;border-radius:8px;padding:22px 16px;text-align:center;cursor:pointer;transition:all 0.3s;}
.l27_option_card:hover{border-color:#0e79f3;background:#f0f7ff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(14,121,243,0.1);}
.l27_option_card.selected{border-color:#0e79f3;background:#e3f0ff;box-shadow:0 4px 12px rgba(14,121,243,0.15);}
.l27_option_icon{font-size:36px;margin-bottom:10px;}
.l27_option_card h4{font-size:15px;font-weight:600;margin-bottom:6px;color:#333;}
.l27_option_card p{font-size:12px;color:#888;line-height:1.5;}
.l27_selector_nav{display:flex;justify-content:space-between;margin-top:22px;}
.l27_btn_back{padding:10px 24px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:14px;transition:all 0.2s;}
.l27_btn_back:hover{background:#eee;border-color:#ccc;}
.l27_btn_next{padding:10px 24px;background:#ccc;color:#fff;border:none;border-radius:6px;cursor:not-allowed;font-size:14px;transition:all 0.2s;}
.l27_btn_next.enabled{background:linear-gradient(135deg,#0e79f3,#0a5ab8);cursor:pointer;box-shadow:0 2px 8px rgba(14,121,243,0.3);}
.l27_btn_next.enabled:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(14,121,243,0.4);}
.l27_selector_result{text-align:center;padding:10px 0;}
.l27_result_icon{font-size:52px;color:#4caf50;margin-bottom:14px;}
.l27_selector_result h3{font-size:22px;color:#333;margin-bottom:8px;}
.l27_result_summary{color:#666;font-size:14px;margin-bottom:22px;}
.l27_result_products{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px;text-align:left;}
.l27_result_product{background:#f7f9fc;padding:16px 18px;border-radius:8px;border-left:4px solid #0e79f3;transition:all 0.2s;}
.l27_result_product:hover{background:#e3f0ff;transform:translateX(4px);}
.l27_result_product h4{font-size:15px;color:#333;margin-bottom:5px;font-weight:600;}
.l27_result_product p{font-size:13px;color:#666;line-height:1.5;}
.l27_result_actions{display:flex;justify-content:center;gap:14px;}
.l27_btn_consult{display:inline-block;padding:12px 32px;background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border-radius:25px;text-decoration:none;font-size:15px;font-weight:600;transition:all 0.3s;box-shadow:0 2px 8px rgba(255,152,0,0.3);}
.l27_btn_consult:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,152,0,0.4);}
.l27_btn_restart{padding:12px 28px;background:#fff;color:#666;border:1px solid #ddd;border-radius:25px;cursor:pointer;font-size:14px;transition:all 0.3s;}
.l27_btn_restart:hover{background:#f5f5f5;border-color:#ccc;}

/* --- 客户评价轮播（匹配首页testimonial风格）--- */
.l27_testimonials{margin-top:24px;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:hidden;border:1px solid #e8ecf1;}
.l27_section_head{padding:18px 22px;border-bottom:1px solid #f0f2f5;display:flex;align-items:center;gap:10px;}
.l27_section_icon{width:30px;height:30px;background:linear-gradient(135deg,#ff9800,#f57c00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.l27_section_title{font-size:18px;font-weight:600;color:#333;}
.l27_testimonial_list{padding:20px 22px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.l27_testimonial_list::-webkit-scrollbar{height:4px;}
.l27_testimonial_list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px;}
.l27_testimonial_item{min-width:260px;flex:1;background:linear-gradient(135deg,#f7f9fc,#eef2f8);border-radius:8px;padding:22px;scroll-snap-align:start;border-left:4px solid #0e79f3;transition:all 0.3s;}
.l27_testimonial_item:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(14,121,243,0.1);}
.l27_testimonial_stars{color:#ff9800;font-size:14px;margin-bottom:10px;letter-spacing:2px;}
.l27_testimonial_text{font-size:13px;color:#555;line-height:1.8;margin-bottom:14px;font-style:italic;}
.l27_testimonial_author{font-size:14px;color:#333;font-weight:600;}
.l27_testimonial_company{font-size:12px;color:#999;margin-top:3px;}

/* --- FAQ快速问答（匹配首页faq_section风格）--- */
.l27_faq{margin-top:24px;background:linear-gradient(180deg,#f0f4ff 0%,#e8f0fb 100%);border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:hidden;border:1px solid #d0e0f5;}
.l27_faq_icon{width:30px;height:30px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.l27_faq_list{padding:10px 22px 22px;}
.l27_faq_item{background:#fff;margin-bottom:8px;border-radius:6px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.04);transition:all 0.2s;}
.l27_faq_item:last-child{margin-bottom:0;}
.l27_faq_q{padding:15px 20px;font-size:14px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#333;transition:background 0.2s;}
.l27_faq_q:hover{background:#e8f0fb;}
.l27_faq_arrow{font-size:20px;color:#0e79f3;transition:transform 0.3s;flex-shrink:0;margin-left:12px;font-weight:300;}
.l27_faq_item.open .l27_faq_arrow{transform:rotate(45deg);}
.l27_faq_a{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.l27_faq_item.open .l27_faq_a{max-height:300px;}
.l27_faq_a p{padding:0 20px 16px;font-size:13px;color:#555;line-height:1.8;}

/* --- CTA行动号召（匹配首页cta_section深色渐变风格）--- */
.l27_cta{margin-top:24px;background:linear-gradient(135deg,#0e79f3 0%,#0a5ab8 50%,#084298 100%);border-radius:8px;padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 4px 20px rgba(14,121,243,0.25);position:relative;overflow:hidden;}
.l27_cta::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:0.08;pointer-events:none;}
.l27_cta_text{position:relative;z-index:1;}
.l27_cta_text h3{font-size:22px;color:#fff;font-weight:600;margin-bottom:8px;}
.l27_cta_text p{font-size:14px;color:rgba(255,255,255,0.85);}
.l27_cta_btns{display:flex;gap:12px;flex-shrink:0;position:relative;z-index:1;}
.l27_cta_btn{display:inline-block;padding:13px 30px;border-radius:25px;text-decoration:none;font-size:14px;font-weight:600;transition:all 0.3s;text-align:center;min-width:120px;}
.l27_cta_btn-primary{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;box-shadow:0 2px 8px rgba(255,152,0,0.3);}
.l27_cta_btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,152,0,0.4);}
.l27_cta_btn-secondary{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.3);backdrop-filter:blur(4px);}
.l27_cta_btn-secondary:hover{background:rgba(255,255,255,0.22);transform:translateY(-2px);}
.l27_cta_btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.5);}
.l27_cta_btn-outline:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}

/* --- 分页样式（匹配首页风格）--- */
.l27_page{width:100%;text-align:center;padding:18px 0;border-top:1px solid #f0f2f5;background:#fafbfc;border-radius:0 0 8px 8px;}
.l27_page a{display:inline-block;margin:0 3px;padding:6px 14px;border:1px solid #ddd;border-radius:4px;color:#555;text-decoration:none;font-size:13px;transition:all 0.2s;}
.l27_page a:hover{background:#0e79f3;color:#fff;border-color:#0e79f3;}
.l27_page .active-page{background:linear-gradient(135deg,#0e79f3,#0a5ab8);color:#fff;border-color:#0e79f3;}

/* --- 浏览足迹 --- */
.l27_history{margin-top:24px;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:hidden;border:1px solid #e8ecf1;}
.l27_history_icon{width:30px;height:30px;background:linear-gradient(135deg,#9c27b0,#7b1fa2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;}
.l27_history_list{padding:16px 22px;display:flex;gap:14px;overflow-x:auto;}
.l27_history_list::-webkit-scrollbar{height:4px;}
.l27_history_list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px;}
.l27_history_item{min-width:90px;text-align:center;flex-shrink:0;text-decoration:none;}
.l27_history_item img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #eee;transition:all 0.3s;}
.l27_history_item:hover img{border-color:#0e79f3;transform:scale(1.05);}
.l27_history_item p{font-size:11px;color:#666;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px;}

/* --- 滚动淡入动画（匹配首页fade-in-up）--- */
.l27-fade-up{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;}
.l27-fade-up.visible{opacity:1;transform:translateY(0);}

/* --- 响应式 --- */
@media(max-width:1000px){
  .list_grid{grid-template-columns:repeat(3,1fr) !important;}
  .l27_option_grid{grid-template-columns:repeat(2,1fr);}
  .l27_cta{flex-direction:column;text-align:center;}
  .l27_cta_btns{justify-content:center;flex-wrap:wrap;}
}
@media(max-width:640px){
  .list_grid{grid-template-columns:repeat(2,1fr) !important;gap:10px;padding:12px 14px;}
  .l27_tabs .list_tab_item{min-width:70px;}
  .l27_tabs .list_tab_item a{padding:10px 6px;font-size:12px;}
  .l27_option_grid{grid-template-columns:1fr;}
  .l27_result_products{grid-template-columns:1fr;}
  .l27_cta_btns{flex-direction:column;width:100%;}
  .l27_cta_btn{width:100%;}
  .l27_testimonial_item{min-width:220px;}
  .l27_compare_inner{flex-direction:column;gap:10px;}
}