/* IHSTYLE_V1 内页首屏(内页 Banner)多样式 —— 后台「网站配图 → 内页 Banner → 内页首屏样式」里选择
   只作用于有大图的首屏:模板1/2 section.hero-banner、.xh(非 xh-plain) / 模板3 .m-mast.has-cover /
   模板4 .g-hero(非 plain) / 模板5 .k-hero.has-cover
   <html data-ihs="样式"> 由模板里的 IHSTYLE_V1 片段写入;选「跟随模板」时不加载本文件,前台完全不变
   手机(≤768px)沿用 HMOB 约定:只留标题,每种样式各有手机版式 */

/* ================= 0. 公共:模板1/2 产品分类大图统一高度 + 标题白线 ================= */
html[data-ihs] section.hero-banner{aspect-ratio:auto!important;height:auto!important;
  min-height:clamp(360px,26vw,500px)!important}
html[data-ihs] section.hero-banner .banner-content{box-sizing:border-box;
  padding:clamp(36px,4vw,64px) 0}
html[data-ihs] section.hero-banner .banner-content h1{margin:0;font-size:clamp(32px,3.4vw,54px);
  line-height:1.14;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 24px rgba(6,10,18,.28)}
html[data-ihs] section.hero-banner .banner-content h1::after{content:"";display:block;width:56px;
  height:2px;margin:22px 0 0;border-radius:2px;background:rgba(255,255,255,.72)}
html[data-ihs] section.hero-banner .banner-content>p{margin:20px 0 0;max-width:62ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html[data-ihs] section.hero-banner .cta-button{margin-top:28px}

/* 居中类(center / tint / glass):模板1/2 产品分类由靠左改居中 */
html[data-ihs=center] section.hero-banner .banner-content,
html[data-ihs=tint] section.hero-banner .banner-content,
html[data-ihs=glass] section.hero-banner .banner-content{max-width:min(1180px,100%);margin:0 auto;
  text-align:center}
html[data-ihs=center] section.hero-banner .banner-content h1,
html[data-ihs=tint] section.hero-banner .banner-content h1,
html[data-ihs=glass] section.hero-banner .banner-content h1{max-width:min(1180px,100%);margin:0 auto}
html[data-ihs=center] section.hero-banner .banner-content h1::after,
html[data-ihs=tint] section.hero-banner .banner-content h1::after,
html[data-ihs=glass] section.hero-banner .banner-content h1::after{margin:22px auto 0}
html[data-ihs=center] section.hero-banner .banner-content>p,
html[data-ihs=tint] section.hero-banner .banner-content>p,
html[data-ihs=glass] section.hero-banner .banner-content>p{margin:20px auto 0}

/* ================= 1. center 居中大气:遮罩带一点站点主题色 ================= */
html[data-ihs=center] section.hero-banner::before,
html[data-ihs=center] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=center] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=center] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=center] .d5 .k-hero.has-cover .k-cover::after{background:
  radial-gradient(ellipse 60% 64% at 50% 56%,rgba(6,10,18,.44) 0,rgba(6,10,18,0) 72%),
  linear-gradient(180deg,rgba(6,10,18,.56) 0,rgba(var(--primary-rgb,37,99,235),.26) 50%,
  rgba(6,10,18,.66) 100%)}

/* ================= 2. 靠左类公共(left / panel / bigtype):文字与版心左缘对齐 ================= */
html[data-ihs=left] section.hero-banner .banner-content,
html[data-ihs=panel] section.hero-banner .banner-content,
html[data-ihs=bigtype] section.hero-banner .banner-content{max-width:min(860px,100%);margin:0;
  text-align:left}
html[data-ihs=left] .xh:not(.xh-plain) .xh-body,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-body,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-body{align-items:flex-start;text-align:left}
html[data-ihs=left] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-h1{margin:0;max-width:min(860px,100%)}
html[data-ihs=left] .xh:not(.xh-plain) .xh-rule,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-rule,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-rule{margin:24px 0 22px}
html[data-ihs=left] .xh:not(.xh-plain) .xh-deck,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-deck,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-deck{margin:0;max-width:min(620px,100%)}
html[data-ihs=left] .d3 .m-mast.has-cover .m-mast-body,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-mast-body,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-mast-body{justify-items:start;text-align:left}
html[data-ihs=left] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-h1{margin:0;max-width:min(860px,100%)}
html[data-ihs=left] .d3 .m-mast.has-cover .m-mast-side,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-mast-side,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-mast-side{align-items:flex-start;max-width:min(620px,100%)}
html[data-ihs=left] .d3 .m-mast.has-cover .m-deck,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-deck,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-deck{margin-left:0;margin-right:0}
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-hero-body,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-body,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-body{align-items:flex-start;text-align:left}
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-hero-body>div,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-body>div,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-body>div{align-items:flex-start}
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-h1{margin-left:0;margin-right:0;
  max-width:min(860px,100%)}
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-hero-side,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-side,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-side{max-width:min(620px,100%)}
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-btns,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-btns,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-btns{justify-content:flex-start}
html[data-ihs=left] .d5 .k-hero.has-cover .k-hero-body,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-hero-body,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-hero-body{box-sizing:border-box;
  width:min(var(--k-max,1480px),calc(100% - 2 * var(--k-gut,24px)));margin-left:auto;
  margin-right:auto;padding-left:0;padding-right:0;align-items:flex-start;text-align:left}
html[data-ihs=left] .d5 .k-hero.has-cover .k-h1,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-h1,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-h1{max-width:min(860px,100%)}
html[data-ihs=left] .d5 .k-hero.has-cover .k-line,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-line,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-line{margin-left:0}
html[data-ihs=left] .d5 .k-hero.has-cover .k-deck,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-deck,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-deck{margin-left:0;margin-right:0;
  max-width:min(620px,100%)}

/* ================= 3. left 左对齐:左侧压暗、右侧透亮 ================= */
html[data-ihs=left] section.hero-banner::before,
html[data-ihs=left] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=left] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=left] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=left] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(180deg,rgba(6,10,18,.42) 0,rgba(6,10,18,0) 28%),
  linear-gradient(90deg,rgba(6,10,18,.8) 0,rgba(6,10,18,.56) 36%,rgba(6,10,18,.14) 72%,
  rgba(6,10,18,.04) 100%)}

/* ================= 4. panel 色块分栏:左侧页脚同色面板 + 主题色竖线,右侧大图不遮挡 ================= */
/* --ihp = 面板宽度:版心左缘 + min(600px, 46%) */
html[data-ihs=panel] section.hero-banner,
html[data-ihs=panel] .xh:not(.xh-plain),
html[data-ihs=panel] .d3 .m-mast.has-cover,
html[data-ihs=panel] .d4 .g-hero:not(.plain),
html[data-ihs=panel] .d5 .k-hero.has-cover{--ihp:calc(max(0px,(100% - 1480px) / 2) + min(600px,46%))}
html[data-ihs=panel] .xh:not(.xh-plain),
html[data-ihs=panel] .d3 .m-mast.has-cover,
html[data-ihs=panel] .d4 .g-hero:not(.plain),
html[data-ihs=panel] .d5 .k-hero.has-cover{background:
  radial-gradient(ellipse 50% 90% at 0 100%,rgba(var(--primary-rgb,37,99,235),.3) 0,
  rgba(var(--primary-rgb,37,99,235),0) 70%),var(--footer-bg,#0f172a)}
html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover{left:var(--ihp)}
html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover::before,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover::before,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img::before,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover::before{content:"";position:absolute;top:0;
  bottom:0;left:0;z-index:2;width:4px;background:var(--primary-blue,#2563eb)}
html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(180deg,rgba(6,10,18,.4) 0,rgba(6,10,18,0) 30%,rgba(6,10,18,0) 72%,
  rgba(6,10,18,.3) 100%)}
html[data-ihs=panel] section.hero-banner::before{background:
  linear-gradient(90deg,var(--footer-bg,#0f172a) 0,var(--footer-bg,#0f172a) var(--ihp),
  var(--primary-blue,#2563eb) var(--ihp),var(--primary-blue,#2563eb) calc(var(--ihp) + 4px),
  rgba(6,10,18,.08) calc(var(--ihp) + 4px),rgba(6,10,18,.08) 100%)}
html[data-ihs=panel] section.hero-banner .banner-content,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-deck,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-mast-side,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-side,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-h1,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-deck{max-width:min(500px,36vw)}
html[data-ihs=panel] section.hero-banner .banner-content h1,
html[data-ihs=panel] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-h1{font-size:clamp(28px,2.8vw,46px);line-height:1.12}
html[data-ihs=panel] .xh:not(.xh-plain) .xh-h1.is-long,
html[data-ihs=panel] .d3 .m-mast.has-cover .m-h1.is-long,
html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-h1.is-long,
html[data-ihs=panel] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(24px,2.2vw,36px);
  line-height:1.16}

/* ================= 5. glass 毛玻璃卡片:文字收进居中磨砂卡片 ================= */
html[data-ihs=glass] section.hero-banner::before,
html[data-ihs=glass] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=glass] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=glass] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(180deg,rgba(6,10,18,.46) 0,rgba(6,10,18,.12) 30%,rgba(6,10,18,.12) 70%,
  rgba(6,10,18,.4) 100%)}
html[data-ihs=glass] section.hero-banner .banner-content,
html[data-ihs=glass] .xh:not(.xh-plain) .xh-body,
html[data-ihs=glass] .d3 .m-mast.has-cover .m-mast-body,
html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-body,
html[data-ihs=glass] .d5 .k-hero.has-cover .k-hero-body{box-sizing:border-box;
  width:min(760px,calc(100% - 32px));max-width:none;margin:auto;align-self:center;
  padding:clamp(26px,2.6vw,40px) clamp(24px,3vw,48px);text-align:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:12px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 24px 60px rgba(6,10,18,.28)}
html[data-ihs=glass] section.hero-banner .banner-content{margin:clamp(28px,3vw,48px) auto}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html[data-ihs=glass] section.hero-banner .banner-content,
  html[data-ihs=glass] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=glass] .d3 .m-mast.has-cover .m-mast-body,
  html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=glass] .d5 .k-hero.has-cover .k-hero-body{background:rgba(10,16,28,.6)}
}
html[data-ihs=glass] section.hero-banner .banner-content h1,
html[data-ihs=glass] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=glass] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=glass] .d5 .k-hero.has-cover .k-h1{max-width:100%;font-size:clamp(28px,2.8vw,46px);
  line-height:1.12}
html[data-ihs=glass] .xh:not(.xh-plain) .xh-h1.is-long,
html[data-ihs=glass] .d3 .m-mast.has-cover .m-h1.is-long,
html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-h1.is-long,
html[data-ihs=glass] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(24px,2.2vw,36px);
  line-height:1.16}
html[data-ihs=glass] .xh:not(.xh-plain) .xh-deck,
html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-side,
html[data-ihs=glass] .d5 .k-hero.has-cover .k-deck{max-width:100%}

/* ================= 6. bigtype 大字左下:海报级标题压在左下角 ================= */
html[data-ihs=bigtype] section.hero-banner::before,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(180deg,rgba(6,10,18,.44) 0,rgba(6,10,18,.06) 26%,rgba(6,10,18,.16) 52%,
  rgba(6,10,18,.82) 100%)}
html[data-ihs=bigtype] section.hero-banner{align-items:flex-end}
html[data-ihs=bigtype] section.hero-banner .banner-content{
  padding:clamp(72px,7vw,110px) 0 clamp(36px,3.6vw,56px)}
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-body{margin:auto auto 0;
  padding-bottom:clamp(36px,3.6vw,56px)}
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-mast-body{margin:auto 0 0;
  padding-bottom:clamp(36px,3.6vw,56px)}
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-body{margin:auto auto 0;
  padding-bottom:clamp(36px,3.6vw,56px)}
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-hero-body{margin-top:auto;margin-bottom:0;
  padding-bottom:clamp(36px,3.6vw,56px)}
html[data-ihs=bigtype] section.hero-banner .banner-content h1,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-h1{max-width:min(1100px,100%);
  font-size:clamp(40px,5vw,84px);line-height:1;letter-spacing:-.025em}
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-h1.is-long,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-h1.is-long,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-h1.is-long,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(32px,3.6vw,58px);
  line-height:1.06}
html[data-ihs=bigtype] section.hero-banner .banner-content h1::after,
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-rule,
html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-mast-side::before,
html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-side::before,
html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-line{display:none}
html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-deck{margin-top:18px}

/* ================= 7. tint 主题色调:图片去色后统一染成站点主题色 ================= */
html[data-ihs=tint] .xh:not(.xh-plain) .xh-cover,
html[data-ihs=tint] .d3 .m-mast.has-cover .m-cover,
html[data-ihs=tint] .d4 .g-hero:not(.plain) .g-hero-img,
html[data-ihs=tint] .d5 .k-hero.has-cover .k-cover{background:var(--primary-blue,#2563eb);
  isolation:isolate}
html[data-ihs=tint] .xh:not(.xh-plain) .xh-cover img,
html[data-ihs=tint] .d3 .m-mast.has-cover .m-cover img,
html[data-ihs=tint] .d4 .g-hero:not(.plain) .g-hero-img img,
html[data-ihs=tint] .d5 .k-hero.has-cover .k-cover img{mix-blend-mode:luminosity;
  filter:contrast(1.06)}
html[data-ihs=tint] section.hero-banner{background-color:var(--primary-blue,#2563eb)!important;
  background-blend-mode:luminosity}
html[data-ihs=tint] section.hero-banner::before,
html[data-ihs=tint] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=tint] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=tint] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=tint] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(180deg,rgba(6,10,18,.52) 0,rgba(6,10,18,.3) 42%,rgba(6,10,18,.56) 100%)}

/* ================= 8. compact 精简横条:矮横条,左标题右按钮,去导语 ================= */
html[data-ihs=compact] section.hero-banner{min-height:clamp(190px,14vw,250px)!important}
html[data-ihs=compact] .xh:not(.xh-plain),
html[data-ihs=compact] .d3 .m-mast.has-cover,
html[data-ihs=compact] .d4 .g-hero:not(.plain),
html[data-ihs=compact] .d5 .k-hero.has-cover{min-height:clamp(210px,15vw,270px)}
html[data-ihs=compact] section.hero-banner::before,
html[data-ihs=compact] .xh:not(.xh-plain) .xh-cover::after,
html[data-ihs=compact] .d3 .m-mast.has-cover .m-cover::after,
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-img::after,
html[data-ihs=compact] .d5 .k-hero.has-cover .k-cover::after{background:
  linear-gradient(90deg,rgba(6,10,18,.8) 0,rgba(6,10,18,.56) 46%,rgba(6,10,18,.34) 100%)}
html[data-ihs=compact] section.hero-banner .banner-content>p,
html[data-ihs=compact] section.hero-banner .banner-content h1::after,
html[data-ihs=compact] .xh:not(.xh-plain) .xh-rule,
html[data-ihs=compact] .xh:not(.xh-plain) .xh-deck,
html[data-ihs=compact] .d3 .m-mast.has-cover .m-deck,
html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-side::before,
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-side p,
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-side::before,
html[data-ihs=compact] .d5 .k-hero.has-cover .k-line,
html[data-ihs=compact] .d5 .k-hero.has-cover .k-deck{display:none}
html[data-ihs=compact] section.hero-banner .banner-content{display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px 40px;max-width:none;margin:0;
  padding:clamp(24px,2.4vw,36px) 0;text-align:left}
html[data-ihs=compact] section.hero-banner .banner-content h1{flex:1 1 420px;max-width:none;
  font-size:clamp(26px,2.4vw,40px)}
html[data-ihs=compact] section.hero-banner .cta-button{flex:none;margin-top:0}
html[data-ihs=compact] .xh:not(.xh-plain) .xh-body{flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:flex-start;text-align:left;
  padding-top:clamp(12px,1.4vw,20px);padding-bottom:clamp(28px,2.6vw,40px)}
html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-body{grid-template-columns:minmax(0,1fr) auto;
  justify-items:start;align-items:center;gap:16px 40px;text-align:left;
  padding:clamp(12px,1.4vw,20px) 0 clamp(28px,2.6vw,40px)}
html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-side{width:auto;align-items:flex-end}
html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-side .m-btn{margin-top:0}
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-body{flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px 40px;text-align:left;
  padding-top:clamp(12px,1.4vw,20px);padding-bottom:clamp(28px,2.6vw,40px)}
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-side{flex:none;width:auto;max-width:none;
  margin-top:0;align-items:flex-end}
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-side .g-btns{margin-top:0}
html[data-ihs=compact] .d5 .k-hero.has-cover .k-hero-body{box-sizing:border-box;flex-direction:row;
  flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;
  width:min(var(--k-max,1480px),calc(100% - 2 * var(--k-gut,24px)));margin-left:auto;
  margin-right:auto;padding:clamp(12px,1.4vw,20px) 0 clamp(28px,2.6vw,40px);text-align:left}
html[data-ihs=compact] .d5 .k-hero.has-cover .k-hero-body .k-btn{flex:none;margin-top:0}
html[data-ihs=compact] .xh:not(.xh-plain) .xh-h1,
html[data-ihs=compact] .d3 .m-mast.has-cover .m-h1,
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-h1,
html[data-ihs=compact] .d5 .k-hero.has-cover .k-h1{flex:1 1 420px;margin:0;
  max-width:min(1000px,100%);font-size:clamp(26px,2.4vw,40px);line-height:1.14}
html[data-ihs=compact] .xh:not(.xh-plain) .xh-h1.is-long,
html[data-ihs=compact] .d3 .m-mast.has-cover .m-h1.is-long,
html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-h1.is-long,
html[data-ihs=compact] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(22px,2vw,32px);
  line-height:1.18}

/* ================= 9. 手机端(≤768px):只留标题,每种样式各自的手机版式 ================= */
@media (max-width:768px){
  /* 9.0 公共:高度适中,标题字号统一,模板5 也隐藏白线和按钮(与其它模板一致) */
  html[data-ihs] section.hero-banner{min-height:200px!important;padding:24px 0!important}
  html[data-ihs] section.hero-banner .banner-content h1::after{display:none}
  html[data-ihs] .d5 .k-hero.has-cover .k-line,
  html[data-ihs] .d5 .k-hero.has-cover .k-hero-body .k-btn{display:none}
  html[data-ihs] .xh:not(.xh-plain),
  html[data-ihs] .d3 .m-mast.has-cover,
  html[data-ihs] .d4 .g-hero:not(.plain),
  html[data-ihs] .d5 .k-hero.has-cover{min-height:clamp(240px,64vw,300px)}
  html[data-ihs] section.hero-banner .banner-content h1{font-size:clamp(22px,6.2vw,28px)!important;
    line-height:1.24!important;font-weight:800!important;letter-spacing:-.01em!important}
  html[data-ihs] .xh:not(.xh-plain) .xh-h1,
  html[data-ihs] .d3 .m-mast.has-cover .m-h1,
  html[data-ihs] .d4 .g-hero:not(.plain) .g-h1,
  html[data-ihs] .d5 .k-hero.has-cover .k-h1{font-size:clamp(24px,6.6vw,32px);line-height:1.18}
  html[data-ihs] .xh:not(.xh-plain) .xh-h1.is-long,
  html[data-ihs] .d3 .m-mast.has-cover .m-h1.is-long,
  html[data-ihs] .d4 .g-hero:not(.plain) .g-h1.is-long,
  html[data-ihs] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(21px,5.6vw,26px);line-height:1.22}
  html[data-ihs] .xh:not(.xh-plain) .xh-body{padding-top:16px;padding-bottom:28px}
  html[data-ihs] .d3 .m-mast.has-cover .m-mast-body{padding-top:18px;padding-bottom:28px}
  html[data-ihs] .d4 .g-hero:not(.plain) .g-hero-body{padding-top:16px;padding-bottom:28px}
  html[data-ihs] .d5 .k-hero.has-cover .k-hero-body{padding-top:16px;padding-bottom:28px}

  /* 9.1 靠左类(left / panel / bigtype):模板1/2 标题也靠左 */
  html[data-ihs=left] section.hero-banner .banner-content,
  html[data-ihs=left] section.hero-banner .banner-content h1,
  html[data-ihs=panel] section.hero-banner .banner-content,
  html[data-ihs=panel] section.hero-banner .banner-content h1,
  html[data-ihs=bigtype] section.hero-banner .banner-content,
  html[data-ihs=bigtype] section.hero-banner .banner-content h1{text-align:left!important}

  /* 9.2 left:整体偏矮,左深右浅 */
  html[data-ihs=left] section.hero-banner{min-height:180px!important}
  html[data-ihs=left] .xh:not(.xh-plain),
  html[data-ihs=left] .d3 .m-mast.has-cover,
  html[data-ihs=left] .d4 .g-hero:not(.plain),
  html[data-ihs=left] .d5 .k-hero.has-cover{min-height:clamp(220px,58vw,280px)}
  html[data-ihs=left] section.hero-banner::before,
  html[data-ihs=left] .xh:not(.xh-plain) .xh-cover::after,
  html[data-ihs=left] .d3 .m-mast.has-cover .m-cover::after,
  html[data-ihs=left] .d4 .g-hero:not(.plain) .g-hero-img::after,
  html[data-ihs=left] .d5 .k-hero.has-cover .k-cover::after{background:
    linear-gradient(90deg,rgba(6,10,18,.74) 0,rgba(6,10,18,.36) 100%)}

  /* 9.3 panel:上图下色块,标题在底部色块里,色块顶边一条主题色 */
  html[data-ihs=panel] section.hero-banner{align-items:flex-end!important;padding:0!important;
    min-height:220px!important}
  html[data-ihs=panel] section.hero-banner::before{background:
    linear-gradient(180deg,rgba(6,10,18,.36) 0,rgba(6,10,18,.04) 60%)}
  html[data-ihs=panel] section.hero-banner .container-1480{max-width:none!important;
    padding-left:0!important;padding-right:0!important}
  html[data-ihs=panel] section.hero-banner .banner-content{max-width:none!important;width:100%!important;
    margin:0!important;padding:16px var(--container-pad,16px) 18px!important;
    background:var(--footer-bg,#0f172a);box-shadow:inset 0 3px 0 var(--primary-blue,#2563eb)}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover,
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover,
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img,
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover{left:0}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover::before,
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover::before,
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img::before,
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover::before{display:none}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-cover::after,
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-cover::after,
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-img::after,
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-cover::after{background:
    linear-gradient(180deg,rgba(6,10,18,.4) 0,rgba(6,10,18,.04) 50%)}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-mast-body,
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-hero-body{background:var(--footer-bg,#0f172a);
    box-shadow:inset 0 3px 0 var(--primary-blue,#2563eb)}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-body{margin:auto 0 0;max-width:none;
    padding:16px var(--xh-gut,16px) 18px}
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-mast-body{margin:auto calc(-1 * var(--m-gut,20px)) 0;
    padding:16px var(--m-gut,20px) 18px}
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-hero-body{margin:auto 0 0;max-width:none;
    padding-top:16px;padding-bottom:18px}
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-hero-body{width:100%;margin:auto 0 0;
    padding:16px var(--k-gut,16px) 18px}
  html[data-ihs=panel] section.hero-banner .banner-content h1{font-size:clamp(20px,5.6vw,26px)!important}
  html[data-ihs=panel] .xh:not(.xh-plain) .xh-h1,
  html[data-ihs=panel] .d3 .m-mast.has-cover .m-h1,
  html[data-ihs=panel] .d4 .g-hero:not(.plain) .g-h1,
  html[data-ihs=panel] .d5 .k-hero.has-cover .k-h1{max-width:none;font-size:clamp(20px,5.6vw,26px);
    line-height:1.22}

  /* 9.4 glass:磨砂卡片沉到底部,左右留 12px */
  html[data-ihs=glass] section.hero-banner{align-items:flex-end!important;padding:0 0 12px!important;
    min-height:220px!important}
  html[data-ihs=glass] section.hero-banner .container-1480{padding-left:12px!important;
    padding-right:12px!important}
  html[data-ihs=glass] section.hero-banner .banner-content{width:auto!important;margin:0!important;
    padding:16px 18px!important}
  html[data-ihs=glass] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=glass] .d5 .k-hero.has-cover .k-hero-body{width:auto;align-self:stretch;
    margin:auto 12px 12px}
  html[data-ihs=glass] .d3 .m-mast.has-cover .m-mast-body{width:auto;align-self:stretch;
    margin:auto 0 12px}
  html[data-ihs=glass] section.hero-banner .banner-content,
  html[data-ihs=glass] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=glass] .d3 .m-mast.has-cover .m-mast-body,
  html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=glass] .d5 .k-hero.has-cover .k-hero-body{padding:16px 18px;border-radius:10px;
    box-shadow:0 12px 30px rgba(6,10,18,.24)}
  html[data-ihs=glass] section.hero-banner .banner-content h1{font-size:clamp(20px,5.6vw,26px)!important}
  html[data-ihs=glass] .xh:not(.xh-plain) .xh-h1,
  html[data-ihs=glass] .d3 .m-mast.has-cover .m-h1,
  html[data-ihs=glass] .d4 .g-hero:not(.plain) .g-h1,
  html[data-ihs=glass] .d5 .k-hero.has-cover .k-h1{font-size:clamp(20px,5.6vw,26px);line-height:1.22}

  /* 9.5 bigtype:更高,大标题压在左下 */
  html[data-ihs=bigtype] section.hero-banner{align-items:flex-end!important;padding:0 0 22px!important;
    min-height:240px!important}
  html[data-ihs=bigtype] .xh:not(.xh-plain),
  html[data-ihs=bigtype] .d3 .m-mast.has-cover,
  html[data-ihs=bigtype] .d4 .g-hero:not(.plain),
  html[data-ihs=bigtype] .d5 .k-hero.has-cover{min-height:clamp(260px,70vw,320px)}
  html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-mast-body,
  html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-hero-body{padding-bottom:22px}
  html[data-ihs=bigtype] section.hero-banner .banner-content h1{font-size:clamp(26px,7.4vw,34px)!important;
    line-height:1.1!important}
  html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-h1,
  html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-h1,
  html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-h1,
  html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-h1{font-size:clamp(26px,7.4vw,34px);line-height:1.1}
  html[data-ihs=bigtype] .xh:not(.xh-plain) .xh-h1.is-long,
  html[data-ihs=bigtype] .d3 .m-mast.has-cover .m-h1.is-long,
  html[data-ihs=bigtype] .d4 .g-hero:not(.plain) .g-h1.is-long,
  html[data-ihs=bigtype] .d5 .k-hero.has-cover .k-h1.is-long{font-size:clamp(22px,6vw,28px);
    line-height:1.14}

  /* 9.6 compact:矮横条,标题居中 */
  html[data-ihs=compact] section.hero-banner{min-height:150px!important}
  html[data-ihs=compact] section.hero-banner .banner-content{display:block}
  html[data-ihs=compact] .xh:not(.xh-plain),
  html[data-ihs=compact] .d3 .m-mast.has-cover,
  html[data-ihs=compact] .d4 .g-hero:not(.plain),
  html[data-ihs=compact] .d5 .k-hero.has-cover{min-height:clamp(160px,44vw,200px)}
  html[data-ihs=compact] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=compact] .d5 .k-hero.has-cover .k-hero-body{flex-direction:column;align-items:center;
    justify-content:center;text-align:center}
  html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-body{grid-template-columns:minmax(0,1fr);
    justify-items:center;text-align:center}
  html[data-ihs=compact] .xh:not(.xh-plain) .xh-body,
  html[data-ihs=compact] .d3 .m-mast.has-cover .m-mast-body,
  html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-hero-body,
  html[data-ihs=compact] .d5 .k-hero.has-cover .k-hero-body{padding-top:12px;padding-bottom:22px}
  html[data-ihs=compact] section.hero-banner .banner-content h1{font-size:clamp(20px,5.6vw,26px)!important}
  html[data-ihs=compact] .xh:not(.xh-plain) .xh-h1,
  html[data-ihs=compact] .d3 .m-mast.has-cover .m-h1,
  html[data-ihs=compact] .d4 .g-hero:not(.plain) .g-h1,
  html[data-ihs=compact] .d5 .k-hero.has-cover .k-h1{flex:none;margin:0 auto;max-width:100%;
    font-size:clamp(20px,5.6vw,26px);line-height:1.22}
}
/* IHSTYLE_V1_END */