@charset "utf-8"; /* ================================================================ 深圳市全球威科技有限公司 官网样式系统 v2.0 自建设计语言：工业蓝 · 方角 · 栅格 主色 #0C60B4 / 辅色 #0088D8 / 深蓝 #0d1b33 / 浅底 #f4f7fa / #eaeff5 ================================================================ */ /* ---------- 1. 变量与基础重置 ---------- */ :root{ --main:#0C60B4; /* 主色 */ --main-d:#094a90; /* 主色加深 */ --main-l:#0088D8; /* 亮蓝 */ --deep:#0d1b33; /* 深蓝黑 */ --deep2:#1c2b45; --ink:#222222; /* 主文字 */ --ink2:#666666; /* 弱化文字。原 #999 在白底仅 2.85:1，远低于 WCAG AA(4.5:1)。 #6b6b6b 在白底 5.33:1、--bg 4.96:1、--bg2 4.61:1 —— 三种底色全部达标。 */ --ink3:#6b6b6b; --line:#e6ecf2; /* 分割线 */ /* 两档浅底：原bg/bg2 仅差 7/6/8，肉眼几乎无法分辨， 相邻区块交替时失去分隔感（首页 bg→bg2 尤其明显）。 现拉开到 12/13/14 的色阶差，交替时可清晰辨块。 */ --bg:#f4f7fa; /* 浅灰底（较浅） */ --bg2:#eaeff5; /* 浅灰蓝（较深，与 --bg 明确区分） */ --white:#fff; --w:1400px; /* 内容宽 */ --dw:1810px; --tr:all .3s ease; } *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ /* 字体栈对齐参考站：PingFang SC 优先（macOS/iOS 渲染更佳），再回退雅黑 */ font-family:"PingFang SC","Arial","Microsoft YaHei","Microsoft YaHei UI","WenQuanYi Micro Hei",sans-serif; font-size:16px;line-height:1.4;color:var(--ink);background:#fff; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{border:0;max-width:100%;display:block;} a{color:inherit;text-decoration:none;transition:var(--tr);} ul,ol,dl,dd,dt,li{margin:0;padding:0;list-style:none;} h1,h2,h3,h4,h5,h6,p{margin:0;} table{border-collapse:collapse;} input,textarea,select{outline:none;font-family:inherit;} /* ---------- 2. 布局容器 ---------- */ .wrap{width:90%;max-width:var(--w);margin:0 auto;position:relative;} .wrap:after{content:"";display:block;clear:both;height:0;} .fl{float:left;} .fr{float:right;} .clear{clear:both;height:0;overflow:hidden;} /* ---------- 3. 区块标题（对齐参考站 i_title） ---------- */ .i_title{text-align:center;margin-bottom:60px;} .i_title .h3{ font-weight:700;color:var(--main);font-size:40px;line-height:1.3; letter-spacing:1px;margin-bottom:8px; } .i_title span{ display:block;line-height:1.2;color:var(--ink); text-transform:uppercase;font-family:Arial,sans-serif; letter-spacing:-1px;font-size:17px;font-weight:400;opacity:.55; } .i_title .p{ max-width:1000px;margin:20px auto 0;line-height:1.85; color:var(--ink2);font-size:16px;text-align:center; } .i_title .p.mid{margin-left:auto;margin-right:auto;} /* 白色区块上的标题 */ .i_title.on .h3,.i_title.on span{color:#fff;} .i_title.on .p{color:rgba(255,255,255,.78);} /* 深蓝底实力区引言再提亮一点 */ .counter-sec .i_title.on .p{color:rgba(255,255,255,.9);} /* 左对齐标题 */ .i_title.left{text-align:left;} .i_title.left .p{margin-left:0;text-align:left;} /* ---------- 3b. 区块间距阶梯（2026-10-08 统一） ---------- 此前各区块 padding 各不相同（96 / 80 / 74 / 58 / 42px）， 相邻区块的视觉间隙因此忽宽忽窄，是"看着不协调"的根源。 现统一为三级阶梯： --sp-sec 96px 标准内容区块（.sec，含标题+栅格） --sp-half 72px 次级区块（数据条、滚动带）—— 比标准略紧，视觉上属附属层 --sp-band 56px 通栏条（CTA、资质条）—— 紧凑，不抢主体 移动端在各自的 @media 里统一降档（72 / 54 / 44）。 */ :root{ --sp-sec:96px; --sp-half:72px; --sp-band:56px; } /* 通用区块 */ .sec{padding:var(--sp-sec) 0;} .sec.bg{background:var(--bg);} .sec.bg2{background:var(--bg2);} /* ---------- 4. 按钮 ---------- */ .btn{ display:inline-block;height:48px;line-height:48px;padding:0 36px; background:var(--main);color:#fff;font-size:16px;letter-spacing:1px; border:1px solid var(--main);transition:var(--tr);position:relative; text-align:center; } .btn:hover{background:var(--main-d);border-color:var(--main-d);} .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);} .btn.line:hover{background:#fff;color:var(--main);border-color:#fff;} .btn.line2{background:transparent;color:var(--main);border-color:var(--main);} .btn.line2:hover{background:var(--main);color:#fff;} .btn.sm{height:40px;line-height:40px;padding:0 26px;font-size:15px;} /* 了解更多（参考站 indmh-more） */ .more{ display:inline-block;padding:12px 30px;border:1px solid rgba(0,0,0,.25); color:var(--ink);font-size:15px;letter-spacing:1px;transition:var(--tr); } .more:hover{background:var(--main);border-color:var(--main);color:#fff;} /* 「查看更多」按钮的居中容器（2026-10-08） 此前首页三处用内联 style="text-align:center;margin-top:30/44px"， 间距不一致且样式散在模板里。统一为 .sec-more + 阶梯变量。 */ .sec-more{text-align:center;margin-top:var(--sp-half);} /* 移动端菜单遮罩 */ .nav-mask{ position:fixed;inset:0;background:rgba(13,27,51,.55);z-index:103; opacity:0;visibility:hidden;transition:all .35s; } .nav-mask.show{opacity:1;visibility:visible;} /* ---------- 5. 页头导航 ---------- */ .header{ position:fixed;top:0;left:0;width:100%;height:100px;z-index:105; background:linear-gradient(90deg,rgba(13,27,51,.55),rgba(13,27,51,.3)); transition:background .4s,height .4s; } .header.small{ background:#fff;height:80px; box-shadow:0 1px 20px rgba(13,27,51,.06); } .header .box{height:100px;display:flex;align-items:center;justify-content:space-between;transition:height .4s;} .header .box::after{display:none;} .header.small .box{height:80px;} .header .logo{height:60px;display:flex;align-items:center;gap:14px;flex-shrink:0;} .header .logo img{height:56px;width:auto;} /* 深色底时 LOGO 转白 */ .header:not(.small) .logo img{ filter:brightness(0) invert(1); } .header .logo img.lg-color{transition:filter .4s;} /* 导航 */ .nav{height:100%;display:flex;align-items:center;} .nav > ul{display:flex;height:100%;} .nav > ul > li{height:100%;position:relative;} .nav > ul > li > a{ height:100px;line-height:100px;padding:0 20px;display:block; font-size:17px;color:#fff;position:relative;white-space:nowrap; transition:height .4s,line-height .4s; } .header.small .nav > ul > li > a{height:80px;line-height:80px;color:#333;} .nav > ul > li > a:after{ content:"";position:absolute;bottom:28px;left:50%; width:0;height:2px;background:var(--main);transition:all .35s; } .header.small .nav > ul > li > a:after{bottom:20px;} .nav > ul > li:hover > a,.nav > ul > li.on > a{color:var(--main);} .header:not(.small) .nav > ul > li:hover > a, .header:not(.small) .nav > ul > li.on > a{color:#fff;} .nav > ul > li:hover > a:after{width:100%;left:0;} .nav > ul > li > a .ico{ display:inline-block;width:8px;height:5px;margin-left:7px; vertical-align:middle;transition:all .3s; } .nav > ul > li > a .ico::before{ content:"";display:block;width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor; } /* 二级下拉 */ .nav .sub{ position:absolute;top:100px;left:50%;transform:translateX(-50%); background:#fff;min-width:200px;padding:10px 0; opacity:0;visibility:hidden;transition:all .3s;z-index:10; box-shadow:0 12px 34px rgba(13,27,51,.12); } .nav > ul > li:hover .sub{opacity:1;visibility:visible;} /* 下拉项悬停：左箭头符号位移（复刻参考站 .list-li:hover .icon-icon 位移） */ .header .sub a{ display:block;padding:11px 26px;font-size:15px;color:#555; white-space:nowrap;position:relative; transition:color .3s,background .3s,padding-left .3s; } .header .sub a::before{ content:"";position:absolute;left:12px;top:50%; width:0;height:1px;background:var(--main); transition:width .3s ease; } .nav .sub a:hover{ background:var(--main);color:#fff;padding-left:34px; } .nav .sub a:hover::before{width:14px;background:#fff;} /* 头部右侧工具 */ .h-tools{display:flex;align-items:center;gap:22px;flex-shrink:0;} .h-search{width:36px;height:36px;cursor:pointer;position:relative;} .h-search::before{ content:"";position:absolute;left:6px;top:6px;width:14px;height:14px; border:2px solid #fff;border-radius:50%; } .h-search::after{ content:"";position:absolute;left:20px;top:21px;width:8px;height:2px; background:#fff;transform:rotate(45deg); } .header.small .h-search::before{border-color:#333;} .header.small .h-search::after{background:#333;} .h-tel{ display:flex;align-items:center;gap:10px; padding-left:24px;border-left:1px solid rgba(255,255,255,.28); } .h-tel .tico{display:flex;} .h-tel .tico svg{width:18px;height:18px;fill:#fff;transition:fill .4s;} .h-tel b{display:block;font-size:17px;color:#fff;font-weight:600;letter-spacing:.3px;line-height:1.3;} .h-tel span{display:block;font-size:12px;color:rgba(255,255,255,.75);letter-spacing:1px;margin-top:2px;} .header.small .h-tel{border-left-color:#e6ecf2;} .header.small .h-tel b{color:var(--ink);} .header.small .h-tel span{color:var(--ink3);} .header.small .h-tel .tico svg{fill:var(--main);} /* 搜索展开 */ .h-searchform{ position:absolute;right:0;top:96px;width:0;overflow:hidden; transition:all .4s;background:#fff;z-index:11; box-shadow:0 14px 38px rgba(13,27,51,.18); } .header.small .h-searchform{top:76px;} .h-searchform form{display:flex;align-items:center;} .h-searchform input{ height:54px;width:280px;padding:0 18px;border:0;background:transparent; color:var(--ink);font-size:14px;outline:none; } .h-searchform input::placeholder{color:#9aa7b5;} .h-searchform.open{width:378px;} .h-searchbtn{ height:54px;padding:0 28px;background:var(--main);color:#fff;border:0;cursor:pointer; font-size:15px;letter-spacing:2px;transition:var(--tr); } .h-searchbtn:hover{background:var(--main-d);} /* 移动端菜单开关 */ .menu-btn{display:none;width:40px;height:40px;cursor:pointer;position:relative;} .menu-btn span{ position:absolute;left:8px;width:24px;height:2px;background:#fff;transition:all .3s; } .menu-btn span:nth-child(1){top:13px;} .menu-btn span:nth-child(2){top:20px;} .menu-btn span:nth-child(3){top:27px;} .header.small .menu-btn span{background:#333;} .menu-btn.on span:nth-child(1){top:20px;transform:rotate(45deg);} .menu-btn.on span:nth-child(2){opacity:0;} .menu-btn.on span:nth-child(3){top:20px;transform:rotate(-45deg);} /* ---------- 6. Banner 轮播 ---------- */ .banner{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:var(--deep);} .banner .slider{position:relative;width:100%;height:100%;} .banner .slide{ position:absolute;top:0;left:0;width:100%;height:100%; background-size:cover;background-position:center; opacity:0;visibility:hidden;transition:opacity .8s; } .banner .slide.on{opacity:1;visibility:visible;} .banner .slide::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(13,27,51,.72) 0%,rgba(13,27,51,.5) 45%,rgba(13,27,51,.2) 100%); } .banner .cap{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3; width:90%;max-width:var(--w);margin:0 auto;color:#fff; } .banner .cap .bt{ font-size:16px;letter-spacing:4px;color:var(--main-l);margin-bottom:14px; display:flex;align-items:center;gap:12px; } .banner .cap .bt::before{content:"";width:36px;height:2px;background:var(--main-l);} .banner .cap h1,.banner .cap h2{ font-size:38px;line-height:1.3;font-weight:700;color:#fff; margin-bottom:16px;max-width:760px; } /* SEO：首页仅首屏保留一个 h1，其余轮播句降级为 h2，此处保持视觉一致 */ .banner .cap h2{font-size:38px;line-height:1.3;font-weight:700;color:#fff;margin-bottom:16px;max-width:760px;} .banner .cap p{font-size:16px;color:rgba(255,255,255,.85);max-width:640px;line-height:1.8;margin-bottom:30px;} .banner .cap .btns a{margin-right:14px;} /* 轮播指示器：参考站细长条 */ .banner .dots{ position:absolute;left:0;right:0;bottom:70px;width:90%;max-width:var(--w);margin:0 auto; z-index:3;display:flex;gap:10px; } /* 轮播指示点：视觉条 20×4px，但可点区域扩到 20×44px（满足触摸目标 ≥44px）。 实现方式：li本身做热区（overflow 可见），内部 ::before 画视觉条。 不能用 overflow:hidden + padding 扩热区 —— 那会把 ::before 的溢出部分裁掉。 */ .banner .dots li{ position:relative;width:20px;height:44px;cursor:pointer; display:flex;align-items:center; } .banner .dots li::before{ content:"";display:block;width:100%;height:4px; background:rgba(255,255,255,.45);transition:all .3s; } .banner .dots li.on{width:60px;} .banner .dots li.on::before{background:rgba(255,255,255,.3);} .banner .dots li.on::after{ content:"";position:absolute;left:0;top:20px;height:4px;width:0; background:var(--main-l); } .banner .dots li.on.loading::after{width:100%;transition:width 5s linear;} /* 左右箭头 */ .banner .arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:56px;height:56px;border:1px solid rgba(255,255,255,.35); cursor:pointer;transition:var(--tr); } .banner .arrow:hover{background:var(--main);border-color:var(--main);} .banner .arrow.prev{left:30px;} .banner .arrow.next{right:30px;} .banner .arrow::before{ content:"";position:absolute;left:50%;top:50%; width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff; } .banner .arrow.prev::before{transform:translate(-30%,-50%) rotate(-135deg);} .banner .arrow.next::before{transform:translate(-70%,-50%) rotate(45deg);} /* 向下滚动提示 */ .banner .scroll{ position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3; color:rgba(255,255,255,.7);font-size:13px;letter-spacing:2px;text-align:center; } .banner .scroll::after{ content:"";display:block;width:1px;height:34px;margin:10px auto 0; background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent); animation:sdown 2s infinite; } @keyframes sdown{0%{opacity:1;transform:translateY(0);}50%{opacity:.3;transform:translateY(8px);}100%{opacity:0;}} /* ---------- 7. 资质条（banner 下方） ---------- */ .quality-bar{ position:relative;padding:var(--sp-band) 0;overflow:hidden; background:linear-gradient(105deg,var(--main) 0%,#0d5cb0 45%,#0088D8 100%); } .quality-bar::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); } .quality-bar ul{ display:grid;grid-template-columns:repeat(5,1fr); align-items:stretch;position:relative; } .quality-bar li{ display:flex;align-items:center;gap:16px;color:#fff; padding:0 30px;position:relative;min-width:0; } /* 用左边框做分隔线，落在栅格缝隙外侧，视觉更整齐 */ .quality-bar li:not(:last-child)::after{ content:"";position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:46px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent); } .quality-bar li .qk{ flex:0 0 54px;width:54px;height:54px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center; transition:var(--tr); } .quality-bar li .qk svg{width:26px;height:26px;fill:#fff;transition:var(--tr);} .quality-bar li:hover .qk{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);} .quality-bar li .tx{min-width:0;line-height:1.5;} .quality-bar li .tx b{ display:block;font-weight:600;font-size:17.5px;letter-spacing:.3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .quality-bar li .tx span{ display:block;font-size:13px;color:rgba(255,255,255,.75); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px; } /* ---------- 8. 数字统计（i_one 深蓝底） ---------- */ .counter-sec{background:var(--deep);padding:var(--sp-half) 0;position:relative;overflow:hidden;} .counter-sec::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 20% 50%,rgba(12,96,180,.28),transparent 55%); } .counter-sec .i_title{position:relative;z-index:2;} .counter ul{display:flex;position:relative;z-index:2;} .counter ul li{flex:1;text-align:center;position:relative;transition:transform .3s;} .counter ul li:not(:last-child)::after{ content:"";position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:88px;background:rgba(255,255,255,.1); } .counter ul li:hover{transform:translateY(-4px);} .counter .nums{line-height:1;color:#fff;} .counter .nums span{ font-size:64px;font-weight:700;font-family:Arial;letter-spacing:1px; display:inline-block;vertical-align:middle; } .counter .nums label{ display:inline-block;vertical-align:top;font-size:22px;font-weight:500;margin-top:8px; } .counter .h6{ font-size:17px;color:#fff;margin-top:14px;letter-spacing:1px; } /* ---------- 9. 产品中心（分类tab + 网格） ---------- */ /* 产品分类 Tab（可原地切换，不跳页） */ .prod-tabs{ display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:48px; border-bottom:1px solid var(--line); } .prod-tabs li{ font-size:17px;color:var(--ink2);padding:14px 30px;cursor:pointer; transition:var(--tr);position:relative;user-select:none; } .prod-tabs li:hover{color:var(--main);} .prod-tabs li.on{color:var(--main);font-weight:600;} .prod-tabs li.on::after{ content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); width:40px;height:3px;background:var(--main); } /* 栅格（产品卡在普通列表页使用；首页产品区改用 .pslide-track 滑动） */ .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} /* 注：产品面板 .prod-panel 的显示/隐藏规则见第 33 节（与滑动轮播一起定义） */ @keyframes panelIn{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} } .p-card{ background:#fff;border:1px solid var(--line);overflow:hidden; transition:all .35s;position:relative;display:block; } .p-card .pic{ /* 1:1 正方形，避免不同比例的商品图被裁切 */ aspect-ratio:1/1;width:100%;overflow:hidden;position:relative;background:var(--bg); } @supports not (aspect-ratio:1/1){ .p-card .pic{height:0;padding-bottom:100%;} } .p-card .pic img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .p-card:hover{border-color:var(--main);box-shadow:0 12px 30px rgba(12,96,180,.13);} .p-card:hover .pic img{transform:scale(1.08);} .p-card .info{padding:22px 24px 26px;} .p-card .info .pname{ font-size:17px;color:var(--ink);line-height:1.5;font-weight:600; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; min-height:26px;transition:color .3s; /* 标题元素由 h3 改为 p，需重置浏览器默认外边距，否则卡片高度会跳动 */ margin:0; } .p-card:hover .info .pname{color:var(--main);} .p-card .info p{ font-size:14px;color:var(--ink3);line-height:1.4;margin-top:10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* 注：原 .p-card.wide（跨两列横幅）已移除 —— 与 1:1 图片规范冲突，且模板中未使用 */ /* ---------- 10. 公司优势六宫格 ---------- */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .adv-card{ background:#fff;padding:40px 34px;position:relative;overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,.05);transition:all .35s;z-index:0; } .adv-card .fill{ position:absolute;inset:0;background:var(--main);z-index:-1; transform:translateX(-100%);transition:transform .4s; } .adv-card:hover .fill{transform:translateX(0);} .adv-card .ico{ width:60px;height:60px;margin-bottom:22px;display:flex; align-items:center;justify-content:center; background:var(--main);border-radius:50%;transition:all .35s; } .adv-card .ico svg{width:28px;height:28px;fill:#fff;} .adv-card h3{ font-size:21px;color:var(--ink);font-weight:700;margin-bottom:12px; transition:color .3s; } .adv-card p{font-size:15px;color:var(--ink2);line-height:1.8;transition:color .3s;} .adv-card:hover h3,.adv-card:hover p{color:#fff;} .adv-card:hover .ico{background:#fff;} .adv-card:hover .ico svg{fill:var(--main);} /* ---------- 11. 解决方案（大图背景+卡片） ---------- */ .sol-sec{position:relative;overflow:hidden;background:var(--deep);} .sol-sec .bgimg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35; } .sol-sec .mask{position:absolute;inset:0;background:rgba(13,27,51,.6);} .sol-sec .wrap{position:relative;z-index:2;} /* 行业应用：4×2 白底卡（8 个行业整除无空位），编号 + 描边图标 */ .sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .sol-card{ background:#fff;border:1px solid var(--line); position:relative;transition:all .35s; } .sol-card:hover{border-color:var(--main);transform:translateY(-4px);box-shadow:0 10px 24px rgba(12,96,180,.12);} .sol-card > a{ display:block;padding:26px 24px;height:100%; } /* 右上角大编号（01-08），默认浅灰，hover 浮现主色 */ .sol-card .num{ position:absolute;top:16px;right:20px; font-size:26px;font-weight:700;font-style:normal;line-height:1; color:#e6edf4;font-family:Arial,Helvetica,sans-serif; transition:color .3s; } .sol-card:hover .num{color:rgba(12,96,180,.3);} /* 图标块：浅蓝底 + 主色描边图标；hover 反白 */ .sol-card .ico{ width:44px;height:44px;background:var(--bg2);color:var(--main); display:flex;align-items:center;justify-content:center;margin-bottom:16px; transition:all .3s; } .sol-card:hover .ico{background:var(--main);color:#fff;} .sol-card h3{font-size:17px;color:var(--ink);margin-bottom:8px;font-weight:600;} .sol-card p{font-size:13px;color:var(--ink2);line-height:1.5;} /* ---------- 13. 合作伙伴（已从首页移除，样式保留备用） ---------- */ .link-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;} .link-grid li{ border:1px solid var(--line);background:#fff;padding:16px; display:flex;align-items:center;justify-content:center;transition:var(--tr); height:88px; } .link-grid li img{max-height:100%;width:auto;opacity:.75;transition:all .35s;} .link-grid li:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);border-color:var(--main);} .link-grid li:hover img{opacity:1;} /* ---------- 14. 新闻 ---------- */ /* 首页新闻：两栏纯文字列表（无配图） */ .news-cols{ display:grid;grid-template-columns:repeat(2,1fr); column-gap:56px;row-gap:0; } .n-row{ display:flex;align-items:flex-start;gap:20px; padding:20px 4px;border-bottom:1px solid var(--line); transition:all .3s;position:relative; /* flex 子项默认 min-width:auto，长标题会撑破容器导致整页横向溢出 */ min-width:0;max-width:100%; } .n-row:nth-last-child(-n+2){border-bottom:0;} /* 日期块 */ .n-row .dt{ flex:0 0 66px;text-align:center;line-height:1.2; padding:2px 18px 0 0;font-size:12px;color:var(--ink3); border-right:1px solid var(--line);transition:all .3s; } .n-row .dt b{ display:block;font-size:26px;font-weight:700;color:var(--main); font-family:Arial;letter-spacing:-.5px;margin-bottom:2px; } .n-row .dt span{display:block;} /* 文本块 */ .n-row .tx{flex:1;min-width:0;} .n-row .tx h3{ font-size:17px;color:var(--ink);font-weight:600;line-height:1.55; margin-bottom:7px;transition:color .3s; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .n-row .tx p{ font-size:14px;color:var(--ink2);line-height:1.4; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* 右侧箭头 */ .n-row .arw{ flex:0 0 20px;align-self:center;color:var(--ink3); opacity:0;transform:translateX(-6px);transition:all .3s; } .n-row:hover{background:#fff;padding-left:12px;padding-right:12px;} .n-row:hover .tx h3{color:var(--main);} .n-row:hover .arw{opacity:1;transform:translateX(0);color:var(--main);} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .n-card{ background:#fff;overflow:hidden;position:relative;transition:all .35s; display:flex;flex-direction:column; } .n-card .pic{aspect-ratio:1/1;width:100%;overflow:hidden;position:relative;background:var(--bg);} @supports not (aspect-ratio:1/1){.n-card .pic{height:0;padding-bottom:100%;}} .n-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s;} .n-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.1);} .n-card:hover .pic img{transform:scale(1.08);} .n-card .cls{ position:absolute;top:0;left:0;z-index:2;padding:7px 18px; background:rgba(12,96,180,.85);color:#fff;font-size:14px; } .n-card .txt{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column;} .n-card .txt h3{ font-size:18px;color:var(--ink);font-weight:700;line-height:1.5;margin-bottom:12px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color .3s; } .n-card:hover .txt h3{color:var(--main);} .n-card .txt p{ font-size:15px;color:var(--ink2);line-height:1.4;margin-bottom:18px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .n-card .txt .date{ margin-top:auto;font-size:13px;color:var(--ink3); display:flex;align-items:center;gap:8px; } .n-card .txt .date::before{ content:"";width:11px;height:11px;border:2px solid var(--main);border-radius:50%; display:inline-block;opacity:.5; } /* 资讯列表（侧栏型） */ .news-list li{ display:flex;align-items:center;gap:18px;padding:18px 0; border-bottom:1px dashed var(--line);transition:var(--tr); } .news-list li:hover{background:var(--bg);padding-left:12px;} .news-list .dt{ flex:0 0 88px;text-align:center;color:var(--ink3);font-size:13px; border-right:1px solid var(--line);padding-right:16px;line-height:1.4; } .news-list .dt b{display:block;font-size:22px;color:var(--main);font-family:Arial;} .news-list .tt{ flex:1;font-size:16px;color:var(--ink);overflow:hidden; text-overflow:ellipsis;white-space:nowrap; } .news-list li:hover .tt{color:var(--main);} /* ---------- 15. 内页通用 ---------- */ .page-head{ position:relative;height:420px;display:flex;align-items:center;justify-content:center; background:var(--deep) center/cover no-repeat; padding-top:100px; /* 给固定导航留出空间，同时让横幅铺满到导航栏背后 */ } .page-head::after{content:"";position:absolute;inset:0;background:rgba(13,27,51,.35);} /* .wrap 改为 static：让 .head-crumb 的绝对定位以 .page-head 为基准， 从而真正落在横幅左下角（否则 wrap 的 position:relative 会截获定位上下文）。 static 元素上的 z-index 不生效，层级由 .page-head-title 单独建立。 */ .page-head .wrap{position:static;text-align:center;} /* 标题层需在 ::after 遮罩之上，单独建立定位层级 */ .page-head-title{position:relative;z-index:2;} .page-head-title{display:inline-block;text-align:center;transform:translateY(-26px);} .page-head-title .en{ display:block;font-size:16px;font-weight:500;letter-spacing:4px; text-transform:uppercase;color:rgba(255,255,255,.72); margin-bottom:10px;line-height:1.4; } .page-head-title h1,.page-head-title h2{font-size:48px;color:#fff;font-weight:700;margin:0;line-height:1.2;} .page-head-title .en:empty{display:none;} /* 面包屑：移入横幅左下角（白字，不再占用独立横条） */ .page-head .head-crumb{ position:absolute;left:0;bottom:44px;z-index:2; display:inline-flex;align-items:center;gap:8px; font-size:14px;color:rgba(255,255,255,.8); } /* 与内容区 .wrap（width:90%; max-width:1400px; margin:auto）左对齐 */ @media screen and (min-width:751px){ .page-head .head-crumb{left:max(5%, calc(50% - 700px));} } .page-head .head-crumb a{color:rgba(255,255,255,.8);transition:color .25s;} .page-head .head-crumb a:hover{color:#fff;} .page-head .head-crumb::before{ content:"";display:inline-block;width:15px;height:15px;flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center/contain no-repeat; } .page-head .head-crumb .crumb-sep{color:rgba(255,255,255,.55);font-size:12px;margin:0 6px;} .page-head .head-crumb b{color:#fff;font-weight:400;} /* 层级过多时由 JS 截断为「首页 > … > 当前栏目」，此处仅定义省略号样式 */ .page-head .head-crumb .crumb-ellipsis{color:rgba(255,255,255,.55);} .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; } /* ---------- 15.1 子栏目筛选条（1:1 复刻易百讯 news-menu-type） ---------- 参考站实测：链接 46px 高、padding 0 22.4px、margin 5px 5px 5px 0、字号 16px、 圆角 23px 23px 23px 0（右下直角）；橙色胶囊为 ::before 绝对定位覆盖。 外层 .wrap3 上下 padding 56.86px。 与横幅之间留出间距（margin-top），避免贴合显得拥挤。 */ .sub-nav{background:#fff;position:relative;margin-top:28px;} .sub-nav .box{display:flex;align-items:center;justify-content:space-between;gap:24px;} .sub-nav-list{display:flex;align-items:center;flex-wrap:wrap;flex:1;min-width:0;} .sub-nav-list li{margin:5px 5px 5px 0;} .sub-nav-list li:last-child{margin-right:0;} .sub-nav-list li a{ position:relative;display:block;overflow:hidden; padding:0 22.4px;height:46px;line-height:46px; font-size:16px;color:#333; border-radius:23px 23px 23px 0; transition:color .25s; } .sub-nav-list li a:hover{color:var(--main);} /* 当前项：橙色胶囊由 ::before 铺满（z-index:0 让伪元素在文字下、链接背景下） */ .sub-nav-list li.on a{color:#fff;isolation:isolate;} .sub-nav-list li.on a::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--main);border-radius:23px 23px 23px 0; } /* 「全部资讯」为默认入口，未选中时用主蓝文字 */ .sub-nav-list li.all a{font-weight:600;color:var(--main);} .sub-nav-list li.all.on a{color:#fff;} /* 新闻列表页：面包屑已移入横幅，主体留白按视觉均衡取 44px */ .sec:has(.news-text-list){padding:44px 0;} /* ---------- 15.2 新闻三栏卡片列表（日期+短线+标题+摘要+标签） ---------- */ /* 进场动画：fadeInUp（参考易百讯 WOW.js fadeInUp） 仅在 且未开启「减少动效」时启用； 脚本会在 2.4s / window load 兜底强制显示，避免脚本失败导致内容永久不可见。 */ .js-anim .news-text-list li{ opacity:0;transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); } .js-anim .news-text-list li.on{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .js-anim .news-text-list li{ opacity:1!important;transform:none!important;transition:none!important; } } .news-text-list{ display:grid;grid-template-columns:repeat(3,1fr); gap:44px 40px; } .news-text-list li{ display:flex;flex-direction:column;min-width:0; padding-bottom:34px;border-bottom:1px solid var(--line); position:relative; /* 标签行有时有时无，固定最小高度保证同行卡片底部对齐；desc 2 行后相应收敛 */ min-height:180px; } /* 悬停动画（复刻易百讯 .list-box::before 细线展开 + 标题变色） 蓝色主线放在卡片底部、与灰色分割线同位置，悬停时从左向右展开覆盖。 */ .news-text-list li::after{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--main);transition:width .3s ease; } .news-text-list li:hover::after{width:100%;z-index:2;} /* 悬停时日期下方短线向右延展 */ .news-text-list li:hover .date::after{width:72px;} .news-text-list .date{ font-size:14px;color:var(--ink3);font-family:Arial,sans-serif; padding-bottom:14px;margin-bottom:18px;position:relative; transition:color .3s; } .news-text-list .date::after{ content:"";position:absolute;left:0;bottom:0; width:36px;height:2px;background:var(--main); transition:width .3s ease; } .news-text-list h3{margin:0 0 14px;} .news-text-list h3 a{ display:block;font-size:22px;color:#333;font-weight:600;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; /* 悬停：向右位移 3px 并变主色（复刻参考站 .list-box:hover .title） */ transform:translateX(0);transition:transform .3s,color .3s; } .news-text-list li:hover h3 a{transform:translateX(3px);color:var(--main);} .news-text-list .desc{ font-size:15px;color:#888;line-height:1.86; /* 2 行截断 + 省略号，PC/手机端均避免文字被腰斩 */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis; transition:color .3s; } .news-text-list li:hover .date{color:#666;} .news-text-list .tag{ margin-top:auto;padding-top:16px;font-size:13px;color:var(--ink3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 内容无标签时 pboot:tags 输出空串，用 :empty 隐藏整行，避免出现孤立的「标签：」 */ .news-text-list .tag:empty{display:none;} /* 内容无标签时 [list:tagslink] 输出空串，用 :empty 隐藏整行，避免出现孤零零的「标签：」 */ .news-text-list .tag:empty{display:none;} .news-text-list .tag a{ display:inline-block;color:var(--ink3);transition:color .25s; } .news-text-list .tag a:hover{color:var(--main);text-decoration:underline;} .news-text-list .tag a+a{margin-left:8px;} .news-text-list .tag b{color:#888;font-weight:400;} /* 两栏布局 */ .col-2{display:flex;gap:40px;align-items:flex-start;} .col-side{flex:0 0 280px;} .col-main{flex:1;min-width:0;} /* 侧栏菜单 */ .side-menu{background:#fff;border:1px solid var(--line);margin-bottom:28px;} .side-menu .hd{ background:var(--main);color:#fff;padding:20px 24px; font-size:19px;font-weight:600;letter-spacing:1px; } .side-menu .hd em{font-style:normal;font-size:13px;opacity:.75;margin-left:8px;font-family:Arial;} .side-menu ul{padding:6px 0;} .side-menu li a{ display:block;padding:13px 24px;font-size:15px;color:var(--ink2); border-left:3px solid transparent;transition:var(--tr); } .side-menu li a:hover{background:var(--bg);color:var(--main);} .side-menu li.on a{background:var(--bg);color:var(--main);border-left-color:var(--main);font-weight:600;} .side-menu li .sarrow{ float:right;margin-top:5px;width:7px;height:7px; border-right:1px solid #bbb;border-bottom:1px solid #bbb; transform:rotate(-45deg);transition:transform .3s; } .side-menu li:hover .sarrow{transform:rotate(45deg);border-color:var(--main);} /* 侧栏信息卡 */ .side-card{background:#fff;border:1px solid var(--line);margin-bottom:28px;} .side-card .hd{ padding:18px 24px;font-size:18px;font-weight:600;color:var(--ink); border-bottom:1px solid var(--line);background:var(--bg); } .side-card .bd{padding:24px;} .side-card .tel{ font-size:24px;color:var(--main);font-family:Arial;font-weight:700; line-height:1.3;margin-bottom:6px; } .side-card .info p{font-size:14px;color:var(--ink2);line-height:2;} .side-card .info p b{color:var(--ink);font-weight:600;} .side-card .code{text-align:center;padding:0 0 24px;} .side-card .code img{margin:0 auto;} .side-card .code span{font-size:13px;color:var(--ink3);} /* 列表页内容头 */ .list-head{ background:#fff;border:1px solid var(--line);padding:22px 28px;margin-bottom:26px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; } .list-head h2{font-size:22px;color:var(--ink);font-weight:600;} .list-head h2 em{font-style:normal;color:var(--main);} .list-head .sub{font-size:14px;color:var(--ink3);margin-top:4px;} .filter-bar{display:flex;flex-wrap:wrap;gap:10px;} .filter-bar a{ padding:7px 20px;border:1px solid var(--line);font-size:14px;color:var(--ink2); transition:var(--tr);background:#fff; } .filter-bar a:hover{border-color:var(--main);color:var(--main);} .filter-bar a.on{background:var(--main);border-color:var(--main);color:#fff;} /* 产品网格（内页） */ .pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} /* 文章列表 */ .art-list li{ background:#fff;border:1px solid var(--line);margin-bottom:18px; transition:var(--tr);position:relative; } .art-list li:hover{border-color:var(--main);box-shadow:0 8px 24px rgba(12,96,180,.1);} .art-list .row{display:flex;gap:24px;padding:24px;} .art-list .pic{ flex:0 0 268px;aspect-ratio:268/186;overflow:hidden;background:var(--bg); } .art-list .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .art-list li:hover .pic img{transform:scale(1.06);} .art-list .txt{flex:1;display:flex;flex-direction:column;min-width:0;} .art-list h3{ font-size:20px;color:var(--ink);font-weight:600;line-height:1.5;margin-bottom:12px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color .3s; } .art-list li:hover h3{color:var(--main);} .art-list .desc{ font-size:15px;color:var(--ink2);line-height:1.8;margin-bottom:16px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .art-list .meta{ margin-top:auto;font-size:13px;color:var(--ink3); display:flex;align-items:center;gap:20px;flex-wrap:wrap; } .art-list .meta span{display:flex;align-items:center;gap:6px;} .art-list .meta span::before{ content:"";width:12px;height:12px;border:1.5px solid var(--main);border-radius:50%;opacity:.55; } .art-list .meta .cls{color:var(--main);} .art-list .meta .cls::before{border-radius:0;transform:rotate(45deg);} /* 纯文字新闻列表 */ .art-simple li{ background:#fff;border:1px solid var(--line);margin-bottom:0; border-bottom:0;padding:0; } .art-simple li:last-child{border-bottom:1px solid var(--line);} .art-simple .row{display:flex;gap:24px;padding:26px 28px;align-items:center;} .art-simple .txt h3{ font-size:18px;color:var(--ink);font-weight:600;margin-bottom:10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s; } .art-simple li:hover h3{color:var(--main);} .art-simple .desc{ font-size:14px;color:var(--ink2);line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* 分页（1:1 复刻易百讯 .page-btn，仅把橙色换主题蓝） 参考站实测：按钮 44×44、padding 0 7.5px、line-height 44px、font-size 15px、 圆角 22px 22px 22px 0、文字 #555、当前项 .on 为白字实心块。 结构： + {page:numbar} + */ .pager{ margin-top:52px; display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0; } .pager a,.pager span{ display:inline-block;box-sizing:border-box; min-width:44px;height:44px;padding:0 7.5px;line-height:44px; border:0;background:transparent;text-align:center; font-size:15px;color:#555;border-radius:22px 22px 22px 0; transition:color .25s,background .25s; } .pager a:hover{color:var(--main);} /* 当前页：主题蓝实心块（参考站为橙色 #f60） */ .pager .page-num-current, .pager .cur{background:var(--main);color:#fff;cursor:default;} /* 省略号：纯文字不参与交互 */ .pager span{color:#555;} /* 禁用态（首页的 <、末页的 >） */ .pager a[href="javascript:;"], .pager .disable{color:#d5d5d5;cursor:not-allowed;} .pager a[href="javascript:;"]:hover{color:#d5d5d5;} /* 键盘可达性 */ .pager a:focus-visible{outline:2px solid var(--main);outline-offset:2px;} /* ---------- 16. 文章详情（2026-10-08 20:20 重做排版） ---------- 改动要点： ① 两栏比例 1:2 → 主栏加宽到 minmax(0,1fr) 优先，正文行长约 45-50 汉字（可读区间） ② 右栏 325px → 300px，并加左侧分隔线，避免与正文糊在一起 ③ 元信息 #c8c8c8 → var(--ink3)=#6b6b6b，对比度达标（原色严重不足） ④ 标题 28px/400 → 32px/700，层级更明确 ⑤ 正文首图不再孤立居中，改为撑满正文宽并加圆角 ⑥ 上下篇改为卡片式，标题单行省略，不再挤成两列长文本 ⑦ 正文行高 27px → 1.9，中文长文更舒适 */ .art-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;} /* 主栏：minmax(0,1fr) 防止长代码/长英文撑破布局；不设上限，让正文尽量宽 */ .art-col-main{flex:1 1 auto;min-width:0;} /* 右栏：固定 300px，左侧加竖线做视觉分隔 */ .art-col-side{ flex:0 0 300px;width:300px; padding-left:32px;border-left:1px solid var(--line); } .art-detail{background:#fff;border:0;padding:0;} /* 标题区：加粗放大，与正文形成清晰层级 */ .art-detail .ad-hd{ text-align:left;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px; } .art-detail .ad-hd h1{ font-size:32px;color:var(--ink);line-height:1.38;font-weight:700;margin:0 0 16px; letter-spacing:-.01em; } /* 元信息：14px/#6b6b6b（≥4.5:1），条目间加分隔点，比纯文字更好扫读 */ .art-detail .ad-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;text-align:left; font-size:14px;color:var(--ink3);line-height:22px; } .art-detail .ad-meta span{ display:inline-flex;align-items:center;margin:0;color:inherit; } /* 用小圆点分隔，不用竖线（更轻） */ .art-detail .ad-meta span+span::before{ content:"";display:inline-block;width:3px;height:3px;border-radius:50%; background:var(--line);margin-right:18px;vertical-align:middle; } /* 正文：16px / 行高 1.9 / #444，中文长文舒适区间 */ .art-detail .ad-body{ font-size:16px;line-height:1.9;color:#444; padding-bottom:20px;overflow-wrap:break-word; } .art-detail .ad-body p{margin:0 0 20px;} /* 正文里的加粗/斜体链接化 */ .art-detail .ad-body a{color:var(--main);text-decoration:none;border-bottom:1px solid rgba(12,96,180,.28);} .art-detail .ad-body a:hover{border-bottom-color:var(--main);} /* 正文内原生 h2/h3：按用户要求**去掉蓝色竖条与下方横线**， 只保留文字标题，靠上下留白与下方正文拉开距离。 ⚠️ 后台编辑器会往标题里写内联 style（font-size/margin 等）压掉这里的规则， 已由 gw.js 的 adHeadClean() 在渲染后统一清除，这里不必再加 !important。 与 .pd-sec（JS 自动升级的小标题）保持同一套规范，两种标题观感一致。 */ .art-detail .ad-body h2,.art-detail .ad-body h3{ color:var(--ink);font-weight:700; margin:48px 0 22px;line-height:1.5; padding:0;border:0;background:none; } .art-detail .ad-body h2{font-size:1.6em;} .art-detail .ad-body h3{font-size:1.34em;} /* 正文图片：限宽居中（约七成栏宽），配圆角细边框；避免顶部大图压迫感 */ .art-detail .ad-body img{ display:block;margin:28px auto;max-width:72%;height:auto; border-radius:4px;border:1px solid var(--line); } @media (max-width:768px){ .art-detail .ad-body img{max-width:88%;} } /* 包裹图片的 p：图小于容器宽时不拉伸变形，居中即可；留白收紧 */ .art-detail .ad-body p:has(> img:only-child){margin:28px 0;text-align:center;line-height:0;} .art-detail .ad-body p:has(> img:only-child) img{margin:0 auto;} /* 引用块 */ .art-detail .ad-body blockquote{ margin:26px 0;padding:18px 22px;background:var(--bg); border-left:4px solid var(--main);color:#555;font-size:15px; } /* 正文首段贴顶 */ .art-detail .ad-body>p:first-child{margin-top:0;} /* 首段做导语：稍大一点，加强开场层次 */ .art-detail .ad-body>p:first-child{font-size:1.13em;color:#333;} /* 正文小标题（由 gw.js 的 bodyOutline() 依据「一、」「1.」等序号识别插入） 规范：纯文字标题，**无竖条无横线**，靠上下留白区分层级（与原生 h2/h3 一致）。 */ .pd-sec{ display:flex;align-items:baseline;gap:12px; margin:48px 0 22px; padding:0;border:0; font-size:20px;font-weight:700;color:var(--ink);line-height:1.5; scroll-margin-top:120px; } .pd-sec i{ flex:none;font-style:normal; font-size:13px;font-weight:600;color:#fff;background:var(--main); padding:3px 9px;border-radius:2px;letter-spacing:.02em; } .pd-sec>span{color:var(--ink);} /* 段落内容与标题文字完全重复时隐藏该段 */ .art-detail .ad-body>p.pd-dup{display:none;} /* ---------- 16.5 应用场景区：给参数型产品页补"用在哪"的场景说服力 ---------- */ .pd-apps{ margin:44px 0 0;padding:32px 30px 30px; background:var(--bg);border-top:2px solid var(--main); } .pd-apps .apps-t{ font-size:22px;font-weight:700;color:var(--ink); margin:0 0 8px;line-height:1.4; } .pd-apps .apps-d{ font-size:14px;color:var(--ink3);line-height:1.8; margin:0 0 26px;max-width:640px; } .pd-apps .apps-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--line); border:1px solid var(--line); } .pd-apps .apps-grid li{ background:#fff;padding:22px 20px; transition:background .3s; } .pd-apps .apps-grid li:hover{background:#f8fbfe;} .pd-apps .ico{ width:38px;height:38px;margin-bottom:14px; display:flex;align-items:center;justify-content:center; color:var(--main);background:rgba(12,96,180,.07); transition:color .3s,background .3s; } .pd-apps .apps-grid li:hover .ico{ color:#fff;background:var(--main); } .pd-apps .ico svg{width:22px;height:22px;display:block;} .pd-apps h3{ font-size:16px;font-weight:600;color:var(--ink); margin:0 0 8px;line-height:1.5; } .pd-apps p{ font-size:13px;color:var(--ink3);line-height:1.8;margin:0; } .art-detail .ad-body table{ width:100%;margin:20px 0;border:1px solid var(--line);font-size:15px; } .art-detail .ad-body table th{ background:var(--main);color:#fff;padding:12px 14px;text-align:left;font-weight:600; border:1px solid var(--line); } .art-detail .ad-body table td{padding:12px 14px;border:1px solid var(--line);line-height:1.8;} .art-detail .ad-body table tr:nth-child(even) td{background:var(--bg);} .art-detail .ad-body ul{margin:0 0 20px;padding-left:8px;} .art-detail .ad-body ul li{position:relative;padding-left:22px;margin-bottom:10px;line-height:1.9;} .art-detail .ad-body ul li::before{ content:"";position:absolute;left:4px;top:14px;width:6px;height:6px; border-radius:50%;background:var(--main); } /* 上下篇 */ /* 上下篇：参考站风格，浅灰分隔、15px/#555 */ /* 上下篇：卡片式两栏，标题单行省略。 ⚠️ 模板里已输出「上一篇：」「下一篇：」文字，不要再用 ::before 加标签，会重复。 下面用嵌套 span 把「标签」和「标题」拆成两行： .ad-nav a 内层 span 是模板的 ，外层由 JS 包一层 .ad-t/.ad-b， 缺省时退回单行显示（见下方 .ad-nav--flat）。 */ .ad-nav{ display:grid;grid-template-columns:1fr 1fr;gap:16px; margin-top:8px;padding:28px 0 0; } .ad-nav a{ display:block;min-width:0; padding:15px 18px; background:var(--bg);border:1px solid transparent; color:var(--ink);font-size:15px;line-height:1.5; transition:background .25s,border-color .25s,transform .25s; } /* 标签行：与标题分行，突出方向 */ .ad-nav .ad-t{ display:block;font-size:12px;color:var(--ink3);letter-spacing:.04em; line-height:1.4;margin-bottom:6px; } /* 标题行：单行省略 */ .ad-nav .ad-b{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* 「下一篇」右对齐 */ .ad-nav a:last-child{text-align:right;} .ad-nav a:hover{ background:#fff;border-color:var(--main);color:var(--main);transform:translateY(-2px); } /* 无 JS 拆分时的兜底：整行单行省略 */ .ad-nav a:not(:has(.ad-t)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ---------- 16.1 右栏「相关新闻」 ---------- */ .side-rel .h3{ font-size:19px;color:var(--ink);font-weight:700;line-height:1.4; margin:0 0 6px;padding-bottom:14px;border-bottom:2px solid var(--main); display:inline-block; } .side-rel .list{border-top:0;margin-top:14px;} .side-rel .it{ display:block;padding:15px 0; border-bottom:1px solid var(--line); transition:transform .3s; } /* 悬停：右移 3px */ .side-rel .it:hover{transform:translateX(3px);} .side-rel .it .t{ font-size:15px;color:var(--ink);line-height:1.55; margin:0 0 7px;font-weight:400; /* 两行截断 */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;transition:color .3s; } .side-rel .it:hover .t{color:var(--main);} .side-rel .it .o{ font-size:13px;color:var(--ink3);line-height:1.5; /* 原 #c8c8c8 对比度不足 */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 日期与浏览次数之间加间隔点 */ .side-rel .it .o span+span::before{ content:"·";margin:0 6px;color:var(--line); } /* ---------- 16.2 产品列表页：全宽四列极简网格（图 + 标题） ---------- */ /* 注意：类名用 .pdl-grid（不带 d），避免与 392 行首页用的 .prod-grid 冲突 */ .pdl-grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:34px 28px;padding-top:6px; } .pd-card{ display:flex;flex-direction:column;background:#fff; border:1px solid var(--line); transition:border-color .3s,box-shadow .3s,transform .3s; } .pd-card .pic{ aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--bg); } @supports not (aspect-ratio:1/1){ .pd-card .pic{height:0;padding-bottom:100%;} } .pd-card .pic img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .pd-card:hover{ border-color:var(--main); box-shadow:0 12px 30px rgba(12,96,180,.13); transform:translateY(-3px); } .pd-card:hover .pic img{transform:scale(1.07);} .pd-card h3{ padding:18px 20px 20px;margin:0; font-size:15px;color:var(--ink);font-weight:400;line-height:1.65; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;transition:color .3s; } .pd-card:hover h3{color:var(--main);} /* ---------- 16.3 产品内容页：产品展示区（主图 + 标题 + 关键参数） ---------- */ .pd-view{ display:flex;gap:38px;padding-bottom:40px;margin-bottom:40px; border-bottom:1px solid var(--line); } .pd-view .pd-pic{ flex:0 0 460px;width:460px;background:var(--bg);overflow:hidden; } .pd-view .pd-pic img{width:100%;height:100%;object-fit:cover;display:block;} /* 无图时不留空白容器 */ .pd-view .pd-pic:empty{display:none;} .pd-view .pd-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;} .pd-view .pd-info h1{ font-size:28px;color:#333;line-height:1.45;font-weight:400;margin:0 0 16px; } .pd-view .pd-tag{ font-size:13px;color:var(--ink3);margin-bottom:22px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pd-view .pd-tag a{color:var(--main);} .pd-view .pd-tag a:hover{text-decoration:underline;} .pd-view .pd-tag a:not(:last-child){margin-right:10px;} /* 无标签时整行隐藏 */ .pd-view .pd-tag:empty{display:none;} /* 关键参数条 */ .pd-view .pd-attrs{ list-style:none;margin:0 0 26px;padding:0; border-top:1px solid var(--line); } .pd-view .pd-attrs li{ display:flex;align-items:center;gap:16px; padding:12px 0;border-bottom:1px solid var(--line); font-size:15px;line-height:1.6; } .pd-view .pd-attrs span{ flex:0 0 88px;color:#c8c8c8;font-size:14px; } .pd-view .pd-attrs b{color:#555;font-weight:400;flex:1;min-width:0;} /* 相关认证：细边框胶囊标签。 ⚠️ 类名必须用 .pd-certs —— 简名 .certs 已被页脚「资质徽标行」占用（498 行）， 同名会让 .certs li 的 padding/background 误伤本区的li，导致行高多出 34px。 */ .pd-view .pd-attrs b.pd-certs{ display:flex;flex-wrap:wrap;gap:6px; align-items:center;justify-content:flex-start; font-size:0;line-height:0; } .pd-view .pd-attrs b.pd-certs em{ font-style:normal;font-size:14px;line-height:1; color:var(--main);background:rgba(12,96,180,.06); border:1px solid rgba(12,96,180,.28); padding:5px 7px;border-radius:2px;white-space:nowrap; } /* 核心服务：工艺流程，8 个环节排 4×2 网格。 保持与其他行一致的「标签 + 值」左右结构，值区列宽 316px 刚好放 4 列。 */ .pd-view .pd-attrs li.pd-srv-row{ display:flex;align-items:center;gap:16px;padding:12px 0; } .pd-view .pd-attrs b.pd-srv{ display:grid;grid-template-columns:repeat(4,1fr); gap:8px;font-size:0;line-height:0; } /* grid 子项默认 min-width:auto，长单词会撑破容器 → 显式归零 */ .pd-view .pd-attrs b.pd-srv em{ min-width:0;overflow:hidden;text-overflow:ellipsis; } .pd-view .pd-attrs b.pd-srv em{ font-style:normal;font-size:14px;line-height:1; color:#555;background:#f2f5f8; border:1px solid var(--line); padding:8px 4px;border-radius:2px;white-space:nowrap; text-align:center; transition:color .25s,border-color .25s,background .25s; } .pd-view .pd-attrs b.pd-srv em:hover{ color:var(--main);border-color:var(--main);background:rgba(12,96,180,.05); } .pd-view .pd-cta{display:flex;gap:14px;flex-wrap:wrap;} .pd-view .pd-cta .btn{font-size:15px;padding:0 30px;height:44px;line-height:44px;} /* ----------16.4 关键数据带：把纯文字参数升级为可扫读的数字 ---------- */ .pd-stats{ display:grid;grid-template-columns:repeat(4,1fr); margin:0 0 44px;border:1px solid var(--line);background:var(--bg); } .pd-stats .st{ padding:24px 20px;text-align:center; border-right:1px solid var(--line); transition:background .3s; } .pd-stats .st:last-child{border-right:0;} .pd-stats .st:hover{background:#fff;} .pd-stats .n{ display:inline-block; font-family:"Bahnschrift","DIN Alternate","Helvetica Neue",Arial,sans-serif; font-size:38px;line-height:1;font-weight:700; color:var(--main);letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .pd-stats .u{ font-size:15px;font-weight:600;color:var(--main); margin-left:3px; } .pd-stats .t{ display:block;margin-top:10px; font-size:13px;color:var(--ink3);letter-spacing:.02em; } /* ---------- 16.6 案例列表页：全宽三列网格 ---------- */ .cs-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px; } .cs-card{ display:flex;flex-direction:column;background:#fff; border:1px solid var(--line); transition:border-color .3s,box-shadow .3s,transform .3s; } .cs-card .pic{ position:relative;aspect-ratio:4/3;width:100%; overflow:hidden;background:var(--bg); } @supports not (aspect-ratio:4/3){ .cs-card .pic{height:0;padding-bottom:75%;} } .cs-card .pic img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } /* 分类角标：压在图片左上角 */ .cs-card .cls{ position:absolute;left:0;top:0;z-index:2; font-size:12px;color:#fff;background:var(--main); padding:5px 12px;letter-spacing:.02em; max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cs-card .txt{ display:flex;flex-direction:column;flex:1;padding:18px 20px 20px; } .cs-card h3{ font-size:16px;font-weight:600;color:var(--ink);line-height:1.55; margin:0 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color .3s; } .cs-card .desc{ font-size:13px;color:var(--ink3);line-height:1.8;margin:0 0 14px; height:47px;overflow:hidden; /* 固定 2 行，保证卡片等高 */ } .cs-card .date{ margin-top:auto;padding-top:12px;border-top:1px solid var(--line); font-size:12px;color:#b4bcc6;font-family:Arial,sans-serif; } .cs-card:hover{ border-color:var(--main); box-shadow:0 12px 30px rgba(12,96,180,.13); transform:translateY(-3px); } .cs-card:hover .pic img{transform:scale(1.07);} .cs-card:hover h3{color:var(--main);} /* ---------- 16.7 案例内容页：档案柜布局（左行业目录 + 右档案卡） ---------- ⚠️ 与产品内容页（.art-flex 两栏：左图右信息 + 右栏相关产品）刻意区分。 案例页的组织逻辑是「按行业找档案」，所以左侧是分类目录而非产品参数。 */ .cs-archive{ display:grid;grid-template-columns:244px 1fr; gap:40px;align-items:start; } /* 左侧行业目录 */ .cs-index{ background:var(--bg);border:1px solid var(--line); padding:24px 0 22px; position:sticky;top:110px; } .cs-index .ix-t{ font-size:19px;font-weight:700;color:var(--ink); margin:0 0 6px;padding:0 20px;line-height:1.4; } .cs-index .ix-s{ font-size:12px;color:var(--ink3);margin:0 0 16px;padding:0 20px; } .cs-index .ix-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);} .cs-index .ix-list li{border-bottom:1px solid var(--line);} .cs-index .ix-list a{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 20px;font-size:14px;color:var(--ink2); transition:background .25s,color .25s,padding-left .25s; } .cs-index .ix-list a:hover{ background:#fff;color:var(--main);padding-left:26px; } .cs-index .ix-list .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 案例数：等宽数字，右对齐 */ .cs-index .ix-list .ct{ flex:none;font-size:12px;color:var(--ink3); font-variant-numeric:tabular-nums; background:#fff;border:1px solid var(--line); min-width:26px;height:20px;line-height:18px;text-align:center; } /* 当前所在行业：主蓝实心 */ .cs-index .ix-list li.on a{ background:var(--main);color:#fff;font-weight:600; } .cs-index .ix-list li.on .ct{ color:var(--main);background:#fff;border-color:var(--main);font-weight:600; } .cs-index .ix-cta{ padding:20px;margin-top:18px; background:#fff;border:1px solid var(--line); } .cs-index .ix-cta p{ font-size:13px;color:var(--ink3);line-height:1.7;margin:0 0 12px; } .cs-index .ix-cta .btn{display:block;text-align:center;font-size:14px;padding:0 18px;} /* 右侧档案卡 */ .cs-file{min-width:0;} /* 档案头 */ .cf-head{ padding:28px 30px 26px;background:var(--bg); border:1px solid var(--line);border-top:3px solid var(--main); margin-bottom:28px; } /* 分类章 + 档案编号 */ .cf-head .cf-seal{ display:flex;align-items:center;gap:10px;margin-bottom:16px; } .cf-head .cf-seal .cat{ font-size:12px;color:#fff;background:var(--main); padding:4px 12px;letter-spacing:.04em; } .cf-head .cf-seal .no{ font-size:12px;color:var(--ink3); font-family:"Bahnschrift","DIN Alternate",Consolas,monospace; letter-spacing:.08em;font-variant-numeric:tabular-nums; } .cf-head .cf-title{ font-size:30px;color:#222;line-height:1.4;font-weight:600; margin:0 0 14px; } .cf-head .cf-desc{ font-size:14px;color:var(--ink3);line-height:1.9;margin:0 0 22px; max-width:820px; } .cf-head .cf-meta{ display:flex;flex-wrap:wrap;gap:0;margin:0; border-top:1px solid var(--line);padding-top:18px; } .cf-head .cf-meta>div{ display:flex;align-items:baseline;gap:10px; margin-right:40px;padding-right:40px; border-right:1px solid var(--line); } .cf-head .cf-meta>div:last-child{border-right:0;margin-right:0;padding-right:0;} .cf-head .cf-meta dt{ font-size:13px;color:#c8c8c8;white-space:nowrap; } .cf-head .cf-meta dd{ font-size:14px;color:#555;margin:0; font-variant-numeric:tabular-nums; } /* 实物图 */ .cf-pic{margin:0 0 32px;} .cf-pic img{ width:100%;max-height:520px;object-fit:cover;display:block;background:var(--bg); } .cf-pic figcaption{ font-size:12px;color:var(--ink3);text-align:center; padding:9px 0;background:var(--bg); } /* 同行业案例横排（替代产品页的右栏「相关产品」） */ .cf-more{ margin:44px 0 0;padding:26px 28px 24px; background:var(--bg);border:1px solid var(--line); } .cf-more .mf-t{ font-size:19px;font-weight:700;color:var(--ink);margin:0 0 20px; } .cf-more .mf-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:20px; } .cf-more .mf-list>li{min-width:0;} .cf-more .mf-list .th{ aspect-ratio:4/3;overflow:hidden;background:#fff;margin-bottom:12px; } .cf-more .mf-list .th img{ width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); } .cf-more .mf-list>li>a:hover .th img{transform:scale(1.06);} .cf-more h3{ font-size:14px;font-weight:400;color:var(--ink);line-height:1.55; margin:0 0 8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color .25s; } .cf-more .mf-list>li>a:hover h3{color:var(--main);} .cf-more .dt{ font-size:12px;color:#b4bcc6;font-family:Arial,sans-serif; padding-top:8px;border-top:1px solid var(--line); } /* ---------- 16.8 案例正文：规格条目 → 要点网格 / 参数表 ---------- */ /* JS 把短条目归入网格分组，形成「技术要点」区 */ .cs-body .cs-specs{ margin:0 0 40px;border:1px solid var(--line);background:var(--bg); } .cs-body .cs-specs h3{ font-size:19px;font-weight:600;color:var(--ink); margin:0;padding:18px 22px 16px;border-bottom:1px solid var(--line); background:#fff; } .cs-body .cs-specs .spec-in{padding:6px 22px 20px;} .cs-body .cs-specs ul{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr); gap:0 28px; } .cs-body .cs-specs li{ position:relative; font-size:14px;color:#555;line-height:1.8; padding:12px 0 12px 18px; border-bottom:1px dashed var(--line); /* 去掉最后一行的下边框造成的空隙感 */ min-width:0;word-break:break-word; } .cs-body .cs-specs li::before{ content:"";position:absolute;left:0;top:19px; width:6px;height:6px;border-radius:50%;background:var(--main);opacity:.7; } /* 键值型条目（「标签：值」）走两列参数表 */ .cs-body table.cs-kv{ width:100%;border-collapse:collapse;margin:0 0 40px; border:1px solid var(--line);font-size:14px; } .cs-body table.cs-kv th{ width:140px;text-align:left;vertical-align:top; padding:12px 16px;background:var(--bg);color:var(--ink3); font-weight:400;border:1px solid var(--line);white-space:nowrap; } .cs-body table.cs-kv td{ padding:12px 16px;color:#555;line-height:1.8; border:1px solid var(--line); } /* 被提取进参数表 / 要点网格的原段落隐藏（JS 加 .cs-hide） */ .cs-body>p.cs-hide{display:none;} /* 相关产品（右栏）：横向小缩略图（左图 + 右标题），6 条紧凑排列 */ .side-rel .it.has-thumb{ display:flex;gap:14px;align-items:center;padding:12px 0; } .side-rel .it .thumb{ display:block;flex:0 0 96px;width:96px;aspect-ratio:1/1; overflow:hidden;background:var(--bg); } @supports not (aspect-ratio:1/1){ .side-rel .it .thumb{height:0;padding-bottom:96px;} } .side-rel .it .thumb img{ width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); } .side-rel .it:hover .thumb img{transform:scale(1.08);} .side-rel .it .txt{display:block;flex:1;min-width:0;} .side-rel .it .t{ margin:0 0 6px;font-size:14px;line-height:1.55; /* 最多 2 行，超出省略 */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .side-rel .it .o{ display:block;font-size:12px;color:#c8c8c8;line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 产品正文段落稍宽，阅读更舒适 */ .art-detail .ad-body{font-size:15px;line-height:27px;color:#555;padding-bottom:40px;} /* 相关阅读 */ .related{margin-top:44px;background:var(--bg);padding:32px;} .related h3{ font-size:21px;color:var(--ink);font-weight:700;margin-bottom:22px; padding-left:14px;border-left:4px solid var(--main); } .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .related-grid li{background:#fff;border:1px solid var(--line);transition:var(--tr);} .related-grid li:hover{border-color:var(--main);} .related-grid .pic{aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--bg);} @supports not (aspect-ratio:1/1){.related-grid .pic{height:0;padding-bottom:100%;}} .related-grid .pic img{width:100%;height:100%;object-fit:cover;} .related-grid .tt{ padding:14px 16px;font-size:14px;color:var(--ink);line-height:1.6;height:74px;overflow:hidden; } .related-grid li:hover .tt{color:var(--main);} /* 单页内容 */ .single-hd{text-align:center;padding:0 0 30px;margin-bottom:34px;border-bottom:1px solid var(--line);} .single-hd h1{font-size:34px;color:var(--ink);font-weight:700;line-height:1.4;} /* ---------- 17. 单页区块 ---------- */ .about-intro{display:flex;gap:56px;align-items:center;} .about-intro .txt{flex:1;} .about-intro .txt h2{font-size:30px;color:var(--ink);font-weight:700;line-height:1.4;margin-bottom:8px;} .about-intro .txt .en{font-size:15px;color:var(--main);letter-spacing:3px;font-family:Arial;margin-bottom:24px;} .about-intro .pic{flex:0 0 46%;} .about-intro .pic img{width:100%;} /* 简介正文改为后台调用后，段落样式由类接管（原来写在模板的行内 style 里） */ .about-para p{font-size:16px;line-height:2;color:#666;margin-bottom:18px;} .about-para p:last-child{margin-bottom:0;} /* 后台编辑器可能输出
结尾的空段，视觉上不要留白 */ .about-para p:empty,.about-para p:has(> br:only-child){display:none;} /* 后台正文里的站内链接沿用主题色 */ .about-para a{color:var(--main);} .about-para a:hover{text-decoration:underline;} /* 历程时间轴 */ .timeline{position:relative;padding-left:34px;} .timeline:before{ content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line); } .timeline li{position:relative;padding-bottom:44px;} .timeline li:last-child{padding-bottom:0;} .timeline li:before{ content:"";position:absolute;left:-34px;top:5px;width:16px;height:16px; border-radius:50%;background:#fff;border:4px solid var(--main);z-index:2; } .timeline .yr{font-size:24px;color:var(--main);font-family:Arial;font-weight:700;line-height:1.2;} .timeline h4{font-size:18px;color:var(--ink);font-weight:600;margin:8px 0 10px;} .timeline p{font-size:15px;color:var(--ink2);line-height:1.85;} /* 能力标签 */ .cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .cap-card{ background:#fff;border:1px solid var(--line);padding:30px 26px;transition:var(--tr); text-align:center; } .cap-card:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.12);transform:translateY(-3px);} .cap-card .ico{ width:56px;height:56px;margin:0 auto 18px;background:var(--main);border-radius:50%; display:flex;align-items:center;justify-content:center; } .cap-card .ico svg{width:26px;height:26px;fill:#fff;} .cap-card h4{font-size:18px;color:var(--ink);font-weight:600;margin-bottom:8px;} .cap-card p{font-size:14px;color:var(--ink3);line-height:1.4;} /* 工艺流程 */ .flow{display:flex;flex-wrap:wrap;gap:0;} .flow li,.flow > .ani-in{ flex:1;min-width:150px;position:relative;text-align:center;padding:0 6px; } .flow li .step,.flow > .ani-in .step{ width:74px;height:74px;border-radius:50%;background:var(--main);color:#fff; display:flex;align-items:center;justify-content:center;margin:0 auto 18px; font-size:26px;font-family:Arial;font-weight:700;position:relative;z-index:2; } .flow li:not(:last-child)::after,.flow > .ani-in:not(:last-child)::after{ content:"";position:absolute;left:50%;top:37px;width:100%;height:2px; background:var(--line);z-index:1; } .flow li.on .step,.flow > .ani-in.on .step{background:var(--main-d);} .flow h4{font-size:17px;color:var(--ink);font-weight:600;margin-bottom:8px;} .flow p{font-size:13px;color:var(--ink3);line-height:1.65;padding:0 6px;} /* 检验流程：数字圆点外圈虚线环（默认静止，鼠标选中转一圈并高亮；数字本身不转，保证可读） */ .flow li .step,.flow > .ani-in .step{transition:transform .3s;} /* 虚线环默认静止；鼠标选中时转一圈（iteration-count:1）并高亮 */ .flow li .step::before,.flow > .ani-in .step::before{ content:"";position:absolute;inset:-7px;border-radius:50%; border:2px dashed rgba(12,96,180,.35); } /* 进场后节点带 .on：虚线提亮，仍静止 */ .flow li.on .step::before,.flow > .ani-in.on .step::before{ border-color:rgba(12,96,180,.6); } /* 悬停：虚线变主色高亮 + 顺时针转半圈（0.6s，只跑一次后归位） */ .flow li:hover .step::before,.flow > .ani-in:hover .step::before{ border-color:var(--main); animation:stepSpin .6s linear 1; } .flow li:hover .step,.flow > .ani-in:hover .step{transform:scale(1.05);} /* 顺时针转半圈：0 → 180deg */ @keyframes stepSpin{to{transform:rotate(180deg);}} @media (prefers-reduced-motion:reduce){ .flow li .step::before,.flow > .ani-in .step::before{animation:none;} } /* 设备展示网格 */ .eq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .eq-card{background:#fff;border:1px solid var(--line);transition:var(--tr);overflow:hidden;} .eq-card:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.12);} .eq-card .pic{aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--bg);} @supports not (aspect-ratio:1/1){.eq-card .pic{height:0;padding-bottom:100%;}} .eq-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .eq-card:hover .pic img{transform:scale(1.07);} .eq-card .tt{padding:16px 18px;font-size:15px;color:var(--ink);text-align:center;} .eq-card:hover .tt{color:var(--main);} /* 图片墙 */ .pic-wall{column-count:4;column-gap:20px;} .pic-wall li{ break-inside:avoid;margin-bottom:20px;background:#fff;border:1px solid var(--line); transition:var(--tr);display:block;overflow:hidden; } .pic-wall li:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.12);} .pic-wall .pic{overflow:hidden;} .pic-wall .pic img{width:100%;transition:transform .5s;} .pic-wall li:hover .pic img{transform:scale(1.05);} .pic-wall .tt{padding:14px 18px;font-size:15px;color:var(--ink);} .pic-wall li:hover .tt{color:var(--main);} /* FAQ 折叠 */ .faq-item{background:#fff;border:1px solid var(--line);margin-bottom:14px;} .faq-q{ padding:22px 28px;font-size:18px;color:var(--ink);font-weight:600; cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px; transition:var(--tr);line-height:1.6; } .faq-q:hover{color:var(--main);} .faq-q .ico{ flex:0 0 24px;height:24px;border-radius:50%;background:var(--bg); position:relative;transition:all .3s; } .faq-q .ico::before,.faq-q .ico::after{ content:"";position:absolute;left:50%;top:50%;background:var(--main); transform:translate(-50%,-50%);transition:all .3s; } .faq-q .ico::before{width:11px;height:2px;} .faq-q .ico::after{width:2px;height:11px;} .faq-item.on .faq-q{color:var(--main);} .faq-item.on .faq-q .ico{background:var(--main);} .faq-item.on .faq-q .ico::before{background:#fff;} .faq-item.on .faq-q .ico::after{height:0;} .faq-a{display:none;padding:0 28px 26px;font-size:15px;color:var(--ink2);line-height:1.86;} .faq-item.on .faq-a{display:block;} /* ---------- 17b-2. 实力数据条 + 分区叙事（2026-10-08） ---------- */ /* 数字先建立信任：客户看实力先看规模再看图 */ .gal-stats{background:var(--deep);padding:44px 0;position:relative;overflow:hidden;} .gal-stats::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(12,96,180,.28),rgba(12,96,180,0) 62%); } .gal-stats .wrap{position:relative;z-index:2;display:flex;flex-wrap:wrap;} .gs-item{ flex:1;min-width:150px;text-align:center;position:relative;padding:0 10px; } .gs-item:not(:last-child)::after{ content:"";position:absolute;right:0;top:50%;transform:translateY(-50%); width:1px;height:38px;background:rgba(255,255,255,.16); } .gs-item b{ display:block;font-size:38px;font-weight:700;color:#fff;line-height:1.1; font-family:Arial;letter-spacing:1px; } .gs-item b i{font-style:normal;font-size:22px;font-weight:400;margin-left:2px;} .gs-item span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.72);} /* 分区 */ .gal-zone{margin-bottom:56px;} .gal-zone:last-child{margin-bottom:0;} .gz-head{ display:flex;align-items:flex-start;gap:20px; padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line); } .gz-no{ flex:0 0 auto;font-size:44px;font-weight:700;line-height:1;color:var(--main); opacity:.22;font-family:Arial; } .gz-head h3{font-size:24px;color:var(--ink);font-weight:700;line-height:1.3;} .gz-head p{margin-top:8px;font-size:14px;color:var(--ink2);line-height:1.7;} /* 分区一：左大图 + 右侧小图 */ .gz-body{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;} .gz-hero{ position:relative;overflow:hidden;cursor:zoom-in;background:#f4f7fa; aspect-ratio:16/11; } .gz-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1);} .gz-hero:hover img{transform:scale(1.05);} .gz-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(8,26,48,.78) 100%); opacity:.9;transition:opacity .35s; } .gz-hero:hover::after{opacity:1;} .gz-hero-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px; } .gz-hero-cap b{ display:block;font-size:19px;color:#fff;font-weight:500;line-height:1.4; } .gz-hero-cap span{ display:inline-block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.4);padding:3px 10px; } .gz-thumbs{ display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px; } .gz-thumb{ position:relative;overflow:hidden;cursor:zoom-in;background:#f4f7fa; min-height:104px; } .gz-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;} .gz-thumb:hover img{transform:scale(1.07);} /* 分区二及以后：等宽卡片行 */ .gz-row3{grid-template-columns:repeat(3,1fr);} .gz-row2{grid-template-columns:repeat(2,1fr);} .gz-row4{grid-template-columns:repeat(4,1fr);} .gz-card{ background:#fff;border:1px solid var(--line);overflow:hidden;cursor:zoom-in; transition:var(--tr); } .gz-card:hover{border-color:var(--main);box-shadow:0 12px 30px rgba(12,96,180,.14);} .gz-card-img{overflow:hidden;background:#f4f7fa;aspect-ratio:4/3;} .gz-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s;} .gz-card:hover .gz-card-img img{transform:scale(1.07);} .gz-card-cap{ padding:14px 16px;font-size:14px;color:var(--ink);line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--tr); } .gz-card:hover .gz-card-cap{color:var(--main);} /* 5 张时首张横跨两列，避免最后一张单独落单 */ .gz-row4 .gz-card-lead{grid-column:span 2;} .gz-row4 .gz-card-lead .gz-card-img{aspect-ratio:8/3;} /* ---- 响应式 ---- */ @media (max-width:1200px){ .gz-body{grid-template-columns:1fr;} .gz-thumbs{grid-auto-rows:auto;} .gz-thumb{min-height:120px;} .gz-row4{grid-template-columns:repeat(3,1fr);} .gs-item b{font-size:32px;} } @media (max-width:900px){ .gs-item{min-width:33.33%;padding:16px 8px;} .gs-item:not(:last-child)::after{display:none;} .gs-item b{font-size:28px;} .gs-item span{font-size:13px;} .gz-no{font-size:34px;} .gz-head h3{font-size:20px;} .gz-row3,.gz-row2,.gz-row4{grid-template-columns:repeat(2,1fr);} .gz-thumbs{grid-template-columns:repeat(2,1fr);} .gz-hero{aspect-ratio:16/10;} } @media (max-width:520px){ .gal-stats{padding:30px 0;} .gs-item{min-width:50%;} .gal-zone{margin-bottom:40px;} } /* ---------- 17b-4. 横向滚动带（2026-10-08 20:00 重做：整屏翻页 carousel） ---------- */ .scroll-sec{padding:var(--sp-half) 0;position:relative;} .mrail-wrap{ position:relative; width:90%;max-width:var(--w);margin:0 auto; /* 让 item 宽度基于本容器，而不是由内容撑开的轨道 */ container-type:inline-size; container-name:mrail; } /* mrail-wrap 本身已经是内容宽容器，内部 .wrap 不要再二次收缩 */ .mrail-wrap > .wrap{width:100%;max-width:none;} /* 轨道：原生横向滚动，位置由 JS 精确停在整屏边界（scrollLeft = step 的整数倍）， 所以任何时刻都是整齐的 PER 张，不会出现左右各露半张。 滚动条隐藏，翻页动效由 JS 的 easeInOutCubic 补间完成。 */ .mrail{ display:flex; overflow-x:auto;overflow-y:hidden; padding:4px 0 18px; scroll-behavior:auto; /* 平滑由 JS 控制，避免与补间打架 */ scroll-snap-type:none; scrollbar-width:none;-ms-overflow-style:none; } .mrail::-webkit-scrollbar{display:none;height:0;width:0;} /* 一屏 4 张：卡宽基于容器（.mrail-wrap）宽度，用 cqw 让 4 张恰好填满一屏。 间距用 item 的 margin-right（不能用 flex gap，会影响 scrollLeft 整屏对齐）。 JS 实测 step = 第1张到第5张的距离 ≈ 100cqw，scrollLeft 停在 step 整数倍即精确对齐。 */ .mrail-item{ flex:0 0 auto;width:calc((100cqw - 3*20px)/4);margin:0 20px 0 0; } .mrail-box{ position:relative;overflow:hidden;background:#eaeff5;cursor:zoom-in; aspect-ratio:4/3;border:1px solid var(--line);transition:var(--tr); } .mrail-box:hover{border-color:var(--main);box-shadow:0 12px 28px rgba(12,96,180,.14);} .mrail-box img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .55s cubic-bezier(.2,.7,.3,1); } .mrail-box:hover img{transform:scale(1.07);} .mrail-cap{ margin-top:12px;font-size:14px;color:var(--ink2);line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--tr); } .mrail-item:hover .mrail-cap{color:var(--main);} /* 证书带：竖版比例，一屏 6 张 */ .mrail-cert .mrail-item{width:calc((100cqw - 5*20px)/6);} .mrail-cert .mrail-box{aspect-ratio:3/4;background:#f7f9fb;} /* —— 整屏翻页：由 JS 维护 scrollLeft，停在 step 整数倍，无需 CSS 动画 —— */ .mrail[data-pages-done]{will-change:scroll-position;} /* 左右按钮：居中一排，方角描边，悬停填主色 */ .mrail-nav{ display:flex;justify-content:center;align-items:center;gap:12px; margin-top:2px; } .mrail-btn{ appearance:none;-webkit-appearance:none; flex:0 0 auto;width:44px;height:44px;padding:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);background:#fff;color:var(--ink); cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr); } .mrail-btn:hover{background:var(--main);border-color:var(--main);color:#fff;} .mrail-btn:active{background:var(--main-d);border-color:var(--main-d);} /* 悬停时箭头轻微位移，提示方向 */ .mrail-btn svg{transition:transform var(--tr);} .mrail-btn.prev:hover svg{transform:translateX(-2px);} .mrail-btn.next:hover svg{transform:translateX(2px);} /* 首页工厂实拍带：图上叠加标题（.mrail-box 有 overflow:hidden，标题不能放外面） */ .mrail-wrap .mrail-box.hcard::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:52px; background:linear-gradient(180deg,rgba(13,27,51,0),rgba(13,27,51,.82)); opacity:.9;transition:opacity var(--tr);pointer-events:none; } .mrail-wrap .mrail-box.hcard:hover::after{opacity:1;} .mrail-wrap .hcard-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:8px 12px;font-size:14px;color:#fff;line-height:1.4; background:rgba(13,27,51,.72); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background var(--tr); } .mrail-wrap .mrail-box.hcard:hover .hcard-cap{background:var(--main);} /* 「全部实景」入口（与按钮同排居中） */ .mrail-more{ font-size:14px;font-weight:400;color:var(--main); letter-spacing:.5px;white-space:nowrap;transition:color var(--tr); } .mrail-more:hover{color:var(--main-d);text-decoration:underline;} @container mrail (max-width:900px){ .scroll-sec{padding:54px 0;} /* 一屏 2 张 */ .mrail-item{width:calc((100cqw - 20px)/2);margin-right:14px;} .mrail-cert .mrail-item{width:calc((100cqw - 2*14px)/3);} } @container mrail (max-width:520px){ .mrail-item{width:calc(100cqw/1.2);margin-right:12px;} /* 一屏约 1.2 张，突出单图 */ .mrail-cert .mrail-item{width:calc(100cqw/2.2);} } /* ---------- 17b-3. 荣誉资质 / 合作客户 差异化版式（2026-10-08） ---------- */ /* 资质证书：单张居中大图，证书类内容需要足够大才看得清 */ .cert-item:hover{border-color:var(--main);box-shadow:0 14px 40px rgba(12,96,180,.14);} /* 资质证书：网格自适应，1 张时居中大图，多张自动铺开 */ .cert-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px;margin:0;padding:0;list-style:none;justify-items:center; } .cert-item:hover{border-color:var(--main);box-shadow:0 14px 40px rgba(12,96,180,.14);} /* 仅 1 张时占更大版面，证书要看清 */ .cert-grid:has(> li:only-child){grid-template-columns:1fr;max-width:560px;margin:0 auto;} .cert-grid > li:only-child .cert-item{max-width:560px;padding:30px;} .cert-grid > li:only-child .cert-img{min-height:340px;max-height:560px;} .cert-grid > li:only-child .cert-img img{max-height:520px;} .cert-grid > li:only-child .cert-cap b{font-size:20px;} /* 合作客户：LOGO 小尺寸平铺，不做灯箱大图（logo 放大无意义） */ .logo-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none; } .logo-item{margin:0;padding:0;} .logo-box{ background:#fff;border:1px solid var(--line);padding:26px 20px;height:132px; display:flex;align-items:center;justify-content:center;cursor:zoom-in;transition:var(--tr); } .logo-box:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.1);} .logo-box img{max-width:100%;max-height:78px;display:block;transition:transform .4s;} .logo-box:hover img{transform:scale(1.06);} .logo-cap{ margin-top:12px;text-align:center;font-size:14px;color:var(--ink2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } @media (max-width:1200px){ .logo-grid{grid-template-columns:repeat(3,1fr);gap:18px;} } @media (max-width:900px){ .logo-grid{grid-template-columns:repeat(2,1fr);gap:14px;} .logo-box{height:110px;padding:20px 14px;} } @media (max-width:520px){ .logo-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .logo-box{height:92px;padding:16px 10px;} } /* ---------- 17b. 图片库 / 灯箱（2026-10-08） ---------- */ .gal-bar{ display:flex;align-items:flex-end;justify-content:space-between;gap:30px; padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line); } .gal-bar-l h2{font-size:30px;color:var(--ink);font-weight:700;line-height:1.3;} .gal-bar-l h2 em{font-style:normal;font-size:15px;color:var(--main);letter-spacing:2px;font-weight:400;margin-left:10px;} .gal-bar-l p{margin-top:10px;font-size:15px;color:var(--ink2);} .gal-bar-r .gal-tip{font-size:14px;color:var(--ink3);} .gal-bar-r .gal-tip b{color:var(--main);font-size:20px;font-weight:700;padding:0 4px;} /* 网格：统一 4 列，图片定高裁切，保证排列整齐 */ .gal-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none; } .gal-item{margin:0;padding:0;} .gal-box{ position:relative;display:block;background:#fff;border:1px solid var(--line); overflow:hidden;cursor:zoom-in;transition:var(--tr); } .gal-box:hover{border-color:var(--main);box-shadow:0 12px 30px rgba(12,96,180,.14);} .gal-img{position:relative;overflow:hidden;background:#f4f7fa;aspect-ratio:4/3;} .gal-img img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .55s cubic-bezier(.2,.7,.3,1); } .gal-box:hover .gal-img img{transform:scale(1.07);} /* 悬停遮罩 + 放大镜图标 */ .gal-mask{ position:absolute;inset:0;background:rgba(12,42,78,.5); opacity:0;transition:opacity .35s;display:flex;align-items:center;justify-content:center; } .gal-box:hover .gal-mask{opacity:1;} .gal-zoom{ width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--main); display:flex;align-items:center;justify-content:center;transform:scale(.7);transition:transform .35s; } .gal-box:hover .gal-zoom{transform:scale(1);} /* 底部标题条 */ .gal-cap{ padding:13px 16px;font-size:14px;color:var(--ink);line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color var(--tr); } .gal-box:hover .gal-cap{color:var(--main);} /* ---- 灯箱 ---- */ .gal-lightbox{ position:fixed;inset:0;z-index:9999;display:none; justify-content:center;align-items:center; } .gal-lightbox.on{display:flex;} .gal-lb-mask{position:absolute;inset:0;background:rgba(8,18,32,.94);} .gal-lb-figure{ position:relative;z-index:2;margin:0;max-width:88vw;max-height:88vh; display:flex;flex-direction:column;align-items:center;justify-content:center; opacity:0;transform:scale(.94);transition:opacity .3s,transform .3s; } .gal-lightbox.on .gal-lb-figure{opacity:1;transform:scale(1);} .gal-lb-img{ max-width:88vw;max-height:78vh;display:block; box-shadow:0 24px 70px rgba(0,0,0,.6);background:#111; } .gal-lb-cap{ display:flex;align-items:center;gap:16px;margin-top:18px; color:rgba(255,255,255,.92);font-size:15px;text-align:center; } .gal-lb-title{max-width:70vw;} .gal-lb-idx{color:rgba(255,255,255,.55);font-size:14px;white-space:nowrap;} /* 灯箱按钮 */ .gal-lb-btn{ position:absolute;z-index:3;background:rgba(255,255,255,.1);color:#fff; border:1px solid rgba(255,255,255,.24);cursor:pointer; display:flex;align-items:center;justify-content:center;transition:all .28s; } .gal-lb-btn:hover{background:var(--main);border-color:var(--main);} .gal-lb-prev{left:26px;top:50%;margin-top:-27px;width:54px;height:54px;} .gal-lb-next{right:26px;top:50%;margin-top:-27px;width:54px;height:54px;} .gal-lb-close{right:26px;top:26px;width:46px;height:46px;} /* ---- 响应式 ---- */ @media (max-width:1200px){ .gal-grid{grid-template-columns:repeat(3,1fr);gap:20px;} } @media (max-width:900px){ .gal-grid{grid-template-columns:repeat(2,1fr);gap:16px;} .gal-bar{flex-direction:column;align-items:flex-start;gap:14px;} .gal-bar-l h2{font-size:24px;} .gal-lb-prev{left:8px;width:44px;height:44px;} .gal-lb-next{right:8px;width:44px;height:44px;} .gal-lb-close{right:10px;top:10px;width:40px;height:40px;} .gal-lb-img{max-width:94vw;max-height:70vh;} } @media (max-width:520px){ .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .gal-cap{padding:10px 12px;font-size:13px;} .gal-lb-figure{max-width:96vw;} } /* ---------- 17c. 服务单页：技术参数表 / 应用场景 / 服务对比（2026-10-08） ---------- 同行PCBA 服务页标配是「参数规格表 + 应用场景 + 选型对比」， 原单页只有流程图 + 重复的 cap-grid，缺少可决策的技术信息。 */ /* 技术参数表：左列参数名 + 右列能力值 */ .spec-table{ width:100%;border-collapse:collapse;background:#fff; border:1px solid var(--line);font-size:15px; } .spec-table th,.spec-table td{ padding:14px 18px;text-align:left;border-bottom:1px solid var(--line); line-height:1.7;vertical-align:top; } .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0;} .spec-table th{ width:190px;background:var(--bg);color:var(--ink); font-weight:600;white-space:nowrap; } .spec-table td{color:var(--ink2);} .spec-table td b{color:var(--main);font-weight:600;} /* 表格内的能力标签 */ .spec-tag{ display:inline-block;padding:2px 9px;margin:2px 4px 2px 0; background:var(--bg2);color:var(--main);font-size:13px;line-height:1.6; } .spec-wrap{max-width:1000px;margin:0 auto;} .spec-note{ margin-top:16px;padding:14px 18px;background:var(--bg); border-left:3px solid var(--main); font-size:14px;color:var(--ink2);line-height:1.8; } /* 应用场景：横向卡片 */ .use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .use-card{ background:#fff;border:1px solid var(--line);padding:26px 24px; transition:var(--tr);position:relative; } .use-card:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.12);transform:translateY(-3px);} .use-card h4{ font-size:18px;color:var(--ink);font-weight:600;margin-bottom:8px; display:flex;align-items:center;gap:9px; } .use-card h4 svg{width:20px;height:20px;fill:var(--main);flex:0 0 20px;} .use-card p{font-size:14px;color:var(--ink3);line-height:1.75;} .use-card .use-tip{ margin-top:12px;padding-top:12px;border-top:1px dashed var(--line); font-size:13px;color:var(--main); } /* 服务选型对比表（ztfw 汇总页） */ .cmp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:14px;} .cmp-table th,.cmp-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);line-height:1.65;} .cmp-table thead th{ background:var(--main);color:#fff;font-weight:500;font-size:15px; border-bottom:0;white-space:nowrap; } .cmp-table thead th:first-child{text-align:center;} .cmp-table tbody tr:hover{background:var(--bg);} .cmp-table td:first-child{ font-weight:600;color:var(--ink);white-space:nowrap;text-align:center; } .cmp-table a{color:var(--main);} .cmp-table a:hover{text-decoration:underline;} @media (max-width:900px){ .spec-table th{width:auto;} .use-grid{grid-template-columns:repeat(2,1fr);} /* 移动端参数表改双列显示，避免横向溢出 */ .spec-table,.spec-table tbody,.spec-table tr,.spec-table th,.spec-table td{display:block;width:100%;} .spec-table tr{border-bottom:1px solid var(--line);} .spec-table tr:last-child{border-bottom:0;} .spec-table th{width:auto;padding-bottom:6px;} .spec-table td{padding-top:0;border-bottom:0;} .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block;width:100%;} .cmp-table thead{display:none;} .cmp-table tr{border-bottom:1px solid var(--line);} .cmp-table td{border-bottom:0;padding:6px 14px;} .cmp-table td:first-child{ text-align:left;background:var(--bg);padding:10px 14px;margin-top:6px; } .cmp-table td[data-label]::before{ content:attr(data-label) "：";color:var(--ink3); } } @media (max-width:640px){ .use-grid{grid-template-columns:1fr;} } /* ---------- 18. CTA 通栏 ---------- */ .cta-band{ background:var(--main);padding:var(--sp-band) 0;position:relative;overflow:hidden; } .cta-band::before{ content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px; border-radius:50%;background:rgba(255,255,255,.06); } .cta-band .box{display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:2;} .cta-band h3{font-size:30px;color:#fff;font-weight:700;line-height:1.4;margin-bottom:10px;} .cta-band p{font-size:16px;color:rgba(255,255,255,.8);} .cta-band .tel{text-align:right;} .cta-band .tel b{display:block;font-size:38px;color:#fff;font-family:Arial;font-weight:700;line-height:1.2;letter-spacing:1px;} .cta-band .tel span{font-size:15px;color:rgba(255,255,255,.75);} /* ---------- 19. 页脚 ---------- */ .footer{background:var(--deep);color:#93a1b5;padding-top:70px;font-size:14px;} .foot-top{display:grid;grid-template-columns:250px auto auto auto auto 295px;justify-content:space-between;gap:24px;padding-bottom:54px;} .foot-col h4{ font-size:17px;color:#fff;font-weight:600;margin-bottom:22px;position:relative;padding-bottom:12px; } .foot-col h4::after{ content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--main); } .foot-col h4 a{color:#fff;transition:var(--tr);} .foot-col h4 a:hover{color:var(--main-l);} .foot-col ul li{margin-bottom:11px;line-height:1.4;} .foot-col ul li a{color:#93a1b5;transition:var(--tr);} .foot-col ul li a:hover{color:#fff;padding-left:5px;} .foot-logo img{height:46px;margin-bottom:18px;} .foot-logo p{line-height:1.86;margin-bottom:20px;} .foot-logo .cert{display:flex;flex-wrap:wrap;gap:10px;} .foot-logo .cert span{ padding:4px 12px;border:1px solid rgba(255,255,255,.15); font-size:12px;color:#93a1b5;letter-spacing:.5px; } .foot-contact p{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start;} .foot-contact .ico{ flex:0 0 18px;height:18px;margin-top:4px; display:flex;align-items:center;justify-content:center; } .foot-contact .ico svg{width:16px;height:16px;fill:var(--main-l);transition:var(--tr);} .foot-contact p:hover .ico svg{fill:#fff;} .foot-contact .tel b{color:#fff;font-size:22px;font-family:Arial;font-weight:700;letter-spacing:.5px;} .foot-contact .code{margin-top:20px;} .foot-contact .code img{width:120px;} .foot-contact .code span{font-size:12px;} /* 底部友情链接 */ .foot-keys{ border-top:1px solid rgba(255,255,255,.08);padding:24px 0; display:flex;gap:8px 22px;flex-wrap:wrap;align-items:flex-start; } .foot-keys b{color:#fff;font-weight:600;white-space:nowrap;} .foot-keys a{ color:#5b6b80;padding:0; transition:var(--tr);font-size:13px;position:relative; } .foot-keys a:hover{color:#fff;} .foot-bot{ border-top:1px solid rgba(255,255,255,.08);padding:22px 0; display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13px;color:#5b6b80;line-height:1.9; } .foot-bot a{color:#5b6b80;} .foot-bot a:hover{color:#fff;} .foot-bot .links a{margin-left:16px;} /* ---------- 20. 浮动工具 ---------- */ .side-tools{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:104;} .side-tools li{ width:56px;background:#fff;border:1px solid var(--line);border-right:0; margin-bottom:2px;transition:var(--tr); } .side-tools li a{ display:block;height:56px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px;color:var(--ink2); } .side-tools li a svg{width:20px;height:20px;fill:currentColor;} .side-tools li a span{font-size:11px;} .side-tools li:hover{background:var(--main);} .side-tools li:hover a{color:#fff;} /* ⚠️ 此 img 为 absolute 定位，包含块是宽 56px 的浮窗本体， 全局 img{max-width:100%} 会把二维码宽度压到 56px；而 HTML height 属性 固定高度不变 → 明显瘦高变形。必须 max-width:none + height:auto 保持等比。 */ .side-tools li.wx a img{width:110px;height:auto;max-width:none;position:absolute;right:60px;bottom:0;display:none;} .side-tools li.wx:hover img{display:block;} .backtop{ position:fixed;right:16px;bottom:120px;width:46px;height:46px;z-index:104; background:var(--main);color:#fff;display:none;align-items:center;justify-content:center; cursor:pointer;transition:var(--tr); } .backtop.show{display:flex;} .backtop:hover{background:var(--main-d);} .backtop::before{ content:"";width:11px;height:11px;border-top:2px solid #fff;border-left:2px solid #fff; transform:rotate(45deg);margin-top:-4px; } /* ---------- 21. 动效 ---------- 默认状态即最终状态（可见）；JS 加载后再给 加 .js-anim， 由 .js-anim 作用域内的 .ani-* 才启用初始隐藏态。 这样即使 JS 失效或被拦截，页面也只是没有动画，绝不会「错位/空白」。 */ .wow{display:none;} .ani-in{transition:all .8s cubic-bezier(.2,.7,.3,1);} .ani-l{transition:all .8s;} .ani-r{transition:all .8s;} .ani-s{transition:all .7s;} .js-anim .ani-in{opacity:0;transform:translateY(34px);} .js-anim .ani-in.on{opacity:1;transform:translateY(0);} .js-anim .ani-l{opacity:0;transform:translateX(-40px);} .js-anim .ani-l.on{opacity:1;transform:translateX(0);} .js-anim .ani-r{opacity:0;transform:translateX(40px);} .js-anim .ani-r.on{opacity:1;transform:translateX(0);} .js-anim .ani-s{opacity:0;transform:scale(.94);} .js-anim .ani-s.on{opacity:1;transform:scale(1);} /* 尊重系统「减少动态效果」设置 */ @media (prefers-reduced-motion:reduce){ .js-anim .ani-in,.js-anim .ani-l,.js-anim .ani-r,.js-anim .ani-s{ opacity:1!important;transform:none!important;transition:none!important; } } /* 图片懒加载占位 */ .lz{background:var(--bg) no-repeat center/cover;} /* ---------- 22. 表单 ---------- */ .form-box{background:#fff;border:1px solid var(--line);padding:44px 48px;} .form-row{display:flex;gap:20px;margin-bottom:22px;flex-wrap:wrap;} .form-it{flex:1;min-width:230px;} .form-it label{display:block;font-size:14px;color:var(--ink2);margin-bottom:8px;} .form-it label b{color:#d00;} .form-it input,.form-it select,.form-it textarea{ width:100%;height:46px;padding:0 14px;border:1px solid var(--line); font-size:15px;transition:var(--tr);background:#fff;color:var(--ink); } .form-it textarea{height:120px;padding:12px 14px;resize:vertical;line-height:1.8;} .form-it input:focus,.form-it select:focus,.form-it textarea:focus{ border-color:var(--main);outline:none; } .form-it .req{color:#d00;} .form-sub{text-align:center;margin-top:10px;} .form-sub .btn{cursor:pointer;border:0;height:52px;line-height:52px;padding:0 60px;font-size:17px;} .form-tips{font-size:13px;color:var(--ink3);text-align:center;margin-top:16px;line-height:1.9;} /* 留言列表 */ .msg-list li{ background:#fff;border:1px solid var(--line);padding:22px 26px;margin-bottom:16px; } .msg-list .hd{ display:flex;justify-content:space-between;align-items:center; padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--line);flex-wrap:wrap;gap:10px; } .msg-list .nm{font-size:16px;color:var(--ink);font-weight:600;} .msg-list .rl{font-size:16px;color:var(--main);font-weight:600;line-height:1.8;padding-left:18px;} .msg-list .rl .me{color:var(--ink2);font-weight:400;font-size:14px;} /* ---------- 23. 搜索页 ---------- */ .search-hd{background:#fff;border:1px solid var(--line);padding:34px 40px;margin-bottom:30px;} .search-hd form{display:flex;gap:12px;max-width:720px;} .search-hd input{ flex:1;height:52px;padding:0 18px;border:1px solid var(--line);font-size:16px; } .search-hd input:focus{border-color:var(--main);} .search-hd .btn{border:0;cursor:pointer;height:52px;line-height:52px;padding:0 40px;} .search-key{margin-top:18px;font-size:14px;color:var(--ink3);} .search-key a{ color:var(--ink2);margin-right:14px;transition:var(--tr); } .search-key a:hover{color:var(--main);} /* ---------- 24. 404 ---------- */ .err-page{ min-height:100vh;display:flex;align-items:center;justify-content:center; background:var(--bg);text-align:center;padding:60px 20px; } .err-page .code{ font-size:120px;font-family:Arial;font-weight:700;color:var(--main);line-height:1; letter-spacing:6px;margin-bottom:20px; } .err-page h1{font-size:26px;color:var(--ink);font-weight:600;margin-bottom:14px;} .err-page p{font-size:15px;color:var(--ink3);margin-bottom:34px;} /* ---------- 25. 响应式 ---------- */ @media screen and (max-width:1500px){ .nav > ul > li > a{padding:0 16px;font-size:16px;} } @media screen and (max-width:1366px){ .i_title .h3{font-size:34px;} .banner .cap h1,.banner .cap h2{font-size:32px;} .foot-top{grid-template-columns:repeat(3,1fr);gap:24px;} } @media screen and (max-width:1200px){ .prod-grid{grid-template-columns:repeat(3,1fr);} /* 产品列表页：四列降为三列 */ .pdl-grid{grid-template-columns:repeat(3,1fr);gap:28px 22px;} /* 产品内容页：主图缩小，避免挤压右侧信息 */ .pd-view .pd-pic{flex:0 0 380px;width:380px;} .pg-grid{grid-template-columns:repeat(2,1fr);} .adv-grid,.sol-grid,.news-grid{grid-template-columns:repeat(2,1fr);} /* 新闻三栏卡片在中等屏幕降为两栏 */ .news-text-list{grid-template-columns:repeat(2,1fr);} /* 首页新闻两栏在中等屏幕改单栏，标题才不会被截 */ .news-cols{grid-template-columns:1fr;column-gap:0;} .n-row:nth-last-child(2){border-bottom:1px solid var(--line);} .n-row:nth-last-child(-n+2){border-bottom:0;} .link-grid{grid-template-columns:repeat(4,1fr);} .cap-grid,.eq-grid{grid-template-columns:repeat(3,1fr);} .related-grid{grid-template-columns:repeat(3,1fr);} .col-2{flex-direction:column;} .col-side{flex:0 0 100%;width:100%;} .side-menu ul{display:flex;flex-wrap:wrap;} .side-menu li{flex:1;min-width:150px;} .about-intro{flex-direction:column;gap:32px;} .about-intro .pic{flex:0 0 100%;width:100%;} .sec{padding:72px 0;} .i_title{margin-bottom:44px;} } @media screen and (max-width:991px){ .header,.header.small{height:66px;} .header .box,.header.small .box{height:66px;} .header .logo{height:46px;} .header .logo img{height:42px;} .menu-btn{display:block;} .nav{ position:fixed;left:0;right:0;top:66px;background:#fff;height:auto; max-height:0;overflow:hidden;transition:max-height .4s; box-shadow:0 12px 30px rgba(13,27,51,.14); } .nav.open{max-height:78vh;overflow-y:auto;} .nav > ul{display:block;} .nav > ul > li{height:auto;border-bottom:1px solid var(--line);} .nav > ul > li > a, .header.small .nav > ul > li > a, .header:not(.small) .nav > ul > li > a{ height:auto;line-height:1.6;padding:15px 20px;color:#333;font-size:16px; display:flex;align-items:center;justify-content:space-between; } .nav > ul > li.on > a,.nav > ul > li:hover > a, .header:not(.small) .nav > ul > li.on > a{color:var(--main);} .nav > ul > li > a:after{display:none;} .nav .sub{ position:static;transform:none;opacity:1;visibility:visible; box-shadow:none;min-width:0;padding:0;display:none;background:var(--bg); } .nav > ul > li:hover .sub,.nav > ul > li:focus-within .sub, .nav > ul > li.sub-open > .sub{display:block;} .nav > ul > li.sub-open > a .ico{transform:rotate(180deg);} .nav .sub a{padding:11px 20px;font-size:15px;} .h-searchform,.header.small .h-searchform{top:66px;left:0;right:0;} .h-searchform input{flex:1;width:auto;min-width:0;} .h-searchform.open{width:100%;} .h-searchbtn{padding:0 22px;letter-spacing:0;} .h-tel{display:none;} .banner{height:auto;min-height:0;padding:0;} .banner .slide{position:relative;display:none;height:auto;padding:110px 0 70px;background-size:cover;} .banner .slide.on{display:block;} .banner .slide::after{ background:linear-gradient(180deg,rgba(13,27,51,.55),rgba(13,27,51,.85)); } .banner .cap{position:relative;top:auto;transform:none;width:90%;max-width:100%;padding:0;margin:0 auto;} .banner .cap h1,.banner .cap h2{font-size:28px;} .banner .cap p{font-size:15px;margin-bottom:28px;} .banner .dots{width:90%;bottom:30px;} .banner .arrow{display:none;} .banner .scroll{display:none;} /* 资质条：平板/手机统一 2 列，避免同媒体查询规则冲突导致错位 */ .quality-bar{padding:26px 0;} .quality-bar ul{grid-template-columns:repeat(2,1fr);gap:18px 0;align-items:stretch;} .quality-bar li{padding:0 16px;height:auto;align-items:center;} .quality-bar li::after{display:none!important;} .quality-bar li:nth-child(odd){padding-left:0;} .quality-bar li:nth-child(even){padding-right:0;} .quality-bar li .tx b{white-space:normal;font-size:15px;} .quality-bar li .tx span{white-space:normal;} .counter ul{flex-wrap:wrap;} .counter ul li{flex:1 1 50%;margin-bottom:30px;} .counter ul li::after{display:none;} .counter .nums span{font-size:42px;} .prod-grid,.pg-grid,.adv-grid,.sol-grid,.news-grid, .cap-grid,.eq-grid,.related-grid{grid-template-columns:repeat(2,1fr);} .pic-wall{column-count:2;} .art-detail{padding:30px 24px;} .art-detail .ad-hd h1{font-size:24px;} .art-detail .ad-body{font-size:15px;} .art-list .pic{flex:0 0 200px;aspect-ratio:200/140;} .art-list .row{padding:18px;gap:18px;} .art-list h3{font-size:17px;} .foot-top{grid-template-columns:repeat(2,1fr);} .side-tools{display:none;} .flow li,.flow > .ani-in{flex:1 1 33%;margin-bottom:30px;} } @media screen and (max-width:640px){ .prod-grid,.pg-grid,.adv-grid,.sol-grid,.news-grid, .cap-grid,.eq-grid,.related-grid,.link-grid{grid-template-columns:1fr;} .news-text-list{grid-template-columns:1fr;gap:24px;} .news-text-list li{padding-bottom:24px;} .news-text-list .desc{-webkit-line-clamp:2;} .news-cols{grid-template-columns:1fr;} .n-row{padding:16px 2px;gap:14px;} .n-row:hover{padding-left:6px;padding-right:6px;} .n-row .dt{flex:0 0 56px;padding-right:12px;} .n-row .dt b{font-size:22px;} .n-row .tx h3{font-size:16px;white-space:normal;line-height:1.5;} .n-row .tx p{display:none;} .n-row .arw{display:none;} .quality-bar ul{grid-template-columns:repeat(2,1fr);gap:20px 0;} .quality-bar li{padding:0 16px;} .quality-bar li:nth-child(odd){padding-left:0;} .quality-bar li:nth-child(even){padding-right:0;} .pic-wall{column-count:1;} /* 手机端横向溢出防护：以下块必须允许换行/收缩 */ /* 品质流程：min-width:150px × 9 项在手机上必然溢出 */ .flow li,.flow > .ani-in{flex:1 1 46%;min-width:0;margin-bottom:22px;} .flow li:not(:last-child)::after,.flow > .ani-in:not(:last-child)::after{display:none;} /* 产品分类 tab 与筛选条：允许换行，按钮贴边对齐 */ .prod-tabs{justify-content:flex-start;} .prod-tabs li{padding:10px 16px;font-size:15px;} .filter-bar{gap:8px;} .filter-bar a{padding:6px 14px;font-size:13px;} /* 分页：数字多时强制换行 */ /* 分页：窄屏缩小按钮尺寸 */ .pager{gap:0;margin-top:40px;} .pager a,.pager span{min-width:36px;height:36px;padding:0 6px;line-height:36px;font-size:14px;border-radius:18px 18px 18px 0;} /* 侧栏菜单：一行一个，标题不截断 */ .side-menu li{width:100%;} /* 子栏目筛选条：横向可滚动 + 右侧渐隐提示还有更多项 */ .sub-nav .box{padding-bottom:4px;display:block;} .sub-nav-list{ flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;position:relative;width:100%; margin-right:-14px;padding-right:14px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%); } .sub-nav-list::-webkit-scrollbar{display:none;} .sub-nav-list li{margin:5px 5px 5px 0;flex:0 0 auto;} .sub-nav-list li a{height:38px;line-height:38px;padding:0 16px;font-size:14px; border-radius:19px 19px 19px 0;} .sub-nav-list li.on a::before{border-radius:19px 19px 19px 0;} /* 新闻卡片：991px 以下单栏（此断点在 640 断点之后，需单独覆盖为 1 栏） */ .news-text-list{grid-template-columns:1fr;gap:28px 20px;} .sec:has(.news-text-list){padding:36px 0 56px;} .news-text-list .date{padding-bottom:10px;margin-bottom:14px;} .news-text-list h3 a{font-size:16px;} .news-text-list .desc{-webkit-line-clamp:2;} .side-menu .hd{font-size:17px;padding:16px 18px;} /* 列表头标题与筛选条分离 */ .list-head{flex-direction:column;align-items:flex-start;gap:12px;} /* 合作客户等小卡在手机上留白收敛 */ .caps li,.cap-card{padding-left:18px;padding-right:18px;} .counter ul li{flex:1 1 100%;} .art-list .row{flex-direction:column;} .art-list .pic{flex:0 0 auto;width:100%;aspect-ratio:16/9;} .art-simple .row{flex-direction:column;align-items:flex-start;gap:10px;} .foot-top{grid-template-columns:1fr;gap:26px;padding-bottom:34px;} .foot-col h4{font-size:15px;margin-bottom:12px;padding-bottom:8px;} .foot-col ul{display:flex;flex-wrap:wrap;gap:4px 20px;} .foot-col ul li{margin-bottom:0;} .foot-contact p{margin-bottom:8px;} .foot-contact .code{margin-top:10px;} .foot-contact .code img{width:100px;} .foot-keys{padding:16px 0;} .foot-bot{flex-direction:column;gap:10px;} .form-box{padding:28px 20px;} .search-hd{padding:24px 20px;} .search-hd form{flex-direction:column;} .banner .cap h1,.banner .cap h2{font-size:24px;} .banner .cap .bt{font-size:15px;letter-spacing:3px;} .i_title .h3{font-size:26px;} .sec{padding:52px 0;} .cta-band .box{flex-direction:column;text-align:center;} .cta-band .tel{text-align:center;} .cta-band h3{font-size:22px;} .cta-band .tel b{font-size:28px;} .err-page .code{font-size:80px;} .p-card.wide{grid-column:span 1;} } /* ---------- 26. 打印 ---------- */ @media print{ .header,.footer,.side-tools,.backtop,.banner .arrow,.banner .dots,.banner .scroll{display:none!important;} .art-detail{border:0;padding:0;} body{font-size:12pt;} } /* ---------- 27. IC 芯片库 ---------- */ .ic-row{ background:#fff;border:1px solid var(--line);padding:22px 26px;margin-bottom:16px; transition:all .35s;display:flex;align-items:center;gap:24px;flex-wrap:wrap; } .ic-row:hover{border-color:var(--main);box-shadow:0 10px 26px rgba(12,96,180,.12);} .ic-row .nm{flex:1;min-width:220px;} .ic-row .nm h3{font-size:18px;color:var(--ink);font-weight:600;line-height:1.5;} .ic-row .nm h3 a{color:inherit;transition:color .3s;} .ic-row:hover .nm h3 a{color:var(--main);} .ic-row .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;} .ic-row .tags span{ font-size:12px;color:var(--ink2);background:var(--bg);border:1px solid var(--line); padding:3px 12px;letter-spacing:.5px; } .ic-row .tags span b{color:var(--main);font-weight:600;} .ic-row .ask{ flex-shrink:0;display:inline-block;height:40px;line-height:40px;padding:0 26px; background:var(--main);color:#fff;font-size:14px;transition:all .3s; } .ic-row .ask:hover{background:var(--main-d);} /* ---------- 28. 网站地图 ---------- */ .sm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .sm-box{background:#fff;border:1px solid var(--line);padding:26px 28px;} .sm-box h2{ font-size:20px;color:var(--ink);font-weight:600;margin-bottom:16px; padding-bottom:12px;border-bottom:1px solid var(--line); } .sm-box ul li{margin-bottom:9px;line-height:1.9;} .sm-box ul li a{font-size:14px;color:var(--ink2);transition:var(--tr);} .sm-box ul li a:hover{color:var(--main);padding-left:5px;} /* ---------- 29. 移动端补充 ---------- */ @media screen and (max-width:991px){ /* 内容页两栏 → 单栏：右栏「相关新闻」落到正文下方 */ .art-flex{display:block;} .art-col-side{ width:100%;flex:none;margin-top:44px;padding-top:32px; border-top:1px solid var(--line); } .side-rel .h3{font-size:20px;margin-bottom:22px;} .ic-row{gap:14px;padding:18px;} .ic-row .ask{width:100%;text-align:center;} .sm-cols{grid-template-columns:repeat(2,1fr);} } @media screen and (max-width:640px){ .sm-cols{grid-template-columns:1fr;} } /* ---------- 30. 内页通用 ---------- */ /* 内页顶部留白：body 内含 .page-head 时生效（:has 在现代浏览器已全面支持， 不支持的老浏览器会退化为无留白，不影响内容可读性） */ /* 内页导航栏做毛玻璃半透明，横幅从顶部铺满到导航栏背后 */ body:has(.page-head) .header:not(.small){ background:rgba(255,255,255,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.12); } @media screen and (max-width:991px){ body:has(.page-head) .header:not(.small){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} .page-head{height:320px;padding-top:66px;} .page-head-title .en{font-size:13px;letter-spacing:2px;margin-bottom:8px;} .page-head-title h1,.page-head-title h2{font-size:32px;} .page-head-title{transform:translateY(-20px);} .page-head .head-crumb{bottom:34px;font-size:13px;} } @media screen and (max-width:640px){ .page-head{height:320px;padding-top:66px;} .page-head-title h1,.page-head-title h2{font-size:24px;} .page-head-title .en{font-size:12px;letter-spacing:2px;margin-bottom:6px;} /* 标题上移到横幅上部，面包屑独占下方一行，避免重叠 */ .page-head-title{transform:translateY(-52px);} .page-head .head-crumb{bottom:30px;font-size:12px;max-width:94%;gap:5px;} .page-head .head-crumb a{white-space:nowrap;} /* 手机端分节符间距收窄，避免整体溢出 */ .page-head .head-crumb .crumb-sep{margin:0 3px;font-size:11px;} .page-head .head-crumb .crumb-ellipsis{letter-spacing:0;} } /* ---------- 31. 移动端横向溢出兜底 ---------- */ /* flex/grid 子项默认 min-width:auto，长英文或不换行文本会撑破容器。 对主要容器统一允许收缩，标题类长文本再由各自的 ellipsis 规则处理。 */ @media screen and (max-width:991px){ .news-cols,.news-grid,.prod-grid,.pg-grid,.adv-grid,.sol-grid, .art-list li,.art-list .row,.art-simple li,.n-row, .cap-grid,.eq-grid,.flow,.quality-bar ul,.foot-top,.cta-band .box, .col-2,.col-main,.col-side,.list-head,.pager{ min-width:0;max-width:100%; } /* 概览文字在窄屏允许换行，避免截断成半句话 */ .banner .cap p{overflow:visible;} .i_title .p{font-size:15px;} /* 表格类内容在手机上可横向滚动，而不是撑破页面 */ .art-detail .ad-body table{display:block;overflow-x:auto;white-space:nowrap;} /* 产品列表页：两列 */ .pdl-grid{grid-template-columns:repeat(2,1fr);gap:22px 16px;} .pd-card h3{font-size:14px;padding:14px 14px 16px;} /* 产品内容页：主图与信息改为上下堆叠 */ .pd-view{flex-direction:column;gap:24px;padding-bottom:30px;margin-bottom:32px;} .pd-view .pd-pic{flex:none;width:100%;} .pd-view .pd-info h1{font-size:23px;} .pd-view .pd-attrs span{flex:0 0 76px;} .pd-view .pd-cta .btn{width:100%;text-align:center;padding:0 16px;} /* 关键数据带：四列降为两列 */ .pd-stats{grid-template-columns:repeat(2,1fr);} .pd-stats .st:nth-child(2){border-right:0;} .pd-stats .st:nth-child(-n+2){border-bottom:1px solid var(--line);} .pd-stats .n{font-size:30px;} /* 应用场景：三列降为两列 */ .pd-apps{padding:26px 20px 24px;} .pd-apps .apps-grid{grid-template-columns:repeat(2,1fr);} /* 章节标题：移动端收紧间距 */ .pd-sec{font-size:18px;margin:36px 0 16px;padding:0;} .art-detail .ad-body h2,.art-detail .ad-body h3{margin:36px 0 16px;padding:0;} /* 案例列表页：三列降两列 */ .cs-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px;} /* 案例档案：主图与信息上下堆叠 */ .cs-archive{grid-template-columns:1fr;gap:24px;} .cs-index{position:static;} .cs-index .ix-list{ display:grid;grid-template-columns:repeat(2,1fr);gap:0 1px; border-bottom:1px solid var(--line); } .cs-index .ix-list li{border-bottom:1px solid var(--line);} .cf-head{padding:22px 18px 20px;} .cf-head .cf-title{font-size:22px;} .cf-head .cf-meta>div{ margin-right:20px;padding-right:20px; flex-direction:column;gap:2px; } .cf-pic img{max-height:340px;} /* 同行业案例：四列降两列 */ .cf-more{padding:20px 18px 18px;} .cf-more .mf-list{grid-template-columns:repeat(2,1fr);gap:16px 14px;} /* 案例规格网格降为单列 */ .cs-body .cs-specs .spec-in{padding:4px 18px 18px;} .cs-body .cs-specs ul{grid-template-columns:1fr;} .cs-body table.cs-kv th{width:96px;} } /* ---------- 32. 分类条统一视觉（下划线 tab，与首页一致） ---------- */ /* 说明：跨栏目的分类（新闻/案例/博客）点击仍走链接跳转， 这样对 SEO 更友好；仅「同页多面板」的产品分类才做原地切换。 */ .filter-bar{ display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line); justify-content:flex-start; } .filter-bar a{ position:relative;padding:13px 24px;font-size:16px;color:var(--ink2); border:0;background:transparent;transition:var(--tr); } .filter-bar a:hover{color:var(--main);} .filter-bar a.on{color:var(--main);font-weight:600;} .filter-bar a.on::after{ content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); width:34px;height:3px;background:var(--main); } @media screen and (max-width:640px){ .filter-bar a{padding:10px 14px;font-size:14px;} } /* art-list 横向列表图：宽高比 268:186，老浏览器用固定高度兜底 */ @supports not (aspect-ratio:268/186){ .art-list .pic{height:186px;} } /* ---------- 33. 首页产品滑动轮播（原生横向滚动） ---------- 实现方式：轨道用 flex + overflow-x:auto（浏览器原生滚动）， 滚轮/触摸/拖动/箭头全部走原生机制，不会出现"点了没反应"。 */ .prod-panel{display:none;position:relative;} /* 当前面板：必须紧跟上一条，否则 display:none 会覆盖掉 */ .prod-panel.on{display:block;animation:panelIn .45s cubic-bezier(.2,.7,.3,1);} /* 产品区不单独限宽，跟随全站 .wrap（max-width:1400px）， 与下方「行业应用」等区块左/右对齐、列宽一致。 卡宽由 JS 按 4 个一排计算（桌面端间距 16px → 单卡约 338px， 与行业应用 sol-card 同宽），避免某区块窄一截的错位感。 */ /* 箭头定位层：覆盖在图片区域正中，JS 按图片实际高度动态对齐 */ .pslide-arrow{ position:absolute;left:0;right:0;top:0;height:0;z-index:6; pointer-events:none; } .pslide-btn{ /* 兜底位置：JS 未执行时也大致居中；JS 启动后按图片实际高度精确对齐 */ position:absolute;top:22%; width:46px;height:46px;border-radius:50%; background:#fff;border:1px solid var(--line); color:var(--ink2);cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(13,27,51,.14); transition:background .3s,border-color .3s,color .3s,opacity .3s; pointer-events:auto; -webkit-appearance:none;appearance:none; } .pslide-btn svg{width:20px;height:20px;} .pslide-btn:hover{background:var(--main);border-color:var(--main);color:#fff;} .pslide-btn.prev{left:10px;} .pslide-btn.next{right:10px;} /* 到达首尾时淡出禁用 */ .pslide-btn.off{opacity:0;visibility:hidden;pointer-events:none;} /* 轨道：原生横向滚动容器 */ .pslide-track{ display:flex; overflow-x:auto;overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; /* 不启用 scroll-snap：它会把程序化翻页（scrollTo）吸附回最近的 卡片起点，末页因 maxScroll 截断时位置非对齐，会被强行拉回， 表现为"点了箭头没反应"。原生滚动已足够顺滑。 */ scroll-snap-type:none; gap:24px; /* 隐藏滚动条但保留滚动能力 */ scrollbar-width:none;-ms-overflow-style:none; } .pslide-track::-webkit-scrollbar{display:none;height:0;} /* 卡片宽度由 JS 按面板实际宽度计算后写入 --psw， 不用百分比：轨道是滚动容器，百分比基准会随滚动变化， 导致 JS 的 perView() 与实际可显示数量不一致。 */ .pslide-track{--psw:0;--psg:24px;gap:var(--psg);} .pslide-item{ flex:0 0 auto; width:var(--psw); min-width:0; } .pslide-item .p-card .pic{aspect-ratio:1/1;} /* 卡片内标题/摘要统一两行，滚动时不跳高度 */ .pslide-item .p-card .info .pname{ min-height:26px;display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical;overflow:hidden; } .pslide-item .p-card .info p{ min-height:48px;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden; } @media screen and (max-width:1200px){ .pslide-track{--psg:20px;} } @media screen and (max-width:991px){ .pslide-track{--psg:16px;} .pslide-item{width:var(--psw);} .pslide-btn{width:38px;height:38px;} .pslide-btn svg{width:17px;height:17px;} .pslide-btn.prev{left:6px;} .pslide-btn.next{right:6px;} } @media screen and (max-width:640px){ .pslide-track{--psg:12px;} .pslide-item{width:var(--psw);} .pslide-btn{display:none;} /* 手机端直接触摸滑动 */ } /* ---------- 34. 产品滑动分页指示 ---------- */ .pslide-pager{ display:flex;align-items:center;justify-content:center;gap:18px; margin-top:24px; } /* 分页器是面板的兄弟节点：面板隐藏时其分页器必须一并隐藏， 否则多个面板的分页器会叠在一起显示 */ .prod-panel:not(.on) + .pslide-pager{display:none!important;} /* 数量提示：如「1 / 2」 */ .pslide-count{ font-size:14px;color:var(--ink3);font-family:Arial;letter-spacing:1px; min-width:56px;text-align:center; } .pslide-count b{color:var(--main);font-weight:700;font-size:17px;} /* 分页点 */ .pslide-dots{display:flex;align-items:center;gap:9px;} .pslide-dots button{ width:26px;height:4px;padding:0;border:0;cursor:pointer; background:var(--line);transition:all .3s;display:block; -webkit-appearance:none;appearance:none; } .pslide-dots button:hover{background:#c3d0dd;} .pslide-dots button.on{background:var(--main);width:42px;} @media screen and (max-width:640px){ .pslide-pager{margin-top:24px;gap:14px;} .pslide-count{font-size:13px;min-width:48px;} .pslide-count b{font-size:15px;} .pslide-dots{gap:7px;} .pslide-dots button{width:20px;} .pslide-dots button.on{width:32px;} } /* ==================== 35. 页脚 LOGO 反白 + 微信弹码白底 ==================== */ /* 页脚（深底）：原深色 LOGO 不可见，反白处理 */ .foot-logo img{filter:brightness(0) invert(1);opacity:.92;} /* 右侧悬浮条微信弹码加白底描边 */ .side-tools li.wx a img{background:#fff;padding:6px;border:1px solid var(--line);} /* ==================== 36. 文章详情页响应式（2026-10-08 20:20） ==================== */ /* 平板：右栏「相关新闻」移到正文下方，变双列卡片，充分利用横向空间 */ @media (max-width:1100px){ .art-flex{flex-direction:column;gap:44px;} .art-col-main{max-width:none;width:100%;} .art-col-side{ flex:none;width:100%;padding-left:0;padding-top:36px; border-left:0;border-top:1px solid var(--line); } .side-rel .h3{margin-bottom:0;} /* 相关新闻改 2 列网格 */ .side-rel .list{ display:grid;grid-template-columns:repeat(2,1fr); gap:0 28px;margin-top:14px; } } /* 手机：全部单列 */ @media (max-width:720px){ .art-detail .ad-hd h1{font-size:24px;line-height:1.45;} .art-detail .ad-meta{gap:0 12px;font-size:13px;} .art-detail .ad-meta span+span::before{margin-right:12px;} .art-detail .ad-body{font-size:15px;line-height:1.85;} .art-detail .ad-body>p:first-child{font-size:1.07em;} .art-detail .ad-body h2{font-size:1.4em;} .art-detail .ad-body h3{font-size:1.2em;} .art-detail .ad-body h2,.art-detail .ad-body h3{margin:32px 0 14px;} /* 上下篇改单列堆叠 */ .ad-nav{grid-template-columns:1fr;gap:12px;} .ad-nav a:last-child{text-align:left;} /* 相关新闻单列 */ .side-rel .list{grid-template-columns:1fr;} /* 正文表格横向可滚动，不撑破布局 */ .art-detail .ad-body table{display:block;overflow-x:auto;white-space:nowrap;} } /* ==================== 37. 城市分站单页（city.html，2026-10-08） ==================== */ /* 城市分站是「一个城市一个落地页」，没有列表翻页也没有详情页， 所以首屏要自带完整的说服力：标题 + 卖点 + 数据 + 多区块内容。 */ /* —— 首屏：深底大图 + 数据条 —— */ .ct-hero{ background-color:var(--deep); background-size:cover;background-position:center; position:relative;padding:120px 0 72px; } .ct-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,27,51,.86) 0%,rgba(13,27,51,.92) 100%); } .ct-hero-in{position:relative;z-index:2;} .ct-en{ display:inline-block;font-size:13px;letter-spacing:.22em; color:var(--main-l);text-transform:uppercase;margin-bottom:16px; } .ct-h1{ font-size:46px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 20px; } .ct-lead{ font-size:17px;color:rgba(255,255,255,.78);line-height:1.9; max-width:760px;margin:0 0 34px; } .ct-btns{display:flex;gap:14px;margin-bottom:56px;} /* 数据条：4 列，靠分隔线区分 */ .ct-kpi{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18);padding-top:32px; } .ct-kpi .kpi{position:relative;padding-left:24px;} .ct-kpi .kpi:first-child{padding-left:0;} .ct-kpi .kpi::before{ content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px; background:var(--main);border-radius:2px; } .ct-kpi .kpi:first-child::before{display:none;} .ct-kpi b{ display:block;font-size:40px;font-weight:700;color:#fff;line-height:1.1; font-variant-numeric:tabular-nums; } .ct-kpi b em{font-style:normal;font-size:20px;font-weight:400;margin-left:2px;} .ct-kpi span{display:block;font-size:14px;color:rgba(255,255,255,.6);margin-top:8px;} /* —— 本地优势：3×2 网格 —— */ .ct-adv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} .ct-adv .adv-item{background:#fff;padding:34px 28px;transition:background .3s;} .ct-adv .adv-item:hover{background:#f8fbfe;} .ct-adv .ico{ display:inline-flex;align-items:center;justify-content:center; width:52px;height:52px;background:var(--bg);color:var(--main); margin-bottom:20px; } .ct-adv .ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;} .ct-adv h3{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.5;} .ct-adv p{font-size:15px;color:var(--ink2);line-height:1.85;margin:0;} /* —— 服务能力：4 列 —— */ .ct-cap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;} .ct-cap .cap-col{ background:#fff;border:1px solid var(--line);padding:28px 24px; border-top:3px solid var(--main); } .ct-cap h3{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 16px;} .ct-cap ul{list-style:none;margin:0;padding:0;} .ct-cap li{ position:relative;padding-left:18px;margin-bottom:11px; font-size:14px;color:var(--ink2);line-height:1.7; } .ct-cap li:last-child{margin-bottom:0;} .ct-cap li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--main); } /* —— 应用领域：标签云 —— */ .ct-apps{display:flex;flex-wrap:wrap;gap:12px;} .ct-apps .app{margin:0;} .ct-apps a{ display:inline-block;padding:12px 24px; background:#fff;border:1px solid var(--line); font-size:15px;color:var(--ink2);transition:var(--tr); } .ct-apps a:hover{ background:var(--main);border-color:var(--main);color:#fff; } /* —— 附近城市分站：内链网格 —— */ .ct-net{display:flex;flex-wrap:wrap;gap:10px;} .ct-net p{margin:0;} .ct-net a{ display:inline-block;padding:9px 18px;background:#fff; border:1px solid var(--line);font-size:14px;color:var(--ink2);transition:var(--tr); } .ct-net a:hover{border-color:var(--main);color:var(--main);background:#f8fbfe;} /* —— 响应式 —— */ @media (max-width:1200px){ .ct-h1{font-size:40px;} .ct-cap{grid-template-columns:repeat(2,1fr);} } @media (max-width:991px){ .ct-hero{padding:80px 0 56px;} .ct-h1{font-size:32px;} .ct-lead{font-size:15px;} .ct-kpi{grid-template-columns:repeat(2,1fr);gap:24px 0;} .ct-kpi .kpi{padding-left:18px;} .ct-kpi b{font-size:30px;} .ct-adv{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .ct-hero{padding:60px 0 44px;} .ct-h1{font-size:26px;line-height:1.35;} .ct-btns{flex-wrap:wrap;margin-bottom:40px;} .ct-kpi{grid-template-columns:1fr 1fr;gap:20px 0;} .ct-kpi b{font-size:24px;} .ct-kpi span{font-size:12px;} .ct-adv{grid-template-columns:1fr;} .ct-cap{grid-template-columns:1fr;gap:16px;} .ct-apps a{padding:10px 16px;font-size:14px;} } /* —— 分站总览页：城市/产品分站卡片网格（fenzhan-index.html） —— */ .ct-city-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:14px; } .ct-city-grid .city-card{ display:flex;align-items:center;justify-content:space-between;gap:12px; min-height:64px;padding:14px 18px; background:#fff;border:1px solid var(--line); transition:var(--tr); } .ct-city-grid .city-card .cn{ font-size:15px;color:var(--ink);line-height:1.5;flex:1;min-width:0; } .ct-city-grid .city-card .arw{ flex:none;color:var(--ink3);transition:var(--tr); display:inline-flex;align-items:center; } .ct-city-grid .city-card:hover{ border-color:var(--main);background:#f8fbfe;transform:translateY(-2px); box-shadow:0 8px 20px rgba(12,96,180,.1); } .ct-city-grid .city-card:hover .cn{color:var(--main);} .ct-city-grid .city-card:hover .arw{color:var(--main);transform:translateX(2px);} @media (max-width:1200px){ .ct-city-grid{grid-template-columns:repeat(4,1fr);} } @media (max-width:991px){ .ct-city-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ .ct-city-grid{grid-template-columns:repeat(2,1fr);gap:10px;} .ct-city-grid .city-card{min-height:56px;padding:12px 14px;} .ct-city-grid .city-card .cn{font-size:14px;} } /* 分站总览：JS 分流用的源容器，分流完成后需彻底隐藏 */ .hidden{display:none !important;} /* —— 分站导航区块（仅父栏目 city.html 生效，子栏目由 JS 移除） —— */ .ct-subnet{padding-bottom:var(--sp-half);} .ct-subnet .cn-t{ font-size:17px;font-weight:700;color:var(--ink); margin:0 0 18px;padding-left:12px;border-left:4px solid var(--main); line-height:1.5; } .ct-subnet .cn-t:not(:first-child){margin-top:44px;} .ct-subnet .ct-city-grid{margin-bottom:8px;} /* ===== 文章分享条 ===== */ .ad-share{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);} .ad-share .lb{font-size:14px;color:var(--ink3);} .ad-share .it{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:14px;font-family:inherit;line-height:1;color:var(--ink2);text-decoration:none;cursor:pointer;transition:color .2s,background .2s,border-color .2s;} .ad-share .it:hover{color:#fff;background:var(--main);border-color:var(--main);} .ad-share .wx{position:relative;} .ad-share .wx-pop{display:none;position:absolute;left:50%;bottom:52px;transform:translateX(-50%);width:150px;padding:12px 10px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(13,27,51,.14);text-align:center;z-index:9;} .ad-share .wx:hover .wx-pop,.ad-share .wx:focus-within .wx-pop{display:block;} .ad-share .wx-pop img,.ad-share .wx-pop canvas,.ad-share .wx-pop table{display:inline-block;margin:0 auto;} .ad-share .wx-pop i{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--ink3);line-height:1.5;} @media (max-width:768px){ .ad-share .lb{width:100%;} .ad-share .it{flex:1 0 30%;} .ad-share .wx-pop{left:auto;right:0;transform:none;} } /* ===== 正文字号缩放按钮（左侧浮条） ===== */ .fs-btn{ min-width:44px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:4px; background:#fff;font-size:13px;font-family:inherit;line-height:1;color:var(--ink2); cursor:pointer;transition:color .2s,background .2s,border-color .2s; } .fs-btn:hover{color:#fff;background:var(--main);border-color:var(--main);} .fs-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--ink3);background:#fff;border-color:var(--line);} /* ===== 字号控制浮条（贴左缘，跟随滚动显隐） ===== */ .fs-dock{ --fsd-btn:clamp(26px,2.2vw,32px); --fsd-w:calc(var(--fsd-btn) + 2px); position:fixed;left:8px; left:max(4px, max(5vw, 50vw - 700px) - var(--fsd-w) - 12px); top:50%;z-index:60; display:flex;flex-direction:column; padding:0;border:1px solid var(--line);border-radius:999px; background:#fff;box-shadow:0 6px 20px rgba(13,27,51,.12); overflow:hidden; opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-8px); transition:opacity .25s ease,visibility .25s ease,transform .25s ease; } .fs-dock.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);} .fs-dock .fs-btn{ min-width:48px;height:40px;font-size:14px;padding:0; min-width:var(--fsd-btn);height:clamp(34px,3.1vw,44px);font-size:clamp(12px,1vw,14px); border:0;border-radius:0;background:#fff; } .fs-dock .fs-btn + .fs-btn{border-top:1px solid var(--line);} .fs-dock .fs-btn:hover{background:var(--main);} .fs-dock .fs-btn:disabled{background:#fff;border-color:transparent;} .fs-dock .fs-btn.tts-on{background:var(--main);color:#fff;} /* 小屏手机：浮条更透一些，减少遮挡感 */ @media (max-width:599px){ .fs-dock{background:rgba(255,255,255,.88);} }