@charset "UTF-8";
/* ============================================================
   framework.css —— 框架层样式（导航 / 页脚 / 相关推荐 / 基线）
   来源：现有产品页内联 style（导航/相关/页脚段）+ includes/nav.html 配色段。
   ★ 层顺序：抢先声明 @layer reset, page, library, framework; —— 优先级 reset < page < library < framework。
     reset 放最低层(只做基线，必被 library 组件的间距/盒模型覆盖)；framework(导航/页脚)最高、正文压不过它。
     CSS 取“首次出现”的层顺序声明，本文件先于 library.css 加载；library.css 第一行已同步成完全一致的声明。
     ⚠️ 关键：全局 reset(*{margin:0;padding:0}) 必须放最低层，否则会因层优先级高于特异性而碾压 library 组件的间距。
   ============================================================ */
@layer reset, page, library, framework;

@layer reset {
/* ---------- reset + base（最低层：只做基线，会被 library 组件覆盖） ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;color:var(--text);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul,li{list-style:none}
img{border:0;max-width:100%}

/* ---------- 通用骨架（框架件与正文都用；放 reset 最低层：正文 page 层同名可盖过它，互不影响间距） ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sec{padding:70px 0}
.sec-title{font-size:30px;font-weight:300;color:var(--text-1);text-align:center;line-height:1.4}
.sec-desc{text-align:center;font-size:15px;color:var(--text-3);margin-top:14px;max-width:680px;margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* ---------- 面包屑（框架件，.sd-body 外，取 --brand；对照老页：浅灰底 + 下边线 + 上下13px） ---------- */
.crumb{margin-top:70px;background:var(--bg-gray);border-bottom:1px solid var(--border);font-size:13px;color:var(--text-3)}
.crumb .wrap{padding-top:13px;padding-bottom:13px}
.crumb a{color:var(--text-2);transition:color .3s}
.crumb a:hover{color:var(--brand)}
.crumb span{color:#333}
}

@layer framework {

/* ---------- 导航：布局 ---------- */
.nav{position:fixed;top:0;left:0;width:100%;height:70px;background:#fff;box-shadow:var(--shadow-nav);z-index:1000}
.nav-inner{max-width:1200px;margin:0 auto;height:70px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;font-size:20px;font-weight:700;color:var(--brand)}
.logo svg{width:30px;height:30px;margin-right:8px}
.nav-menu{display:flex;align-items:center;height:100%}
.nav-menu>li{position:relative;height:70px;line-height:70px;margin:0 15px}
.nav-menu>li>a{font-size:16px;color:var(--text);transition:color .3s;display:block}
.nav-menu>li:hover>a{color:var(--brand)}
.nav-menu>li.active>a{color:var(--brand)}
.nav-menu>li.has-dd>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid #999;border-bottom:1.5px solid #999;transform:rotate(45deg);margin-left:6px;position:relative;top:-2px;transition:transform .3s,border-color .3s}
.nav-menu>li.has-dd:hover>a::after{transform:rotate(225deg);border-color:var(--brand)}

/* 下拉 mega / single */
.dd{position:absolute;top:70px;background:#fff;box-shadow:var(--shadow-mega);border-radius:12px;padding:22px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .28s ease,transform .28s ease,visibility .28s;z-index:1001}
.nav-menu>li.has-dd:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd::before{content:"";position:absolute;top:-14px;left:0;width:100%;height:14px}
.dd-single{left:50%;transform:translateX(-50%) translateY(14px);width:340px}
.nav-menu>li.has-dd:hover .dd-single{transform:translateX(-50%) translateY(0)}
.dd-list{display:flex;flex-direction:column;gap:4px}
.dd-mega{left:50%;transform:translateX(-50%) translateY(14px);width:880px;max-width:calc(100vw - 40px)}
.nav-menu>li.has-dd:hover .dd-mega{transform:translateX(-50%) translateY(0)}
.dd-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 22px}
.dd-group-title{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--text-1);padding:0 8px 10px;margin-bottom:6px;border-bottom:1px solid var(--border);line-height:1.4}
.dd-group-title .gt-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-right:8px;flex:0 0 auto}
.dd-group-title .gt-ico svg{width:14px;height:14px}
.dd-item{display:flex;align-items:center;padding:9px 8px;border-radius:9px;transition:background .2s}
.dd-item:hover{background:var(--brand-light)}
.dd-item .di-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-right:11px;flex:0 0 auto}
.dd-item .di-ico svg{width:19px;height:19px}
.dd-item .di-txt{flex:1;min-width:0;line-height:1.4}
.dd-item .di-t{display:block;font-size:14px;color:var(--text-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item .di-d{display:block;font-size:12px;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-menu>li.cta-li{display:flex;align-items:center;margin-left:9px}
.nav-menu>li>a.nav-cta{display:inline-block;vertical-align:middle;background:var(--brand);color:#fff;font-size:14px;padding:0 22px;height:40px;line-height:40px;border-radius:28px;transition:background .3s}
.nav-cta:hover{background:var(--brand-dark);color:#fff}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);transition:.3s}

/* ---------- 导航：配色（来自 includes/nav.html，中性黑系；置于布局之后以覆盖品牌蓝） ---------- */
.logo{color:#1a1a1a}
.logo svg *{stroke:#1a1a1a}
.nav-menu>li:hover>a{color:#1a1a1a}
.nav-menu>li.has-dd:hover>a::after{border-color:#1a1a1a}
.dd-item:hover{background:#f5f5f5}
.dd-item:hover .di-t{color:#333}
.nav-menu>li>a.nav-cta{background:#1a1a1a}
.nav-menu>li>a.nav-cta:hover{background:#333;color:#fff}
.nav-menu>li.active>a{color:#1a1a1a;font-weight:700}
.nav-menu>li.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#1a1a1a}

/* ---------- 相关推荐（系统按子行业注入；样式在此） ---------- */
.related{background:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.rel-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px 24px;transition:transform .3s,box-shadow .3s}
.rel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.rel-card .r-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--brand-light)}
.rel-card .r-ico svg{width:24px;height:24px}
.rel-card h3{font-size:15px;color:var(--text-1);font-weight:600;margin-bottom:7px}
.rel-card p{font-size:13px;color:var(--text-3);line-height:1.7}
.rel-card .r-more{font-size:13px;color:var(--brand);margin-top:12px;display:inline-block}
.rel-card .r-more::after{content:"\2192";margin-left:5px}

/* ---------- 页脚（多栏，唯一来源 framework/footer.html） ---------- */
.footer{background:#1F2937;color:rgba(255,255,255,0.6);padding:56px 0 0}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-col h4{color:#fff;font-size:15px;margin-bottom:18px;font-weight:500}
.foot-col p{font-size:13px;line-height:2;color:rgba(255,255,255,0.55)}
.foot-col a{display:block;font-size:13px;line-height:2.2;color:rgba(255,255,255,0.55);transition:color .3s}
.foot-col a:hover{color:var(--brand)}
.foot-brand .fb-logo{font-size:20px;color:#fff;font-weight:700;margin-bottom:14px}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:40px;padding:22px 0;text-align:center;font-size:13px}
.foot-bottom a{color:rgba(255,255,255,0.6)}
.foot-bottom a:hover{color:var(--brand)}

/* ---------- 响应式（仅框架部分：导航/相关推荐/页脚；正文组件响应式归 library.css） ---------- */
@media(max-width:1100px){
  .dd-mega{width:680px}
  .dd-cols{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-menu{position:fixed;top:70px;right:0;width:80%;height:calc(100vh - 70px);background:#fff;flex-direction:column;align-items:flex-start;padding:16px 20px;box-shadow:-4px 0 20px rgba(0,0,0,0.1);transform:translateX(100%);transition:transform .3s;overflow-y:auto}
  .nav-menu.open{transform:translateX(0)}
  .nav-menu>li{height:auto;line-height:2.6;margin:0;width:100%;border-bottom:1px solid #f0f0f0}
  .nav-menu>li>a{font-size:16px;padding:8px 0}
  .nav-menu>li.has-dd>a::after{float:right;margin-top:24px}
  .dd,.dd-single,.dd-mega{position:static;transform:none!important;opacity:1;visibility:visible;box-shadow:none;border-radius:0;padding:0 0 12px;width:auto;max-width:none;display:none}
  .dd::before{display:none}
  .nav-menu>li.has-dd.open-sub .dd{display:block}
  .nav-menu>li.has-dd:hover .dd{transform:none}
  .dd-cols{grid-template-columns:1fr;gap:0}
  .dd-group-title{border-bottom:none;padding:10px 4px 4px;margin:0}
  .dd-item{padding:8px 4px}
  .nav-menu>li.cta-li{display:block;margin-left:0}
  .nav-menu>li:last-child{border-bottom:none}
  .nav-menu>li>a.nav-cta{display:block;width:100%;text-align:center;height:46px;line-height:46px;margin:18px 0 0}
  .nav-toggle{display:flex}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .rel-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr;gap:24px}
}

}