@charset "utf-8";
/* ============================================================
   全站统一页头 / 页脚 —— 与官网首页 index.htm 保持一致
   ------------------------------------------------------------
   用法：
     页头  <nav class="sc-nav"> … </nav>
     页脚  <footer class="sc-foot"> … </footer>

   约定：
   1. 变量统一使用 --sc-* 前缀，避免与各产品页既有的
      --blue / --muted / --bg / --card / --yellow 等变量冲突；
      色值与首页 :root 完全一致（#0A4D8C / #0A2E4D / #5b6b7a / #F4F8FC …）。
   2. 所有选择器都以 .sc-nav / .sc-foot 作用域限定，
      不会污染产品页自己的 .logo / .wrap / .drop / .foot-in 等类名。
   3. .sc-nav 的 z-index 高于产品页锚点导航（.prod-nav, z-index:50），
      否则下拉菜单会被锚点导航盖住。
   ============================================================ */

:root{
  --sc-blue:#0A4D8C; --sc-blue-d:#0A2E4D; --sc-blue-l:#EAF2F9;
  --sc-hover:#0E67B8; --sc-cyan:#16B8C4;
  --sc-ink:#22323F; --sc-sub:#5b6b7a;
  --sc-line:#E4EDF5; --sc-soft:#F4F8FC; --sc-white:#fff;
}

/* ============================ 页头 ============================ */
/* 页头只负责通栏白底 / 吸顶 / 层级；水平定位交给内层 .wrap（见下方 .sc-nav .sc-in） */
.sc-nav{
  background:var(--sc-white);border-bottom:1px solid var(--sc-line);
  position:sticky;top:0;z-index:90;
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  line-height:1.6;
}
/* 内层对齐容器：元素的 class 是 "wrap sc-in" —— 复用各页已有的 .wrap（max-width 1160/1180 + 水平
   padding，以及 ≤1260px 的 padding-right:56px 工具条让位），页头与页面内容、二级导航共用同一水平
   容器，宽屏居中、窄屏让位的量值都自动同步，不再依赖页头自己的 40px 通栏内边距。
   本规则只补 flex 与垂直内边距，**不声明 padding-left / padding-right**，以免盖掉页面 .wrap 的水平
   参数（.sc-nav .sc-in 特异性 0,2,0 > .wrap 0,1,0）。 */
.sc-nav .sc-in{
  display:flex;align-items:center;gap:18px;
  padding-top:14px;padding-bottom:14px;
}
.sc-nav .logo{font-size:22px;font-weight:800;color:var(--sc-blue-d)}
.sc-nav .logo span{color:var(--sc-blue-d)}
.sc-nav .logo small{font-size:12px;color:var(--sc-sub);font-weight:400;margin-left:8px}
.sc-nav .navlinks{display:flex;gap:26px;font-size:15px;color:var(--sc-blue-d);margin-left:auto}
.sc-nav .navlinks a:hover{color:var(--sc-blue)}
/* transform / box-shadow 显式复位：产品页的 .nav-cta:hover 带上浮与青色投影，
   若不复位会串到统一页头的 CTA 上（两处类名相同、页面 CSS 优先级更低但仍会补足未声明属性） */
.sc-nav .nav-cta{background:var(--sc-blue);color:#fff;font-weight:700;padding:8px 20px;border-radius:20px;font-size:14px;white-space:nowrap;transition:.15s;transform:none;box-shadow:none}
.sc-nav .nav-cta:hover{background:var(--sc-hover);color:#fff;transform:none;box-shadow:none}

/* 下拉菜单 */
.sc-nav .navlinks .has-dropdown{position:relative;display:flex;align-items:center}
.sc-nav .navlinks .has-dropdown > a{display:flex;align-items:center;gap:6px}
.sc-nav .navlinks .has-dropdown > a::after{content:"";border:5px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.sc-nav .dropdown{position:absolute;top:100%;left:auto;right:0;min-width:260px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--sc-line);border-radius:12px;box-shadow:0 16px 44px rgba(10,46,77,.18);padding:10px;display:none;z-index:60}
.sc-nav .dropdown::before{content:"";position:absolute;top:-12px;right:0;width:100%;height:12px}
.sc-nav .navlinks .has-dropdown:hover .dropdown,
.sc-nav .navlinks .has-dropdown.open .dropdown{display:block}
.sc-nav .dropdown a.item{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;color:var(--sc-ink);transition:.15s}
.sc-nav .dropdown a.item:hover{background:var(--sc-blue-l)}
.sc-nav .dropdown a.item .ic{position:relative;width:40px;height:40px;background:linear-gradient(135deg,var(--sc-blue),var(--sc-blue-d));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto;overflow:hidden}
.sc-nav .dropdown a.item .ic.pic{background:none}
.sc-nav .dropdown a.item .ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;border-radius:inherit}
.sc-nav .dropdown a.item .ic img.noimg{display:none}
.sc-nav .dropdown a.item .tx b{display:block;color:var(--sc-blue-d);font-size:15px;line-height:1.3}
.sc-nav .dropdown a.item .tx span{font-size:12px;color:var(--sc-sub)}
.sc-nav .dropdown .all{display:block;text-align:center;margin-top:8px;padding:10px;border-top:1px solid var(--sc-line);color:var(--sc-blue);font-size:14px;font-weight:700}
.sc-nav .dropdown .all:hover{color:var(--sc-hover)}
.sc-nav .dropdown.plain{min-width:188px;padding:8px}
.sc-nav .dropdown.plain a{display:block;padding:10px 14px;border-radius:8px;color:var(--sc-ink);font-size:14px;font-weight:600;transition:.15s}
.sc-nav .dropdown.plain a:hover{background:var(--sc-blue-l);color:var(--sc-blue-d)}

/* 移动端汉堡按钮 */
.sc-nav .nav-toggle{display:none;background:none;border:none;font-size:22px;color:var(--sc-blue-d);cursor:pointer;padding:6px 10px;border-radius:6px;line-height:1}
.sc-nav .nav-toggle:hover{background:var(--sc-blue-l)}

/* ============================ 页脚 ============================ */
.sc-foot{
  /* padding 显式复位：产品页残留的 footer{padding:44px 0} 是标签选择器，会撑高统一页脚 */
  padding:0;margin:0;
  background:var(--sc-soft);color:var(--sc-sub);font-size:14px;
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  line-height:1.6;
}
.sc-foot .fmain{max-width:1180px;margin:0 auto;padding:40px 20px 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:26px}
.sc-foot .fcol h4{color:var(--sc-blue-d);font-size:14px;font-weight:700;margin:0 0 12px}
/* display:table = 块级换行 + 宽度收缩到文字本身（避免整栏宽都成热区） */
.sc-foot .fcol a{display:table;color:var(--sc-sub);text-decoration:none;font-size:13px;line-height:1.95}
.sc-foot .fbrand p a{display:inline}
/* 默认与正文同灰、不突出；hover 才变蓝 + 下划线 */
.sc-foot .fcol a:hover{color:var(--sc-blue);text-decoration:underline}
.sc-foot .fbrand .flogo{color:var(--sc-blue-d);font-size:20px;font-weight:800;margin-bottom:8px}
.sc-foot .fbrand p{margin:0 0 6px;color:var(--sc-sub);font-size:13px;line-height:1.6}
.sc-foot .fcol.contact p{margin:0 0 6px;color:var(--sc-ink);font-size:13px;line-height:1.7}
/* 右下角二维码：微信 / QQ 并排，尺寸缩小以适配栏宽 */
.sc-foot .fqr{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.sc-foot .fqr .q{text-align:center}
.sc-foot .fqr img{display:block;width:92px;height:92px;object-fit:cover;background:#fff;border:1px solid var(--sc-line);border-radius:8px}
.sc-foot .fqr .t{margin-top:6px;font-size:12px;color:var(--sc-sub);line-height:1.3}
.sc-foot .fbar{border-top:1px solid var(--sc-line);padding:14px 20px;text-align:center;font-size:12px;color:var(--sc-sub)}
/* display/margin 显式复位：产品页可能残留 footer a{display:block;margin:4px 0} 这类标签规则，
   会把底部通栏的链接逐个压成独立一行（曾导致备案栏竖排） */
.sc-foot .fbar a{display:inline;margin:0;color:var(--sc-sub);text-decoration:none}
.sc-foot .fbar a:hover{color:var(--sc-blue);text-decoration:underline}
.sc-foot .fbar span{margin:0 10px;color:rgba(0,0,0,.2)}

/* ============================ 响应式 ============================ */
/* ≤1100px：页脚 5 栏在窄视口下每栏仅 ~140~200px（链接频繁折行、二维码被迫竖排），
   提前切 3 栏，品牌栏通栏。 */
@media (max-width:1100px){
  .sc-foot .fmain{grid-template-columns:repeat(3,1fr);gap:22px}
  .sc-foot .fbrand{grid-column:1/-1}
}
@media (max-width:768px){
  /* 页头 */
  .sc-nav{padding:10px 14px}
  .sc-nav .logo{font-size:18px}
  .sc-nav .logo small{display:none}
  .sc-nav .nav-cta{margin-left:auto;padding:7px 14px;font-size:13px}
  .sc-nav .nav-toggle{display:block}
  .sc-nav .navlinks{display:none;position:absolute;top:100%;left:0;right:0;margin-left:0;background:#fff;flex-direction:column;gap:0;padding:6px 14px 14px;border-bottom:1px solid var(--sc-line);box-shadow:0 8px 24px rgba(10,46,77,.1);max-height:calc(100vh - 60px);overflow-y:auto}
  .sc-nav .navlinks.open{display:flex}
  .sc-nav .navlinks>a,.sc-nav .navlinks .has-dropdown>a{padding:12px 0;border-bottom:1px solid var(--sc-line);width:100%}
  .sc-nav .navlinks .has-dropdown{display:flex;flex-direction:column;width:100%}
  .sc-nav .navlinks .has-dropdown>a::after{margin-left:auto}
  .sc-nav .dropdown{position:static;left:auto;right:auto;top:auto;z-index:auto;width:100%;display:none;box-shadow:none;border:none;border-radius:0;padding:0 0 8px 0;max-width:none;min-width:0;background:transparent}
  .sc-nav .navlinks .has-dropdown.open .dropdown{display:block}
  .sc-nav .dropdown a.item{padding:10px 8px}
  .sc-nav .dropdown.plain a{padding:8px 12px}
}
@media (max-width:480px){
  .sc-foot .fmain{grid-template-columns:repeat(2,1fr);gap:18px;padding:30px 16px 22px}
  .sc-foot .fqr{gap:10px}
  .sc-foot .fqr img{width:84px;height:84px}
}
@media (max-width:380px){
  .sc-foot .fmain{grid-template-columns:1fr}
}