*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#F9F9F9;--blue:#014DB2;--blue-d:#001645;--ink:#0A1628;--sub:#47586E;
--line:#E6EDF5;--bl:#EAF2FC;--w:#fff;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap,.in{max-width:1280px;margin:0 auto;padding:0 40px}

/* ---------- 顶部导航 ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{height:68px;display:flex;align-items:center;gap:34px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;flex:none}
.logo img{width:160px;height:32px;display:block;object-fit:contain;object-position:left center}
/* ★ 2026-11-13：补 object-fit:contain。原来只有写死的 160×32，图不是 5:1 就会被
   拉伸变形（现网 logo-ipccope.jpg 是 904×181 = 4.99:1，正好没暴露）。业主换标时
   不必再迁就这个比例。object-position:left 保持左对齐，比例一致时视觉零变化。 */
.nav{display:flex;gap:24px;font-size:14.5px;color:#3B4A5E}
.nav a:hover{color:var(--blue)}
.tel{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:15px;color:var(--blue);font-weight:700;flex:none;text-decoration:none}
.tel b{font-family:var(--sans);font-size:12px;color:var(--sub);font-weight:400}

/* ---------- 页面切换条 ---------- */
.tabs{position:sticky;top:68px;z-index:59;background:#0A1628;overflow-x:auto}
.tabs .in{display:flex;gap:4px;height:52px;align-items:center}
.tab{font-size:14px;padding:7px 15px;border-radius:999px;white-space:nowrap;cursor:pointer;color:#9FB2C8;border:1px solid transparent;background:none;font-family:var(--sans)}
.tab:hover{color:#fff}
.tab.on{background:#fff;color:#0A1628;font-weight:600}

/* ---------- 页面容器 ---------- */
.page{display:none}
.page.on{display:block}

/* ---------- Banner ---------- */
.ban{position:relative;overflow:hidden;background:linear-gradient(118deg,#014DB2 0%,#00296E 55%,#001645 100%);color:#fff}
.ban::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 40%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 40%,#000 100%)}
.ban::after{content:"";position:absolute;right:60px;top:50%;width:196px;height:196px;margin-top:-98px;border-radius:50%;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 44px rgba(255,255,255,.055),0 0 0 92px rgba(255,255,255,.028),inset 0 0 0 62px rgba(255,255,255,.035)}
.ban .in{position:relative;z-index:2;padding-top:42px;padding-bottom:46px}
.crumb{font-size:13px;color:#A8C0DE;font-family:var(--mono)}
.crumb a:hover{color:#fff}
.crumb span{margin:0 7px;opacity:.5}
.eyebrow{display:inline-block;margin:16px 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;padding:4px 11px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#CFE0F5}
h1{font-size:38px;line-height:1.28;letter-spacing:-.02em;font-weight:700;max-width:880px}
.lead{max-width:700px;margin-top:16px;font-size:16px;line-height:1.85;color:#C7DAF0}
.kpis{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.kpi{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 18px;min-width:136px}
.kpi b{display:block;font-family:var(--mono);font-size:21px;letter-spacing:-.02em;line-height:1.35}
.kpi span{font-size:12.5px;color:#A8C0DE}
.cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:11px 24px;border-radius:999px;border:1px solid transparent}
/* ★ 基础态（v10 补，此前**只有 :hover** —— 三个变体全都退化成纯文字，
   白底主按钮与描边次按钮在 Banner 上看起来一模一样）。
   口径取自画布末尾 CTA：主按钮 `6:2994` = 白底 100% + 文字 #014DB2；
   次按钮 `6:2996` = 无填充 + 描边 #FFF @40% + 文字白。
   ★ 三个变体的实际落点全部在**深色底**上，所以补底色不会出现白底压白底：
     `.btn.w` 23 处、`.btn.o` 23 处 → Banner 渐变 / `.endcta` 渐变
     `.btn.b` 18 处 → 深色导航栏的「获取报价」
   ★ 内距沿用 11px 24px（画布是 36/16）：同一个 .btn 还被 69px 高的导航栏复用，
     按画布尺寸会把导航按钮撑到 52px，故页面级 CTA 与导航 CTA 统一取小一档。 */
.btn.w{background:#fff;color:var(--blue)}
.btn.o{color:#fff;border-color:rgba(255,255,255,.4)}
.btn.b{background:var(--blue);color:#fff}
/* CTA 按钮悬停口径（与首页 .btn-primary 一致：轻微上浮 + 浅贴地投影，
   不放大阴影；--ease 仅在 home.css 定义，这里写字面量保证子页面同样生效） */
.btn.w,.btn.o,.btn.b{transition:transform .28s cubic-bezier(.22,.68,.32,1),box-shadow .28s cubic-bezier(.22,.68,.32,1),background-color .28s,border-color .28s,color .28s}
.btn.w:hover{background:#F0F6FE;transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,21,69,.22)}
.btn.o:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn.b:hover{background:#033E8C;transform:translateY(-2px);box-shadow:0 4px 10px rgba(1,77,178,.20)}
.btn.w:active,.btn.o:active,.btn.b:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .btn.w,.btn.o,.btn.b{transition:none}
  .btn.w:hover,.btn.o:hover,.btn.b:hover{transform:none}
}

/* ---------- Section ---------- */
.sec{padding:52px 0}
.sec.alt{background:#fff}
/* ★ 2026-10-29 业主 2 条：技术支持 ›「DOWNLOAD / 资料下载中心」标题离上方
   「平台兼容」表格太近（上一块是白底 alt、这一块是浅底 sec，两块之间没有
   底色落差，只剩 52px 内边距，看上去像贴在一起）。这一节单独加高上内边距，
   标题与上一块表格之间留出与其它板块一致的分隔感。 */
#download.sec{padding-top:88px}
@media(max-width:620px){#download.sec{padding-top:58px}}
/* ★ 2026-11-09 业主第 1 条：26 → 24，与频道页 `.catbar{margin-top:24px}` 同值。
   系列页把「标题 → 子频道工具条 → 型号卡」并成一节之后，两套页面的纵向节奏
   就是同一组数：标题→工具条 24、工具条→卡片 22。改这里等于同时改了两边
   （`.sh` 是全站板块标题的公共间距），所以只动这一个值。 */
.sh{margin-bottom:24px}
.sh h2{font-size:25px;line-height:1.42;letter-spacing:-.02em;font-weight:700;max-width:920px}
.sh p{margin-top:9px;font-size:14.5px;color:var(--sub);max-width:860px}
/* 栏目眉标签：用户定稿——浅蓝底太浅淡，改主蓝实底白字，与页面深蓝调性一致 */
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#fff;background:var(--blue);border-radius:999px;padding:4px 11px;margin-bottom:11px}

/* ---------- 栅格与卡片 ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;height:100%}
/* 产品图位：与画布上型号卡的「产品图 + 型号 + 名称 + 参数 + 查看详情」结构一致 */
/* ★ 2026-09-24 业主追加：全站图位统一「正方形且边长减半」——
   .mc-img（B 批系列页 + 首页型号卡）与 .pic 同口径：容器 2:1，
   照片内嵌等高正方形居中（img 覆盖见本文件尾部统一规则）。 */
.mc-img{height:auto;aspect-ratio:2/1;flex:none;margin-bottom:15px;border-radius:11px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDF3FA 0%,#E1EAF4 62%,#D7E3F0 100%)}
.mc-img::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);width:114px;height:66px;border-radius:8px;border:1.5px solid #A6BED8;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.42));box-shadow:0 9px 20px rgba(11,42,80,.08)}
.mc-img::after{content:"";position:absolute;left:50%;top:calc(50% + 29px);transform:translateX(-50%);width:78px;height:5px;border-radius:3px;background:#C2D3E4}
.mc-img.rack::before{width:150px;height:40px;border-radius:5px;transform:translate(-50%,-62%)}
.mc-img.rack::after{width:118px;top:calc(50% + 16px)}
.mc-img.laptop::before{width:140px;height:84px;border-radius:6px;transform:translate(-50%,-64%)}
.mc-img.laptop::after{width:152px;top:calc(50% + 32px)}
.mc-img.board::before{width:146px;height:92px;border-radius:4px;transform:translate(-50%,-52%);background:
linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.5))}
.mc-img.board::after{width:100px;top:calc(50% + 42px)}
.mc-img u{position:absolute;left:11px;bottom:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#9FB4CB;text-decoration:none}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mc-id{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--blue)}
.chip{font-family:var(--mono);font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:#68798F;background:#FCFDFF;white-space:nowrap}
.chip.b{color:var(--blue);border-color:#C9DEF6;background:var(--bl)}
.mc-sub{margin-top:9px;font-size:13.5px;color:var(--sub);line-height:1.7}
.mc-dl{margin-top:15px;border-top:1px solid var(--line);padding-top:13px;display:grid;gap:8px}
.mc-dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;font-size:13.5px;align-items:baseline}
.mc-dl dt{color:#8798AC;font-size:13px}
.mc-dl dd{color:#22314A}
.mc-link{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;color:var(--blue);font-weight:600}
.mc-link a:hover{text-decoration:underline}

/* ---------- 分页 ---------- */
.mcg.js-on > .card.pgoff{display:none}
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap}
.pager .meta{font-family:var(--mono);font-size:13px;color:var(--sub)}
.pages{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pg{min-width:34px;height:34px;padding:0 11px;border:1px solid var(--line);background:#fff;border-radius:9px;font-family:var(--mono);font-size:14px;color:#3B4A5E;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pg:hover{border-color:#B9D3F0;color:var(--blue)}
.pg.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pg[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- 场景反向索引 ----------
   ★ 2026-11-06 按业主设计稿重做这一块，三处关键改动都写在下面的注释里：
     ① 标题区：眉标从「蓝底胶囊」改为**纯文字蓝字**（设计稿是 SELECTOR / 按场景选型
        这种小字眉标，不是按钮），标题一句话说明是哪个系列，右下角挂「N 个常见工况」。
        只作用于 `#selector` —— `.tag` 是全站眉标的公用类，改它会把其他板块一起带偏。
     ② 三列比例 24 : 47 : 29（设计稿量出来的 22 : 45 : 29 取整）：原来 326:540:420
        让问题列偏宽、解析列偏挤，长问题会折成三行、解析只剩两行宽。
     ③ 胶囊体系改成**深蓝主推 + 浅灰次级 + 浅蓝入口**三档，全部去边框：
        设计稿里没有描边胶囊，原来那套「白底蓝边」在浅底行上显得脏。 */
.rev{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
/* ★ 2026-11-10 业主：① 标签字号 13px；② 「Q1」标签要与右侧答案首行**同一高度**
   → 回到顶部对齐（标签是左列第一行，与答案第一行天然平齐）。 */
.rrow{position:relative;display:grid;grid-template-columns:minmax(0,24fr) minmax(0,46fr) minmax(0,30fr);gap:32px;padding:22px 30px 20px;border-top:1px solid var(--line);align-items:start}
.rrow:first-child{border-top:0}
/* ★ em（Q1 · 多窗口作业）用绝对定位吊在行首上方，**不参与 h3 的行高**。
   设计稿里「问题首行」与「解析首行」是同一条水平线，em 浮在那条线上方；
   若让 em 做 block 占位，问题会被压下一行，三列的行首就错开了。 */
/* ★ 2026-11-10 业主设计稿（SRB 页）：维度标签是**文档流内的一行**（与问题文字
   平行、左对齐），不是绝对定位浮在 h3 上——原实现 em 浮动 + padding-top 34px
   硬补偿，间距和尺寸都对不上设计稿。
   ★ 2026-11-10 二次反馈：标签改回**小灰字**，问题文字缩小到 14px。 */
.rrow h3{position:relative;font-size:14px;font-weight:600;line-height:1.7;letter-spacing:-.01em;color:var(--ink)}
.rrow h3 em{display:block;position:static;margin:0;font-style:normal;font-family:var(--mono);font-size:13px;line-height:1.9;letter-spacing:.1em;color:#A3B1C4}
.rans{font-size:13.5px;line-height:1.9;color:#5D6D80}
.rchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rc{font-family:var(--mono);font-size:12px;padding:5px 12px;border:0;border-radius:999px;background:#F1F4F8;color:#54657B;white-space:nowrap;transition:background .12s,color .12s}
a.rc:hover{background:#E4EAF2;color:#2F4A6B}
.rc.pri{background:var(--blue);color:#fff;font-weight:600}
a.rc.pri:hover{background:#033E92;color:#fff}
.rc.all{background:#EAF1FB;color:var(--blue);font-weight:600}
a.rc.all:hover{background:#DCE9FA}
.rc.more{background:#EDF1F6;color:#5A6B80;cursor:pointer;font-family:inherit;font-size:12px}
.rc.more:hover{background:#E2E9F1;color:#2F4A6B}
.rc.more.open{background:var(--bl);color:var(--blue);font-weight:600}
.rcnt{font-family:var(--mono);font-size:11.5px;color:#8FA0B4;background:#F7F9FC;border-radius:999px;padding:5px 11px;white-space:nowrap}
.rfold{width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-wrap:wrap;gap:8px}
.rfold.open{max-height:340px}

/* 场景选型板块专属的标题区（设计稿：无底眉标 + 一句式标题 + 右下角工况数） */
#selector .sh{position:relative;padding-right:210px;margin-bottom:24px}
#selector .sh .tag{background:none;color:var(--blue);border-radius:0;padding:0;font-size:11.5px;font-weight:600;letter-spacing:.16em;margin-bottom:10px}
#selector .sh h2{font-size:27px;line-height:1.36;letter-spacing:-.022em;max-width:860px}
#selector .sh p{margin-top:10px;font-size:13.5px;color:#7C8B9E;max-width:760px}
#selector .sh .sh-side{position:absolute;right:0;bottom:3px;font-family:var(--mono);font-size:12.5px;color:var(--blue);letter-spacing:.02em;white-space:nowrap}

/* ---------- 参数表 ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table.spec{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.spec th,table.spec td{text-align:left;padding:11px 16px;border-top:1px solid var(--line);vertical-align:top}
/* ★ 2026-11-05 业主：「红框内字号大小一致，都为 14px；所有这类问题都如此改」。
   表级已是 14px，只有 thead 的表头单元格还压着 13px —— 一并抬平，
   让 9 个复用老参数表的页面（含 DETU 各型号页）整表字号统一。 */
table.spec thead th{background:#F4F8FD;font-size:14px;color:#68798F;font-weight:600;border-top:0}
/* ★ 2026-10-29 业主 8 条：参数名与右侧参数值上下居中（原为继承 top） */
table.spec td.k{color:#68798F;width:170px;vertical-align:middle}
table.spec tbody tr:hover{background:#FCFDFF}
.model-h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.model-h3 h3{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.model-h3 span{font-size:13.5px;color:var(--sub)}

/* ---------- FAQ ---------- */
.faq{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;padding:16px 24px;font-size:15px;font-weight:600;list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
/* ★ 徽标宽度必须钉死 26px，不能交给字体：
   24(容器左内边距) + 26(徽标) + 12(gap) = 62 = 下面 .faq .a 的左内边距，
   问题文字与答案文字因此共用同一条竖线。
   业主 2026-09-28 提出对齐问题；根因是原写法 padding:2px 7px 的实际宽度随字体浮动。 */
.faq summary::before{content:"Q";font-family:var(--mono);font-size:12px;color:var(--blue);background:var(--bl);border-radius:6px;width:26px;box-sizing:border-box;padding:2px 0;text-align:center;flex:none;margin-top:3px}
.faq .a{padding:0 24px 18px 62px;font-size:14px;color:#37475C;line-height:1.85}

/* ---------- 内链区 ---------- */
.links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lk{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14px}
.lk b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--ink)}
.lk span{color:var(--sub);font-size:13px;line-height:1.7}
.lk:hover{border-color:#B9D3F0}

/* ---------- 说明折叠块 ---------- */
.note{background:#FFFDF6;border:1px solid #F2E2B8;border-radius:12px;padding:16px 20px;font-size:13.5px;color:#6B5B2E;line-height:1.85}
.note b{color:#8A6D1F}
.note code{font-family:var(--mono);font-size:12.5px;background:#FBF3DE;border-radius:4px;padding:1px 5px}

/* ---------- 时间线 ---------- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#014DB2,#BBD4F0)}
.tly{position:relative;padding-bottom:34px}
.tly:last-child{padding-bottom:0}
.tly::before{content:"";position:absolute;left:-31px;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.tly.now::before{background:var(--blue);box-shadow:0 0 0 5px rgba(1,77,178,.14)}
.tly .yr{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.tly .tt{margin-top:6px;font-size:15.5px;font-weight:600}
.tly ul{margin-top:9px;display:grid;gap:7px}
.tly li{font-size:14px;color:#37475C;padding-left:16px;position:relative;line-height:1.8}
.tly li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#BBD4F0}
.tly li b{color:var(--ink)}
.badge{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--bl);color:var(--blue);margin-left:8px;vertical-align:2px}

/* ---------- 证书卡 ---------- */
.cert{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;height:100%;display:flex;flex-direction:column}
.cert .ct{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cert .cn{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cert .cq{font-family:var(--mono);font-size:12px;color:#9AABC0}
.cert .vb{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:#68798F;background:#F7FAFD;border:1px solid var(--line);border-radius:9px;padding:9px 12px;line-height:1.7}
.cert ul{margin-top:14px;display:grid;gap:8px}
.cert li{font-family:var(--mono);font-size:13.5px;color:#22314A;display:flex;gap:9px;align-items:baseline}
.cert li::before{content:"";width:5px;height:5px;border-radius:50%;background:#014DB2;flex:none;margin-top:7px}
.cert .ft{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}

/* ---------- 地址卡 ---------- */
.addr{display:grid;gap:16px}
.addr .a{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;height:100%}
.addr .a .h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.addr .a .h b{font-size:16px}
.addr .a .h em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9AABC0}
.addr .a p{margin-top:11px;font-size:14px;color:#37475C;line-height:1.8}
.addr .a dl{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;display:grid;gap:8px}
.addr .a dl>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;font-size:13.5px}
.addr .a dt{color:#8798AC;font-family:var(--mono);font-size:12.5px}
.addr .a dd{font-family:var(--mono);font-size:13.5px;color:#22314A}
.addr .a .map{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;color:var(--blue);font-weight:600}

/* ---------- 地址卡与通用 dl ---------- */
.card .h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card .h b{font-size:16px}
.card .h em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9AABC0}
.card dl{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;display:grid;gap:8px}
.card dl>div{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;font-size:13.5px;align-items:baseline}
.card dl dt{color:#8798AC;font-size:13px}
.card dl dd{color:#22314A;font-family:var(--mono);font-size:13px}
.card .map{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;color:var(--blue);font-weight:600}
.addr .card>p{margin-top:11px;font-size:14px;color:#37475C;line-height:1.8}

/* 场景胶囊：计数排在折叠区之前；数据自带的「查看全系 →」入口（.tail）排在计数之后，
   避免它把「共 N 款满足」挤到下一行（SRB Q5 就是这种情况）。 */
.rchips .rcnt{order:5}
.rchips .rc.tail{order:6}
.rchips .rfold{order:9}

/* ---------- 页脚 ----------
   ★ 页脚已于本轮全站统一为「品牌列 + 4 个链接栏目」结构（.ftop > .fbrand + .fnav）。
     两栏骨架 .fgrid 随之废弃并移除——它用 300fr : 1fr 的写法本身也是错的
     （与 1fr 构成 300:1 的比例，会把右栏挤到近乎为零，本页脚曾因此被撑高）。
     新版布局与响应式规则在 site-seo.css 的 .foot .ftop / .fnav / .faddr 下，全站共享。 */
.foot{background:#0A1628;color:#8FA3BC;padding:50px 0 28px}
.fbrand b{color:#DCE7F5;font-size:16px;display:block;margin-bottom:12px}
.fbrand p{font-size:13.5px;line-height:1.85}
.fbrand .hot{margin-top:14px;font-family:var(--mono);font-size:16px;color:#fff;font-weight:700}
.faddr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.faddr div{border-left:2px solid #1E3554;padding-left:13px}
.faddr b{display:block;color:#DCE7F5;font-size:13.5px;margin-bottom:4px}
.faddr p{font-size:12.5px;line-height:1.72}
.faddr em{font-style:normal;font-family:var(--mono);font-size:12px;color:#7C93B0}
.fbot{margin-top:34px;padding-top:18px;border-top:1px solid #1A2C46;font-size:12.5px;color:#5F7590;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media(max-width:1180px){
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.links{grid-template-columns:repeat(2,minmax(0,1fr))}
.faddr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px){
/* 单列堆叠时三列变一列，但**上内边距必须留给 em**（`Q1 · 维度` 绝对定位在 h3 上方 18px），
   否则它会被压进问题文字里 —— 22px 上边距只有 4px 余量，正好重叠。 */
.rrow{grid-template-columns:1fr;gap:14px;padding:30px 24px 18px}
.rfold.open{max-height:520px}
}
@media(max-width:860px){
/* 窄屏放不下「右下角工况数」，改成标题区里一行普通小字（仍在副标题下方） */
#selector .sh{padding-right:0}
#selector .sh h2{font-size:23px}
#selector .sh .sh-side{position:static;display:block;margin-top:10px}
}
@media(max-width:860px){
.g3,.g2{grid-template-columns:1fr}
h1{font-size:30px}
.lead{max-width:100%}
/* ★ `.psearchwrap`：产品中心搜索行的外层容器（`<div class="in psearchwrap">`）。
   它必须跟下面各板块用**同一套侧边距**，否则小屏下这行会比下面的卡片窄一条
   （业主 2026-09-29 第 7 条「搜索框长度要和下面的长度一样长」就是这条）。
   22px 只写在**这一处**，别的文件不要另抄一份。 */
.top .in,.ban .in,.sec .in,.tabs .in,.foot .in,.psearchwrap{padding-left:22px;padding-right:22px}
}
@media(max-width:620px){
.g4,.links{grid-template-columns:1fr}
.faddr{grid-template-columns:1fr}
.sec{padding:38px 0}
}

/* ==================================================================
   应用化新增（站点导航 / 当前项 / 移动端导航）
   说明：以下为把设计稿工程化为可运行站点所需的最小增量，
        上方全部样式均为设计稿原始样式，未作任何改动。
   ================================================================== */
.logo{color:inherit}
.logo:hover{opacity:.86}
.nav{position:relative}
.nav{align-items:center}
.nav a.on{color:var(--blue);font-weight:600}
.nav .grp{position:relative}
/* P29 定稿：下拉箭头 = 细线 chevron，居中在文字**下方**（不是文字右侧的实心三角） */
.nav .grp>a{padding-bottom:22px;margin-bottom:-22px}
/* ★ 2026-11-05：原 `.nav .sub`（一级下拉小面板）五条规则整段删除 ——
   全站 0 个页面在用（导航走的是 `.mega` 全宽面板），是 `.mega` 上线前的遗留。
   留着的唯一效果是让后来的人以为还有第二套下拉，改错地方。 */
/* ---------- 导航悬停反馈 ----------
   悬停某枚栏目：文字变品牌蓝 + 下方浮出一个小三角。**整枚不位移**。
   ★ 2026-11-05 业主截图反馈「滑到客户案例会往上浮，要和其他栏目一样」。
     真因不是这里多写了一条，而是：五个下拉栏目（.grp>a）是行内元素，
     transform 对行内非可替换元素**不生效**（实测 computed 有值、位移 0px）；
     只有首页/客户案例这两个 `.nav>a` 是 flex 子项被块化，-2px 真的跑了起来。
     所以「统一上浮」从来只有这两枚在动，观感就成了「客户案例自己往上跳」。
     处理：整条上浮直接删掉（业主明确不要），只留变色 + 三角，
     两类链接共用同一套悬停规则，不给任何一枚另开例外。
   ★ 三角挂在 `.grp>a` 的 ::after 上绝对定位 —— a 是 inline（其 padding-bottom:22px
     只扩悬停热区、不参与布局），绝对定位子元素按其 padding 盒取基准，
     bottom:13px 恰好落在文字下方约 9px 处。
   ★ `.nav>a`（首页/客户案例）是 flex 子项（blockified），没有那 22px 悬停余量，
     bottom 取 -9px 才落到同一视觉位置 —— 这是**布局差异**，不是两套悬停效果。 */
.nav .grp>a,.nav>a{position:relative;transition:color .18s}
.nav .grp>a::after,.nav>a::after{content:"";position:absolute;left:50%;bottom:13px;margin-left:-4px;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:4px solid var(--blue);opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .2s var(--ease,cubic-bezier(.22,.68,.32,1)),transform .2s var(--ease,cubic-bezier(.22,.68,.32,1))}
.nav>a::after{bottom:-9px}
/* ★ 2026-09-24 业主问题1：点击导航后焦点残留会让三角常驻——
   与 site-seo.css 的 mega 展开同口径：键盘 :focus-visible 才触发，鼠标点击不触发。 */
.nav .grp>a:hover,.nav .grp:has(>a:focus-visible)>a,.nav>a:hover{color:var(--blue)}
.nav .grp>a:hover::after,.nav .grp:has(>a:focus-visible)>a::after,.nav>a:hover::after{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .nav .grp>a,.nav>a{transition:none}
  /* ★ reduce 只关「动画过程」，不关「最终状态」：三角照样显示出来。 */
  .nav .grp>a:hover::after,.nav .grp:has(>a:focus-visible)>a::after,.nav>a:hover::after{transition:none}
}
.fbot a:hover{color:#B9D3F0}

/* ==================================================================
   手机端页头（≤1080px）：logo + 获取报价 + ☰ 菜单，导航改下拉抽屉
   ------------------------------------------------------------------
   ★ 2026-11-05 业主：「手机端导航栏不好点击，改成其它容易点击的展现方案」。
     改前是**横向滚动条**：7 个栏目挤在一行、每次只露出 3 个半，
     每项点击热区只有 25px 高（远低于 44px 的可点下限），还要靠横滑才能看到
     后 4 项 —— 手指点不中、也不知道右边还有东西。
     改后：页头只留 3 个元素，导航变成点开的抽屉，每个栏目**一整行 52px**。
   ★ 收录/GEO 不受影响：抽屉里的 <a> 与改前同批、同位置（都在 <nav id="mnav">），
     只是窄屏收起、点开显示；桌面端照旧全部可见可抓。抽屉开关用按钮 + class，
     不搬 DOM、不延迟加载、不改成 <script> 里的字符串。
   ================================================================== */
.navbtn{display:none}
.subbtn{display:none}
.navfoot{display:none}
/* 抽屉遮罩：只在窄屏渲染（桌面导航是横排，没有抽屉） */
.navmask{display:none}

@media(max-width:1080px){
  .top .in{height:58px;flex-wrap:nowrap;gap:12px;padding:0 22px}
  /* 手机版 logo 收小：原来 160×32 在 390px 屏上占了 41% 宽度，比电话号码还抢眼 */
  .logo img{width:128px;height:auto;max-height:26px}
  .tel{margin-left:auto;font-size:13px;gap:6px;text-decoration:none;white-space:nowrap}
  .tel b{display:none}
  .top .in .btn{padding:0 16px;height:38px;font-size:13.5px;line-height:38px;flex:none;width:auto}

  /* 菜单按钮：44×44 见方（手指可按），三条横线，打开后变 ✕ */
  .navbtn{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:44px;height:44px;flex:none;margin-left:-4px;padding:0;
    background:#fff;border:1px solid var(--line);border-radius:11px;cursor:pointer}
  .navbtn span{display:block;width:18px;height:2px;border-radius:2px;background:#1B2A3D;
    transition:transform .2s var(--ease),opacity .16s}
  .top.navopen .navbtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .top.navopen .navbtn span:nth-child(2){opacity:0}
  .top.navopen .navbtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 抽屉本体：绝对定位挂在页头下方，不占布局、不顶开内容。
     ★ 2026-11-05 业主第 3 条「展开太宽，缩窄一点」：原来是通栏（left:0;right:0），
       整屏被一块白板盖住，看不出「这是一层浮起来的菜单」。现在靠右停靠、
       宽 min(336px, 82vw)（390 屏 = 320，右边贴边、左边露出 70px 页面），
       左侧圆角 + 向左的投影 —— 一眼就是个抽屉，而不是页面变宽了。 */
  .top .in > .nav{position:absolute;left:auto;right:0;top:100%;z-index:70;display:block;
    width:min(336px,82vw);white-space:normal;overflow-y:auto;
    max-height:calc(100vh - 58px);
    /* iOS 上 100vh 把地址栏算进去，抽屉会顶出屏幕一截；dvh 不给就当没写 */
    max-height:calc(100dvh - 58px);
    background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
    border-radius:0 0 0 16px;
    box-shadow:-18px 10px 44px rgba(10,22,40,.20);padding:0;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease)}
  .top.navopen .in > .nav{opacity:1;visibility:visible;transform:none}

  /* 抽屉遮罩：抽屉不再通栏，左边露出来的那一条必须挡住点击 ——
     否则手指点在「空白处」会穿透到下面的链接上，抽屉关了、页面也跳走了。 */
  .top .navmask{display:block;position:absolute;left:0;right:0;top:100%;z-index:69;
    height:calc(100vh - 58px);height:calc(100dvh - 58px);
    background:rgba(10,22,40,.38);opacity:0;visibility:hidden;
    transition:opacity .2s var(--ease),visibility .2s var(--ease)}
  .top.navopen .navmask{opacity:1;visibility:visible}
  /* 抽屉开着时锁住页面滚动：不然手指在遮罩上滑，下面的正文跟着跑 */
  body.navlock{overflow:hidden}
  /* 抽屉开着时收掉右下角的企业微信气泡（z-index:90 的浮动件，会盖在抽屉上） */
  body.navlock .wx-float{opacity:0;visibility:hidden;pointer-events:none}

  /* 一行一个栏目：52px 高、通栏可点（不是只点得中那几个字） */
  .nav>a,.nav .grp{display:flex;align-items:stretch;flex-wrap:wrap;
    border-bottom:1px solid var(--line)}
  .nav>a,.nav .grp>a{display:flex;align-items:center;justify-content:space-between;
    min-height:52px;padding:0 18px;margin:0;font-size:16px;font-weight:500;color:#1B2A3D}
  .nav .grp>a{flex:1 1 auto;min-width:0}
  .nav>a.on,.nav .grp>a.on{color:var(--blue);background:var(--bl);font-weight:600}
  .nav>a:active,.nav .grp>a:active{background:var(--bl)}
  .nav .grp>a{pointer-events:auto}
  /* 手机的三角/悬停位移一律关掉：手指没有 hover，留着只会误触 */
  .nav .grp>a::after,.nav>a::after{display:none}

  /* ---------- 栏目右侧的 ＋（2026-11-05 业主第 1 条） ----------
     桌面靠 hover 展开面板，手指没有 hover ⇒ 窄屏必须给一个**可点**的开关。
     `<a>` 仍是「进频道页」，＋ 只管展开本栏目的二级：两条路互不干扰。
     56px 宽 × 整行高 = 远超 44×44 的可点下限。 */
  .nav .subbtn{display:flex;align-items:center;justify-content:center;width:48px;
    flex:none;padding:0;background:none;border:0;cursor:pointer}
  .nav .subbtn i{position:relative;width:14px;height:14px}
  .nav .subbtn i::before,.nav .subbtn i::after{content:"";position:absolute;left:50%;top:50%;
    border-radius:1px;background:#1B2A3D;transform:translate(-50%,-50%)}
  .nav .subbtn i::before{width:13px;height:1.6px}
  .nav .subbtn i::after{width:1.6px;height:13px;transition:transform .2s var(--ease),opacity .2s}
  .nav .grp.open .subbtn i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
  .nav .subbtn:active{background:var(--bl)}
  .nav .grp.open>a{color:var(--blue);font-weight:600}

  /* ---------- 二级面板：桌面是全宽浮层，这里就地展开成手风琴 ----------
     ★ 选择器必须带 `.top .in > .nav` 前缀：`site-seo.css` 在本文件**之后**加载，
       它的 `.nav .grp .mega{position:absolute;opacity:0;visibility:hidden}` 同权重，
       不加重就会被压回去（上一版抽屉变 0 宽块就是栽在这里）。
     ★ 没有搬 DOM：链接仍在 `.mega` 里，只是 display:none —— 爬虫照样读得到。 */
  .top .in > .nav .grp .mega{display:none;position:static;width:100%;padding:0;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
  .top .in > .nav .grp.open .mega{display:block}
  .top .in > .nav .mega .mega-in{max-width:none;margin:0;padding:4px 0 10px;
    background:#F7FAFE;border:0;border-radius:0;box-shadow:none}
  /* 面板标题行 / 底栏是桌面浮层专用的「说明 + 快捷入口」：抽屉里由栏目行本身承担 */
  .top .in > .nav .mega .mhead,.top .in > .nav .mega .mfoot{display:none}
  .top .in > .nav .mega .pgrid,.top .in > .nav .mega .mrow2{display:block;padding:0;gap:0}
  .top .in > .nav .mega .pcard,.top .in > .nav .mega .mcard{border:0;border-radius:0;
    background:none;padding:0;margin:0}
  /* 卡片图标在抽屉里去掉：11 张卡一行一个图标，视觉噪声大于辨识收益（截图口径） */
  .top .in > .nav .mega .mi{display:none}
  .top .in > .nav .mega .pcard .hd,.top .in > .nav .mega .mcard.b{display:flex;
    align-items:center;min-height:52px;padding:9px 16px 9px 28px;text-decoration:none}
  .top .in > .nav .mega .pcard .hd:active,
  .top .in > .nav .mega .mcard.b:active{background:#EAF2FC}
  .top .in > .nav .mega .pcard .tx b,
  .top .in > .nav .mega .mcard.b b{font-size:15px;font-weight:600;color:#1B2A3D}
  .top .in > .nav .mega .pcard .tx i,
  .top .in > .nav .mega .mcard.b i{display:block;margin-top:2px;font-size:12.5px;color:var(--sub)}
  /* 系列深链：沿用桌面那套「小药丸」语言（不是再排一遍一级行），
     缩进到产品名下方、允许折行 —— 桌面是 nowrap，窄屏照抄会溢出 */
  .top .in > .nav .mega .pcard .ms{display:flex;flex-wrap:wrap;gap:8px;
    margin:0;padding:0 16px 12px 28px}
  .top .in > .nav .mega .pcard .ms a{display:block;min-height:40px;padding:10px 12px;
    font-size:13.5px;line-height:1.35;color:#47586E;background:#fff;
    border:1px solid #DCE7F5;border-radius:8px;white-space:normal}
  .top .in > .nav .mega .pcard .ms a:active{background:#EAF2FC;border-color:#C9DEF6}

  /* 抽屉底部两条主行动：获取报价（主）+ 销售热线（次，点一下直接拨号） */
  .navfoot{display:grid;gap:10px;padding:14px 18px 18px}
  .navfoot a{display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:46px;border-radius:11px;text-decoration:none;font-size:15px;font-weight:600}
  .navfoot .nfq{background:var(--blue);color:#fff}
  .navfoot .nfq:active{background:#033E8C}
  .navfoot .nft{background:var(--bl);border:1px solid #CFE1F7;color:var(--blue);
    font-family:var(--mono);font-size:15.5px;font-weight:700}
  .navfoot .nft span{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--sub)}
}
@media(max-width:620px){
  /* 页脚链接原来 padding:5px 0（一行 27px 高），手机上偏难点 */
  .foot .fnav a{padding:7px 0}
  /* 390px 一行只放得下三件：logo + 电话 + 菜单（四件实测溢出 16px）。
     ★ 2026-11-05 业主第 3 条：电话保留在页头，「获取报价」下沉到抽屉底部。
       （上一版是反过来的 —— 把电话藏进抽屉保按钮；制造业客户先找的是号码。） */
  .top .in{padding:0 18px;gap:10px}
  .logo img{width:118px}
  .top .in .btn{display:none}
  /* ★ 2026-11-05 业主第 2 条「手机端有两个搜索框」：产品中心页顶那一条大搜索行
     （热门关键词 + 即时下拉）与结果栏里那个「继续搜索型号 / 品类」同时出现，
     一屏之内两个输入框、功能完全重叠。
     手机上留**页顶那个**（有热门词 + 下拉建议，是真正的搜索），
     结果栏那个只是「回车跳到集合页」的快捷入口 —— 手机屏幕短，多滑两下就回到顶部，
     它的价值远小于视觉上的重复。桌面（>620）两个都在，2026-10-29 业主第 4 条不动。
     ★ 只作用于 `.rtbar`（产品中心列表）与 `.toolsec .pmeta`（二级频道页工具栏）；
       系列页的 `.ptools` 不在 `.toolsec` 里，那页**没有**页顶搜索行，它的搜索框必须留着
       —— 所以不能用 `.psr-mini{display:none}` 一刀切。 */
  .rtbar .psr-mini{display:none}
  /* ★ 2026-11-09：二级频道页的工具栏已改成与系列页同形的单卡（`.ptools`），
     小搜索框因此从 `.rtbar` 挪进了 `.pmeta` —— 上面那条 `display:none` 就管不到它了，
     而这一页顶部**正好有一条带热门词的搜索行**（业主 2026-11-05 第 2 条说的就是它），
     手机上于是又冒出两个输入框。这里按新落点补一条，作用域 `.toolsec` 只圈住频道页。 */
  .toolsec .pmeta>.psr-mini{display:none}
}
/* 窄屏把「菜单不开时导航不可见」这件事做扎实：键盘 tab 也不该落进收起的面板 */
@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
  .navbtn span{transition:none}
}

/* v11.4 实拍图位：photos/ 素材到位后 photo() 构件渲染 <img>，撑满原占位容器。
   ★ position:relative;z-index:1（2026-09-24 业主问题3）：容器（.pic/.main/.mc-img）
     的 ::before/::after 是无图时的占位插画，绝对定位 —— 不抬 img 的层级它就会
     盖在真实照片上，看起来像图位中央浮着一块白框。 */
.main img,.mc-img img,.pic img,.vpic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
/* ★ 2026-09-24 业主追加的「正方形减半」img 覆盖规则放在 site-seo.css 尾部 ——
   它在本文件之后加载，同名规则必须排在更后才赢（这里留注释指路）。 */