:root{
  --blue:#0b63b2; --navy:#0a2740; --navy2:#123a5e; --ink:#1c2b3a; --mut:#5b7691;
  --line:#dfe8f0; --bg:#f4f8fb; --accent:#ff7a1a; --white:#fff; --r:10px;
  --shadow:0 6px 24px rgba(10,39,64,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--white);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.btn{display:inline-block;padding:10px 22px;border:1px solid var(--blue);border-radius:999px;color:var(--blue);background:#fff;cursor:pointer;font-size:14px;transition:.2s}
.btn:hover{background:var(--blue);color:#fff}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:#084c8a}
.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}.btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
h1,h2,h3,h4{line-height:1.3}
.sect{font-size:22px;margin:26px 0 18px;position:relative;padding-left:14px}
.sect:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:linear-gradient(var(--blue),var(--navy))}
.okbar{background:#e8f7ef;color:#136c3f;border:1px solid #bfe8d0;padding:10px 16px;margin:10px auto;max-width:1200px;border-radius:var(--r)}

/* topbar */
.topbar{background:var(--navy);color:#cfe0ef;font-size:12.5px}
.topbar .row{padding:6px 18px;max-width:1200px;margin:0 auto}
.topbar span{margin-right:18px}
.langs a{color:#cfe0ef;margin-left:8px;opacity:.75}.langs a.on{color:#fff;font-weight:700;opacity:1}

/* header */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.hd>.row{padding:10px 18px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px}
.logo span{display:flex;flex-direction:column;line-height:1.15}
.logo b{font-size:19px;letter-spacing:.5px;color:var(--navy)}
.logo i{font-style:normal;font-size:11.5px;color:var(--mut)}
.nav{display:flex;align-items:center;gap:2px;font-size:14px}
.nav>a,.nav .dd>a{display:block;padding:10px 10px;border-radius:8px;white-space:nowrap}
.nav>a:hover,.nav .dd:hover>a,.nav a.on{background:#eef5fb;color:var(--blue)}
.dd{position:relative}
.ddp{position:absolute;left:0;top:100%;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;padding:8px;z-index:60}
.dd:hover .ddp{opacity:1;visibility:visible;transform:none}
.ddp a{display:block;padding:8px 12px;border-radius:8px;font-size:13.5px}
.ddp a:hover{background:#eef5fb;color:var(--blue)}
.mega{width:min(76vw,780px);display:grid;grid-template-columns:repeat(4,1fr);max-height:70vh;overflow:auto}
.mp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;text-align:center}
.mp img{height:64px;width:auto}
.mp .mt{font-size:12.5px;font-weight:600;color:var(--navy)}
.logo img.logomark{height:46px;width:auto;max-width:200px;object-fit:contain}
.topbar .row{overflow:hidden}
.topbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.sform{display:flex;margin-left:6px}
.sform input{border:1px solid var(--line);border-right:0;border-radius:999px 0 0 999px;padding:7px 14px;font-size:13px;width:120px;outline:0}
.sform button{border:1px solid var(--line);background:#fff;border-radius:0 999px 999px 0;width:42px;cursor:pointer}
.urger{display:none;border:1px solid var(--line);background:#fff;font-size:20px;border-radius:8px;padding:4px 12px;cursor:pointer}

/* hero */
.hero{position:relative;background:var(--navy)}
.slides{position:relative;min-height:430px}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s}
.slide.on{opacity:1;position:relative}
.slab{display:flex;align-items:center;min-height:430px}
.slide aside{max-width:620px;color:#fff;padding:30px 0}
.slide h2{font-size:44px;letter-spacing:1px;margin-bottom:10px;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.slide p{font-size:17px;color:#dbe9f6;margin-bottom:22px}
.hero .dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.dots button{width:34px;height:5px;border:0;border-radius:3px;background:rgba(255,255,255,.4);cursor:pointer}
.dots button.on{background:#fff}

/* category cards */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px auto}
.catcard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:21/13;box-shadow:var(--shadow)}
.catcard img{width:100%;height:100%;object-fit:cover;transition:.4s}
.catcard:hover img{transform:scale(1.06)}
.catcard span{position:absolute;inset:auto 0 0;padding:26px 14px 10px;color:#fff;font-size:16px;font-weight:700;background:linear-gradient(transparent,rgba(7,25,41,.75))}
.catcard span i{display:block;font-style:normal;font-weight:400;font-size:12px;opacity:.8}

/* showcase sections */
.show{padding:34px 0;background:#fff}.show.alt{background:var(--bg)}
.showgrid{display:grid;grid-template-columns:5fr 7fr;gap:26px;align-items:center}
.shot{border-radius:14px;color:#fff;padding:34px 30px;min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:2px;background-size:cover;background-position:center;position:relative}
.shot:before{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(6,26,44,.45)}
.shot>*{position:relative}
.shot h3{font-size:28px}.shot h4{font-size:17px;font-weight:400;color:#ffd9bd}.shot p{margin:6px 0 16px;color:#e3eef8}
.sprod{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center;transition:.25s;overflow:hidden}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bcd7ea}
.pcard img{height:120px;margin:0 auto 10px;object-fit:contain}
.pcard b{color:var(--navy);font-size:15.5px;display:block}
.pcard em{font-style:normal;font-size:12px;color:var(--blue);display:block}
.pcard .sub{font-style:normal;display:block;font-size:12.5px;color:var(--mut);margin-top:4px}
.pcard .hot{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px}

/* news home */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.ncard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.ncard:hover{box-shadow:var(--shadow)}
.ncard img{height:150px;width:100%;object-fit:cover}
.ncard b{display:block;padding:12px 14px 4px;font-size:14.5px;color:var(--navy)}
.ncard span{display:block;padding:0 14px 12px;font-size:12px;color:var(--mut)}

/* msg band */
.msgband{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:36px 0}
.msgband h3{font-size:22px;margin-bottom:16px;letter-spacing:1px}
.inq .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.inq textarea{grid-column:1/-1}
.inq input,.inq textarea{border:0;border-radius:8px;padding:12px 14px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.inq .btn{margin-top:14px}
.inq.compact .igrid{grid-template-columns:2fr 2fr 2fr 6fr;align-items:stretch}
.inq.compact textarea{grid-column:auto;min-height:44px}

/* footer */
.ft{background:var(--navy);color:#b9cede;font-size:13.5px}
.ftgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.6fr;gap:22px;padding:38px 18px}
.fname{color:#fff;font-size:17px;display:block;margin-bottom:6px}
.fcol h5{color:#fff;margin-bottom:10px;letter-spacing:1px;font-size:13px}
.fcol a{display:inline-block;margin:3px 10px 3px 0;color:#b9cede}
.fcol a:hover{color:#fff}
.fcol p{margin:4px 0;color:#9db7ce}
.social{display:flex;gap:8px;margin-top:10px}
.social a{width:32px;height:32px;border:1px solid #33546f;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0}
.copy{border-top:1px solid #1d3a53;padding:14px 0;font-size:12px;color:#7e9cb6;text-align:center}
.float-inq{position:fixed;right:16px;bottom:86px;background:var(--accent);color:#fff;padding:12px 16px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(255,122,26,.4);z-index:40}
.float-side{position:fixed;right:16px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:40}
.float-side a{background:var(--blue);color:#fff;border-radius:999px;padding:9px 15px;font-size:12.5px;box-shadow:var(--shadow)}

/* crumbs / page hero */
.crumb{padding:14px 0;font-size:13px;color:var(--mut)}
.crumb b{color:var(--navy)}
.pagehero{color:#fff;background-size:cover;background-position:center;position:relative;border-radius:0;padding:44px 0}
.pagehero:before{content:"";position:absolute;inset:0;background:rgba(7,28,48,.5)}
.pagehero .wrap{position:relative}
.pagehero h1{font-size:32px}.pagehero p{color:#dbe9f6}
.pagehero.light{background:linear-gradient(135deg,var(--navy),var(--navy2))}

/* category list page */
.listpage{display:grid;grid-template-columns:220px 1fr;gap:26px;padding-bottom:40px}
.lsd h4{font-size:15px;background:var(--navy);color:#fff;border-radius:8px 8px 0 0;padding:12px 14px}
.lsd a{display:block;padding:11px 14px;border:1px solid var(--line);border-top:0;font-size:14px}
.lsd a.on,.lsd a:hover{background:#eef5fb;color:var(--blue)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* product detail */
.prodtop{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-bottom:20px}
.gmain{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fbfdff}
.gmain img{height:400px;width:100%;object-fit:contain}
.gthumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.gthumbs img{height:74px;border:2px solid var(--line);border-radius:8px;object-fit:contain;background:#fff;padding:4px;cursor:pointer}
.gthumbs img.on{border-color:var(--blue)}
.pinfo h1{font-size:28px;color:var(--navy)}.pinfo h1 small{color:var(--blue);font-size:16px}
.ptype{color:var(--mut);margin:2px 0 12px}
.feats li{margin:6px 0;color:#2b4257;font-size:14.5px}
.pbtns{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.pv{font-size:12.5px;color:var(--mut)}
.tabs{padding-bottom:34px}
.tabs .tab{border:1px solid var(--line);background:#fff;padding:10px 20px;border-radius:999px;cursor:pointer;margin:0 8px 14px 0;font-size:13.5px}
.tabs .tab.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tabbox{display:none;border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.tabbox.on{display:block}
table.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th{background:var(--navy);color:#fff;padding:10px 12px;text-align:left;font-weight:600}
.spec td{padding:10px 12px;border:1px solid var(--line)}
.spec tr:nth-child(even) td{background:#f6fafd}
img.curve{max-width:100%;margin:0 auto}
video.pvideo{max-width:100%;max-height:460px;border-radius:12px;background:#000}

/* article */
.article{max-width:860px;padding:26px 18px 50px}
.article h1{font-size:26px;color:var(--navy);margin-bottom:6px}
.article .meta{color:var(--mut);font-size:13px;margin-bottom:16px}
.article .aimg{border-radius:14px;margin-bottom:16px}
.article p{margin:10px 0}
.article h2,.article h3{margin:18px 0 8px;color:var(--navy)}
/* news list — 单列图文卡片（左图右文，移动端堆叠） */
.newslist{display:grid;grid-template-columns:1fr;gap:16px;padding:18px 0 46px}
.newsrow{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s;align-items:stretch}
.newsrow:hover{box-shadow:var(--shadow);border-color:#bcd7ea}
.newsrow img{width:300px;height:auto;min-height:160px;max-height:200px;object-fit:cover;flex:none}
.newsrow .nophoto{width:300px;min-height:160px;flex:none;background:linear-gradient(135deg,#dce8f4,#b7d0e8)}
.newsrow .ntext{flex:1;min-width:0;padding:16px 20px;display:flex;flex-direction:column;justify-content:center}
.newsrow b{font-size:17px;color:var(--navy);display:block;line-height:1.45}
.newsrow p{color:var(--mut);font-size:13.5px;margin:8px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.newsrow span{font-size:12.5px;color:var(--blue)}
.errbox{text-align:center;padding:90px 0}
.errbox h1{font-size:80px;color:var(--blue)}
/* 产品描述通栏 */
.descbox{border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 26px 26px;margin-bottom:8px}
.descbox .sect{margin:18px 0 6px}
.descbox h3.dsect{font-size:16px;color:var(--navy);margin:24px 0 10px;padding-left:12px;border-left:4px solid var(--blue)}
.descbox p{margin:10px 0}
.descbox .dcenter{text-align:center}
.tablescroll{overflow-x:auto}
.htmlsub{color:var(--mut);margin:4px 0 12px}
.htmlbox{border:1px dashed #bcd4e8;border-radius:14px;background:#fff;padding:24px;margin-top:8px}
.htmlbox img{border-radius:10px}
.show .wrap>.htmlbox,.show .wrap>.sect{margin-bottom:14px}

/* ---------- responsive ---------- */
/* PC（≥1025）：导航保持一行平铺；字号由 fitNav() 在 11–13px 间自适应，保证任何 PC 宽度不截断 */
@media (min-width:1025px){
  .hd>.row{max-width:1408px}
  .nav{flex:1 1 auto;min-width:0;overflow:visible}
  .nav>a,.nav .dd>a{padding:9px var(--navpad,5.5px);font-size:var(--navfs,13px)}
  .nav i.car{font-style:normal}
}
  .mega{width:min(74vw,740px)}
}
@media (min-width:1025px) and (max-width:1439.98px){
  .sform{display:none}
}
@media (min-width:1025px) and (max-width:1180px){
  .nav i.car{display:none}
}
@media (min-width:1440px){
  .sform input{width:100px}
}
/* ≤1024（平板/手机）：收进汉堡抽屉；top 用 JS 同步真实头高 --hd-h，杜绝遮挡 */
@media (max-width:1024px){
  .urger{display:block}
  .nav{position:fixed;left:0;right:0;top:var(--hd-h,84px);bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px;overflow:auto;display:none;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav>a,.nav .dd>a{padding:12px;border-bottom:1px solid var(--line);border-radius:0}
  .ddp{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);display:none;padding:0}
  .dd.open .ddp{display:block}
  .mega{width:auto;grid-template-columns:repeat(4,1fr);max-height:none;overflow:visible;padding:10px}
  .mp img{height:56px}
  .sform{margin:14px 0;width:auto}
  .sform input{width:100%;flex:1}
  .showgrid{grid-template-columns:1fr}
  .prodtop{grid-template-columns:1fr}
  .listpage{grid-template-columns:1fr}
  .lsd{display:none}
  .newsrow{flex-direction:column}
  .newsrow img,.newsrow .nophoto{width:100%;max-height:none;min-height:0;height:200px}
}
@media (max-width:560px){
  .topbar .row{gap:6px}
  .topbar span:nth-child(2){display:none}
  .slide h2{font-size:30px}
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .sprod,.pgrid{grid-template-columns:repeat(2,1fr)}
  .ngrid,.ftgrid{grid-template-columns:1fr}
  .inq .igrid,.inq.compact .igrid{grid-template-columns:1fr}
  .float-inq{display:none}
  .logo span b{font-size:16px}
  .logo img.logomark{height:36px}
}

/* 轮播定位方式（V20）：cover 默认铺满裁切 / contain 完整显示留背景 / stretch 拉伸 */
.hero .slide{background-color:#0a2740;background-repeat:no-repeat}
.hero .slide.fit-contain{background-size:contain;background-position:center}
.hero .slide.fit-stretch{background-size:100% 100%}
/* === V22 手机端轮播补丁：去上下深色背景带 · 适应 1600×560 展示 === */
@media (max-width:1024px){
  .slides{min-height:35vw}                    /* 35vw = 560/1600 精确比例，容器与图片同形 */
  .slab{min-height:35vw;align-items:flex-end;padding-bottom:8px}
  .hero .slide,.hero .slide.fit-cover,
  .hero .slide.fit-contain,
  .hero .slide.fit-stretch{                    /* 手机端统一 cover：任何定位设置都不留边带 */
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  .slide h2{font-size:22px}
  .slide p{font-size:12.5px;margin-bottom:10px}
  .slide .btn.light{padding:6px 14px;font-size:12px}
  .slide aside{padding:12px 0}
  .hero .dots{bottom:6px}
}