/* ALWID products.css · 由 products.html 内联样式整体抽出（2026-10-20 r401） 内容与抽出前逐字节一致，仅 1 处 url() 上溯一级（assets/img → ../img）。 改动请同时回写 products.html 的 版本号。 */ *{box-sizing:border-box} :root{ --k:calc(100vw / 1920px) } @media (min-width:1920px){ :root{ --k:1 } } html,body{ margin:0; padding:0; background:#EEF4FA } html{ overflow-x:hidden } #wrap{ width:100%; margin:0 auto; background:#fff; box-shadow:0 10px 40px rgba(16,42,80,.18) } @media (min-width:1920px){ #wrap{ max-width:1920px } } #body{ position:relative } #body svg{ display:block; width:100%; height:calc(5582.8051px * var(--k)) } /* ═══ 吸顶导航（真 DOM）═══ */ .hd{ position:sticky; top:0; z-index:99; background:#fff; font-family:Arial,Helvetica,sans-serif } .hd-r1{ height:calc(64px * var(--k)); background:#FFFFFF } .hd-r2{ height:calc(56px * var(--k)); background:#F8FBFE } .hd-core{ position:relative; width:78.125%; max-width:1500px; margin:0 auto; height:100% } .hd-logo{ position:absolute; left:0; top:50%; transform:translateY(-50%); line-height:0 } .hd-logo img{ display:block; width:calc(175.8px * var(--k)); height:auto } .hd-sch{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:stretch; width:calc(500px * var(--k)); height:calc(36px * var(--k)); border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(6px * var(--k)); background:#fff; overflow:hidden } .hd-q{ flex:1 1 auto; min-width:0; border:0; outline:none; margin:0; background-color:#fff; background-repeat:no-repeat; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOEE5OUFCIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iNi42Ii8+PHBhdGggZD0iTTE1LjYgMTUuNiAyMSAyMSIvPjwvc3ZnPg=="); background-position:calc(18px * var(--k)) center; background-size:calc(15px * var(--k)) calc(15px * var(--k)); padding:0 calc(10px * var(--k)) 0 calc(65px * var(--k)); letter-spacing:calc(.25px * var(--k)); font-family:inherit; font-size:calc(14px * var(--k)); color:#5B6B7F; -webkit-appearance:none; appearance:none } .hd-q::placeholder{ color:#5B6B7F; opacity:1 } .hd-q::-webkit-search-cancel-button{ display:none } .hd-btn{ flex:0 0 auto; width:calc(120px * var(--k)); border:0; background:#122E4F; color:#fff; font-family:inherit; font-size:calc(14px * var(--k)); font-weight:700; letter-spacing:calc(.14px * var(--k)); cursor:pointer; padding:0 } .hd-btn:hover{ background:#1D5188 } .hd-nav{ position:absolute; left:0; top:0; height:100%; display:flex; gap:calc(34.5px * var(--k)) } .hd-nav a{ display:block; position:relative; height:calc(56px * var(--k)); line-height:calc(56px * var(--k)); white-space:nowrap; text-decoration:none; font-size:calc(14px * var(--k)); letter-spacing:calc(.14px * var(--k)); color:#5B6B7F } .hd-nav a:hover{ color:#1D5188; text-decoration:underline; text-decoration-thickness:calc(2.5px * var(--k)); text-underline-offset:calc(12px * var(--k)) } .hd-nav a.on{ color:#1D5188; font-weight:700 } .hd-nav a.on::after{ content:''; position:absolute; left:0; right:0; top:calc(37.5px * var(--k)); height:calc(2.5px * var(--k)); background:#1D5188 } /* 导航悬停横线：与当前页那条归到同一条基线（原来走文字下划线、位置低 7px；当前页被悬停时会上下各出一条） */ .hd-nav a::after{ content:''; position:absolute; left:0; right:0; top:calc(37.5px * var(--k)); height:calc(2.5px * var(--k)); background:#1D5188; opacity:0 } .hd-nav a:hover{ text-decoration:none } .hd-nav a:hover::after, .hd-nav a.on::after{ opacity:1 } .hd-lang{ position:absolute; right:calc(4px * var(--k)); top:0; height:100%; display:flex; align-items:center; gap:calc(4px * var(--k)) } .hd-lang a{ display:flex; align-items:center; justify-content:center; gap:calc(5px * var(--k)); width:calc(52px * var(--k)); height:calc(36px * var(--k)); border-radius:calc(4px * var(--k)); background:#fff; box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(18,46,79,.07); text-decoration:none; color:#122E4F; font-weight:700; font-size:calc(12px * var(--k)); letter-spacing:calc(.48px * var(--k)) } .hd-lang a:hover{ color:#1D5188; box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(29,81,136,.40) } .fl{ display:block; flex:0 0 auto; width:calc(18px * var(--k)); height:calc(12px * var(--k)); background-size:cover } /* ═══ 热区（可点层）═══ */ .hs{ position:absolute; display:block; cursor:pointer; background:transparent } /* ═══ 响应式：≥1024 桌面版 / <1024 移动版 ═══ */ #m{ display:none } @media (max-width:1023px){ html,body{ background:#fff } #wrap{ display:none } #m{ display:block; max-width:480px; margin:0 auto; background:#fff; font-family:Arial,Helvetica,sans-serif; color:#5B6B7F; -webkit-text-size-adjust:100% } /* ─── ① 吸顶顶部条（50px：LOGO 18 / 语言 26 / 汉堡 30）─── */ .mhd{ position:sticky; top:0; z-index:99; background:#fff; box-shadow:0 1px 0 #DDE5EF } .mhd-bar{ height:50px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px } .mhd-logo{ display:block; line-height:0; flex:0 1 auto; min-width:0 } .mhd-logo img{ display:block; height:18px; width:auto } .mhd-rt{ display:flex; align-items:center; gap:6px; flex:0 0 auto } .mlang{ position:relative } .mlang summary{ list-style:none; display:flex; align-items:center; gap:5px; height:26px; padding:0 7px; border-radius:6px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(18,46,79,.12); color:#122E4F; font-weight:700; font-size:13px; letter-spacing:.2px } .mlang summary::-webkit-details-marker{ display:none } .mlang summary b{ font-weight:700 } .cv{ width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid #5B6B7F } .mlang[open] .cv{ border-top:0; border-bottom:4px solid #5B6B7F } .mlang-panel{ position:absolute; right:0; top:32px; width:168px; background:#fff; border:1px solid #DDE5EF; border-radius:10px; padding:5px; box-shadow:0 14px 34px rgba(18,46,79,.16); z-index:3 } .mlang-panel a{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:7px; text-decoration:none; color:#122E4F; font-size:14px; font-weight:700 } .mlang-panel a.on{ background:#F2F6FB; color:#1D5188 } .fl{ display:block; flex:0 0 auto; width:14px; height:9.33px; background-size:cover; background-position:center; background-repeat:no-repeat } .mmenu{ position:relative } .mmenu summary{ list-style:none; display:flex; flex-direction:column; justify-content:center; gap:4px; width:30px; height:30px; padding:6px; cursor:pointer; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(18,46,79,.12) } .mmenu summary::-webkit-details-marker{ display:none } .mmenu summary i{ display:block; height:2px; background:#122E4F; border-radius:2px } .mmenu summary i:nth-child(2){ width:78% } .mmenu[open] summary i:nth-child(1){ transform:translateY(6px) rotate(45deg) } .mmenu[open] summary i:nth-child(2){ opacity:0 } .mmenu[open] summary i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) } .mmenu-panel{ position:absolute; right:0; top:36px; width:min(86vw,320px); background:#fff; border:1px solid #DDE5EF; border-radius:12px; box-shadow:0 14px 40px rgba(18,46,79,.16); padding:12px; z-index:2 } .msearch{ width:100%; height:40px; border:1px solid #DDE5EF; border-radius:8px; padding:0 12px; font-size:14px; margin:0 0 8px; -webkit-appearance:none } .mnav{ display:flex; flex-direction:column } .mnav a{ padding:11px 4px; border-bottom:1px solid #F2F6FB; color:#122E4F; text-decoration:none; font-size:15px; font-weight:700 } .mnav a:last-child{ border-bottom:0 } /* ─── ② 主 Banner（通栏横幅：无圆角、左右满幅，文字压在图上 · 左对齐）─── 量测依据（_r251）：主图 1028×492（比 2.089），边缘能量集中在 x 1..732， x>732 为低能量空背景 ⇒ cover 裁右侧最安全；文字压底部 ⇒ 底部用同色系 scrim（#122E4F 0→.90）压暗，保证白字对比度。 */ .mhero{ padding:0 } .mhero-card{ position:relative; overflow:hidden; background:#122E4F; border-radius:0; padding:0; border:0; aspect-ratio:1.6; box-shadow:none } .mhero-in{ position:absolute; inset:0; background:transparent; border-radius:0; padding:0 } .mhero-img{ position:absolute; inset:0; display:block; border-radius:0; overflow:hidden; line-height:0; background:#122E4F } .mhero-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left center } .mhero-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,46,79,0) 0%, rgba(18,46,79,0) 34%, rgba(18,46,79,.30) 58%, rgba(18,46,79,.72) 86%, rgba(18,46,79,.86) 100%) } .mhero-tx{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 18px 18px; text-align:left; pointer-events:none } .mhero-rule{ display:block; width:22px; height:3px; background:#D78A36; margin:0 0 10px; border-radius:2px } .mhero-h1{ margin:0; font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:20px; line-height:1.28; color:#FFFFFF; letter-spacing:.1px; text-shadow:0 1px 4px rgba(18,46,79,.55) } .mhero-models{ margin:7px 0 0; font-size:14px; line-height:1.45; color:#F2F6FB; text-shadow:0 1px 3px rgba(18,46,79,.50) } /* ─── ③ 四大分类 2×2：桌面同款白卡（阴影 ＋ 图 ＋ 名称 ＋ 橙线 ＋ 一句描述）─── 桌面：rect 283.5366×357.87 rx=5.4878 fill=#FFFFFF ＋ 图顶部出血 ＋ fadeB2（#122E4F 0 -> 0.40，高 53.0488/155.4878 = 34.1%）＋ 名称 20 #1D5188 ＋ 橙线 23.78×2.7439 #D78A36 ＋ 描述 16 #5B6B7F */ .mcat{ padding:14px 16px 0 } .mcat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px } .mcat-i{ display:block; text-decoration:none; background:#fff; border-radius:12px; overflow:hidden; border:1px solid #DDE5EF; box-shadow:0 3px 10px rgba(18,46,79,.10), 0 1px 2px rgba(18,46,79,.06) } .mcat-th{ position:relative; display:block; line-height:0; background:#F2F6FB } .mcat-th img{ display:block; width:100%; height:auto } .mcat-th:after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34.1%; background:linear-gradient(180deg, rgba(18,46,79,0) 0%, rgba(18,46,79,.40) 100%) } .mcat-tx{ display:block; padding:10px 10px 12px } .mcat-n{ display:block; font-size:16px; font-weight:700; color:#1D5188; line-height:1.25 } .mcat-r{ display:block; width:22px; height:2.5px; background:#D78A36; border-radius:2px; margin:6px 0 0 } .mcat-d{ display:block; margin-top:6px; font-size:13px; line-height:1.5; color:#5B6B7F; min-height:39px } /* ─── ④ Why buyers work with ALWID（编号行 · 左对齐）─── */ .mwhy{ padding:24px 16px 2px } .mwhy-h2{ margin:0; font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:19px; line-height:1.25; color:#1D5188; letter-spacing:0 } .mwhy-list{ margin-top:12px } .mwhy-i{ display:flex; gap:10px; padding:11px 0; border-top:1px solid #EEF4FA } .mwhy-i:last-child{ padding-bottom:13px } .mwhy-n{ flex:0 0 25px; font-size:13px; font-weight:700; color:#D78A36; line-height:1.35; letter-spacing:.5px; padding-top:2px } .mwhy-b{ flex:1 1 auto; min-width:0 } .mwhy-h3{ font-size:16px; font-weight:700; color:#1D5188; line-height:1.35 } .mwhy-p{ margin:3px 0 0; font-size:16px; line-height:1.6; color:#5B6B7F } /* ─── ⑤ 包装展示带（通栏图 ＋ 压底文字板）─── */ .mpkgsec{ margin-top:22px } .mpkg{ display:block; position:relative; text-decoration:none; line-height:0 } .mpkg img{ display:block; width:100%; height:auto } .mpkg-cap{ position:absolute; left:0; right:0; bottom:0; display:block; padding:11px 16px 13px; text-align:left; background:linear-gradient(180deg, rgba(18,46,79,.52) 0%, rgba(18,46,79,.88) 30%, rgba(18,46,79,.94) 100%) } .mpkg-cap:before{ content:''; position:absolute; left:0; right:0; top:-26px; height:26px; background:linear-gradient(180deg, rgba(18,46,79,0) 0%, rgba(18,46,79,.52) 100%) } .mpkg-eye{ display:block; position:relative; font-size:13px; font-weight:700; color:#D78A36; letter-spacing:1.4px; line-height:1.4 } .mpkg-line{ display:block; position:relative; margin-top:3px; font-size:15px; font-weight:700; color:#FFFFFF; line-height:1.45 } /* ─── ⑥ 满宽询盘按钮 ─── */ .mcta{ padding:16px 16px 24px } .mbtn{ display:block; height:48px; line-height:48px; text-align:center; background:#D78A36; color:#fff; font-size:16px; font-weight:700; text-decoration:none; border-radius:8px; letter-spacing:.2px } /* ─── ⑦ 精简页脚 ─── */ .mft{ background:#122E4F; padding:22px 16px 24px; text-align:center } .mft-logo{ line-height:0 } .mft-logo img{ display:inline-block; height:20px; width:auto } .mft-c{ margin-top:8px; font-size:13px; line-height:1.6; color:#F2F6FB; word-break:break-word } /* ══════ r300 手机版首页 · 视觉重构 ══════ */ /* 共用：段标题（橙短线 + Arial Black 标题）—— 全页统一 */ .sec-rule{display:block;width:26px;height:3px;background:#D78A36;border-radius:2px;margin:0 0 13px} .sec-h2{margin:0;font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:20px; line-height:1.3;color:#1D5188;letter-spacing:-.2px} .sec-hd{margin:0 0 22px} /* ── ① Hero → 分类 之间的数据带（渐变无缝，不再是「另一块蓝」）── */ .mstats{position:relative;overflow:hidden;padding:14px 18px; background:linear-gradient(180deg,#122E4F 0%,#1D5188 58%,#122E4F 100%)} .mstats::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14; background:url('../img/img_d0bb21272d.png') 50% 50%/cover no-repeat} .mstats-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px} .mstats-i{display:block} .mstats-r{display:block;width:23.7805px;height:2.7439px;background:#D78A36;border-radius:2px; margin:0 0 6px} .mstats-n{display:block;font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:23px; line-height:1;color:#3D74AC;letter-spacing:-.4px} .mstats-d{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:#F2F6FB} /* ── ② 四大分类：去框 · 段间大留白 · 带首标题 ── */ .mcat{padding:38px 18px 46px;background:#F2F6FB} .mcat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px} .mcat-i{display:block;text-decoration:none;background:transparent;border:0;border-radius:0; overflow:visible;box-shadow:none} .mcat-th{display:block;border-radius:10px;overflow:hidden;background:#EEF4FA;line-height:0} .mcat-th img{display:block;width:100%;height:auto;aspect-ratio:620/340;object-fit:cover} .mcat-th:after{display:none} .mcat-tx{display:block;padding:11px 0 0} .mcat-n{display:block;font-size:17px;font-weight:700;color:#1D5188;line-height:1.25; letter-spacing:-.1px} .mcat-r{display:block;width:22px;height:2.5px;background:#D78A36;border-radius:2px;margin:8px 0 0} .mcat-d{display:block;margin-top:7px;font-size:14px;line-height:1.55;color:#5B6B7F;min-height:44px} /* ── ③ Why buyers：段间大留白 · 行距拉开 ── */ .mwhy{padding:42px 18px 48px;background:#fff} .mwhy-list{margin-top:0} .mwhy-i{display:flex;gap:14px;padding:16px 0;border-top:1px solid #DDE5EF} .mwhy-i:first-child{border-top:0;padding-top:2px} .mwhy-i:last-child{padding-bottom:0} .mwhy-n{flex:0 0 23px;font-size:12px;font-weight:700;color:#D78A36;letter-spacing:1px; padding-top:4px;font-family:Arial,Helvetica,sans-serif} .mwhy-h3{font-size:17px;font-weight:700;color:#1D5188;line-height:1.3;letter-spacing:-.1px} .mwhy-p{margin:5px 0 0;font-size:15px;line-height:1.62;color:#5B6B7F} /* ── ④ 包装段：字从图上下来，独立成深蓝块 ── */ .mpkgsec{margin-top:0} .mpkg{display:block;position:relative;text-decoration:none;line-height:0} .mpkg img{display:block;width:100%;height:auto} .mpkg-cap{display:block;position:static;padding:26px 18px 30px;background:#122E4F;text-align:left} .mpkg-cap:before{display:none} .mpkg-eye{display:block;position:relative;font-size:12px;font-weight:700;color:#D78A36; letter-spacing:1.4px;line-height:1.4} .mpkg-line{display:block;position:relative;margin-top:9px;font-size:19px;font-weight:900; color:#FFFFFF;line-height:1.35;letter-spacing:-.2px; font-family:"Arial Black",Arial,sans-serif} /* ── ⑤ 询盘段：补上眉标 + 标题 + 说明，留白加倍 ── */ .mcta{padding:48px 18px 54px;background:#fff;text-align:left} .mcta-eye{display:block;font-size:12px;font-weight:700;color:#D78A36;letter-spacing:1.4px; line-height:1.4} .mcta-h2{margin:11px 0 0} .mcta-p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#5B6B7F} .mbtn{display:block;height:50px;line-height:50px;text-align:center;background:#D78A36;color:#fff; font-size:16px;font-weight:700;border-radius:8px;margin-top:24px;text-decoration:none} /* ══════ r301c 品牌色对齐层 · 全部取桌面端同源真值 ══════ ★ 判据：_r301_ctok.py 手机版色值集 ⊆ 桌面色值集（豁免项单列） ★ 每改一项都要同时在桌面端找到出处；找不到就不许用 */ /* ── 吸顶条（桌面 header 用 #DDE5EF 分隔线／DEEP 投影）── */ .mhd{box-shadow:0 1px 0 #DDE5EF} .mlang summary,.mmenu summary{box-shadow:inset 0 0 0 1px rgba(18,46,79,.07)} .cv{border-top-color:#5B6B7F} .mlang[open] .cv{border-bottom-color:#5B6B7F} .mlang-panel,.mmenu-panel{box-shadow:0 14px 34px rgba(18,46,79,.07)} /* ── Hero：底 = DEEP；压暗 scrim 与字影一律 DEEP 派生 ── */ .mhero-card{background:#122E4F} .mhero-img::after{background:linear-gradient(180deg,rgba(18,46,79,0) 0%,rgba(18,46,79,0) 34%, rgba(18,46,79,.30) 58%,rgba(18,46,79,.72) 86%,rgba(18,46,79,.86) 100%)} .mhero-h1{font-weight:900;text-shadow:0 1px 4px rgba(18,46,79,.55)} .mhero-models{color:#F2F6FB;text-shadow:0 1px 3px rgba(18,46,79,.50)} /* ── 分类与 Why：细线用桌面最多的 #DDE5EF，缩略图占位改用 #EEF4FA ── */ .mcat-i{border-color:#DDE5EF;box-shadow:none} .mcat-th{background:#EEF4FA} .mwhy-i{border-top-color:#DDE5EF} /* ── 包装段：深蓝块 = DEEP（同 Hero／页脚底色）── */ .mpkg-cap{background:#122E4F} .mpkg-cap:before{display:none} /* ══ r301 询盘按钮：通栏橙带 → 内联胶囊 ══ */ .mbtn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px; line-height:1;background:#D78A36;color:#fff;font-size:15px;font-weight:700;border-radius:6px; margin-top:28px;text-decoration:none;letter-spacing:.2px; box-shadow:0 5px 14px rgba(18,46,79,.13)} .mbtn::after{content:'\2192';display:inline-block;margin-left:10px;font-size:14px; opacity:.9;transform:translateY(-.5px)} .mbtn:active{filter:brightness(.92)} .mcta{padding:50px 18px 56px;background:#fff} .mcta-p{max-width:330px} /* ══ r301 页脚：三层重排（LOGO ／ 橙线 ／ 信息）＋ 底部独立地图带 ══ ★ 字色一律用**桌面端页脚口径**：INK #F2F6FB ＋ fill-opacity （品牌语／认证副标题 .72 ／ 主体名 .85 ／ 地址 .62 ／ 版权 .55）—— 桌面**不换色相**，层级靠不透明度；自造灰蓝桌面端根本不存在（已清除） ★ .mft-map 用负边距满幅（页脚左右 padding 18）⇒ 底纹出血到屏幕两边 —— 严格说负边距只把元素从「页脚内容盒 354」撑回「页脚边框盒 390」， 页脚本身满屏宽，所以带**宽恒 = 屏宽 390**（不是 426；见文件头的带宽修正） ★ 地图带拆**两层**：`.mft-mapbg` 承担地图 + 遮罩，`.mft-dots` 承担橙点。 遮罩（mask）会连同后代一起作用，两层同元素会让橙点被压得不均匀 （实测澳洲点强度只剩一半、欧洲点仍有八成）⇒ 必须分开。 ★ 本段用 __TOKEN__ 替换拼装，不用 % 格式化 —— 注释里的百分号曾把 % 格式化打爆 */ .mft{position:relative;background:#122E4F;padding:34px 18px 0;text-align:center;overflow:hidden} .mft-logo{line-height:0} .mft-logo img{display:inline-block;height:20px;width:auto} .mft-rule{display:block;width:26px;height:2.5px;background:#D78A36;border-radius:2px; margin:16px auto 0} .mft-c{margin:0;font-size:13px;line-height:1.6;color:rgba(242,246,251,.72);word-break:break-word} .mft-c1{margin-top:18px;letter-spacing:.2px} .mft-c2{margin-top:11px;font-size:12px;letter-spacing:.2px;color:rgba(242,246,251,.55)} .mft-map{position:relative;display:block;height:101.4px;margin:20px -18px 0} .mft-map>*{position:absolute;inset:0;display:block} .mft-mapbg{background-image:url('../img/img_d0bb21272d.png');background-repeat:no-repeat; background-size:100% auto;background-position:50% -21.2px;opacity:0.4} /* ══ r301b/c 乙｜桌面骨架：左品牌块／右联系块 ＋ 认证卡横跨 ══ */ .mft-cx{padding-top:32px;text-align:left} /* ★ r301d：LOGO 单独占一行（独占首行，水平位置仍在左 —— 最小改动）， 其余内容（左栏品牌语／右栏联系块／认证卡／版权）整体下移到它下面。 lg_mb 必须 ≥ 组内间距，LOGO 才算「独立留位」而不是"多一行" */ .mft-cx .mft-lgorow{display:flex;align-items:center;margin-bottom:22px} .mft-cx .mft-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .mft-cx .mft-brand{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto} .mft-cx .mft-logo img{height:26px} .mft-cx .mft-rule{width:32px;height:3px;border-radius:1.5px;margin:0px auto 0 0} .mft-cx .mft-tag{margin-top:12px;font-size:12.5px;line-height:1.55; color:rgba(242,246,251,.72);letter-spacing:.2px} .mft-cx .mft-cont{display:flex;flex-direction:column;align-items:flex-end;text-align:right; padding-top:0px} .mft-cx .mft-cont .mft-c1{margin-top:0;font-size:13.5px;line-height:1.5; color:rgba(242,246,251,.85);letter-spacing:.2px} .mft-cx .mft-cont .mft-c2{margin-top:12px;font-size:12px;line-height:1.5; color:rgba(242,246,251,.72);letter-spacing:.2px} .mft-cx .mft-cont .mft-c3{margin-top:12px;font-size:11.5px;line-height:1.5; color:rgba(242,246,251,.62);letter-spacing:.2px} .mft-cx .mft-cert{margin-top:26px;height:50px;padding:0 14px 0 16px;border-radius:5.5px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18); display:flex;flex-direction:column;justify-content:center;position:relative;text-align:left} .mft-cx .mft-cert::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px; width:2.7439px;border-radius:1.372px;background:#D78A36} .mft-cx .mft-ch{font-size:16px;font-weight:900;line-height:1.25;color:#FFFFFF;letter-spacing:.2px} .mft-cx .mft-cs{margin-top:2px;font-size:11.5px;line-height:1.3; color:rgba(242,246,251,.72);letter-spacing:.2px} .mft-cx .mft-c4{margin-top:24px;padding-top:15px;position:relative;font-size:11px; line-height:1.6;color:rgba(242,246,251,.55);letter-spacing:.4px;text-align:center} .mft-cx .mft-c4::before{content:'';position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,#1D5188 16%,#1D5188 84%,transparent)} .mft-cx .mft-map{margin-top:20px} .mft-cx .mft-mapbg{/* r303：硬边裁断，不叠渐隐 */} /* ══ r304 :: P1 甲｜只收 LOGO ══ LOGO 20px ／ pad 32 ／ 组间 lg_mb 22·cert 26 ·c4 24·map 20 */ .mft-cx{padding-top:32px} .mft-cx .mft-lgorow{margin-bottom:22px} .mft-cx .mft-logo img{height:20px} .mft-cx .mft-cert{margin-top:26px} .mft-cx .mft-c4{margin-top:24px} .mft-cx .mft-map{margin-top:20px} /* ══════════════════════════════════════════════════════════════════════ r305 :: 按《ALWID品牌规范 01 色彩／02 排版／03 网页双端版式》统一 ── 纯追加覆盖，可整段挖除；挖除后与本段之前**逐字节相同** ① 字号收口 《02》§三：本页手机版原 13 档 → 6 档（23/20/17/15/14/13） ② 页脚节奏 《03》：组间恒 24（原 22/26/24/20 四个互不相干的数） ③ 顶留白 32 → 28（落 4px 网格） ══════════════════════════════════════════════════════════════════════ */ /* ① 字号收口：19→17 ／ 16→17 ／ 13.5→14 ／ 12.5→13 ／ 12→13 ／ 11.5→13 ／ 11→13 */ .mpkg-line{font-size:17px} .mft-cx .mft-ch{font-size:17px} .mft-cx .mft-cont .mft-c1{font-size:14px} .mstats-d{font-size:13px} .mft-cx .mft-tag{font-size:13px} .mwhy-n{font-size:13px} .mpkg-eye{font-size:13px} .mcta-eye{font-size:13px} .mft-cx .mft-cont .mft-c2{font-size:13px} .mft-cx .mft-cont .mft-c3{font-size:13px} .mft-cx .mft-cs{font-size:13px} .mft-cx .mft-c4{font-size:13px} /* ② 页脚节奏：组间恒 24 ／ ③ 顶留白 28 */ .mft-cx{padding-top:28px} .mft-cx .mft-lgorow{margin-bottom:24px} .mft-cx .mft-cert{margin-top:24px} .mft-cx .mft-map{margin-top:24px} /* ══════════════════════════════════════════════════════════════════════ r306 :: 手机页脚 —— 地图从「底部空带」改成「背景层＋蒙版＋文字压图」 ── 纯追加覆盖，整段可挖除；挖除后与本段之前**逐字节相同** 依据：《03 双端版式》「首尾地图口径」＝ 电脑端 4992..5358 带 （满幅 #122E4F ＋ 世界地图 opacity .2 ＋ CTA 文案压图） 手法：`.mft-map` 由「流内空带」→「绝对定位背景层」；文字层 z-index 提到它上面 ══════════════════════════════════════════════════════════════════════ */ /* ① 地图改「背景层」：bottom:0 ＋ 固定带高（带高 ＝ 它要托的那块内容的高度， 不再写 top 死值 —— 上方内容一变，带顶会跟着跑偏） */ .mft-cx .mft-map{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:0} .mft-cx>*:not(.mft-map){position:relative;z-index:1} /* ② 地图改 fill 式铺满本带（原「100% auto ＋ 硬裁窗」只适配 101.4 一条高度） */ .mft-cx .mft-mapbg{background-size:cover;background-position:50% 50%} /* ③ 版权不再自带 24 上距 —— 上距改由「带内留白」给，文字才落在图上 */ .mft-cx .mft-c4{margin-top:0} /* ④ 排版：两栏**首行对齐**。原状左栏首行在 87（橙线 72..75 占掉 3 ＋ 下距 12）， 右栏首行在 72 ⇒ 差 15，读起来右栏「吊」在上面。给右栏补 15 上距后 两栏首行同在 87，橙线成为两栏共同的分节标记 */ .mft-cx .mft-cont{padding-top:15px} /* 丙：带高 ＝ 联系块 ＋ 认证卡 ＋ 版权区（99 ＋ 24 ＋ 50 ＋ 20 ＋ 18 ＋ 20.8 ＋ 40 ＝ 271.8） ⇒ 带顶自动落在 LOGO 行底（＝ 联系块顶） */ .mft-cx{padding-bottom:40px} .mft-cx .mft-c4{margin-top:20px;padding-top:18px} .mft-cx .mft-map{height:271.8px} /* ⑤ ★ 蒙版强度：地图层 opacity 由 0.4 → .14 依据：① 桌面两条地图带 0.16 / 0.2；② 手机 .mstats::before 0.14（同页范例） 实测（带内无字横条）：0.4 ⇒ 地图点亮度 121，版权字 154，只差 32（抢字） 0.14 ⇒ 地图点亮度 70，差 84（文字干净，地图仍看得见） 这一条就是「背景上面加蒙版」的强度值 */ .mft-cx .mft-mapbg{opacity:.14} /* ══════════════════════════════════════════════════════════════════════ r307 :: 手机页脚地图带 —— 地图「点距」纠正 Hedy：「你是1:1抱过来的，所以看着点很大，这样不对」 ── 定量：现状落屏点距 6.26 CSS px；正确基准（.mstats / 桌面两条带）3.0 CSS px ⇒ 2.1 倍 ── 两条根因：① 用的是另一张内嵌图（773×304，点更肥）；② r306 改 cover 铺 271.8 高的带 ⇒ c=0.894 ── 本段：换回与 .mstats **同一张素材**（base64 已同步去掉，页面省 34.8 KB）， 并按 .mstats 的缩放基准（整张稿子横铺满屏）重给 size/position ── 纯追加覆盖，整段可挖除；挖除后与本段之前**逐字节相同** ══════════════════════════════════════════════════════════════════════ */ .mft-cx .mft-mapbg{background-image:url('../img/img_d0bb21272d.png');background-repeat:no-repeat; background-size:100% auto;background-position:50% 0;opacity:.14} } /* ══════════════ r314 产品线（1920 模式） ══════════════ */ #body svg.p-ftsvg{ display:block; width:100%; height:auto; aspect-ratio:1920 / 710.7309 } .p-foot{ position:relative } .p-page{ font-family:Arial,Helvetica,sans-serif; color:#5B6B7F; background:#fff } .p-core{ width:62.5%; max-width:1200px; margin:0 auto; position:relative } .p-wide{ width:78.125%; max-width:1500px; margin:0 auto; position:relative } /* ── ★ 左侧索引（四页通用） ── */ .p-shell{ display:grid; grid-template-columns:calc(260px * var(--k)) minmax(0,1fr); column-gap:calc(40px * var(--k)); width:78.125%; max-width:1500px; margin:0 auto } .p-main{ min-width:0 } .p-main>.p-sec>.p-core{ width:100%; max-width:none; margin:0 } .p-side{ grid-column:1; grid-row:1; align-self:start; z-index:2; position:sticky; top:calc(136px * var(--k)) } .p-side-in{ background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(12px * var(--k)); padding:calc(22px * var(--k)) calc(18px * var(--k)); box-shadow:0 calc(1px * var(--k)) calc(5px * var(--k)) rgba(18,46,79,.05) } .p-side-t{ font-weight:700; font-size:calc(13px * var(--k)); letter-spacing:calc(1.4px * var(--k)); line-height:1.5; text-transform:uppercase; color:#D78A36 } .p-side-s{ margin:calc(18px * var(--k)) 0 0; padding:calc(16px * var(--k)) 0 0; border-top:calc(1px * var(--k)) solid #DDE5EF } .p-side-h{ display:block; font-weight:700; font-size:calc(13px * var(--k)); letter-spacing:calc(1.4px * var(--k)); line-height:1.5; text-transform:uppercase; color:#5B6B7F; margin:0 0 calc(4px * var(--k)) } .p-side-i{ display:flex; align-items:center; gap:calc(8px * var(--k)); text-decoration:none; font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F; padding:calc(10px * var(--k)) calc(12px * var(--k)); border-left:calc(2px * var(--k)) solid transparent; border-radius:calc(6px * var(--k)); transition:background .2s ease,color .2s ease,border-color .2s ease } .p-side-i+.p-side-i{ margin-top:calc(2px * var(--k)) } .p-side-i:hover{ background:#F2F6FB; color:#1D5188 } .p-side-i.on{ background:#F2F6FB; color:#1D5188; font-weight:700; border-left-color:#1D5188 } .p-side-i em{ margin-left:auto; font-style:normal; font-weight:400; font-size:calc(13px * var(--k)); color:#5B6B7F } .p-side-i.on em{ color:#1D5188; font-weight:700 } .p-subl{ margin:calc(2px * var(--k)) 0 calc(4px * var(--k)); padding-left:calc(10px * var(--k)); border-left:calc(2px * var(--k)) solid #DDE5EF; max-height:calc(320px * var(--k)); overflow-y:auto; overscroll-behavior:contain } .p-subl[hidden]{ display:none } .p-subl a{ display:flex; align-items:center; gap:calc(8px * var(--k)); text-decoration:none; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; padding:calc(7px * var(--k)) calc(10px * var(--k)); border-radius:calc(4px * var(--k)) } .p-subl a:hover{ background:#F2F6FB; color:#1D5188 } .p-subl a.on{ background:#F2F6FB; color:#1D5188; font-weight:700 } .p-subl a em{ margin-left:auto; font-style:normal; font-weight:400; font-size:calc(13px * var(--k)); color:#5B6B7F } .p-subl a.on em{ color:#1D5188; font-weight:700 } .p-side .p-btn{ display:flex; width:100% } .p-sec{ position:relative } .p-sect{ padding:calc(72px * var(--k)) 0; position:relative; z-index:0 } /* ★ r316 淡蓝板块改通栏：内容仍锁在 1200 主列，底色左右各溢到画布边。 ｜左溢 510 设计单位（= 侧栏 260 + 缝 40 + 版心左 210）｜右溢 210 设计单位（= 版心右留白）。 ｜用 z-index:-1 + 父级 z-index:0 建栈 ⇒ 底色在内容之下、且不越出本节，sticky 侧栏不受影响。 ｜颜色 background:inherit ⇒ 跟随各 section 自己的内联底色（#F2F6FB / #FFFFFF），零改动三个源文件。 */ .p-sect::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(-510px * var(--k)); right:calc(-210px * var(--k)); background:inherit; pointer-events:none } /* ── 标题族 ── */ .p-eyebrow{ font-weight:700; font-size:calc(13px * var(--k)); letter-spacing:calc(1.4px * var(--k)); line-height:1.5; text-transform:uppercase; color:#D78A36 } .p-eye-in{ color:#D78A36 } .p-h1{ font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(52px * var(--k)); line-height:1.3; letter-spacing:calc(-0.4px * var(--k)); color:#122E4F; margin:calc(16px * var(--k)) 0 0 } .p-h2{ font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(38px * var(--k)); line-height:1.3; letter-spacing:calc(-0.4px * var(--k)); color:#122E4F; margin:calc(14px * var(--k)) 0 0 } .p-h3{ font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(22px * var(--k)); line-height:1.3; letter-spacing:calc(-0.3px * var(--k)); color:#122E4F; margin:0 } .p-lead{ font-size:calc(16px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(16px * var(--k)) 0 0; max-width:calc(800px * var(--k)) } .p-hr{ width:calc(46px * var(--k)); height:calc(4px * var(--k)); background:#D78A36; border-radius:calc(2px * var(--k)); margin:0 } .p-hr-in{ background:#D78A36 } /* ── HERO ── */ .p-hero{ overflow:hidden; background:#122E4F } .p-hero>.p-wide{ padding:calc(90.953px * var(--k)) 0; min-height:calc(377px * var(--k)) } .p-crumb{ font-size:calc(13px * var(--k)); line-height:1.5; color:#F2F6FB; opacity:.62; margin:0 0 calc(24px * var(--k)) } .p-crumb a{ color:inherit; text-decoration:none } .p-crumb a:hover{ opacity:1; text-decoration:underline } .p-crumb i{ font-style:normal; opacity:.62; padding:0 calc(8px * var(--k)) } .p-crumb b{ font-weight:400; color:#FFFFFF; opacity:1 } .p-hero .p-h1{ color:#FFFFFF } .p-hero .p-lead{ color:#F2F6FB; opacity:.85 } .p-hero .p-hr{ margin-top:calc(14px * var(--k)) } /* ── 产品卡网格 ── */ .p-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(21.95px * var(--k)); margin:calc(34px * var(--k)) 0 0 } .p-grid[hidden]{ display:none } .p-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .p-grid-6{ grid-template-columns:repeat(6,minmax(0,1fr)) } /* ── ★ r315f 空结果态：品名在真库有条目（147 条 Water Pipe 之类）、站内还没拍图上架 ⇒ 用询盘承接，不给一片空白。容器临时 block 由 JS 内联 display 控制，这里只管排版。 ── */ .p-empty{ max-width:calc(680px * var(--k)) } .p-empty .p-h2{ margin:calc(10px * var(--k)) 0 0 } .p-empty .p-lead{ margin:calc(12px * var(--k)) 0 0 } .p-empty .p-note{ margin:calc(14px * var(--k)) 0 0 } .p-empty b{ color:#122E4F; font-weight:900 } .p-empty-b{ display:flex; align-items:center; gap:calc(10px * var(--k)); flex-wrap:wrap; margin:calc(20px * var(--k)) 0 0 } .p-card{ display:flex; flex-direction:column; text-decoration:none; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(10px * var(--k)); overflow:hidden; box-shadow:0 calc(1px * var(--k)) calc(5px * var(--k)) rgba(18,46,79,.05); transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease } /* ★★ 卡片悬浮：四类卡片共用**一处**定义（Hedy r314 批「卡片悬浮要」） —— 首页本身没有卡片悬浮 CSS，这条是**有意保留**，不是对标首页的偏离项。 —— 改这里即全站生效；不要再给单类卡片另写 hover 位移/阴影。 */ .p-card:hover, .p-gcard:hover, .p-car-c:hover, .p-vol-c:hover{ transform:translateY(calc(-6px * var(--k))); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); border-color:rgba(29,81,136,.40) } .p-card:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } /* ★ 图区一律纯白 —— 产品图本身白底，不给「灰底面板 + 白照片」两层框 */ .p-fig{ display:block; position:relative; aspect-ratio:4 / 3; background:#FFFFFF; overflow:hidden; border-bottom:calc(1px * var(--k)) solid #DDE5EF } .p-fig img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:calc(12px * var(--k)); transition:transform .5s cubic-bezier(.22,.61,.36,1) } .p-card:hover .p-fig img{ transform:scale(1.055) } .p-bd{ display:flex; flex-direction:column; flex:1 1 auto; padding:calc(15px * var(--k)) calc(16px * var(--k)) calc(17px * var(--k)) } .p-oe{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; letter-spacing:calc(.2px * var(--k)) } .p-nm{ display:block; font-weight:700; font-size:calc(22px * var(--k)); line-height:1.3; letter-spacing:calc(-0.3px * var(--k)); color:#122E4F; margin:calc(7px * var(--k)) 0 0 } .p-ft{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(8px * var(--k)) 0 0; height:calc(42px * var(--k)); overflow:hidden } .p-go{ display:block; margin-top:auto; padding-top:calc(14px * var(--k)); font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#1D5188 } .p-card:hover .p-go{ color:#D78A36 } /* ── 类目卡 ── */ .p-grp{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(21.95px * var(--k)); margin:calc(34px * var(--k)) 0 0 } .p-gcard{ display:block; text-decoration:none; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(10px * var(--k)); padding:calc(24px * var(--k)) calc(22px * var(--k)) calc(22px * var(--k)); transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease } /* 悬浮位移/阴影/描边统一见上方「卡片悬浮」合并规则 */ .p-gcard:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } .p-gcard i{ display:block; width:calc(30px * var(--k)); height:calc(3px * var(--k)); background:#D78A36; border-radius:calc(2px * var(--k)) } .p-gn{ display:block; font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(22px * var(--k)); line-height:1.3; letter-spacing:calc(-0.3px * var(--k)); color:#122E4F; margin:calc(16px * var(--k)) 0 0 } .p-gc{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(9px * var(--k)) 0 0 } .p-gd{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(12px * var(--k)) 0 0; height:calc(42px * var(--k)); overflow:hidden } .p-ggo{ display:block; margin-top:calc(16px * var(--k)); font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#1D5188 } .p-gcard:hover .p-ggo{ color:#D78A36 } .p-gcard.on{ border-color:#1D5188; box-shadow:inset 0 0 0 calc(1px * var(--k)) #1D5188 } /* ── ★ 列表计数 + 翻页器 ── */ .p-cnt{ font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(14px * var(--k)) 0 0 } .p-cnt b{ color:#122E4F } .p-pager{ display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k)); flex-wrap:wrap; margin:calc(38px * var(--k)) 0 0; padding:calc(24px * var(--k)) 0 0; border-top:calc(1px * var(--k)) solid #DDE5EF } .p-pager[hidden]{ display:none } .p-pg{ display:inline-flex; align-items:center; justify-content:center; min-width:calc(38px * var(--k)); height:calc(38px * var(--k)); padding:0 calc(12px * var(--k)); box-sizing:border-box; text-decoration:none; font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(6px * var(--k)); transition:border-color .2s ease,background .2s ease,color .2s ease } .p-pg:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE; color:#1D5188 } .p-pg.on{ background:#1D5188; border-color:#1D5188; color:#FFFFFF } .p-pg.off{ color:#5B6B7F; background:#F8FBFE; border-color:#DDE5EF; cursor:default } .p-pg.off:hover{ border-color:#DDE5EF; background:#F8FBFE; color:#5B6B7F } /* ★ 计数独占一行并居中 —— 与按钮同排会让「居中」在视觉上偏心（右侧多一截文字） */ .p-pg-i{ flex:0 0 100%; width:100%; text-align:center; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(10px * var(--k)) 0 0 } .p-pg-gap{ color:#5B6B7F; padding:0 calc(2px * var(--k)) } /* ── ★ 相册轮播 ── */ .p-hdrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:calc(24px * var(--k)); flex-wrap:wrap } .p-car{ margin:calc(30px * var(--k)) 0 0; position:relative } .p-car-vp{ overflow:hidden; padding:calc(8px * var(--k)) 0 calc(14px * var(--k)) } .p-car-tr{ display:flex; gap:calc(21.95px * var(--k)); transition:transform .58s cubic-bezier(.22,.61,.36,1) } .p-car-c{ flex:0 0 auto; width:calc((100% - 5 * 21.95px * var(--k)) / 6); box-sizing:border-box; display:flex; flex-direction:column; text-decoration:none; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(10px * var(--k)); overflow:hidden; box-shadow:0 calc(1px * var(--k)) calc(5px * var(--k)) rgba(18,46,79,.05); transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease } /* 悬浮位移/阴影/描边统一见上方「卡片悬浮」合并规则（图片放大留在下面单独一条） */ .p-car-c:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } .p-car-f{ display:block; aspect-ratio:1 / 1; background:#FFFFFF; overflow:hidden; border-bottom:calc(1px * var(--k)) solid #DDE5EF } .p-car-f img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:calc(10px * var(--k)); transition:transform .5s cubic-bezier(.22,.61,.36,1) } .p-car-c:hover .p-car-f img{ transform:scale(1.055) } .p-car-b{ display:block; padding:calc(12px * var(--k)) calc(13px * var(--k)) calc(14px * var(--k)) } .p-car-oe{ display:block; font-size:calc(13px * var(--k)); line-height:1.5; color:#5B6B7F } .p-car-nm{ display:block; font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F; margin:calc(4px * var(--k)) 0 0; height:calc(42px * var(--k)); overflow:hidden } .p-car-ctl{ display:flex; align-items:center; gap:calc(10px * var(--k)) } .p-car-btn{ display:inline-flex; align-items:center; justify-content:center; width:calc(42px * var(--k)); height:calc(42px * var(--k)); box-sizing:border-box; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(6px * var(--k)); cursor:pointer; padding:0; font-size:calc(16px * var(--k)); line-height:1.5; color:#1D5188; transition:border-color .2s ease,background .2s ease,color .2s ease } .p-car-btn:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE } .p-car-btn:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } .p-car-dots{ display:flex; align-items:center; gap:calc(8px * var(--k)); margin:calc(18px * var(--k)) 0 0 } .p-car-dot{ width:calc(9px * var(--k)); height:calc(9px * var(--k)); box-sizing:border-box; border-radius:calc(999px * var(--k)); border:calc(1px * var(--k)) solid #DDE5EF; background:#FFFFFF; padding:0; cursor:pointer; transition:background .2s ease,width .2s ease } .p-car-dot.on{ background:#1D5188; border-color:#1D5188; width:calc(24px * var(--k)) } /* ── ★ 返回上一步 ── */ .p-backwrap{ position:fixed; left:calc(28px * var(--k)); bottom:calc(28px * var(--k)); z-index:60; display:flex; align-items:center; gap:calc(10px * var(--k)); opacity:0; visibility:hidden; transform:translateY(calc(10px * var(--k))); transition:opacity .25s ease,transform .25s ease,visibility .25s ease } .p-backwrap.on{ opacity:1; visibility:visible; transform:translateY(0) } .p-back{ display:inline-flex; align-items:center; gap:calc(9px * var(--k)); text-decoration:none; font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#FFFFFF; background:#122E4F; border-radius:calc(999px * var(--k)); padding:calc(12px * var(--k)) calc(20px * var(--k)); box-shadow:0 calc(8px * var(--k)) calc(22px * var(--k)) rgba(18,46,79,.28); transition:background .2s ease } .p-back:hover{ background:#1D5188 } .p-back:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } .p-back i{ font-style:normal; font-size:calc(16px * var(--k)); line-height:1.5 } /* ── ★ 回到顶部：独立成右下角圆钮（与「返回上一步」拆开）── 理由：← 是后退（左向语义），↑ Top 是回到页顶（作用于整页）——语义不同、不该并排； 且回顶按钮的全站惯例位置就是右下（滚动条在右、视线回扫落点）。 */ .p-topwrap{ position:fixed; right:calc(28px * var(--k)); bottom:calc(28px * var(--k)); z-index:60; opacity:0; visibility:hidden; transform:translateY(calc(10px * var(--k))); transition:opacity .25s ease,transform .25s ease,visibility .25s ease } .p-topwrap.on{ opacity:1; visibility:visible; transform:translateY(0) } .p-top{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; width:calc(52px * var(--k)); height:calc(52px * var(--k)); border-radius:50%; font-size:calc(18px * var(--k)); line-height:1.5; color:#122E4F; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; box-shadow:0 calc(8px * var(--k)) calc(22px * var(--k)) rgba(18,46,79,.18); transition:background .2s ease,color .2s ease,border-color .2s ease } .p-top:hover{ background:#F8FBFE; color:#1D5188; border-color:rgba(29,81,136,.40) } .p-top:focus-visible{ outline:calc(2px * var(--k)) solid #1D5188; outline-offset:calc(2px * var(--k)) } /* ── 下拉（索引） ── */ .p-selrow{ display:flex; align-items:flex-end; gap:calc(16px * var(--k)); margin:calc(28px * var(--k)) 0 0; flex-wrap:wrap } .p-sel{ position:relative; width:calc(420px * var(--k)); max-width:100% } .p-sel>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:calc(10px * var(--k)); background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(8px * var(--k)); padding:calc(12px * var(--k)) calc(16px * var(--k)); transition:border-color .2s ease,box-shadow .2s ease } .p-sel>summary::-webkit-details-marker{ display:none } .p-sel>summary:hover{ border-color:rgba(29,81,136,.40) } .p-sel[open]>summary{ border-color:#1D5188; box-shadow:0 calc(4px * var(--k)) calc(14px * var(--k)) rgba(18,46,79,.08) } .p-sel-lab{ font-size:calc(13px * var(--k)); line-height:1.5; color:#5B6B7F } .p-sel-val{ font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F; margin-left:calc(8px * var(--k)) } .p-sel-arw{ margin-left:auto; width:calc(8px * var(--k)); height:calc(8px * var(--k)); border-right:calc(2px * var(--k)) solid #1D5188; border-bottom:calc(2px * var(--k)) solid #1D5188; transform:rotate(45deg) translate(calc(-1px * var(--k)),calc(-1px * var(--k))); transition:transform .22s ease } .p-sel[open] .p-sel-arw{ transform:rotate(-135deg) translate(calc(-2px * var(--k)),calc(-2px * var(--k))) } .p-sel-panel{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + calc(6px * var(--k))); background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(8px * var(--k)); box-shadow:0 calc(16px * var(--k)) calc(38px * var(--k)) rgba(18,46,79,.18); padding:calc(6px * var(--k)); margin:0; list-style:none; max-height:calc(340px * var(--k)); overflow-y:auto; overscroll-behavior:contain } .p-sel-panel a{ display:flex; align-items:center; gap:calc(10px * var(--k)); padding:calc(12px * var(--k)) calc(14px * var(--k)); text-decoration:none; color:#122E4F; font-size:calc(14px * var(--k)); line-height:1.5; border-radius:calc(6px * var(--k)) } .p-sel-panel a:hover{ background:#F2F6FB; color:#1D5188 } .p-sel-panel a em{ margin-left:auto; font-style:normal; color:#5B6B7F; font-size:calc(13px * var(--k)) } .p-sel-panel a.on{ color:#1D5188; font-weight:700 } .p-sel-panel a.on em{ color:#1D5188 } .p-sel-hint{ font-size:calc(13px * var(--k)); line-height:1.5; color:#5B6B7F; margin:0 0 calc(10px * var(--k)) } /* ── 按钮 ── */ .p-btn{ display:inline-flex; align-items:center; justify-content:center; gap:calc(8px * var(--k)); text-decoration:none; font-weight:700; font-size:calc(14px * var(--k)); line-height:1.5; border-radius:calc(6px * var(--k)); padding:calc(14px * var(--k)) calc(22px * var(--k)); border:calc(1px * var(--k)) solid transparent; transition:background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease } .p-btn-solid{ background:#1D5188; color:#FFFFFF } .p-btn-solid:hover{ background:#1D5188; filter:brightness(.93) } .p-btn-ghost{ background:#FFFFFF; color:#1D5188; border-color:#DDE5EF } .p-btn-ghost:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE } .p-btn-w{ background:#FFFFFF; color:#1D5188 } .p-btn-w:hover{ background:#F2F6FB } .p-btns{ display:flex; gap:calc(12px * var(--k)); flex-wrap:wrap; margin:calc(26px * var(--k)) 0 0 } .p-more{ margin:calc(34px * var(--k)) 0 0 } /* ── 步骤带 ── */ .p-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(21.95px * var(--k)); margin:calc(34px * var(--k)) 0 0 } .p-step{ display:flex; flex-direction:column; padding:calc(22px * var(--k)) 0 0; border-top:calc(2px * var(--k)) solid #DDE5EF } .p-step>.p-more{ margin-top:auto } .p-stepn{ display:block; font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(22px * var(--k)); line-height:1.3; color:#D78A36 } .p-stept{ display:block; font-weight:700; font-size:calc(16px * var(--k)); line-height:1.5; color:#122E4F; margin:calc(10px * var(--k)) 0 0 } .p-stepd{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(8px * var(--k)) 0 0 } .p-note{ font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(26px * var(--k)) 0 0; max-width:calc(900px * var(--k)) } /* ── 内页：产品主体 ── */ .p-prod{ display:grid; grid-template-columns:calc(560px * var(--k)) minmax(0,1fr); gap:calc(44px * var(--k)); align-items:start; margin:calc(0px) 0 0 } .p-shot{ background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(12px * var(--k)); aspect-ratio:4 / 3; overflow:hidden; position:relative } .p-shot img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:calc(28px * var(--k)) } .p-kv{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:calc(1px * var(--k)) solid #DDE5EF; margin:calc(22px * var(--k)) 0 0 } .p-kvr{ display:grid; grid-template-columns:calc(200px * var(--k)) minmax(0,1fr); gap:calc(18px * var(--k)); padding:calc(15px * var(--k)) 0; border-bottom:calc(1px * var(--k)) solid #DDE5EF } .p-kvk{ font-size:calc(13px * var(--k)); line-height:1.5; color:#5B6B7F; text-transform:uppercase; letter-spacing:calc(.9px * var(--k)); font-weight:700 } .p-kvv{ font-size:calc(16px * var(--k)); line-height:1.5; color:#122E4F; overflow-wrap:anywhere; word-break:break-word } .p-kvv-b{ color:#1D5188 } .p-kvv-m{ font-family:'Arial Black',Arial,sans-serif; font-weight:900 } .p-blurb{ font-size:calc(16px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(18px * var(--k)) 0 0; max-width:calc(880px * var(--k)) } .p-eye-lg{ font-weight:700; font-size:calc(13px * var(--k)); letter-spacing:calc(1.4px * var(--k)); line-height:1.5; text-transform:uppercase; color:#D78A36; margin:0 0 calc(14px * var(--k)) } .p-twocol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(48px * var(--k)); margin:calc(34px * var(--k)) 0 0 } .p-tbl{ border-top:calc(1px * var(--k)) solid #DDE5EF } .p-tblr{ display:grid; grid-template-columns:calc(190px * var(--k)) minmax(0,1fr); gap:calc(18px * var(--k)); padding:calc(14px * var(--k)) 0; border-bottom:calc(1px * var(--k)) solid #DDE5EF } .p-tblk{ font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F } .p-tblv{ font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F } .p-tblt{ font-weight:900; font-family:'Arial Black',Arial,sans-serif; font-size:calc(22px * var(--k)); line-height:1.3; color:#122E4F; margin:0 0 calc(16px * var(--k)) } .p-cats{ display:flex; gap:calc(8px * var(--k)); flex-wrap:wrap; margin:calc(26px * var(--k)) 0 0 } .p-cat{ display:inline-flex; align-items:center; gap:calc(8px * var(--k)); text-decoration:none; font-size:calc(13px * var(--k)); font-weight:700; color:#1D5188; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(999px * var(--k)); padding:calc(9px * var(--k)) calc(16px * var(--k)); transition:all .2s ease } .p-cat:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE } .p-cat.on{ background:#1D5188; color:#FFFFFF; border-color:#1D5188 } .p-cat em{ font-style:normal; font-weight:400; opacity:.72 } .p-srch{ font-size:calc(14px * var(--k)); line-height:1.5; color:#122E4F; margin:calc(18px * var(--k)) 0 0 } .p-srch b{ color:#1D5188 } /* ── 目录页：卷册卡（与类目卡同一语法 ⇒ 版式一致） ── */ .p-vol{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(21.95px * var(--k)); margin:calc(34px * var(--k)) 0 0 } .p-vol-c{ display:flex; flex-direction:column; background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(10px * var(--k)); padding:calc(24px * var(--k)) calc(22px * var(--k)) calc(22px * var(--k)); transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease } /* 悬浮位移/阴影/描边统一见上方「卡片悬浮」合并规则 */ .p-vol-n{ display:block; font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:calc(22px * var(--k)); line-height:1.3; color:#D78A36 } .p-vol-t{ display:block; font-weight:700; font-size:calc(22px * var(--k)); line-height:1.3; letter-spacing:calc(-0.3px * var(--k)); color:#122E4F; margin:calc(10px * var(--k)) 0 0 } .p-vol-d{ display:block; font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(8px * var(--k)) 0 0 } .p-vol-c .p-tbl{ margin-top:calc(14px * var(--k)) } .p-vol-c .p-more{ margin-top:auto; padding-top:calc(16px * var(--k)) } /* ── 手机端（#m 内） ── 字号一律 ∈ {23,20,17,15,14,13} */ #m .msec{ padding:38px 18px 46px } #m .msec-deep{ padding:36px 18px 42px } #m .mp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px } #m .mp-grid[hidden]{ display:none } #m .mp-card{ display:flex; flex-direction:column; text-decoration:none; background:#fff; border:1px solid #DDE5EF; border-radius:10px; overflow:hidden } #m .mp-fig{ display:block; position:relative; aspect-ratio:1 / 1; background:#FFFFFF; overflow:hidden; border-bottom:1px solid #DDE5EF } #m .mp-fig img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:8px } #m .mp-bd{ display:block; padding:11px 11px 12px } #m .mp-oe{ display:block; font-size:14px; line-height:1.5; color:#5B6B7F } #m .mp-nm{ display:block; font-weight:700; font-size:17px; line-height:1.3; color:#122E4F; margin-top:5px } #m .mp-go{ display:block; margin-top:8px; font-weight:700; font-size:14px; line-height:1.5; color:#1D5188 } #m .mp-chip{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:14px; font-weight:700; color:#1D5188; background:#fff; border:1px solid #DDE5EF; border-radius:999px; padding:8px 13px; margin:0 6px 8px 0 } #m .mp-chip.on{ background:#1D5188; color:#fff; border-color:#1D5188 } #m .mp-sel{ width:100%; box-sizing:border-box; margin-top:14px; padding:13px 14px; font:700 14px Arial; color:#122E4F; background:#fff; border:1px solid #DDE5EF; border-radius:8px; appearance:none; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZD0iTTEgMS41TDYgNi41TDExIDEuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUQ1MTg4IiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4="); background-repeat:no-repeat; background-position:right 13px center } #m .mp-gcard{ display:block; text-decoration:none; background:#fff; border:1px solid #DDE5EF; border-radius:10px; padding:16px; margin-top:10px } #m .mp-gcard i{ display:block; width:26px; height:3px; background:#D78A36; border-radius:2px } #m .mp-gn{ display:block; font-weight:900; font-size:17px; line-height:1.3; color:#122E4F; margin-top:12px } #m .mp-gc{ display:block; font-size:14px; line-height:1.5; color:#5B6B7F; margin-top:6px } /* ★ r315d 手机端品名：与桌面同构 —— 品名挂在「分类之下」，不另设一处。 · 浏览态：分类卡点开，品名行式列表就在该卡下面（.mp-sub） · 分类态：品名行式列表贴在列表标题下方（#mnmList） 色值只用白名单；字号 ∈ {13,14,15} */ #m button.mp-gcard{ width:100%; box-sizing:border-box; text-align:left; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; position:relative } #m .mp-ga{ position:absolute; right:17px; top:50%; width:9px; height:9px; margin-top:-6px; border-right:2px solid #1D5188; border-bottom:2px solid #1D5188; transform:rotate(45deg); transition:transform .2s ease } #m .mp-gcard[aria-expanded="true"] .mp-ga{ transform:rotate(-135deg); margin-top:-2px } #m .mp-sub[hidden]{ display:none } #m .mp-sub{ margin-top:10px } #m .mp-nmlab{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B6B7F; margin-top:16px } #m .mp-nmlab[hidden]{ display:none } #m .mp-nmlist{ max-height:320px; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-top:6px } #m .mp-nmlist[hidden]{ display:none } #m .mp-nmi{ display:flex; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid #F2F6FB; text-decoration:none; font-size:15px; line-height:1.5; color:#122E4F } #m .mp-nmi:last-child{ border-bottom:0 } #m .mp-nmi span{ flex:1 1 auto } #m .mp-nmi em{ flex:0 0 auto; font-style:normal; font-size:14px; color:#5B6B7F } #m .mp-nmi-all span{ font-weight:700 } #m .mp-nmi.on, #m .mp-nmi.on span, #m .mp-nmi.on em{ color:#1D5188; font-weight:700 } #m .mp-shot{ background:#FFFFFF; border:1px solid #DDE5EF; border-radius:12px; aspect-ratio:4 / 3; overflow:hidden; margin-top:16px } #m .mp-shot img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:18px } #m .mp-kv{ margin-top:16px; border-top:1px solid #DDE5EF } #m .mp-kvr{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #DDE5EF } #m .mp-kvk{ flex:0 0 96px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B6B7F; line-height:1.5 } #m .mp-kvv{ flex:1 1 auto; font-size:14px; line-height:1.5; color:#122E4F; overflow-wrap:anywhere; word-break:break-word } #m .mp-kvv-b{ color:#1D5188 } /* ★ 翻页器：手机端沿用同一套类名（.p-pager/.p-pg），只覆盖尺寸 —— 手机版 --k ≈ 0.203 ⇒ calc(Npx * var(--k)) 会算成亚像素，必须写死 px。 注意 #m .p-pg 带 id ⇒ 优先级高于 .p-pg.on/.off，故 on/off 态须显式重述。 */ #m .p-pager{ gap:8px; margin-top:24px; padding-top:20px; border-top-width:1px } #m .p-pager[hidden]{ display:none } #m .p-pg{ min-width:40px; height:40px; padding:0 12px; font-size:14px; border-width:1px; border-radius:6px } #m .p-pg.on{ background:#1D5188; border-color:#1D5188; color:#FFFFFF } #m .p-pg.off{ color:#5B6B7F; background:#F8FBFE; border-color:#DDE5EF } #m .p-pg-i{ font-size:13px; margin-top:10px } #m .p-pg-gap{ padding:0 2px } #m .mp-car{ margin-top:14px } #m .mp-car-vp{ overflow:hidden; padding-bottom:10px } #m .mp-car-tr{ display:flex; gap:10px; transition:transform .58s cubic-bezier(.22,.61,.36,1) } #m .mp-car-c{ flex:0 0 auto; width:calc((100% - 10px) / 2); box-sizing:border-box; display:flex; flex-direction:column; text-decoration:none; background:#fff; border:1px solid #DDE5EF; border-radius:10px; overflow:hidden } #m .mp-car-f{ display:block; aspect-ratio:1 / 1; background:#FFFFFF; overflow:hidden; border-bottom:1px solid #DDE5EF } #m .mp-car-f img{ display:block; width:100%; height:100%; object-fit:contain; box-sizing:border-box; padding:8px } #m .mp-car-b{ display:block; padding:10px 11px 12px } #m .mp-car-oe{ display:block; font-size:13px; line-height:1.5; color:#5B6B7F } #m .mp-car-nm{ display:block; font-weight:700; font-size:14px; line-height:1.5; color:#122E4F; margin-top:4px; height:42px; overflow:hidden } #m .mp-car-ctl{ display:flex; align-items:center; gap:10px; margin-top:12px } #m .mp-car-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; background:#fff; border:1px solid #DDE5EF; border-radius:6px; padding:0; cursor:pointer; font-size:16px; color:#1D5188 } #m .mp-car-btn:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE } #m .mp-car-dots{ display:flex; align-items:center; gap:8px } #m .mp-car-dot{ width:9px; height:9px; box-sizing:border-box; border-radius:999px; border:1px solid #DDE5EF; background:#fff; padding:0; cursor:pointer } #m .mp-car-dot.on{ background:#1D5188; border-color:#1D5188; width:24px } #m .msec[hidden]{ display:none } /* ★ r25：桌面 SVG 页脚的 ISO 徽章悬停 —— 与上面 30 页的 HTML .ft-iso 同口径。 那 30 页的页脚是