/* ========================================================================
   VIRE 海外 B2B 独立站 · 样式：前台站点 (front.css)
   ------------------------------------------------------------------------
   Hero 轮播、公司介绍、合作伙伴、五分类、产品卡、详情页五段、Downloads、News 列表与详情、工厂实力、SOP 条、页脚。
   来源：《VIRE_前后台打通Demo.html》样式层按内容锚点切分，规则零改写。
   ======================================================================== */

.kpi .v{font-size:22px;font-weight:800;} .kpi .l{font-size:11.5px;color:var(--muted);margin-top:2px;}
  .fwrap{max-width:1280px;margin:0 auto;background:#fff;min-height:calc(100vh - 90px);border:1px solid var(--line);border-top:none;}
  /* v1.10.15：页头整体放大一档（尺寸走 tokens.css 的 --hd-* 令牌） */
  header.top{position:sticky;top:41px;z-index:50;background:#fff;display:flex;align-items:center;gap:var(--hd-gap);padding:var(--hd-pady) 36px;border-bottom:2px solid var(--ink);}
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:var(--hd-brand);cursor:pointer;letter-spacing:.04em;}
  .logo .mark{width:36px;height:36px;background:linear-gradient(135deg,#123f8c,#0b5fff);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
  /* ⚠ 必须 !important：brand.js 渲染 Logo 时写了内联 height:32px（该文件内嵌 base64，
     改它等于整包多传 140KB），这里用 !important 盖掉内联值，让四个断点统一走 --hd-logo */
  .logo img{height:var(--hd-logo) !important;width:auto;display:block;}
  .logo .brandtext{font-weight:800;font-size:var(--hd-brand);letter-spacing:.06em;color:var(--ink);}
  aside.adm .admBrand{display:flex;align-items:center;gap:9px;padding:6px 10px 14px;border-bottom:1px solid #26303f;margin-bottom:12px;}
  aside.adm .admBrand img{height:26px;width:auto;display:block;background:#fff;padding:4px;border-radius:7px;box-sizing:content-box;}
  aside.adm .admBrand .brandtext{font-weight:800;font-size:15px;letter-spacing:.05em;color:#fff;}
  .footlogo{display:inline-flex;align-items:center;gap:9px;background:#fff;padding:7px 12px;border-radius:9px;}
  .footlogo img{height:26px;width:auto;display:block;}
  /* line-height 固定 1.2：否则某些语言的行盒会把导航撑到 44px，表头比令牌高 2px（H5 抽屉对不齐） */
  nav.main{display:flex;gap:var(--hd-gap);font-size:var(--hd-nav);line-height:1.2;font-weight:600;color:var(--ink2);flex:1;flex-wrap:wrap;align-items:center;}
  nav.main a{padding:9px 2px;border-bottom:2px solid transparent;cursor:pointer;letter-spacing:.01em;}
  nav.main a.on{color:var(--accent);border-bottom-color:var(--accent);}
  nav.main .dd{position:relative;}
  nav.main .dd .menu{display:none;position:absolute;top:calc(100% + 10px);left:-12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 16px 42px rgba(16,24,40,.16);min-width:270px;padding:6px;z-index:60;}
  /* v1.6：不再用 :hover 直接显示（鼠标移动稍慢就会缩回），改由 JS 控制 .open；
     面板顶部叠 14px 透明桥接层，物理上填满标题与面板之间的空隙 */
  nav.main .dd .menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
  nav.main .dd.open .menu{display:block;}
  nav.main .dd .menu > a{display:block;padding:8px 12px;border-radius:7px;font-size:14px;border:none;text-decoration:none;color:var(--ink2);}
  nav.main .dd .menu > a:hover{background:var(--accent-soft);color:var(--accent);}
  nav.main .dd .menu > a small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;}
  nav.main .dd .ddtrig .cv{font-style:normal;font-size:10.5px;opacity:.55;margin-left:4px;display:inline-block;transition:transform .18s;}
  nav.main .dd.open .ddtrig .cv{transform:rotate(180deg);}
  .langpill{font-size:var(--hd-pill);font-weight:700;color:var(--ink2);border:1.5px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap;}
  /* 语言切换下拉 */
  .langwrap{position:relative;}
  .langmenu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.16);min-width:262px;padding:7px;z-index:80;display:none;}
  .langmenu.on{display:block;}
  .langmenu .lh{padding:6px 10px 5px;font-size:10.5px;color:var(--muted);font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
  .langitem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink2);}
  .langitem:hover{background:var(--bg);}
  .langitem.on{background:var(--accent-soft);color:var(--accent);font-weight:800;}
  .langitem .st{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--green-soft);color:var(--green);white-space:nowrap;}
  .langitem .st.off{background:#f0f2f6;color:var(--muted);}
  .langmenu .lf{border-top:1px dashed var(--line);margin-top:6px;padding:8px 10px 5px;font-size:11px;color:var(--muted);line-height:1.6;}
  .basket-pill{cursor:pointer;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:6px;font-size:14.5px;}
  .basket-pill .cnt{background:var(--accent);color:#fff;border-radius:99px;font-size:10.5px;padding:1px 7px;}
  .hero{position:relative;height:400px;overflow:hidden;}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:flex;align-items:center;padding:0 36px;}
  .slide.on{opacity:1;}
  .slide .txt{flex:1.05;color:#fff;max-width:640px;}
  .slide .k{font-size:11px;font-weight:800;letter-spacing:.18em;opacity:.9;margin-bottom:12px;}
  .slide h1{font-size:34px;line-height:1.2;letter-spacing:-.5px;font-weight:800;margin-bottom:12px;}
  .slide p{font-size:14.5px;opacity:.92;margin-bottom:22px;}
  .slide .art{flex:.75;display:flex;justify-content:center;}
  .slide .art .pcb{width:190px;height:130px;border-radius:12px;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.28);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);}
  .slide .art .pcb::after{content:"";position:absolute;inset:12px;border-radius:8px;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.14) 9px 10px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.14) 9px 10px);}
  .slide .art .pcb b{position:absolute;right:10px;bottom:8px;font-size:10px;font-family:monospace;color:#fff;opacity:.85;z-index:2;}
  .dots{position:absolute;bottom:18px;left:36px;display:flex;gap:7px;z-index:5;}
  .dots i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.42);cursor:pointer;}
  .dots i.on{background:#fff;width:34px;}
  .hero-badges{position:absolute;top:16px;right:36px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:420px;z-index:5;}
  .hero-badges span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:11px;font-weight:700;padding:3px 11px;border-radius:99px;}
  section{padding:36px;border-bottom:1px solid var(--line);}
  .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
  h2{font-size:21px;letter-spacing:-.3px;} .kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:5px;}
  .zhd{color:var(--muted);font-size:12.5px;margin-top:3px;}
  .co{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;}
  .fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;}
  .fact{background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:16px;}
  .fact b{font-size:24px;color:var(--accent);display:block;letter-spacing:-.5px;}
  .fact span{font-size:11.5px;color:var(--muted);}
  .partners{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .plogo{border:1.5px solid var(--line);border-radius:8px;padding:9px 18px;font-weight:800;color:#a3aebd;font-size:12.5px;letter-spacing:.05em;}
  .cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
  .cat{border:1.5px solid var(--line);border-radius:12px;padding:16px;background:#fff;cursor:pointer;display:flex;flex-direction:column;transition:.15s;}
  .cat:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(16,24,40,.07);transform:translateY(-2px);}
  .cat .ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:11px;}
  /* v1.10.23：图标位为产品实拍图时 —— 铺满裁切，无留白 */
  .cat .ico.img{background:#fff;border:1px solid var(--line);overflow:hidden;padding:0;}
  .cat .ico.img img{width:100%;height:100%;object-fit:cover;display:block;}
  .cat h4{font-size:13.5px;line-height:1.35;} .cat p{font-size:11.5px;color:var(--muted);margin-top:5px;flex:1;} .cat .n{font-size:11px;color:var(--accent);font-weight:800;margin-top:10px;}
  .pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;}
  .pcard{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;cursor:pointer;transition:.15s;}
  .pcard:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(16,24,40,.07);}
  .pimg{height:118px;background:linear-gradient(135deg,#e8eef7,#dbe4f0);position:relative;display:flex;align-items:center;justify-content:center;}
  .pcb{width:78px;height:58px;border-radius:8px;position:relative;box-shadow:0 6px 14px rgba(20,60,50,.22);}
  .pcb::after{content:"";position:absolute;inset:6px;border-radius:4px;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.16) 6px 7px),repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.16) 6px 7px);}
  .pcb.g{background:linear-gradient(135deg,#14523f,#0e6e4e);} .pcb.p{background:linear-gradient(135deg,#3a1a52,#6b4de6);}
  .pcb.o{background:linear-gradient(135deg,#4a3410,#c77700);} .pcb.t{background:linear-gradient(135deg,#0e2a3a,#0f9b8e);}
  .pcb.b{background:linear-gradient(135deg,#123a7a,#0b5fff);}
  .pimg .tag-ic{position:absolute;top:8px;left:8px;background:#fff;color:var(--green);font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;border:1px solid #cfe8db;}
  .pimg .tag-ic.ti{color:var(--accent);border-color:#d4e2ff;}
  .pimg .tag-ic.new{color:var(--amber);border-color:#f0dcbe;}
  .pimg .tag-off{position:absolute;inset:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);font-size:12px;}
  .pbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1;}
  .pbody .model{font-size:13px;font-weight:800;line-height:1.35;}
  .pbody .rated{font-size:11.5px;color:var(--green);font-weight:700;}
  .pbody .meta{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 9px;}
  .pbody .row{display:flex;gap:7px;margin-top:auto;padding-top:7px;}
  .mini{flex:1;text-align:center;border:1.5px solid var(--line);border-radius:7px;padding:5px 0;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer;background:#fff;}
  .mini:hover{border-color:var(--accent);color:var(--accent);}
  .mini.pri{background:var(--accent);border-color:var(--accent);color:#fff;}
  .spec-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
  .spec-t th,.spec-t td{border:1.5px solid var(--line);padding:8px 13px;text-align:left;}
  .spec-t th{background:var(--bg);width:230px;font-weight:700;color:var(--ink2);}
  .d-hero{display:grid;grid-template-columns:430px 1fr;gap:28px;padding:24px 36px 0;}
  .media-main{height:330px;border:1.5px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#e8eef7,#dbe4f0);display:flex;align-items:center;justify-content:center;}
  .media-main .pcb{width:150px;height:110px;border-radius:12px;}
  .thumbs{display:flex;gap:8px;margin-top:10px;}
  .thumbs .th{width:78px;height:58px;border:2px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#eef3fa;}
  .thumbs .th.on{border-color:var(--accent);}
  .thumbs .th .pcb{width:48px;height:34px;}
  .dtitle{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.3;}
  .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0;}
  .quick .q{border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;}
  .quick .q .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
  .quick .q .v{font-size:13px;font-weight:800;margin-top:2px;}
  .cta-row{display:flex;gap:9px;margin:14px 0;flex-wrap:wrap;}
  .dsec{padding:28px 36px;border-top:1px solid var(--line);}
  .dsec h3{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
  .dsec h3 .no{font-size:12px;letter-spacing:.1em;color:var(--accent);font-weight:800;}
  .reddot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 0 3px rgba(192,57,43,.14);}
  .video-ph{position:relative;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);background:#0f1722;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .video-ph .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:20px;}
  .demo-list{list-style:none;padding:0;font-size:13px;}
  .demo-list li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:9px;color:var(--ink2);}
  .demo-list li::before{content:"▶";color:var(--accent);font-size:9px;margin-top:5px;}
  .steps{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:22px;}
  .step{position:relative;padding-right:12px;}
  .step .num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;z-index:2;}
  .step:not(:last-child)::before{content:"";position:absolute;top:16px;left:40px;right:-4px;height:2px;background:var(--line);}
  .step h4{font-size:12.5px;line-height:1.35;} .step p{font-size:11px;color:var(--muted);margin-top:3px;}
  .step .cyc{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:800;color:var(--amber);background:var(--amber-soft);border-radius:5px;padding:2px 7px;}
  .fac{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
  .fac-main{position:relative;border-radius:12px;overflow:hidden;background:#0f1722;min-height:250px;display:flex;align-items:flex-end;cursor:pointer;}
  .fac-main .lbl{position:relative;z-index:2;color:#fff;padding:18px 20px;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.74));}
  .fac-sub{display:grid;grid-template-rows:repeat(3,1fr);gap:10px;}
  .fac-item{border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;background:var(--bg);display:flex;align-items:center;gap:13px;}
  .fac-item .no{font-size:11px;font-weight:800;color:var(--accent);}
  .catrow{display:grid;grid-template-columns:1fr 110px 120px;gap:18px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px;background:#fff;cursor:pointer;}
  .catrow:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(16,24,40,.07);}
  .qa{border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff;}
  .qa .q{padding:14px 18px;font-weight:700;cursor:pointer;font-size:13.5px;display:flex;justify-content:space-between;}
  .qa .q::after{content:"+";color:var(--accent);font-size:18px;font-weight:400;}
  .qa.open .q::after{content:"−";}
  .qa .a{display:none;padding:0 18px 14px;font-size:13px;color:var(--ink2);}
  .qa.open .a{display:block;}
  .dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .dl-card{border:1.5px solid var(--line);border-radius:12px;padding:18px;background:#fff;}
  .dl-card h4{font-size:14px;margin:9px 0 4px;}
  .gate{display:flex;gap:7px;margin-top:9px;}
  /* 下载文件行（PDF + 软件版本） */
  .frow{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:9px;padding:7px 9px;background:#fff;margin-top:7px;}
  .frow:hover{border-color:var(--accent);}
  .fpdf{flex:0 0 auto;width:28px;height:28px;border-radius:6px;background:#fdecec;color:#d93025;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;}
  .ffw{flex:0 0 auto;width:28px;height:28px;border-radius:6px;background:#e7f6ed;color:#0f8a48;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;text-transform:uppercase;}
  .fmeta{flex:1;min-width:0;}
  .fmeta .fn{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fmeta .fs{font-size:10.5px;color:var(--muted);}
  .ver-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#0b5fff;background:#e8f0ff;border-radius:5px;padding:1px 6px;margin-left:6px;}
  .ver-in{width:104px;font-size:11.5px;padding:4px 7px;border:1.5px solid var(--line);border-radius:6px;font-family:inherit;}
  .fdel{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);background:#fff;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;}
  .fdel:hover{border-color:var(--red);color:var(--red);}
  .upbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed #b9cdf5;background:#f6f9ff;color:#0b5fff;font-weight:700;font-size:12px;padding:7px 12px;border-radius:9px;cursor:pointer;margin-top:7px;}
  .upbtn:hover{background:#eaf1ff;border-color:var(--accent);}
  /* 公司介绍视频 */
  .covid{position:relative;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:#000;}
  .covid video{display:block;width:100%;max-height:400px;object-fit:cover;background:#000;}
  .covid .vtag{position:absolute;top:12px;left:14px;background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:7px;pointer-events:none;}
  /* News 封面图 */
  .news-card .im{position:relative;}
  .news-card .im.imgcover{color:transparent;}
  .news-card .imtag{position:absolute;top:10px;left:12px;background:rgba(0,0,0,.58);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .news-card{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;}
  .news-card:hover{border-color:var(--accent);}
  .news-card .im{height:120px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13.5px;padding:0 16px;text-align:center;}
  .news-card .b{padding:14px 16px;}
  /* News 详情页（图片 + 文章列表） */
  .post-hero{position:relative;height:300px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:22px 24px;color:#fff;background-size:cover;background-position:center;background-color:#0c1220;}
  .post-hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,24,.10),rgba(6,12,24,.74));}
  .post-hero .ht{position:relative;z-index:2;max-width:760px;}
  .post-hero h1{font-size:25px;line-height:1.3;margin-top:8px;color:#fff;}
  .post-meta{display:flex;align-items:center;gap:9px;font-size:12px;flex-wrap:wrap;}
  .post-meta .tag{background:rgba(255,255,255,.2);color:#fff;}
  .post-lead{font-size:14.5px;color:var(--ink2);border-left:3px solid var(--accent);padding-left:13px;margin-top:18px;font-weight:600;line-height:1.75;}
  .post-body p{margin-top:13px;font-size:13.5px;line-height:1.85;color:var(--ink2);}
  .post-body ul{margin:10px 0 0 20px;} .post-body li{font-size:13.5px;line-height:1.8;margin-top:5px;color:var(--ink2);}
  .post-sec{font-size:14px;font-weight:800;margin-top:24px;padding-left:11px;border-left:3px solid var(--accent);line-height:1.2;}
  .post-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-top:13px;}
  .post-shot{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in;background:#fff;}
  .post-shot:hover{border-color:var(--accent);}
  .post-shot img{width:100%;height:142px;object-fit:cover;display:block;}
  .post-shot span{display:block;padding:7px 10px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .post-list{display:grid;gap:10px;margin-top:13px;}
  .post-li{display:grid;grid-template-columns:118px 1fr;gap:0;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;}
  .post-li:hover{border-color:var(--accent);}
  .post-li.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .post-li .th{min-height:82px;background-size:cover;background-position:center;background-color:#dfe6f2;}
  .post-li .bd{padding:11px 13px;}
  .post-li h4{font-size:13.5px;line-height:1.45;}
  .post-li .ex{font-size:11.5px;color:var(--muted);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  #imgViewer{position:fixed;inset:0;background:rgba(8,12,22,.88);display:none;align-items:center;justify-content:center;z-index:400;padding:30px;cursor:zoom-out;}
  #imgViewer.on{display:flex;}
  #imgViewer img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
  /* 后台图集缩略图 */
  .thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
  .thumb{position:relative;width:112px;}
  .thumb img{width:112px;height:76px;object-fit:cover;border-radius:8px;border:1.5px solid var(--line);}
  .thumb .fdel{position:absolute;top:-7px;right:-7px;width:20px;height:20px;font-size:12px;line-height:18px;}
  .thumb .tn{font-size:10.5px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* v1.10：页脚改淡蓝底、三列排版（去掉左侧品牌块） */
  .footer{background:#e9f3fc;color:#42536e;font-size:12.5px;padding:34px 40px 32px;display:grid;grid-template-columns:1fr 1fr 1.45fr;gap:26px 48px;border-top:1px solid #cfe2f3;}
  .footer b{color:#0b2a5b;font-size:13.5px;font-weight:800;letter-spacing:.02em;display:block;margin-bottom:4px;}
  .footer .frow-i{margin-top:6px;line-height:1.6;}
  .footer .frfq{color:#e0790a;font-weight:800;} .footer .frfq:hover{color:#b85f00;}
  .footer .badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
  .footer .badges span{border:1px solid #b9d3ec;border-radius:6px;font-size:10.5px;font-weight:700;padding:3px 9px;color:#42536e;}
  .wa-float{position:fixed;right:20px;bottom:20px;width:50px;height:50px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 8px 24px rgba(37,211,102,.4);cursor:pointer;z-index:90;}

/* ---------------- v1.3 真实产品照片 ---------------- */
.pimg-photo{display:block;width:100%;height:100%;object-fit:contain;background:#fff;}
.pcard .pimg .pimg-photo{position:absolute;inset:0;border-radius:0;}
.media-main .galwrap{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:#fff;}
.media-main .gal-photo{object-fit:contain;border-radius:14px;}
.thumbs .th .th-img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
.shot{border:1.5px solid var(--line);border-radius:12px;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#e8eef7,#dbe4f0);cursor:zoom-in;}
.shot img{width:100%;height:100%;object-fit:contain;background:#fff;}

/* ==========================================================================
   v1.6 前台改版
   ① 产品下拉：两级面板（一级分类 + 二级分类），悬停不再缩回
   ② Banner 支持真实图片（背景图 + 遮罩强度）
   ③ 详情页图库定高容器，主图不再压住缩略图
   ④ 面包屑 / 分类卡 / 页脚全部是真实链接
   ========================================================================== */

/* ---------------- ① 两级产品下拉面板（v1.11 级联式） ----------------
   一级：窄条分类列表；鼠标移到某个分类，右侧飞出该分类的二级菜单。
   ------------------------------------------------------------------ */
nav.main .dd .menu.menu-cat{padding:0;overflow:visible;min-width:272px;left:-14px;}
.ddhead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 14px;background:#f6f9fd;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-radius:11px 11px 0 0;}
.ddhead .ddall{color:var(--accent);font-size:12.5px;font-weight:800;text-decoration:none;letter-spacing:0;text-transform:none;white-space:nowrap;}
.ddlist{padding:5px;}
.ddrow{position:relative;}
.ddrow > .ddc{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:800;line-height:1.3;transition:background .13s,color .13s;}
.ddrow > .ddc:hover,
.ddrow.has-sub:hover > .ddc{background:var(--accent-soft);color:var(--accent);}
.ddc .ddcn{flex:1;min-width:0;}
.ddc b{flex:0 0 auto;font-size:10.5px;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:2px 8px;font-weight:800;}
.ddrow > .ddc:hover b{background:#fff;color:var(--accent);}
.cv2{font-style:normal;flex:0 0 auto;font-size:15px;line-height:1;color:var(--muted);opacity:.6;margin-left:1px;}
.ddrow.has-sub:hover .cv2{color:var(--accent);opacity:1;}
/* 二级飞出面板 */
.submenu{display:none;position:absolute;left:calc(100% + 6px);top:-6px;min-width:232px;max-width:310px;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 16px 42px rgba(16,24,40,.16);padding:6px;z-index:61;}
.submenu::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:9px;}
.ddrow.has-sub:hover > .submenu,
.ddrow.has-sub.open > .submenu{display:block;}
.submenu a{display:block;padding:9px 12px;border-radius:7px;font-size:13.5px;color:var(--ink2);text-decoration:none;font-weight:600;line-height:1.35;}
.submenu a:hover{background:var(--accent-soft);color:var(--accent);}
.submenu a.smtitle{font-weight:800;color:var(--ink);font-size:13px;border-bottom:1px solid var(--line);border-radius:0;padding:8px 11px 10px;margin-bottom:3px;}

/* ---------------- ② Hero 背景图 + 遮罩 ---------------- */
.hero .slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;}
.hero .slide .mask{position:absolute;inset:0;z-index:1;}
/* v1.10.8：遮罩整体调轻 —— 客户反馈 Banner 图上传后明显变暗（原 light 档左侧压到 58% 黑）。
   遮罩只为「白字可读」服务，图片本身不该被压暗；无文字时前台直接不加遮罩层。 */
.hero .slide .mask.m-none{display:none;}
/* v1.10.10：宽幅影院版遮罩 —— 只在左侧渐变压暗文字区，右侧渐隐到全透明，
   图右半边 100% 保留原亮度（不然又回到「上传后图变暗」的老问题） */
.hero .slide .mask.m-light{background:linear-gradient(90deg,rgba(4,10,22,.74) 0%,rgba(4,10,22,.56) 26%,rgba(4,10,22,.26) 48%,rgba(4,10,22,.04) 68%,rgba(4,10,22,0) 80%);}
.hero .slide .mask.m-mid{background:linear-gradient(90deg,rgba(4,10,22,.88) 0%,rgba(4,10,22,.72) 30%,rgba(4,10,22,.42) 58%,rgba(4,10,22,.12) 80%,rgba(4,10,22,0) 92%);}
.hero .slide .mask.m-strong{background:linear-gradient(90deg,rgba(4,10,22,.95) 0%,rgba(4,10,22,.86) 36%,rgba(4,10,22,.62) 66%,rgba(4,10,22,.28) 88%,rgba(4,10,22,.06) 100%);}
.hero .slide .txt,.hero .slide .art{position:relative;z-index:2;}

/* ---------------- ③ 详情页图库（定高 + 不溢出） ---------------- */
.media-main{position:relative;overflow:hidden;}
.media-main .galwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;box-sizing:border-box;overflow:hidden;border-radius:14px;background:#fff;}
.media-main .gal-photo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;cursor:zoom-in;}
.media-main .gal-vid{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:14px;z-index:2;}
.thumbs .th.th-vid{background:#0f1722;color:#fff;font-size:18px;border-color:#0f1722;}
.thumbs{flex-wrap:wrap;}

/* ---------------- ④ 面包屑 / 分类卡 / 二级分类 / 图集 ---------------- */
.crumb{padding:14px 36px 0;font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--accent);}
.crumb b{color:var(--ink);}
.crumb > span{opacity:.45;}
a.catrow{text-decoration:none;color:inherit;}
a.catrow:hover .btn{border-color:var(--accent);color:var(--accent);}
a.cat{text-decoration:none;color:inherit;}
.cat h4{color:var(--ink);}
.subchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.subchip{font-size:11px;padding:3px 9px;border:1px solid var(--line);border-radius:99px;color:var(--ink2);text-decoration:none;background:#f7f9fd;font-weight:600;cursor:pointer;display:inline-block;}
.subchip i{font-style:normal;color:var(--muted);margin-left:5px;font-size:10px;}
.subchip:hover{border-color:var(--accent);color:var(--accent);}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.fchip{font-size:12.5px;font-weight:700;padding:7px 14px;border:1.5px solid var(--line);border-radius:99px;color:var(--ink2);text-decoration:none;background:#fff;line-height:1.2;}
.fchip i{font-style:normal;color:var(--muted);font-size:11px;margin-left:5px;}
.fchip:hover{border-color:var(--accent);color:var(--accent);}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.fchip.on i{color:rgba(255,255,255,.82);}
.subgroup{margin-bottom:6px;}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.footer .fcol-link{margin-top:6px;}
.footer .fcol-link a{color:#4a5c78;text-decoration:none;}
.footer .fcol-link a:hover{color:#1E88C7;text-decoration:underline;}

/* ---------------- 窄屏适配 ---------------- */
@media(max-width:900px){
  nav.main .dd .menu.menu-cat{min-width:220px;max-width:min(320px,86vw);left:0;padding:0;}
  .ddhead{padding:9px 12px;}
  /* 窄屏 / 触屏：二级不再右侧飞出（会超出屏宽），改为在当前分类下方内嵌展开 */
  .submenu{position:static;display:none;left:auto;top:auto;margin:2px 6px 5px 10px;min-width:0;max-width:none;border:none;box-shadow:none;background:#f7faff;padding:4px;border-radius:9px;}
  .submenu::before{display:none;}
  .ddrow.has-sub:hover > .submenu{display:none;}
  .ddrow.has-sub.open > .submenu{display:block;}
  .cv2{transform:rotate(90deg);transition:transform .18s;}
  .ddrow.has-sub.open .cv2{transform:rotate(-90deg);}
  .crumb{padding:12px 16px 0;}
  .shots{grid-template-columns:repeat(2,1fr);}
  .footer{grid-template-columns:1fr 1fr;gap:22px 30px;padding:28px 24px;}
}
@media(max-width:640px){
  .hero .slide .bg{background-position:center;}
  /* v1.10.8：手机端同样调轻（原来 light 也压到 62–72% 黑，图片几乎看不出原样） */
  /* 手机端：文字压在图底部，改成上清下深的纵向渐变 */
  .hero .slide .mask.m-light{background:linear-gradient(180deg,rgba(4,10,22,.08) 0%,rgba(4,10,22,.26) 42%,rgba(4,10,22,.84) 100%);}
  .hero .slide .mask.m-mid{background:linear-gradient(180deg,rgba(4,10,22,.18) 0%,rgba(4,10,22,.46) 40%,rgba(4,10,22,.90) 100%);}
  .hero .slide .mask.m-strong{background:linear-gradient(180deg,rgba(4,10,22,.32) 0%,rgba(4,10,22,.62) 40%,rgba(4,10,22,.94) 100%);}
  .media-main{height:260px;}
  .crumb{padding:10px 15px 0;font-size:11.5px;}
  .fchip{font-size:12px;padding:6px 12px;}
  .footer{grid-template-columns:1fr;gap:20px;padding:26px 18px 24px;}
}

/* v1.10.17：FAQ 问/答直接展示式（后台「常见问题 FAQ」可编辑；旧 .qa 折叠样式保留兜底） */
.faq-item{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:16px 20px;margin-bottom:12px;}
.faq-item .fq{font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.5;}
.faq-item .fa{margin-top:8px;font-size:13.5px;color:var(--ink2);line-height:1.7;}
@media(max-width:640px){.faq-item{padding:13px 15px;}.faq-item .fq{font-size:14px;}.faq-item .fa{font-size:13px;}}

/* 无视频占位（不上传也不会出现打不开的黑色播放器） */
.novid{width:100%;aspect-ratio:16/9;border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#f7f9fd;color:var(--ink2);font-weight:800;font-size:13px;text-align:center;padding:16px;line-height:1.6;}
.novid span{font-weight:400;font-size:11.5px;color:var(--muted);}

/* ---------------- v1.10.16：前台图片/视频防下载 ----------------
   客户要求：前台产品图片与视频不允许下载 / 另存。JS 拦截见 app.js，
   这里负责样式层的三件事：
     · -webkit-touch-callout:none —— iPhone 长按不再弹「存储图像 / 拷贝」
     · user-select:none           —— 长按/双击不会选中图片
     · -webkit-user-drag:none     —— 桌面端图片拖不出浏览器
   （右键另存与播放器下载菜单由 app.js 的事件委托 + controlsList 负责拦截）
------------------------------------------------------------------ */
body.is-front img,
body.is-front video{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
body.is-front img{ -webkit-user-drag:none; }
.fac-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed rgba(255,255,255,.26);border-radius:12px;color:#fff;font-weight:800;font-size:14.5px;background:linear-gradient(135deg,#12233c,#0b1526);text-align:center;padding:18px;line-height:1.6;}
.fac-ph span{font-weight:400;font-size:11.5px;opacity:.72;}

/* ===== v1.7 产品卡改为真实链接（可新标签打开 / 可被搜索引擎收录） ===== */
a.pcard{text-decoration:none;color:inherit;}
a.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pcard.pcard-off{opacity:.72;}
.pcard.pcard-off:hover{border-color:var(--line);box-shadow:none;}

/* ==========================================================================
   v1.8 · 视频缩略图用「视频真实画面」做封面（不再是黑方块）
   —— 客户反馈：黑色的 ▶ 图标看不出是视频，改成真实画面 + 半透明播放键
   —— 画面由 JS 抓首帧写到 background-image（见 catalog.js: vidThumbCover）
   ========================================================================== */
.thumbs .th.th-vid{position:relative;overflow:hidden;padding:0;border-color:#0b1220;
  background:#0b1220 center/cover no-repeat;
  background-image:linear-gradient(135deg,#16233a 0%,#0b1220 55%,#1b2c46 100%);}
.thumbs .th.th-vid.has-cover{border-color:var(--line);}
.thumbs .th.th-vid .thvp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:rgba(8,14,24,.62);color:#fff;
  font-size:11px;font-style:normal;line-height:1;display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.9);pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35);}
.thumbs .th.th-vid.has-cover .thvp{background:rgba(30,136,199,.88);}
.thumbs .th.th-vid:hover .thvp{background:var(--accent);border-color:#fff;}
.thumbs .th.th-vid.on{border-color:var(--accent);}

/* 详情页标题旁的「看视频」快捷入口（滚到 04 段），解决"不知道视频在哪" */
.vjump{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;
  border:1.5px solid #d7e3f5;border-radius:999px;background:#f4f8ff;color:#12508a;
  font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;}
.vjump:hover{border-color:var(--accent);color:var(--accent);background:#eaf3ff;}

/* 04 段视频未加载时不要整块死黑 */
.dsec video{background:#0b1220;}

/* v1.8：浏览器解不出来的视频（多为 H.265/HEVC）不要留黑块，换成紧凑说明卡 + 下载入口 */
.vidnoplay{width:100%;min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;padding:24px 20px;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#16233a 0%,#0b1220 55%,#1b2c46 100%);border:1.5px solid var(--line);}
.vidnoplay .vnp-ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-style:normal;margin-bottom:4px;}
.vidnoplay b{font-size:14px;font-weight:800;line-height:1.5;max-width:560px;}
.vidnoplay span{font-weight:600;font-size:12px;opacity:.75;max-width:520px;line-height:1.6;}
.vidnoplay .vnp-dl{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:8px 18px;
  border-radius:999px;background:#fff;color:#0b1220;font-size:12.5px;font-weight:800;text-decoration:none;
  transition:.18s;}
.vidnoplay .vnp-dl:hover{background:#F26522;color:#fff;}
.covid .vidnoplay{max-height:none;}

/* ===== v1.10.2 ODM 中心辐射思维导图（方案A） ===== */
.odm-sub{margin-top:10px;font-size:13px;color:#6b7c95;line-height:1.55;max-width:780px;}
.odm-badges{display:flex;gap:10px;margin:16px 0 4px;flex-wrap:wrap;align-items:center;}
.odm-badge{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #dbe6f3;border-radius:99px;
  padding:5px 13px;font-size:11.5px;font-weight:700;color:#42536e;background:#f7fafd;}
.odm-badge i{width:7px;height:7px;border-radius:50%;display:inline-block;}
.odm-note{margin-left:auto;font-size:11px;color:#a3b0c4;font-weight:600;}
.odm-stage{position:relative;margin-top:8px;}
.odm-wires{position:absolute;inset:0;pointer-events:none;}
.odm-wires svg{position:absolute;inset:0;}
.odm-hub{position:absolute;left:0;top:50%;transform:translateY(-50%);width:190px;height:190px;border-radius:50%;
  background:linear-gradient(150deg,#2E3192 0%,#1E88C7 100%);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 22px;
  box-shadow:0 18px 40px rgba(46,49,146,.32),0 0 0 12px rgba(30,136,199,.07);}
.odm-hub .hk{font-size:9px;font-weight:800;letter-spacing:.18em;opacity:.72;}
.odm-hub .ht{font-size:14.5px;font-weight:800;line-height:1.32;margin-top:8px;}
.odm-hub .hb{margin-top:10px;font-size:10px;font-weight:800;background:rgba(255,255,255,.2);border-radius:5px;padding:4px 9px;}
.odm-card{position:absolute;left:296px;right:0;height:96px;background:#fff;border:1.5px solid #e4ecf6;
  border-left:4px solid;border-radius:11px;display:flex;align-items:center;gap:16px;
  padding:0 18px 0 16px;box-shadow:0 6px 18px rgba(16,40,80,.055);}
.odm-card .idx{flex:0 0 auto;width:38px;height:38px;border-radius:10px;color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em;}
.odm-card .txt{flex:1;min-width:0;}
.odm-card .nm{font-size:14.5px;font-weight:800;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.odm-card .zh{font-size:10.5px;font-weight:700;color:#98a7bd;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.odm-card .ds{font-size:11.5px;line-height:1.5;color:#5b6d87;margin-top:5px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.odm-card .cyc{flex:0 0 auto;font-size:10.5px;font-weight:800;border:1.5px solid;border-radius:7px;
  padding:6px 10px;line-height:1.35;max-width:170px;text-align:center;}
@media(max-width:900px){
  .odm-stage{height:auto!important;}
  .odm-wires{display:none;}
  .odm-hub{position:relative;left:auto;top:auto;transform:none;margin:0 auto 16px;}
  .odm-card{position:static;height:auto;margin-bottom:12px;padding:12px 14px;gap:12px;
    flex-wrap:wrap;align-items:flex-start;}
  .odm-card .idx{margin-top:1px;}
  .odm-card .txt{flex:1 1 180px;}
  .odm-card .cyc{order:3;margin:8px 0 0 50px;max-width:none;}
  .odm-card .nm{white-space:normal;}
  .odm-card .ds{display:block;-webkit-line-clamp:0;overflow:visible;}
  .odm-note{margin-left:0;width:100%;}
}

/* ===== v1.11 关于我们（方案 C：左图右文 + 底部四格数据） ===== */
.ab .kicker{margin-bottom:14px;}
.ab-grid{display:grid;grid-template-columns:404px 1fr;gap:38px;align-items:start;}
.ab-media .ab-vid{position:relative;height:302px;border-radius:15px;overflow:hidden;background:#0b1220;}
.ab-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:15px;}
.ab-vid .fac-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;color:#c8d4e6;font-size:12.5px;font-weight:700;background:#101a2b;padding:0 24px;}
.ab-vid .fac-ph span{font-size:11px;font-weight:500;color:#7c8ba3;line-height:1.6;}
.ab-vtag{position:absolute;left:16px;top:14px;z-index:2;pointer-events:none;background:rgba(6,12,26,.62);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:7px;}
.ab-cert{margin-top:16px;background:#f7faff;border:1.5px solid #e6eefb;border-radius:14px;padding:16px 18px 8px;}
.ab-cert .tt{font-size:10.5px;font-weight:800;letter-spacing:.11em;color:#8b98ab;text-transform:uppercase;}
.ab-cert ul{list-style:none;margin:6px 0 0;padding:0;}
.ab-cert li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px dashed #e8eefb;
  font-size:12.5px;font-weight:700;color:#3d4656;}
.ab-cert li:last-child{border-bottom:none;}
.ab-cert li i{font-style:normal;flex:0 0 15px;width:15px;height:15px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.ab-main h2{margin:0;font-size:24px;line-height:1.34;letter-spacing:-.3px;color:var(--ink);}
.ab-sub{display:block;margin-top:8px;font-size:12px;font-weight:600;color:#8b98ab;letter-spacing:.02em;}
.ab-body{margin-top:18px;}
.ab-body p{font-size:16px;line-height:1.95;color:#2b3a4f;text-align:justify;margin:0 0 14px;}
.ab-body p:last-child{margin-bottom:0;}
.ab-body b.hi{color:var(--accent);font-weight:800;}
.ab-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);}
.ab-kpi{background:#f7faff;border:1.5px solid #e9eff7;border-radius:12px;padding:15px 16px 14px;}
.ab-kpi b{display:block;font-size:24px;line-height:1;letter-spacing:-.5px;color:#0e1b34;font-weight:800;}
.ab-kpi span{display:block;margin-top:9px;font-size:11px;color:var(--muted);font-weight:600;}
.ab-kpi:last-child{background:#101f47;border-color:#101f47;}
.ab-kpi:last-child b{color:#fff;}
.ab-kpi:last-child span{color:rgba(255,255,255,.62);}
/* 901–1100px：左栏收窄，避免右栏正文被挤成 20 字一行、数据格里的 $10–50M 折行 */
@media(max-width:1100px) and (min-width:901px){
  .ab-grid{grid-template-columns:340px 1fr;gap:30px;}
  .ab-media .ab-vid{height:258px;}
  .ab-main h2{font-size:21px;}
  .ab-kpi{padding:13px 12px 12px;}
  .ab-kpi b{font-size:20px;letter-spacing:-.4px;}
}
@media(max-width:900px){
  .ab-grid{grid-template-columns:1fr;gap:22px;}
  .ab-media{order:2;}
  .ab-main h2{font-size:19px;line-height:1.4;}
  .ab-sub{font-size:11.5px;margin-top:7px;}
  .ab-body{margin-top:14px;}
  .ab-body p{font-size:15.5px;line-height:1.88;text-align:left;margin-bottom:12px;}
  .ab-media .ab-vid{height:200px;}
  .ab-kpis{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding-top:16px;}
  .ab-kpi{padding:13px 14px 12px;}
  .ab-kpi b{font-size:21px;}
}

/* ==========================================================================
   v1.10.10 · 首页首屏「宽幅影院」（方案 A）
   --------------------------------------------------------------------------
   整宽 1280×500（2.56:1），一屏一张全幅图，文案压在左侧。
   关键：遮罩只压左边一段，到 68% 就基本透明、80% 起完全透明 ——
   右侧画面一点不加暗，图片该多亮就是多亮（v1.10.8 那条诉求不能回退）。
   ========================================================================== */
.hero{height:500px}
.hero .slide .bg{background-position:center 42%}
/* 遮罩三档的具体色值见上面 .mask.m-light / m-mid / m-strong（已改成左浓右清） */
/* 底部一层很淡的白，跟下面的白色内容区接得自然（不遮挡文字，文字垂直居中） */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 58%,rgba(255,255,255,.66) 100%);
}
.hero .slide .txt{max-width:560px}
/* v1.10.11：纯图模式的 H1 —— 视觉上完全不占位，只给搜索引擎和读屏软件 */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hero .slide .txt .hh{font-size:34px;line-height:1.2;letter-spacing:-.5px;font-weight:800;margin-bottom:12px;color:#fff}
/* 右下角页码 01 / 03 */
.hpager{
  position:absolute;right:36px;bottom:20px;z-index:5;color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.06em;background:rgba(6,12,24,.42);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.26);border-radius:99px;padding:5px 13px;
}
.hpager em{font-style:normal;opacity:.6}

/* 公司介绍视频：整宽 2:1（1208×604）。原来是 3.02:1 的扁条，16:9 原片只露 59%，
   现在露 79%，画面明显完整。 */
.covid.v21{aspect-ratio:2/1}
.covid.v21 video{height:100%;max-height:none;object-fit:cover}
.novid.v21{aspect-ratio:2/1}
/* 合作伙伴整行（回到整宽一条，不再挤在右栏卡片里） */
.co-partners{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}

@media(max-width:1100px){
  .hero{height:440px}
  .hero .slide .txt{max-width:540px}
  .hero .slide .txt .hh{font-size:29px}
}
@media(max-width:900px){
  /* 手机端：图在上、文字压在图底部，保持「一张大图 + 一层字」的影院感 */
  .hero{height:auto;aspect-ratio:3/2}
  .hero .slide{align-items:flex-end;padding:0 20px 58px}
  /* 手机端把画面往右推一点：左侧露出原图的深蓝留白，文字不再压在亮板子上 */
  .hero .slide .bg{background-position:28% center}
  .hero::after{height:0}
  /* 手机端文案压在图下部：后台就算选了「无」，也兜一层底部渐变，不然白字读不清 */
  .hero .slide .mask.m-none{
    display:block;
    background:linear-gradient(180deg,rgba(4,10,22,0) 0%,rgba(4,10,22,.30) 38%,rgba(4,10,22,.90) 100%);
  }
  .hero .slide h1,.hero .slide .txt .hh{font-size:23px;line-height:1.3;margin-bottom:9px}
  .hero .slide .k{font-size:10px;margin-bottom:9px}
  .hero .slide p{font-size:12.5px;margin-bottom:14px}
  .dots{left:20px;bottom:18px}
  .hpager{right:20px;bottom:16px;font-size:11px;padding:4px 11px}
  .covid.v21,.novid.v21{aspect-ratio:16/9}
  .co-partners{margin-top:22px}
}
@media(max-width:420px){
  .hero{aspect-ratio:4/3}
  .hero .slide h1,.hero .slide .txt .hh{font-size:20px}
}

/* ==========================================================================
   v1.10.13 · 首访加载态（防“两版导航叠在一起”）
   --------------------------------------------------------------------------
   前台第一版是用种子/本地镜像画的，远端数据到了会整体重绘一版。慢网时这两版
   会短暂叠在一起：导航看着像两条（一中一英）、首屏页码看着有重影。第一次访问
   时先把整页藏住，数据就绪再显示，只让访客看到完成品。2.6 秒兜底。
   ========================================================================== */
html.vire-booting body.is-front .fwrap{visibility:hidden}
html.vire-booting body.is-front::after{
  content:"";position:fixed;left:0;top:0;height:3px;width:8%;z-index:99999;
  background:linear-gradient(90deg,#1E88C7,#2E3192);
  animation:vireBootBar 1.1s ease-in-out infinite;
}
@keyframes vireBootBar{
  0%{width:8%;opacity:1}
  55%{width:62%}
  100%{width:100%;opacity:.15}
}
@media(prefers-reduced-motion:reduce){
  html.vire-booting body.is-front::after{animation:none;width:100%;opacity:.35}
}

/* ==========================================================================
   v1.10.14 · 分类页顶部横幅（.catban）
   --------------------------------------------------------------------------
   只铺图，一个字都不叠、不加遮罩 —— 后台「产品分类」里给该分类传了横幅图
   才出现，没传完全不占位。图按 2.56:1（2048×800 / 1600×625）出，桌面端
   容器同比例，所以一像素都不裁；窄屏才是 cover 裁边。
   ========================================================================== */
.catban{
  position:relative;margin:14px 36px 0;border-radius:16px;overflow:hidden;
  background:#0b1220;aspect-ratio:2.56/1;
  box-shadow:0 12px 32px rgba(12,26,50,.14);
}
.catban .bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
@media(max-width:1100px){
  .catban{margin:12px 24px 0;aspect-ratio:auto;height:300px;}
}
@media(max-width:900px){
  .catban{margin:10px 16px 0;height:240px;border-radius:13px;}
}
@media(max-width:640px){
  .catban{margin:9px 15px 0;height:168px;border-radius:11px;}
  .catban .bg{background-position:62% center;}
}