@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;
}

/* ---------- 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:1280px;
  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; }
#header .logo-set{
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  padding:0 max(0px, calc((100vw - 1280px)/2));  /* 内容收窄到中央 1280，背景仍铺满 */
  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 - 1280px)/2)) 0 max(14px, calc((100vw - 1280px)/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 - 1280px)/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:1280px;height:230px;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);
}
#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 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 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 h2:empty{ display:none; }
#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{
  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);
}
#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; }
#foot .info .grid-container3{
  display:flex !important;
  flex-wrap:wrap;
  gap:9px 10px;
  justify-content:flex-start;
  align-content:flex-start;
  margin-bottom:16px;
}
#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; }

/* ---------- 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; }
  #zh{ margin-left:0;margin-right:0; }
}

/* ---------- 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;
}