/* ========================================================================
   SMC 劲性复合桩 — 大气工程主题 theme.css
   设计语言：深藏青 × 鎏金 × 大幅工程实景 · 地产/重大工程视觉
   ===================================================================== */

/* ---------- · 中点字形兜底 ----------
   本机 Microsoft YaHei / sans-serif 缺 U+00B7 字形，直接把 · 渲染成方框；
   用 unicode-range 只接管 U+00B7，从中挑一个真有该字形的系统字体渲染。 */
@font-face{
  font-family:"DotFallback";
  src:local("Arial"),local("Helvetica"),local("Segoe UI"),local("Tahoma"),
      local("Verdana"),local("Liberation Sans"),local("DejaVu Sans"),local("Times New Roman");
  unicode-range:U+00B7;
}

/* ---------- tokens / base ---------- */
:root{
  --navy-900:#081527;
  --navy-800:#0B1D3A;
  --navy-700:#10294F;
  --navy-600:#16325E;
  --gold:#C9A227;
  --gold-2:#E3C15C;
  --gold-3:#9C7A14;
  --ink:#22303F;
  --ink-2:#5A6B7D;
  --paper:#FFFFFF;
  --paper-2:#F5F6F8;
  --line:#E4E7EC;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;
  font-family:"DotFallback","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.8;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,92%);margin:0 auto}
.clear{clear:both}

/* 区块标题：金线 + 大字 + 英文注脚 */
.sec{padding:84px 0}
.sec-white{background:var(--paper)}
.sec-gray{background:var(--paper-2)}
.sec-head{margin:0 0 46px;text-align:center}
.sec-head .en{
  display:block;font-size:12px;letter-spacing:6px;color:var(--gold);
  font-weight:700;text-transform:uppercase;margin-bottom:10px;
}
.sec-head h2{
  margin:0;font-size:34px;line-height:1.3;color:var(--navy-800);
  font-weight:bold;letter-spacing:4px;
}
.sec-head .rule{
  width:64px;height:3px;margin:20px auto 0;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3));
  border:none;
}
.sec-head p.sub{margin:14px 0 0;color:var(--ink-2);font-size:15px}

/* ---------- 顶部信息条 ---------- */
.site-topbar{
  background:linear-gradient(90deg,#122B52 0%,#16325E 55%,#10294F 100%);color:#C7D3E4;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.site-topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  min-height:38px;gap:12px;flex-wrap:wrap;
}
.site-topbar .medal{color:var(--gold-2);letter-spacing:1px}
.site-topbar .tel{color:#FFF;font-weight:bold;letter-spacing:1px}
.site-topbar .tel b{color:var(--gold-2);font-size:15px;margin-left:4px}

/* ---------- 主导航（含旧 .header 翻新） ---------- */
.header{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.97);
  box-shadow:0 2px 14px rgba(8,21,39,.10);
  border-top:3px solid var(--gold);
  border-bottom:1px solid var(--line); /* 清掉旧 style.css 的 2px #00B895 绿底边 */
}
.header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  width:min(1240px,94%);min-height:78px;gap:22px;
}
.header .logo{flex:0 0 auto;float:none;margin:0;padding:0}
.header .logo img{display:block;height:46px;width:auto}
.top-nav{float:none;flex:1 1 auto;display:flex;justify-content:flex-end}
.top-nav ul{
  margin:0;padding:0;list-style:none;display:flex;align-items:center;
  height:56px;flex-wrap:wrap;
}
.top-nav ul li{margin:0}
.top-nav ul li a{
  display:flex;align-items:center;height:56px;padding:0 19px;
  font-size:16px;color:var(--navy-800);font-weight:bold;letter-spacing:1px;
  position:relative;transition:color .25s;white-space:nowrap;
}
.top-nav ul li a::after{
  content:"";position:absolute;left:23px;right:23px;bottom:14px;height:3px;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2));
  transform:scaleX(0);transform-origin:left center;transition:transform .28s;
}
.top-nav ul li a:hover{color:var(--gold-3)}
.top-nav ul li a:hover::after{transform:scaleX(1)}
.top-nav ul li.active a{color:var(--gold-3)}
.top-nav ul li.active a::after{transform:scaleX(1)}
.top-nav li.active a,
.top-nav ul li.active a{
  background:none!important;color:var(--gold-3)!important;
}
.top-nav li a:hover{
  background:none!important;color:var(--gold-3);
}

/* 品牌文字标识（与导航同一 44px 行高，主标题光学居中） */
.logo-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-brand img{height:46px;width:auto;display:block;flex:0 0 auto}
.logo-brand .txt{display:flex;flex-direction:column;justify-content:center;height:56px}
.logo-brand .txt b{
  display:block;font-size:19px;color:var(--navy-800);
  letter-spacing:1px;line-height:1.2;font-weight:bold;
}
.logo-brand .txt i{
  display:block;font-style:normal;font-size:9.5px;
  color:var(--gold-3);letter-spacing:1px;margin-top:3px;line-height:1.2;
}

/* ---------- HERO：大幅轮播 + 深色遮罩 ---------- */
.hero{position:relative;background:var(--navy-900);overflow:hidden}
.hero .rslides{position:relative!important;margin:0;padding:0;list-style:none}
.hero .rslides li{position:absolute!important;top:0;left:0;width:100%;opacity:0}
.hero .rslides li:first-child{position:relative!important}
.hero .rslides img{
  display:block;width:100%;height:clamp(500px,74vh,730px);object-fit:cover;
  object-position:center 50%;filter:saturate(1.20) contrast(1.16) brightness(1.15);
}
.hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 5%;
  /* 深色遮罩（写在覆盖层背景上，确保压住底图）
     注意：早晨图本身很亮（均值 137~158），底图不能再猛提亮，
     亮度靠"对比+饱和"而不是 brightness 硬乘，否则天空一片死白。 */
  background:
    radial-gradient(ellipse 74% 62% at 50% 46%,rgba(8,21,39,.30) 0%,rgba(8,21,39,.10) 58%,rgba(8,21,39,0) 100%),
    linear-gradient(90deg,rgba(8,21,39,.22) 0%,rgba(8,21,39,0) 52%,rgba(8,21,39,.12) 100%),
    linear-gradient(180deg,rgba(8,21,39,.34) 0%,rgba(8,21,39,.06) 36%,rgba(8,21,39,.44) 80%,rgba(8,21,39,.74) 100%);
}
.hero-panel{ /* 深色半透面板 + 鎏金顶边（加深底色让金色字更跳） */
  background:linear-gradient(180deg,rgba(8,21,39,.78),rgba(8,21,39,.90));
  border:1px solid rgba(201,162,39,.46);
  border-top:3px solid rgba(201,162,39,.90);
  box-shadow:0 24px 60px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 30px 60px -30px rgba(0,0,0,.35);
  padding:clamp(26px,4vw,46px) clamp(30px,6vw,88px);
  backdrop-filter:blur(6px);
}
.hero-kicker{
  color:var(--gold-2);font-size:14px;letter-spacing:10px;font-weight:bold;
  text-transform:uppercase;margin:0 0 18px;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.hero-title{
  margin:0;color:#FFF;font-size:clamp(40px,6.4vw,74px);line-height:1.15;
  font-weight:bold;letter-spacing:10px;
  text-shadow:0 4px 16px rgba(0,0,0,.85),0 8px 40px rgba(0,0,0,.55);
}
.hero-title .smc{
  /* 实心金色大字，不用 background-clip:text 的透明填充：
     ① 透明填充在深底上发闷，用户明确要"就是金色的大字"；
     ② 透明填充 + filter 会整字消失（Chrome 行为）。 */
  color:var(--gold-2);
  text-shadow:0 3px 14px rgba(0,0,0,.55);
  margin-right:8px;letter-spacing:2px;
}
/* 顶部信息条移入 hero 面板：金色分隔信息行 */
.hero-topinfo{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin:0 0 22px;padding-bottom:16px;
  border-bottom:1px solid rgba(201,162,39,.35);
  font-size:14px;letter-spacing:1px;
}
.hero-topinfo .medal{color:var(--gold-2);font-weight:bold}
.hero-topinfo .tel{color:#E8EEF6}
.hero-topinfo .tel b{color:var(--gold-2);font-size:16px;margin-left:6px;letter-spacing:1px}
.hero-topinfo .divider{color:rgba(201,162,39,.6)}
.hero-rule{
  width:110px;height:4px;border:none;margin:30px auto 22px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
}
.hero-sub{
  margin:0;color:#FFF;font-size:clamp(16px,2vw,21px);
  letter-spacing:6px;font-weight:bold;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.hero-tags{
  margin:32px 0 0;padding:0;list-style:none;display:flex;gap:46px;flex-wrap:wrap;justify-content:center;
}
.hero-tags li{
  color:#FFF;font-size:19px;letter-spacing:3px;font-weight:bold;
  padding-left:26px;position:relative;text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.hero-tags li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(45deg);
  width:14px;height:14px;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 0 10px rgba(227,193,92,.5);
}
.hero-actions{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-block;padding:17px 54px;font-size:17px;letter-spacing:3px;
  font-weight:bold;transition:all .28s;border:1px solid transparent;border-radius:2px;
}
.btn-gold{
  color:#2A1F04;
  background:linear-gradient(180deg,#F5E3A8,var(--gold) 58%,#B08F1E);
  border:1px solid #E3C15C;
  box-shadow:0 12px 30px rgba(201,162,39,.45), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(201,162,39,.6)}
.btn-ghost{
  color:#FFF;border:2px solid rgba(255,255,255,.9);
  background:rgba(8,21,39,.45);backdrop-filter:blur(2px);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.btn-ghost:hover{
  background:linear-gradient(180deg,#F5E3A8,var(--gold) 58%,#B08F1E);
  border-color:#E3C15C;color:#2A1F04;text-shadow:none;transform:translateY(-2px);
}

/* ---------- 数据带 ---------- */
.stats-band{background:var(--navy-800);position:relative}
.stats-band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold-3));
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:44px 0;
}
.stat{text-align:center;padding:10px 12px;position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:18%;height:64%;width:1px;
  background:rgba(255,255,255,.12);
}
.stat .num{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,4.2vw,56px);font-weight:bold;line-height:1.15;
  background:linear-gradient(180deg,#F2DE9B,var(--gold-2) 55%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .num i{font-style:normal;font-size:.62em}
.stat .label{margin-top:8px;color:#AFC0D6;font-size:14px;letter-spacing:3px}

/* ---------- S / M / C 技术体系 ---------- */
.smc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.smc-card{
  background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy-700);
  padding:38px 30px 32px;text-align:center;
  transition:transform .3s,box-shadow .3s;
}
.smc-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(8,21,39,.14)}
.smc-card .badge{
  width:76px;height:76px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:38px;font-weight:bold;color:#FFF;
  background:radial-gradient(circle at 32% 28%,var(--navy-600),var(--navy-900));
  box-shadow:0 8px 20px rgba(8,21,39,.28);
}
.smc-card h3{margin:0 0 6px;font-size:21px;color:var(--navy-800);letter-spacing:1px}
.smc-card .en{display:block;font-size:12px;letter-spacing:2px;color:var(--gold-3);margin-bottom:14px}
.smc-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.9;text-align:left}
.smc-merge{
  margin:44px auto 0;max-width:880px;text-align:center;position:relative;
}
.smc-merge .arrow{
  color:var(--gold-3);font-size:30px;line-height:1;margin-bottom:8px;
}
.smc-final{
  background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-600) 100%);
  border:1px solid rgba(201,162,39,.45);
  padding:30px 40px;
  box-shadow:0 18px 40px rgba(8,21,39,.22);
}
.smc-final .t1{
  color:var(--gold-2);font-size:26px;font-weight:bold;letter-spacing:6px;margin:0 0 10px;
}
.smc-final .t2{color:#C7D4E5;font-size:15px;letter-spacing:2px;margin:0}

/* ---------- 核心优势（图标要点） ---------- */
.feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;
}
.feature-item{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);
  padding:24px 26px;border-left:4px solid var(--gold);
  transition:box-shadow .3s,transform .3s;
}
.feature-item:hover{box-shadow:0 16px 34px rgba(8,21,39,.10);transform:translateY(-3px)}
.feature-item .fi-num{
  flex:0 0 auto;font-family:Georgia,serif;font-size:26px;font-weight:bold;
  color:var(--gold-3);line-height:1.4;
}
.feature-item h4{margin:0 0 4px;font-size:17px;color:var(--navy-800);letter-spacing:1px}
.feature-item p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.85}

/* ---------- 图片展示 ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g-card{
  position:relative;overflow:hidden;border:1px solid var(--line);
  background:var(--navy-900);
}
.g-card img{
  display:block;width:100%;height:230px;object-fit:cover;
  transition:transform .5s,opacity .5s;opacity:.94;
}
.g-card:hover img{transform:scale(1.06);opacity:1}
.g-card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:40px 20px 14px;
  background:linear-gradient(180deg,transparent,rgba(8,21,39,.88));
  color:#FFF;font-size:17px;font-weight:bold;letter-spacing:3px;text-align:center;
}
.g-card .cap::after{
  content:"";display:block;width:34px;height:2px;background:var(--gold-2);
  margin:10px auto 0;transition:width .3s;
}
.g-card:hover .cap::after{width:70px}

/* ---------- 提要引述带 ---------- */
.quote-band{
  background:
    linear-gradient(135deg,rgba(8,21,39,.96),rgba(16,41,79,.94)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 14px);
  color:#D7E1EE;padding:76px 0;
  border-top:1px solid rgba(201,162,39,.35);
  border-bottom:1px solid rgba(201,162,39,.35);
}
.quote-band .mark{
  font-family:Georgia,serif;font-size:64px;line-height:.6;color:var(--gold-2);
}
.quote-band h3{
  color:#FFF;font-size:26px;letter-spacing:5px;margin:18px 0 20px;font-weight:bold;
}
.quote-band p{
  margin:0;font-size:15.5px;line-height:2.1;color:#B9C8DB;text-align:justify;
}
.quote-band p b{color:var(--gold-2);font-weight:bold}

/* ---------- CTA 金色带 ---------- */
.cta-band{background:linear-gradient(90deg,var(--gold-3),var(--gold-2) 50%,var(--gold-3));padding:30px 0}
.cta-band .wrap{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
}
.cta-band .t{color:var(--navy-900);font-size:21px;font-weight:bold;letter-spacing:4px}
.cta-band .tel{
  color:var(--navy-900);font-family:Georgia,serif;font-size:32px;font-weight:bold;
  letter-spacing:2px;
}

/* ---------- 页脚（旧 .copy-right / .footer 翻新） ---------- */
.site-footer{background:var(--navy-900);color:#8FA1B8;padding:58px 0 0}
.footer-cols{
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;padding-bottom:40px;
}
.footer-cols h4{
  color:#FFF;font-size:16px;letter-spacing:3px;margin:0 0 18px;
  padding-bottom:12px;position:relative;
}
.footer-cols h4::after{
  content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold-2);
}
.footer-cols p,.footer-cols li{font-size:13.5px;line-height:2.05}
.footer-cols ul{margin:0;padding:0;list-style:none}
.footer-cols a{color:#8FA1B8;transition:color .2s}
.footer-cols a:hover{color:var(--gold-2)}
.footer-cols .f-about{line-height:2}
.footer-bar{
  border-top:1px solid rgba(255,255,255,.08);padding:18px 0;text-align:center;
  font-size:13px;color:#6E8098;letter-spacing:1px;
}
.footer-bar a{color:#8FA1B8}
.footer-bar a:hover{color:var(--gold-2)}

/* 兼容旧模板的 copy-right / footer 区域 */
.copy-right{
  background:var(--navy-900)!important;color:#6E8098;
  padding:18px 0!important;margin:0!important;text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.copy-right p{color:#6E8098!important;margin:6px 0!important;font-size:13px!important}
.copy-right a{color:#8FA1B8!important}
.copy-right a:hover{color:var(--gold-2)!important}

/* 旧 .footer 翻新 */
.footer{background:var(--navy-900)!important;color:#8FA1B8!important;padding:44px 0 8px!important;margin:0!important}
.footer h3{color:#FFF!important;font-size:15px!important;letter-spacing:3px!important;border-bottom:1px solid rgba(255,255,255,.12)!important;padding-bottom:10px!important}
.footer p,.footer li,.footer-grid-address p{color:#8FA1B8!important;font-size:13.5px!important;line-height:2!important}
.footer a{color:#8FA1B8!important}
.footer a:hover{color:var(--gold-2)!important}
.footer .email-link{color:var(--gold-2)!important}

/* 旧内容卡片统一配色 */
.specials-heading h3{color:var(--navy-800)!important;letter-spacing:4px!important;font-size:24px!important}
.grid h2,.grid h3{color:var(--navy-800)!important}
.grid h2 a,.grid h3 a,.special-grid a{color:var(--navy-800)!important}
.grid h2 a:hover,.grid h3 a:hover,.special-grid a:hover{color:var(--gold-3)!important}
.testmonial-grid h3{color:var(--navy-800)!important;letter-spacing:3px!important}
.testmonial-grid p{color:var(--ink-2)!important}
.learnmore{background:var(--navy-800)!important;color:#FFF!important;border-radius:2px!important}
.learnmore:hover{background:var(--gold-3)!important;color:#FFF!important}

/* ---------- 内页统一标题横幅 ---------- */
.page-banner{
  position:relative;height:320px;display:flex;align-items:flex-end;
  background-color:var(--navy-900);overflow:hidden;
}
/* 分类 banner 底图层：单独一层才能挂 brightness 提亮而不影响标题文字 */
.page-banner .pb-bg{
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  filter:brightness(1.44) saturate(1.06);
}
/* 遮罩渐变已直接写在 .page-banner 的 background-image 图层里（伪元素在本站层叠下不可靠） */
.page-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(201,154,66,.15) 60%,rgba(201,154,66,0) 100%);
}
.pb-inner{
  position:relative;z-index:2;width:min(1240px,94%);margin:0 auto;
  padding:0 0 38px 0;
}
.pb-en{
  margin:0 0 10px;color:var(--gold-2);font-size:13px;font-weight:bold;
  letter-spacing:7px;text-transform:uppercase;
}
.pb-title{
  margin:0 0 0 22px;color:#FFF;font-size:42px;font-weight:bold;
  letter-spacing:10px;line-height:1.15;position:relative;
  text-shadow:0 6px 26px rgba(0,0,0,.55);
}
.pb-title::before{
  content:"";position:absolute;left:-22px;top:8px;bottom:8px;width:6px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
}
.pb-crumb{
  margin:14px 0 0;color:rgba(255,255,255,.72);font-size:13px;letter-spacing:1px;
}
.pb-crumb a{color:rgba(255,255,255,.72)}
.pb-crumb a:hover{color:var(--gold-2)}
.pb-crumb .sep{margin:0 8px;color:rgba(255,255,255,.35)}
.pb-crumb .cur{color:var(--gold-2)}

/* 荣誉页旧深色带标题（原白字已不适用） */
.banner-top2 h3{
  color:var(--navy-800)!important;font-size:26px!important;letter-spacing:5px!important;
  padding-left:14px;border-left:6px solid var(--gold);line-height:1.3;
}
.banner-top2{color:var(--ink)!important}
.banner-top2 p{color:var(--ink-2)!important}

/* ---------- 通用分区标题 ---------- */
.sec-h{
  margin:0 0 8px;font-size:28px;color:var(--navy-800);letter-spacing:5px;
  font-weight:bold;padding-left:16px;position:relative;line-height:1.35;
}
.sec-h::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:6px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
}
.sec-h .en{
  display:inline-block;margin-left:14px;font-size:13px;font-weight:normal;
  color:var(--gold-3);letter-spacing:4px;text-transform:uppercase;
}
.sec-h.center{text-align:center;padding-left:0}
.sec-h.center::before{display:none}

/* ---------- 荣誉页：专利分区卡片 ---------- */
.patent-sec{padding:46px 0 8px;text-align:left}
.patent-sec .sec-h{text-align:left}
.patent-sec .patent-lead{text-align:left}
.patent-lead{
  margin:6px 0 26px;color:#55647A!important;font-size:15px;letter-spacing:1px;
  padding-left:16px;
}
.patent-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.patent-card{
  background:#FFF;border:1px solid #E7E0D2;border-top:3px solid var(--gold);
  box-shadow:0 4px 18px rgba(8,21,39,.06);padding:20px 22px 14px;
}
.patent-card.wide{grid-column:1 / -1}
.patent-card .pc-head{
  display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px dashed #E2D9C6;
}
.patent-card .pc-no{
  font-size:26px;font-weight:bold;color:var(--gold);letter-spacing:1px;
  font-style:italic;line-height:1;
}
.patent-card .pc-head b{font-size:19px;color:var(--navy-800);letter-spacing:3px}
.patent-card .pc-head .cnt{
  margin-left:auto;font-size:12px;color:#9AA7B6;letter-spacing:1px;
}
.patent-card ul{margin:0;padding:0;list-style:none}
.patent-card .pc-group{margin-top:16px}
.patent-card .pc-group .pc-gt{
  display:block;font-size:13px;font-weight:bold;letter-spacing:1px;
  color:var(--gold-3);border-left:3px solid var(--gold);
  padding-left:9px;margin-bottom:8px;
}
.patent-card.wide ul{column-count:2;column-gap:34px}
.patent-card li{
  break-inside:avoid;display:flex;gap:8px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid #F4F0E8;font-size:14px;
}
.patent-card li:last-child{border-bottom:0}
.patent-card li i{
  font-style:normal;color:var(--gold-3);font-weight:bold;flex:0 0 34px;
}
.patent-card li em{
  font-style:normal;color:#8A97A6;font-size:12.5px;margin-left:auto;
  letter-spacing:.5px;white-space:nowrap;
}
.patent-card li b{color:var(--navy-700);font-weight:normal}

/* ---------- 卡片（工程实例 / 荣誉证书通用） ---------- */
.content-grids .grid{
  background:#FFF;border:1px solid #E7E0D2;border-top:3px solid var(--gold);
  box-shadow:0 6px 22px rgba(8,21,39,.08);padding:0 0 18px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.content-grids .grid:hover{
  transform:translateY(-6px);box-shadow:0 14px 34px rgba(8,21,39,.14);
}
.content-grids .grid img{
  display:block;width:100%;height:250px;object-fit:cover;object-position:center;
}
.content-grids .grid h3{
  text-align:center;margin:16px 14px 10px;font-size:19px;letter-spacing:2px;
}
.content-grids .grid p{
  margin:0 18px;font-size:14px!important;color:var(--ink-2)!important;
  line-height:1.95!important;text-align:left!important;
  text-indent:0!important;
}
.content-grids .grid p::first-letter{ }
.content-grids .wrap{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.content-grids .wrap .specials-heading{width:100%;margin:10px 0 0;position:static}
.content-grids .wrap .specials-heading h3{padding-left:16px;position:relative}
.content-grids .wrap .specials-heading h3::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:6px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
}
.content-grids .wrap .grid{
  float:none;width:calc((100% - 44px)/3);margin:0!important;
  box-sizing:border-box;
}
.content-grids .wrap .grid.last-grid{margin:0!important}
@media (max-width:960px){
  .content-grids .wrap .grid{width:100%}
}

/* ---------- 工程实例：一览表图框 ---------- */
.proj-table-sec{padding:6px 0 14px}
.proj-table-frame{
  background:#FFF;border:1px solid #E7E0D2;border-top:3px solid var(--gold);
  box-shadow:0 8px 30px rgba(8,21,39,.10);padding:12px;margin:12px auto 0;
  /* 原版是 <img src="images/c1.jpg"> 不设宽度 → 按原生 973px 显示。
     box-sizing:border-box，故 999 = 973(图) + 12*2(padding) + 1*2(border)，
     保证图片 1:1 不缩放；窄屏仍由 img{width:100%} 自适应。 */
  max-width:999px;max-height:none;overflow:visible;
}
.proj-table-frame img{display:block;width:100%;height:auto}
.proj-table-tip{
  max-width:820px;margin:10px auto 0;text-align:center;font-size:13px;color:#7A8798;
}
.proj-table-tip a{color:var(--gold-3);text-decoration:underline}

/* ---------- 联系方式 ---------- */
.contact-sec{padding:56px 0 30px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.contact-card{
  background:#FFF;border:1px solid #E7E0D2;border-top:3px solid var(--gold);
  box-shadow:0 6px 22px rgba(8,21,39,.08);text-align:center;padding:34px 22px 30px;
  transition:transform .3s,box-shadow .3s;
}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(8,21,39,.14)}
.contact-card .ic{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-600));
  color:var(--gold-2);font-size:28px;line-height:64px;font-weight:bold;
  box-shadow:0 6px 16px rgba(8,21,39,.22);
}
.contact-card h4{
  margin:0 0 10px;font-size:16px;color:#8A97A6;letter-spacing:3px;font-weight:normal;
}
.contact-card p{margin:0;font-size:17px;color:var(--navy-800);letter-spacing:1px;line-height:1.7;word-break:break-all}
.contact-card p b{color:var(--gold-3)}
.contact-note{
  margin-top:30px;text-align:center;color:var(--ink-2);font-size:14.5px;letter-spacing:2px;
}
.contact-note b{color:var(--navy-800)}
.contact-cta{
  margin-top:40px;background:var(--navy-800);padding:30px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  position:relative;overflow:hidden;
}
.contact-cta::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border:2px solid rgba(201,154,66,.25);border-radius:50%;
}
.contact-cta .t{color:#FFF;font-size:21px;letter-spacing:3px;font-weight:bold}
.contact-cta .t i{
  display:block;font-style:normal;font-size:13px;color:#A9B8CB;
  letter-spacing:2px;margin-top:6px;font-weight:normal;
}
.contact-cta a{
  flex:0 0 auto;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#2A1F0A;font-weight:bold;font-size:16px;letter-spacing:2px;
  padding:14px 34px;text-decoration:none;
}
.contact-cta a:hover{filter:brightness(1.08)}

/* ---------- 提要引述带（浅色版） ---------- */
.testmonials{background:var(--paper-2)!important;padding:40px 0!important}
.testmonial-grid{
  border:1px solid #E7E0D2;border-left:5px solid var(--gold);background:#FFF;
  padding:26px 30px;box-shadow:0 6px 22px rgba(8,21,39,.06);
}
.testmonial-grid h3{margin:0 0 12px}
.testmonial-grid p{font-size:14.5px!important;line-height:2.1!important;margin:0}

/* ---------- 工程实例：四案例卡片 ---------- */
.proj-sec-head{margin:22px 0 20px}
.proj-sec-head .eyebrow{
  display:inline-block;font-size:12px;letter-spacing:4px;color:var(--gold-3);
  font-weight:bold;text-transform:uppercase;margin-bottom:6px;
}
.proj-sec-head h3.sec-h{
  margin:0;font-size:28px;letter-spacing:3px;color:var(--navy-800);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;text-align:left;
}
.proj-sec-head h3.sec-h .en{
  font-size:12.5px;letter-spacing:2.5px;color:var(--gold-3);font-weight:normal;
}
.proj-lead{
  margin:10px 0 0;color:#55647A;font-size:14.5px;line-height:1.9;max-width:920px;
}
.proj-grid{
  width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px;
  grid-auto-rows:1fr;
}
.proj-card{
  display:flex;background:#FFF;border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:8px;overflow:hidden;
  transition:transform .28s,box-shadow .28s;
}
.proj-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,41,79,.15)}
.proj-pic{
  position:relative;flex:0 0 262px;
  background:linear-gradient(160deg,#0B1D3A 0%,#16325E 100%);
  display:flex;flex-direction:column;
}
.proj-pic img{display:block;flex:none;width:100%;height:auto}
.proj-no{
  position:absolute;left:0;top:0;z-index:2;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3D2E05;
  font-weight:bold;font-size:13px;letter-spacing:2px;padding:4px 12px;
}
.proj-metric{
  flex:none;
  padding:14px 20px 18px;display:flex;align-items:baseline;gap:5px;
  border-top:1px solid rgba(255,255,255,.12);
}
.proj-metric b{font-size:30px;color:var(--gold-2);letter-spacing:1px;line-height:1.1}
.proj-metric span{font-size:13px;color:var(--gold-2)}
.proj-metric i{font-style:normal;font-size:12.5px;color:#9FB0C6;margin-left:8px;letter-spacing:1px}
.proj-body{padding:20px 24px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.proj-body h3{
  margin:0 0 10px;font-size:19px;color:var(--navy-800);
  letter-spacing:1px;line-height:1.4;
  padding-left:12px;border-left:3px solid var(--gold);
}
.proj-body p{margin:0;font-size:14px;color:#4A5A6B;line-height:1.9;text-align:justify}
.proj-spec{list-style:none;display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 0;padding:0}
.proj-spec li{
  font-size:12px;color:var(--navy-700);background:#F1F4F8;
  border:1px solid var(--line);border-radius:2px;padding:3px 9px;letter-spacing:.5px;
}
@media(max-width:900px){
  .proj-grid{grid-template-columns:minmax(0,1fr)}
  .proj-card{flex-direction:column}
  /* 竖排后图片铺满整行宽度，高度必须交给图片自己算。
     原来锁 height:190px，而图片按比例实际高 228~563px，
     「1800万元节省造价」整块被挤出容器、压在项目标题与正文上（实测重叠 124~440px）。 */
  .proj-pic{flex:0 0 auto;height:auto}
}

/* ---------- 动画演示页 ---------- */
.anim-page{padding:44px 0 60px;background:var(--paper-2)}
.anim-head{margin-bottom:28px}
.anim-head .eyebrow{
  display:inline-block;font-size:12px;letter-spacing:4px;color:var(--gold-3);
  font-weight:bold;text-transform:uppercase;margin-bottom:6px;
}
.anim-head h3.sec-h{
  margin:0;font-size:28px;letter-spacing:3px;color:var(--navy-800);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;text-align:left;
}
.anim-head h3.sec-h .en{font-size:12.5px;letter-spacing:2.5px;color:var(--gold-3);font-weight:normal}
.anim-lead{margin:10px 0 0;color:#55647A;font-size:15px;line-height:1.95;max-width:960px}
.anim-stage{
  background:var(--navy-800);border-radius:10px;overflow:hidden;
  box-shadow:0 22px 50px rgba(16,41,79,.22);border:1px solid rgba(255,255,255,.08);
}
.anim-stage-bar{
  display:flex;align-items:center;gap:7px;padding:12px 18px;
  background:linear-gradient(90deg,#10294F,#16325E);
}
.anim-stage-bar .dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28)}
.anim-stage-bar .dot:first-child{background:#E06C5A}
.anim-stage-bar .title{
  margin-left:12px;color:#E8EEF6;font-size:15px;letter-spacing:2px;font-weight:bold;
}
.anim-screen{
  background:#000;min-height:520px;display:flex;align-items:center;justify-content:center;
  padding:12px;
}
.anim-screen object,.anim-screen embed{max-width:100%}
.anim-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.anim-step{
  background:#FFF;border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:8px;padding:22px 20px;transition:transform .26s,box-shadow .26s;
}
.anim-step:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(16,41,79,.13)}
.anim-step .no{
  display:inline-block;font-size:13px;font-weight:bold;letter-spacing:2px;color:#3D2E05;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));padding:3px 11px;margin-bottom:12px;
}
.anim-step b{display:block;font-size:17px;color:var(--navy-800);letter-spacing:1px;margin-bottom:8px}
.anim-step p{margin:0;font-size:13.5px;color:#55647A;line-height:1.85}
.anim-note{
  display:flex;gap:16px;margin-top:30px;background:#FFF8E6;border:1px solid #F0DCA8;
  border-left:4px solid var(--gold);border-radius:6px;padding:18px 22px;
}
.anim-note .ic{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--gold);color:#FFF;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-style:italic;
}
.anim-note b{display:block;color:var(--navy-800);font-size:15px;margin-bottom:4px}
.anim-note p{margin:0;font-size:13.5px;color:#5A6B7D;line-height:1.85}
.anim-note a{color:var(--gold-3);text-decoration:underline}
.anim-cta{
  margin-top:34px;background:linear-gradient(120deg,#0B1D3A,#16325E);
  border-radius:10px;padding:34px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.anim-cta .txt b{display:block;color:#FFF;font-size:22px;letter-spacing:2px}
.anim-cta .txt p{margin:6px 0 0;color:#A9BAD0;font-size:14.5px;letter-spacing:1px}
.anim-cta .acts{display:flex;gap:16px;flex-wrap:wrap}
.btn-ghost-dark{
  color:#FFF;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);
}
.btn-ghost-dark:hover{border-color:var(--gold-2);color:var(--gold-2)}
@media(max-width:900px){
  .anim-steps{grid-template-columns:1fr 1fr}
  .anim-screen{min-height:300px}
}
@media(max-width:640px){ .anim-steps{grid-template-columns:1fr} }

/* ---------- 旧列表/内容页容器翻新 ---------- */
html{background:var(--navy-900)}
.copy-right{margin-bottom:0!important}
body .content{padding:0 0 30px;background:var(--paper)}

/* 列表页横幅：高清 hero 图 cover 适配 */
.image-slider{position:relative;background:var(--navy-900)}
.image-slider .rslides img{
  width:100%;height:clamp(280px,34vw,440px);object-fit:cover;object-position:center 42%;
  filter:saturate(1.1) contrast(1.04);
}
.image-slider::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,21,39,.18),rgba(8,21,39,.42));
}
.about-us{padding:40px 0 10px}
.content_top{background:var(--paper-2)!important;padding:34px 0!important}
.banner-top2{background:none!important}
.banner-top2,.banner-top2 span,.banner-top2 p{color:var(--ink)!important}
.banner-top2 span b{color:var(--navy-800)!important}
.about-header{
  background:none!important;border:none!important;margin:0 0 26px!important;
  padding:0!important;position:relative;text-align:left;
}
.about-header h3{
  margin:0!important;font-size:26px!important;color:var(--navy-800)!important;
  letter-spacing:3px!important;font-weight:bold!important;
  padding:0 0 0 18px!important;border-left:5px solid var(--gold)!important;line-height:1.4;
}
.about-info{background:none!important;border:none!important}
.mframe2,.mframe3{border:none!important;margin:0 0 30px!important}
.mframe2 .tm,.mframe3 .tm{background:none!important;border:none!important;height:auto!important}
.mframe3 .mm,.mframe3 .mm2,.mframe2 .mm{
  background:var(--paper)!important;border:1px solid var(--line)!important;
  border-top:3px solid var(--gold)!important;padding:8px 26px 26px!important;
  box-shadow:0 6px 20px rgba(8,21,39,.06);
}
.mframe2 span.tt,.mframe3 span.tt,
.mframe2 span.tt2,.mframe3 span.tt2,
.mframe2 span.tt3,.mframe3 span.tt3{
  color:var(--navy-800)!important;font-size:18px!important;letter-spacing:2px!important;
}
.summary2 .title a,.mframe2 ul.nl a,.mframe3 ul.nl a{color:var(--navy-700)!important;font-size:15px!important}
.summary2 .title a:hover{color:var(--gold-3)!important}
.summary2 .sum{color:var(--ink-2)!important;font-size:14px!important;line-height:1.95!important}
.summary2 .foot span{color:var(--gold-3)!important}
.summary2 .foot a{color:var(--navy-700)!important;font-weight:bold}
.summary2 .foot a:hover{color:var(--gold-3)!important}
.mframe3 .mm2 a{color:var(--navy-700)}

/* 内容页正文 */
#container,.contentBody,.content_body{color:var(--ink);font-size:15.5px;line-height:2.05}
.contentBody img,.content_body img{max-width:100%;height:auto}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat + .stat::before{display:none}
  .smc-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .header .wrap{flex-direction:column;align-items:flex-start;min-height:0;padding:12px 0;gap:6px}
  .logo-brand .txt{height:auto}
  .header .logo img{height:44px}
  .top-nav ul{height:auto}
  .top-nav ul li a{height:auto;padding:10px 14px 10px 0;font-size:14px;letter-spacing:1px}
  .top-nav ul li a::after{bottom:5px}
  .page-banner{height:190px}
  .pb-inner{padding-bottom:22px}
  .pb-title{font-size:26px;letter-spacing:5px;margin-left:16px}
  .pb-title::before{left:-16px}
  .pb-en{letter-spacing:4px;font-size:11px}
  .hero-title{letter-spacing:4px}
  .hero-panel{padding:24px 18px}
  .hero-kicker{letter-spacing:4px;font-size:12px}
  .sec{padding:56px 0}
}

/* ================= 分页（IWMS 默认 .pager，原为绿系 #88af3f / #b2e05d） ================= */
.pager{
  display:block;height:auto;clear:both;padding:30px 0 4px;margin:30px 0 0;
  font-family:inherit;font-size:14px;word-break:keep-all;
  border-top:1px solid var(--line);
}
.pager ul{
  margin:0;padding:0;list-style:none;line-height:1;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.pager li{float:none;margin:0;color:var(--ink-2);display:inline-flex;align-items:center}
.pager li.p_total{
  background:var(--navy-800);color:#FFF;font-weight:bold;
  border:1px solid var(--navy-800);padding:9px 15px;border-radius:2px;
  font-size:13px;letter-spacing:1px;
}
.pager li.p_current{
  background:linear-gradient(180deg,#F5E3A8,var(--gold) 58%,#B08F1E);
  color:#2A1F04;font-weight:bold;border:1px solid #E3C15C;
  padding:9px 15px;border-radius:2px;min-width:40px;justify-content:center;
  box-shadow:0 6px 16px rgba(201,162,39,.32);
}
.pager li.p_nolink{
  color:#B9C2CE;border:1px solid var(--line);padding:9px 15px;border-radius:2px;
}
.pager li a:link,.pager li a:visited{
  float:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:9px 15px;color:var(--navy-800);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;font-weight:bold;
  text-decoration:none!important;transition:all .22s;
}
.pager li a:hover,.pager li a:active{
  background:var(--navy-800);color:var(--gold-2);border-color:var(--navy-800);
  text-decoration:none!important;
}
.pager li div{display:inline-flex;align-items:center;margin-left:6px}
.pager li input[type="text"]{
  width:56px;padding:8px;border:1px solid var(--line);border-radius:2px;
  text-align:center;color:var(--navy-800);font-weight:bold;
  font-family:inherit;font-size:14px;background:#FFF;
}
.pager li input[type="text"]:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16);
}

/* ================= 荣誉证书卡：完整显示（不裁切）+ 点击看大图 ================= */
.content-grids .grid.cert-card{display:flex;flex-direction:column;padding:0 0 16px}
.content-grids .grid.cert-card .cert-shot{
  position:relative;display:block;height:300px;overflow:hidden;cursor:zoom-in;
  background:linear-gradient(180deg,#F8F9FB,#EAEDF2);
  border-bottom:1px solid var(--line);
}
.content-grids .grid.cert-card .cert-shot img{
  width:100%;height:100%;object-fit:contain!important;object-position:center!important;
  padding:16px;transition:transform .35s;
}
.content-grids .grid.cert-card .cert-shot:hover img{transform:scale(1.045)}
.content-grids .grid.cert-card .cert-zoom{
  position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,21,39,.74);color:var(--gold-2);font-size:19px;font-weight:bold;
  border:1px solid rgba(201,162,39,.55);transition:all .25s;
}
.content-grids .grid.cert-card .cert-shot:hover .cert-zoom{background:var(--gold);color:#2A1F04}
.content-grids .grid.cert-card .cert-tip{
  position:absolute;left:0;right:0;bottom:0;padding:28px 0 12px;text-align:center;
  color:#FFF;font-size:12.5px;letter-spacing:2px;
  background:linear-gradient(0deg,rgba(8,21,39,.90),rgba(8,21,39,.55) 55%,rgba(8,21,39,0));
  opacity:0;transition:opacity .28s;
}
.content-grids .grid.cert-card .cert-shot:hover .cert-tip{opacity:1}

/* 证书灯箱 */
.cert-lightbox{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(4,10,20,.93);padding:3vh 3vw;
}
.cert-lightbox.on{display:flex}
.cert-lightbox figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1100px,94vw);max-height:94vh;
}
.cert-lightbox figure img{
  display:block;width:auto;height:auto;max-width:100%;max-height:78vh;
  background:#FFF;padding:10px;border:1px solid rgba(201,162,39,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.cert-lightbox figcaption{color:var(--gold-2);font-size:15px;letter-spacing:2px;text-align:center}
.cert-lightbox .cl-close{
  position:absolute;top:22px;right:26px;padding:10px 20px;border-radius:2px;
  border:1px solid rgba(201,162,39,.6);background:rgba(8,21,39,.78);color:#FFF;
  font-size:14px;font-weight:bold;letter-spacing:3px;cursor:pointer;
  font-family:inherit;transition:all .22s;
}
.cert-lightbox .cl-close:hover{background:var(--gold);color:#2A1F04;border-color:var(--gold)}
.cert-lightbox .cl-tip{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  color:rgba(255,255,255,.45);font-size:13px;letter-spacing:1px;
}
@media (max-width:960px){
  .content-grids .grid.cert-card .cert-shot{height:240px}
  .cert-lightbox .cl-close{top:12px;right:12px;padding:8px 14px;letter-spacing:1px}
}

/* ========================================================================
   新闻/资料详情页（show.aspx）重构
   解决：文章标题被隐藏、正文用旧 tahoma/宋体 14px、短内容页面空旷无收尾
   ===================================================================== */

/* ---------- 文章头部 ---------- */
.art-hero{
  position:relative;overflow:hidden;
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:52px 0 40px;
}
.art-hero::before{
  content:"";position:absolute;right:-140px;top:-150px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(201,162,39,.14),rgba(201,162,39,0) 68%);
  pointer-events:none;
}
.art-hero .wrap{position:relative;z-index:1;width:min(1200px,92%);margin:0 auto}
.art-cat{
  display:inline-block;margin:0 0 20px;padding:5px 15px;
  font-size:12.5px;font-weight:bold;letter-spacing:2px;
  color:var(--gold-3);background:#FFF;
  border:1px solid rgba(201,162,39,.45);border-radius:2px;
  transition:all .22s;
}
.art-cat:hover{background:var(--gold);border-color:var(--gold);color:#FFF}
.art-title{
  margin:0 0 24px;max-width:1020px;
  font-size:34px;line-height:1.42;font-weight:bold;letter-spacing:1px;
  color:var(--navy-800);
  padding-left:20px;border-left:6px solid var(--gold);
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  padding-left:26px;color:var(--ink-2);font-size:13.5px;letter-spacing:.5px;
}
.art-meta .mi{display:inline-flex;align-items:center;gap:8px;padding:0 22px;line-height:1.6}
.art-meta .mi:first-child{padding-left:0}
.art-meta .mi + .mi{border-left:1px solid var(--line)}
.art-meta .mi em{font-style:normal;color:var(--ink-2)}
.art-meta .mi b{font-weight:bold;color:var(--navy-800)}
.art-meta .mi a{color:var(--gold-3)}
.art-meta .mi a:hover{color:var(--navy-700)}

/* ---------- 主体两栏 ---------- */
.art-main{background:var(--paper);padding:0 0 92px}
.art-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 334px;gap:46px;
  align-items:start;margin-top:56px;
}
.art-card{
  display:flex;flex-direction:column;min-height:520px;
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);
  box-shadow:0 10px 34px rgba(8,21,39,.075);
  padding:48px 56px 0;
}
.art-body{flex:1 0 auto;min-height:280px}

/* 正文排版：覆盖 style/iwms/style.css 的 tahoma/宋体 14px 与紫色链接 */
.art-card #content{
  width:auto!important;margin:0!important;text-align:left!important;
  font-family:inherit!important;font-size:16.5px!important;
  line-height:2.05!important;color:var(--ink)!important;
  word-wrap:break-word;
}
.art-card #content div,.art-card #content td,.art-card #content span,
.art-card #content font,.art-card #content li{
  font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;
}
.art-card #content p{margin:0 0 1.1em}
.art-card #content p:last-child{margin-bottom:0}
.art-card #content img{
  display:block;max-width:100%;height:auto;margin:22px auto;
  box-shadow:0 8px 26px rgba(8,21,39,.14);
}
.art-card #content a,.art-card #content a:link,.art-card #content a:visited{
  color:var(--gold-3)!important;text-decoration:none!important;
  border-bottom:1px solid rgba(201,162,39,.45);
}
.art-card #content a:hover{color:var(--navy-700)!important;border-bottom-color:var(--navy-700)}
.art-card #content h1,.art-card #content h2,.art-card #content h3,.art-card #content h4{
  margin:1.6em 0 .7em;color:var(--navy-800);line-height:1.5;font-weight:bold;
}
.art-card #content h1{font-size:24px}
.art-card #content h2{font-size:21px;padding-left:14px;border-left:4px solid var(--gold)}
.art-card #content h3{font-size:18.5px}
.art-card #content h4{font-size:17px}
.art-card #content ul,.art-card #content ol{margin:0 0 1.2em;padding-left:26px}
.art-card #content li{margin:0 0 .55em}
.art-card #content ul li{list-style:none;position:relative}
.art-card #content ul li::before{
  content:"";position:absolute;left:-18px;top:14px;
  width:6px;height:6px;background:var(--gold);border-radius:50%;
}
.art-card #content blockquote{
  margin:1.4em 0;padding:18px 26px;color:var(--ink-2);
  background:var(--paper-2);border-left:4px solid var(--gold);
}
.art-card #content table{
  width:100%!important;margin:1.4em 0;border-collapse:collapse;
  font-size:15px!important;border:1px solid var(--line);
}
.art-card #content td,.art-card #content th{
  padding:11px 14px;border:1px solid var(--line);
}
.art-card #content tr:nth-child(even) td{background:var(--paper-2)}
.art-card #content hr{border:none;border-top:1px solid var(--line);margin:2em 0}

/* 内容为空时的兜底提示 */
.art-empty{
  padding:32px 0;color:var(--ink-2);font-size:15px;letter-spacing:1px;
  text-align:center;background:var(--paper-2);border:1px dashed var(--line);
}

/* 多页文章的内容导航 */
.art-pages{
  margin:32px 0 0;padding:20px 24px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:14px;line-height:2;color:var(--ink-2);
}
.art-pages a{color:var(--navy-700)}
.art-pages a:hover{color:var(--gold-3)}
.art-pages a.highlight{color:var(--gold-3);font-weight:bold}
.art-pages table,.art-pages tbody,.art-pages tr,.art-pages td{
  width:auto!important;border:none!important;background:transparent!important;
}

/* ---------- 文章底部操作条（让短文章有收尾） ---------- */
.art-actions{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding:22px 0 26px;border-top:1px solid var(--line);
}
.art-actions .back{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 26px;font-size:14px;font-weight:bold;letter-spacing:1px;
  color:#FFF;background:var(--navy-800);border-radius:2px;transition:all .22s;
}
.art-actions .back:hover{background:var(--gold);color:#FFF}
.art-actions .back::before{
  content:"";width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-right:7px solid currentColor;
}
.art-actions .tools{display:flex;align-items:center;gap:22px}
.art-actions .tools a,.art-actions .tools button{
  font-family:inherit;font-size:13.5px;letter-spacing:1px;color:var(--ink-2);
  background:none;border:none;padding:6px 0;cursor:pointer;transition:color .2s;
}
.art-actions .tools a:hover,.art-actions .tools button:hover{color:var(--gold-3)}
.art-actions .tools .fs{display:inline-flex;align-items:center;gap:8px}
.art-actions .tools .fs b{
  display:inline-block;min-width:26px;text-align:center;cursor:pointer;
  border:1px solid var(--line);color:var(--ink-2);font-weight:bold;
  line-height:22px;transition:all .2s;
}
.art-actions .tools .fs b.fs-on{
  background:var(--gold);border-color:var(--gold);color:#FFF;
}
.art-actions .tools .fs b.fs-s{font-size:12px}
.art-actions .tools .fs b.fs-l{font-size:15px}
.art-actions .tools .fs em{font-style:normal;color:var(--ink-2);font-size:13.5px;letter-spacing:1px}

/* ---------- 侧栏 ---------- */
.art-side{display:flex;flex-direction:column;gap:28px;position:sticky;top:22px}
.side-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 22px rgba(8,21,39,.05)}
.side-card > h3{
  position:relative;margin:0;padding:16px 20px 16px 24px;
  font-size:15px;font-weight:bold;letter-spacing:2px;color:var(--navy-800);
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.side-card > h3::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:17px;background:var(--gold);
}
.side-card > h3 span{
  float:right;font-size:11px;font-weight:normal;letter-spacing:2px;
  color:var(--ink-2);text-transform:uppercase;line-height:24px;
}
.side-body{padding:10px 20px 20px}
/* js.aspx 输出的 <a>…</a><br/> 串：隐掉 br，a 变整齐列表 */
.side-body.side-list a{
  display:block;position:relative;padding:12px 0 12px 17px;
  font-size:16px;line-height:1.6;color:var(--navy-700);
  border-bottom:1px dashed var(--line);transition:all .2s;
}
.side-body.side-list a:last-child{border-bottom:none}
.side-body.side-list a::before{
  content:"";position:absolute;left:0;top:19px;
  width:6px;height:6px;background:var(--gold);border-radius:50%;transition:all .2s;
}
.side-body.side-list a:hover{color:var(--gold-3);padding-left:22px}
.side-body.side-list a:hover::before{width:11px;border-radius:3px}
.side-body.side-list br{display:none}
.side-body.side-list .no-data{color:var(--ink-2);font-size:14px;padding:12px 0}

/* 侧栏：联系卡片 */
.side-contact p{margin:0 0 14px;font-size:14px;line-height:1.75;color:var(--ink-2)}
.side-contact p:last-child{margin-bottom:4px}
.side-contact p b{display:block;color:var(--navy-800);font-size:22px;letter-spacing:1px;margin-bottom:2px}
.side-contact p em{font-style:normal;color:var(--gold-3);font-weight:bold}
.side-contact .mail{
  display:block;margin-top:6px;padding:10px 16px;text-align:center;
  font-size:13.5px;font-weight:bold;letter-spacing:1px;color:#FFF;background:var(--navy-800);
  transition:background .22s;
}
.side-contact .mail:hover{background:var(--gold)}

/* ---------- 底部 CTA ---------- */
.art-cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:62px;padding:38px 44px;
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-600) 100%);
}
.art-cta::after{
  content:"";position:absolute;right:-60px;bottom:-90px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(201,162,39,.22),rgba(201,162,39,0) 68%);
  pointer-events:none;
}
.art-cta .t{position:relative;z-index:1}
.art-cta .t b{display:block;color:#FFF;font-size:21px;letter-spacing:2px;margin-bottom:9px}
.art-cta .t i{font-style:normal;color:rgba(255,255,255,.62);font-size:13.5px;letter-spacing:1px}
.art-cta .btn{
  position:relative;z-index:1;flex:none;
  padding:14px 34px;font-size:15px;font-weight:bold;letter-spacing:2px;
  color:#FFF;background:var(--gold);transition:all .22s;
}
.art-cta .btn:hover{background:var(--gold-2);color:#2A1F04}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .art-grid{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
  .art-card{padding:40px 40px 0}
}
@media (max-width:960px){
  .art-hero{padding:38px 0 30px}
  .art-title{font-size:25px;padding-left:15px;border-left-width:5px}
  .art-meta{padding-left:15px;font-size:12.5px}
  .art-meta .mi{padding:0 14px}
  .art-grid{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:34px}
  .art-card{padding:30px 22px 0;min-height:0}
  .art-body{min-height:0}
  .art-side{position:static}
  .art-cta{padding:28px 24px;margin-top:44px}
  .art-actions .back{flex:1 1 100%;justify-content:center}
}

/* ---------- 详情页补充：副标题 / 侧栏当前项 / 空数据 ---------- */
.art-sub{
  margin:-12px 0 22px;padding-left:26px;
  font-size:15.5px;color:var(--ink-2);letter-spacing:1px;line-height:1.7;
}
.side-body.side-nav a.cur{color:var(--gold-3);font-weight:bold;padding-left:22px}
.side-body.side-nav a.cur::before{width:11px;border-radius:3px}
.side-body.side-list .no-data{margin:0;padding:14px 0;color:var(--ink-2);font-size:14px;letter-spacing:.5px}

/* ---------- 详情页：正文字号切换（用 class 而非 inline，避开 !important） ---------- */
.art-card #content.fs-s{font-size:15px!important;line-height:2!important}
.art-card #content.fs-m{font-size:16.5px!important;line-height:2.05!important}
.art-card #content.fs-l{font-size:18.5px!important;line-height:2.1!important}

/* ---------- 详情页：正文下方的「延伸阅读」 ---------- */
.read-more{
  margin-top:44px;padding:30px 0 0;border-top:1px solid var(--line);
}
.read-more .rm-head{
  position:relative;margin:0 0 22px;padding-left:16px;
  font-size:17px;font-weight:bold;letter-spacing:3px;color:var(--navy-800);
}
.read-more .rm-head::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:18px;background:var(--gold);
}
.read-more .rm-head span{
  margin-left:10px;font-size:11px;font-weight:normal;letter-spacing:3px;
  color:var(--ink-2);text-transform:uppercase;
}
.read-more-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
}
.read-more-list a{
  display:block;position:relative;padding:13px 0 13px 20px;
  font-size:16.5px;line-height:1.65;color:var(--navy-700);
  border-bottom:1px dashed var(--line);transition:all .2s;
}
.read-more-list a::before{
  content:"";position:absolute;left:0;top:21px;
  width:6px;height:6px;background:var(--gold);border-radius:50%;transition:all .2s;
}
.read-more-list a:hover{color:var(--gold-3);padding-left:25px}
.read-more-list a:hover::before{width:11px;border-radius:3px}
.read-more-list br{display:none}
.read-more-list .no-data{
  margin:0;padding:14px 0;color:var(--ink-2);font-size:14px;letter-spacing:.5px;
}
@media (max-width:960px){
  .read-more-list{grid-template-columns:1fr;gap:0}
  .art-card{min-height:0}
}

/* ========================================================================
   列表页（我的博客 / 技术资料）重构
   原样：8 条纯文字标题 + [查看全文]，摘要字段全空，通栏 1200 极单薄
   ===================================================================== */
.list-hero{
  position:relative;overflow:hidden;
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:46px 0 38px;
}
.list-hero::before{
  content:"";position:absolute;right:-150px;top:-160px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(201,162,39,.14),rgba(201,162,39,0) 68%);
  pointer-events:none;
}
.list-hero .wrap{position:relative;z-index:1}
.lh-en{
  margin:0 0 12px;font-size:12px;font-weight:bold;letter-spacing:6px;
  color:var(--gold);text-transform:uppercase;
}
.lh-title{
  margin:0 0 16px;padding-left:18px;border-left:6px solid var(--gold);
  font-size:30px;font-weight:bold;letter-spacing:5px;line-height:1.3;color:var(--navy-800);
}
.lh-desc{
  margin:0 0 22px;padding-left:24px;
  font-size:14.5px;letter-spacing:.5px;color:var(--ink-2);line-height:1.7;
}
.lh-stat{
  display:flex;flex-wrap:wrap;padding-left:24px;
  font-size:13.5px;letter-spacing:.5px;color:var(--ink-2);
}
.lh-stat span{position:relative;padding:0 24px 0 15px;line-height:1.7}
.lh-stat span:first-child{padding-left:15px}
.lh-stat span + span{border-left:1px solid var(--line)}
.lh-stat span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;background:var(--gold);border-radius:50%;
}
.lh-stat b{color:var(--navy-800);font-weight:bold}

/* ---------- 双栏 ---------- */
.list-main{background:var(--paper);padding:50px 0 92px}
.list-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 334px;gap:46px;align-items:start;
}
.list-col{min-width:0}
.post-list{display:flex;flex-direction:column;gap:14px}

/* ---------- 文章卡片 ---------- */
.post-card{
  display:flex;align-items:center;gap:22px;position:relative;
  padding:20px 24px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--line);
  transition:all .24s;
}
.post-card:hover{
  border-left-color:var(--gold);
  box-shadow:0 12px 30px rgba(8,21,39,.09);
  transform:translateX(4px);
}
.post-date{
  flex:none;width:78px;padding:9px 0;text-align:center;
  background:var(--navy-800);
}
.post-date b{display:block;font-size:26px;font-weight:bold;line-height:1.1;color:var(--gold-2)}
.post-date span{display:block;margin-top:3px;font-size:11.5px;letter-spacing:1px;color:rgba(255,255,255,.72)}
.post-main{flex:1 1 auto;min-width:0}
.post-title{
  margin:0 0 11px;font-size:18px;font-weight:bold;line-height:1.5;letter-spacing:.2px;
}
.post-title a{color:var(--navy-800);transition:color .2s}
.post-card:hover .post-title a{color:var(--gold-3)}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--ink-2);
}
.post-meta .pm-item{padding:0 14px;line-height:1.6}
.post-meta .pm-item:first-child{padding-left:0}
.post-meta .pm-item + .pm-item{border-left:1px solid var(--line)}
.post-meta em{font-style:normal;margin-right:6px}
.post-meta b{color:var(--navy-700);font-weight:bold}
.post-go{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;font-size:13px;letter-spacing:1px;
  color:var(--navy-700);border:1px solid var(--line);transition:all .22s;
}
.post-go::after{
  content:"";width:0;height:0;border-top:4px solid transparent;
  border-bottom:4px solid transparent;border-left:6px solid currentColor;
}
.post-go:hover{background:var(--gold);border-color:var(--gold);color:#FFF}
.list-empty{
  padding:46px 0;text-align:center;font-size:15px;letter-spacing:1px;
  color:var(--ink-2);background:var(--paper-2);border:1px dashed var(--line);
}
/* 分页在左栏内 */
.list-col .pager{margin:34px 0 0}

@media (max-width:1100px){
  .list-grid{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
}
@media (max-width:960px){
  .list-grid{grid-template-columns:1fr;gap:34px}
  .list-hero{padding:34px 0 28px}
  .lh-title{font-size:23px;letter-spacing:3px;padding-left:15px;border-left-width:5px}
  .lh-desc,.lh-stat{padding-left:15px}
  .lh-stat{font-size:12.5px}
  .lh-stat span{padding:0 15px 0 13px}
  .list-main{padding:34px 0 66px}
  .post-card{gap:14px;padding:16px 16px 16px 14px}
  .post-date{width:62px}
  .post-date b{font-size:21px}
  .post-title{font-size:17px}
  .post-go{display:none}}

/* ========================================================================
   移动端适配（2026-09-16）
   背景：此前只有零散断点，375/414 实测三处横向溢出
        （首页统计条 424>360、荣誉专利卡 521>360、联系方式卡 388>360），
        导航挤成两行、hero 面板字挤行距松、一览表缩到 328px 看不清。
   做法：768px 主断点 + 480px 微调；导航改汉堡抽屉；表格改横向滑动。
   ===================================================================== */

/* 汉堡按钮（桌面端隐藏） */
.nav-toggle{
  display:none;width:42px;height:38px;padding:0;flex-direction:column;
  justify-content:center;align-items:center;gap:5px;cursor:pointer;
  background:#FFF;border:1px solid var(--line);border-radius:3px;
  transition:border-color .2s,background .2s;
}
.nav-toggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--navy-800);
  transition:transform .26s,opacity .2s;
}
.nav-toggle:hover{border-color:var(--gold);background:var(--paper-2)}
.nav-toggle:hover span{background:var(--gold-3)}
.top-nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top-nav.open .nav-toggle span:nth-child(2){opacity:0}
.top-nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:768px){
  /* ---------- 0. 全局兜底 ---------- */
  body{overflow-x:hidden}
  img{max-width:100%}

  /* ---------- 1. 头部 → 汉堡抽屉 ---------- */
  .header .wrap{
    flex-direction:row;align-items:center;justify-content:space-between;
    min-height:60px;padding:9px 0;gap:10px;width:min(1240px,94%);
  }
  .header .logo{flex:1 1 auto;min-width:0}
  .logo-brand{gap:8px}
  .header .logo img,.logo-brand img{height:36px}
  .logo-brand .txt{height:auto}
  .logo-brand .txt b{font-size:15.5px;letter-spacing:.5px}
  .logo-brand .txt i{font-size:8.5px;letter-spacing:.3px;margin-top:2px}
  .nav-toggle{display:inline-flex}
  .top-nav{position:relative;flex:0 0 auto;display:block}
  .top-nav ul{
    display:none;position:absolute;top:calc(100% + 9px);right:0;left:auto;
    width:min(66vw,238px);flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    height:auto;padding:4px 0;background:#FFF;
    border:1px solid var(--line);border-top:3px solid var(--gold);
    box-shadow:0 20px 44px rgba(8,21,39,.22);z-index:1200;
    max-height:72vh;overflow-y:auto;
  }
  .top-nav.open ul{display:flex}
  .top-nav ul li a{
    height:auto;padding:13px 18px;font-size:15.5px;letter-spacing:.5px;
    justify-content:flex-start;border-bottom:1px solid #F3F1EB;
  }
  .top-nav ul li:last-child a{border-bottom:0}
  .top-nav ul li a::after{display:none}
  .top-nav ul li.active a,.top-nav ul li a:hover{background:var(--paper-2)!important}

  /* ---------- 2. 内页 banner ---------- */
  .page-banner{height:150px}
  .pb-title{font-size:22px;letter-spacing:3px;margin-left:13px}
  .pb-title::before{left:-13px}
  .pb-en{font-size:10px;letter-spacing:2.5px}
  .pb-crumb{font-size:12px}
  .pb-inner{padding-bottom:18px}

  /* ---------- 3. 首页 hero ---------- */
  .hero-title{font-size:30px;letter-spacing:3px}
  .hero-title .smc{margin-right:3px;letter-spacing:1px}
  .hero-kicker{font-size:11px;letter-spacing:5px;margin-bottom:12px}
  .hero-panel{padding:20px 14px}
  .hero-topinfo{font-size:12px;gap:8px;margin-bottom:15px;padding-bottom:12px}
  .hero-topinfo .tel b{font-size:13.5px;margin-left:4px}
  .hero-rule{width:78px;height:3px;margin:15px auto 13px}
  .hero-sub{font-size:14px;letter-spacing:2px;line-height:1.7}
  .hero-tags{gap:12px 22px;margin-top:18px}
  .hero-tags li{font-size:15px;letter-spacing:1px;padding-left:18px}
  .hero-tags li::before{width:10px;height:10px}
  /* 三按钮强制同行（2026-09-18）
     现象：iPhone 竖屏（320~390）第三个按钮「动画演示」掉到第二行。
     根因：① .hero-inner 是 flex column + align-items:center，而 .hero-actions
             在 HTML 里是它的直接子元素（在 .hero-panel 之外！），作为 flex item
             宽度被收缩成 max-content = 215px —— 实测 320/390/430 三种视口下
             容器宽恒为 215px，不是 288/351/387；
           ② 三按钮实宽 108+126.5+110 = 344.5px + gap，塞进 215px 只能换行；
           ③ 430 上虽挤成一行，但横溢 2.8px 压到面板边。
     可用宽（= .hero-inner 内容宽，padding 左右各 5%）实为：
        288(320) / 337.5(375) / 351(390) / 387(430) / 691(768)
     改法：① width:100% 让容器撑满，justify-content:center 才真正生效；
           ② 按钮 flex:0 0 auto 按内容宽排列 —— 不要用 flex:1 平分，
              否则 5 字的「电视专题片」会被压到文字溢出按钮（实测溢出 5px）；
           ③ 左右内边距 clamp 跟随视口：320 时 13.4px，最窄处仍余 18px。 */
  .hero-actions{margin-top:22px;width:100%;gap:8px;flex-wrap:nowrap;justify-content:center}
  .hero-actions .btn{
    flex:0 0 auto;white-space:nowrap;text-align:center;
    font-size:13.5px;letter-spacing:1.5px;
    padding:12px clamp(8px,4.2vw,30px);
  }

  /* 统计条：4 列 → 2 列（原 1fr 被 38px 大字撑破，必须 minmax(0,1fr)） */
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 0}
  .stat{min-width:0;padding:12px 6px}
  .stat .num{font-size:clamp(24px,7.6vw,34px)}
  .stat .num i{font-size:.55em}
  .stat .label{font-size:11.5px;letter-spacing:.5px;margin-top:6px}
  .stat:nth-child(odd)::before{display:none}

  /* ---------- 4. 荣誉：专利卡 + 证书 ---------- */
  .patent-sec{padding:30px 0 4px}
  .patent-lead{font-size:13.5px;padding-left:12px;margin:6px 0 18px}
  .patent-grid{grid-template-columns:1fr;gap:14px}
  .patent-card{padding:16px 14px 10px}
  .patent-card .pc-head{flex-wrap:wrap;gap:4px 10px;margin-bottom:9px;padding-bottom:8px}
  .patent-card .pc-no{font-size:21px}
  .patent-card .pc-head b{font-size:16px;letter-spacing:1px}
  .patent-card .pc-head .cnt{margin-left:0;flex:1 0 100%;font-size:11px}
  .patent-card.wide ul{column-count:1;column-gap:0}
  .patent-card li{font-size:13.5px;gap:6px;padding:5px 0}
  .patent-card li i{flex:0 0 24px}
  .patent-card li em{font-size:11.5px}
  .content-grids .wrap .grid{width:100%}
  .content-grids .grid.cert-card .cert-shot{height:250px}

  /* ---------- 5. 联系方式 ---------- */
  .contact-sec{padding:34px 0 16px}
  .contact-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .contact-card{padding:24px 16px 20px}
  .contact-card h4{font-size:13.5px;letter-spacing:2px}
  .contact-card p{font-size:15.5px;line-height:1.7}

  /* ---------- 6. 工程实例 ---------- */
  .proj-grid{gap:16px}
  .proj-pic{height:auto}
  .proj-spec li{font-size:11.5px;padding:3px 7px}
  /* 一览表：手机上保持原生 973px 清晰度，改为横向滑动 */
  .proj-table-frame{max-width:100%;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .proj-table-frame img{width:973px;max-width:none}
  .proj-table-tip{font-size:12px;padding:0 8px}
  .proj-table-sec::after{
    content:"← 左右滑动查看完整表格 →";display:block;text-align:center;
    font-size:12px;color:#8A97A6;letter-spacing:1px;margin-top:8px;
  }

  /* ---------- 7. 列表页（我的博客 / 技术资料） ---------- */
  .list-hero{padding:26px 0 22px}
  .lh-en{font-size:10.5px;letter-spacing:3px}
  .lh-title{font-size:21px;letter-spacing:2px;padding-left:13px;border-left-width:4px}
  .lh-desc{font-size:13.5px;padding-left:13px}
  .lh-stat{font-size:12px;padding-left:13px;flex-wrap:wrap;gap:6px 0}
  .lh-stat span{padding:0 11px 0 9px}
  .list-main{padding:24px 0 50px}
  .post-list{gap:11px}
  .post-card{gap:11px;padding:13px}
  .post-date{width:54px;padding:9px 0}
  .post-date b{font-size:19px}
  .post-date span{font-size:10px;letter-spacing:0}
  .post-title{font-size:16.5px;line-height:1.5;margin-bottom:8px}
  .post-meta{font-size:12px}
  .post-meta .pm-item{padding:0 10px}
  .list-col .pager{margin:26px 0 0}

  /* ---------- 8. 分页 ---------- */
  .pager{padding:24px 0 4px;margin:24px 0 0}
  .pager ul{gap:6px}
  .pager li.p_total,.pager li.p_current,.pager li.p_nolink,
  .pager li a:link,.pager li a:visited{padding:8px 12px;font-size:13px;min-width:34px}
  .pager li input[type="text"]{width:46px;padding:7px}

  /* ---------- 9. 详情页 ---------- */
  .art-hero{padding:26px 0 22px}
  .art-title{font-size:22px;letter-spacing:1px;padding-left:13px;border-left-width:4px;line-height:1.4}
  .art-meta{font-size:12px;padding-left:13px;gap:6px 0}
  .art-meta .mi{padding:0 10px}
  .art-card{padding:22px 14px 0}
  .art-body{min-height:0}
  /* 正文宽表：手机上改块级 + 横向滑动，避免把整页撑破 */
  .art-card #content table{
    display:block;max-width:100%;width:100%!important;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* 正文嵌入播放器（老文章的 Flash 附件）：限宽并保持 4:3 占位 */
  .art-card #content object,.art-card #content embed,
  .art-card #content iframe,.art-card #content video{
    width:100%!important;height:auto!important;aspect-ratio:4/3;
  }
  .art-actions{gap:10px;margin-top:30px;padding:16px 0 20px}
  .art-actions .back{flex:1 1 100%;justify-content:center;padding:10px 16px;font-size:13.5px}
  .art-actions .tools{gap:14px;width:100%;justify-content:space-between;flex-wrap:wrap}
  .art-actions .tools a,.art-actions .tools button{font-size:12.5px}
  .side-body{padding:8px 14px 16px}
  .side-card > h3{padding:13px 14px 13px 18px;font-size:14px}
  .read-more-list a{font-size:15px}
  .art-cta{padding:22px 16px}
  .art-cta .t b{font-size:17px;letter-spacing:1px}
  .art-cta .t i{font-size:12px}
  .cert-lightbox img{max-width:92vw;max-height:74vh}

  /* ---------- 10. 动画演示页 ---------- */
  .anim-page{padding:26px 0 40px}
  .anim-head h3.sec-h{font-size:21px;letter-spacing:2px;gap:8px}
  .anim-lead{font-size:13.5px;line-height:1.85}
  .anim-screen{min-height:220px;padding:8px}
  .anim-stage-bar{padding:10px 13px}
  .anim-stage-bar .title{font-size:13px;margin-left:8px;letter-spacing:1px}
  .anim-step{padding:16px 14px}
  .anim-step b{font-size:15.5px}
  .anim-step p{font-size:13px}
  .anim-note{padding:14px;gap:11px}
  .anim-cta{padding:22px 16px;gap:14px}
  .anim-cta .txt b{font-size:18px}
  .anim-cta .txt p{font-size:13px}

  /* ---------- 11. 通用区块 / 页脚 ---------- */
  .sec{padding:38px 0}
  .sec-h{font-size:21px;letter-spacing:2px}
  .copy-right{padding:14px 10px!important}
  .copy-right p{font-size:11.5px!important;line-height:1.8!important}
  .footer{padding:30px 0 6px!important}
}

@media (max-width:480px){
  .hero-title{font-size:26px;letter-spacing:2px}
  .hero-sub{font-size:13px}
  /* .hero-tags li 的字号改装在文件末尾的 @media (max-width:584px)，那边是 clamp */
  /* 更窄的手机：字号与字距再收一档（内边距由 768 断点的 clamp 自动跟随视口）。
     320px 时三按钮实占约 270px / 可用 288px，两侧各留约 9px 余量 */
  .hero-actions{gap:6px}
  .hero-actions .btn{font-size:13px;letter-spacing:0}
  .stats-grid{padding:20px 0}
  .stat .num{font-size:clamp(22px,7.8vw,30px)}
  .post-title{font-size:16px}
  .post-date{width:50px}
  .post-date b{font-size:17px}
  .lh-title{font-size:19px}
  .contact-card p{font-size:15px}
  .top-nav ul{width:min(72vw,220px)}
  .art-title{font-size:20px}
}

/* ========================================================================
   首页 hero 四标签强制同行（2026-09-18）
   现象：iPhone 竖屏下「高层建筑桩基 / 复杂软基加固 / 深基坑支护 / 防渗墙工程」
        排成 2 行（430 上更差，是 3+1）。
   根因：一行 22 个汉字 + 4 个金钻（每个 18px 左内距）+ 3 个 22px 间隙
        = 实需 424px；而可用宽（.hero-panel 内容宽 = 0.9×视口 − 28）只有
        260(320) / 296(360) / 309.5(375) / 323(390) / 359(430) / 404(480)。
        缺口 92~164px，且**光收字号补不回来**：金钻占 4×18=72px、间隙占 66px，
        合计 138px —— 320 下只剩 122px 留给 22 个汉字（等于字号 5.5px，不可用）。
   做法：只在「金钻版根本排不下」的区间（≤584px）切紧凑一行：
        ① 撤金钻、去左侧内距、字距归零，改用 8px 间隙分隔；
        ② 字号 clamp 线性跟随视口：f = 3.9vw − 2.2px，下限 10.5px、上限 15px
           （上限与 768 断点一致，避免和上面那档打架）。
           验算（可用内容宽 / 实占 / 余量）：320 → 260/255/5，
           360 → 296/284.5/11.5，375 → 309.5/297.5/12，390 → 323/310/13，
           430 → 359/344.5/14.5
        ③ 保留 flex-wrap:wrap —— 极窄屏（<300px，折叠屏外屏）宁可回退两行，
           也不能横向溢出压出面板。
        ④ 金钻版实测需 **490px** 可用内容宽（4 项 114+114+98+98 + 3×22 间隙），
           而可用内容宽 = 0.9×视口 − 面板内距 28 − 面板左右边框 2 = 0.9×视口 − 30
           → 视口 ≥578px 才排得下（实测 578 时只剩 0.22px 余量，577 就换行）。
           所以紧凑档取到 584px，让金钻版从 585px 起接管（余量 ≥6.5px），
           577/578 这种"两边都差一点"的空档才被彻底堵住。
   ===================================================================== */
@media (max-width:584px){
  .hero-tags{gap:4px 8px;flex-wrap:wrap;justify-content:center}
  .hero-tags li{
    padding-left:0;letter-spacing:0;white-space:nowrap;
    font-size:clamp(10.5px,calc(3.9vw - 2.2px),15px);
  }
  .hero-tags li::before{display:none}   /* 金钻是纯装饰，宽度让给文字 */
}

/* ========================================================================
   链接字号兜底（2026-09-16）
   根因：前台模板通过 <%=style.Css%> 加载了后台样式表 style/iwms/style.css，
        里面 a.nLink{font-size:14px;padding-left:15px;background:url(iwms.gif)}；
        而 imgbsb/main.css 里有 a:link{font-size:12px}。两者特异性同为 (0,0,1,1)，
        但 main.css 后加载 → 12px 胜出。
        结果：IWMS LinkTitle 输出的标题链接（<a class="nLink">）全被压成 12px
        —— .post-title 自身 22px，a 却是 12px，标题看着袖珍，还带后台小图标+15px 缩进。
   做法：还原为「继承父级字号/行高」，去掉后台图标与缩进。窄范围、只针对 nLink。
   ===================================================================== */
a.nLink,a.nLink:link,a.nLink:visited,a.nLink:hover{
  font-size:inherit!important;line-height:inherit!important;
  padding-left:0!important;background:none!important;
}
/* 列表卡片标题：显式锁死字号，防止再被继承链意外改小 */
.post-title a.nLink{font-size:inherit!important}
.read-more-list a.nLink{font-size:inherit!important}

/* ========================================================================
   导航 hover 双下划线修复（2026-09-16）
   现象：首页导航悬停只有一根金色短线，内页却多出一根文字下划线。
   根因：内页模板经 inc/html_head.inc 的 <link href="<%=style.Css%>"> 加载了
        style/iwms/style.css，其 23 行 a:hover{text-decoration:underline} 是
        2010 年的老写法；首页 index1.aspx 不加载该表，所以首页正常。
        theme.css 的 .top-nav li a:hover 只声明 color、未声明 text-decoration，
        不构成竞争 → 旧表下划线直接生效，与 ::after 金线叠成两根。
   做法：主题内统一关闭 hover 下划线（反馈改用变色 + 金色短线）。
        需要下划线的处所（.proj-table-tip a / .anim-note a 等）已各自显式声明，
        正文链接用的是 border-bottom 金线，均不受影响。
   ===================================================================== */
a:hover,a:focus,a:active{text-decoration:none}
.top-nav a,.top-nav a:link,.top-nav a:visited,
.top-nav a:hover,.top-nav a:focus,.top-nav a:active{
  text-decoration:none!important;
}

/* ========================================================================
   内容页正文：嵌入播放器 / 宽表 / 超长串 防撑破（2026-09-16）
   背景：老文章正文嵌的是 Flash 播放器 <object width="480" height="360">，
        内联 480px 把 #content → .art-body → .art-card 一路撑到 540px，
        375 视口下整页横向溢出 194px，文字被切到屏幕外。
        另有连续无空格中文长串，需要允许任意断行。
   做法：嵌入元素限宽；容器补 min-width:0 允许被压缩；允许任意断行。
   ===================================================================== */
.art-card,.art-body{min-width:0}
.art-card #content{min-width:0;overflow-wrap:break-word;word-break:break-word}
.art-card #content object,.art-card #content embed,
.art-card #content iframe,.art-card #content video{
  max-width:100%!important;
}

/* ========================================================================
   首页区块标题（.sec-head h2）窄屏单行（2026-09-18）
   现象：iPhone 竖屏下「三类桩法 ｜ 复合成桩」「国家级技术 ｜ 核心优势」
        折成 2 行（断在「｜」后，第二行只剩「复合成桩」四个字）。
   根因：.sec-head h2 只有基础样式 34px + letter-spacing:4px，
        **窄屏完全没有响应式规则**（768 断点里只改了 .sec-h，那是另一个类）。
        实测（Range 量文字宽，与视口无关，纯线性）：
          最长标题「国家级技术 ｜ 核心优势」12 字符 → W(f, ls) = 10.598·f + 12·ls
          34px/4px → 408.27px（次长「三类桩法 ｜ 复合成桩」11 字符 → 370.27px）
        而可用宽 = .sec-head 宽 = .wrap 宽 = 0.92×视口
          = 294.4(320) / 331.2(360) / 345(375) / 358.8(390) / 395.6(430)
        要单行需 W ≤ 0.92·视口 → 视口 ≥ 444px，所以 430 都还差 12.7px。 
   做法：≤520px 切"紧凑标题"：
        ① 字号线性跟随视口 f = 7.5vw，下限 16px（安全网）、上限 32px
           —— 32px 是 427~520 区间取的，比原 34px 只小 2px，观感几乎不变；
        ② 字距改 .09em 随字号自适应（32px 时 ≈2.9px，24px 时 ≈2.2px），
           不再用固定的 4px —— 固定值在缩字号后占比会过大；
        ③ **不加 white-space:nowrap**：万一某设备字体更宽，宁可回退两行（仍可读），
           也不要横向溢出被 body{overflow-x:hidden} 裁掉半个字。
           验算（可用宽 / 文字宽 / 余量）：
             320 → 294.4 / 280.3 / 14.1     375 → 345.0 / 328.5 / 16.5
             390 → 358.8 / 341.6 / 17.2     430 → 395.6 / 373.7 / 21.9
             480 → 441.6 / 373.7 / 67.9
        ④ 断点取 520 而非 444：34px+4px 版需 408.27px 可用宽（视口 ≥444），
           521 时可用 479.3px 已单行 → 521~768 保持原样，边界不留空档。
   影响面：.sec-head 全站**只有 template/index1.aspx 用**（3 处标题），无外溢。
   ===================================================================== */
@media (max-width:520px){
  .sec-head h2{font-size:clamp(16px,7.5vw,32px);letter-spacing:.09em}
}

/* ========================================================================
   会员中心（个人资料 / 安全设置 / 会员资料 / 好友 / 充值 / 消费 / 积分 / 签收）
   2026-09-18
   ---------------------------------------------------------------------
   现象：打开 memberModify.aspx?id=1 是「裸头部 + 蓝条旧导航 + 老边框表格」——
        .header 实测高 363px、Logo 按原图 200×200 撑开、导航被压成 12px 竖排小字；
        头部下面还叠着一条 iwms 旧导航条（#navbar，与新 .top-nav 是同一份菜单）；
        正文是 style/iwms/style.css 的 .mframe/.lframe 老框架：25px 蓝底标题条 +
        1px #ace 边框，输入框只有 152×18px / 12px 字号。
   根因（两条，都在服务端，不在样式）：
        ① inc/html_head.inc 只引了 <link href="<%=style.Css%>"> 这一张旧表，
           **没有引 theme.css**。而 template/*.aspx 每个都自己引了 theme.css
           → 栏目页正常、根目录页（会员中心/论坛/搜索/登录…共 26 个）全裸。
           → 已在 inc/html_head.inc 补上 <link rel="stylesheet"
             href="web/css/theme.css">（放在 style.Css 之后，保证覆盖旧表）。
        ② head.inc 的横幅判定 `if (pbId == "1")` 只看 id 不看页面，
           而「动画演示」其实只是单页 spage.aspx?id=1
           → 误伤 memberModify/memberProfile/remark 三个 ?id=1 的页，
             它们被套上了「ANIMATION / 动画演示」抬头。
           → 已加页面判定（pbFile == "spage.aspx"），并给 member*.aspx 补了
             各自的「会员中心」抬头。
   本段做什么：把 .mframe/.lframe 老框架翻成主题的「白卡 + 金色顶线」；
        正文表格改 CSS Grid（标签列 126px 右对齐 + 值列自适应）；
        控件统一 40px 高 / 14px 字号 / 4px 圆角 / 金色聚焦环；
        右栏会员菜单做成整行可点、当前项金色高亮（.cur 由 inc/memberNav.inc 的
        内联脚本按 location 比对后打上）。
   作用域：本段所有选择器都以 body.mc-page 开头。class 打在 <body> 上，
        由 12 个会员页各自声明（memberModify / memberFunc / memberCharge /
        memberCharges / memberPaid / memberFriends / memberSignIns /
        memberProfile / memberList / memberreg / memberLostpass /
        memberActive）。两级组合：
          body.mc-page                —— 卡片外观 / 控件 / 右栏菜单（全部会员页）
          body.mc-page.mc-form        —— 表单表格转 Grid（仅 7 个带右栏菜单的页）
          body.mc-page.mc-wide        —— 内容卡撑到 1200px（会员资料/会员名录/会员注册）
        最初这里用的是 body:has(.mc-nav)，后来换掉：会员资料/会员名录/会员注册/
        找回密码/账号激活这 5 个页不含 inc/memberNav.inc，:has(.mc-nav) 永远命不中，
        它们只能维持老框架满宽外观。改用 body class 后顺带不再依赖 :has()。
        template/*.aspx 里同名的 .mframe/.lframe/.tm/.mm
        （index2 / topic1 / topic2 / list4 / list5 / list_soft1 …）无此 class，不受影响。
        若某个会员页被新加进来而漏打 class，它只是退回改造前的样子，不会坏版。
   ===================================================================== */

/* --- 11.0 清掉与新头部重复的旧导航条（这两条是全站的，非会员页专属） ------ */
/* #navbar 渲染的是 inc/navclass.inc，与 head.inc 的 .top-nav 是同一份菜单，
   在根目录页上必然重复；旧的 .m 还是 #6BBCED 蓝条（style/iwms/style.css:117）。 */
#navbar{display:none!important}
/* #navsub 仅在「.m 里没有任何元素」时隐藏 —— 会员页的 #navsub .m 是空的
   （白占 25px 高度），而 template/list5.aspx 等把 StepPath 面包屑放在里面，要保留。
   注意：不能写成 #navsub:has(.m:not(:has(*))) —— CSS 规范禁止 :has() 嵌套，
   整个选择器会失效（实测规则被整条丢弃，navsub 照样显示）。
   改成 :not(:has(...)) 形式：:not() 里用 :has() 是合法的。 */
#navsub:not(:has(.m > *)){display:none!important}

/* --- 11.1 会员中心布局：主内容卡 + 右栏菜单卡 --------------------------- */
/* 老结构：#middle > table > tr > td(主内容) + td[width=160](右栏)
   → 改成 grid：主列自适应、右栏固定 276px，整体居中到 1200px 与全站 .wrap 对齐。 */
body.mc-page #middle > table{
  display:grid;
  grid-template-columns:minmax(0,1fr) 276px;
  gap:30px;align-items:start;
  width:min(1200px,92%)!important;
  margin:46px auto 62px!important;
  border:0;
}
body.mc-page #middle > table > tbody,
body.mc-page #middle > table > tbody > tr{display:contents}
body.mc-page #middle > table > tbody > tr > td{
  display:block;
  width:auto!important;          /* 覆盖 <td width="160"> */
  padding:0;border:0;vertical-align:top;
}

/* --- 11.2 卡片外观：复用主题「白卡 + 金色顶线」 ------------------------- */
/* [class*="mframe"] 同时覆盖 mframe / mframe2 / mframe3 —— aspx 里主框架类名
   由 GetFrameCss(style.CssXxx,"mframe") 决定，可能被配置成 mframe2。 */
body.mc-page [class*="mframe"],
body.mc-page .lframe{
  float:none!important;             /* 老框架的 .mR{margin-right:5px} 一并清掉 */
  margin:0!important;
  width:auto!important;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:4px;
  box-shadow:0 10px 30px rgba(8,21,39,.07);
  overflow:hidden;                  /* 标题条不越出圆角 */
}
/* 标题条：原 .mframe .tm{height:25px;line-height:25px;background:url(bg.gif);border:1px solid #ace} */
body.mc-page [class*="mframe"] > .tm,
body.mc-page .lframe > .tm{
  height:auto!important;line-height:1.35!important;
  background:none!important;border:0!important;
  border-bottom:1px solid var(--line)!important;
  padding:24px 34px 18px!important;
}
body.mc-page .lframe > .tm{padding:20px 20px 16px!important}
/* 标题文字：金色竖线 + 藏青粗体（与内页 .about-header h3 同一套语汇） */
body.mc-page [class*="mframe"] span.tt,
body.mc-page .lframe span.tt{
  display:inline-block;
  padding:0 0 0 15px!important;
  border-left:4px solid var(--gold);
  font-size:19px!important;font-weight:bold!important;
  color:var(--navy-800)!important;letter-spacing:3px!important;line-height:1.3;
}
body.mc-page .lframe span.tt{
  font-size:16.5px!important;letter-spacing:4px!important;padding-left:13px!important;
}
/* 内容区：原 .mm{background:#fff;padding:3px;border:1px solid #ace;border-top:0}
   且 aspx 内联了 style="padding:10px" → 必须 !important 才能压住。 */
body.mc-page [class*="mframe"] .mm{
  background:var(--paper)!important;border:0!important;
  padding:28px 34px 32px!important;
}
body.mc-page .lframe .mm{
  background:none!important;border:0!important;padding:0!important;
}
/* 老框架的圆角拼接层（style.css 里本就 display:none，这里兜底） */
body.mc-page [class*="mframe"] > .tl,
body.mc-page [class*="mframe"] > .tr,
body.mc-page [class*="mframe"] > .bl,
body.mc-page [class*="mframe"] > .br,
body.mc-page .lframe > .tl,
body.mc-page .lframe > .tr,
body.mc-page .lframe > .bl,
body.mc-page .lframe > .br,
body.mc-page [class*="mframe"] > .wrapper > .ml,
body.mc-page [class*="mframe"] > .wrapper > .mr,
body.mc-page .lframe > .wrapper > .ml,
body.mc-page .lframe > .wrapper > .mr{display:none!important}

/* --- 11.3 正文表单：老 2 列表格改 CSS Grid ------------------------------- */
/* 原表格 width="95%" align="center"，靠 <td width="200"> 撑标签列，
   实测标签列 204px、值列 966px，输入框却只有 152px —— 大片留白。
   ⚠ 两道闸门，缺一不可（这是本段最容易踩的坑）：
   ① .mc-form —— 只有带右侧「个人中心」菜单的表单页挂这个 class。
      会员注册(memberreg)的条款表、会员名录(memberList)的列表都是
      .mm > table，一旦被算进来，整块内容会被压进 126px 的第一列。
   ② :not([class*="grid"]) —— 充值记录/消费记录/文档签收 的 asp:DataGrid
      渲染出来就是 <table class="grid">，且是 .mm 的直接子元素。
      11.3 曾把它们的表头挤成两列（实测：ID/充值金额/充值日期/是否到账
      四个表头各自占一行、数据行散架）。 */
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]){
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  column-gap:20px;align-items:center;
  width:100%!important;margin:0!important;
  border-collapse:separate;border-spacing:0;
}
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody,
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr{display:contents}
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td{
  display:block;
  width:auto!important;            /* 覆盖 <td width="200"> */
  border:0;padding:7px 0;vertical-align:middle;
}
/* 标签列（用 :not([colspan]) 把整行的提示/按钮行排除掉） */
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td:first-child:not([colspan]){
  text-align:right;font-size:14px;line-height:1.5;color:var(--ink-2);
}
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td:first-child:not([colspan]) strong{
  font-weight:400;color:inherit;
}
/* 整行（colspan="2"）：提示条与提交按钮行 */
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td[colspan="2"]{
  grid-column:1 / -1;text-align:left;padding:0;
}

/* --- 11.4 控件：统一 40px 高 / 14px / 4px 圆角 / 金色聚焦环 -------------- */
body.mc-page [class*="mframe"] .mm input[type="text"],
body.mc-page [class*="mframe"] .mm input[type="password"],
body.mc-page [class*="mframe"] .mm select,
body.mc-page [class*="mframe"] .mm textarea{
  font-family:inherit;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:none;outline:none;vertical-align:middle;
  transition:border-color .18s,box-shadow .18s;
}
body.mc-page [class*="mframe"] .mm input[type="text"],
body.mc-page [class*="mframe"] .mm input[type="password"],
body.mc-page [class*="mframe"] .mm select{height:40px;padding:0 12px}
body.mc-page [class*="mframe"] .mm select{padding-right:30px}
body.mc-page [class*="mframe"] .mm textarea{
  width:min(100%,620px)!important;padding:10px 12px;line-height:1.75;resize:vertical;
}
body.mc-page [class*="mframe"] .mm input[type="text"]:focus,
body.mc-page [class*="mframe"] .mm input[type="password"]:focus,
body.mc-page [class*="mframe"] .mm select:focus,
body.mc-page [class*="mframe"] .mm textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
/* 宽度按原 size 属性归三档，消掉 152px 的参差 */
body.mc-page [class*="mframe"] .mm input[size="4"]{width:88px;text-align:center}
body.mc-page [class*="mframe"] .mm input[size="10"]{width:140px}
body.mc-page [class*="mframe"] .mm input[size="20"]{width:min(300px,100%)}
body.mc-page [class*="mframe"] .mm input[size="50"]{width:min(100%,560px)}
body.mc-page [class*="mframe"] .mm select#bloodtype,
body.mc-page [class*="mframe"] .mm select#edu,
body.mc-page [class*="mframe"] .mm select#job{min-width:150px}
body.mc-page [class*="mframe"] .mm select#birthMonth,
body.mc-page [class*="mframe"] .mm select#birthDay{width:82px;min-width:0}
body.mc-page [class*="mframe"] .mm #birthYear{margin-right:4px}
body.mc-page [class*="mframe"] .mm #birthMonth,
body.mc-page [class*="mframe"] .mm #birthDay{margin:0 4px}
/* 单选 / 复选 */
body.mc-page [class*="mframe"] .mm input[type="radio"],
body.mc-page [class*="mframe"] .mm input[type="checkbox"]{
  width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;
  accent-color:var(--gold-3);cursor:pointer;
}
body.mc-page [class*="mframe"] .mm label{font-size:14px;color:var(--ink);cursor:pointer}
/* 性别 RadioButtonList 渲染成一张内嵌表，去掉边框让它与其它控件同基线 */
body.mc-page [class*="mframe"] .mm table#male{border:0!important;margin:0!important}
body.mc-page [class*="mframe"] .mm table#male td{
  padding:0 26px 0 0!important;border:0!important;
}

/* --- 11.5 校验摘要 / 结果提示 ------------------------------------------ */
body.mc-page [class*="mframe"] .mm #myLabel{
  display:block!important;text-align:center!important;
  margin:0 0 20px!important;padding:11px 16px!important;
  font-size:14px;line-height:1.6;
  border:1px solid rgba(201,162,39,.38);border-radius:4px;background:#FFFBF1;
}
body.mc-page [class*="mframe"] .mm #myLabel:empty{display:none!important}
/* ValidationSummary 自带内联 style="padding-left:200px"，在网格里会把提示推到右半屏 */
body.mc-page [class*="mframe"] .mm div[style*="padding-left:200px"]{
  padding-left:0!important;font-size:14px;
}
body.mc-page [class*="mframe"] .mm div[style*="padding-left:200px"] ul{
  margin:0 0 14px;padding-left:20px;
}

/* --- 11.6 提交按钮 ----------------------------------------------------- */
body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td[colspan="2"]:has(input[type="submit"]){
  margin-top:14px;padding-top:22px!important;
  border-top:1px solid var(--line);text-align:center;
}
body.mc-page [class*="mframe"] .mm input[type="submit"]{
  height:44px;min-width:140px;padding:0 30px;
  font-family:inherit;font-size:15px;font-weight:bold;
  letter-spacing:5px;text-indent:5px;      /* 抵消末字后多出的字距，视觉居中 */
  color:#fff;background:var(--navy-800);
  border:0;border-radius:4px;cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .1s;
}
body.mc-page [class*="mframe"] .mm input[type="submit"]:hover{
  background:var(--gold-3);box-shadow:0 8px 20px rgba(156,122,20,.28);
}
body.mc-page [class*="mframe"] .mm input[type="submit"]:active{transform:translateY(1px)}
/* 账号激活(memberActive)的按钮是原生 <button type="submit">激活</button> ——
   不是 asp:Button（那才渲染成 input[type=submit]），上面几条盖不到，
   于是它一直是浏览器默认的小绿块。这里补一套，外观与 input 按钮对齐。 */
body.mc-page .mm button[type="submit"]{
  height:44px;min-width:140px;padding:0 30px;
  font-family:inherit;font-size:15px;font-weight:bold;
  letter-spacing:5px;text-indent:5px;
  color:#fff;background:var(--navy-800);
  border:0;border-radius:4px;cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .1s;
}
body.mc-page .mm button[type="submit"]:hover{
  background:var(--gold-3);box-shadow:0 8px 20px rgba(156,122,20,.28);
}
body.mc-page .mm button[type="submit"]:active{transform:translateY(1px)}

/* --- 11.7 安全设置：密码强度条（原 <table id="sf_tb" width="120" height="30">） -- */
/* 原来是三个灰/绿方格（.sf_b 灰、.sf_a 绿），改成红/黄/绿的强度条。 */
body.mc-page [class*="mframe"] .mm #sf_tb{
  width:auto!important;height:auto!important;
  margin:12px 0 0!important;background:none!important;
  border-collapse:separate;border-spacing:6px 0;
}
body.mc-page [class*="mframe"] .mm #sf_tb td{
  width:66px!important;height:26px!important;padding:0!important;border:0!important;
  border-radius:3px;background:#EDF0F4!important;color:#9AA7B4!important;
  font-size:12px!important;font-weight:bold!important;line-height:26px!important;
  text-align:center;transition:background .2s,color .2s;
}
body.mc-page [class*="mframe"] .mm #sf_tb td.sf_a{color:#fff!important}
body.mc-page [class*="mframe"] .mm #sf_tb td:nth-child(1).sf_a{background:#D9534F!important}
body.mc-page [class*="mframe"] .mm #sf_tb td:nth-child(2).sf_a{background:#E0A32E!important}
body.mc-page [class*="mframe"] .mm #sf_tb td:nth-child(3).sf_a{background:#2E9E5B!important}
/* 「安全性」原本是 float:left + 后面跟一个独立 div（强度表），收成一行 */
body.mc-page [class*="mframe"] .mm td > div[style*="float:left"]{
  float:none!important;display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--ink-2);
}

/* --- 11.8 右栏会员菜单：整行可点 + 当前项金色高亮 ----------------------- */
body.mc-page .mc-nav ul{
  list-style:none!important;margin:0!important;
  padding:0!important;             /* aspx 内联了 padding:0 0 0 2em */
  line-height:normal;
}
body.mc-page .mc-nav li{
  margin:0;border-bottom:1px solid var(--line);
}
body.mc-page .mc-nav li:last-child{border-bottom:0}
body.mc-page .mc-nav a,
body.mc-page .mc-nav a:link,
body.mc-page .mc-nav a:visited{
  display:block;position:relative;
  height:48px;line-height:48px;padding:0 22px;
  font-size:14.5px;color:var(--ink);letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s,color .18s,padding-left .18s;
}
body.mc-page .mc-nav a::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:18px;background:var(--gold);
  transform:translateY(-50%) scaleY(0);transition:transform .2s;
}
body.mc-page .mc-nav a:hover,
body.mc-page .mc-nav a:focus{
  background:var(--paper-2);color:var(--gold-3);padding-left:26px;
}
body.mc-page .mc-nav a.cur{
  background:var(--paper-2);color:var(--gold-3);font-weight:bold;padding-left:26px;
}
body.mc-page .mc-nav a.cur::before{transform:translateY(-50%) scaleY(1)}

/* --- 11.9 窄屏 --------------------------------------------------------- */
@media (max-width:960px){
  body.mc-page #middle > table{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    width:min(100%,92%)!important;
    margin:30px auto 46px!important;
  }
}
@media (max-width:640px){
  body.mc-page [class*="mframe"] > .tm,
  body.mc-page .lframe > .tm{padding:18px 18px 14px!important}
  body.mc-page [class*="mframe"] .mm{padding:20px 18px 24px!important}
  body.mc-page [class*="mframe"] span.tt{font-size:17px!important;letter-spacing:2px!important}
  /* 手机上没有 126px 标签列的余地 → 标签移到控件上方（单列） */
  body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]){
    grid-template-columns:minmax(0,1fr);column-gap:0;align-items:stretch;
  }
  body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td{padding:0}
  body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td:first-child:not([colspan]){
    text-align:left;font-size:13.5px;padding:10px 0 0!important;
  }
  body.mc-page.mc-form [class*="mframe"] .mm > table:not([class*="grid"]) > tbody > tr > td:not(:first-child):not([colspan]){
    padding:3px 0 10px!important;
  }
  body.mc-page [class*="mframe"] .mm input[size="20"],
  body.mc-page [class*="mframe"] .mm input[size="50"],
  body.mc-page [class*="mframe"] .mm textarea{width:100%!important}
  body.mc-page [class*="mframe"] .mm input[type="submit"]{width:100%}
  body.mc-page .mm button[type="submit"]{width:100%}
}

/* --- 11.10 无右栏菜单的会员页：内容区定位 ------------------------------- */
/* 会员资料(#middle > .lframe)、会员名录(#middle > .mframe)、
   会员注册(#middle > form > .mframe) 这三页没有 11.1 那种两栏结构，
   老框架的 .mR{float:left} 让它们通栏贴边（实测 1440px 宽、x=0），
   与新头部/横幅对不上 —— 统一居中到 1200px。 */
body.mc-page.mc-wide #middle > .mframe,
body.mc-page.mc-wide #middle > .lframe,
body.mc-page.mc-wide #middle > form > .mframe{
  float:none!important;
  width:min(1200px,92%)!important;
  margin:46px auto 62px!important;
}
/* 找回密码 / 账号激活：老的是 aspx 内联 width:300px 的居中盒
   （inline style 压不过 !important），里面输入框只有 122×18px。
   放宽到 460px，40px 高的控件才不挤。:not(.mc-wide) 保证不碰上面三页。 */
body.mc-page:not(.mc-wide) #middle > .mframe,
body.mc-page:not(.mc-wide) #middle > .lframe,
body.mc-page:not(.mc-wide) #middle > form > .mframe{
  float:none!important;
  width:min(460px,92%)!important;
  margin:46px auto 62px!important;
}
@media (max-width:640px){
  body.mc-page.mc-wide #middle > .mframe,
  body.mc-page.mc-wide #middle > .lframe,
  body.mc-page.mc-wide #middle > form > .mframe,
  body.mc-page:not(.mc-wide) #middle > .mframe,
  body.mc-page:not(.mc-wide) #middle > form > .mframe{margin:28px auto 40px!important}
}

/* --- 11.11 数据表（asp:DataGrid / .grid）：老蓝框表改主题表 ------------- */
/* 影响：充值记录 / 消费记录 / 文档签收（DataGrid CssClass="grid"）、
   会员名录（<table class="grid">）。原来 1px 蓝框 + #EBF6E0 表头 + 每格 6-8px 内边距。
   ⚠ 这里只改皮肤，绝不动 display —— 11.3 曾把 .mm > table 一律改成 2 列 Grid，
   把这四张表的表头挤成两列（实测四个表头各占一行、数据行散架）。 */
body.mc-page [class*="mframe"] .mm > table[class*="grid"],
body.mc-page [class*="mframe"] .mm table.grid{
  border:0!important;
  border-collapse:collapse!important;
  width:100%!important;
  table-layout:auto;
}
body.mc-page table.grid td{
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  padding:12px 10px!important;
  font-size:14px;color:var(--ink);line-height:1.6;
}
body.mc-page table.grid thead.gridHead td,
body.mc-page table.grid thead td,
body.mc-page table.grid > tbody > tr.gridHead > td{
  height:44px!important;
  padding:0 10px!important;
  background:var(--navy-800)!important;
  color:#fff!important;
  font-size:13.5px;font-weight:bold;letter-spacing:1px;white-space:nowrap;
}
body.mc-page table.grid tbody tr:last-child td{border-bottom:0!important}
body.mc-page table.grid tbody tr:hover td{background:var(--paper-2)!important}
body.mc-page table.grid a:link,
body.mc-page table.grid a:visited{color:var(--navy-800)}
body.mc-page table.grid a:hover{color:var(--gold-3)}
/* DataGrid 分页器（auto: <a> 页码）与会员名录的 .pager 保持主题绿改金 */
body.mc-page table.grid tr td a[href*="__doPostBack"]{
  display:inline-block;min-width:32px;height:32px;line-height:32px;padding:0 8px;
  text-align:center;border:1px solid var(--line);border-radius:3px;
}
/* 会员名录的「注册日期」列（td width="80"）原来被 2015-03-22 的连字符断成两行；
   这几页的表都是 mc-wide（会员名录），列不多，允许单元格不折行撑开列宽。
   注意不要放到 mc-form 页 —— 文档签收的「签收意见」是 300px 长文本，nowrap 会把表撑爆。 */
body.mc-page.mc-wide table.grid td{white-space:nowrap}

/* 没有 .grid 类的表（会员注册的条款表 <tr class="gridHead">）表头跟着主题走：
   原样式是 1px 蓝框 + 浅蓝底，跟旁边的藏青表头不是一套。
   :not(.grid) 把 DataGrid 排除在外，免得和上面的藏青表头抢。 */
body.mc-page table:not(.grid) tr.gridHead > td{
  background:var(--paper-2)!important;
  color:var(--navy-800)!important;
  font-weight:bold;letter-spacing:1px;
  border-color:var(--line)!important;
}

/* 找回密码 / 账号激活（既不是两栏表单页、也不是 mc-wide）：
   输入框原来是 <asp:TextBox size="15"> ≈146px，在 460px 卡里显得局促 → 拉满值列。 */
body.mc-page:not(.mc-wide):not(.mc-form) #middle .mm input[type="text"]{width:100%}