/* 开灵官网 · 文章详情页(h-nd) v4「白底黑字·编辑部版」 · 2026-08-30 保留：#webHeader 导航条 / #webFooter 页脚；其余重做 作用域：仅 ⚠️ 凡科正文不在 #klroot 树里，选择器不能加 #klroot 前缀 ⚠️ 层次全部靠字号／字重／留白建立，不用色块竖线、不用顶部色条 */ /* ── 0. 拆掉凡科的 table 骨架 ───────────────────────────────────── */ html.kl-article #webBanner, html.kl-article .webBannerTable, html.kl-article .formBanner12, html.kl-article .titleText12, html.kl-article .newsDetail .line1, html.kl-article .newsDetail .line2{display:none!important} html.kl-article .webContainerTable,html.kl-article .containerMiddle, html.kl-article .containerMiddleCenter,html.kl-article .containerForms, html.kl-article .containerFormsCenter,html.kl-article .containerFormsMiddle, html.kl-article table.containerFormsMiddle,html.kl-article table.containerFormsMiddle>tbody, html.kl-article table.containerFormsMiddle>tbody>tr,html.kl-article table.containerFormsMiddle>tbody>tr>td, html.kl-article .formMiddle,html.kl-article .formMiddleCenter,html.kl-article .formMiddleContent, html.kl-article .formTop,html.kl-article .formBottom,html.kl-article #module12, html.kl-article #centerTopForms{ display:block!important;width:auto!important;max-width:100%!important;min-width:0!important; box-sizing:border-box;background:none!important;border:0!important;box-shadow:none!important; /* 凡科这条链上有 overflow:hidden，会把通栏区块的负 margin 裁掉 */ overflow:visible!important} /* HERO 与正文之间原有 17px 白缝 = #module12 的 margin-top:7px + 凡科 table 的 border-spacing:10px */ html.kl-article .formMiddleContent,html.kl-article .fk-formContentOtherPadding, html.kl-article #containerForms,html.kl-article .containerFormsMiddle, html.kl-article .containerFormsCenter,html.kl-article #centerTopForms, html.kl-article #module12,html.kl-article .formMiddle,html.kl-article .formMiddleCenter{ margin:0!important;padding:0!important;border-spacing:0!important} html.kl-article .column.sideForms,html.kl-article .leftForms,html.kl-article .rightForms, html.kl-article .containerFormsLeft,html.kl-article .containerFormsRight{display:none!important} /* 通栏：--klvw 由 kl-read2.js 按 clientWidth 写入，不用 100vw（避开滚动条溢出， 也就不必给祖先加 overflow-x:hidden —— 那会让侧栏的 position:sticky 失效） */ html.kl-article .kla-hero,html.kl-article .kla-rel,html.kl-article .kla-cta{ width:var(--klvw,100vw);margin-left:calc(50% - var(--klvw,100vw)/2)} html.kl-article .kla-shell{position:relative} html.kl-article .kla-shell::before{ content:'';position:absolute;top:-12px;bottom:0;z-index:0;background:#f6f8fb; width:var(--klvw,100vw);left:calc(50% - var(--klvw,100vw)/2)} html.kl-article .kla-shell>*{position:relative;z-index:1} /* ── 1. HERO：白底黑字，靠字号建立第一层次 ──────────────────────── */ html.kl-article .kla-hero{ position:relative;background:linear-gradient(180deg,#f3f7ff 0%,#fbfcfe 62%,#f6f8fb 100%); padding:44px 0 40px;border-bottom:1px solid #e9eef6} html.kl-article .kla-hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 30px;box-sizing:border-box} html.kl-article .kla-crumb{font-size:13px;color:#7d8a9d;margin:0 0 22px} html.kl-article .kla-crumb a{color:#5f6d82;text-decoration:none} html.kl-article .kla-crumb a:hover{color:#0f5fd8} html.kl-article .kla-crumb .sep{margin:0 8px;color:#c2ccda} html.kl-article .kla-tag{display:inline-block;font-size:12.5px;font-weight:700;color:#0f5fd8;letter-spacing:.6px; background:#eaf2ff;border-radius:999px;padding:5px 14px;margin:0 0 18px} /* 标题：整页最大、最重、最黑的一块，和正文拉开近 3 倍字号差 */ html.kl-article .kla-hero h1.title,html.kl-article .kla-hero .title{ font-size:48px!important;line-height:1.24!important;font-weight:800!important;color:#0a1424!important; margin:0 0 22px!important;padding:0!important;max-width:1020px;letter-spacing:-.4px;text-align:left!important} html.kl-article .kla-lede{font-size:16.5px;line-height:1.78;color:#5c6b82;max-width:820px;margin:0 0 24px;font-weight:400} html.kl-article .kla-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:13px;color:#8d9aad} html.kl-article .kla-meta i{font-style:normal;display:inline-flex;align-items:center;gap:6px} html.kl-article .kla-meta i::before{content:'';width:3px;height:3px;border-radius:50%;background:#c2ccda} html.kl-article .kla-hero .newsInfoWrap{margin:0!important} html.kl-article .kla-hero .newsInfo{font-size:13px!important;color:#8d9aad!important} /* ── 2. 两栏骨架 ─────────────────────────────────────────────────── */ html.kl-article .kla-shell{ max-width:1200px;margin:0 auto;padding:34px 30px 60px;box-sizing:border-box; display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start} html.kl-article .kla-shell .newsDetail{ width:auto!important;max-width:none!important;margin:0!important; background:#fff;border:1px solid #e9eef6;border-radius:16px; box-shadow:0 2px 16px rgba(18,55,120,.05);padding:46px 52px 38px!important;box-sizing:border-box;overflow:hidden} /* ── 3. 正文排版：正文 17px，H2 30px，靠 1.8 倍字号差分层 ────────── */ html.kl-article .newsDetail h1.title{display:none} /* H1 已移入 HERO */ html.kl-article .newsDetail .newsInfoWrap{display:none} /* 日期已移入 HERO */ html.kl-article .richContent{width:auto!important;max-width:100%!important} html.kl-article .richContent p{margin:0 0 21px!important;line-height:1.95!important} html.kl-article .richContent p,html.kl-article .richContent span,html.kl-article .richContent div, html.kl-article .richContent li{font-size:17px!important;line-height:1.95!important;color:#33415a!important} /* 行内加粗压暗一档即可，不能和 H2 一样黑，否则满屏都像标题 */ html.kl-article .richContent strong,html.kl-article .richContent b, html.kl-article .richContent span[style*="font-weight"]{color:#152238!important} html.kl-article .richContent a{color:#0f5fd8!important;text-decoration:none;border-bottom:1px solid rgba(15,95,216,.3)} html.kl-article .richContent a:hover{border-bottom-color:#0f5fd8} html.kl-article .kla-empty{display:none!important} /* 编辑器遗留空段落 */ /* 导语：字号比正文大、颜色比正文浅、下方细线收口 —— 一眼看出"这里是开头" */ html.kl-article .richContent p.kla-lede-p{ font-size:19px!important;line-height:2.0!important;color:#44536b!important;font-weight:400!important; margin:0 0 34px!important;padding:0 0 30px!important;border-bottom:1px solid #eaeff7!important} html.kl-article .richContent p.kla-lede-p span, html.kl-article .richContent p.kla-lede-p b, html.kl-article .richContent p.kla-lede-p strong{ font-size:19px!important;line-height:2.0!important;color:#44536b!important;font-weight:400!important} /* H2：整篇正文里唯一的大黑字，上方大留白独占一行 */ html.kl-article .richContent h2.kl-h{ font-size:30px!important;line-height:1.4!important;font-weight:800!important;color:#0a1424!important; margin:72px 0 22px!important;padding:0!important;border:0!important;background:none!important; letter-spacing:-.3px;scroll-margin-top:96px} html.kl-article .richContent h2.kl-h span{font-size:30px!important;font-weight:800!important;color:#0a1424!important} html.kl-article .richContent h2.kl-h:first-child{margin-top:0!important} /* 「一、」「二、」这类序号挑成蓝色，做纯文字锚点，不用色块 */ html.kl-article .richContent h2.kl-h .kl-n{font-style:normal;color:#0f5fd8!important;margin-right:2px} /* H3：介于正文与 H2 之间 */ html.kl-article .richContent h3.kl-h3{font-size:19.5px!important;line-height:1.55!important;font-weight:700!important; color:#152238!important;margin:38px 0 14px!important;padding:0!important;scroll-margin-top:96px} html.kl-article .richContent h3.kl-h3 span{font-size:19.5px!important;font-weight:700!important;color:#152238!important} /* 配图：撑满主栏 */ html.kl-article .richContent img{ display:block;width:100%!important;max-width:100%!important;height:auto!important; margin:28px 0!important;border-radius:12px;border:1px solid #e9eef6;box-shadow:0 4px 20px rgba(18,55,120,.06)} /* 引用块：浅底＋引号水印，无边框无竖线 */ html.kl-article .richContent table{ width:100%!important;max-width:100%!important;border-collapse:separate!important;border-spacing:0!important; border:0!important;margin:30px 0!important} html.kl-article .richContent table,html.kl-article .richContent tbody, html.kl-article .richContent tr{border:0!important;background:none!important} html.kl-article .richContent table td{ position:relative;width:auto!important;max-width:100%!important; background:#f4f7fc!important;border:0!important;border-radius:14px!important;padding:26px 30px 26px 64px!important} html.kl-article .richContent table td::before{ content:'\201C';position:absolute;left:24px;top:10px;font-size:52px;line-height:1; color:#c3d4ee;font-family:Georgia,'Times New Roman',serif} html.kl-article .richContent table td *{color:#1b2a44!important;font-weight:600!important; font-size:17.5px!important;line-height:1.85!important} /* ── 4. 侧栏 ────────────────────────────────────────────────────── */ html.kl-article .kla-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px} html.kl-article .kla-card{background:#fff;border:1px solid #e9eef6;border-radius:14px;box-shadow:0 2px 14px rgba(18,55,120,.04);padding:20px 20px 18px} html.kl-article .kla-card .ct{font-size:14px;font-weight:800;color:#0a1424;letter-spacing:.4px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #eef2f8} html.kl-article #kl-toc{max-height:calc(100vh - 260px);overflow:auto} html.kl-article #kl-toc a{display:block;font-size:13.5px;line-height:1.6;color:#4d5c72;text-decoration:none; padding:8px 10px;border-radius:8px;transition:.15s;cursor:pointer} html.kl-article #kl-toc a:hover{background:#f2f6fd;color:#0f5fd8} html.kl-article #kl-toc a.on{background:#eaf2ff;color:#0f5fd8;font-weight:700} html.kl-article .kla-ask{background:linear-gradient(140deg,#0d47a8,#1866de);border:0;color:#fff} html.kl-article .kla-ask .at{font-size:16px;font-weight:800;line-height:1.5;margin:0 0 8px} html.kl-article .kla-ask .ad{font-size:13px;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 16px} html.kl-article .kla-ask .aphone{font-size:20px;font-weight:800;letter-spacing:.5px;margin:0 0 14px} html.kl-article .kla-ask .abtn{display:block;text-align:center;background:#fff;color:#0d47a8!important;font-size:14px;font-weight:700; border-radius:9px;padding:11px 0;text-decoration:none;transition:.15s} html.kl-article .kla-ask .abtn:hover{background:#eaf2ff} /* ── 5. 文末：分享 + 相关 + CTA ──────────────────────────────────── */ html.kl-article .newsDetail .middlePanel{height:auto!important;margin:36px 0 0!important;padding:22px 0 0!important;border-top:1px solid #eef2f8} html.kl-article .newsDetail .shareInfo{display:flex;align-items:center;gap:10px} html.kl-article .newsDetail .shareTag{font-size:13px!important;color:#5b6a80!important} html.kl-article .kla-rel{background:#fff;border-top:1px solid #e9eef6} html.kl-article .kla-rel-in{max-width:1200px;margin:0 auto;padding:56px 30px 10px;box-sizing:border-box} html.kl-article .kla-h2{font-size:30px;font-weight:800;color:#0a1424;text-align:center;margin:0 0 10px;letter-spacing:-.3px} html.kl-article .kla-sub{font-size:15px;color:#5c6b82;text-align:center;margin:0 0 32px} html.kl-article .kla-rel-in .kl-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} html.kl-article .kla-relcard{display:block;text-decoration:none;background:#fff;border:1px solid #e4ebf5; border-radius:14px;padding:22px 24px;transition:.18s;box-shadow:0 1px 8px rgba(18,55,120,.04)} html.kl-article .kla-relcard:hover{border-color:#9dc0f5;box-shadow:0 8px 26px rgba(18,55,120,.1)} html.kl-article .kla-relcard>div:first-child{font-size:16.5px!important;font-weight:700!important;color:#0a1424!important;margin-bottom:8px} html.kl-article .kla-relcard>div:last-child{font-size:13.5px!important;line-height:1.7!important;color:#5b6a80!important} html.kl-article .kla-relcard:hover>div:first-child{color:#0f5fd8!important} /* 文末 CTA 保留蓝色：整页唯一的强色块，是行动号召不是装饰 */ html.kl-article .kla-cta{background:linear-gradient(128deg,#0b3f9e 0%,#1259cf 45%,#1d74ee 100%);padding:58px 0;margin-top:52px} html.kl-article .kla-cta-in{max-width:1200px;margin:0 auto;padding:0 30px;text-align:center;box-sizing:border-box} html.kl-article .kla-cta h2{font-size:31px;font-weight:800;color:#fff;margin:0 0 12px;letter-spacing:-.2px} html.kl-article .kla-cta p{font-size:15.5px;color:rgba(255,255,255,.85);margin:0 0 30px} html.kl-article .kla-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px} html.kl-article .kla-btns a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700; border-radius:10px;padding:13px 30px;text-decoration:none;transition:.16s} html.kl-article .kla-b1{background:#fff;color:#0d47a8!important} html.kl-article .kla-b1:hover{background:#eaf2ff} html.kl-article .kla-b2{background:rgba(255,255,255,.12);color:#fff!important;border:1px solid rgba(255,255,255,.42)} html.kl-article .kla-b2:hover{background:rgba(255,255,255,.2)} /* ── 6. 返回顶部 ─────────────────────────────────────────────────── */ html.kl-article #kl-top{position:fixed;right:24px;bottom:120px;width:44px;height:44px;border-radius:50%;background:#fff; border:1px solid #dde6f2;box-shadow:0 6px 22px rgba(15,50,110,.14);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:60} html.kl-article #kl-top svg{width:18px;height:18px;stroke:#4d5c72;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} html.kl-article #kl-top:hover{border-color:#0f5fd8} html.kl-article #kl-top:hover svg{stroke:#0f5fd8} /* ── 7. 窄屏 / 移动端 ────────────────────────────────────────────── */ @media(max-width:1120px){ html.kl-article .kla-shell{grid-template-columns:minmax(0,1fr);gap:0} html.kl-article .kla-side{position:static;flex-direction:column;margin:20px 0 0} html.kl-article #kl-toc{max-height:none} html.kl-article .newsDetail>#kl-toc{margin:0 0 26px;background:#f7f9fd;border-color:#e2eaf5;box-shadow:none} html.kl-article .newsDetail>#kl-toc a{padding:7px 10px} } @media(max-width:768px){ html.kl-article .webContainer,html.kl-article .container,html.kl-article .column, html.kl-article .form,html.kl-article .forms,html.kl-article .clearfloat, html.kl-article .center,html.kl-article .right,html.kl-article .left,html.kl-article .titleCenter{ width:auto!important;max-width:100%!important;min-width:0!important;box-sizing:border-box} html.kl-article .kla-hero{padding:22px 0 26px} html.kl-article .kla-hero-in,html.kl-article .kla-shell, html.kl-article .kla-rel-in,html.kl-article .kla-cta-in{padding-left:16px;padding-right:16px} html.kl-article .kla-crumb{margin-bottom:14px;font-size:12px} html.kl-article .kla-tag{margin-bottom:12px} html.kl-article .kla-hero h1.title,html.kl-article .kla-hero .title{font-size:27px!important;line-height:1.34!important;margin-bottom:14px!important;letter-spacing:-.2px} html.kl-article .kla-lede{font-size:14.5px;line-height:1.75;margin-bottom:16px} html.kl-article .kla-meta{font-size:12px;gap:0 14px} html.kl-article .kla-shell{padding-top:18px;padding-bottom:28px} html.kl-article .kla-shell .newsDetail{border-radius:14px;padding:22px 18px 24px!important} html.kl-article .richContent p,html.kl-article .richContent span, html.kl-article .richContent div,html.kl-article .richContent li{font-size:16.5px!important;line-height:1.9!important} html.kl-article .richContent p{margin-bottom:18px!important} html.kl-article .richContent p.kla-lede-p, html.kl-article .richContent p.kla-lede-p span{font-size:17.5px!important;line-height:1.92!important} html.kl-article .richContent p.kla-lede-p{margin-bottom:24px!important;padding-bottom:22px!important} html.kl-article .richContent h2.kl-h,html.kl-article .richContent h2.kl-h span{font-size:23px!important} html.kl-article .richContent h2.kl-h{margin:46px 0 16px!important} html.kl-article .richContent h3.kl-h3,html.kl-article .richContent h3.kl-h3 span{font-size:17.5px!important} html.kl-article .richContent h3.kl-h3{margin:28px 0 10px!important} html.kl-article .richContent img{margin:22px 0!important;border-radius:10px} html.kl-article .richContent table td{padding:20px 18px 20px 52px!important;border-radius:12px!important} html.kl-article .richContent table td::before{left:17px;top:8px;font-size:42px} html.kl-article .richContent table td *{font-size:16px!important} html.kl-article .kla-h2,html.kl-article .kla-cta h2{font-size:22px} html.kl-article .kla-sub,html.kl-article .kla-cta p{font-size:13.5px} html.kl-article .kla-rel-in{padding-top:38px} html.kl-article .kla-cta{padding:38px 0;margin-top:34px} html.kl-article .kla-btns a{padding:12px 22px;font-size:14.5px} html.kl-article .kla-relcard{padding:18px} html.kl-article .kla-relcard>div:first-child{font-size:15.5px!important} html.kl-article #kl-top{display:none!important} }