/* ===== 金航 · 子页共用样式（17+ 页差异化主题色与版式） ===== */ /* 说明：本文件作为所有子页的"差异化变体基地"。每页只需即可切主题色和版式。 */ /* ---------- 通用 hero 头 ---------- */ .sp-hero{ position:relative;overflow:hidden; padding:80px 0 56px; background:linear-gradient(135deg,#0a2540 0%,#102a43 50%,#1c3d5a 100%); color:#fff; } .sp-hero::after{ content:"";position:absolute;inset:auto -10% -40% -10%;height:60%; background:radial-gradient(ellipse at center,rgba(212,175,55,.25),transparent 60%); pointer-events:none; } .sp-hero .wrap{position:relative;z-index:2} .sp-hero h1{ font-size:54px;line-height:1.1;margin:14px 0 12px; letter-spacing:1px; background:linear-gradient(180deg,#fff 0%,#d4af37 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .sp-hero h2{font-size:18px;font-weight:400;opacity:.85;margin-bottom:24px} .sp-hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .sp-hero .bdg{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:99px; background:rgba(255,255,255,.12);font-size:13px;color:#fff; border:1px solid rgba(255,255,255,.18); } .sp-hero .bdg::before{content:"";width:6px;height:6px;border-radius:99px;background:#d4af37} .sp-hero .art{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:420px;opacity:.92} @media(max-width:900px){.sp-hero h1{font-size:38px}.sp-hero .art{display:none}} /* 子页正文 */ .sp-body{padding:64px 0} .sp-body section{margin-bottom:48px} .sp-body h3{font-size:24px;margin:24px 0 12px;color:#0a2540} .sp-body p{color:#444;line-height:1.85} /* ---------- 三问铺垫（为什么/好在哪/难在哪） ---------- */ .sp-three{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; margin:32px 0; } .sp-three .q{ background:#fff;border-radius:14px;padding:28px 24px; box-shadow:0 8px 24px rgba(15,42,67,.07); border-top:4px solid var(--c-primary,#0a2540); transition:transform .25s; } .sp-three .q:hover{transform:translateY(-4px)} .sp-three .q .ico{ width:52px;height:52px;border-radius:14px; background:linear-gradient(135deg,var(--c-primary,#0a2540),var(--c-primary-2,#1c3d5a)); display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px; margin-bottom:16px; } .sp-three .q h4{font-size:18px;margin-bottom:10px;color:#0a2540} .sp-three .q p{font-size:14px;color:#5b6470;line-height:1.75} @media(max-width:900px){.sp-three{grid-template-columns:1fr}} /* ---------- 大表（交付步骤） ---------- */ .sp-table{ width:100%;border-collapse:collapse; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 8px 24px rgba(15,42,67,.07); margin:24px 0; } .sp-table thead th{ background:linear-gradient(135deg,var(--c-primary,#0a2540),var(--c-primary-2,#1c3d5a)); color:#fff;text-align:left;padding:14px 16px;font-weight:600;font-size:14px; } .sp-table tbody td{ padding:16px;border-bottom:1px solid #eef1f5;font-size:14px;color:#333;vertical-align:top; } .sp-table tbody tr:hover{background:#fafbfc} .sp-table tbody td .step-num{ display:inline-block;width:26px;height:26px;line-height:26px;text-align:center; border-radius:99px;background:rgba(212,175,55,.15);color:#a07a14;font-weight:700; margin-right:8px;font-size:13px; } .sp-table tbody td:last-child{color:var(--c-primary,#0a2540);font-weight:600} /* ---------- 流程时间轴（variant-timeline） ---------- */ .variant-timeline .timeline{ position:relative;padding:24px 0; } .variant-timeline .timeline::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--c-primary,#0a2540),transparent); } .variant-timeline .tl-row{ position:relative;display:grid;grid-template-columns:1fr 60px 1fr;gap:18px;margin-bottom:28px; } .variant-timeline .tl-row .dot{ width:34px;height:34px;border-radius:99px;margin:0 auto; background:#fff;border:3px solid var(--c-primary,#0a2540); display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--c-primary,#0a2540); } .variant-timeline .tl-row .left{text-align:right} .variant-timeline .tl-row .right{text-align:left} .variant-timeline .tl-row .card{ background:#fff;border-radius:10px;padding:16px 18px; box-shadow:0 4px 14px rgba(15,42,67,.06); } .variant-timeline .tl-row .card h5{font-size:15px;color:var(--c-primary,#0a2540);margin-bottom:6px} .variant-timeline .tl-row .card p{font-size:13px;color:#5b6470;line-height:1.7} @media(max-width:900px){ .variant-timeline .timeline::before{left:18px} .variant-timeline .tl-row{grid-template-columns:30px 1fr} .variant-timeline .tl-row .left{text-align:left} .variant-timeline .tl-row .dot{grid-column:1} .variant-timeline .tl-row .left,.variant-timeline .tl-row .right{grid-column:2} } /* ---------- 对比表格（variant-compare） ---------- */ .variant-compare .compare-table{ display:grid;gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:24px 0; } .variant-compare .compare-card{ background:#fff;border-radius:14px;padding:24px 22px; box-shadow:0 8px 24px rgba(15,42,67,.07); border:2px solid transparent; position:relative;overflow:hidden; } .variant-compare .compare-card.hl{ border-color:var(--c-primary,#0a2540); background:linear-gradient(180deg,#fff 0%,#f3f7fc 100%); transform:scale(1.04); } .variant-compare .compare-card.hl::after{ content:"推荐";position:absolute;top:14px;right:-32px; background:var(--c-primary,#0a2540);color:#fff;font-size:12px; padding:4px 36px;transform:rotate(35deg); } .variant-compare .compare-card h5{ font-size:22px;color:var(--c-primary,#0a2540);margin-bottom:6px; } .variant-compare .compare-card .price{ font-size:26px;color:#d4af37;font-weight:700;margin:10px 0; } .variant-compare .compare-card ul{list-style:none;padding:0;margin:12px 0} .variant-compare .compare-card li{font-size:13px;padding:5px 0;color:#444} .variant-compare .compare-card li::before{content:"✓ ";color:var(--c-primary,#0a2540);font-weight:700} /* ---------- 雷达/金字塔（variant-pyramid） ---------- */ .variant-pyramid .pyramid{ display:flex;flex-direction:column;align-items:center;gap:8px;margin:32px 0; } .variant-pyramid .py-layer{ display:flex;align-items:center;justify-content:center; color:#fff;font-weight:600;border-radius:8px; padding:14px 0;text-align:center; background:linear-gradient(135deg,var(--c-primary,#0a2540),var(--c-primary-2,#1c3d5a)); } .variant-pyramid .py-1{width:60%} .variant-pyramid .py-2{width:75%} .variant-pyramid .py-3{width:90%} /* ---------- Bento 错落型（variant-bento） ---------- */ .variant-bento .bento{ display:grid;gap:14px;margin:24px 0; grid-template-columns:repeat(6,1fr);grid-auto-rows:120px; } .variant-bento .b{ border-radius:14px;padding:18px;color:#fff; display:flex;flex-direction:column;justify-content:space-between; position:relative;overflow:hidden; } .variant-bento .b h5{font-size:16px;font-weight:600;line-height:1.3} .variant-bento .b p{font-size:12px;opacity:.85;line-height:1.6;margin-top:6px} .variant-bento .b .num{ position:absolute;right:14px;top:12px;font-size:32px;font-weight:700;opacity:.25; } .variant-bento .b1{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#3b5bdb,#5c7cfa)} .variant-bento .b2{grid-column:span 2;background:linear-gradient(135deg,#d4af37,#f0c040);color:#3a2c00} .variant-bento .b3{grid-column:span 2;background:linear-gradient(135deg,#0a8a5a,#0eab6b)} .variant-bento .b4{grid-column:span 3;background:linear-gradient(135deg,#7e3fbe,#9c5fd6)} .variant-bento .b5{grid-column:span 3;background:linear-gradient(135deg,#c93b3b,#e05757)} .variant-bento .b6{grid-column:span 2;background:linear-gradient(135deg,#0b7285,#1098ad)} .variant-bento .b7{grid-column:span 2;background:linear-gradient(135deg,#5f3dc4,#845ef7)} .variant-bento .b8{grid-column:span 2;background:linear-gradient(135deg,#862e9c,#ae3ec9)} /* ---------- 数字指标墙（variant-metrics） ---------- */ .variant-metrics .metrics{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0; } .variant-metrics .m{ background:#fff;border-radius:14px;padding:24px;text-align:center; box-shadow:0 4px 14px rgba(15,42,67,.06); border-top:3px solid var(--c-primary,#0a2540); } .variant-metrics .m .v{font-size:38px;font-weight:700;color:var(--c-primary,#0a2540);line-height:1} .variant-metrics .m .l{font-size:13px;color:#5b6470;margin-top:8px} .variant-metrics .m .d{font-size:11px;color:#889;margin-top:4px} @media(max-width:900px){.variant-metrics .metrics{grid-template-columns:repeat(2,1fr)}} /* ---------- 大卡片矩阵（variant-cards） ---------- */ .variant-cards .cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:24px 0; } .variant-cards .c{ background:#fff;border-radius:14px;padding:24px; box-shadow:0 4px 14px rgba(15,42,67,.06); border-left:4px solid var(--c-primary,#0a2540); } .variant-cards .c .ico{ width:42px;height:42px;border-radius:10px;background:rgba(10,37,64,.08); display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--c-primary,#0a2540); margin-bottom:14px; } .variant-cards .c h5{font-size:16px;margin-bottom:8px;color:#0a2540} .variant-cards .c p{font-size:13px;color:#5b6470;line-height:1.7} /* ---------- 案例瀑布（variant-cases） ---------- */ .variant-cases .cases{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:24px 0; } .variant-cases .case{ background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 8px 24px rgba(15,42,67,.08); display:flex;flex-direction:column; } .variant-cases .case .top{ padding:18px 22px; background:linear-gradient(135deg,var(--c-primary,#0a2540),var(--c-primary-2,#1c3d5a)); color:#fff; } .variant-cases .case .top .tag{ display:inline-block;font-size:11px;padding:3px 9px;border-radius:99px; background:rgba(255,255,255,.18);margin-bottom:8px; } .variant-cases .case .top h5{font-size:18px;font-weight:600;line-height:1.4} .variant-cases .case .body{padding:20px 22px} .variant-cases .case .row{ display:flex;justify-content:space-between;font-size:13px; padding:8px 0;border-bottom:1px dashed #eef1f5; } .variant-cases .case .row:last-child{border-bottom:none} .variant-cases .case .row b{color:var(--c-primary,#0a2540)} @media(max-width:900px){.variant-cases .cases{grid-template-columns:1fr}} /* ---------- 风险雷达（variant-radar） ---------- */ .variant-radar .zones{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0; } .variant-radar .zone{ border-radius:12px;padding:20px 22px;color:#fff;text-align:center; } .variant-radar .z-red{background:linear-gradient(135deg,#c93b3b,#e05757)} .variant-radar .z-yellow{background:linear-gradient(135deg,#d4af37,#f0c040);color:#3a2c00} .variant-radar .z-green{background:linear-gradient(135deg,#0a8a5a,#0eab6b)} .variant-radar .zone .lvl{font-size:24px;font-weight:700;margin-bottom:6px} .variant-radar .zone .n{font-size:13px;opacity:.9} /* ---------- 主题色变量 ---------- */ .theme-navy{--c-primary:#0a2540;--c-primary-2:#1c3d5a;--c-soft:#eef3fb} /* 出口退税/认证 */ .theme-gold{--c-primary:#a07a14;--c-primary-2:#d4af37;--c-soft:#fdf7e7} /* 股权/财税 */ .theme-purple{--c-primary:#5f3dc4;--c-primary-2:#845ef7;--c-soft:#f1ecff} /* 高端财税 */ .theme-green{--c-primary:#0a8a5a;--c-primary-2:#0eab6b;--c-soft:#e6f7f0} /* 财务咨询 */ .theme-blue{--c-primary:#1864ab;--c-primary-2:#339af0;--c-soft:#e8f3fc} /* 税务/认证咨询 */ .theme-orange{--c-primary:#d9480f;--c-primary-2:#ff6b35;--c-soft:#fff1e6} /* 风险/合规 */ .theme-cyan{--c-primary:#0b7285;--c-primary-2:#1098ad;--c-soft:#e3f5f9} /* 跨境/常识 */ .theme-rose{--c-primary:#c2255c;--c-primary-2:#e64980;--c-soft:#fde7ef} /* 用工/残保 */ .theme-teal{--c-primary:#0ca678;--c-primary-2:#15aabf;--c-soft:#e3faf5} /* 经营账 */ .theme-indigo{--c-primary:#364fc7;--c-primary-2:#5c7cfa;--c-soft:#edf0fb} /* 精细化账 */ .theme-slate{--c-primary:#36414e;--c-primary-2:#495867;--c-soft:#eef0f3} /* 旧账 */ .theme-red{--c-primary:#c92a2a;--c-primary-2:#e03131;--c-soft:#fdebeb} /* 信用修复 */ .theme-mint{--c-primary:#099268;--c-primary-2:#0bb178;--c-soft:#e6f9f3} /* 财务外包 */ .theme-saffron{--c-primary:#cc7a00;--c-primary-2:#e89923;--c-soft:#fff5e0} /* 商标 */ /* ---------- CTA 复召区 ---------- */ .sp-cta{ background:linear-gradient(135deg,var(--c-primary,#0a2540) 0%,var(--c-primary-2,#1c3d5a) 100%); color:#fff;border-radius:18px;padding:42px 36px;margin-top:48px; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .sp-cta h3{font-size:24px;margin-bottom:6px;color:#fff} .sp-cta p{color:rgba(255,255,255,.85);font-size:14px} .sp-cta .actions{display:flex;gap:12px;flex-wrap:wrap} .sp-cta .btn{display:inline-block;padding:12px 22px;border-radius:99px;font-weight:600;text-decoration:none;transition:transform .2s} .sp-cta .btn-primary{background:#d4af37;color:#0a2540} .sp-cta .btn-primary:hover{transform:translateY(-2px)} .sp-cta .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)} .sp-cta .btn-ghost:hover{background:rgba(255,255,255,.1)} /* ---------- 主体内容左右交错（variant-showcase） ---------- */ .variant-showcase .showcase{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;margin:32px 0} .variant-showcase .showcase.flip{grid-template-columns:1fr 1.1fr} .variant-showcase .showcase.flip .art{order:-1} .variant-showcase .showcase .art{ background:linear-gradient(135deg,var(--c-primary,#0a2540),var(--c-primary-2,#1c3d5a)); color:#fff;border-radius:18px;padding:36px 30px;min-height:260px; display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden; } .variant-showcase .showcase .art .num{ font-size:90px;font-weight:700;opacity:.15;position:absolute;right:18px;top:6px;line-height:1; } .variant-showcase .showcase .art h4{font-size:28px;color:#fff;margin-bottom:10px} .variant-showcase .showcase .art ul{list-style:none;padding:0;margin:14px 0 0} .variant-showcase .showcase .art li{padding:6px 0;font-size:14px} .variant-showcase .showcase .art li::before{content:"▸ ";color:#d4af37;font-weight:700} .variant-showcase .showcase .txt h5{font-size:14px;color:var(--c-primary,#0a2540);font-weight:600;letter-spacing:1px} .variant-showcase .showcase .txt h3{font-size:28px;margin:8px 0 12px} .variant-showcase .showcase .txt p{color:#444;line-height:1.85;font-size:15px;margin-bottom:10px} @media(max-width:900px){ .variant-showcase .showcase, .variant-showcase .showcase.flip{grid-template-columns:1fr} .variant-showcase .showcase.flip .art{order:0} } /* ---------- 资料下载小提示 ---------- */ .sp-toc{ background:#fafbfc;border-left:3px solid var(--c-primary,#0a2540); padding:14px 18px;border-radius:6px;margin:20px 0;font-size:13px;color:#5b6470; } .sp-toc b{color:var(--c-primary,#0a2540)} /* 面包屑 */ .sp-crumbs{ font-size:13px;color:#889;padding:18px 0;background:#f8f9fb; } .sp-crumbs a{color:#5b6470;text-decoration:none} .sp-crumbs a:hover{color:var(--c-primary,#0a2540)} .sp-crumbs .sep{margin:0 8px;color:#c2c8d0} /* ---------- 资讯频道（news.html / news-detail.html） ---------- */ .news-filter{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px} .nf{border:1.5px solid var(--line,#e6eaf0);background:#fff;color:#5b6b7d;padding:8px 18px;border-radius:30px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s} .nf:hover{border-color:var(--navy,#0a2540);color:var(--navy,#0a2540)} .nf.active{background:var(--navy,#0a2540);color:#fff;border-color:var(--navy,#0a2540)} .news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .news-item{background:#fff;border:1px solid var(--line,#e6eaf0);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;transition:.22s} .news-item:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(16,42,67,.12);border-color:var(--gold,#c9a14a)} .ni-top{display:flex;align-items:center;justify-content:space-between} .news-item h3{font-size:18px;line-height:1.5;color:var(--navy,#0a2540)} .news-item p{font-size:14px;color:#5b6b7d;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ni-more{font-size:13px;font-weight:700;color:var(--gold,#c9a14a)} .n-tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:30px;width:fit-content} .t-blue{background:var(--c-blue-bg,#e6f3ff);color:var(--c-blue,#3aa5ff)} .t-orange{background:var(--c-orange-bg,#fff1ea);color:var(--c-orange,#ff7a45)} .t-gold{background:#fbf2dc;color:#a9802e} .t-green{background:var(--c-green-bg,#e8f8f1);color:var(--c-green,#3ecf8e)} .n-date{font-size:12px;color:#9aa7b5} .news-article{max-width:760px;margin:0 auto;font-size:16px;line-height:1.9} .news-article h2{font-size:20px;color:var(--navy,#0a2540);margin:28px 0 12px} .news-article p{margin-bottom:16px;color:var(--ink,#1f2a37)} .news-article ul{margin:0 0 16px 22px} .news-article li{margin-bottom:8px} .news-meta{margin-top:10px;color:#5b6b7d;font-size:14px} .news-back{margin-top:30px;text-align:center} @media(max-width:760px){.news-list{grid-template-columns:1fr}}