：
![]()
用 object-fit 铺满，占位块用条纹底 + 文字 */
.photo{display:block;width:100%;object-fit:cover;background:repeating-linear-gradient(135deg,#dbe6ee 0 14px,#e8eff5 14px 28px)}
.photo--empty{display:grid;place-items:center;overflow:hidden;color:#6b7f90;font-size:12px;font-weight:700;letter-spacing:.4px;text-align:center;padding:12px}
/* ---------- TOPBAR + NAV ---------- */
.topbar{background:var(--navy);color:#d8e3ec;font-size:12px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar-contacts{display:flex;gap:22px;flex-wrap:wrap}
.topbar a:hover{color:var(--yellow)}
.topbar-social{display:flex;gap:14px}
.header{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 3px 16px #0f2e4b12}
.px-nav{display:flex;align-items:center;gap:26px;min-height:88px}
.logo{width:210px;margin-right:auto}
.logo-img{display:block;max-height:56px;width:auto;max-width:210px}
.logo-text{display:block;color:var(--navy);font-size:22px;font-weight:900;line-height:1.2}
.navlinks{display:flex}
.navlinks>ul{display:flex;gap:24px;font-size:13px;font-weight:800;text-transform:uppercase}
.navlinks a{position:relative;padding:34px 0}
.navlinks>ul>li{position:relative}
.navlinks>ul>li>a:hover::after,.navlinks>ul>li>a[aria-current="page"]::after{content:"";position:absolute;right:0;bottom:24px;left:0;height:3px;background:var(--orange)}
/* 二级下拉。默认实心白底 —— 下面 @supports 里才转成磨砂玻璃，
不支持 backdrop-filter 的浏览器（旧 Firefox / 部分安卓 WebView）就停在这条规则上，
否则它们只吃到半透明、吃不到模糊，下拉后面的图片会直接透上来把字糊掉。 */
.sub{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 30px #06355f1f;padding:8px 0}
@supports ( (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) ){
/* 白底压到 86% 透明度：再低文字对比度就掉出 4.5:1 了（下拉字只有 12.5px）。
saturate 提一点，免得模糊后底下的图片发灰。 */
.sub{background:#ffffffdb;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
border-color:#ffffffa6;box-shadow:0 16px 30px #06355f24,inset 0 1px 0 #ffffffb3}
}
.navlinks li:hover>.sub{display:block}
.sub a{display:block;padding:10px 18px;font-size:12.5px;font-weight:700;text-transform:none;white-space:nowrap}
.sub a:hover{color:var(--blue)}
.sub a::after{display:none!important}
.nav-cta{flex-shrink:0}
/* 语言切换条（Language_model->code()->bar，位于 Get a Quote 前）。
组件自带的 app.css 在 body 内才加载，晚于本文件，同特异性会被它盖掉，所以选择器多带一层 .px-nav。
组件默认 position:fixed 悬浮在右上角，嵌入导航栏要覆写成 static（开发资料 §5.3）。 */
.px-nav .yf-language-switch{position:static;flex-shrink:0;font-size:13px}
.px-nav .yf-btn{padding:10px 14px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--navy);font-weight:700;line-height:normal;white-space:nowrap}
.px-nav .yf-btn:hover{border-color:var(--deep)}
.px-nav .yf-dropdown-menu{right:0;left:auto;min-width:150px;border-color:var(--line);border-radius:0}
.px-nav .yf-dropdown-item{padding:10px 16px;color:var(--navy);font-weight:700}
.px-nav .yf-dropdown-item.yf-current{color:var(--blue)}
/* ≤1199：头部一行要放 logo / 菜单 / 语言 / 询盘（≤991 起菜单收进汉堡），语言条进来后不收紧会横向溢出
（实测 1024 溢出 122px、1100 溢出 46px）。去掉按钮里的国旗、缩内边距；992–1199 再收紧两处间距。
国旗必须用 #language-btn：组件自带 css 里 #language-btn img{display:inline-block} 带 ID，class 选择器压不过它。 */
@media(max-width:1199.98px){
.px-nav .yf-btn{padding:8px 10px}
.px-nav #language-btn img{display:none}
}
@media(min-width:992px) and (max-width:1199.98px){
.px-nav{gap:14px}
.navlinks>ul{gap:14px}
}
.navtoggle{display:none;padding:10px;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer;color:var(--navy)}
/* ---------- HERO ---------- */
/* 设计稿把 .hero-photo 设成 z-index:-1，但 .hero 只有 position:relative、没建堆叠上下文，
负层级会冒到 root，反而被 .hero 自己的渐变背景整块盖住 —— 后台传了首屏图也看不见。
改为：底图 → 渐变遮罩(::before) → 内容，三层显式排序，设计稿的视觉意图不变。 */
.hero{position:relative;color:#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(92deg,#032b4df2 0%,#06467ed6 58%,#078dc8a6 100%)}
.hero-photo{position:absolute;inset:0;z-index:0;height:100%}
/* 下留白写在容器上，不靠 .hero-facts 的 padding 兜底：数据条是模板参数（hero_facts），
客户把行清空时整块 .hero-facts 不输出，靠它撑的那 26px 底距会一起消失 ——
表现是「按钮直接贴在版块底边上」。下 26px 放容器、上 26px 留在数据条自身，
两者都在时与原来像素一致，数据条没了也不会塌。 */
.hero .container{position:relative;z-index:2;padding:96px 0 26px}
.hero h1{max-width:900px;margin:16px 0 0;font-size:clamp(32px,4.6vw,58px);line-height:1.08}
.hero p{max-width:660px;margin:20px 0 0;color:#ffffffd6;font-size:17px}
.hero .eyebrow{color:var(--yellow)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;padding:26px 0 0;border-top:1px solid #ffffff3d}
.hero-fact strong{display:block;font-size:24px;line-height:1.2}
.hero-fact span{display:block;margin-top:4px;color:#ffffffa8;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
/* ---------- TRUST BAR ---------- */
.trustbar{background:#fff;box-shadow:0 14px 40px #06355f1f;border-top:4px solid var(--orange)}
.trustbar ul{display:grid;grid-template-columns:repeat(5,1fr)}
.trustbar li{padding:26px 22px;border-left:1px solid var(--line)}
.trustbar li:first-child{border-left:0}
.trustbar b{display:block;color:var(--deep);font-size:21px}
.trustbar span{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
/* ---------- SOLUTIONS ---------- */
.solutions{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sol{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:.22s}
.sol:hover{transform:translateY(-5px);box-shadow:0 16px 34px #06355f1f;border-color:var(--blue)}
.sol .photo{height:172px}
.sol-body{display:flex;flex-direction:column;flex:1;padding:24px}
.sol h3{color:var(--navy);font-size:19px;line-height:1.3}
.sol p{margin-top:10px;color:var(--muted);font-size:13.5px;flex:1}
.sol-spec{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);color:var(--deep);font-size:12px;font-weight:800;letter-spacing:.4px}
/* ---------- PRODUCTS ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.prod{padding:24px 20px;background:#fff;border:1px solid var(--line);transition:.22s}
.prod:hover{border-color:var(--orange);box-shadow:0 12px 28px #06355f14}
.prod b{display:block;color:var(--navy);font-size:15.5px;line-height:1.3}
.prod span{display:block;margin-top:8px;color:var(--muted);font-size:12.5px}
.prod em{display:block;margin-top:12px;color:var(--blue);font-size:11px;font-weight:900;font-style:normal;letter-spacing:.6px;text-transform:uppercase}
/* ---------- CAPACITY TABLE ---------- */
/* 全站表格统一走 Bootstrap 的 .table：宽度、边框合并、hover 状态交给 --bs-table-* 变量。
原先 captable / spec / cmp / cfg / pat / terms 各写了一份几乎相同的基础样式（7 份重复），
现在只在下面各自留「与基座不同的那几个值」。
注意 Bootstrap 的单元格背景是靠 box-shadow:inset ... var(--bs-table-bg) 画的，
要改某个单元格底色得改 --bs-table-bg，直接写 background 会被那层 inset 盖住。 */
.table{
--bs-table-bg:#fff;
--bs-table-color:var(--ink);
--bs-table-border-color:var(--line);
--bs-table-hover-bg:var(--soft);
--bs-table-hover-color:var(--ink);
margin-bottom:0;font-size:14px
}
.table>:not(caption)>*>*{padding:14px 15px;text-align:left;vertical-align:top}
.table>thead>tr>th{--bs-table-bg:var(--deep);color:#fff;font-size:12px;letter-spacing:.6px;text-transform:uppercase;border-bottom-width:0}
.table>caption{caption-side:top;padding:0 0 13px;color:var(--muted);font-size:13px;text-align:left}
.captable>:not(caption)>*>*{padding:15px 16px}
.captable>caption{padding-bottom:14px}
.captable td b{color:var(--navy)}
.captable .yes{color:#0a8a4d;font-weight:900}
.captable .no{color:#b9c4cd}
.captable a{color:var(--blue);font-weight:800}
.captable a:hover{color:var(--orange)}
/* ---------- FACTORY / QC ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .photo{height:420px}
.qc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.qc li{padding:16px 18px;background:var(--soft);border-left:3px solid var(--blue)}
.qc b{display:block;color:var(--navy);font-size:14px}
.qc span{color:var(--muted);font-size:12.5px}
/* ---------- 图片轮播（首屏底图 / 工厂实拍：那个位子上有多张图时才出现） ----------
交互整套复用页头 banner 那一套 JS：容器 data-hero-carousel、格子 [data-hero-slide]、
圆点 [data-hero-dot]、箭头 [data-hero-prev]/[data-hero-next]，JS 只负责切 .is-active。
这里只管版式：格子绝对定位叠放，靠 opacity 交叉淡入。
同样不用 Bootstrap 的 Carousel —— 它靠 display:none 换页，容器高度只跟着当前那张走，
客户上传的图比例参差不齐，翻一页整页内容就往上下弹一次（页头 banner 也是这个理由）。 */
.slidebox{position:relative}
.slidebox>[data-hero-slide]{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .55s ease}
.slidebox>[data-hero-slide].is-active{z-index:1;opacity:1;pointer-events:auto}
/* 箭头 / 圆点配色与 .pagehero-arrow / .certnav 同源（半透明白底 + 深蓝图标，hover 反色）：
底下压着的是白底的渲染图还是深色车间照都看得见，投影保证浅色照片上也不糊。 */
.slidenav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:#ffffffd9;color:var(--navy);font-size:15px;cursor:pointer;box-shadow:0 2px 12px #06355f2e;transition:background .18s,color .18s}
.slidenav:hover{background:var(--navy);color:#fff}
.slidenav--prev{left:0}
.slidenav--next{right:0}
.slidedots{position:absolute;right:0;bottom:12px;left:0;z-index:2;display:flex;justify-content:center;gap:8px}
.slidedot{width:28px;height:4px;padding:0;border:0;background:#9fb0bf;cursor:pointer;box-shadow:0 1px 4px #06355f4d;transition:background .18s}
.slidedot:hover{background:var(--navy)}
.slidedot.is-active{background:var(--orange)}
/* 首屏底图位：容器就是原来那张 .hero-photo 的位置 —— 绝对铺满 .hero，压在渐变遮罩(z-index:1)之下、
文字(z-index:2)之上。自带 z-index 还顺带建了层叠上下文，格子切 .is-active 时的 z-index:1
不会冒出去跟遮罩抢层级。 */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 圆点落在 .hero .container 的 26px 下留白里：数据条是容器内容区的最后一块，
底边离 .hero 底还有 26px，所以圆点不会压在数据条文字上；客户把数据条清空时，
这条空白带也还在（下留白写在容器上，不靠数据条撑），圆点位置不动。 */
.hero-media .slidedots{bottom:9px}
/* 箭头只在 ≥992px 出：更窄时容器满宽、标题顶到左右边，箭头必然压住标题开头，
触屏用户点圆点切换即可（这块是淡入淡出、不是可滑动的轨道，本来也没有滑动交互）。 */
.hero-media .slidenav{display:none}
@media(min-width:992px){
.hero-media .slidenav{display:grid}
}
/* 工厂实拍位：格子全是绝对定位、撑不开高度，容器得自己定高 —— 数值与断点都跟 .split .photo 走
（见下方「响应式」段），单张那条
![]()
与轮播切换时高度一致，不会跳。 */
.factory-media{height:420px;overflow:hidden}
/* 选择器比 .split .photo（只给 height）长一层：小屏断点里那条 .split .photo{height:320px}
同样命中轮播里的
![]()
，这里必须是「跟随容器高度」才不会被它钉死。 */
.factory-media [data-hero-slide] .photo{position:absolute;inset:0;height:100%}
.factory-media .slidenav--prev{left:0}
.factory-media .slidenav--next{right:0}
@media(max-width:991.98px){
.factory-media{height:320px}
}
/* ---------- CERTIFICATES ---------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cert .photo{height:210px;background:repeating-linear-gradient(135deg,#eef3f7 0 14px,#f7fafc 14px 28px)}
.cert b{display:block;margin-top:12px;color:var(--navy);font-size:14px}
.cert span{color:var(--muted);font-size:12.5px}
/* 证书卡多于 4 张时的一屏 4 张横向轮播（.certwrap--rail 由 site/index.php 按张数决定加不加，
4 张及以内仍是上面的自适应网格，一个字都不受影响）。
轨道本身就是可横向滚动的：触屏 / 触控板直接滑，箭头只是替鼠标用户推一格。 */
.certwrap--rail{position:relative}
.certwrap--rail .certs{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
/* 滚动条藏起来 —— 有了箭头再拖一条灰槽，桌面端很难看；触屏上本来也不显示 */
.certwrap--rail .certs::-webkit-scrollbar{display:none}
/* 一屏 4 张：宽度里先扣掉 3 个 20px 间距，剩下的四等分 */
.certwrap--rail .cert{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start}
/* 箭头配色与 .pagehero-arrow 同源（半透明白底 + 深蓝图标，hover 反色）：
底下压着的是白底扫描件还是深色实拍照都看得见，投影保证浅色照片上也不糊。
top 是照片中线：照片定高 210px，减去按钮自身高度的一半。 */
.certwrap--rail .certnav{position:absolute;top:83px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:#ffffffd9;color:var(--navy);font-size:15px;cursor:pointer;box-shadow:0 2px 12px #06355f2e;transition:background .18s,color .18s,opacity .18s}
.certwrap--rail .certnav:hover{background:var(--navy);color:#fff}
.certwrap--rail .certnav--prev{left:0}
.certwrap--rail .certnav--next{right:0}
/* 已经滚到头的方向直接淡出：留一个点了没反应的按钮比没有还糟 */
.certwrap--rail .certnav[disabled]{opacity:0;pointer-events:none}
@media(max-width:991.98px){
/* 与 .certs 网格的断点保持一致：一屏 2 张 */
.certwrap--rail .cert{flex:0 0 calc((100% - 20px)/2)}
}
@media(max-width:767.98px){
/* 一屏 1 张；箭头跟着照片中线缩小（210/2 - 34/2） */
.certwrap--rail .cert{flex:0 0 100%}
.certwrap--rail .certnav{width:34px;height:34px;font-size:12px;top:88px}
}
/* ---------- CLIENTS ---------- */
/* 列宽用 minmax(0,1fr)：纯 1fr 的下限是内容最小宽度，大尺寸 logo 会把列撑宽、整排溢出容器（与 about 同规格） */
.clients{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-top:8px}
.client-chip{display:grid;place-items:center;min-width:0;overflow:hidden;height:74px;padding:8px 6px;background:#ffffff14;border:1px solid #ffffff2e;color:#fff;font-size:12px;font-weight:800;letter-spacing:.4px;text-align:center}
/* 传了 logo 的品牌：同一个格子换成白底承载图片 —— 客户上传的 logo 多是深色或透明底的 PNG，
压在深蓝版块上那层半透明白底（上面那条规则，本来是给纯文字用的）上会看不清。
尺寸用 contain 收在格子里，牌子之间的留白与文字格子一致，混排不会参差。 */
/* 格子内只有一格、且上下限都是 0：img 的 100% 才有确定的参照尺寸，不会按原图大小顶出格子 */
.client-chip--logo{grid-template:minmax(0,1fr)/minmax(0,1fr);padding:9px;background:#fff}
.client-chip--logo img{display:block;width:100%;height:100%;object-fit:contain}
/* ---------- PROJECTS ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{background:#fff;border:1px solid var(--line)}
.proj .photo{height:190px}
.proj-body{padding:22px}
.proj-cap{display:inline-block;padding:5px 11px;background:var(--deep);color:#fff;font-size:12px;font-weight:900;letter-spacing:.5px}
.proj h3{margin-top:12px;color:var(--navy);font-size:17px;line-height:1.35}
.proj p{margin-top:9px;color:var(--muted);font-size:13px}
/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding:26px 20px;background:#ffffff14;border:1px solid #ffffff2b}
.step::before{counter-increment:s;content:"0" counter(s);display:block;margin-bottom:14px;color:var(--yellow);font-size:22px;font-weight:900}
.step b{display:block;font-size:15px}
.step span{display:block;margin-top:7px;color:#ffffffab;font-size:12.5px}
/* ---------- INSIGHTS ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border:1px solid var(--line);transition:.22s}
.post:hover{box-shadow:0 14px 30px #06355f17;border-color:var(--blue)}
.post .photo{height:180px}
.post-body{padding:22px}
.post-cat{color:var(--orange);font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.post h3{margin-top:9px;color:var(--navy);font-size:17px;line-height:1.35}
.post p{margin-top:9px;color:var(--muted);font-size:13px}
/* ---------- FAQ ---------- */
.faqwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faqlist{border-top:1px solid var(--line)}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{position:relative;padding:20px 40px 20px 0;font-size:15.5px;font-weight:800;color:var(--navy);cursor:pointer;list-style:none}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";position:absolute;right:6px;top:16px;color:var(--orange);font-size:24px;font-weight:400}
.faqlist details[open] summary::after{content:"–"}
.faqlist p{padding:0 30px 22px 0;color:var(--muted);font-size:14px}
/* ---------- CONTACT ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.needlist li{padding:11px 0;border-bottom:1px solid #ffffff2b;font-size:14px;color:#ffffffd0}
.needlist li b{color:#fff}
.form{padding:30px;background:#fff}
.form h3{color:var(--navy);font-size:20px}
/* 两列布局交给 .row + .row-cols-md-2（子元素不用加类），这里只留设计稿的 14px 间距。
margin-top 要减掉 gutter-y：Bootstrap 的行间距是「每个子元素 margin-top:gutter-y
+ 行自身 margin-top:-gutter-y」实现的，直接写 margin-top:16px 会把那个负值覆盖掉，
每个 form-row 就凭空多出 14px（四个 row 合计约 56px）。 */
.form-row{--bs-gutter-x:14px;--bs-gutter-y:14px;margin-top:calc(16px - var(--bs-gutter-y))}
/* 表单控件用 Bootstrap 的 .form-control / .form-select / .form-check-input，
focus / disabled / placeholder / 文件选择按钮 / select 箭头这些状态交给它，
本文件只覆盖设计稿的尺寸与配色。原先联系页、产品详情、方案详情各抄了一份
完全相同的 .field input 规则，现在合并到这一处。 */
.field label{display:block;margin-bottom:6px;color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.field .form-control,.field .form-select{padding:13px;font-size:14px;line-height:1.6;color:var(--ink);border-color:var(--line);background-color:#fff}
.field .form-control:focus,.field .form-select:focus{border-color:var(--blue);box-shadow:none}
/* 文件选择器换成自定义按钮 + 文件名展示：原生 input[type=file] 的按钮文案（Choose File）
和未选文件时的提示文字（No file chosen）跟浏览器界面语言走，不跟页面语言走，
CSS 也没有覆盖这两段文字的入口——浏览器中文、页面英文时用户会看到中文提示。
原生 input 只做视觉隐藏（压到 1px，不用 display:none），键盘 Tab 和读屏器仍能定位到它，
真正可见的按钮换成受 t() 翻译控制的