@charset "UTF-8"; /* ========================================================================== 嘉乐网络 全站公共样式 视觉基线：v3 企业蓝信任版 ========================================================================== */ /* ============ 基础重置与变量 ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0B3C6B; --navy-2:#12508F; --blue:#1A6FD4; --blue-l:#E8F1FC; --orange:#E8760C; --orange-l:#FFF4E8; --ink:#16202B; --ink-2:#48566A; --ink-3:#7A879B; --line:#DFE7F1; --line-2:#EEF2F8; --bg:#FFFFFF; --bg-2:#F5F8FC; --green:#12805C; --max:1500px; --shadow:0 10px 34px -14px rgba(11,60,107,.24); --ease:cubic-bezier(.2,.7,.3,1); } html{scroll-behavior:smooth} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased; overflow-x:clip; } @supports not (overflow:clip){ html,body{overflow-x:hidden} } /* 修复百度浏览器（X5 内核）吸顶初始错位：body 不再作为滚动容器，nav 高度由 JS 注入 --navh */ html{padding-top:var(--navh,0px);scroll-padding-top:calc(var(--navh,0px) + 16px)} img,svg{display:block;max-width:100%} /* ---------- 图标系统 ---------- 全站图标（54 个）统一定义在 inc/site.php 的 wz_sprite() 里， 由 wz_foot() 在 之前输出一次（不是每个页面顶部，已按要求挪到页尾）。 页面内用 复用。 描边类图标用 .icn（fill:none + 描边取 currentColor）； 填充类图标（如星标）用 .icn-f（fill:currentColor）。 描边粗细由引用处的 stroke-width 单独控制。 ★ 尺寸规则（重要，改前先读）： 1. 这里给 .icn 一个「跟随字号」的默认尺寸（1em）。 必须给，否则 没有 width/height、又只受 img,svg{max-width:100%} 约束时， 会按容器宽度撑开（几百像素），图标看起来巨大。 2. 需要更大或更小的图标，由「更具体的上下文选择器」覆盖即可 （如 .svc-ico svg{width:26px}、.case-link svg{width:14px}）， 它们的选择器权重高于 .icn，天然优先。 3. 引用处不要再写 width/height 属性——属性优先级低于 CSS，写了也会被 .icn 盖掉， 想改尺寸一律走 CSS。唯一例外见下面 .burger .icn。 */ .icn{fill:none;stroke:currentColor;width:1em;height:1em;flex:none} .icn-f{fill:currentColor;stroke:none;width:1em;height:1em;flex:none} /* 汉堡按钮里的图标跟字号无关，固定 20px（原设计稿尺寸） */ .burger .icn{width:20px;height:20px} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul,ol{list-style:none} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,56px)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} h1,h2,h3,h4,h5{line-height:1.28;letter-spacing:-.02em;font-weight:700} /* ============ 顶部工具条 ============ */ .topbar{background:var(--navy);color:rgba(255,255,255,.78);font-size:13px;position:relative;z-index:101} .topbar-in{display:flex;align-items:center;justify-content:space-between;height:42px;gap:20px} .topbar-l{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .topbar-l span{display:inline-flex;align-items:center;gap:7px} .topbar-l svg{width:14px;height:14px;color:rgba(255,255,255,.55)} .topbar-r{display:flex;align-items:center;gap:18px} .topbar-r a:hover{color:#fff} .topbar-r .dot{width:1px;height:12px;background:rgba(255,255,255,.25)} /* ============ 导航 ============ */ .nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px -6px rgba(0,0,0,.12)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px} .logo{display:flex;align-items:center;gap:13px;flex:none} .logo-mark{ width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none; background:linear-gradient(140deg,var(--navy-2),var(--blue));color:#fff;font-weight:800;font-size:19px; } .logo-t b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.2} .logo-t small{display:block;font-size:11.5px;color:var(--ink-3);letter-spacing:.06em} .menu{display:flex;align-items:center;gap:2px} .menu>li{position:relative} .menu a{ display:flex;align-items:center;gap:6px;padding:11px 15px;border-radius:8px; font-size:15px;font-weight:500;color:var(--ink-2);transition:color .25s,background .25s; } .menu a:hover{color:var(--blue);background:var(--blue-l)} .menu a.active{color:var(--blue);font-weight:600} .menu a svg{width:13px;height:13px} /* 二级下拉 */ .menu>li>.sub{ position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid var(--line); border-radius:10px;box-shadow:0 18px 40px -18px rgba(11,60,107,.4);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease); } .menu>li:hover>.sub{opacity:1;visibility:visible;transform:none} .menu>li>.sub a{padding:10px 14px;font-size:14px;border-radius:7px} .menu>li>.sub a small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px} .nav-r{display:flex;align-items:center;gap:16px;flex:none} .nav-phone{text-align:right;line-height:1.25} .nav-phone small{display:block;font-size:11.5px;color:var(--ink-3)} .nav-phone b{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px; border-radius:8px;font-size:15px;font-weight:600;transition:all .35s var(--ease);white-space:nowrap; } .btn-p{background:var(--orange);color:#fff;box-shadow:0 8px 20px -8px rgba(232,118,12,.6)} .btn-p:hover{background:#D46A08;transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(232,118,12,.7)} .btn-b{background:var(--navy);color:#fff} .btn-b:hover{background:var(--navy-2);transform:translateY(-2px)} .btn-o{border:1px solid var(--line);color:var(--ink);background:#fff} .btn-o:hover{border-color:var(--blue);color:var(--blue)} .btn-sm{height:42px;padding:0 18px;font-size:14px} .burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;place-items:center} /* ============ 面包屑 ============ */ .breadcrumb{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; font-size:13.5px;color:var(--ink-3); } .breadcrumb a{transition:color .3s} .breadcrumb a:hover{color:var(--blue)} .breadcrumb i{font-style:normal;opacity:.5} .breadcrumb b{color:var(--ink);font-weight:500} /* ============ 内页页头 ============ */ .page-head{ background:linear-gradient(120deg,#0B3C6B 0%,#12508F 45%,#1A6FD4 100%); color:#fff;position:relative;overflow:hidden;padding:52px 0 58px; } .page-head::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; } .page-head::after{ content:"";position:absolute;width:760px;height:760px;right:-220px;top:-300px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 62%); } .page-head-in{position:relative} .page-head .breadcrumb{color:rgba(255,255,255,.6);margin-bottom:20px} .page-head .breadcrumb a:hover{color:#fff} .page-head .breadcrumb b{color:#fff} .page-head h1{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1.24} .page-head h1 em{font-style:normal;color:#FFD8A8} .page-head .desc{ margin-top:18px;font-size:clamp(15px,1.1vw,17px);color:rgba(255,255,255,.82); line-height:1.9;max-width:760px; } .page-head .meta{display:flex;gap:0;flex-wrap:wrap;margin-top:30px;border-top:1px solid rgba(255,255,255,.18);padding-top:22px} .page-head .meta div{padding-right:34px;margin-right:34px;border-right:1px solid rgba(255,255,255,.15)} .page-head .meta div:last-child{border-right:none;margin:0;padding:0} .page-head .meta b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15} .page-head .meta span{font-size:12.5px;color:rgba(255,255,255,.65)} /* ============ 通用区块 ============ */ .sec{padding:clamp(58px,7vw,100px) 0} .sec.alt{background:var(--bg-2)} .sec-head{text-align:center;max-width:820px;margin:0 auto clamp(34px,4vw,58px)} .sec-tag{ display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--blue); background:var(--blue-l);padding:6px 14px;border-radius:999px;margin-bottom:16px; } .sec-head h2{font-size:clamp(25px,3.1vw,40px);letter-spacing:-.035em} .sec-head h2 em{font-style:normal;color:var(--blue)} .sec-head p{margin-top:16px;font-size:clamp(14.8px,1.08vw,16.8px);color:var(--ink-2);line-height:1.85} /* 左对齐的区块标题 */ .sec-head.left{text-align:left;margin-left:0} .sec-head.left h2{font-size:clamp(23px,2.6vw,34px)} /* ============ 两栏布局（正文 + 侧栏） ============ */ .layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,4vw,56px);align-items:start} /* 网格项默认 min-width:auto，其最小宽度会取内容的最小内容宽度。 正文区内含 min-width:640px 的对比表格，导致 .art-body 被撑到 640px 宽， 在 390px 手机上把整页撑到 660px、产生横向滚动（表格虽在 .tbl-wrap 内， 但普通块级 .tbl-wrap 的 overflow-x:auto 不会阻止最小内容宽度向上传播）。 置 min-width:0 后网格项可正常收缩，表格回归容器内独立横向滚动。 */ .layout>*{min-width:0} .side{position:sticky;top:100px;display:grid;gap:18px} /* 侧栏导航 */ .side-nav{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .side-nav h4,.side-nav h3{ padding:18px 22px;font-size:14px;letter-spacing:.06em;color:var(--ink-3); text-transform:uppercase;border-bottom:1px solid var(--line);background:var(--bg-2);font-weight:700; } .side-nav a{ display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px; font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:all .3s; } .side-nav a:last-child{border-bottom:none} .side-nav a:hover{background:var(--blue-l);color:var(--blue);padding-left:26px} .side-nav a.on{background:var(--blue-l);color:var(--blue);font-weight:600;border-left:3px solid var(--blue)} .side-nav a span{font-size:12px;color:var(--ink-3)} /* 侧栏卡片 */ .side-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px} .side-card h4,.side-card h3{font-size:17px;margin-bottom:12px;letter-spacing:-.02em} .side-card p{font-size:13.8px;color:var(--ink-2);line-height:1.85} .side-card .btn{margin-top:18px;width:100%} .side-card.blue{background:linear-gradient(150deg,var(--navy),var(--blue));color:#fff;border:none} .side-card.blue h4,.side-card.blue h3{color:#fff} .side-card.blue p{color:rgba(255,255,255,.86)} .side-card.blue .btn{background:#fff;color:var(--navy)} .side-card.blue .btn:hover{background:var(--orange-l)} .side-card .list{display:grid;gap:12px;margin-top:16px} .side-card .list li{display:flex;gap:10px;font-size:13.6px;color:var(--ink-2);line-height:1.7} .side-card .list svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green)} .side-card .tel{ display:block;font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:8px 0 4px; } /* ============ 文章正文 ============ */ .art-body{font-size:15.5px;color:var(--ink-2);line-height:1.95} .art-body>*{margin-bottom:20px} .art-body h2{ font-size:clamp(21px,2.1vw,27px);color:var(--ink);margin:44px 0 18px; padding-left:14px;border-left:4px solid var(--blue);letter-spacing:-.025em;line-height:1.4; } .art-body h3{font-size:18.5px;color:var(--ink);margin:32px 0 14px;letter-spacing:-.02em} .art-body h4{font-size:16px;color:var(--ink);margin:24px 0 10px} .art-body p{color:var(--ink-2)} .art-body strong{color:var(--ink);font-weight:600} .art-body a{color:var(--blue);border-bottom:1px solid rgba(26,111,212,.32)} .art-body a:hover{border-bottom-color:var(--blue)} .art-body ul,.art-body ol{display:grid;gap:11px;padding-left:2px} .art-body ul li{position:relative;padding-left:24px} .art-body ul li::before{ content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--blue); } .art-body ol{counter-reset:num} .art-body ol li{position:relative;padding-left:32px;counter-increment:num} .art-body ol li::before{ content:counter(num);position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:6px; background:var(--blue-l);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center; } .art-body .lead{font-size:17px;color:var(--ink);line-height:1.9;font-weight:500} /* 图文块 */ .art-figure{margin:32px 0} .art-figure .ph{ height:clamp(200px,24vw,320px);border-radius:12px;display:grid;place-items:center; color:#fff;font-size:15px;letter-spacing:.04em;position:relative;overflow:hidden; } .art-figure .ph::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:28px 28px; } .art-figure .ph span{position:relative} .art-figure figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);text-align:center} /* 引用 */ .art-quote{ margin:32px 0;padding:26px 30px;background:var(--bg-2);border-left:4px solid var(--blue); border-radius:0 12px 12px 0; } .art-quote p{font-size:16.5px;color:var(--ink);line-height:1.85;font-style:italic} .art-quote cite{display:block;margin-top:12px;font-size:13px;color:var(--ink-3);font-style:normal} /* 提示框 */ .callout{padding:20px 24px;border-radius:12px;margin:26px 0;font-size:14.5px;line-height:1.85} .callout.info{background:var(--blue-l);border:1px solid #C9DDF7;color:var(--ink-2)} .callout.warn{background:var(--orange-l);border:1px solid #F5D6B8;color:var(--ink-2)} .callout b{color:var(--ink)} .callout.info b{color:var(--navy-2)} .callout.warn b{color:var(--orange)} /* 文章头部信息 */ .art-head{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)} .art-head h1{font-size:clamp(24px,2.9vw,38px);letter-spacing:-.035em;line-height:1.35;margin-bottom:16px} .art-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)} .art-meta span{display:inline-flex;align-items:center;gap:7px} .art-meta svg{width:15px;height:15px} /* 标签 */ .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px} .tags a{ font-size:12.5px;padding:5px 13px;border-radius:999px;background:var(--bg-2); border:1px solid var(--line);color:var(--ink-2);transition:all .3s; } .tags a:hover{background:var(--blue-l);border-color:#C9DDF7;color:var(--blue)} /* 上下篇 */ .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px;padding-top:32px;border-top:1px solid var(--line)} .post-nav a{ padding:22px 24px;border:1px solid var(--line);border-radius:12px;transition:all .35s var(--ease);background:#fff; } .post-nav a:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-3px)} .post-nav a .k{font-size:12px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase} .post-nav a .t{display:block;margin-top:8px;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.55} .post-nav a.prev{text-align:left} .post-nav a.next{text-align:right} /* ============ 新闻列表 ============ */ .nl{display:grid;gap:20px} .nl-item{ display:grid;grid-template-columns:180px 1fr;gap:0;background:#fff; border:1px solid var(--line);border-radius:12px;overflow:hidden; transition:box-shadow .4s,transform .4s var(--ease); } .nl-item:hover{box-shadow:var(--shadow);transform:translateY(-4px)} .nl-date{ padding:26px 22px;background:var(--bg-2);border-right:1px solid var(--line); display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; } .nl-date b{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1} .nl-date span{font-size:12.5px;color:var(--ink-3);margin-top:6px} .nl-date .cat{ margin-top:12px;font-size:11.5px;padding:3px 10px;border-radius:999px; background:var(--blue-l);color:var(--blue);font-weight:600; } .nl-body{padding:24px 28px} .nl-body h3{font-size:19px;letter-spacing:-.025em;line-height:1.5;margin-bottom:10px;transition:color .3s} .nl-item:hover .nl-body h3{color:var(--blue)} .nl-body p{font-size:14.2px;color:var(--ink-2);line-height:1.8} .nl-body .more{ display:inline-flex;align-items:center;gap:7px;margin-top:14px; font-size:13.5px;color:var(--blue);font-weight:600; } .nl-body .more svg{width:14px;height:14px;transition:transform .3s} .nl-item:hover .more svg{transform:translateX(4px)} /* 分类筛选栏 */ .filter-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:16px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px; } .filter-bar .lb{font-size:13px;color:var(--ink-3);margin-right:6px} .filter-bar button{ padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff; font-size:14px;color:var(--ink-2);transition:all .3s var(--ease); } .filter-bar button:hover{border-color:var(--blue);color:var(--blue)} .filter-bar button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .filter-bar .count{margin-left:auto;font-size:13px;color:var(--ink-3)} /* 分页 */ .pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px} .pager a,.pager span{ min-width:42px;height:42px;padding:0 14px;border-radius:9px;display:grid;place-items:center; font-size:14.5px;border:1px solid var(--line);color:var(--ink-2);transition:all .3s; } .pager a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)} .pager span.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .pager span.dis{opacity:.45} /* ============ 案例（图片式，统一定义见下方「图片式案例卡」） ============ */ /* 案例详情 */ .proj-info{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:34px 0; } .proj-info div{padding:20px 22px;border-right:1px solid var(--line)} .proj-info div:last-child{border-right:none} .proj-info .k{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase} .proj-info .v{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:6px} .result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0} .result{ background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:26px;text-align:center; } .result b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;color:var(--green);letter-spacing:-.04em;line-height:1.1} .result span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-3)} .result small{display:block;margin-top:10px;font-size:12px;color:var(--ink-3);opacity:.8} /* 前后对比 */ .ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0} .ba-col{border:1px solid var(--line);border-radius:12px;overflow:hidden} .ba-col .h{ padding:14px 20px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px; } .ba-col.before .h{background:#FBECEC;color:#B03A3A} .ba-col.after .h{background:#E6F5EE;color:var(--green)} .ba-col .h svg{width:16px;height:16px} .ba-col ul{padding:20px;display:grid;gap:11px} .ba-col li{font-size:14px;color:var(--ink-2);line-height:1.7;display:flex;gap:9px;align-items:flex-start} .ba-col li svg{width:15px;height:15px;flex:none;margin-top:4px} .ba-col.before li svg{color:#D08A8A} .ba-col.after li svg{color:var(--green)} /* ============ 服务 ============ */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .svc{ background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 26px; display:flex;flex-direction:column;position:relative;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s,border-color .3s; } .svc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--navy-2),var(--blue));transform:scaleX(0);transition:transform .5s var(--ease);transform-origin:left} .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#C7D9EE} .svc:hover::before{transform:scaleX(1)} .svc-ico{ width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px; background:var(--blue-l);color:var(--blue); } .svc-ico svg{width:26px;height:26px} .svc h3{font-size:19px;margin-bottom:10px} .svc>p{font-size:14.2px;color:var(--ink-2);line-height:1.8;flex:1} .svc ul{margin:18px 0 22px;display:grid;gap:9px} .svc li{font-size:13.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;line-height:1.65} .svc li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--green)} .svc-foot{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .svc-price{font-size:13px;color:var(--ink-3)} .svc-price b{font-size:21px;color:var(--orange);font-weight:800;letter-spacing:-.02em} .svc-link{font-size:13.5px;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:5px} .svc-link svg{width:14px;height:14px;transition:transform .3s} .svc:hover .svc-link svg{transform:translateX(4px)} /* 服务详情：特性列表 */ .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0} .feat{ display:grid;grid-template-columns:auto 1fr;gap:16px;padding:24px; background:#fff;border:1px solid var(--line);border-radius:12px;transition:box-shadow .4s,transform .4s var(--ease); } .feat:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .feat .ic{ width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center; background:var(--blue-l);color:var(--blue); } .feat .ic svg{width:21px;height:21px} .feat h4,.feat h3{font-size:16.5px;margin-bottom:8px} .feat p{font-size:13.8px;color:var(--ink-2);line-height:1.8} /* 交付物清单 */ .deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin:30px 0} .deliver .row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line-2);align-items:center} .deliver .row:nth-last-child(-n+2){border-bottom:none} .deliver .row .n{font-size:14.5px;color:var(--ink);font-weight:500} .deliver .row .n small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:3px} .deliver .row .c{font-size:13.5px;color:var(--green);font-weight:600;white-space:nowrap} /* ============ 行业方案 ============ */ .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} .ind{border-right:1px solid var(--line);padding:32px 26px;transition:background .35s} .ind:last-child{border-right:none} .ind:hover{background:var(--blue-l)} .ind-n{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.08em} .ind h3{font-size:18px;margin:12px 0 12px} .ind p{font-size:13.8px;color:var(--ink-2);line-height:1.8} .ind .key{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.8px;color:var(--blue);line-height:1.7} /* 行业详情块 */ .ind-block{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center; padding:clamp(34px,4vw,56px) 0;border-bottom:1px solid var(--line); } .ind-block:last-child{border-bottom:none} .ind-block.rev .iv{order:2} .ind-block .iv{ border-radius:14px;min-height:280px;position:relative;overflow:hidden; display:grid;place-items:center;color:#fff;text-align:center;padding:36px; } .ind-block .iv::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:28px 28px; } .ind-block .iv>div{position:relative} .ind-block .iv b{display:block;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.03em} .ind-block .iv span{display:block;margin-top:10px;font-size:14px;opacity:.85} .ind-block .tx h3{font-size:clamp(21px,2.2vw,29px);letter-spacing:-.03em;margin-bottom:6px} .ind-block .tx .en{font-size:12px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:18px} .ind-block .tx p{font-size:15px;color:var(--ink-2);line-height:1.9} .ind-block .tx ul{margin-top:20px;display:grid;gap:11px} .ind-block .tx li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;line-height:1.7} .ind-block .tx li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green)} /* ============ 六宫格 ============ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .why{ display:grid;grid-template-columns:auto 1fr;gap:18px;padding:28px; background:#fff;border:1px solid var(--line);border-radius:12px;transition:box-shadow .4s,transform .4s var(--ease); } .why:hover{box-shadow:var(--shadow);transform:translateY(-4px)} .why-ico{ width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex:none; background:var(--orange-l);color:var(--orange); } .why-ico svg{width:23px;height:23px} .why h3{font-size:17px;margin-bottom:8px} .why p{font-size:14px;color:var(--ink-2);line-height:1.8} /* ============ 流程 ============ */ .proc{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative} .proc::before{content:"";position:absolute;left:5%;right:5%;top:26px;height:2px;background:linear-gradient(90deg,var(--blue-l),var(--blue),var(--blue-l));z-index:0} .pstep{position:relative;text-align:center;padding:0 10px;z-index:1} .pstep .dot{ width:52px;height:52px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center; background:#fff;border:2px solid var(--blue);color:var(--blue);font-weight:800;font-size:15px; transition:all .4s var(--ease); } .pstep:hover .dot{background:var(--blue);color:#fff;transform:scale(1.08);box-shadow:0 10px 24px -8px rgba(26,111,212,.6)} .pstep h4,.pstep h3{font-size:16px;margin-bottom:8px} .pstep p{font-size:13.3px;color:var(--ink-3);line-height:1.7} .pstep .d{display:inline-block;margin-top:10px;font-size:11.5px;background:var(--blue-l);color:var(--blue);padding:3px 10px;border-radius:999px;font-weight:600} /* ============ 时间线（发展历程） ============ */ .timeline{position:relative;padding-left:34px} .timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue),var(--line))} .tl-item{position:relative;padding-bottom:36px} .tl-item:last-child{padding-bottom:0} .tl-item::before{ content:"";position:absolute;left:-30px;top:7px;width:14px;height:14px;border-radius:50%; background:#fff;border:3px solid var(--blue); } .tl-item .y{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.01em} .tl-item h4,.tl-item h3{font-size:17px;margin:6px 0 8px} .tl-item p{font-size:14.2px;color:var(--ink-2);line-height:1.85} /* ============ 团队 ============ */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .team{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center;transition:box-shadow .4s,transform .4s var(--ease)} .team:hover{box-shadow:var(--shadow);transform:translateY(-5px)} .team .av{ width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center; color:#fff;font-size:26px;font-weight:700; } .team b{display:block;font-size:16.5px} .team .role{font-size:13px;color:var(--blue);margin-top:5px;font-weight:600} .team p{font-size:13.5px;color:var(--ink-2);line-height:1.8;margin-top:12px} /* ============ 资质墙 ============ */ .cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .cert{ background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 20px;text-align:center; transition:border-color .3s,transform .4s var(--ease); } .cert:hover{border-color:var(--blue);transform:translateY(-4px)} .cert .ic{ width:46px;height:46px;margin:0 auto 14px;border-radius:11px;display:grid;place-items:center; background:var(--blue-l);color:var(--blue); } .cert .ic svg{width:23px;height:23px} .cert b{display:block;font-size:14.5px} .cert span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px} /* ============ 数据表格 ============ */ .tbl-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:12px;background:#fff} .tbl{width:100%;border-collapse:collapse;font-size:14.3px;min-width:640px} .tbl th{ background:var(--bg-2);padding:15px 20px;text-align:left;font-size:13px; letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line); } .tbl td{padding:16px 20px;border-bottom:1px solid var(--line-2);color:var(--ink-2);line-height:1.75} .tbl tr:last-child td{border-bottom:none} .tbl td:first-child{color:var(--ink);font-weight:600} .tbl .yes{color:var(--green);font-weight:600} .tbl .no{color:#A5B0C0} .tbl tbody tr:hover{background:#FCFDFF} /* ============ 价格 ============ */ .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch} .plan{ background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column; transition:box-shadow .4s,transform .4s var(--ease);position:relative; } .plan:hover{box-shadow:var(--shadow);transform:translateY(-6px)} .plan.pop{border:2px solid var(--blue);box-shadow:0 18px 44px -22px rgba(26,111,212,.5)} .plan-h{padding:28px 26px 22px;border-bottom:1px solid var(--line);background:var(--bg-2);border-radius:10px 10px 0 0} .plan.pop .plan-h{background:var(--blue-l)} /* 「咨询最多」徽标：绝对定位于套餐卡片顶部居中。 注意：徽标是 .plan 的直接子元素（不在 .plan-h 内）， 原选择器写成 .plan-h .f 匹配不到，导致徽标掉落到常规文档流中显示异常 —— 这里修正为 .plan .f */ .plan .f{ position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2; background:var(--orange);color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:999px; box-shadow:0 4px 14px -4px rgba(244,114,22,.6); } .plan-h h3{font-size:20px;margin-bottom:6px} .plan-h .for{font-size:13.2px;color:var(--ink-3);line-height:1.7} .plan-b{padding:26px;display:flex;flex-direction:column;flex:1} .plan-price{display:flex;align-items:baseline;gap:5px} .plan-price b{font-size:33px;font-weight:800;letter-spacing:-.04em;color:var(--navy);line-height:1} .plan-price span{font-size:14px;color:var(--ink-3)} .plan-unit{font-size:13px;color:var(--ink-3);margin:8px 0 22px} .plan ul{display:grid;gap:12px;margin-bottom:26px} .plan li{font-size:14px;color:var(--ink-2);line-height:1.65;display:flex;gap:10px;align-items:flex-start} .plan li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green)} .plan li.no{color:#A5B0C0} .plan li.no svg{color:#C6CFDB} .plan .btn{margin-top:auto;width:100%} .price-note{margin-top:26px;text-align:center;font-size:13px;color:var(--ink-3);line-height:1.8} /* ============ 服务保障 ============ */ .guar{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} .guar-item{padding:30px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s} .guar-item:hover{background:var(--bg-2)} .guar-item:nth-child(3n){border-right:none} .guar-item:nth-last-child(-n+3){border-bottom:none} .guar-item h4,.guar-item h3{font-size:16.5px;margin:14px 0 10px;display:flex;align-items:center;gap:10px} .guar-item .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--blue-l);color:var(--blue);flex:none} .guar-item .ic svg{width:19px;height:19px} .guar-item p{font-size:13.8px;color:var(--ink-2);line-height:1.8} /* ============ 客户评价 ============ */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .quote{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;display:flex;flex-direction:column} .quote .stars{display:flex;gap:3px;color:#F5A623;margin-bottom:16px} .quote .stars svg{width:16px;height:16px} .quote p{font-size:14.8px;line-height:1.9;color:var(--ink-2);flex:1} .quote-by{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .quote-by .av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px} .quote-by b{display:block;font-size:14.5px} .quote-by span{font-size:12.5px;color:var(--ink-3)} /* ============ 资讯卡片 ============ */ .news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .4s,transform .4s var(--ease);display:flex;flex-direction:column} .news-item:hover{box-shadow:var(--shadow);transform:translateY(-5px)} .news-vis{height:130px;background:linear-gradient(130deg,var(--navy-2),var(--blue));position:relative;display:flex;align-items:center;padding:24px} .news-vis span{color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.9} .news-body{padding:24px;display:flex;flex-direction:column;flex:1} .news-body .date{font-size:12.5px;color:var(--ink-3)} .news-body h4,.news-body h3{font-size:17px;margin:10px 0 12px;line-height:1.55} .news-body p{font-size:13.8px;color:var(--ink-2);line-height:1.8} .news-body .more{margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--blue);font-weight:600;display:inline-flex;gap:6px;align-items:center} .news-body .more svg{width:14px;height:14px;transition:transform .3s} .news-item:hover .more svg{transform:translateX(4px)} /* ============ FAQ ============ */ .faq-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start} /* 首页 FAQ 专用：左右两列等宽问答，均为 .acc 手风琴。 常见问题页（faq.html）沿用上面的 1.25fr / .75fr 非等宽结构，故独立成类以免互相影响 */ .faq-wrap.faq-2col{grid-template-columns:1fr 1fr;gap:26px} .acc{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} /* 单列问答收窄容器（pricing.html「价格疑问」使用） 840px = 1500px 容器在 .faq-wrap（1.25fr/.75fr、gap 44px）下的左列实际宽度， 与常见问题页的问答列严格同宽，避免长行降低可读性 */ .acc-narrow{max-width:840px;margin:0 auto} .acc-item{border-bottom:1px solid var(--line)} .acc-item:last-child{border-bottom:none} .acc-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 26px;text-align:left;font-size:16px;font-weight:600;transition:background .3s,color .3s; } .acc-q:hover{background:var(--bg-2);color:var(--blue)} .acc-ico{ width:26px;height:26px;flex:none;position:relative;border:1px solid var(--line);border-radius:50%; transition:all .4s var(--ease); } .acc-ico::before,.acc-ico::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease),opacity .3s} .acc-ico::before{width:11px;height:1.6px;top:11px;left:6.5px} .acc-ico::after{width:1.6px;height:11px;top:6.5px;left:11.5px} .acc-item.on .acc-q{color:var(--blue);background:var(--blue-l)} .acc-item.on .acc-ico{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(180deg)} .acc-item.on .acc-ico::after{opacity:0} .acc-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .acc-a p{padding:0 26px 22px;font-size:14.5px;color:var(--ink-2);line-height:1.9} .faq-side{position:sticky;top:100px;display:grid;gap:18px} .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px} .card h3{font-size:18px;margin-bottom:12px} .card p{font-size:14px;color:var(--ink-2);line-height:1.85} .card .btn{width:100%;margin-top:18px} .card.blue{background:linear-gradient(150deg,var(--navy),var(--blue));color:#fff;border:none} .card.blue h3,.card.blue p{color:#fff} .card.blue p{color:rgba(255,255,255,.85)} .card.blue .btn{background:#fff;color:var(--navy)} .card.blue .btn:hover{background:var(--orange-l)} .card .list{display:grid;gap:12px;margin-top:16px} .card .list li{display:flex;gap:10px;font-size:13.8px;color:var(--ink-2);line-height:1.7} .card .list svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green)} /* FAQ 分类锚点 */ .faq-cats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:38px} .faq-cats a{ padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:#fff; font-size:14px;color:var(--ink-2);transition:all .3s var(--ease); } .faq-cats a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l)} /* ============ 通用表单 ============ */ .form-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(26px,3vw,40px)} .form-box h3{font-size:21px;letter-spacing:-.025em;margin-bottom:6px} .form-box .tip{font-size:13.5px;color:var(--ink-3);margin-bottom:24px} .fg{margin-bottom:18px} .fg label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px} .fg label i{color:var(--orange);font-style:normal;margin-left:3px} .fg input,.fg select,.fg textarea{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:14.5px; font-family:inherit;background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s; } .fg textarea{resize:vertical;min-height:92px} .fg input::placeholder,.fg textarea::placeholder{color:#AEB7C4} .fg input:focus,.fg select:focus,.fg textarea:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,111,212,.12); } .fg select{cursor:pointer} .fg.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-box .btn{width:100%;margin-top:6px} .form-box .note{margin-top:14px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.7} /* ============ 联系页 ============ */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start} .info-list{display:grid;gap:0;border-top:1px solid var(--line)} .info-list li{ display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start; padding:24px 0;border-bottom:1px solid var(--line); } .info-list .ic{ width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none; background:var(--blue-l);color:var(--blue); } .info-list .ic svg{width:22px;height:22px} .info-list .k{font-size:12px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase} .info-list .v b{display:block;font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-top:4px} .info-list .v span{display:block;font-size:13.8px;color:var(--ink-2);margin-top:4px;line-height:1.75} .map-box{ height:280px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2); display:grid;place-items:center;text-align:center;padding:30px; } .map-box .pin{width:44px;height:44px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px} .map-box .pin svg{width:22px;height:22px} .map-box b{display:block;font-size:16px} .map-box span{display:block;font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.7} /* 服务区域 */ .area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .area{padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .3s,transform .35s var(--ease)} .area:hover{border-color:var(--blue);transform:translateY(-3px)} .area b{display:block;font-size:15.5px} .area span{display:block;font-size:13px;color:var(--ink-3);margin-top:5px;line-height:1.7} /* ============ 首页专属：Banner 轮播 ============ */ .hero{position:relative;overflow:hidden;background:#0A1F33} .banner-slider{position:relative;height:clamp(460px,62vw,660px);overflow:hidden} .banner-track{display:flex;height:100%;transition:transform .8s var(--ease)} .banner-slide{flex:none;width:100%;height:100%;position:relative} /* 图片改用 双源（WebP 优先、JPG 回退）后，img 外层多了 。 视觉参数保持 V3_kokl 原版不变，仅把定位/缩放适配到 picture 与 img 两级。 */ .banner-slide>picture{position:absolute;inset:0;display:block} .banner-slide>picture img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.08);transition:transform 6s linear; } .banner-slide.on img{transform:scale(1)} .banner-slide::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(5,20,38,.88) 0%,rgba(7,30,54,.62) 46%,rgba(7,30,54,.18) 100%); } .banner-txt{position:absolute;inset:0;display:flex;align-items:center} .banner-txt-in{position:relative;z-index:2;width:100%} .banner-tag{ display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.18em; color:rgba(255,255,255,.75);font-weight:600;margin-bottom:20px; } .banner-tag::before{content:"";width:34px;height:1px;background:var(--orange)} /* 主标题：屏 1 为 H1（全站唯一），屏 2 为 H2，两者共用同一套视觉 */ .banner-txt h1,.banner-txt h2{font-size:clamp(30px,4.2vw,58px);letter-spacing:-.035em;line-height:1.2;font-weight:800;color:#fff} .banner-txt h1 .line,.banner-txt h2 .line{display:block;overflow:hidden} .banner-txt h1 .line>span,.banner-txt h2 .line>span{ display:block;transform:translateY(110%);opacity:0; transition:transform .9s var(--ease),opacity .9s var(--ease); } .banner-slide.on h1 .line:nth-child(1)>span,.banner-slide.on h2 .line:nth-child(1)>span{transition-delay:.15s} .banner-slide.on h1 .line:nth-child(2)>span,.banner-slide.on h2 .line:nth-child(2)>span{transition-delay:.28s} .banner-slide.on h1 .line:nth-child(3)>span,.banner-slide.on h2 .line:nth-child(3)>span{transition-delay:.41s} .banner-slide.on h1 .line>span,.banner-slide.on h2 .line>span{transform:translateY(0);opacity:1} .banner-txt .sub{ margin-top:22px;font-size:clamp(14.5px,1.15vw,17px);color:rgba(255,255,255,.82); line-height:1.9;max-width:620px;opacity:0;transform:translateY(18px); transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s; } .banner-slide.on .sub{opacity:1;transform:none} .banner-txt .cta{ display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;opacity:0;transform:translateY(18px); transition:opacity .9s var(--ease) .65s,transform .9s var(--ease) .65s; } .banner-slide.on .cta{opacity:1;transform:none} .banner-txt .cta .btn-p{background:var(--orange);color:#fff} .banner-txt .cta .btn-ow{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)} .banner-txt .cta .btn-ow:hover{background:rgba(255,255,255,.14);border-color:#fff} .banner-txt .meta{ display:flex;gap:0;flex-wrap:wrap;margin-top:38px;border-top:1px solid rgba(255,255,255,.2); padding-top:24px;opacity:0;transform:translateY(18px); transition:opacity .9s var(--ease) .8s,transform .9s var(--ease) .8s; } .banner-slide.on .meta{opacity:1;transform:none} .banner-txt .meta div{padding-right:36px;margin-right:36px;border-right:1px solid rgba(255,255,255,.16)} .banner-txt .meta div:last-child{border-right:none;margin:0;padding:0} .banner-txt .meta b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff} .banner-txt .meta span{font-size:12.5px;color:rgba(255,255,255,.62)} /* 轮播箭头与圆点 */ .banner-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:48px;height:48px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff; backdrop-filter:blur(6px);transition:background .3s,transform .3s; } .banner-arrow:hover{background:rgba(255,255,255,.24)} .banner-arrow svg{width:20px;height:20px} .banner-arrow.prev{left:26px} .banner-arrow.next{right:26px} .banner-arrow.prev:hover{transform:translateY(-50%) translateX(-3px)} .banner-arrow.next:hover{transform:translateY(-50%) translateX(3px)} .banner-dot{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5; display:flex;gap:10px; } .banner-dot button{ width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35); transition:all .4s var(--ease); } .banner-dot button.on{background:var(--orange);width:26px;border-radius:999px} /* ============ 首页专属：信任条 ============ */ .trust{background:var(--bg-2);border-bottom:1px solid var(--line);padding:26px 0} .trust-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .trust-in>p{font-size:14px;font-weight:600;color:var(--ink-2);flex:none} .trust-items{display:flex;gap:14px;flex-wrap:wrap} .trust-items span{ display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2); background:#fff;border:1px solid var(--line);padding:8px 15px;border-radius:999px; } .trust-items svg{width:15px;height:15px;color:var(--green)} /* ============ 首页专属：关于分栏 ============ */ .about-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} .about-vis{ border-radius:14px;overflow:hidden;background:linear-gradient(140deg,var(--navy),var(--blue)); min-height:400px;position:relative;display:grid;place-items:center;padding:40px;text-align:center;color:#fff; } .about-vis::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:34px 34px; } .about-vis>div{position:relative} .about-vis .big{font-size:clamp(40px,5vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1} .about-vis .t{margin-top:12px;font-size:15px;color:rgba(255,255,255,.8)} .about-vis .row{display:flex;gap:0;margin-top:34px;border-top:1px solid rgba(255,255,255,.2);padding-top:22px} .about-vis .row div{flex:1;padding:0 14px;border-right:1px solid rgba(255,255,255,.15)} .about-vis .row div:last-child{border-right:none} .about-vis .row b{display:block;font-size:24px;font-weight:800} .about-vis .row span{font-size:12.5px;color:rgba(255,255,255,.7)} .about-txt h2{font-size:clamp(25px,3vw,38px);letter-spacing:-.035em;margin-top:6px} .about-txt>p{margin-top:18px;font-size:15.5px;color:var(--ink-2);line-height:1.9} .about-txt ul{margin-top:26px;display:grid;gap:16px} .about-txt li{display:flex;gap:13px;align-items:flex-start} .about-txt li .n{ width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--blue-l);color:var(--blue);font-size:13px;font-weight:800;margin-top:2px; } .about-txt li b{display:block;font-size:15.5px;margin-bottom:3px} .about-txt li p{font-size:13.8px;color:var(--ink-2);line-height:1.75} .center-btn{text-align:center;margin-top:34px} /* ============ 图片式案例卡（首页/列表页） ============ */ .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .case{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .4s,transform .4s var(--ease);display:flex;flex-direction:column} .case:hover{box-shadow:var(--shadow);transform:translateY(-6px)} .case-vis{ display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2); } .case-vis img{ width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease); } .case:hover .case-vis img{transform:scale(1.06)} .case-vis .tag{ position:absolute;top:14px;left:14px;background:rgba(11,60,107,.88);color:#fff; font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px); } /* 卡片正文区（需求 #15 之后案例卡只剩一个标题）： 不再需要 flex:1 把内容拉开，也不需要给标题留 margin-bottom， 改为垂直居中 + 收一点内边距，「图片 + 标题」的卡片看上去更紧凑。 */ .case-body{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;flex:1} .case-body h3{font-size:18px;letter-spacing:-.02em;margin:0;line-height:1.45} /* 标题本身是链接（案例卡去掉了「查看项目详情」按钮，靠标题承载跳转） */ .case-body h3 a{color:inherit;transition:color .3s} .case-body h3 a:hover{color:var(--blue)} .case-body>p{font-size:14px;color:var(--ink-2);line-height:1.8} .case-m{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)} .case-m div b{display:block;font-size:18px;font-weight:800;color:var(--green);letter-spacing:-.02em;line-height:1.2} .case-m div span{font-size:11.5px;color:var(--ink-3)} .case-link{margin-top:16px;font-size:13.5px;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:6px} .case-link svg{width:14px;height:14px;transition:transform .3s} .case:hover .case-link svg{transform:translateX(4px)} /* ============ 首页建站类型入口（8 个类型卡片） ============ */ /* 桌面 4 列 × 2 排；≤1280 三列、≤1100 两列、≤620 单列由文末响应式段接管。 ⚠️ 不要再在文件末尾补 .region-grid 的非媒体查询规则 —— 会以同优先级覆盖掉 上面所有响应式断点，实测会让手机端仍然排 4 列（2026-09-23 已修）。 */ .region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .region{ position:relative;padding:26px 22px;border-radius:14px;overflow:hidden;background:#fff; border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s; display:flex;flex-direction:column;min-height:150px; } .region:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#C7D9EE} .region .en{font-size:11px;letter-spacing:.18em;color:var(--ink-3);font-weight:700} .region .cn{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin:6px 0 8px} .region .desc{font-size:13px;color:var(--ink-2);line-height:1.7} .region .arrow{position:absolute;top:22px;right:20px;width:28px;height:28px;border-radius:8px;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;transition:all .3s} .region:hover .arrow{background:var(--blue);color:#fff} .region .arrow svg{width:14px;height:14px} /* 类型卡片下方的一行分站文字链： 原来这 7 个分站是 7 张卡片（占满一个板块），现在位置让给 8 个建站类型， 但分站靠首页拿到的内链不能断，所以压成一行带分隔点的文字链。 */ .region-links{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:28px;padding-top:24px; border-top:1px solid var(--line);font-size:13.5px;line-height:1.8; } .region-links .fl-k{flex:none;color:var(--navy);font-weight:700;letter-spacing:.02em;margin-right:12px} .region-links a{color:var(--ink-2);padding:4px 9px;border-radius:7px;white-space:nowrap;transition:color .3s,background .3s} .region-links a:hover{color:var(--blue);background:var(--blue-l)} .region-links .dot{flex:none;width:1px;height:12px;background:var(--line);margin:0 1px} /* ============ 增值产品配套 ============ */ .addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .addon{ background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px; display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s; } .addon:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#C7D9EE} .addon .lbl{ display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em; color:var(--orange);background:var(--orange-l);padding:5px 13px;border-radius:999px;margin-bottom:16px; } .addon h3{font-size:18px;letter-spacing:-.02em;margin-bottom:10px} .addon p{font-size:13.8px;color:var(--ink-2);line-height:1.8;flex:1} .addon .tag{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .addon .tag span{font-size:12px;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line);padding:4px 11px;border-radius:6px} .addon .link{margin-top:16px;font-size:13.5px;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:6px} .addon .link svg{width:14px;height:14px;transition:transform .3s} .addon:hover .link svg{transform:translateX(4px)} /* ============ 底部 CTA ============ */ .cta-band{background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;padding:clamp(46px,5.5vw,76px) 0;position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;width:600px;height:600px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 62%)} .cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .cta-in h2{font-size:clamp(23px,2.6vw,36px);letter-spacing:-.035em} .cta-in p{margin-top:12px;font-size:15.5px;color:rgba(255,255,255,.82);max-width:640px;line-height:1.85} .cta-act{display:flex;gap:14px;flex-wrap:wrap} .cta-act .btn-w{background:#fff;color:var(--navy)} .cta-act .btn-w:hover{background:var(--orange-l);transform:translateY(-2px)} .cta-act .btn-ow{border:1px solid rgba(255,255,255,.4);color:#fff} .cta-act .btn-ow:hover{background:rgba(255,255,255,.12);border-color:#fff} /* ============ 页脚 ============ */ .footer{background:#0A1F33;color:rgba(255,255,255,.65);padding:64px 0 0} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)} .foot-brand .logo-mark{background:linear-gradient(140deg,#fff,#C7D9EE);color:var(--navy)} .foot-brand .logo-t b{color:#fff} .foot-brand p{margin-top:18px;font-size:14px;line-height:1.9;max-width:340px} .foot-qr{display:flex;gap:16px;margin-top:22px} /* 二维码位（需求 #13）： 1) 尺寸由 76px 放大到 91px（76 × 1.2 ≈ 91.2，取整 91）； 2) 之前是纯 CSS 灰框 + 文字，显得很假，现在改成真实图片； 3) 结构 = 图框 + 下方文字说明。图挂了 onerror 会把它隐藏，框内文字占位自动露出来， 所以「二维码图还没换上」的阶段页面也不会开天窗。 4) 说明文字放在图片外面（不是压在图上），图换上以后仍然能分清哪个是公众号、 哪个是客服，不用改图片本身。 */ .qr{display:flex;flex-direction:column;align-items:center;gap:8px;width:91px;flex:none} .qr-img{ position:relative;overflow:hidden;width:91px;height:91px;border-radius:8px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16); display:grid;place-items:center;text-align:center; } .qr-img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block} .qr-img .qr-t{font-size:11px;color:rgba(255,255,255,.55);line-height:1.4} .qr-c{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;line-height:1.2} /* 网站底部「友情链接（城市分站）」一行（需求 #14） 这一行以前完全没有 CSS 定义，所以在页脚里挤成一坨纯文字、没有分隔也没有换行规则。 这里补成：标签 + 一组带悬停底色的链接，中间用竖线分隔，窄屏自动折行。 */ .foot-links{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 0; padding:26px 0;border-bottom:1px solid rgba(255,255,255,.1); font-size:13.5px;line-height:1.8; } .foot-links .fl-k{color:#fff;font-weight:600;flex:none;margin-right:14px;letter-spacing:.02em} .foot-links a{ color:rgba(255,255,255,.6);padding:4px 9px;border-radius:7px;white-space:nowrap; transition:color .3s,background .3s; } .foot-links a:hover{color:#fff;background:rgba(255,255,255,.1)} /* 分隔竖线：初版用了 18% 白，1px 宽在深底上几乎看不见，链接会连成一片； 提到 32% 并加高 1px，缩到 100% 也能分辨出「一条一条」的边界。 */ .foot-links .dot{width:1px;height:12px;flex:none;background:rgba(255,255,255,.32);margin:0 1px} .foot-col h4,.foot-col h3{color:#fff;font-size:15px;margin-bottom:20px;letter-spacing:-.01em} .foot-col li{margin-bottom:11px} .foot-col a{font-size:14px;transition:color .3s} .foot-col a:hover{color:#fff} /* 首页页脚联系信息改用语义化的
（其余页面仍为 ul/li），此处同时兼容两种写法 */ .foot-contact address{font-style:normal} .foot-contact li,.foot-contact address>div{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin-bottom:16px;line-height:1.75} .foot-contact address>div:last-child{margin-bottom:0} .foot-contact svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--blue)} .foot-contact .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:3px} .foot-contact b{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em} /* 电话做成可点击的 tel: 链接后，需继承
的字号与字重，避免被 .foot-col a 覆盖为 14px */ .foot-contact b a{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit} .foot-contact b a:hover{color:var(--orange)} .foot-bot{padding:24px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)} .foot-bot .l{display:flex;gap:20px} .foot-bot a:hover{color:rgba(255,255,255,.8)} .foot-note{padding-bottom:28px;font-size:12px;color:rgba(255,255,255,.32);line-height:1.8} /* ============ 悬浮工具 ============ */ .dock{position:fixed;right:18px;bottom:24px;z-index:90;display:grid;gap:10px} .dock a,.dock button{ width:50px;height:50px;border-radius:12px;display:grid;place-items:center;color:#fff; box-shadow:0 12px 28px -10px rgba(0,0,0,.4);transition:transform .35s var(--ease),filter .3s; } .dock a:hover,.dock button:hover{transform:translateY(-4px);filter:brightness(1.1)} .dock svg{width:21px;height:21px} .dock .c1{background:var(--blue)} .dock .c2{background:var(--green)} .dock .c3{background:#5A6878;opacity:0;pointer-events:none;transition:opacity .4s,transform .35s var(--ease)} .dock .c3.on{opacity:1;pointer-events:auto} /* ============ 入场动画 ============ */ .rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)} .rv.in{opacity:1;transform:none} /* ============ 响应式 ============ */ @media(max-width:1280px){ .svc-grid{grid-template-columns:1fr 1fr} .ind-grid{grid-template-columns:1fr 1fr} .ind:nth-child(2n){border-right:none} .ind:nth-child(-n+2){border-bottom:1px solid var(--line)} .team-grid,.cert-grid{grid-template-columns:1fr 1fr} .layout{grid-template-columns:1fr} .side{position:static} .proj-info{grid-template-columns:1fr 1fr} .proj-info div:nth-child(2n){border-right:none} .proj-info div:nth-child(-n+2){border-bottom:1px solid var(--line)} .region-grid{grid-template-columns:repeat(3,1fr)} .addon-grid{grid-template-columns:1fr 1fr} } @media(max-width:1100px){ .menu,.nav-phone{display:none} /* 移动端头部修复： 1) .burger 此前是 .nav-in 中唯一未声明 flex:none 的项，当「logo + CTA + 汉堡」 总宽超出视口时，flex 收缩全部落在它身上（390px 下由 42px 压到 13px）， 表现为右上角只剩一根细条、菜单按钮几乎不可点。此处显式锁定尺寸。 2) .menu 隐藏后