@charset "utf-8";
/* ==========================================================================
   tech.css — 科技感主题层（叠加于 main.css 之后，不修改原结构与内容）
   深圳市科特时控技术有限公司  /  2026-10-27
   设计语言：深空蓝 + 电感青，等宽字标签、网格底纹、面板化卡片、轻量微交互
   ========================================================================== */

:root{
  --ink-900:#060f1b;
  --ink-800:#0a1727;
  --ink-700:#0f2439;
  --ink-600:#16334f;
  --line:#dce7f5;
  --line-soft:#eaf1fa;
  --text:#1b2b3e;
  --text-2:#42586f;
  --text-3:#7d90a6;
  --cyan:#00c2ff;
  --cyan-d:#0b9ecf;
  --blue:#1668ff;
  --violet:#6c5cff;
  --card-shadow:0 10px 30px rgba(14,42,78,.07);
  --card-shadow-h:0 16px 40px rgba(14,42,78,.13);
  --mono:Consolas,"SF Mono",Menlo,"Courier New",monospace;
  /* 版心宽度：大屏最宽 1440，窄屏自动收缩留 40px 边距（原先固定 1280） */
  --page-w:min(1440px, calc(100vw - 40px));
}

/* ---------- 1. 基础层 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Segoe UI",Arial,sans-serif;
  color:var(--text);
  background-color:#edf3fa;
  background-image:
    radial-gradient(820px 380px at 8% -60px, rgba(0,194,255,.13), transparent 62%),
    radial-gradient(760px 420px at 96% 40px, rgba(22,104,255,.12), transparent 62%),
    repeating-linear-gradient(0deg, rgba(11,26,45,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(11,26,45,.035) 0 1px, transparent 1px 44px),
    linear-gradient(180deg,#eef4fb 0%,#e8eff8 45%,#eef3fa 100%);
  background-attachment:fixed,fixed,fixed,fixed,scroll;
}
body::selection,body *::selection{ background:rgba(0,194,255,.28); color:#012; }

a:link,a:visited{ color:var(--text-2); transition:color .18s ease; }
a:hover{ color:var(--cyan-d); }
a:active{ color:var(--blue); }

img{ border-radius:6px; }

#zh{
  width:var(--page-w);
  background:transparent !important;
  padding:0 0 6px !important;
  overflow:visible;
}

/* 顶部滚动进度条 */
#tech-progress{
  position:fixed;left:0;top:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 60%,#8ef3ff);
  box-shadow:0 0 10px rgba(0,194,255,.9);
  transition:width .12s linear;pointer-events:none;
}

/* ---------- 2. 页头（背景满宽，logo+文字内容收窄至 1280 与轮播对齐） ---------- */
#header{ position:relative; }

/* 页脚等 100vw 元素在有垂直滚动条时比可视区略宽，统一收窄防横向滚动条 */
html{ overflow-x:hidden; }
/* 100vw 含滚动条宽度，桌面端正文字号下会比 clientWidth 宽 ~5px：
   overflow-x:hidden 能挡住滚动条，但 scrollWidth 仍多 5px（部分手机浏览器会
   据此允许轻微左右拖动）。overflow-x:clip 直接裁掉不生成滚动容器，
   scrollWidth 回到与视口一致；不支持的旧浏览器回退到上面的 hidden。 */
@supports (overflow-x:clip){
  html{ overflow-x:clip; }
}
#header .logo-set{
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  padding:0 max(0px, calc((100vw - var(--page-w))/2));  /* 内容收窄到中央版心，背景仍铺满 */
  height:127px;
  position:relative;
  background-color:#0a1826;
  /* 兜底：未做文字化的页面仍使用整条深色位图 */
  background-image:url(../images/logo_dark.png);
  background-repeat:no-repeat;
  background-position:0 0;
  box-shadow:0 1px 0 rgba(0,194,255,.22), 0 10px 26px rgba(6,15,27,.20);
  border-bottom:1px solid rgba(0,194,255,.16);
}

/* 文字化页头：深色导航条风格，与页脚一致 */
#header .logo-set.is-tech{
  background-image:
    radial-gradient(560px 170px at 6% -30%, rgba(0,194,255,.20), transparent 68%),
    radial-gradient(520px 200px at 88% 120%, rgba(22,104,255,.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 56px),
    linear-gradient(100deg,#081522 0%,#0c2236 52%,#08131f 100%);
  display:flex;
  align-items:center;
  padding:0 max(14px, calc((100vw - var(--page-w))/2)) 0 max(14px, calc((100vw - var(--page-w))/2));
  box-sizing:border-box;
}
#header .logo-set.is-tech .logo{
  float:none;
  flex:0 0 222px;
  width:222px;
  height:116px;
  margin:0 0 0 18px;
  background:url(../images/logo_mark.png) no-repeat left center;
  background-size:206px 116px;
}
#header .logo-set.is-tech .set-ad{
  float:none;
  flex:1 1 auto;
  width:auto;
  margin:0;
  display:flex;
  align-items:center;
  gap:26px;
  min-width:0;
}
#header .logo-set.is-tech .tech-brand{
  border-left:1px solid rgba(0,194,255,.40);
  box-shadow:-6px 0 18px -8px rgba(0,194,255,.55);
  padding-left:24px;
  min-width:0;
}
#header .logo-set.is-tech .tb-1{
  font-size:25px;
  font-weight:700;
  color:#e2eefa;
  letter-spacing:1.2px;
  line-height:1.35;
  white-space:nowrap;
  text-shadow:0 0 18px rgba(0,194,255,.18);
}
#header .logo-set.is-tech .tb-2{
  font-size:17px;
  color:#93aec9;
  letter-spacing:.8px;
  line-height:1.5;
  white-space:nowrap;
}
#header .logo-set.is-tech .tech-tel{
  margin-left:auto;
  font-family:var(--mono);
  font-size:32px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#ff5746 !important;
  text-shadow:0 0 22px rgba(255,70,60,.40);
  white-space:nowrap;
  transition:color .18s ease,text-shadow .18s ease;
}
#header .logo-set.is-tech .tech-tel:hover{
  color:#ff8676 !important;
  text-shadow:0 0 26px rgba(255,110,90,.65);
}
#header .logo-set::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 38%,rgba(0,194,255,0) 78%);
  pointer-events:none;
}
/* 右上角科技刻度装饰 */
#header .logo-set::before{
  content:"";position:absolute;right:14px;top:12px;width:78px;height:10px;
  background-image:repeating-linear-gradient(90deg,rgba(120,200,240,.45) 0 1px,transparent 1px 8px);
  opacity:.5;pointer-events:none;
}

/* ---------- 3. 主导航（背景满宽，导航项收窄至 1280 与轮播对齐） ---------- */
#navMenu{
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  height:48px !important;
  padding:0 max(20px, calc((100vw - var(--page-w))/2)) !important;
  margin:0 !important;
  display:flex;align-items:stretch;justify-content:center;
  position:relative;
  background-image:none !important;
  background:linear-gradient(180deg,#0e2439 0%,#091828 55%,#060f1b 100%) !important;
  box-shadow:0 10px 26px rgba(6,15,27,.22), inset 0 1px 0 rgba(255,255,255,.07);
}
#navMenu::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,194,255,.75),rgba(0,194,255,0));
  pointer-events:none;
}
#navMenu::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 80%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 80%);
}
#navMenu ul{ display:flex;align-items:stretch;height:48px; }
#navMenu li{
  float:none;display:block;height:48px;line-height:48px;
  padding:0 !important;margin:0;position:relative;
}
#navMenu li > a{
  display:block;height:48px;line-height:48px;
  padding:0 17px;
  font-size:14.5px;font-weight:400;letter-spacing:.6px;
  color:#c2d5e9 !important;
  white-space:nowrap;
}
#navMenu li > a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),#8ef3ff);
  box-shadow:0 0 10px rgba(0,194,255,.9);
  transition:left .22s ease,right .22s ease;
}
#navMenu li:hover > a{ color:#fff !important; text-shadow:0 0 12px rgba(0,194,255,.55); }
#navMenu li:hover > a::after{ left:14px;right:14px; }
#navMenu li > a.tech-active{ color:#fff !important; }
#navMenu li > a.tech-active::after{
  left:14px;right:14px;
  background:linear-gradient(90deg,var(--cyan),#b6f7ff);
  box-shadow:0 0 14px rgba(0,194,255,.85);
}

/* 页头内遗留的固定二维码浮层（仅个别页面启用）：改为左下角深色小卡，避免压住页头 */
#header div[style*="position: fixed"]{ display:none; }
/* 仅当该浮层确实含二维码图片时才显示为深色小卡（其余页面为注释状态，直接隐藏） */
#header div[style*="position: fixed"]:has(img){
  display:block;
  top:auto !important;
  bottom:24px !important;
  left:14px !important;
  background:rgba(9,22,36,.90);
  border:1px solid rgba(0,194,255,.30);
  border-radius:10px;
  padding:8px 10px 10px;
  color:#9db3cc;
  font-size:12px;
  line-height:1.7;
  z-index:50;
  box-shadow:0 14px 34px rgba(6,15,27,.45);
  backdrop-filter:blur(6px);
}
#header div[style*="position: fixed"]:has(img) img{
  width:112px !important;
  height:auto;
  border-radius:6px;
  display:block;
  margin:0 0 6px;
}

/* ---------- 4. 首屏轮播 ---------- */
#play{
  width:min(100%, var(--page-w));height:auto;aspect-ratio:1920/345;position:relative;
  background:#060f1b;
  box-shadow:inset 0 0 0 1px rgba(0,194,255,.22), inset 0 -34px 46px rgba(6,15,27,.55);
}
/* 大屏：轮播满幅放大会导致与版心错位（用户反馈“乱了”），已回退为与版心同宽 */
/* 轮播插件按 1280×230 写死内联宽高，改为跟随容器比例等比缩放（不裁切） */
#play #banner,#play #banner li,#play #banner img{
  width:100% !important;height:100% !important;
}
#play::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,15,27,0),rgba(6,15,27,.55));
}
#play ul,#play li,#play img{ border-radius:0 !important; }
/* 轮播指示器整体上移，避免贴边 */
#banner > div{ bottom:14px !important; right:12px !important; }

/* 轮播切换按钮 → 科技光点 */
#banner > div > a,
#play > div > a{
  width:22px !important;height:4px !important;line-height:4px !important;
  border-radius:2px !important;margin-right:6px !important;
  background:rgba(255,255,255,.35) !important;color:transparent !important;
  font-size:0 !important;overflow:hidden;
  transition:background .2s ease,box-shadow .2s ease,width .2s ease;
  backdrop-filter:blur(2px);
}
#banner > div > a.on,
#play > div > a.on{
  width:34px !important;
  background:linear-gradient(90deg,var(--cyan),#9df6ff) !important;
  box-shadow:0 0 12px rgba(0,194,255,.85);
}

/* ---------- 5. 主体布局（等高双列，左右底部齐平） ---------- */
#wraper{
  margin-top:14px !important;
  display:flex;
  align-items:stretch;          /* 左右两列等高 → 底部齐平 */
}
#wraper > .clear{ display:none; }   /* 末尾空 clear 块在 flex 下隐藏，不当第三列 */
#sb{
  float:none !important;
  flex:0 0 343px;
  width:343px;
  display:flex;
  flex-direction:column;
}
#page{
  float:none !important;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* 右列纵向 flex：面包屑 .tl 保持自身高度，#content flex:1 撑满剩余列高，
     使右列白色内容盒与左列（含加高的"联系我们"卡片）底部齐平，不再露灰底 */
}
/* 侧栏面板撑满列高：让白卡底部与右栏正文底部对齐 */
#sb > .box:first-child{ flex:1 1 auto; }

/* 侧栏面板 */
#sb .box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
#sb .box + .box,
#sb .box.mt10{ margin-top:12px; }

#sb .tl,
#sb .box .tl,
#sb .tl2,
#sb .box .tl2{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  background-image:none !important;
  background:linear-gradient(100deg,#0e2439 0%,#123a58 62%,#0d2b45 100%) !important;
  border-bottom:1px solid rgba(0,194,255,.28);
  position:relative;
  display:flex;align-items:center;
}
#sb .tl::before,
#sb .tl2::before{
  content:"";position:absolute;left:1px;top:13px;bottom:13px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(0,194,255,.25));
  box-shadow:0 0 10px rgba(0,194,255,.55);
}
#sb .tl h1,#sb .tl h3,#sb .tl h4,
#sb .tl2 h1,#sb .tl2 h3,#sb .tl2 h4{
  float:none !important;
  width:auto !important;height:auto !important;
  line-height:1.4 !important;
  margin:0 !important;
  padding:14px 16px 14px 18px !important;
  background-image:none !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.5px;
  white-space:normal;
}
#sb .tl span a{ color:#cfe4f6 !important; }

/* 侧栏目录 */
#prolist,#prolist.b,#catlist,#catlist.b{ padding:6px 14px 14px !important; border:0 !important; outline:0; }
#catlist ul{ padding:0 !important; margin:0 !important; }
#prolist dl.item{
  border-bottom:1px solid var(--line-soft);
  padding:2px 0;
}
#prolist dl.item:last-child{ border-bottom:0; }
#prolist dt{
  background-image:none !important;
  padding:10px 0 10px 16px !important;
  border-bottom:0 !important;
  line-height:1.5 !important;
  font-size:14px !important;font-weight:700 !important;
  color:var(--ink-600) !important;
  position:relative;cursor:pointer;
  letter-spacing:.2px;
}
#prolist dt::before{
  content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 0 8px rgba(0,194,255,.55);
}
#prolist dt a{ color:var(--ink-600) !important; }
#prolist dt:hover a{ color:var(--cyan-d) !important; }
#prolist dd{ margin-left:0 !important; }
#prolist dd ul{ padding:0 0 8px 0; }
#prolist li,
#catlist li{
  background-image:none !important;
  padding:0 !important;
  line-height:1.5 !important;
}
#prolist li a,
#catlist li a{
  display:block;position:relative;
  padding:6px 10px 6px 24px;
  font-size:13.5px;color:#37485c !important;
  border-radius:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .18s ease,color .18s ease,padding-left .18s ease;
}
#prolist li a::before,
#catlist li a::before{
  content:"";position:absolute;left:12px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:#cfddec;transition:background .18s ease,box-shadow .18s ease;
}
#prolist li a:hover,
#catlist li a:hover{
  background:linear-gradient(90deg,rgba(0,194,255,.10),rgba(0,194,255,0));
  color:var(--cyan-d) !important;padding-left:28px;
}
#prolist li a:hover::before,
#catlist li a:hover::before{ background:var(--cyan);box-shadow:0 0 8px rgba(0,194,255,.9); }

/* 侧栏推荐 / 新闻列表 */
.newslist{ padding:6px 14px 12px !important; }
.newslist li{
  background-image:none !important;
  border-bottom:1px dashed var(--line-soft) !important;
  padding:7px 6px 7px 22px !important;
  line-height:1.65 !important;
  position:relative;
  transition:background .18s ease;
}
.newslist li::before{
  content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:1px;transform:rotate(45deg);background:#cfddec;
  transition:background .18s ease,box-shadow .18s ease;
}
.newslist li:hover{ background:linear-gradient(90deg,rgba(0,194,255,.08),rgba(0,194,255,0)); }
.newslist li:hover::before{ background:var(--cyan);box-shadow:0 0 8px rgba(0,194,255,.85); }
.newslist li a{ color:#37485c !important; font-size:13.5px; }
.newslist li a:hover{ color:var(--cyan-d) !important; }
.newslist li:last-child{ border-bottom:0 !important; }

/* 联系方式面板：原图整体保留，仅用统一深色条覆盖顶部蓝色标题条 */
#contact{ border-radius:10px; position:relative; overflow:hidden; }
#contact::before{
  content:"";position:absolute;left:3px;right:3px;top:1px;height:48px;z-index:2;
  background:
    linear-gradient(180deg,#00c2ff,rgba(0,194,255,.25)) left 14px center/3px 22px no-repeat,
    linear-gradient(100deg,#0e2439 0%,#123a58 62%,#0d2b45 100%);
  border-radius:5px 5px 0 0;
  border-bottom:1px solid rgba(0,194,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
#contact::after{
  content:"联系我们";position:absolute;left:0;top:2px;height:47px;z-index:3;
  display:flex;align-items:center;padding-left:26px;
  color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,194,255,.45);
  pointer-events:none;
}

/* ---------- 6. 内容区外壳 ---------- */
#page #content{
  position:relative;
  flex:1 1 auto;   /* 撑满 #page 剩余高度 → 白色盒铺到底，与左列齐平 */
  background:#fff;
  border:1px solid var(--line) !important;
  border-radius:14px;
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
#page #content::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 45%,rgba(0,194,255,0));
}

/* 面包屑条 */
#page .tl{
  height:auto !important;
  padding:12px 18px !important;
  background-image:none !important;
  background:linear-gradient(180deg,#f8fbff,#f1f7fd) !important;
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;
}
#page .tl h3{
  background-image:none !important;
  float:none !important;
  padding:0 0 0 11px !important;
  height:auto !important;
  border-left:3px solid var(--cyan);
  color:var(--ink-700) !important;
  font-size:14px !important;font-weight:700 !important;
  line-height:1.4 !important;letter-spacing:.4px;
  white-space:nowrap;
}
#page .tl span{
  float:none !important;
  padding:0 !important;
  background-image:none !important;
  margin-left:auto;
  font-size:12px;color:var(--text-3);
  font-family:"Microsoft YaHei",sans-serif;
  text-align:right;
}
#page .tl span a{ color:var(--text-3) !important; }
#page .tl span a:hover{ color:var(--cyan-d) !important; }

/* ---------- 7. 标题 ---------- */
#content .title{
  text-align:center;
  padding:30px 22px 4px;
}
#content .title h1,
#content .title h2{
  display:inline-block;position:relative;
  margin:0 !important;padding:0 0 16px !important;
  font-size:24px !important;font-weight:800 !important;
  color:var(--ink-900) !important;
  letter-spacing:1px;line-height:1.4;
  background:none !important;
}
#content .title h1::after,
#content .title h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:68px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px rgba(0,194,255,.55);
}
#content .title p{ color:var(--text-3) !important; font-size:13px !important; }
#content .title h1:empty,
#content .title h2:empty{ display:none; }
#content .title:has(> h1:empty),
#content .title:has(> h2:empty){ padding:12px 22px 0; }

/* ---------- 8. 正文排版 ---------- */
#content .content{
  margin:0 !important;
  padding:6px 34px 34px;
  font-size:14px;line-height:1.95;
  color:var(--text-2);
  letter-spacing:.2px;
}
#content .content h1{
  text-align:center;
  font-size:20px !important;font-weight:800 !important;
  color:var(--ink-900) !important;
  letter-spacing:.8px;
  line-height:1.6;
  margin:6px 0 18px !important;
}
#content .content h2{
  position:relative;
  font-size:18px !important;font-weight:700 !important;
  color:var(--ink-700) !important;
  line-height:1.55 !important;
  margin:30px 0 14px !important;
  padding:0 0 9px 14px !important;
  border-left:4px solid var(--cyan);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(0,194,255,.07),rgba(0,194,255,0) 62%);
  letter-spacing:.4px;
}
#content .content h3{
  font-size:16px !important;font-weight:700 !important;
  color:#12385f !important;
  line-height:1.6 !important;
  margin:22px 0 10px !important;
  padding-left:14px;position:relative;
}
#content .content h3::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;
  background:var(--cyan);box-shadow:0 0 8px rgba(0,194,255,.7);
}
#content .content p{
  font-family:"Microsoft YaHei","PingFang SC",sans-serif !important;
  font-size:14px !important;
  line-height:1.95 !important;
  color:var(--text-2) !important;
  padding:7px 0 !important;
  margin:0;
}
#content .content strong,#content .content b{
  color:#0a5cc4;font-weight:700;
}
#content .content em{
  font-style:normal;
  color:#0a5cc4;
}
#content .content a{ color:#0b64c9; }
#content .content a:hover{ color:var(--cyan-d); text-decoration:underline; }

#content .content ul{ margin:6px 0 14px !important; }
#content .content ul li{
  list-style:none !important;
  position:relative;
  margin:0 0 8px 0 !important;
  padding-left:22px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif !important;
  font-size:13.5px !important;
  line-height:1.9 !important;
  color:var(--text-2);
}
#content .content ul li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:6px;height:6px;border-radius:1px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 0 7px rgba(0,194,255,.5);
}
#content .content ol li{ list-style:decimal !important; margin-left:22px !important; }

/* 正文图片：科技边框 + 柔光 */
#content .content img{
  border-radius:8px !important;
  border:1px solid rgba(22,104,255,.10);
  background:#fff;
  box-shadow:0 12px 34px rgba(14,42,78,.10);
  transition:box-shadow .25s ease,transform .25s ease;
}
#content .content img:hover{
  box-shadow:0 18px 44px rgba(14,42,78,.16);
}

/* 表格（部分正文含 table） */
#content .content table{
  width:100%;border:1px solid var(--line) !important;border-radius:8px;overflow:hidden;
  margin:14px 0;
}
#content .content table td,#content .content table th{
  border:1px solid var(--line-soft) !important;
  padding:8px 10px;font-size:13px;
}
#content .content table th{ background:#f4f9ff;color:var(--ink-700); }

/* ---------- 9. 图文网格卡片 ---------- */
#content .grid-container3,
#content .grid-container4,
#content .grid-container2{ grid-gap:14px !important; }

#content .grid-item{
  background:linear-gradient(180deg,#fbfdff,#f3f8fe);
  border:1px solid #e5eef9 !important;
  border-radius:12px !important;
  padding:12px !important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  position:relative;
  overflow:hidden;
}
#content .grid-item::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),rgba(0,194,255,0));
  opacity:0;transition:opacity .22s ease;
}
#content .grid-item:hover{
  transform:translateY(-3px);
  border-color:rgba(0,194,255,.45) !important;
  box-shadow:0 16px 34px rgba(14,42,78,.12);
}
#content .grid-item:hover::after{ opacity:1; }
#content .grid-item img{
  /* 网格内图片按单元格宽度自适应缩放，避免大尺寸电脑截图被裁切 */
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin:0 auto;
  border-radius:8px !important;
  border:1px solid rgba(22,104,255,.08);
  box-shadow:none !important;
  background:#fff;
}
#content .grid-item h3{
  font-size:13px !important;
  font-weight:600 !important;
  color:#2c4a68 !important;
  line-height:1.6 !important;
  margin:9px 0 2px !important;
  padding:0 !important;
}
#content .grid-item h3::before{ display:none !important; }
#content .grid-item a{ color:#2c4a68 !important; }

/* ---------- 10. 列表页 ---------- */
#plist li,#plist1 li{
  border-bottom:1px solid var(--line-soft) !important;
  border-radius:10px;
  transition:background .2s ease,box-shadow .2s ease;
  padding-left:10px;padding-right:10px;
}
#plist li:hover,#plist1 li:hover{
  background:linear-gradient(90deg,rgba(0,194,255,.06),rgba(0,194,255,0));
  box-shadow:0 10px 24px rgba(14,42,78,.07);
}
#plist span,#plist1 span{
  background-image:none !important;
  padding-left:16px !important;
  position:relative;
  color:var(--ink-600) !important;
  font-size:14px !important;font-weight:700 !important;
}
#plist span::before,#plist1 span::before{
  content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:1px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 0 7px rgba(0,194,255,.5);
}
#plist span a,#plist1 span a{ color:var(--ink-600) !important; }
#plist p,#plist1 p{ color:var(--text-2) !important; line-height:1.9 !important; }
#plist1 .proimg,#plist .proimg{
  border:1px solid var(--line) !important;
  border-radius:10px;background:#fff;
  box-shadow:0 8px 20px rgba(14,42,78,.08);
  /* 高度交给原图比例，只按容器宽度等比缩放：不裁切、不拉伸、不留白 */
  height:auto !important;
  object-fit:contain !important;object-position:center !important;
}
#plist1 ul h2{ color:var(--cyan-d) !important; }

/* 新闻/公告列表 */
#page #newlist li,#newlist li{
  background-image:none !important;
  border-bottom:1px dashed var(--line-soft) !important;
  padding:9px 8px 9px 22px !important;
  position:relative;
  line-height:1.8 !important;
  transition:background .2s ease;
}
#page #newlist li::before,#newlist li::before{
  content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--line);
}
#page #newlist li:hover,#newlist li:hover{ background:rgba(0,194,255,.06); }
#page #newlist li:hover::before,#newlist li:hover::before{
  background:var(--cyan);box-shadow:0 0 8px rgba(0,194,255,.85);
}
#page #newlist a{ color:var(--text-2) !important; }
#page #newlist .date{ color:var(--text-3);font-family:var(--mono);font-size:12px; }

/* 分页 */
.pageinfo{ background:transparent !important; padding:18px 0 6px !important; }
.pageinfo a{
  border:1px solid var(--line) !important;border-radius:6px !important;
  color:var(--text-2) !important;background:#fff;
  padding:4px 10px !important;
  transition:all .18s ease;
}
.pageinfo a:hover{
  border-color:var(--cyan) !important;color:var(--cyan-d) !important;
  box-shadow:0 0 0 3px rgba(0,194,255,.10);
}
.pageinfo span.thisclass{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  border-color:transparent !important;border-radius:6px !important;
  color:#fff !important;box-shadow:0 6px 16px rgba(22,104,255,.28);
}

/* ---------- 11. 页脚（满视口宽） ---------- */
#foot{
  width:100vw;                 /* 跳出 1280 定宽版心，铺满整个窗口 */
  position:relative;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  margin:22px 0 0 !important;
  padding:26px 40px 14px;
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(0,194,255,.14), transparent 72%),
    linear-gradient(180deg,#0b1a2b,#060f1b 70%);
  border-radius:0;
  border-top:1px solid rgba(0,194,255,.28);
  box-shadow:0 -12px 34px rgba(6,15,27,.20);
}
#foot::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:260px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
#foot .nav{
  background-image:none !important;
  background:transparent !important;
  color:#a8bdd2 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  height:auto !important;line-height:2 !important;
  padding:0 0 10px !important;margin-bottom:14px;
}
#foot .nav a{ color:#a8bdd2 !important; }
#foot .nav a:hover{ color:var(--cyan) !important; }
#foot .info{
  color:#7f93a9 !important;
  line-height:1.9 !important;
  padding-top:6px !important;
  font-size:12.5px;
}
#foot .info a{ color:#8fa6bd !important; }
#foot .info a:hover{ color:var(--cyan) !important; }
/* 页脚胶囊：按类型分 3 组，每组独占一行、行内居中；整块限宽到正文列宽并居中 */
#foot .info .grid-container3{
  display:block !important;
  width:100%;
  max-width:1097px;
  margin:0 auto 16px;
  padding:0;
  box-sizing:border-box;
}
#foot .info .grid-container3 .fg{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px 10px;
}
#foot .info .grid-container3 .fg + .fg{ margin-top:14px; }
#foot .info .grid-container3 > .fg{ flex:0 0 100% !important; min-width:0; }
/* 桌面窄窗口：与正文列同宽（正文列 = 100vw - 383px） */
@media (min-width:960px) and (max-width:1479px){
  #foot .info .grid-container3{ max-width:calc(100vw - 383px); }
}
#foot .info .grid-container3 a{
  display:inline-block;
  padding:4px 11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  font-size:12px;
  line-height:1.6;
  background:rgba(255,255,255,.03);
  transition:all .18s ease;
}
#foot .info .grid-container3 a:hover{
  border-color:rgba(0,194,255,.55);
  background:rgba(0,194,255,.10);
  color:#d8f6ff !important;
  box-shadow:0 0 14px rgba(0,194,255,.22);
}
#foot .info img{ border-radius:3px !important; vertical-align:-4px; }
/* 页脚底部：版权 / 备案 / 服务热线 / 三码（联系人·公众号·抖音号） */
#foot .fbot{ display:block; max-width:1097px; margin:0 auto; text-align:center; line-height:1.85; }
#foot .fbot p{ margin:0; }
#foot .fb-copy{ color:#8fa6bd; font-size:12.5px; }
#foot .fb-copy a{ color:#b9cbdb !important; }
#foot .fb-copy a:hover{ color:var(--cyan) !important; }
#foot .fb-reg{ margin-top:2px; font-size:12px; }
#foot .fb-reg a{ display:inline-block; margin:0 5px; color:#7f93a9 !important; }
#foot .fb-reg a:hover{ color:var(--cyan) !important; }
#foot .fb-ic{ width:16px; height:16px; vertical-align:-3px; margin-right:4px; border:0 !important; }
#foot .fb-tel{ margin-top:11px; font-size:13px; color:#93a9c1; letter-spacing:.5px; }
#foot .fb-tel a{ font-size:19px; font-weight:700; color:var(--cyan) !important; text-decoration:none; letter-spacing:.6px; }
#foot .fb-tel a:hover{ color:#d8f6ff !important; }
#foot .fb-qr{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:24px; margin-top:15px; }
#foot .fb-qr .qr{ text-align:center; }
#foot .fb-qr .qr img{ display:block; width:108px !important; max-width:108px !important; height:108px !important; padding:6px !important;
  box-sizing:border-box; background:#fff; border:0; margin:0 auto;
  border-radius:8px !important; vertical-align:top; object-fit:contain !important; }
#foot .fb-qr .qr span{ display:block; margin-top:6px; font-size:12px; color:#8fa6bd; line-height:1.5; }
@media (max-width:720px){
  #foot .fb-qr{ gap:10px; }
  #foot .fb-tel a{ font-size:18px; }
}
/* 落地球页 <footer> 版：三码（与 #foot 版同规格） */
footer .fb-qr{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:24px; margin:15px 0 2px; }
footer .fb-qr .qr{ text-align:center; flex:0 0 auto; }
footer .fb-qr .qr img{ display:block; width:108px !important; max-width:108px !important; height:108px !important; padding:6px !important;
  margin:0 auto !important; box-sizing:border-box; background:#fff; border:0;
  border-radius:8px !important; vertical-align:top; }
footer .fb-qr .qr span{ display:block; margin-top:6px; font-size:12px; color:#8fa6bd; line-height:1.5; }
@media (max-width:720px){ footer .fb-qr{ gap:10px; } }


/* ---------- 11b. 独立模板页（indexKt / KtGateway）的统一页脚（满视口宽） ---------- */
footer{
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(0,194,255,.14), transparent 72%),
    linear-gradient(180deg,#0b1a2b,#060f1b 70%) !important;
  border-radius:0;
  border-top:1px solid rgba(0,194,255,.28);
  box-shadow:0 -12px 34px rgba(6,15,27,.20);
  color:#93a9c1 !important;
  padding:28px 40px 20px !important;
  margin-top:26px;
  position:relative;
  text-align:center;
}
footer::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:260px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
footer .grid-container3{
  display:flex !important;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin:0 auto 18px !important;
  max-width:1100px;
}
footer .grid-item{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:12px !important;
  padding:12px 18px !important;
  min-width:200px;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
footer .grid-item:hover{
  border-color:rgba(0,194,255,.45) !important;
  background:rgba(0,194,255,.08) !important;
  transform:translateY(-2px);
}
footer .grid-item img{
  max-height:46px;width:auto !important;
  border-radius:6px;
}
footer h3{ color:#d5e6f5 !important; font-size:13px !important; font-weight:600; margin-top:8px !important; }
footer a{ color:#9db3cc !important; }
footer a:hover{ color:var(--cyan) !important; }
footer .footer-copy,
footer .cp{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px;margin-top:14px;
  color:#7f93a9 !important;
  font-size:12.5px;
}
footer hr{ display:none; }
footer .f-tel{ color:#ff5746 !important; }
footer .f-tel a{ color:#ff5746 !important; }

/* ---------- 12. 杂项组件 ---------- */
.linkbox{
  border-bottom:1px solid var(--line-soft) !important;
  background:#fff;
  border-radius:10px;
  margin-top:10px;
}
.linkbox h3,.linkbox h3 a{ color:var(--ink-600) !important; }
.linkbox a:hover{ color:var(--cyan-d) !important; }

#search .form #search-keyword{
  border:1px solid var(--line) !important;
  border-radius:8px;padding:8px 10px;
  background:#fff;
}
#search .form #search-keyword:focus{
  outline:none;border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(0,194,255,.14);
}
.button,.ipt-btn{
  border:0 !important;border-radius:8px !important;
  background:linear-gradient(135deg,var(--blue),var(--cyan-d)) !important;
  color:#fff !important;padding:8px 18px !important;
  box-shadow:0 8px 20px rgba(22,104,255,.25);
  transition:transform .18s ease,box-shadow .18s ease;
}
.button:hover,.ipt-btn:hover{ transform:translateY(-1px);box-shadow:0 12px 26px rgba(22,104,255,.32); }

/* 滚动条 */
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-track{ background:#e8eff7; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#8fb6d6,#5c86ab);
  border-radius:6px;border:2px solid #e8eff7;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--cyan),var(--cyan-d)); }

/* ---------- 13. 入场动效 ---------- */
.tech-in{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1);
  will-change:opacity,transform;
}
.tech-in.tech-show{ opacity:1;transform:none; }
@media (prefers-reduced-motion:reduce){
  .tech-in{ opacity:1 !important;transform:none !important;transition:none !important; }
}

/* ---------- 14. 小屏兜底（站点为固定宽，仅保证不出白边） ---------- */
@media screen and (max-width:1300px){
  /* 原先这里是 body{overflow-x:auto} —— 正是移动端"整页能左右拖动、内容只剩左边一条"的元凶：
     #navMenu 的 8 个导航项 white-space:nowrap 不换行，把文档撑到 ~1000px，
     body 一旦允许横向滚动，手机就只显示最左侧一屏，右侧正文被推出屏幕。
     改为锁死横向滚动，溢出交给各自容器内部消化（导航条自己滑动）。 */
  html, body{ overflow-x:hidden !important; max-width:100% !important; }
  #zh{ margin-left:auto; margin-right:auto; }
  /* 导航项超出视口时改为"导航条内部横向滑动"，不再撑宽整个页面 */
  #navMenu{
    justify-content:flex-start !important;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #navMenu::-webkit-scrollbar{ height:0; width:0; display:none; }
  #navMenu ul{ flex-wrap:nowrap; }
  #navMenu li{ flex:0 0 auto; }
}

/* ---------- 15. 正文图片表格：按图片自然宽紧凑排布，不再撑满内容区 ---------- */
/* 修复：科技风 #content .content table{width:100%} 会把"手机截图"等紧凑表格
   强行拉满 ~900px，图被拉开、两侧大量留白，视觉上像被挤压变形。
   让"表格里带 <img> 的表格"改回自然宽度并居中，保留图片真实比例。 */
#content .content table:has(img){
  width:auto !important;
  max-width:100%;
  margin:14px auto !important;
  border:1px solid var(--line) !important;
  border-radius:8px;
  overflow:hidden;
}
#content .content table:has(img) td{
  padding:8px 10px;
  text-align:center;
}
#content .content table:has(img) p{ margin:0; }

/* ---------- 16. 正文图片按真实宽高比自适应，消除横向拉伸变形 ---------- */
/* 修复：部分正文图（如"云端监控企业电脑管理端"的 Image008.png，真实 1568×1146）
   被 HTML 声明成 589×447 / 638×484（比真实扁了 ~3.8%），渲染出来横向被拉宽变形。
   全站共 29 页命中同一张图。
   做法：只把"带 width+height 声明的正文图"的 height 改 auto，宽度仍保留作者
   声明的像素值，浏览器按真实宽高比自动算高度 → 拉伸即消失。
   仅作用于 #content 正文图片，不影响页头/轮播/页脚 logo。 */
#content .content img[width][height]{
  height:auto !important;
}

/* ---------- 17. 产品详情页（ProductShow）正文方图限高 ----------
   背景：1000×1000 的方图在版心内被 width:100% 放到 1027×1027，
   一屏装不下，视觉上像“被拉长”。这里只限制最大高度：
   - 方图/竖图超过 820px 高时按比例缩到 820，左右留白（不裁切、不变形）
   - 横图（如 1000×618 显示 1027×635）不受影响，仍然铺满整栏
   ★ 作用域只限产品详情页，新闻/案例/FAQ/关于等页面一律不动：
     1) 静态页：250 个 ProductShow_*.html 的 canonical 都含 "ProductShow_"，
        用 html:has(link[rel=canonical]) 精确命中，无需改动任何 HTML
     2) 动态页：ProductShow.asp 的 #zh 带 class="prdshow"
   不支持 :has() 的旧浏览器会忽略该规则 → 降级为不限高，不会出问题。 */
html:has(link[rel="canonical"][href*="ProductShow_"]) #content .content img{
  max-height:820px;
}
.prdshow #content .content img{
  max-height:820px;
}

/* ---------- 12. 全站图片：等比缩放，禁止裁切 ----------
   规则：图片容器尺寸固定时，一律按“完整显示”缩放（contain），
   不再用 cover 裁掉边角；容器尺寸自适应的图片不受影响（高度由原图比例决定）。 */
#plist .proimg,
#plist1 .proimg,
#caselist img,
#newpro li img,
#content img,
#content .grid-item img,
#foot .info img,
footer .grid-item img{
  object-fit: contain !important;
  object-position: center !important;
}

/* ---------- 18. 产品列表（Products/Product 页）行宽随版心自适应 ----------
   问题：main.css 还是旧 928px 栏目时代写死的像素
     #plist1{ width:730px }   #plist1 li{ width:900px }
     #plist1 ul h2{ width:550px }   #plist1 p{ width:550px }
   版心加宽到 1440 后右栏实际约 1097px，列表却仍按 730px 渲染，
   行内 900px 又比父级宽出 170px（靠 #content overflow:hidden 兜住），
   结果卡片右边缘悬在中间、上下留白，和面包屑/左栏对不齐。
   做法：容器 width:auto 铺满右栏；每个 li 改两列网格（图 320px + 文字自适应），
   标题与简介取消 float 与固定宽，占满第二列。
   影响面：83 个静态页（Products_*.html / Product_*.html / index.html）
   + Products.asp / Product.asp / index.asp 全部共用这份 CSS，无需逐页改 HTML。 */
#plist1{ width:auto !important; padding:10px 14px !important; }
#plist1 li{
  display:grid !important;
  grid-template-columns:320px minmax(0,1fr);
  /* 行高分配：标题行按内容高度，剩下的高度全部给简介行。
     若两行都写 auto，跨两行的图片会把富余高度平均分给标题行，
     标题与简介之间会撑出近百像素空档。 */
  grid-template-rows:max-content 1fr;
  column-gap:20px;
  align-items:start;
  width:auto !important;
  float:none !important;
  box-sizing:border-box;
  padding:14px 12px !important;
  margin-bottom:0 !important;
}
#plist1 li > a{
  grid-column:1;
  grid-row:1 / span 2;
  float:none !important;
  display:block;
  margin:0 !important;
}
#plist1 li > a .proimg,
#plist1 li > .proimg{
  box-sizing:border-box;
  margin-right:0 !important;
}
#plist1 li > h2{
  grid-column:2;
  grid-row:1;
  float:none !important;
  width:auto !important;
  max-width:none !important;
  text-align:left !important;
  margin:0 0 8px !important;
  padding:0 !important;
}
#plist1 li > p{
  grid-column:2;
  grid-row:2;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}
/* 窄屏：图在上、文字在下，避免 320px 图列把文字挤成每行七八个字 */
@media screen and (max-width:1200px){
  #plist1 li{ grid-template-columns:1fr; row-gap:10px; }
  #plist1 li > a{ grid-row:auto; }
  #plist1 li > h2,
  #plist1 li > p{ grid-column:1; grid-row:auto; }
}

/* ---------- 19. 列表缩略图高度封顶（配合新上传的方图封面） ----------
   main.css 原始 #plist1 .proimg 为 320×180 固定盒，tech.css §11 改成
   height:auto（高度随原图比例）。新上传的网关品牌封面多为 1000×1000 方图，
   在 320px 图列里 height:auto 会渲染成 320×320，卡片被撑得过高、行高失衡。
   补上 max-height：方图经 §12 的 object-fit:contain 会在盒内居中留白，
   宽横幅图（比例 > 1.3，渲染高度 < 240px）不受影响，列表节奏保持统一。 */
#plist1 .proimg,
#plist .proimg{
  max-height:240px !important;
}

/* ---------- 20. 移动端适配（≤960px 单列重排；≤560px 细节压缩） ----------
   问题（手机端截图证据）：
     1) #sb 被写死 343px（§5 flex:0 0 343px），390px 视口下侧栏独占整屏，
        #page 被挤到 0 宽 → 面包屑"当前位置"被压成一字一行，正文几乎不可见；
     2) #header 里 logo 222px + 文案 + 32px 红色电话三者同排，必然溢出；
     3) ≤1300 的 body{overflow-x:auto} 让整页可横向拖动（已在 §14 修正）。
   做法：手机端改为"页头压缩 + 导航内部滑动 + 单列堆叠"，正文在前、侧栏在后；
   所有改动只在本断点内生效，PC（>960px）布局一个像素都不变。 */
@media screen and (max-width:960px){
  :root{ --page-w:calc(100vw - 20px); }
  html, body{ overflow-x:hidden !important; }

  /* 页头/导航原本用 width:100vw + translateX(-50%) 做满宽背景，
     手机上有竖向滚动条时 100vw 比可视区宽 ~5px，会多撑出一点横向溢出。
     窄屏下两者本来就等于整屏宽，直接用 100% 更稳。 */
  #header .logo-set,
  #navMenu{
    width:100% !important;
    left:0 !important;
    transform:none !important;
  }

  /* --- 页头：logo 缩小、文案换行、电话单独一行 --- */
  #header .logo-set{ height:auto !important; padding:8px 10px !important; }
  #header .logo-set.is-tech{
    height:auto !important;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
    padding:8px 10px !important;
  }
  #header .logo-set.is-tech .logo{
    flex:0 0 116px;
    width:116px;
    height:62px;
    margin:0 !important;
    background-size:116px 62px;
    background-position:left center;
  }
  #header .logo-set.is-tech .set-ad{
    flex:1 1 140px;
    width:auto;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
  #header .logo-set.is-tech .tech-brand{
    border-left:0 !important;
    box-shadow:none !important;
    padding-left:0 !important;
    width:100%;
  }
  #header .logo-set.is-tech .tb-1{
    font-size:13px;
    letter-spacing:0;
    white-space:normal !important;
    line-height:1.38;
  }
  #header .logo-set.is-tech .tb-2{
    font-size:11.5px;
    letter-spacing:0;
    white-space:normal;
    line-height:1.38;
  }
  #header .logo-set.is-tech .tech-tel{
    flex:1 1 100%;
    width:100%;
    margin:2px 0 0 !important;
    font-size:16px;
    letter-spacing:.5px;
    line-height:1.5;
    text-align:left;
  }

  /* --- 导航：高度压缩，内部横向滑动（§14 已开 overflow-x:auto） --- */
  #navMenu{ height:42px !important; padding:0 4px !important; }
  #navMenu ul{ height:42px; }
  #navMenu li{ height:42px; line-height:42px; }
  #navMenu li > a{
    height:42px; line-height:42px;
    padding:0 12px;
    font-size:13px;
    letter-spacing:0;
  }

  /* --- 主体：单列堆叠，正文在前、侧栏在后 --- */
  #wraper{
    display:flex !important;
    flex-wrap:wrap;
    margin-top:10px !important;
  }
  #page{
    order:1;
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0;
  }
  #sb{
    order:2;
    flex:1 1 100% !important;
    width:100% !important;
    margin-top:12px;
  }

  /* --- 面包屑：允许换行，不再被压成一字一行 --- */
  #page .tl{
    flex-wrap:wrap;
    gap:6px 10px;
    padding:10px 12px !important;
  }
  #page .tl h3{ white-space:normal !important; }
  #page .tl span{
    margin-left:0 !important;
    width:100%;
    text-align:left;
    white-space:normal !important;
    line-height:1.65;
  }

  /* --- 正文盒 --- */
  #content .title{ padding:16px 12px 0 !important; }
  #content .title h2{ font-size:19px !important; }
  #content .content{ padding:12px !important; }
  #content .content p,
  #content .content li{ line-height:1.85; }
  #content .content img{
    max-width:100% !important;
    height:auto !important;
  }
  #content .content pre,
  #content .content code{ white-space:pre-wrap; word-break:break-word; }
  #content .content table{ max-width:100%; }
  #content .content iframe,
  #content .content video{ max-width:100% !important; }

  /* 轮播：等比缩到版心宽 */
  #play{ width:100% !important; }

  /* 页脚：左右收边，避免 100vw 元素再撑出滚动 */
  #foot, footer{ padding-left:12px !important; padding-right:12px !important; box-sizing:border-box; }

  /* 底部悬浮咨询条（第三方注入，约 56~64px）留白，避免压住页尾内容 */
  body{ padding-bottom:64px; }
}

/* --- 更窄（≤560px）：进一步压缩字号与间距 --- */@media screen and (max-width:560px){
  #header .logo-set.is-tech .logo{
    flex:0 0 96px; width:96px; height:52px; background-size:96px 52px;
  }
  #header .logo-set.is-tech .tb-1{ font-size:12px; }
  #header .logo-set.is-tech .tb-2{ font-size:11px; }
  #header .logo-set.is-tech .tech-tel{ font-size:15px; }

  #navMenu{ height:40px !important; }
  #navMenu ul{ height:40px; }
  #navMenu li{ height:40px; line-height:40px; }
  #navMenu li > a{ height:40px; line-height:40px; padding:0 10px; font-size:12.5px; }

  #content .content{ padding:10px !important; }
  #content .content h1{ font-size:19px !important; }
  #content .content h2{ font-size:17px !important; }
  #content .content h3{ font-size:15px !important; }

  /* 列表缩略图：手机上不再固定 240 上限，按容器宽等比 */
  #plist1 .proimg,
  #plist .proimg{ max-height:none !important; }
  #plist1 li{ padding:10px !important; }
}

/* ---------- 21. 图文网格列宽修正（全宽度生效，含 PC） ----------
   问题：main.css 里写的是百分比列宽 + 像素 gap：
     .grid-container4{ grid-template-columns:24.7% 24.7% 24.7% 24.7%; gap:10px }
     .grid-container3{ 33.3% ×3 }  .grid-container2{ 49.5% ×2 }
   百分比合计 98.8%/99.9%/99%，但 gap 是实打实的像素，没有从列宽里扣掉，
   于是 4 列时多出 ~40px、2 列时多出 ~10px，网格整体比容器宽。
   PC 端被 #content{overflow:hidden} 静默裁掉右边缘（内容贴边/被切，不易察觉），
   手机端则会直接顶出屏幕。改用 minmax(0,1fr) 让 gap 参与分配，任何宽度都不溢出。 */
#content .grid-container4{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
#content .grid-container3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
#content .grid-container2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
#content .grid-container1{ grid-template-columns:minmax(0,1fr) !important; }
#content .grid-item{ min-width:0; }

/* 小屏：4 列 / 3 列改为 2 列，避免每格只剩窄窄一条 */
@media screen and (max-width:700px){
  #content .grid-container4,
  #content .grid-container3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---------- 22. 正文长内容移动端自适应（Word 粘贴表格 / 图片 / 嵌入对象） ----------
   问题：FaqShow、NewsShow 等文章页正文由 Word 粘贴而来，表格/图片带固定像素宽
   （如 466px、660px），窄屏下被 #content 的 overflow:hidden 静默裁掉右侧，
   用户既看不全也拉不动。方案：图片与嵌入对象限宽；正文表格改为块级横向滚动。 */
#content .content img,
#content .content video,
#content .content iframe,
#content .content object,
#content .content embed{ max-width:100% !important; height:auto !important; }
#content .content p,
#content .content li,
#content .content td{ overflow-wrap:anywhere; }

@media screen and (max-width:960px){
  #content .content table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #content .content table td,
  #content .content table th{ word-break:break-word; }
}

/* ---------- 23. 独立文档页（正文直挂 body 的 Markdown 转换页）移动端表格 ---------- */
@media screen and (max-width:960px){
  body > table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body > table th,
  body > table td{ word-break:break-word; }
  #content .content table{ margin-left:0 !important; margin-right:0 !important; }
  #content .content table table{ max-width:100% !important; }
}

/* ---------- 24. 粘贴内容的固定像素宽（微信/Word 复制常见）与文档页表格 ---------- */
@media screen and (max-width:960px){
  /* 正文段落/表格带内联 width:620px 之类，窄屏会被裁切 —— 强制自适应 */
  #content .content p[style*="width"],
  #content .content div[style*="width"],
  #content .content table[style*="width"]{ width:auto !important; max-width:100% !important; }
  #content .content img{ margin-left:0 !important; margin-right:0 !important; }
  /* 技术文档页（article.markdown-body）表格横向滚动 */
  .markdown-body table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .markdown-body table th,
  .markdown-body table td{ word-break:break-word; }
  .markdown-body pre{ overflow-x:auto; }
}