@charset "utf-8"; /* ========================================================================== 中研普华 · 企业资质认定综合服务平台 设计系统 / Design System ========================================================================== */ :root { /* 品牌色 —— 青绿（主色，原商务蓝） */ --blue-900: #04302b; --blue-800: #06564d; --blue-700: #0b7a6c; --blue-600: #0f9683; --blue-500: #14b3a0; --blue-300: #6ed7c9; --blue-100: #d2f2ed; --blue-50: #ebfaf7; /* 点缀色 —— 金橙 */ --gold-600: #b8863b; --gold-500: #c9a063; --gold-300: #e5cf9e; --gold-50: #fbf6ec; /* 功能色 —— 仅用于错误提示、价格强调、痛点对照，不用于按钮 */ --red-600: #c62b33; --red-500: #d93a42; --red-50: #fdf0f0; /* 行动色 —— CTA 按钮专用琥珀，与青绿互补，白字对比度达标 */ --cta-600: #b45309; --cta-500: #d97706; --cta-50: #fdf6e9; /* 中性色 */ --ink-900: #16202b; --ink-800: #22303f; --ink-700: #3a4756; --ink-500: #64717f; --ink-400: #8b97a4; --ink-300: #b6c0cb; --line: #e3eae7; --line-soft: #eff4f1; --bg: #ffffff; --bg-soft: #f6faf8; --bg-deep: #06564d; /* 尺寸 */ --wrap: 1220px; --radius: 14px; --radius-sm: 8px; --shadow-sm: 0 1px 3px rgba(4, 48, 43, .06), 0 1px 2px rgba(4, 48, 43, .04); --shadow: 0 6px 22px rgba(4, 48, 43, .08); --shadow-lg: 0 18px 48px rgba(4, 48, 43, .14); --header-h: 68px; --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.75; color: var(--ink-700); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { margin: 0; color: var(--ink-900); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; } p { margin: 0 0 14px; } p:last-child { margin-bottom: 0; } a { color: var(--blue-700); text-decoration: none; transition: color .2s; } a:hover { color: var(--blue-500); } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; } /* ---------- 布局 ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .section { padding: 76px 0; } .section--soft { background: var(--bg-soft); } .section--tight { padding: 52px 0; } /* ---------- 通用文字 ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 12px; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-600), var(--gold-500)); } .sec-head { max-width: 780px; margin: 0 auto 46px; text-align: center; } .sec-head h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 14px; } .sec-head h2 .hl { color: var(--blue-700); } .sec-head p { color: var(--ink-500); font-size: 15.5px; } .sec-head--left { margin-left: 0; text-align: left; } .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .muted { color: var(--ink-500); } .small { font-size: 13.5px; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: linear-gradient(135deg, var(--cta-500), var(--cta-600)); color: #fff; box-shadow: 0 8px 20px rgba(198, 43, 51, .28); } .btn--primary:hover { color: #fff; box-shadow: 0 12px 26px rgba(198, 43, 51, .36); } .btn--blue { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; box-shadow: 0 8px 20px rgba(11, 122, 108, .26); } .btn--blue:hover { color: #fff; box-shadow: 0 12px 26px rgba(11, 122, 108, .34); } .btn--ghost { background: #fff; color: var(--blue-700); border-color: var(--blue-100); } .btn--ghost:hover { color: var(--blue-700); border-color: var(--blue-300); background: var(--blue-50); } .btn--outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); } .btn--outline-white:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .btn--sm { padding: 8px 18px; font-size: 13.5px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- 顶部条 ---------- */ .topbar { background: var(--blue-900); color: rgba(255, 255, 255, .78); font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; height: 40px; padding: 0; } .topbar a { color: rgba(255, 255, 255, .78); } .topbar a:hover { color: #fff; } .topbar__left { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; min-width: 0; } .topbar__left span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .topbar__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; white-space: nowrap; } /* 管理员登录入口（顶栏右侧小胶囊） */ .topbar__admin { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid rgba(255, 214, 110, .55); border-radius: 999px; color: #ffd66e !important; font-size: 12px; line-height: 18px; text-decoration: none; transition: background .2s ease, color .2s ease; } .topbar__admin:hover { background: rgba(255, 214, 110, .16); color: #fff !important; } .topbar__admin::before { content: "🔒"; font-size: 10px; line-height: 1; } @media (max-width: 860px) { .topbar__admin { display: none; } } /* ---------- 头部导航 ---------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; } .header.is-scrolled { box-shadow: 0 4px 18px rgba(4, 48, 43, .09); } .header .wrap { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 20px; height: var(--header-h); padding: 0; } /* ---------- Logo：纯文字徽标「喀塔尔」（纯白 #fff） ---------- 站点使用纯文字徽标，不使用图片：.logo__mark 提供品牌青底，.logo__mark-text 为纯白文字。 若以后要换成图片徽标：把图片放进 assets/img/ 命名 logo.svg，再在 HTML 的 .logo__mark 内加 喀塔尔 （图片存在时 CSS 会自动隐藏文字）。 -------------------------------------------------------------- */ .logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .logo__mark { width: 62px; height: 40px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15.5px; letter-spacing: 1px; box-shadow: 0 6px 14px rgba(11, 122, 108, .28); overflow: hidden; } .logo__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .logo__img + .logo__mark-text { display: none; } .logo__mark-text { color: #fff; white-space: nowrap; letter-spacing: 1px; } .logo__text { line-height: 1.2; } .logo__name { font-size: 16.5px; font-weight: 800; color: var(--ink-900); letter-spacing: .01em; } .nav { margin-left: auto; display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 0; } .nav a { position: relative; padding: 9px 12px; font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--ink-800); border-radius: 8px; transition: color .2s, background .2s; } .nav a:hover { color: var(--blue-700); background: var(--blue-50); } .nav a.is-active { color: var(--blue-700); } .nav a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2.5px; border-radius: 2px; background: var(--blue-600); } .header__cta { margin-left: 6px; flex-shrink: 0; } /* 顶部内容始终保持“一排”：屏宽不足时自动压缩间距/字号，不换行堆叠 */ @media (max-width: 1400px) { .header .wrap { gap: 12px; } .nav { gap: 2px; } .nav a { padding: 8px 9px; font-size: 14px; } .nav__item > .nav__link { gap: 4px; } .logo { gap: 9px; } .logo__mark { width: 54px; height: 36px; } .logo__name { font-size: 15.5px; } } @media (min-width: 1081px) and (max-width: 1200px) { .header .wrap { gap: 8px; } .nav { gap: 0; } .nav a { padding: 7px 6px; font-size: 13px; } .nav a.is-active::after { left: 6px; right: 6px; } .logo { gap: 7px; } .logo__mark { width: 46px; height: 33px; font-size: 13px; } .logo__name { font-size: 14px; } .header__cta { padding: 8px 13px; margin-left: 4px; } } /* 手机端导航按钮：文字「目录」（原为三条杠图标，2026-09-15 按用户要求改为两个汉字） */ .burger { display: none; margin-left: auto; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; color: var(--ink-800); font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-indent: .08em; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; } .burger:hover { border-color: var(--blue-500); color: var(--blue-700); } .burger.is-open { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-700); } .mnav { display: none; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow-y: auto; } .mnav.is-open { display: block; } .mnav a { display: block; padding: 14px 24px; font-size: 15px; font-weight: 600; color: var(--ink-800); border-bottom: 1px solid var(--line-soft); } .mnav a:last-child { border-bottom: 0; } .mnav a.is-active { color: var(--blue-700); background: var(--blue-50); } /* ---------- 面包屑 ---------- */ .crumb { font-size: 13.5px; color: var(--ink-400); } .crumb a { color: var(--ink-500); } .crumb a:hover { color: var(--blue-700); } .crumb span { margin: 0 8px; color: var(--ink-300); } /* ---------- 页头 Hero ---------- */ .page-hero { position: relative; overflow: hidden; color: #fff; padding: 62px 0 66px; background: linear-gradient(120deg, var(--blue-900) 0%, var(--blue-700) 52%, #1a5fc8 100%); } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .14), transparent 42%), radial-gradient(circle at 88% 78%, rgba(201, 160, 99, .3), transparent 46%); } .page-hero::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 85%); } .page-hero .wrap { position: relative; z-index: 1; } .page-hero__tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; margin-bottom: 20px; } .page-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; } .page-hero__desc { font-size: 16.5px; color: rgba(255, 255, 255, .86); max-width: 760px; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 30px; } .page-hero__meta div { display: flex; align-items: baseline; gap: 8px; } .page-hero__meta b { font-size: 26px; color: #fff; font-weight: 800; letter-spacing: -.02em; } .page-hero__meta span { font-size: 13.5px; color: rgba(255, 255, 255, .78); } .page-hero .btn-row { margin-top: 32px; } .page-hero .crumb { color: rgba(255, 255, 255, .7); margin-bottom: 18px; } .page-hero .crumb a { color: rgba(255, 255, 255, .78); } .page-hero .crumb span { color: rgba(255, 255, 255, .45); } /* 首页 Hero */ .home-hero { position: relative; overflow: hidden; padding: 78px 0 88px; color: #fff; background: linear-gradient(125deg, #032d28 0%, #06564d 46%, #0f9683 100%); } .home-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 78% 18%, rgba(201, 160, 99, .34), transparent 46%), radial-gradient(circle at 10% 82%, rgba(20, 179, 160, .5), transparent 50%); } .home-hero::after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 60% 40%, #000, transparent 78%); -webkit-mask-image: radial-gradient(circle at 60% 40%, #000, transparent 78%); } .home-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; } .home-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.24; margin-bottom: 20px; } .home-hero h1 em { font-style: normal; color: #ffd489; } .home-hero__lead { font-size: 17px; color: rgba(255, 255, 255, .86); max-width: 620px; margin-bottom: 28px; } .home-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .home-hero__pills li { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); } .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, .16); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); } .hero-stats div { background: rgba(3, 45, 40, .42); backdrop-filter: blur(6px); padding: 22px 24px; } .hero-stats b { display: block; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; } .hero-stats span { font-size: 13px; color: rgba(255, 255, 255, .74); } /* Hero 快速咨询卡 */ .hero-card { background: #fff; border-radius: 16px; padding: 26px; box-shadow: var(--shadow-lg); color: var(--ink-700); } .hero-card h3 { font-size: 18px; margin-bottom: 6px; } .hero-card > p { font-size: 13.5px; color: var(--ink-500); margin-bottom: 18px; } /* ---------- 板块导航（页内锚点） ---------- */ .anchors { position: sticky; top: var(--header-h); z-index: 60; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .anchors__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; } .anchors__inner::-webkit-scrollbar { display: none; } .anchors a { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-700); border: 1px solid var(--line); background: #fff; transition: all .2s; } .anchors a:hover { border-color: var(--blue-300); color: var(--blue-700); background: var(--blue-50); } .anchors a.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; } /* ---------- 卡片 ---------- */ .grid { display: grid; gap: 22px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-5 { grid-template-columns: repeat(5, 1fr); } .g-6 { grid-template-columns: repeat(6, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-100); } .card h3, .card h4 { font-size: 17px; margin-bottom: 10px; } .card p { font-size: 14px; color: var(--ink-500); } .card--soft { background: var(--bg-soft); border-color: transparent; } .card--soft:hover { border-color: var(--blue-100); background: #fff; } .card__tag { display: inline-block; margin-bottom: 12px; padding: 4px 11px; font-size: 12px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; } .icon-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); color: var(--blue-700); margin-bottom: 16px; } .icon-box svg { width: 24px; height: 24px; } .icon-box--gold { background: linear-gradient(135deg, var(--gold-50), #f3e6cf); color: var(--gold-600); } .icon-box--sm { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; } .icon-box--sm svg { width: 20px; height: 20px; } .icon-box--wechat { background: linear-gradient(135deg, #1aad19, #07c160); color: #fff; } /* 业务板块大卡 */ .svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 26px; transition: transform .28s, box-shadow .28s, border-color .28s; } .svc-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--blue-600), var(--blue-400, #4a9bff)); } .svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); } .svc-card__no { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--blue-300); margin-bottom: 12px; } .svc-card h3 { font-size: 21px; margin-bottom: 6px; } .svc-card__en { font-size: 11.5px; letter-spacing: .14em; color: var(--ink-400); text-transform: uppercase; margin-bottom: 16px; } .svc-card p { font-size: 14.5px; color: var(--ink-500); flex: 1; } .svc-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 20px; } .svc-card__tags span { font-size: 12px; padding: 3px 10px; border-radius: 6px; background: var(--bg-soft); color: var(--ink-500); border: 1px solid var(--line-soft); } .svc-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue-700); } .svc-card__link svg { width: 16px; height: 16px; transition: transform .25s; } .svc-card:hover .svc-card__link svg { transform: translateX(4px); } /* 三驾马车支撑能力 · 彩色卡（蓝 / 金 / 绿 三色分层） */ .svc-card--blue::before { background: linear-gradient(90deg, #2563eb, #5b9bff); } .svc-card--blue .svc-card__no { color: #93b4f0; } .svc-card--blue .icon-box--sm { background: linear-gradient(135deg, #dbe7ff, #c2d8ff); color: #2563eb; } .svc-card--blue .svc-card__link { color: #1d4ed8; } .svc-card--blue:hover { border-color: #bcd2fb; } .svc-card--blue .svc-card__tags span { background: #eef4ff; color: #2b4f8f; border-color: #d6e3fb; } .svc-card--gold::before { background: linear-gradient(90deg, #b8863b, #d9a85a); } .svc-card--gold .svc-card__no { color: #c9a063; } .svc-card--gold .icon-box--sm { background: linear-gradient(135deg, #f3e6cf, #ecd9b4); color: #b8863b; } .svc-card--gold .svc-card__link { color: #9a6f29; } .svc-card--gold:hover { border-color: #ecd9b4; } .svc-card--gold .svc-card__tags span { background: #faf3e6; color: #8a6321; border-color: #ecd9b4; } .svc-card--green::before { background: linear-gradient(90deg, #0f9d58, #34c77b); } .svc-card--green .svc-card__no { color: #6cc399; } .svc-card--green .icon-box--sm { background: linear-gradient(135deg, #dff5ea, #c7edd8); color: #0f9d58; } .svc-card--green .svc-card__link { color: #0b7a43; } .svc-card--green:hover { border-color: #bfe9d2; } .svc-card--green .svc-card__tags span { background: #eef9f2; color: #0b6e3d; border-color: #c7edd8; } /* 业务卡底部双入口：了解详情(左) + 申报评估(右·枣红醒目) */ .svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap; margin-top: 6px; } .svc-card__assess { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 13.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: #fff; padding: 10px 20px; border-radius: 999px; background: linear-gradient(135deg, #c0202e, #8c1622); box-shadow: 0 8px 20px rgba(178, 31, 45, .36), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .2s, box-shadow .2s; } .svc-card:hover .svc-card__assess { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(178, 31, 45, .36); } .svc-card__assess::after { content: "→"; font-weight: 900; } /* ---------- 数据条 ---------- */ .stat-band { background: linear-gradient(120deg, var(--blue-900), var(--blue-700)); color: #fff; } .stat-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); } .stat-band__grid > div { background: var(--blue-800); padding: 34px 26px; text-align: center; } .stat-band b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .stat-band b small { font-size: 18px; font-weight: 700; margin-left: 2px; } .stat-band span { font-size: 14px; color: rgba(255, 255, 255, .76); } /* ---------- 步骤 / 流程 ---------- */ .steps { display: grid; gap: 20px; counter-reset: st; } .step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; transition: box-shadow .25s, border-color .25s; } .step:hover { box-shadow: var(--shadow); border-color: var(--blue-100); } .step__no { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); color: #fff; font-size: 20px; font-weight: 800; } .step h4 { font-size: 17px; margin-bottom: 8px; } .step p { font-size: 14.5px; color: var(--ink-500); margin: 0; } .step ul { margin-top: 10px; display: grid; gap: 6px; } .step ul li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink-500); } .step ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); } /* 连接线版本 */ .steps--line .step:not(:last-child)::after { content: ""; position: absolute; left: 55px; top: 84px; width: 2px; height: 20px; background: repeating-linear-gradient(180deg, var(--blue-200, #9fc4f7) 0 4px, transparent 4px 8px); } .flow { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); } .flow__item { position: relative; text-align: center; padding: 26px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .flow__item::after { content: ""; position: absolute; right: -14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%) rotate(-45deg); border-top: 2px solid var(--blue-200, #9fc4f7); border-right: 2px solid var(--blue-200, #9fc4f7); } .flow__item:last-child::after { display: none; } .flow__no { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); font-weight: 800; font-size: 15px; } .flow__item h4 { font-size: 15.5px; margin-bottom: 6px; } .flow__item p { font-size: 13.5px; color: var(--ink-500); margin: 0; } .flow.flow--3 { grid-template-columns: repeat(3, 1fr); } .flow.flow--5 { grid-template-columns: repeat(5, 1fr); } .flow.flow--6 { grid-template-columns: repeat(6, 1fr); } /* ---------- 编号列表 ---------- */ .num-list { display: grid; gap: 14px; } .num-list li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 16px 18px; background: var(--bg-soft); border-radius: var(--radius-sm); border-left: 3px solid var(--blue-500); } .num-list li b { color: var(--blue-700); font-size: 15px; font-weight: 800; } .num-list li p { margin: 0; font-size: 14.5px; color: var(--ink-700); } .num-list li strong { display: block; color: var(--ink-900); font-size: 15.5px; margin-bottom: 4px; } /* ---------- 标签列表 ---------- */ .tag-list { display: flex; flex-wrap: wrap; gap: 10px; } .tag-list li { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--line); color: var(--ink-700); transition: all .2s; } .tag-list li:hover { border-color: var(--blue-300); color: var(--blue-700); background: var(--blue-50); } .tag-list--fill li { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); } /* 联系方式：电话与微信 微信号标注 */ .wx-tag { font-size: 13px; font-weight: 500; color: var(--ink-500); white-space: nowrap; } /* 覆盖区域：七大区 → 省份映射 */ .region-map { display: grid; gap: 2px; } .region-map__item { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); } .region-map__item:last-child { border-bottom: 0; } .region-map__item > b { flex: 0 0 76px; color: var(--ink-700); font-size: 14px; font-weight: 700; } .region-map__item > span { color: var(--ink-500); font-size: 13px; line-height: 1.7; } /* 联系方式：微信二维码 */ .qr-card { text-align: center; padding: 22px; } .qr-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; } .qr-row figure { margin: 0; } .qr-row img { width: 150px; height: 150px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line-soft); background: #fff; } .qr-row figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-500); } /* ---------- 表格 ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .table-wrap table { min-width: 640px; font-size: 14.5px; } .table-wrap th, .table-wrap td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .table-wrap thead th { background: var(--blue-800); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; border-bottom: 0; } .table-wrap tbody tr:last-child td { border-bottom: 0; } .table-wrap tbody tr:nth-child(even) { background: #fafcff; } .table-wrap tbody tr:hover { background: var(--blue-50); } .table-wrap td strong { color: var(--ink-900); } .table-wrap .price { color: var(--red-600); font-weight: 800; font-size: 16px; } /* ---------- 对比 / 痛点对照 ---------- */ .vs { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 0; align-items: stretch; } .vs__col { padding: 26px; border-radius: var(--radius); } .vs__col--pain { background: #fdf4f4; border: 1px solid #f6dcdd; } .vs__col--fix { background: #f1f8f2; border: 1px solid #d9ecdc; } .vs__col h4 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .vs__col--pain h4 { color: var(--red-600); } .vs__col--fix h4 { color: #1f7a3d; } .vs__col ul { display: grid; gap: 12px; } .vs__col li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; } .vs__col li b { display: block; color: var(--ink-900); margin-bottom: 2px; } .vs__col li span { color: var(--ink-500); font-size: 13.8px; } .vs__mid { display: grid; place-items: center; color: var(--blue-300); } .vs__mid svg { width: 26px; height: 26px; } /* ---------- 进度条（区域分布） ---------- */ .bars { display: grid; gap: 14px; } .bar { display: grid; grid-template-columns: 78px 1fr 96px; gap: 14px; align-items: center; font-size: 14px; } .bar__name { font-weight: 600; color: var(--ink-800); } .bar__track { height: 12px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); width: 0; transition: width 1.1s cubic-bezier(.22, 1, .36, 1); } .bar__val { text-align: right; color: var(--ink-500); font-size: 13.5px; } .bar__val b { color: var(--blue-700); font-size: 15px; } /* ---------- 手风琴 FAQ ---------- */ .acc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .acc__item + .acc__item { border-top: 1px solid var(--line-soft); } .acc__q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 15.5px; font-weight: 600; color: var(--ink-900); transition: background .2s; } .acc__q:hover { background: var(--bg-soft); } .acc__q .idx { color: var(--blue-500); font-weight: 800; font-size: 14px; flex-shrink: 0; } .acc__q .txt { flex: 1; } .acc__q .sign { flex-shrink: 0; width: 22px; height: 22px; position: relative; } .acc__q .sign::before, .acc__q .sign::after { content: ""; position: absolute; background: var(--ink-400); border-radius: 2px; transition: transform .25s, opacity .2s; } .acc__q .sign::before { left: 2px; right: 2px; top: 10px; height: 2px; } .acc__q .sign::after { top: 2px; bottom: 2px; left: 10px; width: 2px; } .acc__item.is-open .acc__q { background: var(--blue-50); color: var(--blue-800); } .acc__item.is-open .acc__q .sign::after { opacity: 0; transform: rotate(90deg); } .acc__item.is-open .acc__q .sign::before { background: var(--blue-600); } .acc__a { display: none; padding: 0 22px 20px 58px; font-size: 14.5px; color: var(--ink-500); } .acc__item.is-open .acc__a { display: block; animation: fadeDown .3s ease; } .acc__a strong { color: var(--ink-800); } /* ---------- 标签页 ---------- */ .tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .tabs__nav button { padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: all .2s; } .tabs__nav button:hover { border-color: var(--blue-300); color: var(--blue-700); } .tabs__nav button.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; } .tabs__panel { display: none; } .tabs__panel.is-active { display: block; animation: fadeUp .4s ease; } /* ---------- 列表勾选 ---------- */ .check-list { display: grid; gap: 12px; } .check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14.8px; color: var(--ink-700); } .check-list li svg { width: 20px; height: 20px; color: var(--blue-600); margin-top: 3px; } .check-list li b { color: var(--ink-900); } .check-list--2 { grid-template-columns: repeat(2, 1fr); gap: 14px 26px; } .check-list--gold li svg { color: var(--gold-500); } /* ---------- 案例 ---------- */ .case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s, box-shadow .25s; } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .case-card__img { height: 132px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; letter-spacing: .06em; position: relative; overflow: hidden; } .case-card__img::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 22px 22px; } .case-card__body { padding: 16px 18px; } .case-card__body h4 { font-size: 15px; margin-bottom: 4px; } .case-card__body p { font-size: 13px; color: var(--ink-400); margin: 0; } /* ---------- 评价 ---------- */ .quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; } .quote-card__mark { color: var(--gold-300); } .quote-card__mark svg { width: 30px; height: 30px; } .quote-card p { font-size: 14.5px; color: var(--ink-700); flex: 1; } .quote-card__by { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .quote-card__av { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); color: #fff; font-weight: 800; font-size: 15px; } .quote-card__by b { display: block; font-size: 14.5px; color: var(--ink-900); } .quote-card__by span { font-size: 12.5px; color: var(--ink-400); } /* ---------- 客户墙 ---------- */ .client-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .client-grid div { background: #fff; padding: 20px 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-700); transition: background .2s, color .2s; } .client-grid div:hover { background: var(--blue-50); color: var(--blue-700); } /* ---------- 优势条目 ---------- */ .adv { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .adv__item { display: grid; grid-template-columns: 66px 1fr; gap: 22px; padding: 26px; } .adv__item + .adv__item { border-top: 1px solid var(--line-soft); } .adv__no { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-50), #f2e4cb); color: var(--gold-600); font-weight: 800; font-size: 17px; } .adv__item h4 { font-size: 17px; margin-bottom: 8px; } .adv__item p { font-size: 14.5px; color: var(--ink-500); margin: 0; } /* ---------- 提示条 ---------- */ .note { display: flex; gap: 12px; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--gold-50); border: 1px solid #f0e2c6; font-size: 14px; color: #7a5a1d; } .note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--gold-600); } .note--blue { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); } .note--blue svg { color: var(--blue-600); } /* ---------- CTA 带 ---------- */ .cta-band { position: relative; overflow: hidden; padding: 58px 0; color: #fff; background: linear-gradient(120deg, #0d5c47, #14a085 55%, #1bc4a6); } .cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .14), transparent 40%), radial-gradient(circle at 85% 70%, rgba(201, 160, 99, .32), transparent 45%); } .cta-band .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .cta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; } .cta-band p { color: rgba(255, 255, 255, .82); margin: 0; } /* ---------- 表单 ---------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 34px; box-shadow: var(--shadow); } .field { margin-bottom: 18px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } .field-row .field { margin-bottom: 18px; } } .field > label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-800); margin-bottom: 8px; } .field > label i { color: var(--red-500); font-style: normal; margin-left: 2px; } .field input[type="text"], .field input[type="tel"], .field select, .field textarea { width: 100%; padding: 11px 14px; font-size: 14.5px; font-family: inherit; color: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color .2s, box-shadow .2s; } .field textarea { min-height: 108px; resize: vertical; } /* Hero 表单下拉占位符（未选择时灰色） */ .hero-card select.is-empty { color: #98a2b3; } /* 字数计数 */ .field__count { display: block; text-align: right; font-size: 12.5px; color: var(--ink-500); margin-top: 6px; } .field__count b { color: var(--ink-700); font-weight: 700; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(20, 179, 160, .13); } .field .err { display: none; margin-top: 6px; font-size: 13px; color: var(--red-600); } .field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--red-500); } .field.has-err .err { display: block; } .radio-row { display: flex; gap: 10px; flex-wrap: wrap; } .radio-row label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; color: var(--ink-700); transition: all .2s; } .radio-row input { accent-color: var(--blue-600); } .radio-row label:hover { border-color: var(--blue-300); background: var(--blue-50); } .form-msg { display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; } .form-msg.is-ok { display: block; background: #eef8f0; border: 1px solid #cbe8d2; color: #1f7a3d; } /* ---------- 页脚 ---------- */ .footer { background: var(--blue-900); color: rgba(255, 255, 255, .68); font-size: 14px; padding: 60px 0 0; } .footer h4 { color: #fff; font-size: 15.5px; margin-bottom: 18px; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; } .footer p { color: rgba(255, 255, 255, .62); } .footer ul { display: grid; gap: 10px; } .footer a { color: rgba(255, 255, 255, .68); } .footer a:hover { color: #fff; } .footer__logo { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .footer__contact li { display: flex; gap: 10px; align-items: flex-start; } .footer__contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 4px; color: var(--blue-300); } .footer__bottom { padding: 0 0 20px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: rgba(255, 255, 255, .5); } .footer__bottom-line { order: 2; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; } .footer__bottom-phone { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 12px; } .footer__bottom-phone__head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; } .footer__bottom-phone__head svg { width: 18px; height: 18px; color: var(--blue-300); } .footer__bottom-phone__label { font-size: 13px; color: rgba(255, 255, 255, .55); } .footer__bottom-phone a { font-size: 21px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .5px; line-height: 1.45; } .footer__bottom-phone a:hover { color: var(--blue-300); } .footer__email { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; color: rgba(255, 255, 255, .68); font-size: 14px; } .footer__email svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--blue-300); } .footer__bottom-fields { order: 1; } @media (max-width: 900px) { .footer__bottom-line { justify-content: center; text-align: center; flex-wrap: wrap; } .footer__bottom-fields { justify-content: center; } } /* ---------- 首页专属：底部椭圆版权模块 + 邮箱下方联系电话 ---------- */ .footer__bottom-oval { order: 2; width: 100%; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; padding: 13px 32px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .6); font-size: 13px; margin: 10px 0 6px; } .footer__bottom-oval span { white-space: nowrap; } .footer__contact-phone { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; } .footer__contact-phone__head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; } .footer__contact-phone__head svg { width: 17px; height: 17px; color: var(--blue-300); } .footer__contact-phone__label { font-size: 13px; color: rgba(255, 255, 255, .55); } .footer__contact-phone a { font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .4px; line-height: 1.5; } .footer__contact-phone a:hover { color: var(--blue-300); } @media (max-width: 1100px) { .footer__bottom-oval { border-radius: 24px; } .footer__bottom-oval span { white-space: normal; text-align: center; } } @media (max-width: 560px) { .footer__bottom-oval { gap: 8px 14px; padding: 12px 18px; } } .footer__contact-band { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); } .footer__contact-band__info { flex: 1 1 320px; } .footer__contact-band__qr { flex: 0 1 auto; } .footer__contact-band__info h4, .footer__contact-band__qr h4 { color: #fff; font-size: 16px; margin: 0 0 14px; } .footer__contact-band .footer__contact { margin-top: 0; } @media (max-width: 720px) { .footer__contact-band { flex-direction: column; gap: 26px; } } .footer__grid--sitemap { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; gap: 18px; align-items: start; padding-bottom: 10px; } .qr-row--dark figcaption { color: rgba(255, 255, 255, .65); } .footer__contact-col { min-width: 0; } .footer__contact-col__qr { margin-top: 22px; } .footer__contact-col .qr-row { justify-content: flex-start; gap: 16px; } .footer__contact-col .qr-row img { width: 104px; height: 104px; } @media (max-width: 1080px) { .footer__grid--sitemap { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .footer__grid--sitemap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .footer__grid--sitemap { grid-template-columns: 1fr; } } /* ---------- 返回顶部 ---------- */ .to-top { position: fixed; right: 24px; bottom: 28px; z-index: 90; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); color: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; } .to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); } .to-top svg { width: 20px; height: 20px; } /* ---------- 动画 ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- 响应式 ---------- */ @media (max-width: 1080px) { /* 手机/平板：桌面导航收起，改用汉堡按钮 + .mnav 折叠菜单（main.js 已有开合逻辑）。 旧方案把 .nav 压成横滚条，flex 子项被压缩裁切，36 个导航项只能露出 1~2 个， 用户无法进入其他页面（2026-09-14 用户反馈「手机看不全」的根因）。 */ .nav { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; } .header__cta { display: none; } .home-hero .wrap { grid-template-columns: 1fr; gap: 40px; } .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } /* .flow.flow--5 基础规则 specificity(0,2,0) 高于单类 .flow--5，必须用同类选择器才能覆盖 */ .flow, .flow.flow--3, .flow.flow--4, .flow.flow--5, .flow.flow--6 { grid-template-columns: repeat(2, 1fr); } .flow__item::after { display: none; } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .client-grid { grid-template-columns: repeat(4, 1fr); } .stat-band__grid { grid-template-columns: repeat(2, 1fr); } .vs { grid-template-columns: 1fr; gap: 16px; } .vs__mid { transform: rotate(90deg); } } @media (max-width: 720px) { .section { padding: 52px 0; } .wrap { padding: 0 18px; } .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: 1fr; } .flow, .flow.flow--3, .flow.flow--4, .flow.flow--5, .flow.flow--6 { grid-template-columns: 1fr !important; } /* 长文案按钮（如免责声明入口）在窄屏允许换行，避免 nowrap 撑破网格 */ .callout .btn { white-space: normal; text-align: left; } .step { grid-template-columns: 1fr; gap: 14px; } .step__no { width: 48px; height: 48px; font-size: 17px; } .steps--line .step::after { display: none; } .adv__item { grid-template-columns: 1fr; gap: 14px; } .check-list--2 { grid-template-columns: 1fr; } .bar { grid-template-columns: 62px 1fr; } .bar__val { grid-column: 2; text-align: left; } .client-grid { grid-template-columns: repeat(2, 1fr); } .stat-band__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .topbar { font-size: 12px; overflow: hidden; } .topbar__left { gap: 10px; } .topbar__right { gap: 12px; } .home-hero { padding: 54px 0 60px; } .page-hero { padding: 44px 0 48px; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .form-card { padding: 24px; } .table-wrap table { min-width: 560px; font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- 打印 ---------- */ @media print { .header, .anchors, .to-top, .topbar, .cta-band { display: none !important; } .section { padding: 20px 0; } } /* ---------- 资质服务页补充样式 ---------- */ .link-arrow { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-700); font-weight: 600; text-decoration: none; margin-left: 4px; white-space: nowrap; } .link-arrow svg { transition: transform .2s ease; } .link-arrow:hover { color: var(--blue-800); text-decoration: underline; } .link-arrow:hover svg { transform: translateX(3px); } .faq .card--soft { padding: 22px 24px; } /* ---------- 资质服务页补充样式 ---------- */ .link-arrow { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-700); font-weight: 600; text-decoration: none; margin-left: 4px; white-space: nowrap; } .link-arrow svg { transition: transform .2s ease; } .link-arrow:hover { color: var(--blue-800); text-decoration: underline; } .link-arrow:hover svg { transform: translateX(3px); } .faq .card--soft { padding: 22px 24px; } /* ---------- 首页资质成长金字塔 ---------- */ .pyramid { max-width: 920px; margin: 6px auto 0; display: flex; flex-direction: column; align-items: center; } .pyramid__layer { position: relative; z-index: 1; cursor: pointer; width: var(--w, 100%); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; margin-top: -9px; color: #fff; border-radius: 12px; background: linear-gradient(135deg, var(--c1, #14b3a0), var(--c2, #0b7a6c)); box-shadow: 0 8px 20px rgba(11, 122, 108, .16); min-height: 56px; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease; } .pyramid__layer:hover, .pyramid__layer:focus-visible { filter: brightness(1.12); box-shadow: 0 16px 34px rgba(11, 122, 108, .3); z-index: 10; animation: pyramidPulse 1.2s ease-in-out infinite; } .pyramid__layer--apex:hover, .pyramid__layer--apex:focus-visible { box-shadow: 0 16px 34px rgba(180, 83, 9, .36); } @keyframes pyramidPulse { 0%, 100% { transform: scale(1.03) translateY(-2px); } 50% { transform: scale(1.06) translateY(-5px); } } .pyramid__layer:first-child { margin-top: 0; } .pyramid__name { font-weight: 700; font-size: 15px; line-height: 1.3; } .pyramid__name small { display: block; font-weight: 500; opacity: .82; font-size: 12px; margin-top: 2px; } .pyramid__count { font-weight: 800; font-size: 21px; white-space: nowrap; flex-shrink: 0; } .pyramid__count small { font-size: 12px; font-weight: 600; opacity: .9; margin-left: 3px; } .pyramid__layer--apex { box-shadow: 0 10px 24px rgba(180, 83, 9, .22); } .pyramid__source { max-width: 920px; margin: 26px auto 0; text-align: center; font-size: 13px; color: #6b7a82; line-height: 1.7; } @media (max-width: 640px) { .pyramid__layer { width: 100% !important; margin-top: 8px; } .pyramid__name { font-size: 14px; } .pyramid__count { font-size: 18px; } } /* ============ 二级目录下拉导航 ============ */ .nav__item { position: relative; } .nav__item > .nav__link { display: inline-flex; align-items: center; gap: 5px; } .nav__caret { width: 0; height: 0; margin-left: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .nav__sub { position: absolute; top: calc(100% + 2px); left: 0; min-width: 184px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(4, 48, 43, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 130; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; } .nav__sub a { display: block; padding: 9px 12px; font-size: 14px; border-radius: 8px; white-space: nowrap; } .nav__sub a:hover { background: var(--blue-50); color: var(--blue-700); } .nav__sub a.is-active { color: var(--blue-700); background: var(--blue-50); } .nav__sub a.is-active::after { display: none; } .nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; } /* 移动端二级目录平铺（与主导航同排横滑） */ @media (max-width: 1080px) { .nav__item { display: contents; } .nav__caret { display: none; } .nav__sub { display: contents; } .nav__sub a { display: inline-flex; align-items: center; padding: 9px 7px; font-size: 13.5px; color: var(--ink-500); white-space: nowrap; } .nav__sub a::before { content: "\00b7"; margin-right: 4px; color: var(--blue-400); } .nav__sub a.is-active { color: var(--blue-700); background: transparent; } } /* 移动端汉堡菜单二级缩进 */ .mnav a.is-sub { padding-left: 44px; font-size: 14px; color: var(--ink-500); } /* ============ 单项冠军目录 · 冠军主题（金/琥珀） ============ */ .nav__item--champion > .nav__link { color: var(--gold-600); font-weight: 700; } .nav__item--champion > .nav__link:hover { color: var(--gold-600); background: var(--gold-50); } .nav__item--champion:hover > .nav__link, .nav__item--champion:focus-within > .nav__link { color: var(--gold-600); } .nav__item--champion > .nav__sub { border-top: 3px solid var(--gold-500); padding: 8px; } .nav__item--champion > .nav__sub a { position: relative; padding-left: 16px; } .nav__item--champion > .nav__sub a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; transition: background .2s; } .nav__item--champion > .nav__sub a:hover { color: var(--gold-600); background: var(--gold-50); } .nav__item--champion > .nav__sub a:hover::before, .nav__item--champion > .nav__sub a.is-active::before { background: linear-gradient(180deg, var(--gold-500), var(--cta-600)); } .nav__item--champion > .nav__sub a.is-active { color: var(--gold-600); background: var(--gold-50); } /* 移动端二级目录金色标记 */ .mnav a.is-sub { border-left: 3px solid var(--gold-500); } .mnav a.is-sub:hover, .mnav a.is-sub.is-active { color: var(--gold-600); } /* Hero 关键数字琥珀强调（作用于单项冠军目录下各页） */ .page-hero__meta b { color: var(--cta-600); } /* ============ 彩色提示框 callout ============ */ .callout { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue-600); } .callout__ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--blue-600); color: #fff; } .callout__ic svg { width: 20px; height: 20px; } .callout h4 { font-size: 16px; margin-bottom: 4px; color: var(--ink-900); } .callout p { font-size: 14px; color: var(--ink-700); margin: 0; } .callout--gold { background: var(--gold-50); border-color: #f0e2c6; border-left-color: var(--gold-600); } .callout--gold .callout__ic { background: var(--gold-500); } .callout--gold h4 { color: var(--gold-600); } .callout--red { background: #fdf3f2; border-color: #f6dcdd; border-left-color: #b0453a; } .callout--red .callout__ic { background: #b0453a; } .callout--red h4 { color: #b0453a; } .callout--teal { background: var(--blue-50); border-color: var(--blue-100); border-left-color: var(--blue-600); } .callout--teal .callout__ic { background: var(--blue-600); } .callout--teal h4 { color: var(--blue-700); } /* ============ 标题高亮色修饰 ============ */ .sec-head h2 .hl.hl-gold { color: var(--gold-600); } .sec-head h2 .hl.hl-red { color: #b0453a; } .sec-head h2 .hl.hl-amber { color: var(--cta-600); } /* ============ 科技成果评价等级 rank 卡片 ============ */ .rank-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .rank { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; } .rank::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; } .rank__lv { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; } .rank__no { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 12px; } .rank h3 { font-size: 19px; margin: 10px 0 8px; } .rank p { font-size: 14px; color: var(--ink-500); margin: 0; } .rank--rl::before { background: linear-gradient(90deg, #b0453a, #7e2a22); } .rank--rl .rank__lv { color: #b0453a; } .rank--rl .rank__no { background: #b0453a; } .rank--dl::before { background: linear-gradient(90deg, #e8938a, #c96b60); } .rank--dl .rank__lv { color: #c96b60; } .rank--dl .rank__no { background: #c96b60; } .rank--ia::before { background: linear-gradient(90deg, #0b7a6c, #06564d); } .rank--ia .rank__lv { color: var(--blue-700); } .rank--ia .rank__no { background: var(--blue-700); } .rank--da::before { background: linear-gradient(90deg, #13a892, #0b7a6c); } .rank--da .rank__lv { color: var(--blue-600); } .rank--da .rank__no { background: var(--blue-600); } @media (max-width: 720px) { .rank-grid { grid-template-columns: 1fr; } } /* ===== 智能资质服务导航 · 琥珀主题（2026-08-31） ===== */ .nav__item--zhizhi > .nav__link { color: var(--cta-600); font-weight: 700; } .nav__item--zhizhi > .nav__link:hover { color: var(--cta-600); background: var(--blue-50); } .nav__item--zhizhi > .nav__sub { border-top: 3px solid var(--cta-600); padding: 8px; } .nav__item--zhizhi > .nav__sub a { position: relative; padding-left: 16px; } .nav__item--zhizhi > .nav__sub a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; } .nav__item--zhizhi > .nav__sub a:hover::before, .nav__item--zhizhi > .nav__sub a.is-active::before { background: linear-gradient(180deg, var(--cta-600), var(--gold-500)); } .mnav a.is-zhizhi { border-left: 3px solid var(--cta-600); } .mnav a.is-zhizhi:hover, .mnav a.is-zhizhi.is-active { color: var(--cta-600); } /* ===== 标准制定 · 六类标准彩色卡片 ===== */ .std-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } .std { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; background: #fff; } .std::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; } .std h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink); } .std .std__en { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--text-soft); margin-bottom: 6px; } .std p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.75; } .std--gb::before { background: linear-gradient(90deg, #0b7a6c, #06564d); } /* 国标 · 青绿 */ .std--hb::before { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); } /* 行标 · 金 */ .std--tb::before { background: linear-gradient(90deg, #b0453a, #7e2a22); } /* 团标 · 暗红 */ .std--qb::before { background: linear-gradient(90deg, #e8938a, #c96b60); } /* 企标 · 淡红 */ .std--db::before { background: linear-gradient(90deg, var(--cta-500), var(--cta-600)); } /* 地标 · 琥珀 */ .std--iso::before { background: linear-gradient(90deg, #13a892, #0b7a6c); } /* 国际 · 浅青 */ @media (max-width: 720px) { .std-grid { grid-template-columns: 1fr; } } /* ===== 体系认证 · 四体系彩色卡片 ===== */ .sys-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .sys { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; background: #fff; } .sys::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; } .sys .sys__code { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--cta-600); } .sys h4 { margin: 4px 0 8px; font-size: 16px; color: var(--ink); } .sys p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.75; } .sys--qms::before { background: linear-gradient(90deg, #0b7a6c, #06564d); } /* QMS · 青绿 */ .sys--ems::before { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); } /* EMS · 金 */ .sys--ohs::before { background: linear-gradient(90deg, #b0453a, #7e2a22); } /* OHSMS · 暗红 */ .sys--en::before { background: linear-gradient(90deg, var(--cta-500), var(--cta-600)); } /* EnMS · 琥珀 */ @media (max-width: 720px) { .sys-grid { grid-template-columns: 1fr; } } /* ========================================================================== 申报评测系统 · Assessment System ========================================================================== */ /* ---- 评测入口卡片 ---- */ .as-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1000px) { .as-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .as-grid { grid-template-columns: 1fr; } } .as-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; } .as-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; } .as-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } .as-card__no { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--ink-400); margin-bottom: 13px; } .as-card__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 15px; } .as-card__ic svg { width: 24px; height: 24px; } .as-card h3 { font-size: 17.5px; line-height: 1.45; margin-bottom: 9px; color: var(--ink-900); } .as-card p { font-size: 13.6px; color: var(--ink-500); line-height: 1.78; margin-bottom: 16px; flex: 1; } .as-card__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .as-card__meta span { font-size: 11.5px; padding: 4px 10px; border-radius: 20px; background: var(--bg-soft); color: var(--ink-500); border: 1px solid var(--line); } .as-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; } .as-card__go svg { width: 15px; height: 15px; transition: transform .25s; } .as-card:hover .as-card__go svg { transform: translateX(4px); } .as--c1::before { background: linear-gradient(90deg,#0f9683,#06564d); } .as--c1 .as-card__ic { background: var(--blue-50); color: var(--blue-700); } .as--c1 .as-card__go { color: var(--blue-700); } .as--c2::before { background: linear-gradient(90deg,var(--gold-500),var(--gold-600)); } .as--c2 .as-card__ic { background: var(--gold-50); color: var(--gold-600); } .as--c2 .as-card__go { color: var(--gold-600); } .as--c3::before { background: linear-gradient(90deg,#b0453a,#7e2a22); } .as--c3 .as-card__ic { background: #fbeeec; color: #b0453a; } .as--c3 .as-card__go { color: #b0453a; } .as--c4::before { background: linear-gradient(90deg,var(--cta-500),var(--cta-600)); } .as--c4 .as-card__ic { background: var(--cta-50); color: var(--cta-600); } .as--c4 .as-card__go { color: var(--cta-600); } .as--c5::before { background: linear-gradient(90deg,#e8938a,#c96b60); } .as--c5 .as-card__ic { background: #fdf1ef; color: #c96b60; } .as--c5 .as-card__go { color: #c96b60; } .as--c6::before { background: linear-gradient(90deg,#13a892,#0b7a6c); } .as--c6 .as-card__ic { background: var(--blue-50); color: #0b7a6c; } .as--c6 .as-card__go { color: #0b7a6c; } .as--c7::before { background: linear-gradient(90deg,#4faa5a,#06564d); } .as--c7 .as-card__ic { background: #eef8ee; color: #2f7a3c; } .as--c7 .as-card__go { color: #2f7a3c; } .as--c8::before { background: linear-gradient(90deg,var(--gold-500),#b0453a); } .as--c8 .as-card__ic { background: var(--gold-50); color: #a8632f; } .as--c8 .as-card__go { color: #a8632f; } .as--c9::before { background: linear-gradient(90deg,#0f9683,var(--gold-600)); } .as--c9 .as-card__ic { background: var(--blue-50); color: #0b7a6c; } .as--c9 .as-card__go { color: #0b7a6c; } /* ---- 前置门槛提示 ---- */ .gate { border-left: 4px solid var(--red-600); background: var(--red-50); border-radius: 0 10px 10px 0; padding: 18px 22px; } .gate h4 { font-size: 15px; color: var(--red-600); margin-bottom: 8px; } .gate ul { margin: 0; padding-left: 18px; } .gate li { font-size: 13.5px; color: var(--ink-700); line-height: 1.9; } .gate--teal { border-left-color: var(--blue-600); background: var(--blue-50); } .gate--teal h4 { color: var(--blue-700); } /* ---- 问卷 ---- */ .qz { max-width: 960px; margin: 0 auto; } .qz__bar { position: sticky; top: calc(var(--header-h) + 6px); z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: 13px 20px; margin-bottom: 26px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .qz__bar-txt { font-size: 13px; color: var(--ink-500); } .qz__bar-txt b { color: var(--blue-700); font-size: 15px; } .qz__track { flex: 1; min-width: 160px; height: 7px; border-radius: 20px; background: var(--line-soft); overflow: hidden; } .qz__fill { height: 100%; width: 0; border-radius: 20px; background: linear-gradient(90deg, var(--blue-600), var(--blue-700)); transition: width .35s cubic-bezier(.22,1,.36,1); } .qz__dim { margin-bottom: 36px; } .qz__dim-hd { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 10px; margin-bottom: 15px; background: var(--blue-50); border-left: 4px solid var(--blue-600); } .qz__dim-hd b { font-size: 16px; color: var(--blue-800); } .qz__dim-hd i { font-style: normal; font-size: 12.5px; color: var(--ink-500); } .qz__dim-hd em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 800; color: var(--blue-700); } .q { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 13px; } .q__hd { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; } .q__no { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--blue-600); margin-top: 1px; } .q__t { font-size: 15px; font-weight: 600; color: var(--ink-900); line-height: 1.72; } .q__max { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--ink-400); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; } .q__opts { display: grid; gap: 9px; } .q__opt { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: #fff; transition: border-color .18s, background .18s, box-shadow .18s; } .q__opt:hover { border-color: var(--blue-300); background: var(--blue-50); } .q__opt input { position: absolute; opacity: 0; pointer-events: none; } .q__dot { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--ink-300); margin-top: 3px; position: relative; transition: .18s; } .q__opt.is-on { border-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 0 0 2px rgba(15,150,131,.10); } .q__opt.is-on .q__dot { border-color: var(--blue-600); } .q__opt.is-on .q__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue-600); } .q__opt-t { font-size: 14px; color: var(--ink-700); line-height: 1.68; } .q__opt.is-on .q__opt-t { color: var(--ink-900); font-weight: 600; } .q__sc { margin-left: auto; flex: none; font-size: 12px; font-weight: 800; color: var(--blue-700); } .q__note { margin-top: 11px; font-size: 12.5px; color: var(--ink-400); line-height: 1.75; padding-left: 37px; } .q__note b { color: var(--ink-500); } .qz__act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 34px 0 8px; } .qz__warn { text-align: center; font-size: 13px; color: var(--red-600); margin-top: 12px; min-height: 20px; } /* ---- 评分结果 ---- */ .rs { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 34px; box-shadow: var(--shadow); margin-top: 30px; scroll-margin-top: 100px; } .rs__top { display: grid; grid-template-columns: 190px 1fr; gap: 36px; align-items: center; } @media (max-width: 720px) { .rs__top { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; } } .gauge { position: relative; width: 190px; height: 190px; } .gauge svg { transform: rotate(-90deg); display: block; } .gauge__in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gauge__num { font-size: 42px; font-weight: 800; line-height: 1; color: var(--ink-900); } .gauge__num small { font-size: 17px; font-weight: 700; color: var(--ink-400); } .gauge__lb { font-size: 12px; color: var(--ink-400); margin-top: 6px; } .rs__verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 20px; margin-bottom: 12px; } .rs__verdict svg { width: 15px; height: 15px; } .rs__v-pass { background: var(--blue-50); color: var(--blue-700); } .rs__v-near { background: var(--gold-50); color: var(--gold-600); } .rs__v-fail { background: var(--red-50); color: var(--red-600); } .rs h3 { font-size: 24px; margin-bottom: 10px; color: var(--ink-900); } .rs__lead { font-size: 14.5px; color: var(--ink-700); line-height: 1.85; margin-bottom: 20px; } .rs__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px; } @media (max-width: 620px) { .rs__stats { grid-template-columns: 1fr; } } .rs__stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; } .rs__stat span { display: block; font-size: 12px; color: var(--ink-400); margin-bottom: 5px; } .rs__stat b { font-size: 22px; font-weight: 800; color: var(--blue-700); } .rs__stat--rate b { color: var(--cta-600); } .rs__stat i { font-style: normal; font-size: 12.5px; color: var(--ink-500); } .bars { margin-top: 26px; } .bars h4 { font-size: 15px; margin-bottom: 14px; color: var(--ink-900); } .bar { margin-bottom: 13px; } .bar__hd { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .bar__hd span { color: var(--ink-700); } .bar__hd b { color: var(--ink-900); font-weight: 700; } .bar__hd b i { font-style: normal; font-size: 11.5px; color: var(--ink-400); font-weight: 600; } .bar__track { height: 8px; border-radius: 20px; background: var(--line-soft); overflow: hidden; } .bar__fill { height: 100%; border-radius: 20px; width: 0; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); transition: width .8s cubic-bezier(.22,1,.36,1); } .bar--gold .bar__fill { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); } .bar--red .bar__fill { background: linear-gradient(90deg, #c96b60, #7e2a22); } .bar--cta .bar__fill { background: linear-gradient(90deg, var(--cta-500), var(--cta-600)); } .bar--teal .bar__fill { background: linear-gradient(90deg, #13a892, #06564d); } .rs__tips { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 22px; } .rs__tips h4 { font-size: 15px; margin-bottom: 12px; color: var(--ink-900); } .rs__tips ul { margin: 0; padding-left: 18px; } .rs__tips li { font-size: 13.5px; color: var(--ink-700); line-height: 1.9; margin-bottom: 4px; } .rs__src { margin-top: 22px; font-size: 12.5px; color: var(--ink-400); line-height: 1.8; background: var(--bg-soft); border-radius: 8px; padding: 13px 16px; } .rs__act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } /* ---- 评测须知 ---- */ .as-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .as-note { grid-template-columns: 1fr; } } .as-note__i { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; } .as-note__i .icon-box { margin-bottom: 12px; } .as-note__i h4 { font-size: 15.5px; margin-bottom: 7px; } .as-note__i p { font-size: 13.5px; color: var(--ink-500); line-height: 1.8; margin: 0; } /* ---- 评分体系对照表 ---- */ .as-tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .as-tbl table { width: 100%; border-collapse: collapse; min-width: 860px; } .as-tbl th, .as-tbl td { padding: 14px 18px; text-align: left; font-size: 13.5px; line-height: 1.7; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .as-tbl thead th { background: var(--blue-800); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; } .as-tbl tbody tr:last-child td { border-bottom: none; } .as-tbl tbody tr:hover { background: var(--blue-50); } .as-tbl td:first-child { font-weight: 700; color: var(--ink-900); white-space: nowrap; } .as-tbl td b { color: var(--blue-700); } .as-tbl td i { font-style: normal; color: var(--ink-400); font-size: 12.5px; } /* ---------- 评测入口·紧凑版（首页 / 内页侧栏通用） ---------- */ .as-grid--mini { gap: 14px; } .as-card--mini { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; } .as-card--mini .as-card__no, .as-card--mini p, .as-card--mini .as-card__meta { display: none; } .as-card--mini .as-card__ic { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 0; flex: 0 0 auto; } .as-card--mini .as-card__ic svg { width: 20px; height: 20px; } .as-card--mini h3 { font-size: 15px; line-height: 1.4; margin-bottom: 0; flex: 1; } .as-card--mini .as-card__go { flex: 0 0 auto; font-size: 13.5px; } .as-card--mini .as-card__go svg { width: 14px; height: 14px; } .as-card--mini:hover { transform: translateY(-3px); } @media (max-width: 620px) { .as-grid--mini { grid-template-columns: 1fr; } } /* ---------- 首页评测入口区块 ---------- */ .hm-as__note { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 16px 20px; border-radius: var(--radius); background: var(--gold-50); border: 1px solid #eddfc4; font-size: 14px; color: var(--ink-600); line-height: 1.8; } .hm-as__note svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--gold-600); } .hm-as__note strong { color: var(--ink-900); } .hm-as__act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } /* ========================================================================== 申报评测系统 · 淘宝风商品橱窗入口 ========================================================================== */ .shop-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1000px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .shop-grid { grid-template-columns: 1fr; } } .shop-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 #fff inset, 0 5px 0 rgba(15,40,35,.045), 0 18px 30px -14px rgba(20,40,35,.22); transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s; text-decoration: none; color: inherit; } .shop-card:hover { transform: translateY(-9px); box-shadow: 0 1px 0 #fff inset, 0 9px 0 rgba(15,40,35,.06), 0 32px 46px -16px rgba(20,40,35,.30); border-color: transparent; } .shop-card__media { position: relative; height: 130px; display: grid; place-items: center; } .shop-card__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0, rgba(255,255,255,.38), transparent 62%); } .shop-card__tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.22); padding: 3px 10px; border-radius: 20px; z-index: 2; } .shop-card__ic { position: relative; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(0,0,0,.20); } .shop-card__ic svg { width: 33px; height: 33px; } .shop-card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1; } .shop-card__title { font-size: 16.5px; line-height: 1.45; font-weight: 700; color: var(--ink-900); margin: 0 0 8px; } .shop-card__desc { font-size: 12.8px; color: var(--ink-500); line-height: 1.72; margin: 0 0 14px; flex: 1; } .shop-card__specs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .shop-card__spec { font-size: 11.5px; padding: 4px 10px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-500); } .shop-card__spec b { color: var(--ink-900); } .shop-card__foot { margin-top: auto; } .shop-card__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .shop-card__price { display: flex; align-items: baseline; gap: 7px; } .shop-card__stat { font-size: 13px; font-weight: 700; white-space: nowrap; } .shop-card__stat b { font-weight: 800; } .shop-card__price b { font-size: 21px; color: var(--cta-600); font-weight: 800; } .shop-card__price span { font-size: 12px; color: var(--ink-400); } .shop-card__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 14px; border: none; border-radius: 11px; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 10px 20px -7px rgba(0,0,0,.45); transition: filter .2s, transform .15s; } .shop-card__btn svg { width: 18px; height: 18px; } .shop-card__btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .shop-card__btn:active { transform: translateY(1px); } /* 九色变体 */ .shop--c1 .shop-card__media { background: linear-gradient(135deg,#0f9683,#06564d); } .shop--c1 .shop-card__btn { background: linear-gradient(135deg,#0f9683,#06564d); } .shop--c1 .shop-card__ic { color: #0b7a6c; } .shop--c2 .shop-card__media { background: linear-gradient(135deg,var(--gold-500),var(--gold-600)); } .shop--c2 .shop-card__btn { background: linear-gradient(135deg,var(--gold-500),var(--gold-600)); } .shop--c2 .shop-card__ic { color: var(--gold-600); } .shop--c3 .shop-card__media { background: linear-gradient(135deg,#b0453a,#7e2a22); } .shop--c3 .shop-card__btn { background: linear-gradient(135deg,#b0453a,#7e2a22); } .shop--c3 .shop-card__ic { color: #7e2a22; } .shop--c4 .shop-card__media { background: linear-gradient(135deg,var(--cta-500),var(--cta-600)); } .shop--c4 .shop-card__btn { background: linear-gradient(135deg,var(--cta-500),var(--cta-600)); } .shop--c4 .shop-card__ic { color: #b45309; } .shop--c5 .shop-card__media { background: linear-gradient(135deg,#e8938a,#c96b60); } .shop--c5 .shop-card__btn { background: linear-gradient(135deg,#e8938a,#c96b60); } .shop--c5 .shop-card__ic { color: #c96b60; } .shop--c6 .shop-card__media { background: linear-gradient(135deg,#13a892,#0b7a6c); } .shop--c6 .shop-card__btn { background: linear-gradient(135deg,#13a892,#0b7a6c); } .shop--c6 .shop-card__ic { color: #0b7a6c; } .shop--c7 .shop-card__media { background: linear-gradient(135deg,#4faa5a,#06564d); } .shop--c7 .shop-card__btn { background: linear-gradient(135deg,#4faa5a,#06564d); } .shop--c7 .shop-card__ic { color: #06564d; } .shop--c8 .shop-card__media { background: linear-gradient(135deg,var(--gold-500),#b0453a); } .shop--c8 .shop-card__btn { background: linear-gradient(135deg,var(--gold-500),#b0453a); } .shop--c8 .shop-card__ic { color: #a8632f; } .shop--c9 .shop-card__media { background: linear-gradient(135deg,#0f9683,var(--gold-600)); } .shop--c9 .shop-card__btn { background: linear-gradient(135deg,#0f9683,var(--gold-600)); } .shop--c9 .shop-card__ic { color: #0b7a6c; } /* ========================================================================== 问卷重设计 · 企业信息前置块 + 题目层次 ========================================================================== */ .qzm-info { position: relative; background: linear-gradient(180deg,#fbf6ec,#fffdf8); border: 1px solid #ecdcc0; border-left: 4px solid var(--gold-600); border-radius: 14px; padding: 20px 22px; margin-bottom: 30px; } .qzm-info__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .qzm-info__hd svg { color: var(--gold-600); } .qzm-info__hd b { font-size: 15px; color: var(--gold-600); font-weight: 800; } .qzm-info__hd i { font-style: normal; font-size: 12px; color: var(--ink-400); margin-left: auto; } .qzm-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; } .qzm-f { display: flex; flex-direction: column; gap: 6px; } .qzm-f--full { grid-column: 1 / -1; } .qzm-f label { font-size: 13px; font-weight: 600; color: var(--ink-700); } .qzm-f label em { font-style: normal; color: var(--red-600); margin-left: 4px; font-size: 11px; font-weight: 700; } .qzm-f input { height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; color: var(--ink-900); background: #fff; transition: border-color .18s, box-shadow .18s; } .qzm-f input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(184,134,59,.15); } @media (max-width: 640px) { .qzm-info__grid { grid-template-columns: 1fr; } .qzm-f--full { grid-column: auto; } } /* 维度卡头（青绿） */ .qz__dim-hd { background: linear-gradient(90deg,var(--blue-50),#fff); border-left: 4px solid var(--blue-600); } .qz__dim-hd b { color: var(--blue-800); } .qz__dim-hd em { color: var(--blue-700); } /* 题目卡（白底 + 轻边框 + 阴影） */ .q { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .q__no { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg,var(--cta-500),var(--cta-600)); margin-top: 1px; } .q__max { color: var(--ink-500); border-color: var(--line); } .q__opt { border-radius: 10px; } .q__opt.is-on { border-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 0 0 2px rgba(15,150,131,.14); } .q__opt.is-on .q__dot { border-color: var(--blue-600); background: var(--blue-600); } .q__opt.is-on .q__dot::after { display: none; } .q__sc { color: var(--gold-600); background: var(--gold-50); border: 1px solid #ecdcc0; } .q__note { background: var(--gold-50); border-left: 3px solid var(--gold-500); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 10px; color: var(--ink-500); font-size: 12.5px; line-height: 1.75; padding-left: 12px; } .q__note b { color: var(--gold-600); } /* 结果报告 · 参评企业信息块 */ .rs__co { background: var(--gold-50); border: 1px solid #ecdcc0; border-left: 4px solid var(--gold-600); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; } .rs__co-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rs__co-h svg { color: var(--gold-600); } .rs__co-h b { font-size: 14px; color: var(--gold-600); } .rs__co-grid { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ink-600); } .rs__co-grid span b { color: var(--ink-900); font-weight: 700; } /* ===== 新增：kjcg 下拉 + 枣红椭圆按钮 + 评测统计 + 登录弹窗 ===== */ .nav__item--kjcg > .nav__link { color: var(--blue-700); font-weight: 700; } .nav__item--kjcg > .nav__link:hover { color: var(--blue-700); background: var(--blue-50); } .nav__item--kjcg:hover > .nav__link, .nav__item--kjcg:focus-within > .nav__link { color: var(--blue-700); } .nav__item--kjcg > .nav__sub { border-top: 3px solid var(--blue-600); padding: 8px; } .mnav a.is-champ { border-left: 3px solid var(--blue-600); } .mnav a.is-champ:hover, .mnav a.is-champ.is-active { color: var(--blue-700); } /* 枣红椭圆按钮（预约专家复核） */ .btn--maroon { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#8e2f24,#7e2a22); color: #fff; border: none; border-radius: 999px; padding: 15px 42px; font-size: 16px; font-weight: 700; box-shadow: 0 12px 28px rgba(126,42,34,.32); cursor: pointer; transition: transform .18s, box-shadow .18s; } .btn--maroon:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(126,42,34,.4); } /* 首页 Hero 右侧：需求定制化入口卡片（替代原自检表单） */ .hero-cta-card { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); border-radius: 18px; padding: 40px 34px; text-align: center; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 18px 44px rgba(8,32,28,.22); } .hero-cta-card__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,212,137,.16); color: #ffd489; border: 1px solid rgba(255,212,137,.42); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; } .hero-cta-card h3 { color: #fff; font-size: 23px; line-height: 1.42; margin: 4px 0 0; } .hero-cta-card p { color: rgba(255,255,255,.86); font-size: 14.5px; margin: 0; max-width: 360px; line-height: 1.7; } .hero-cta-card p b { color: #ffd489; } .hero-cta-card__btn { margin-top: 8px; } .hero-cta-card .btn--maroon { font-size: 18px; padding: 18px 54px; } .hero-cta-card__hint { color: rgba(255,255,255,.66); font-size: 12.5px; } /* 全站通用：需求定制化入口 CTA 条（除首页/联系我们外每页展示，与首页 Hero 右卡同一模块） */ .demand-cta { background: linear-gradient(125deg, #032d28 0%, #06564d 46%, #0f9683 100%); padding: 46px 0; } .demand-cta .wrap { display: flex; justify-content: center; } .demand-cta .hero-cta-card { margin: 0 auto; max-width: 720px; } /* 全站页头 Hero：左主内容 + 右需求定制化入口卡片（顶部右侧同行布局，每页一致，打开即见） */ .page-hero__split { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 44px; align-items: center; } .page-hero__main { min-width: 0; } .page-hero__side { align-self: center; } .page-hero__side .hero-cta-card { width: 100%; padding: 30px 26px; } .page-hero__side .hero-cta-card h3 { font-size: 21px; line-height: 1.4; } .page-hero__side .hero-cta-card p { font-size: 14px; } .page-hero__side .hero-cta-card__btn { margin-top: 10px; } .page-hero__side .hero-cta-card .btn--maroon { font-size: 16px; padding: 14px 26px; width: 100%; justify-content: center; } @media (max-width: 980px) { .page-hero__split { grid-template-columns: 1fr; gap: 26px; align-items: start; } .page-hero__side { margin-top: 4px; } } /* 首页底部：30 秒智能自检（自 Hero 移入，色彩润色） */ .selfcheck-band { background: linear-gradient(135deg,#f3fbf9,#eef5ff); } .selfcheck-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: linear-gradient(135deg,#0b7a6c,#14b3a0); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(11,122,108,.28); } .selfcheck-panel__intro { color: #fff; padding: 50px 46px; align-self: center; } .selfcheck-panel__intro .eyebrow { color: #ffe1a8; letter-spacing: .04em; } .selfcheck-panel__intro h2 { color: #fff; font-size: 26px; margin: 10px 0 14px; line-height: 1.35; } .selfcheck-panel__intro h2 .hl { color: #ffe1a8; } .selfcheck-panel__intro p { color: rgba(255,255,255,.9); font-size: 15px; margin: 0 0 22px; line-height: 1.75; } .selfcheck-panel__intro p b { color: #ffe1a8; } .selfcheck-panel__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .selfcheck-panel__points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #fff; font-weight: 600; } .selfcheck-panel__points svg { color: #ffe1a8; flex: none; } .selfcheck-panel__form { background: #fff; padding: 42px 38px; color: var(--ink-700); } .selfcheck-panel__form h3 { font-size: 19px; margin-bottom: 6px; } .selfcheck-panel__form > p { font-size: 13.5px; color: var(--ink-500); margin-bottom: 18px; } @media (max-width: 860px) { .selfcheck-panel { grid-template-columns: 1fr; } .selfcheck-panel__intro { padding: 38px 28px; } .selfcheck-panel__form { padding: 32px 26px; } } /* 评测系统底部按钮区：返回在左、预约在右、中间间隔 */ .rs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; } .rs-foot__left { margin-right: auto; } .rs-foot__right { margin-left: auto; } /* 首页：单项冠军资质梯度矩阵 */ .champ-grid { margin-top: 46px; padding-top: 34px; border-top: 1px dashed var(--line, #e7e0d6); } .champ-grid__head h3 { font-size: 20px; margin: 0 0 8px; } .champ-grid__head p { margin: 0 0 20px; color: var(--ink-500); font-size: 14px; max-width: 780px; } .champ-grid__list { display: flex; flex-wrap: wrap; gap: 12px; } .champ-grid__list a { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--soft, #f7f3ec); border: 1px solid var(--line, #e7e0d6); color: var(--ink-700); font-size: 14px; font-weight: 600; text-decoration: none; transition: .18s; } .champ-grid__list a:hover { background: var(--cta-600); color: #fff; border-color: var(--cta-600); transform: translateY(-2px); } /* 评测次数统计条 */ .assess-stat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; padding: 14px 18px; background: linear-gradient(135deg,#fbf6ec,#fdf0f0); border: 1px solid #f0d9c8; border-radius: 14px; } .assess-stat svg { color: var(--gold-600); flex: none; } .assess-stat b { color: var(--red-600); font-size: 18px; } .assess-stat .assess-stat__hint { margin-left: auto; color: var(--ink-500); font-size: 13px; } /* 企业信息必填提示 */ .qzm-info__req { color: var(--red-600); font-size: 12.5px; margin: 6px 0 0 2px; } /* 登录/注册 弹窗 */ .auth-mask { position: fixed; inset: 0; background: rgba(8,32,28,.5); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .auth-mask.is-open { display: flex; } .auth-box { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 30px 28px; box-shadow: 0 30px 70px rgba(0,0,0,.28); animation: authPop .25s ease; } @keyframes authPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .auth-box h3 { font-size: 20px; margin: 0 0 4px; } .auth-box p.sub { color: var(--ink-500); font-size: 13.5px; margin: 0 0 18px; } .auth-field { margin-bottom: 14px; } .auth-field label { display: block; font-size: 13px; color: var(--ink-600); margin-bottom: 6px; } .auth-field input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 15px; outline: none; } .auth-field input:focus { border-color: var(--blue-600); } .auth-row { display: flex; gap: 10px; } .auth-row .auth-field { flex: 1; } .auth-btn { width: 100%; height: 48px; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg,#0f9683,#06564d); color: #fff; font-size: 16px; font-weight: 700; margin-top: 6px; } .auth-btn:disabled { opacity: .6; cursor: not-allowed; } .auth-switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--ink-500); } .auth-switch a { color: var(--blue-700); cursor: pointer; } .auth-send { width: 120px; flex: none; border: 1px solid var(--blue-600); background: #fff; color: var(--blue-700); border-radius: 10px; font-size: 13px; cursor: pointer; } .auth-send:disabled { color: var(--ink-400); border-color: var(--line); } .auth-err { color: var(--red-600); font-size: 13px; min-height: 18px; margin-top: 4px; } .auth-note { font-size: 12px; color: var(--ink-400); margin-top: 12px; line-height: 1.6; } /* 顶部登录态条 */ .acc-bar { display: none; align-items: center; gap: 14px; font-size: 13px; } .acc-bar.is-on { display: inline-flex; } .acc-bar .acc-bar__phone { color: var(--ink-700); font-weight: 600; } .acc-bar .acc-bar__quota { color: var(--ink-500); } .acc-bar a { color: var(--blue-700); cursor: pointer; } /* 生成报告时的验证码倒计时遮罩 */ .gen-mask { position: fixed; inset: 0; background: rgba(8,32,28,.55); display: none; align-items: center; justify-content: center; z-index: 9998; padding: 20px; } .gen-mask.is-open { display: flex; } .gen-box { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 30px 26px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.28); } .gen-box h3 { margin: 0 0 6px; font-size: 19px; } .gen-box p.sub { color: var(--ink-500); font-size: 13.5px; margin: 0 0 16px; } .gen-field { margin-bottom: 12px; text-align: left; } .gen-field label { display: block; font-size: 13px; color: var(--ink-600); margin-bottom: 6px; } .gen-field input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 15px; outline: none; } .gen-count { margin-top: 10px; } .gen-ring { width: 96px; height: 96px; margin: 6px auto 10px; } .gen-ring circle { fill: none; stroke-width: 9; } .gen-ring .track { stroke: #eef3f1; } .gen-ring .prog { stroke: var(--blue-600); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear; } .gen-num { font-size: 26px; font-weight: 800; color: var(--blue-700); } .gen-err { color: var(--red-600); font-size: 13px; min-height: 18px; } /* ===== 新增：shop--c10 颜色（创新型中小企业） ===== */ .shop--c10 .shop-card__media { background: linear-gradient(135deg,#1f7a6c,#0b7a6c); } .shop--c10 .shop-card__btn { background: linear-gradient(135deg,#1f7a6c,#0b7a6c); } .shop--c10 .shop-card__ic { color: #0b7a6c; } .shop--c11 .shop-card__media { background: linear-gradient(135deg,#b45309,#92400e); } .shop--c11 .shop-card__btn { background: linear-gradient(135deg,#b45309,#92400e); } .shop--c11 .shop-card__ic { color: #b45309; } .shop--c12 .shop-card__media { background: linear-gradient(135deg,#0e7490,#155e75); } .shop--c12 .shop-card__btn { background: linear-gradient(135deg,#0e7490,#155e75); } .shop--c12 .shop-card__ic { color: #0e7490; } /* ============ AI税务风控预警 swfk.html 专属样式 ============ */ /* 彩色加粗标注（加粗 + 不同颜色，呼应金税四期痛点层级） */ .b-red { color: var(--red-600); font-weight: 700; } .b-blue { color: var(--blue-700); font-weight: 700; } .b-orange { color: var(--cta-600); font-weight: 700; } .b-green { color: #1f8a52; font-weight: 700; } .b-gold { color: var(--gold-600); font-weight: 700; } /* 痛点卡（按高风险/中风险/低风险分色） */ .pain-card { position: relative; background: #fff; border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--radius); padding: 24px 24px 22px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; } .pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .pain-card--high { border-top-color: var(--red-600); } .pain-card--mid { border-top-color: var(--cta-600); } .pain-card--low { border-top-color: var(--gold-600); } .pain-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pain-card__head h3 { font-size: 16.5px; line-height: 1.4; margin: 0; color: var(--ink-900); } .pain-card p { font-size: 14px; color: var(--ink-500); line-height: 1.72; margin: 0 0 10px; } .pain-card .pain-card__law { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-700); line-height: 1.7; } /* 风险等级徽章 */ .risk-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .risk-badge--high { background: var(--red-50); color: var(--red-600); border: 1px solid #f3d4d6; } .risk-badge--mid { background: var(--cta-50); color: var(--cta-600); border: 1px solid #f6e3c8; } .risk-badge--low { background: var(--gold-50); color: var(--gold-600); border: 1px solid #efe1c6; } /* 检测 12 大模块标签 */ .modchips { display: flex; flex-wrap: wrap; gap: 10px; } .modchips span { display: inline-flex; align-items: center; padding: 8px 15px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; font-size: 13.5px; color: var(--blue-800); font-weight: 500; } /* 合规治理与AI分析 导航下拉 */ .nav__item--hfzf > .nav__link{color:var(--blue-600);font-weight:700} .nav__item--hfzf > .nav__link:hover{color:var(--blue-600);background:#eaf1fe} .nav__item--hfzf:focus-within > .nav__link{color:var(--blue-600)} .nav__item--hfzf > .nav__sub{border-top:3px solid var(--blue-600);padding:8px} .nav__item--hfzf > .nav__sub a:hover{color:var(--blue-600);background:#eaf1fe} .nav__item--hfzf > .nav__sub a.is-active{color:var(--blue-600);background:#eaf1fe} .mnav a.is-sub.is-hfzf{border-left-color:var(--blue-600)} .mnav a.is-sub.is-hfzf:hover,.mnav a.is-sub.is-hfzf.is-active{color:var(--blue-600)} /* 八大高新技术领域：8 色主题 + 细分领域明细 */ .fld-blue{--fld:#1d6fe0} .fld-green{--fld:#1f9d55} .fld-purple{--fld:#6b46c1} .fld-orange{--fld:#e0820b} .fld-teal{--fld:#0d9488} .fld-gold{--fld:#c98a00} .fld-cyan{--fld:#0e7490} .fld-red{--fld:#d63b3b} .card.fld-card{border-left:4px solid var(--fld);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:block} .card.fld-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,42,63,.12)} .card.fld-card .icon-box{background:#eef2f7;color:var(--fld)} .card.fld-card h4{color:var(--fld)} .card.fld-card p{color:#46535f} .field-group-h{display:block;font-size:18px;font-weight:800;color:#0f2a3f;border-left:5px solid var(--fld);padding:4px 0 4px 12px;margin:30px 0 16px} .fs{color:var(--fld);font-weight:700} .subfield{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed #e4eaf0;align-items:baseline} .subfield .fs{flex:0 0 210px} .subfield__d{color:#46535f;font-size:14.5px;line-height:1.7} @media(max-width:680px){.subfield{flex-direction:column;gap:4px}.subfield .fs{flex:none}.field-group-h{font-size:16px}} /* ===== 八大领域二级页：细分方向卡片网格（对齐 pgxt 卡片语言） ===== */ .sub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:14px 0 4px} .sub-card{position:relative;background:#fff;border:1px solid #e6ecf2;border-radius:14px;padding:15px 18px 15px 20px;box-shadow:0 6px 16px rgba(15,42,63,.05);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden} .sub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fld)} .sub-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,42,63,.11);border-color:var(--fld)} .sub-card h4{font-size:15.5px;font-weight:800;color:var(--fld);margin:0 0 8px;line-height:1.45} .sub-card p{margin:0;font-size:13.8px;color:#46535f;line-height:1.75} @media(max-width:680px){.sub-grid{grid-template-columns:1fr}.sub-card p{font-size:14px}} /* 八大领域二级页：其它领域快速入口（顶部/底部一致：4+3 两排、平行对齐） */ .field-chip-rows{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:18px} .field-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .field-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid #e6ecf2;box-shadow:0 4px 12px rgba(15,42,63,.05);font-size:14px;font-weight:700;color:#0f2a3f;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s} .field-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--fld)} .field-chip:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,42,63,.1);border-color:var(--fld)} /* 页脚：国家重点支持的八大领域列（双栏，避免拥挤） */ .footer__fields{column-count:2;column-gap:18px} .footer__fields li{break-inside:avoid;margin-bottom:3px} @media (max-width: 720px) { .footer__fields { column-count: 1; } } /* ===== 免责声明页：条款卡片网格 ===== */ .clause-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px} .clause-card{position:relative;background:#fff;border:1px solid #e6ecf2;border-radius:14px;padding:20px 22px 20px 24px;box-shadow:0 6px 16px rgba(15,42,63,.05);transition:transform .2s,box-shadow .2s,border-color .2s} .clause-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,42,63,.11);border-color:#f0d4cf} .clause-card__no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#c0392b,#a93226);color:#fff;font-weight:800;font-size:15px;margin-bottom:12px} .clause-card h4{font-size:16.5px;font-weight:800;color:#16202b;margin:0 0 8px} .clause-card p{margin:0;font-size:14px;color:#46535f;line-height:1.8} .clause-card strong{color:#b0453a} @media(max-width:680px){.clause-grid{grid-template-columns:1fr}} /* ===== 首页：平台服务免责声明弹窗 ===== */ .d-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s} .d-modal.is-open{opacity:1;visibility:visible} .d-modal__mask{position:absolute;inset:0;background:rgba(15,32,47,.55);backdrop-filter:blur(2px)} .d-modal__box{position:relative;z-index:1;width:100%;max-width:640px;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(10,25,40,.35);overflow:hidden;transform:translateY(14px);transition:transform .25s} .d-modal.is-open .d-modal__box{transform:translateY(0)} .d-modal__hd{display:flex;align-items:center;gap:12px;padding:20px 26px;background:linear-gradient(135deg,#b0453a,#8e2f27);color:#fff} .d-modal__hd .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .d-modal__hd .ic svg{width:22px;height:22px;color:#fff} .d-modal__hd h3{margin:0;font-size:18.5px;font-weight:800} .d-modal__bd{padding:22px 26px 6px;font-size:14.5px;line-height:1.95;color:#46535f} .d-modal__bd p{margin:0 0 12px} .d-modal__bd strong{color:#b0453a} .d-modal__ft{padding:8px 26px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .d-modal__ft .link{color:#1d6fe0;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:4px;text-decoration:none} .d-modal__ft .link:hover{text-decoration:underline} .d-modal__close{position:absolute;top:13px;right:15px;width:30px;height:30px;border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:8px;cursor:pointer;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center} .d-modal__close:hover{background:rgba(255,255,255,.32)} /* ===== 评测页：资质增项独立加分板块（生成评估报告按钮上方） ===== */ .qzm-info--extra{margin-top:24px;border:1px solid var(--gold-300);background:linear-gradient(180deg,var(--gold-50),#fff);border-radius:var(--radius);padding:18px 20px 20px} .qzm-extra__lead{color:var(--ink-500);font-size:13.5px;line-height:1.7;margin:-6px 0 16px} .extra-q{margin-bottom:14px} .extra-q:last-child{margin-bottom:0} .extra-q .q__no{background:var(--gold-500);color:#fff} @media(max-width:560px){.d-modal__ft{flex-direction:column;align-items:stretch}.d-modal__ft .link{justify-content:center;margin-bottom:6px}} /* ========================================================================== 首页模块卡片 · hover 放大变亮 + 整块可点击（暗链） —— 仅作用于带 data-href 的卡片，不影响其他页面 ========================================================================== */ /* 整块可点击的手型光标 */ .svc-card[data-href], .svc-card--lift, .card[data-href], .reveal[data-href] { cursor: pointer; } /* 平滑过渡（保留 .reveal 淡入所需的 opacity 过渡） */ .svc-card[data-href], .svc-card--lift, .card[data-href], .reveal[data-href] { transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease, border-color .32s ease, background-color .42s ease; will-change: transform; } /* 顶部渐变条 hover 加粗提亮 */ .svc-card[data-href]::before, .svc-card--lift::before { transition: height .42s cubic-bezier(.22,1,.36,1), opacity .42s ease; opacity: .8; } /* 放大 + 变亮 + 投影 */ .svc-card[data-href]:hover, .svc-card--lift:hover, .card[data-href]:hover, .reveal[data-href]:hover { transform: translateY(-12px) scale(1.035); box-shadow: 0 30px 62px rgba(6,86,77,.20), 0 4px 14px rgba(6,86,77,.08); background-color: #fff; z-index: 3; } .svc-card[data-href]:hover::before, .svc-card--lift:hover::before { height: 6px; opacity: 1; } /* 图标与序号联动微动 */ .svc-card[data-href] .icon-box--sm, .svc-card--lift .icon-box--sm, .card[data-href] .icon-box--sm, .reveal[data-href] .icon-box--sm { transition: transform .42s cubic-bezier(.22,1,.36,1); } .svc-card[data-href]:hover .icon-box--sm, .svc-card--lift:hover .icon-box--sm, .card[data-href]:hover .icon-box--sm, .reveal[data-href]:hover .icon-box--sm { transform: scale(1.14) rotate(-5deg); } .svc-card[data-href] .svc-card__no, .svc-card--lift .svc-card__no { transition: transform .42s cubic-bezier(.22,1,.36,1); } .svc-card[data-href]:hover .svc-card__no, .svc-card--lift:hover .svc-card__no { transform: scale(1.08); } /* 暗链卡片内的箭头 hover 位移 */ .card[data-href]:hover .svc-card__link svg, .reveal[data-href]:hover .svc-card__link svg { transform: translateX(4px); } /* 键盘可达性 */ .svc-card[data-href]:focus-visible, .svc-card--lift:focus-visible, .card[data-href]:focus-visible, .reveal[data-href]:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; } /* ========================================================================== 标准化服务流程 · 八个节点 hover 放大变亮 ========================================================================== */ .flow__item { transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease, border-color .32s ease, background-color .42s ease; will-change: transform; } .flow__item:hover { transform: translateY(-10px) scale(1.06); box-shadow: 0 26px 54px rgba(6,86,77,.18); border-color: var(--blue-300); background-color: #fff; z-index: 3; } .flow__no { transition: transform .42s cubic-bezier(.22,1,.36,1), color .32s ease; } .flow__item:hover .flow__no { transform: scale(1.14) rotate(-6deg); color: var(--blue-600); } /* ========================================================================== 客户墙 · 上下四排无缝滚动（白底绿字 / 绿底白字交替） 数据由 assets/js/clients.js 从 assets/data/clients.json 渲染 ========================================================================== */ .client-marquee { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); } .client-marquee__lines { display: grid; gap: 8px; } .client-line { overflow: hidden; /* 主题色变量（第 2 排使用品牌青绿原配色） */ --solid-a: #12a08b; --solid-b: #06564d; --solid-glow: rgba(11,122,108,.34); } /* 第 1 排：橙 */ .client-line--r0 { --solid-a: #f9a13c; --solid-b: #e0650b; --solid-glow: rgba(224,101,11,.32); } /* 第 3 排：水红 */ .client-line--r2 { --solid-a: #ff8fa6; --solid-b: #d92f62; --solid-glow: rgba(217,47,98,.30); } /* 第 4 排：绿 + 黄混合 */ .client-line--r3 { --solid-a: #5fca57; --solid-b: #dcb509; --solid-glow: rgba(196,163,9,.32); } .client-track { display: flex; width: max-content; margin-left: var(--shift, 0px); /* 各排横向错位，彩色格与白格彼此错开 */ animation: clientMarquee var(--dur, 46s) linear infinite; } .client-marquee:hover .client-track { animation-play-state: paused; } .client-cell { position: relative; z-index: 1; flex: 0 0 auto; min-width: 152px; padding: 16px 26px; text-align: center; font-size: 15.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; text-decoration: none; background: #fff; color: var(--blue-700); border-right: 1px solid rgba(4,80,72,.10); transition: filter .3s ease, transform .3s ease, box-shadow .3s ease; } /* 彩色格（与白格交替），颜色由所在排的主题变量决定 */ .client-cell--solid { background: linear-gradient(135deg, var(--solid-a), var(--solid-b)); color: #fff; border-right-color: rgba(255,255,255,.35); } .client-cell:hover { filter: brightness(1.06); transform: translateY(-3px); box-shadow: 0 16px 34px var(--solid-glow); z-index: 2; } /* 鼠标移到格子上：文字放大 + 闪动 */ .client-cell__txt { display: inline-block; transform-origin: center; will-change: transform; } .client-cell:hover .client-cell__txt { animation: clientTxtFlash .82s ease-in-out infinite; } @keyframes clientTxtFlash { 0% { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); } 45% { transform: scale(1.26); text-shadow: 0 0 16px currentColor; } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); } } .client-marquee__tip { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-500); } .client-marquee__tip b { color: var(--blue-700); font-size: 16px; } .client-empty { padding: 40px 20px; text-align: center; color: var(--ink-400); font-size: 14px; } /* 每排移动“一份”的宽度（--repeat 为轨道内重复份数），实现无缝衔接 */ @keyframes clientMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--repeat, 2))); } } @media (max-width: 720px) { .client-cell { min-width: 120px; padding: 13px 15px; font-size: 14px; } } /* ========================================================================== 30 秒智能自检面板 · 整块暗链（→ contact.html）· 悬停跳动放大变亮 ========================================================================== */ .selfcheck-panel[data-href] { cursor: pointer; } .selfcheck-panel[data-href] { transition: transform .5s cubic-bezier(.34,1.46,.5,1), box-shadow .45s ease, filter .45s ease; } .selfcheck-panel[data-href]:hover { transform: translateY(-10px) scale(1.02); background-color: transparent; /* 覆盖 .reveal[data-href]:hover 的白底，保留渐变 */ box-shadow: 0 42px 90px rgba(11,122,108,.34), 0 6px 20px rgba(11,122,108,.14); filter: brightness(1.04) saturate(1.06); animation: panelPop .62s cubic-bezier(.34,1.46,.5,1); } /* 一次弹性“跳动”：先冲高再回落至悬停态 */ @keyframes panelPop { 0% { transform: translateY(0) scale(1); } 55% { transform: translateY(-15px) scale(1.035); } 100% { transform: translateY(-10px) scale(1.02); } } .selfcheck-panel[data-href] .selfcheck-panel__intro h2, .selfcheck-panel[data-href] .selfcheck-panel__points svg, .selfcheck-panel[data-href] .btn--maroon { transition: transform .45s cubic-bezier(.34,1.46,.5,1), box-shadow .4s ease; } .selfcheck-panel[data-href]:hover .selfcheck-panel__intro h2 { transform: translateX(5px); } .selfcheck-panel[data-href]:hover .selfcheck-panel__points svg { transform: scale(1.24) rotate(-8deg); } .selfcheck-panel[data-href]:hover .btn--maroon { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(0,0,0,.18); } .selfcheck-panel[data-href]:focus-visible { outline: 3px solid #ffe1a8; outline-offset: 4px; } /* 尊重系统“减少动态效果”偏好 */ @media (prefers-reduced-motion: reduce) { .client-track { animation: none; } .client-cell:hover .client-cell__txt { animation: none; } .selfcheck-panel[data-href]:hover { animation: none; } .svc-card[data-href], .svc-card--lift, .card[data-href], .reveal[data-href], .selfcheck-panel[data-href], .flow__item, .svc-card[data-href] .icon-box--sm, .svc-card--lift .icon-box--sm, .svc-card[data-href] .svc-card__no, .svc-card--lift .svc-card__no, .flow__no { transition: opacity .6s ease; } .svc-card[data-href]:hover, .svc-card--lift:hover, .card[data-href]:hover, .reveal[data-href]:hover, .selfcheck-panel[data-href]:hover, .flow__item:hover { transform: none; } } /* ========================================================================== 自评报告 · 公文化排版（页面展示） ========================================================================== */ .rs__doc { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 34px 34px 26px; box-shadow: 0 10px 30px rgba(6,86,77,.06); } .rs__doc-head { text-align: center; border-bottom: 2px solid var(--blue-600); padding-bottom: 18px; margin-bottom: 26px; } .rs__doc-brand { font-size: 13px; color: var(--ink-500); letter-spacing: 2px; } .rs__doc-title { font-size: 26px; font-weight: 800; color: var(--blue-800); margin: 10px 0 12px; letter-spacing: 1px; } .rs__doc-meta { display: flex; justify-content: center; gap: 18px; font-size: 12.5px; color: var(--ink-500); flex-wrap: wrap; } .rs__sec { margin-bottom: 30px; } .rs__sec-h { font-size: 16px; font-weight: 700; color: var(--blue-800); border-left: 4px solid var(--blue-600); padding-left: 10px; margin: 0 0 14px; } .rs__disclaimer { margin-top: 14px; border: 1.5px solid #d9a441; background: #fdf6e7; color: #7a5b12; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.9; } @media (max-width: 720px) { .rs__doc { padding: 22px 18px; } .rs__doc-title { font-size: 21px; } .rs__top { flex-direction: column; } } /* ========================================================================== 评测页：其他项目入口 Portal（chip 列表） ========================================================================== */ .pg-portal-sec { padding: 56px 0; } .pg-portal__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .pg-portal__chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-800); font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(4,48,43,.05); transition: transform .35s cubic-bezier(.34,1.46,.5,1), box-shadow .35s ease, border-color .3s ease, background-color .3s ease; will-change: transform; } .pg-portal__chip:hover { transform: translateY(-6px) scale(1.04); border-color: var(--blue-300); background: #fff; box-shadow: 0 18px 38px rgba(6,86,77,.14); } .pg-portal__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 8px currentColor; } @media (max-width: 560px) { .pg-portal__chips { gap: 10px; } .pg-portal__chip { font-size: 13px; padding: 9px 14px 9px 11px; } } /* ========================================================================== 单项冠军二级页：醒目评测入口 CTA（居中、hover 闪动/放大/变亮/暗链） ========================================================================== */ .champ-cta-sec { padding: 64px 0 54px; } .champ-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 980px; margin: 0 auto; padding: 34px 38px; border-radius: var(--radius); background: linear-gradient(135deg, #f6faf8 0%, #ffffff 55%, #f0f9f7 100%); border: 1px solid var(--blue-100); box-shadow: 0 14px 42px rgba(6,86,77,.10), inset 0 0 0 1px rgba(255,255,255,.6); cursor: pointer; overflow: hidden; transition: transform .45s cubic-bezier(.34,1.46,.5,1), box-shadow .45s ease, filter .45s ease, border-color .35s ease; will-change: transform; } .champ-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(20,179,160,.18), transparent 45%); opacity: .6; transition: opacity .45s ease; pointer-events: none; } /* 蓝绿橙三色润色版：顶部三色条 + 三色晕染底 */ .champ-cta--tricolor { background: linear-gradient(135deg, rgba(15,150,131,.12) 0%, rgba(255,255,255,.6) 42%, rgba(217,138,59,.12) 100%), #fff; border: 1px solid var(--blue-100); border-left: 5px solid var(--blue-600); border-right: 5px solid var(--gold-500); } .champ-cta--tricolor::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--blue-600) 0%, #14b3a0 38%, var(--gold-500) 70%, #e0650b 100%); border-radius: var(--radius) var(--radius) 0 0; } .champ-cta--tricolor .champ-cta__go { background: linear-gradient(135deg, #0f9683 0%, #d97706 100%); } .champ-cta:hover { transform: translateY(-12px) scale(1.035); box-shadow: 0 36px 76px rgba(6,86,77,.20), 0 6px 18px rgba(6,86,77,.10), inset 0 0 0 1px rgba(255,255,255,.8); filter: brightness(1.05) saturate(1.08); border-color: var(--blue-300); animation: champCtaFlash 1.1s ease-in-out infinite; } @keyframes champCtaFlash { 0%, 100% { filter: brightness(1.05) saturate(1.08); } 50% { filter: brightness(1.12) saturate(1.16); } } .champ-cta__hd { position: relative; z-index: 1; } .champ-cta__hd .eyebrow { margin-bottom: 10px; } .champ-cta__hd h2 { font-size: clamp(20px, 3vw, 28px); margin-bottom: 10px; } .champ-cta__hd p { color: var(--ink-500); font-size: 14.5px; margin: 0; max-width: 520px; } .champ-cta__go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 12px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 10px 26px rgba(6,86,77,.24); transition: transform .4s cubic-bezier(.34,1.46,.5,1), box-shadow .4s ease; } .champ-cta:hover .champ-cta__go { transform: scale(1.08); box-shadow: 0 16px 38px rgba(6,86,77,.32); } .champ-cta__go svg { transition: transform .35s ease; } .champ-cta:hover .champ-cta__go svg { transform: translateX(5px); } .champ-cta:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 4px; } @media (max-width: 720px) { .champ-cta { flex-direction: column; text-align: center; padding: 28px 24px; gap: 18px; } .champ-cta__hd p { margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .champ-cta:hover { animation: none; transform: translateY(-6px) scale(1.02); } .pg-portal__chip, .champ-cta, .champ-cta__go { transition: opacity .3s ease; } .pg-portal__chip:hover, .champ-cta:hover, .champ-cta:hover .champ-cta__go { transform: none; } } /* ========================================================================== 八大高新技术领域二级页：右侧固定「立刻申报评估」入口（暗链 → pgxt.html） fixed 右侧垂直居中，滚动跟随；hover 放大 + 闪动变亮 ========================================================================== */ .fld-assess-cta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 4px; padding: 22px 12px; border-radius: 12px 0 0 12px; background: linear-gradient(160deg, var(--blue-600) 0%, var(--blue-800) 60%, #085d43 100%); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px rgba(6,86,77,.30), inset 0 0 0 1px rgba(255,255,255,.22); cursor: pointer; transition: transform .42s cubic-bezier(.34,1.46,.5,1), box-shadow .42s ease, filter .42s ease; will-change: transform; } .fld-assess-cta::before { content: ""; position: absolute; left: 0; right: 0; top: -46px; height: 40px; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; opacity: .92; transition: transform .4s cubic-bezier(.34,1.46,.5,1); } .fld-assess-cta:hover { transform: translateY(-50%) scale(1.10); filter: brightness(1.1) saturate(1.12); box-shadow: 0 22px 48px rgba(6,86,77,.40), inset 0 0 0 1px rgba(255,255,255,.4); animation: fldCtaFlash .95s ease-in-out infinite; } .fld-assess-cta:hover::before { transform: translateY(-3px) scale(1.12); } @keyframes fldCtaFlash { 0%, 100% { filter: brightness(1.1) saturate(1.12); } 50% { filter: brightness(1.22) saturate(1.2); } } .fld-assess-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 720px) { .fld-assess-cta { font-size: 13px; padding: 16px 9px; letter-spacing: 3px; } } @media (prefers-reduced-motion: reduce) { .fld-assess-cta:hover { animation: none; transform: translateY(-50%) scale(1.04); } } /* ========================================================================== 通知公告导航（tzgg） ========================================================================== */ .nav__item--tzgg > .nav__link { color: #6d28d9; font-weight: 700; } .nav__item--tzgg > .nav__link:hover { color: #6d28d9; background: #f3effe; } .nav__item--tzgg:hover > .nav__link, .nav__item--tzgg:focus-within > .nav__link { color: #6d28d9; } .nav__item--tzgg > .nav__sub { border-top: 3px solid #6d28d9; padding: 8px; } .nav__item--tzgg > .nav__sub a:hover { color: #6d28d9; background: #f3effe; } .nav__item--tzgg > .nav__sub a.is-active { color: #6d28d9; background: #f3effe; } .mnav a.is-tzgg { border-left: 3px solid #6d28d9; } .mnav a.is-tzgg:hover, .mnav a.is-tzgg.is-active { color: #6d28d9; } /* ========================================================================== 科技政策页（kjzc） ========================================================================== */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .tag-chip { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-100); color: var(--blue-700); font-size: 14px; transition: .2s; } .tag-chip:hover { background: var(--blue-50); border-color: var(--blue-300); transform: translateY(-2px); } .news-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--blue-100); } .news-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--blue-100); } .news-list li a { color: var(--ink-800); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .2s; } .news-list li a:hover { color: var(--blue-700); padding-left: 6px; } .news-list__date { color: var(--ink-400); font-size: 13px; white-space: nowrap; } .policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .policy-grid--stack { display: block; } .policy-grid--stack > .policy-col { margin-bottom: 16px; } .policy-col { background: #fff; border: 1px solid var(--blue-100); border-radius: 14px; overflow: hidden; } .policy-col__h { margin: 0; padding: 12px 16px; font-size: 16px; color: #fff; font-weight: 800; } .policy-col__h--ministry { background: linear-gradient(135deg, #0f9683, #0b7a6c); } .policy-col__h--province { background: linear-gradient(135deg, #2563eb, #1d4ed8); } .policy-col__h--city { background: linear-gradient(135deg, #b8863b, #c9a063); } .policy-col__h--district { background: linear-gradient(135deg, #6d28d9, #7c3aed); } .policy-list { list-style: none; padding: 12px 14px; margin: 0; } .policy-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--blue-100); align-items: flex-start; } .policy-list li:last-child { border-bottom: 0; } /* 统一三行文字展示：行高 1.55，line-clamp 3 行；固定最小高度保证对齐 */ .policy-list li a { color: var(--ink-700); font-size: 13.5px; line-height: 1.55; flex: 1; transition: .2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.55em * 3); } .policy-list li a:hover { color: var(--blue-700); } .policy-list li span { color: var(--ink-400); font-size: 12px; white-space: nowrap; flex: 0 0 auto; padding-top: 2px; } .policy-list__new { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 5px; background: #c2410c; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 16px; vertical-align: 1px; flex: 0 0 auto; } /* 工信部政策直通车（miit.js 渲染） */ .policy-col__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .policy-col__h-link { font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.18); padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .policy-col__h-link:hover { background: rgba(255,255,255,.32); text-decoration: none; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; } .dot--ministry { background: #0f9683; } .dot--province { background: #2563eb; } .dot--city { background: #b8863b; } .dot--district { background: #6d28d9; } .miit-source { margin: 22px 0 4px; border-top: 1px solid var(--blue-100); padding-top: 14px; } .miit-source:first-of-type { border-top: 0; padding-top: 0; } .miit-source .sec-head--left { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px !important; } .miit-source__link { font-size: 13px; color: var(--blue-700); text-decoration: none; font-weight: 700; white-space: nowrap; } .miit-source__link:hover { text-decoration: underline; } /* kjzc-miit.html 全量列表 + 分页 */ .miit-full { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--blue-100); } .miit-full li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--blue-100); } .miit-full li a { flex: 1; color: var(--ink-800); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .miit-full li a:hover { color: var(--blue-700); } .miit-full__meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .miit-full__date { color: var(--ink-400); font-size: 12.5px; white-space: nowrap; } .miit-full__new { display: inline-block; padding: 0 6px; border-radius: 5px; background: #c62828; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; } .miit-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 6px; border-top: 1px solid var(--blue-50); margin-top: 4px; } .miit-pager__btn { min-width: 32px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-700); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .18s; } .miit-pager__btn:hover { border-color: var(--blue-300); color: var(--blue-700); } .miit-pager__btn.is-active { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; border-color: transparent; } .miit-pager__btn:disabled { opacity: .4; cursor: not-allowed; } .miit-pager__info { margin-left: 10px; color: var(--ink-400); font-size: 12.5px; } .article-card { display: flex; flex-direction: column; padding: 22px; } .article-card__cat { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; } .article-card h4 { font-size: 17px; margin-bottom: 10px; color: var(--ink-900); } .article-card p { font-size: 13.5px; color: var(--ink-500); line-height: 1.7; flex: 1; } .article-card__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--blue-700); font-weight: 700; font-size: 14px; } .article-card__more svg { transition: .2s; } .article-card__more:hover svg { transform: translateX(4px); } .hot-card { position: relative; display: flex; flex-direction: column; padding: 22px 18px; background: #fff; border: 1px solid var(--blue-100); border-radius: 14px; transition: .22s; } .hot-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(11,122,108,.16); border-color: var(--blue-300); } .hot-card h4 { font-size: 16px; color: var(--ink-900); margin-bottom: 6px; } .hot-card p { font-size: 13px; color: var(--ink-500); } .hot-card__tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 800; color: #fff; background: var(--cta-600); border-radius: 6px; padding: 2px 7px; letter-spacing: 1px; } @media (max-width: 980px) { .policy-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .policy-grid { grid-template-columns: 1fr; } .news-list li { flex-wrap: wrap; } } /* 科技政策页：更新时间标注 */ .kjzc-updated { margin: -6px 0 14px; font-size: 13px; color: var(--ink-400); } .kjzc-updated::before { content: "● "; color: #0b7a6c; } /* ============ 深度优化通用组件（全站资质页复用：价值 / 痛点 / 方案 / 优势） ============ */ .c-red{color:#c62828;font-weight:700}.c-org{color:#c2410c;font-weight:700}.c-grn{color:#15803d;font-weight:700}.c-blu{color:#1d4ed8;font-weight:700}.c-pur{color:#6d28d9;font-weight:700}.c-gold{color:#b45309;font-weight:700}.c-teal{color:#0f766e;font-weight:700} .mk{background:linear-gradient(180deg,transparent 58%,#fde68a 58%);padding:0 2px;font-weight:700;color:#92400e} .mk-b{background:linear-gradient(180deg,transparent 58%,#bfdbfe 58%);padding:0 2px;font-weight:700;color:#1e40af} .mk-r{background:linear-gradient(180deg,transparent 58%,#fecaca 58%);padding:0 2px;font-weight:700;color:#b91c1c} .money{font-weight:800;color:#c62828} .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} @media(max-width:860px){.pgrid{grid-template-columns:1fr}} .pcard{border:1px solid var(--line);border-left:4px solid #c62828;border-radius:12px;background:#fff;padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s} .pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .pcard h4{font-size:15.5px;color:#c62828;margin:0 0 6px;display:flex;gap:8px;align-items:flex-start;line-height:1.5} .pcard h4 em{font-style:normal;flex:0 0 auto;background:#c62828;color:#fff;border-radius:6px;font-size:12px;padding:1px 7px;margin-top:3px;font-weight:700} .pcard p{margin:0;font-size:14px;color:var(--ink-700);line-height:1.75} .pcard .r{margin-top:10px;font-size:12.8px;color:#9a3412;background:#fff7ed;border:1px dashed #fdba74;border-radius:8px;padding:7px 10px;line-height:1.7} .pcard .s{margin-top:6px;font-size:12.8px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:7px 10px;line-height:1.7} .pcard .r b,.pcard .s b{font-weight:800} .wbox{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px 22px;box-shadow:var(--shadow-sm)} .wbox--red{border-color:#fecaca;background:linear-gradient(180deg,#fff5f5,#fff)} .wbox--grn{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4,#fff)} .wbox--blu{border-color:#bfdbfe;background:linear-gradient(180deg,#eff6ff,#fff)} .wbox h4{font-size:16px;margin-bottom:8px} .flow6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.flow6{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.flow6{grid-template-columns:1fr}} .f6{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s} .f6:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .f6__no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;font-size:14px;font-weight:800;margin-bottom:8px} .f6 h4{font-size:15.5px;margin:0 0 6px} .f6 p{font-size:13.6px;color:var(--ink-600);margin:0;line-height:1.75} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.vgrid{grid-template-columns:1fr}} .vcard{position:relative;border:1px solid var(--line);border-top:3px solid var(--blue-600);border-radius:12px;background:#fff;padding:18px 18px 16px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s} .vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .vcard__no{position:absolute;top:14px;right:14px;font-size:26px;font-weight:800;color:var(--blue-100);line-height:1} .vcard h4{font-size:15.5px;margin:0 0 6px;color:var(--ink-900);padding-right:30px} .vcard p{margin:0;font-size:13.6px;color:var(--ink-600);line-height:1.75} .agrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(max-width:760px){.agrid{grid-template-columns:1fr}} .aitem{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s} .aitem:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .aitem__ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center} .aitem__ic svg{width:18px;height:18px} .aitem h4{font-size:15px;margin:0 0 4px;color:var(--ink-900)} .aitem p{margin:0;font-size:13.4px;color:var(--ink-500);line-height:1.7} /* ============ 分页器 / 24H 徽标（科技政策详情页通用） ============ */ .pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:20px 0 4px} .pager__btn{min-width:74px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-700);font-size:13.5px;cursor:pointer;transition:all .18s} .pager__btn:hover:not(:disabled):not(.is-active){border-color:var(--blue-500);color:var(--blue-600);background:var(--blue-50)} .pager__btn.is-active{background:linear-gradient(135deg,var(--blue-500),var(--blue-700));border-color:transparent;color:#fff;font-weight:700} .pager__btn:disabled{opacity:.42;cursor:not-allowed} .pager__btn--nav{background:#f8fafc} .pager__info{flex:0 0 100%;text-align:center;color:var(--ink-400);font-size:12.5px;margin-top:2px} @media(max-width:640px){.pager__btn{min-width:64px;padding:6px 9px;font-size:12.5px}} .govnews__new{display:inline-block;margin-right:6px;padding:0 6px;border-radius:5px;background:#c2410c;color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:17px;vertical-align:1px} .govnews__item--fresh>a{font-weight:700} .news-list__new{display:inline-block;margin-right:5px;padding:0 5px;border-radius:5px;background:#c62828;color:#fff;font-size:10.5px;font-style:normal;font-weight:700;line-height:16px;vertical-align:1px} .tzgg-fresh{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:linear-gradient(135deg,#c62828,#e05252);color:#fff;font-size:12.5px;font-weight:700;vertical-align:2px} /* ========================================================================== 模块精排（六步交付 / 四格动因 / 碳足迹概览）— 整齐 · 层次分明 · 不凌乱 ========================================================================== */ /* —— 六步交付：3×2 整齐网格 —— */ .ktr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ktr-step { position: relative; display: flex; flex-direction: column; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px; transition: transform .25s, box-shadow .25s, border-color .25s; } .ktr-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-100); } .ktr-step__no { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .02em; box-shadow: var(--shadow-sm); } .ktr-step__title { font-size: 16.5px; font-weight: 700; color: var(--ink-900); line-height: 1.4; } .ktr-step__desc { font-size: 14px; color: var(--ink-500); margin: 0; line-height: 1.7; } @media (max-width: 900px) { .ktr-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ktr-steps { grid-template-columns: 1fr; } } /* —— 通用四格（2×2）网格 —— */ .ktr-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 760px) { .ktr-grid4 { grid-template-columns: 1fr; } } /* —— 层次子区块：带小标题分组 —— */ .ktr-block { margin-top: 28px; } .ktr-block:first-child { margin-top: 0; } .ktr-block__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--blue-700); text-transform: uppercase; } .ktr-block__label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--blue-600); } /* —— 导语段 —— */ .ktr-lead { font-size: 15.5px; color: var(--ink-700); line-height: 1.85; } .ktr-lead p { margin: 0 0 12px; } .ktr-lead p:last-child { margin-bottom: 0; } .ktr-lead strong { color: var(--ink-900); } /* —— 四格卡片：图标 + 文案 —— */ .ktr-cell { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; } .ktr-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: #fff; border-color: var(--blue-100); } .ktr-cell .icon-box { margin-bottom: 0; flex-shrink: 0; } .ktr-cell__body h4 { font-size: 16px; margin-bottom: 6px; color: var(--ink-900); } .ktr-cell__body p { font-size: 13.5px; color: var(--ink-500); margin: 0; line-height: 1.7; } /* —— 四格卡片（编号版 · 金色，用于「四重动因」） —— */ .ktr-cell--num .ktr-cell__no { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-50), #f3e6cf); color: var(--gold-600); font-size: 16px; font-weight: 800; border: 1px solid #ecd9b4; } /* —— 核心依据标准卡（碳足迹概览 4 项标准） —— */ .ktr-std { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue-500); border-radius: var(--radius-sm); padding: 16px 18px; transition: transform .22s, box-shadow .22s; } .ktr-std:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .ktr-std b { display: block; color: var(--blue-700); font-size: 15px; font-weight: 800; margin-bottom: 4px; } .ktr-std span { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; } /* ========================================================================== 区域政策红利地图（kjcgzh 科技成果转化与评价） ========================================================================== */ .pol-map { display: grid; gap: 20px; } .pol-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s; } .pol-card:hover { box-shadow: var(--shadow); border-color: var(--blue-100); } .pol-card__head { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: center; padding: 20px 26px; background: linear-gradient(135deg, var(--blue-50), #fff); border-bottom: 1px solid var(--line); } .pol-card--gold .pol-card__head { background: linear-gradient(135deg, var(--gold-50), #fff); } .pol-card--plain .pol-card__head { background: #f7f9fb; } .pol-card__tag { display: inline-block; margin-bottom: 6px; padding: 3px 12px; border-radius: 999px; background: var(--blue-700); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; } .pol-card--gold .pol-card__tag { background: var(--gold-600); } .pol-card--plain .pol-card__tag { background: var(--ink-500); } .pol-card__title h3 { font-size: 19px; } .pol-card__intro { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.7; } .pol-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); } .pol-city { background: #fff; padding: 18px 20px; } .pol-city h5 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15.5px; color: var(--ink-900); margin-bottom: 10px; } .pol-city h5::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); flex: 0 0 auto; } .pol-card--gold .pol-city h5::before { background: var(--gold-500); } .pol-city__sub { font-size: 11.5px; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 1px 8px; font-weight: 700; } .pol-city ul { display: grid; gap: 7px; } .pol-city li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--ink-500); line-height: 1.68; } .pol-city li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300); } .pol-card--gold .pol-city li::before { background: var(--gold-300); } .pol-city b { color: var(--ink-700); } .pol-city--base { background: var(--bg-soft); } .pol-city--base h5::before { background: var(--ink-400); } @media (max-width: 900px) { .pol-card__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .pol-card__head { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pol-card__grid { grid-template-columns: 1fr; } } /* —— 暗链（政策全文跳转：视觉同正文，hover 显品牌色 + 虚线下划线） —— */ .darklink { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; transition: color .18s, border-color .18s; cursor: pointer; } .darklink:hover { color: var(--blue-600); border-bottom-color: var(--blue-600); } /* —— 07 奖励政策 · 层次化模块（rw-*） —— */ .rw-block { margin-top: 28px; } .rw-cap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-left: 12px; border-left: 4px solid var(--gold-600); flex-wrap: wrap; } .rw-cap__no { font-weight: 800; color: var(--gold-600); font-size: 18px; } .rw-cap b { font-size: 17px; color: var(--ink-800); } .rw-cap i { font-style: normal; font-size: 13px; color: var(--ink-500); } .rw-grid { display: grid; gap: 14px; } .rw-grid--4 { grid-template-columns: repeat(4, 1fr); } .rw-cell { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px 14px; text-align: center; transition: transform .2s, box-shadow .2s; } .rw-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .rw-cell em { display: block; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink-500); margin-bottom: 6px; } .rw-cell strong { display: block; font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--gold-600); letter-spacing: -.5px; margin-bottom: 8px; } .rw-cell strong.rw-money { color: var(--blue-600); } .rw-cell span { display: block; font-size: 12.5px; color: var(--ink-500); line-height: 1.6; } .rw-cell--hot { background: linear-gradient(180deg, #fffaf0, #fff); border-color: #ecd9b0; } .rw-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } .rw-strip__cell { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .rw-strip__cell h4 { margin: 0 0 6px; font-size: 15px; color: var(--blue-800); } .rw-strip__cell p { margin: 0; font-size: 13px; color: var(--ink-600); line-height: 1.7; } .rw-strip__cell b { color: var(--blue-700); } @media (max-width: 900px) { .rw-grid--4 { grid-template-columns: repeat(2, 1fr); } .rw-strip { grid-template-columns: 1fr; } } @media (max-width: 520px) { .rw-grid--4 { grid-template-columns: 1fr; } } /* —— 首页核心数据 7 模块（第一行 4 个 + 第二行 3 个，12 列栅格对齐） —— */ .stat-band__grid--7 { grid-template-columns: repeat(12, 1fr); } .stat-band__grid--7 > div:nth-child(-n+4) { grid-column: span 3; } .stat-band__grid--7 > div:nth-child(n+5) { grid-column: span 4; } .stat-band__grid--7 > div:nth-child(n+5) > span { font-size: 13.5px; } .stat-band__grid--7 b { font-size: 48px; } @media (max-width: 960px) { .stat-band__grid--7 { grid-template-columns: repeat(2, 1fr); } .stat-band__grid--7 > div:nth-child(n) { grid-column: auto; } .stat-band__grid--7 > div:last-child { grid-column: 1 / -1; } } @media (max-width: 720px) { .stat-band__grid--7 { grid-template-columns: 1fr; } } /* —— 首页 7 格数据带：悬停跳动放大加亮 + 数字滚动 —— */ .stat-band__grid--7 > div { position: relative; overflow: hidden; cursor: default; transition: transform .5s cubic-bezier(.3, 1.75, .45, 1), background .35s ease, box-shadow .35s ease, border-radius .35s ease; will-change: transform; } .stat-band b, .stat-band span { transition: color .3s ease, text-shadow .3s ease; } /* 高光扫过层 */ .stat-band__grid--7 > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-130%); } .stat-band__grid--7 > div:hover { transform: translateY(-10px) scale(1.06); background: linear-gradient(135deg, #0e8a76, var(--blue-600)); border-radius: 14px; box-shadow: 0 18px 38px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .16); z-index: 2; } .stat-band__grid--7 > div:hover::after { transition: transform .85s ease; transform: translateX(130%); } .stat-band__grid--7 > div:hover b { color: #ffd66e; text-shadow: 0 0 20px rgba(255, 214, 110, .55); } .stat-band__grid--7 > div:hover b small { color: rgba(255, 236, 190, .95); } .stat-band__grid--7 > div:hover span { color: #fff; } /* 数字滚动过渡时的轻微放大感 */ .stat-band__grid--7 .sb7n { display: inline-block; min-width: 1.2em; font-size: inherit; } @media (prefers-reduced-motion: reduce) { .stat-band__grid--7 > div, .stat-band b, .stat-band span { transition: none; } .stat-band__grid--7 > div:hover { transform: none; } .stat-band__grid--7 > div:hover::after { transform: translateX(-130%); } } /* 数字与单位字号统一：家/项/家以上 与前面的数字一样大 */ .stat-band__grid--7 b small { font-size: inherit; font-weight: inherit; }