/* ========== 全局基础 ========== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; font-size:16px;line-height:1.7;color:#1a2a3a;background:#ffffff; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color .25s ease} a:hover{color:var(--c-accent-dark)} h1,h2,h3,h4{margin:0;font-weight:700;color:#0a2540;letter-spacing:.5px} p{margin:0} ul{margin:0;padding:0;list-style:none} :root{ --c-primary:#0a2540; --c-accent:#1a6cff; --c-accent2:#00b4ff; --c-accent-dark:#0b4fd6; /* 深色底专用提亮蓝：#1a6cff 压在深蓝底上对比度不足，深色区块一律用它 */ --c-accent-soft:#5b9dff; --c-dark:#0a1a2c; --c-light:#f5f7fa; --c-gray:#6b7a8f; --c-border:#e5ebf2; --shadow-sm:0 2px 10px rgba(10,37,64,.06); --shadow-md:0 12px 32px rgba(10,37,64,.10); --shadow-lg:0 20px 50px rgba(10,37,64,.14); --radius:10px; --maxw:1240px; } .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{padding:96px 0;position:relative} .about-core-strengths{background:#dbe9ff} .section--dark{background:linear-gradient(135deg,#0a2540 0%,#0d3458 100%);color:#cfd8e3} .section--dark h2,.section--dark h3{color:#fff} .section--gray{background:var(--c-light)} /* 荣誉资质页：画廊区块与选项卡之间的间距减半（原视觉间隙 112 = 区块 padding 96 + 选项卡 margin 16，现 40+16=56；仅桌面端，移动端沿用 .section 的 40px） */ .qual-gallery{padding-top:40px} .section-head{text-align:center;max-width:760px;margin:0 auto 64px} .section-head .eyebrow{ display:inline-block;font-size:13px;letter-spacing:4px;color:var(--c-accent); font-weight:600;margin-bottom:14px;text-transform:uppercase; } .section-head h2{font-size:38px;line-height:1.3;margin-bottom:18px} .section-head p{color:var(--c-gray);font-size:16px} .section--dark .section-head p{color:#9fb0c5} .section--dark .section-head .eyebrow{color:#ffe58a} /* ========== 顶部导航 ========== */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:all .3s ease; } .topbar.scrolled{ background:rgba(255,255,255,.96); box-shadow:var(--shadow-sm); border-bottom-color:var(--c-border); } .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--c-primary)} /* 全站统一使用图片 logo（ZHCL） */ .brand .logo{display:none} .brand .logo-img{display:block;height:38px;width:auto;object-fit:contain} .footer-brand .brand .logo-img{height:42px;filter:brightness(0) invert(1)} @media(max-width:768px){ .brand .logo{display:none} .brand .logo-img{display:block;height:38px} } /* 页脚为深底，副标题需提亮避免与背景糊在一起 */ .footer-brand .brand-text span{color:#9fb0c5} .brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1} .brand-text b{font-size:15px;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;font-weight:normal} /* 副标题 12 字 ×9px + 字距 1.4 ≈ 123.5px，与主标题 8 字 ×15px(含字距) 等宽 */ .brand-text span{font-size:9px;color:var(--c-gray);font-weight:500;letter-spacing:1.4px;white-space:nowrap;flex-shrink:0} .nav-menu{display:flex;align-items:center;gap:6px} .nav-menu a{ position:relative;padding:10px 16px;font-size:15px;font-weight:500;color:#3a4a5c;border-radius:6px; } .nav-menu a:hover{color:var(--c-primary);background:var(--c-light)} .nav-menu a.active{color:var(--c-primary)} .nav-menu a.active::after{ content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:4px; width:18px;height:2px;background:var(--c-accent);border-radius:2px; } /* 导航二级下拉菜单 */ .nav-dropdown{position:relative} .nav-dropdown>a{display:inline-flex;align-items:center;gap:5px} .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6;transition:transform .25s} .nav-dropdown:hover .caret, .nav-dropdown.open .caret{transform:rotate(180deg)} /* 桥接区：用于覆盖一级栏目底部与下拉菜单之间的空隙，避免鼠标移动过程中 :hover 中断导致菜单消失。高度取 32px（> 实际空隙），左右不外扩， 避免与相邻下拉菜单的桥接区重叠互相干扰。仅桌面端启用（移动端抽屉菜单不需要， 透明层还会挡住二级栏目的点击） */ .nav-dropdown>a::before{ content:"";position:absolute;left:0;right:0;top:100%;height:32px;z-index:1; } @media (max-width:768px){ .nav-dropdown>a::before{display:none} .nav-sub::after{display:none} } .nav-sub{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(10px);min-width:184px;background:#fff;border-radius:12px;box-shadow:0 18px 44px rgba(10,37,64,.16);padding:8px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:9999;pointer-events:none} /* 菜单自身的透明延展区：补齐菜单左右两侧各 40px（菜单比触发器宽出的部分）， 使鼠标斜向移入菜单时不会先离开 hover 区域 */ .nav-sub::after{content:"";position:absolute;left:-40px;right:-40px;top:0;bottom:0;z-index:-1} .nav-sub::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#fff} .nav-dropdown:hover .nav-sub, .nav-dropdown.open .nav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto} .nav-sub a{display:block;padding:11px 14px;font-size:14px;color:#3a4a5c;border-radius:8px;font-weight:500;white-space:nowrap;text-align:center} .nav-sub a:hover{background:var(--c-light);color:var(--c-primary)} .nav-sub a::after{display:none} .nav-phone{ display:flex;align-items:center;gap:8px;padding:10px 18px; background:#f07020;color:#fff;border-radius:30px; font-weight:600;font-size:14px;transition:transform .25s,box-shadow .25s,background .25s; } .nav-phone:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(240,112,32,.35);background:#ff7d2e;color:#fff} .menu-btn{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer} .menu-btn span{display:block;width:22px;height:2px;background:var(--c-primary);margin:5px auto;transition:.3s} /* ========== Hero ========== */ .hero{ position:relative;min-height:100vh; background:linear-gradient(135deg,#062e2e 0%,#0a3d3d 45%,#0d2020 100%); color:#fff;overflow:hidden;display:flex;align-items:center;padding:120px 0 120px; } /* PC 端已改为图片 banner：保留深色渐变作为图片加载前的兜底底色 */ .hero::before{display:none} .hero-grid{ display:none; position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); } .hero .container{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 240px)} .hero-inner{display:block;max-width:900px;padding-bottom:40px} .hero-tag{ display:inline-flex;align-items:center;gap:8px;padding:8px 18px; border:1px solid rgba(255,255,255,.22);border-radius:30px; font-size:12px;letter-spacing:1.5px;color:rgba(255,255,255,.7);margin-bottom:24px; background:transparent; } .hero h1{font-size:48px;line-height:1.55;color:#fff;margin-bottom:24px} .hero h1 .hl{color:#ffe9a8} .hero-sub{font-size:17px;color:rgba(255,255,255,.82);max-width:720px;margin-bottom:36px;line-height:1.85} .hero-cta{display:flex;gap:16px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:32px; font-weight:600;font-size:15px;transition:all .3s;cursor:pointer;border:0; } .btn-primary{background:linear-gradient(135deg,#1a6cff,var(--c-accent-dark));color:#fff;box-shadow:0 10px 24px rgba(26,108,255,.32)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(26,108,255,.42);color:#fff} .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)} .btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff} /* 浅色背景用的描边按钮（.btn-ghost 为白字，仅适用于深色底） */ .btn-outline{background:#fff;color:var(--c-primary);border:1px solid var(--c-border)} .btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent);box-shadow:var(--shadow-sm)} .hero .btn-primary{background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 10px 24px rgba(20,184,166,.32)} .hero .btn-primary:hover{box-shadow:0 14px 30px rgba(20,184,166,.42)} .hero .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)} .hero .btn-ghost:hover{background:rgba(255,255,255,.12)} .hero-visual{display:none} .hero-carousel{display:none} /* ========== Hero 图片 banner 轮播（PC 端） ========== */ .hero-slider{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-slide{ position:absolute;inset:0; background-repeat:no-repeat;background-size:cover;background-position:72% center; opacity:0;transition:opacity 1.1s ease; transform:scale(1.02);will-change:opacity,transform; } .hero-slide.is-on{opacity:1;animation:heroKenBurns 9s ease-out both} @keyframes heroKenBurns{from{transform:scale(1.02)}to{transform:scale(1.09)}} /* 左侧压暗 + 底部压暗，保证文案与数据条可读 */ .hero-shade{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(3,22,26,.96) 0%,rgba(4,26,30,.92) 32%,rgba(5,30,34,.66) 58%,rgba(5,30,34,.16) 86%,transparent 100%), linear-gradient(180deg,rgba(3,20,24,.6) 0%,transparent 20%,transparent 52%,rgba(3,18,22,.92) 100%); } .hero-slider-nav{ position:absolute;right:92px;bottom:132px;z-index:5; display:flex;align-items:center;gap:14px; } .hero-arrow{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0; border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:#fff;cursor:pointer;transition:.25s; } .hero-arrow svg{width:18px;height:18px} .hero-arrow:hover{background:rgba(20,184,166,.85);border-color:rgba(20,184,166,.9);transform:translateY(-1px)} .hero-slider-dots{display:flex;align-items:center;gap:8px} .hero-slider-dots span{width:8px;height:8px;border-radius:6px;background:rgba(255,255,255,.42);cursor:pointer;transition:.3s} .hero-slider-dots span.on{width:26px;background:#14b8a6} .scroll-hint{display:none} /* 首页 Hero 右侧 banner 图：已按需求取消显示（保留样式定义便于后续恢复） */ .hero-banner{display:none} .hero-stats{ position:relative;z-index:3; display:flex;justify-content:space-between;align-items:stretch; padding:32px 0;border-top:1px solid rgba(255,255,255,.08); margin-top:auto; } .hero-stat{flex:1;text-align:center;position:relative;padding:0 16px;display:flex;flex-direction:column;justify-content:center} .hero-stat:not(:last-child)::after{ content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12); } .hero-stat-num{font-size:34px;font-weight:800;color:#fff;line-height:1;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:4px} .hero-stat-num em{font-style:normal;font-size:18px;font-weight:500;color:rgba(255,255,255,.65)} .hero-stat--text .hero-stat-num{font-size:26px;font-weight:700} .hero-stat-lbl{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.5px} /* ========== 优势数字栏 ========== */ .stats{background:#fff;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:48px 0} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .stat-item{padding:0 12px;position:relative} .stat-item:not(:last-child)::after{ content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:var(--c-border); } .stat-item .num{font-size:44px;font-weight:800;background:linear-gradient(135deg,#1a6cff,#00b4ff);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stat-item .plus{font-size:24px;color:var(--c-accent2);font-weight:700;margin-left:2px} .stat-item .lbl{margin-top:10px;color:var(--c-gray);font-size:14px;letter-spacing:1px} .qualifications .stat-item .num{background:linear-gradient(135deg,#f07020,#ff7d2e);-webkit-background-clip:text;background-clip:text} .qualifications .stat-item .plus{color:#f07020} /* ========== 典型落地项目 ========== */ .tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px} /* 案例列表页：一行三列（首页「典型落地项目」保持四列） */ .tp-grid--3{grid-template-columns:repeat(3,1fr)} /* 中屏（平板区间）三列偏挤，降为两列 */ @media(min-width:769px) and (max-width:1024px){ .tp-grid--3{grid-template-columns:repeat(2,1fr)} } .tp-card{display:block;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;background:#fff;border:1.5px solid #d4e3f0;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s} .tp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .tp-img{height:200px;overflow:hidden;position:relative} .tp-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .tp-card:hover .tp-img img{transform:scale(1.06)} .tp-info{padding:18px 20px} .tp-tag{display:inline-block;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#1a6cff,#00b4ff);padding:3px 10px;border-radius:20px;margin-bottom:8px} .tp-info h3{font-size:17px;font-weight:700;color:var(--c-text);margin-bottom:6px;line-height:1.4} .tp-info p{font-size:13px;color:var(--c-gray);line-height:1.6} /* 区块底部「查看全部…」容器：PC 端居中，上下留白各 64px（原 96px 的 2/3），保证胶囊上下等距； 移动端在末尾媒体查询里收紧到 14px */ .tp-more{text-align:center;margin-top:64px} .section-more-wrap{text-align:center;margin-top:64px} /* 含胶囊的区块底部内距同步收到 64px，否则下方仍为 96px 会偏心 */ @media (min-width:769px){ .section:has(.section-more-wrap), .section:has(.tp-more){padding-bottom:64px} } .tp-more .btn--primary{background:linear-gradient(135deg,#1a6cff,var(--c-accent-dark));color:#fff;box-shadow:0 10px 24px rgba(26,108,255,.32)} .tp-more .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(26,108,255,.42);color:#fff} /* ========== 关于我们 ========== */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .about-text h2{font-size:36px;line-height:1.3;margin-bottom:20px} .about-text .lead{font-size:17px;color:#3a4a5c;margin-bottom:20px} .about-text p{color:var(--c-gray);margin-bottom:16px} .about-features{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px} .feat{display:flex;gap:14px;align-items:flex-start} .feat-icon{ flex-shrink:0;width:46px;height:46px;border-radius:12px; background:linear-gradient(135deg,rgba(26,108,255,.12),rgba(0,180,255,.12)); display:grid;place-items:center;color:var(--c-accent);font-size:20px; } .feat b{display:block;color:var(--c-primary);margin-bottom:4px;font-size:15px} .feat span{font-size:13px;color:var(--c-gray);line-height:1.6} .about-visual{position:relative;height:480px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#0a2540,#173f6e);box-shadow:var(--shadow-lg)} .about-visual::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 70% 30%,rgba(26,108,255,.25),transparent 60%), radial-gradient(circle at 20% 80%,rgba(0,180,255,.25),transparent 60%); } .charging-illu{position:absolute;inset:0;display:grid;place-items:center;color:#fff} .charging-illu svg{width:78%;height:auto} /* ========== 产品 ========== */ .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .product-card{ background:#fff;border-radius:14px;overflow:hidden; border:1.5px solid #d4e3f0;transition:all .35s; position:relative; } .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .product-thumb{ height:220px;background:#f5f7fa; display:grid;place-items:center;color:#fff;position:relative;overflow:hidden; padding:16px;box-sizing:border-box; } .product-thumb img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; position:relative;z-index:1;transition:transform .5s } .product-card:hover .product-thumb img{transform:scale(1.06)} .product-body{padding:26px 24px} .product-tag{display:inline-block;font-size:11px;letter-spacing:2px;color:var(--c-accent);font-weight:600;margin-bottom:8px} .product-card h3{font-size:18px;margin-bottom:10px} .product-card p{color:var(--c-gray);font-size:14px;line-height:1.7;margin-bottom:14px} .product-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .product-meta span{font-size:11px;padding:5px 12px;background:#f1f4f8;border-radius:8px;color:#3a4a5c} .product-link{font-size:14px;font-weight:600;color:var(--c-accent);display:inline-flex;align-items:center;gap:6px} .product-link::after{content:"→";transition:transform .25s} .product-card:hover .product-link::after{transform:translateX(4px)} /* ========== 产品核心功能特性 ========== */ .product-features{text-align:center;margin-top:56px} .product-features .pf-head{margin-bottom:26px} .product-features .pf-head .eyebrow{display:inline-block;font-size:13px;letter-spacing:4px;color:var(--c-accent);font-weight:600;margin-bottom:10px;text-transform:uppercase} .product-features .pf-head h3{font-size:24px;color:var(--c-primary);margin:0} .product-features .pf-img{max-width:1100px;width:100%;margin:0 auto;display:block} /* ========== 解决方案 ========== */ .solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .solution-card{ position:relative;padding:38px 30px;border-radius:14px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);transition:all .35s;overflow:hidden; } .solution-card:hover{background:rgba(255,255,255,.07);transform:translateY(-4px);border-color:rgba(26,108,255,.3)} .solution-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#1a6cff,#00b4ff);transform:scaleX(0);transform-origin:left;transition:.4s; } .solution-card:hover::before{transform:scaleX(1)} .solution-icon{ width:60px;height:60px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,#1a6cff,#00b4ff);margin-bottom:22px;color:#fff; box-shadow:0 10px 22px rgba(26,108,255,.32); } .solution-card h3{font-size:20px;color:#fff;margin-bottom:12px} .solution-card p{color:#9fb0c5;font-size:14px;line-height:1.8} /* ========== 新闻 ========== */ .news-grid{display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:24px;align-items:stretch} .news-feature{ background:#fff;border-radius:14px;overflow:hidden; border:1px solid var(--c-border);transition:.35s;display:flex;flex-direction:column; } .news-feature:hover{box-shadow:var(--shadow-md)} .news-feature .img{height:292px;width:100%;background:linear-gradient(135deg,var(--c-accent-dark),var(--c-accent));position:relative;overflow:hidden} .news-feature .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s} .news-feature:hover .img img{transform:scale(1.04)} .news-feature .img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.18),transparent 55%);z-index:1} .news-feature .body{padding:22px 26px 24px;flex:1} .news-feature .body h3{font-size:21px;line-height:1.45;margin-bottom:10px} .news-feature .body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-list{display:flex;flex-direction:column;gap:18px} .news-mini-list{display:flex;flex-direction:column;gap:14px} .news-mini{ display:grid;grid-template-columns:88px 1fr;gap:0;flex:1;min-height:0; background:#fff;border-radius:14px;overflow:hidden; border:1px solid var(--c-border);transition:.35s;align-items:center; } .news-mini:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} .news-thumb{ width:88px;height:88px;min-height:88px;align-self:center;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--c-accent-dark),var(--c-accent)); display:grid;place-items:center;border-radius:12px 0 0 12px; } .news-thumb img{width:100%;height:100%;object-fit:cover;display:none} .news-date{ display:flex;flex-direction:column;align-items:center;justify-content:center; color:#fff;text-align:center; } .news-date .day{font-size:30px;font-weight:800;line-height:1} .news-date .month{font-size:11px;opacity:.9;margin-top:4px} .news-mini.has-thumb .news-thumb img{display:block} .news-mini.has-thumb .news-date{display:none} .news-body{padding:12px 18px} .news-body h3{font-size:15px;line-height:1.55;margin-top:6px;color:var(--c-text);font-weight:600;transition:color .25s} .news-mini:hover .news-body h3{color:var(--c-accent)} .news-meta{display:flex;align-items:center;gap:10px;color:var(--c-gray);font-size:12px} .news-meta .cat{color:var(--c-accent);font-weight:600} .news-tag{display:inline-block;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(135deg,#1a6cff,#00b4ff);padding:3px 12px;border-radius:20px;margin-bottom:0;white-space:nowrap;line-height:1.6} /* FAQ */ .faq-section{background:#fff;padding:64px 0} .faq-section .section-head .eyebrow{font-size:15px} .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .faq-item{background:#e8f4fc;border-radius:14px;padding:22px 24px;border:1px solid var(--c-border);box-shadow:var(--shadow-sm);transition:box-shadow .25s} .faq-item:hover{box-shadow:var(--shadow-md)} .faq-q{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;font-size:16px;color:var(--c-text);line-height:1.4} .faq-icon{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1a6cff,var(--c-accent-dark));color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700;flex-shrink:0} .faq-arrow{margin-left:auto;color:var(--c-gray);transition:transform .3s} .faq-item.open .faq-arrow{transform:rotate(180deg)} .faq-a{padding-top:14px;color:var(--c-gray);line-height:1.7;font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .faq-item.open .faq-a{-webkit-line-clamp:unset;display:block;overflow:visible} /* FAQ 栏目切换 */ .faq-ctabs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:28px} .faq-ctab{padding:10px 24px;border-radius:30px;font-size:16px;font-weight:600;background:var(--c-light);color:#3a4a5c;border:1px solid var(--c-border);transition:.25s;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block} .faq-ctab:hover{color:var(--c-accent);border-color:rgba(26,108,255,.4);background:#fff} .faq-ctab.active{background:linear-gradient(135deg,#1a6cff,var(--c-accent-dark));color:#fff;border-color:transparent} .faq-panel{display:none} .faq-panel.active{display:block;animation:faqFade .35s ease} @keyframes faqFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(max-width:768px){ .faq-ctabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;justify-content:flex-start} .faq-ctab{white-space:nowrap} } @media(max-width:768px){ .faq-grid{grid-template-columns:1fr} } /* ========== 集团概况 ========== */ .about-overview{background:var(--c-light)} .about-overview-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start} .about-overview-text h3{font-size:24px;color:#1a6cff;margin-bottom:18px} .about-overview-text p{color:#2a3a4c;line-height:1.9;margin-bottom:16px;font-size:15px} .about-overview-text p strong{color:var(--c-primary)} .about-detail-link{display:inline;margin-left:4px;font-size:14px;font-weight:600;color:var(--c-accent);text-decoration:none;transition:color .25s;white-space:nowrap} .about-detail-link:hover{color:var(--c-accent-dark);text-decoration:underline} @media (min-width:769px){ .about-overview-text p{color:#1a2a3c} } .about-mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px} .about-mini-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--c-border);box-shadow:var(--shadow-sm);transition:.3s} .about-mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .about-mini-card .img,.about-mini-card>img{height:120px;width:100%;object-fit:cover;display:block;background:linear-gradient(135deg,var(--c-accent-dark),var(--c-accent));color:#fff;font-weight:600;font-size:14px} .about-mini-card p{padding:12px;font-size:13px;color:var(--c-text);text-align:center;font-weight:500} /* 集团概况小图大图切换：大图展示区仅移动端显示 */ .mini-view{display:none} @keyframes miniFade{from{opacity:.35}to{opacity:1}} .about-overview-media{position:sticky;top:100px} .about-main-img-slider{position:relative;height:360px;border-radius:16px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-sm)} .about-main-img-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease} .about-main-img-slider img.active{opacity:1} .cta-line{color:#9fb0c5;margin:0 auto 28px;white-space:nowrap} .about-overview-media h4{font-size:18px;color:var(--c-primary);line-height:1.5;text-align:center} /* ========== 核心优势 ========== */ .core-advantages{padding:30px 0 80px} .core-advantages .section-head{margin-bottom:48px} .adv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px} .adv-card{background:var(--c-light);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-sm);border:1.5px solid #d4e3f0;transition:.3s;display:flex;align-items:flex-start;gap:20px} .adv-card:hover{background:#fff;transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--c-accent-soft)} /* 第一排：01、02，宽度与第二排3个一致（各占2列），整体居中于网格 */ .adv-card:nth-child(1){grid-column:2 / span 2} .adv-card:nth-child(2){grid-column:4 / span 2} /* 第一排内容居中显示 */ .adv-card:nth-child(-n+2){justify-content:center} /* 第二排：03、04、05，各占2列 */ .adv-card:nth-child(n+3){grid-column:span 2} .adv-card--full{grid-column:span 2;justify-content:flex-start} .adv-card--full .adv-body{max-width:none} .adv-num{flex-shrink:0;width:auto;font-size:46px;line-height:1;font-weight:800;color:#f59e0b;font-family:"DIN Alternate","Arial Black",Arial,sans-serif;letter-spacing:-1px} .adv-body h4{font-size:20px;color:var(--c-primary);margin-bottom:8px} .adv-body p{font-size:15px;color:var(--c-gray);line-height:1.6} @media(max-width:992px){ .about-overview-grid{grid-template-columns:1fr} .about-overview-media{position:static} } @media(max-width:768px){ /* 移动端：隐藏集团概况右侧大图轮播区（与下方小图切换功能重复） */ .about-overview-media{display:none} .about-mini-cards{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px} /* 三张缩略图一排，点击/自动切换上方大图 */ .mini-view{display:block;grid-column:1/-1;position:relative;border-radius:12px;overflow:hidden;margin-bottom:2px;box-shadow:var(--shadow-sm);border:1px solid var(--c-border)} .mini-view img{display:none;width:100%;height:190px;object-fit:cover} .mini-view img.active{display:block;animation:miniFade .5s ease} .mini-view-cap{ position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px; background:linear-gradient(transparent,rgba(6,26,48,.85)); color:#fff;font-size:13px;font-weight:600;text-align:center;letter-spacing:1px; } .about-mini-card{cursor:pointer;border:2px solid transparent} .about-mini-card.active{border-color:var(--c-accent);box-shadow:0 4px 12px rgba(0,212,160,.28)} .about-mini-card>img{height:58px} .about-mini-card p{padding:6px 4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cta-line{white-space:normal;font-size:14px} /* 移动端 CTA 标题缩小 */ .section--dark .container h2[style*="color:#fff"]{font-size:26px !important} /* 核心优势：移动端单列 */ .adv-grid{grid-template-columns:1fr;gap:12px} .adv-card{grid-column:auto} /* 解除 PC 端前两项居中定位与后三项跨度，避免移动端单列错位 */ .adv-card:nth-child(-n+2), .adv-card:nth-child(n+3){grid-column:auto} .adv-card--full{grid-column:auto} .adv-card--full .adv-body{max-width:none} /* 移动端：五大核心优势横向卡片（圆形编号 + 标题 ｜ 描述） */ .adv-card{ flex-direction:row;align-items:center;gap:14px;text-align:left; background:#f0f7ff;border:1px solid #dbe9f7;border-radius:14px; padding:16px 16px;box-shadow:none; } .adv-num{ flex-shrink:0;width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,#1a6cff,#00b4ff); color:#fff;font-size:15px;font-weight:700;font-family:"DIN Alternate","Arial Black",Arial,sans-serif; display:grid;place-items:center; } .adv-body{ flex:1;display:flex;align-items:center;gap:12px;min-width:0; } .adv-body h4{ flex:0 0 auto;max-width:44%;font-size:15px;line-height:1.3;margin:0;color:var(--c-primary); } .adv-body p{ flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--c-gray);margin:0; padding-left:12px;border-left:1px solid #bcd6f2; } } .news-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--c-border)} /* ========== 项目案例 ========== */ .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .case-card{ background:#fff;border-radius:14px;overflow:hidden; border:1px solid var(--c-border);transition:all .35s;display:flex;flex-direction:column; } .case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .case-cover{ height:180px;background:linear-gradient(135deg,#0a2540,#173f6e); display:grid;place-items:center;color:#fff;position:relative;overflow:hidden; } .case-cover--blue{background:linear-gradient(135deg,#0d3458,#124a86)} .case-cover::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 50%,rgba(26,108,255,.18),transparent 60%); } .case-cover svg{width:64px;height:64px;position:relative;z-index:1;opacity:.95;transition:transform .5s} .case-card:hover .case-cover svg{transform:scale(1.08)} /* 真实案例照片封面 */ .case-cover img.case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .case-cover.has-img{background:#0a2540} .case-cover.has-img::before{z-index:1;background:linear-gradient(180deg,rgba(10,37,64,.12),rgba(10,37,64,.34))} .case-badge{ position:absolute;left:16px;top:16px;z-index:2; font-size:11px;letter-spacing:1px;font-weight:600;padding:4px 12px;border-radius:20px; background:rgba(26,108,255,.16);color:#1a6cff;border:1px solid rgba(26,108,255,.35); } .case-body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column} .case-loc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-gray);margin-bottom:10px} .case-loc .dot{width:5px;height:5px;border-radius:50%;background:var(--c-accent)} .case-body h3{font-size:19px;line-height:1.4;margin-bottom:12px} .case-body p{color:var(--c-gray);font-size:14px;line-height:1.75;margin-bottom:18px} .case-metrics{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; margin-top:auto;padding-top:16px;border-top:1px solid var(--c-border); } .case-metrics li{font-size:11px;color:var(--c-gray);text-align:center;line-height:1.5} .case-metrics b{ display:block;font-size:16px;color:var(--c-primary);font-weight:800;margin-bottom:2px; background:linear-gradient(135deg,#1a6cff,#00b4ff);-webkit-background-clip:text;background-clip:text;color:transparent; } /* ========== 常见问题（独立页面 faq.html） ========== */ .faq-tabs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .faq-tab{ padding:10px 22px;border-radius:30px;font-size:14px;font-weight:600; background:var(--c-light);color:#3a4a5c;border:1px solid var(--c-border);transition:.25s; } .faq-tab:hover{color:var(--c-accent);border-color:rgba(26,108,255,.4);background:#fff} .faq-wrap{max-width:900px;margin:0 auto} .faq-group+.faq-group{margin-top:64px} .faq-group-title{text-align:center;margin-bottom:28px} .faq-group-title .eyebrow{ display:inline-block;font-size:12px;letter-spacing:4px;color:var(--c-accent); font-weight:600;margin-bottom:8px; } .faq-group-title h2{font-size:28px} .faq-wrap .faq-item{ background:#e8f4fc;border:1px solid var(--c-border);border-radius:12px; margin-bottom:14px;overflow:hidden;transition:border-color .25s,box-shadow .25s; } .faq-wrap .faq-item.open{border-color:rgba(26,108,255,.4);box-shadow:var(--shadow-sm)} .faq-wrap .faq-q{ width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:20px 56px 20px 22px;font-family:inherit; font-size:16px;font-weight:600;color:var(--c-primary);line-height:1.6;position:relative; } .faq-wrap .faq-q:hover{color:var(--c-accent-dark)} .faq-ic{position:absolute;right:22px;top:26px;width:12px;height:12px} .faq-ic::before,.faq-ic::after{ content:"";position:absolute;background:var(--c-accent);border-radius:2px;transition:transform .3s,opacity .3s; } .faq-ic::before{left:0;top:5px;width:12px;height:2px} .faq-ic::after{left:5px;top:0;width:2px;height:12px} .faq-wrap .faq-item.open .faq-ic::after{transform:rotate(90deg);opacity:0} .faq-wrap .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease} .faq-wrap .faq-item.open .faq-a{grid-template-rows:1fr;display:grid} .faq-wrap .faq-a>.faq-a-in{overflow:hidden;min-height:0} .faq-a-in{padding:0 22px 22px;border-top:1px solid var(--c-border);margin-top:-1px;padding-top:18px} .faq-a-in p{color:var(--c-gray);font-size:15px;line-height:1.9} .faq-a-in p+p{margin-top:12px} /* ========== 售后服务 ========== */ .svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .svc-step{ background:#fff;border:1px solid var(--c-border);border-radius:14px;padding:30px 26px; transition:.35s;position:relative;overflow:hidden; } .svc-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent} .svc-step-n{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg,#1a6cff,#00b4ff);color:#fff;font-size:18px;font-weight:800; box-shadow:0 8px 18px rgba(0,180,255,.28); } .svc-step h4{font-size:17px;margin-bottom:10px} .svc-step p{color:var(--c-gray);font-size:14px;line-height:1.85} .svc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:14px} .svc-table{width:100%;border-collapse:collapse;min-width:640px;background:#fff;font-size:14px} .svc-table th{ background:var(--c-light);color:var(--c-primary);font-weight:700;text-align:left; padding:16px 20px;font-size:14px;letter-spacing:.5px;white-space:nowrap; } .svc-table td{padding:16px 20px;border-top:1px solid var(--c-border);color:#3a4a5c;line-height:1.7} .svc-table tbody tr{transition:background .25s} .svc-table tbody tr:hover{background:#fafcfd} .svc-table td:first-child{font-weight:600;color:var(--c-primary);white-space:nowrap} .svc-table td:nth-child(2),.svc-table td:nth-child(3){color:var(--c-accent);font-weight:700;white-space:nowrap} /* 深色区块内复用规格列表时需反色 */ .section--dark .spec-list li{color:#cfd8e3} .section--dark .spec-list li b{color:#ffe58a} /* ========== 页脚 ========== */ .footer{background:#0a1a2c;color:#9fb0c5;padding:64px 0 0} .footer a{color:#cfd8e3} .footer a:hover{color:var(--c-accent-soft)} .footer-nav{margin-left:24px} .footer-grid{display:grid;grid-template-columns:2.3fr 1fr 1fr 1fr 1.2fr;gap:20px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)} /* ≤1200px：品牌区独占整行，保证「集团名+副标题」始终一行显示，不被挤压竖排 */ @media (max-width:1200px){ .footer-grid{grid-template-columns:repeat(4,1fr);gap:48px} .footer-brand{grid-column:1 / -1;margin-bottom:4px} } .footer h5{font-size:15px;color:#fff;margin-bottom:18px;letter-spacing:1px} .footer ul li{padding:6px 0;font-size:14px} .footer-brand p{font-size:14px;color:#9fb0c5;line-height:1.8;margin:16px 0} .footer-qr{margin-top:18px;display:flex;gap:24px;align-items:flex-start} .qr-item{text-align:center} .qr-item img{width:120px;height:auto;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25);display:block} .qr-item span{display:block;margin-top:8px;font-size:12px;color:#9fb0c5;letter-spacing:.5px} .footer-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:14px;line-height:1.7} .footer-contact li .ic{color:#fff;flex-shrink:0;margin-top:3px;display:inline-flex} .footer-contact li .ic svg{display:block} /* 手机号：加粗 + 可点击拨号（移动端点击直接呼叫） */ .phone-num{font-weight:700;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} .phone-num:hover,.phone-num:active{color:inherit;text-decoration:underline} .footer-bottom{text-align:center;padding:22px 0;font-size:13px;color:#6f8198} .footer-bottom a{color:#9fb0c5} /* ========== 子页横幅 ========== */ .page-banner{ padding:115px 0 40px;background:linear-gradient(135deg,#0a2540,#0d3458); color:#fff;text-align:center;position:relative;overflow:hidden; } .page-banner::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 30% 50%,rgba(26,108,255,.18),transparent 50%), radial-gradient(circle at 70% 30%,rgba(0,180,255,.18),transparent 50%); } .page-banner::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); } .page-banner .inner{position:relative;z-index:1} .page-banner h1{font-size:42px;color:#fff;margin-bottom:14px} .page-banner .crumb{color:#9fb0c5;font-size:14px} .page-banner .crumb a{color:#cfd8e3} .page-banner .crumb em{font-style:normal;color:var(--c-accent-soft);margin:0 6px} .page-banner .crumb{display:none} /* ========== 关于页内容 ========== */ .about-story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .timeline{position:relative;padding-left:30px;border-left:2px solid var(--c-border)} @media (max-width:768px){ /* 移动端：时间线圆点对齐竖线，并将竖线整体右移，避免圆点被左边缘裁切 */ .timeline{margin-left:24px;padding-left:24px;padding-right:16px} .timeline li::before{left:-31px} } .timeline li{position:relative;padding:0 0 28px} .timeline li::before{ content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;border-radius:50%; background:#fff;border:3px solid var(--c-accent);box-shadow:0 0 0 4px rgba(26,108,255,.15); } .timeline .yr{font-size:13px;color:var(--c-accent);font-weight:700;letter-spacing:1px} .timeline h4{font-size:17px;margin:6px 0 8px} .timeline p{font-size:14px;color:var(--c-gray)} .culture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px} .culture-item{ padding:28px 22px;border-radius:12px;background:#fff;border:1px solid var(--c-border); text-align:center;transition:.35s; } .culture-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent} .culture-item .ic{ width:54px;height:54px;border-radius:14px;margin:0 auto 16px; display:grid;place-items:center;background:linear-gradient(135deg,rgba(26,108,255,.12),rgba(0,180,255,.12)); color:var(--c-accent); } .culture-item h4{font-size:17px;margin-bottom:8px} .culture-item p{font-size:13px;color:var(--c-gray)} /* ========== 产品详情列表 ========== */ .products-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .product-detail{ background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--c-border); transition:.35s; } .product-detail:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)} .product-detail .img{ box-sizing:border-box;height:220px;background:#f5f7fa;overflow:hidden; padding:16px;display:grid;place-items:center; border-bottom:1px solid #eef0f2 } .product-detail .img svg{width:46%;position:relative;z-index:1} .product-detail .img .product-thumb-link{ display:flex;align-items:center;justify-content:center; width:100%;height:100%;position:relative;z-index:1 } .product-detail .img img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; transition:transform .35s } .product-detail .img:hover img{transform:scale(1.05)} .product-detail .info{ padding:22px 20px 20px;background:#fff; position:relative;z-index:1 } .product-detail h3{font-size:18px;margin:4px 0 8px;font-weight:700;color:var(--c-text)} .product-detail .info .cat{font-size:13px;color:var(--c-gray)} .product-detail .desc{ font-size:13.5px;color:var(--c-gray);margin-bottom:14px;line-height:1.7; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .product-detail .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .product-detail .chip-row span{background:#f1f4f8;color:#3a4a5c;font-size:12px;padding:5px 12px;border-radius:8px;white-space:nowrap} .product-detail .more-link{color:var(--c-accent);font-weight:600;font-size:14px;text-decoration:none} .product-detail .more-link:hover{opacity:.8} .spec-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:18px} /* 质保政策列表：每条独占一行 */ .spec-list--warranty{grid-template-columns:1fr;gap:10px 14px} /* 质保政策两栏整体限宽居中：左块向中间靠拢、两块间距收紧 */ .container--warranty .about-grid{max-width:720px;margin:0 auto;gap:48px} .spec-list li{display:flex;gap:8px;font-size:13px;color:#3a4a5c} .spec-list li b{color:var(--c-primary);min-width:64px} /* ========== 新闻列表 ========== */ .news-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;justify-content:center} .nf-tab{ border:1px solid var(--c-border);background:#fff;color:var(--c-text); font-size:14px;font-weight:600;padding:9px 22px;border-radius:30px;cursor:pointer; transition:.25s;font-family:inherit; } a.nf-tab{display:inline-block;text-decoration:none;line-height:1.2} .nf-tab:hover{border-color:var(--c-accent);color:var(--c-accent)} .nf-tab.active{background:linear-gradient(135deg,#1a6cff,#0b4fd6);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(26,108,255,.25)} .news-cat-list a{cursor:pointer} .news-cat-list a em{font-style:normal;color:var(--c-gray);font-weight:400;margin-left:4px} .news-cat-list a:hover{color:var(--c-accent)} .news-wrap{display:grid;grid-template-columns:2fr 1fr;gap:40px} .news-list{display:flex;flex-direction:column;gap:24px} .news-item{ background:#fff;border-radius:14px;padding:26px;border:1px solid var(--c-border); display:grid;grid-template-columns:240px 1fr;gap:24px;transition:.35s; } .news-item:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent} .news-item .img{height:160px;border-radius:10px;background:linear-gradient(135deg,#0a2540,#173f6e);position:relative;overflow:hidden} .news-item .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .news-item h3{font-size:19px;line-height:1.4;margin-bottom:10px} .news-item p{font-size:14px;color:var(--c-gray);margin-bottom:14px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-side{background:#fff;border-radius:14px;padding:26px;border:1px solid var(--c-border);height:fit-content} .news-side h4{font-size:16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--c-border)} .news-side ul li{padding:12px 0;border-bottom:1px dashed var(--c-border);font-size:14px;line-height:1.5} .news-side ul li:last-child{border-bottom:0} .news-side .cat{display:block;font-size:12px;color:var(--c-accent);margin-bottom:4px;font-weight:600} /* 通用分类选项卡（产品/案例/关于我们子栏目） */ .cat-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;justify-content:center} /* 有标签栏的页面，section 顶部间距收窄 */ .section:has(.cat-filter){padding-top:36px;padding-bottom:0} /* 新闻中心：分类筛选条离 banner 的间距与产品中心（:has(.cat-filter) 36px）保持一致 */ .section:has(.news-filter){padding-top:36px} .cf-tab{ border:1px solid var(--c-border);background:#fff;color:var(--c-text); font-size:14px;font-weight:600;padding:9px 22px;border-radius:30px;cursor:pointer; transition:.25s;font-family:inherit; } .cf-tab:hover{border-color:var(--c-accent);color:var(--c-accent)} .cf-tab.active{background:linear-gradient(135deg,#1a6cff,#0b4fd6);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(26,108,255,.25)} .cf-tab a{color:inherit;text-decoration:none} /* 筛选条同时支持 （静态分类页链接）与