/* ===== hero-section.html ===== */ /* ===== 全局层（方案A 2026-10-24）：全站唯一真源，各板块源经全局占位符注入 ===== */ :root{ --blue:#0278E6; --blue-dark:#083B76; --muted:#41678F; --ink:#26374D; --body:#46586E; --line:#E3ECF5; --bg-soft:#F6F9FD; --card-r:12px; /* 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter；PJS 退役）。 --font-cn 的首位放 Inter ⇒ 英文/数字走 Inter，汉字与中文标点自然回落到雅黑； 中文引号 “”‘’、破折号 —、省略号 … 不被 Inter 抢走，靠 @font-face 的 unicode-range 限定在 ASCII + Latin-1（见各板块源顶部，本文件不声明 @font-face）。 --font-en 仍用于 .en 小标签，同样指向 Inter。 */ --font-cn:"Inter","Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif; --font-en:'Inter',var(--font-cn); } *{box-sizing:border-box;margin:0;padding:0} body{background:#fff;font-family:var(--font-cn);color:var(--ink);-webkit-font-smoothing:antialiased} .container{max-width:1200px;margin:0 auto;padding:0 34px} .sec-head{text-align:center;margin-bottom:30px} .sec-head .eyebrow{ font-family:var(--font-en);font-size:12.5px;font-weight:600;color:var(--blue); letter-spacing:3px;text-transform:uppercase; } .sec-head h2{ font-size:32px;font-weight:700;color:var(--blue-dark);letter-spacing:2px;margin-top:10px; } .sec-head .rule{width:44px;height:3px;background:var(--blue);border-radius:2px;margin:16px auto 0} .svc-head{margin-bottom:20px} .svc-head h3{ font-size:22px;font-weight:700;color:var(--blue-dark);letter-spacing:1.5px; position:relative;padding-left:16px; } .svc-head h3::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:20px;background:var(--blue);border-radius:2px; } .svc-head .en{ font-family:var(--font-en);font-size:12px;font-weight:600;color:var(--muted); letter-spacing:2px;text-transform:uppercase;margin-top:6px;padding-left:16px; } .svc-head .lead{ margin-top:14px; font-size:19px;font-weight:600;color:var(--blue-dark); line-height:1.8;letter-spacing:.5px; } .svc-head .lead em{font-style:normal;color:var(--blue)} /* 引子「——后段」：2026-11-05 四次定稿——后段字号小一档；换行与否分语言： 英文 .lead-tail 另起一行（block），中文 .lead-tail-inline 顺排在同一条引子里（inline）。 颜色/字重沿用主句（深蓝 600），里面的 em 蓝色强调照旧。由 content_fill.render() 包 span */ .svc-head .lead .lead-tail{ display:block; font-size:15px; letter-spacing:.3px; } .svc-head .lead .lead-tail-inline{display:inline} [id]{scroll-margin-top:94px} @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* 字体已内联，确保预览环境可用 */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ @font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0020-00B6,U+00B8-00FF} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0020-00B6,U+00B8-00FF} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0020-00B6,U+00B8-00FF} /* ===== 预览外壳（非网站内容） ===== */ /* 页眉+首屏共用大框：1200px（回滚：与页脚同宽） */ .top-frame{max-width:1200px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;padding-top:94px} /* 特殊档（10-21 容器 1200 化的边距档；10-24 用户定 1240→1200 与容器一致，勿归并标准五档） */ @media (max-width:1200px){ .top-frame{margin:0 20px} } /* ===== 页眉：固定吸顶（无框无描边） ===== */ .nav{ position:fixed;top:0;left:50%;transform:translateX(-50%); /* 宽度连续自适应：min() 无断点跳变，和页脚一样平滑 */ width:min(1200px, calc(100% - 40px)); z-index:50; background:#fff; } .nav-inner{ padding:11px 34px; display:flex;align-items:center;justify-content:space-between;gap:20px; } .nav img{height:72px;width:auto;display:block;margin-left:0} /* 手机汉堡菜单用的隐藏 checkbox（桌面/平板完全不参与布局） */ .nav-toggle{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none} .nav-burger{display:none} /* 汉堡关闭遮罩只给手机 ≤560（见媒体查询）；桌面/平板一律隐藏，避免它成为页眉 flex 的多余空项 */ .nav-overlay{display:none} .nav-menu{display:flex;gap:28px;font-size:14px;font-weight:600;color:var(--ink)} .nav-menu a{color:inherit;text-decoration:none;position:relative;padding:6px 0} .nav-menu a.on{color:var(--blue)} .nav-menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2.5px;border-radius:2px;background:var(--blue)} /* ===== 语言开关（2026-10-28 与英文版页眉同步）：中文选中（蓝+下划线）/ EN 未选中（灰） ===== margin-left:auto 让「菜单 + 开关」整体靠右：nav-inner 是三项后 space-between 会把菜单挤到中间 */ .nav-menu{margin-left:auto} .lang-switch{ display:flex;align-items:center;gap:5px;flex:0 0 auto; font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted); text-decoration:none;padding:6px 2px;white-space:nowrap; } /* 选中态＝变色 + 下划线（用户 2026-10-27 22:59 定，与英文版页眉同款） 用 text-decoration（不用 border-bottom）：零盒模型影响，不会把页眉撑高影响 scroll-margin */ .lang-switch b{ color:var(--blue);font-weight:700; text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px; } .lang-switch i{font-style:normal;color:#C6D4E6} .lang-switch:hover{color:var(--blue)} /* ===== 首屏：品牌渐变 + 底层城市大图（2026-10-20 用户定） ===== 层序（下→上）：.hero 渐变底 → .hero-deco 装饰 → .hero-photo 大图（蒙版控制显隐）→ .hero-inner 文字 2026-11-04 用户改：装饰层（光斑/光晕/网格/三层同心环）垫到**照片之下**—— 有图时被照片盖住（2026-10-20「装饰叠在大图上不好看」的结论仍成立）， 图片未加载 / 加载失败时露出的就是完整的深蓝底，与案例大框、页脚同一套纯 CSS 装饰。 大图显隐逻辑（2026-10-21 22:47 用户定）：左端 ~10%，向右渐强，春笋（画面 ~66% 处）≈90%，右缘 70%； 实现 = 照片层盖在渐变上、用「横向渐变 × 春笋窄径向」两层蒙版取并集（-webkit-mask 多层默认 source-over） 高度：桌面锁 min-height:600（用户 2026-10-20 定「电脑版首屏高度 600」），平板/手机仍由内容撑开 */ /* 首屏容器（2026-10-21 用户定：电脑版高度硬锁 600，不许被内容或装饰拉高；平板/手机在 ≤900 释放为 auto） */ /* 2026-10-21 17:51 用户改：电脑版高度改 480；大图换 1600x640 裁水印原图（1600/640=1200/480=2.5， cover 铺满 1200 宽首屏时整图完整显示、无裁切；图保持原文件不动，只换接入） */ .hero{ position:relative;overflow:hidden; border-radius:16px; display:flex;align-items:center;padding:64px 40px;height:480px; color:#fff; /* 2026-11-09 用户定：首屏图还没加载出来时「什么都别放，就留白」⇒ 去掉深蓝渐变兜底 （以及构建期的模糊占位图，见 tools/build_dist.py 的 HERO_LQIP_ENABLED），透出 body 的 #fff。 回滚：background:linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); */ background:none; } /* 城市大图层（深圳后海天际线，春笋在画面 ~72% 处、占图高 ~61%；1600x640 裁水印原图） 2026-10-21 22:49 用户改：径向窗口改回 58% 宽、峰值 .92（.92→.80(45%)→.34(78%)→0）； 22:47 的窄窗口试验（30%/.78）已回退。注意：58% 宽窗口合成后右缘实际 ≈.88、左中段 ≈.5，高于横向层名义值 蒙版注意：容器高度从 600 改 480 后，径向蒙版纵向按容器高度画（ellipse 110% 仍覆盖全高），无需另调 层序注意：z-index 2 ⇒ 照片压在装饰层之上（2026-11-04）；装饰只在照片不透明区之外露出 */ /* 2026-11-07（第十一修，用户定）：换成白天清澈蓝天版原图后，**去掉 brightness 滤镜与两层蒙版**， 照片按 cover 原样铺满整层。理由：白天蓝天本身通透，压暗蒙版只会让左侧发灰、右侧发闷； 用户要的是「照片直接上墙」。 ⚠️ 回滚到 dusk 旧图（同目录带「-旧图-20261107」后缀那份；注意：注释里别写完整文件名， build_dist 的引用扫描会把它当成缺失图片报错）时，这两样必须一起加回来， 否则旧图左半边亮得压不住白字（第十修 2026-11-06 01:52 定值）： filter:brightness(1.1); -webkit-mask-image / mask-image: linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.55) 27%,rgba(0,0,0,.95) 33%,rgba(0,0,0,1) 38%), radial-gradient(ellipse 75% 75% at 72% 50%,rgba(0,0,0,.99) 0%,rgba(0,0,0,.95) 45%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.25) 100%); -webkit-mask-composite:source-in; mask-composite:intersect; */ .hero-photo{ position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;pointer-events:none; background:url("../images/hero/hero-skyline-day-3120x1248.jpg") no-repeat 50% 50%;background-size:cover; } /* ====== 回滚档案（历史存档，2026-11-07 起当前版本已无蒙版/无滤镜） ====== 换回 AI 图（images/hero/hero-skyline-1600x640-nowm.jpg，当年偏亮、和它配套的蒙版是 「双层并集」——⚠️ 与现 dusk 图的「双层交集」是两套逻辑，不能混用）时： ① txt 大图字段改回 hero-skyline-1600x640-nowm.jpg（中英两份）； ② 删掉下面的 filter:brightness(1.1)（AI 图不需要提亮）； ③ 桌面蒙版整体换成： -webkit-mask-image/mask-image: linear-gradient(90deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.15) 34%,rgba(0,0,0,.58) 56%,rgba(0,0,0,.84) 78%,rgba(0,0,0,.92) 100%), radial-gradient(ellipse 58% 110% at 66% 50%,rgba(0,0,0,.99) 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.55) 78%,rgba(0,0,0,0) 100%); （不要 mask-composite，走默认并集） ④ ≤900 只保留 background-position:74% 50%；≤560 手机蒙版换成： linear-gradient(90deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.16) 40%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.52) 100%), radial-gradient(ellipse 70% 92% at 66% 55%,rgba(0,0,0,.84) 0%,rgba(0,0,0,.60) 50%,rgba(0,0,0,0) 100%); （同样并集、无 filter） ⑤ 改完跑 build_fullpage_preview + build_en_fullpage_preview + build_dist。 */ /* 装饰层容器（显式定位，不用 inset）；z-index 1 < 照片的 2 ⇒ 整层垫在照片下面 2026-10-21「电脑版直接放图、不要其他处理」改由层序解决：照片盖住装饰，有图时观感不变； 2026-11-04 用户改：装饰层不再「桌面端隐藏」——图片未加载时，它就是首屏那块深蓝底的质感 */ /* ⚠️ 2026-11-09：本层及下面 .deco-* 的 HTML 已注释停用（LQIP 占位图上线后被完全遮住， 留着只是每次首绘多画四个大径向渐变 + 网格 + 三个环）。CSS 原样保留以便回滚， 恢复时把 hero-section / en-hero-section 里那段注释取消即可。 */ .hero-deco{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none} /* 1) 右上柔光斑：与左下光晕形成对角双光源 —— 尺寸随首屏新高度（约 478px）等比收 0.75，保持原构图比例（用户 2026-10-18 22:50 要求背景一起适配） */ .deco-aur{position:absolute;right:-135px;top:-195px;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(80,170,255,.20) 0%,transparent 66%)} /* 2) 左下柔光（方案 A 原色） */ .deco-glow{position:absolute;left:-135px;bottom:-165px;width:470px;height:470px;border-radius:50%; background:radial-gradient(circle,rgba(61,155,240,.40) 0%,transparent 68%)} /* 3) 顶部玻璃高光 */ .deco-sheen{position:absolute;top:0;left:0;right:0;height:145px; background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 100%)} /* 4) 右侧渐隐网格（2026-11-04 恢复：与案例大框 .cns-deco-grid、页脚 .f-deco-grid 同参数） 列宽 56px 的白色 1px 网格，从 46% 处开始显现、向左渐隐到透明，避免与文字区打架 */ .deco-grid{position:absolute;right:0;top:0;width:54%;height:100%; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%)} /* 5) 三层同心圆环（2026-11-04 恢复；同日 00:26 按用户「圆环在右侧比较居中」重定位） 定位改用「圆心 + translate(-50%,-50%)」，三个环共用 left:86% / top:50% ⇒ 真正同心， 圆心落在块宽 86%、垂直正中（旧版是 right/bottom 贴右下角，圆心在底边上，看着偏下）。 直径 clamp 随视口收：桌面封顶 680/500/330（页脚 940/700/460 × 0.723），768 档约 435/320/210。 */ .deco-ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%; border:1px solid rgba(255,255,255,.10);pointer-events:none} .deco-ring.r1{width:clamp(300px,56.7vw,680px);height:clamp(300px,56.7vw,680px);left:86%;top:50%} .deco-ring.r2{width:clamp(220px,41.7vw,500px);height:clamp(220px,41.7vw,500px);left:86%;top:50%; border-color:rgba(255,255,255,.16)} .deco-ring.r3{width:clamp(145px,27.5vw,330px);height:clamp(145px,27.5vw,330px);left:86%;top:50%; border-color:rgba(255,255,255,.22)} .hero-inner{position:relative;z-index:5;width:100%;max-width:1200px;margin:0 auto} /* --- 文字层级：照 hero-compare 方案 A --- */ .hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:620px} /* 第一行：JFC + 右侧两行标语（用户 2026-10-18 23:30 定） --brand 是唯一控制量：字标字号；标语字号/行距/间距全按它派生，三端只改这一个值 */ .hero-id{--brand:76px;display:flex;align-items:flex-start;gap:calc(var(--brand) * .32)} /* 1. 品牌大字（行高 1 ⇒ 盒高＝字号，作为标语两行总高的基准） */ .brand{font-family:var(--font-en);font-weight:700;font-size:var(--brand);line-height:1;letter-spacing:.06em} /* 2. 标语：中英各一行（2026-10-19 00:30 用户要求行距收小：块高 .83→.745，间隙减半， margin-top 相应加大让整块仍垂直居中于 JFC 字面；字号/两端对齐不变） */ .slogan{ display:flex;flex-direction:column;justify-content:space-between; /* 宽度＝两行中较宽那行（英文）的固有宽 ⇒ 中文行同宽 ⇒ 左右两端齐 */ width:max-content; height:calc(var(--brand) * .745); margin-top:calc(var(--brand) * .1375); font-size:calc(var(--brand) * .25);line-height:1.4;font-weight:400;letter-spacing:.02em; } .slogan .cn,.slogan .en{display:block} .slogan .en{font-family:var(--font-en);white-space:nowrap} /* 中文行两端对齐（用户 2026-10-18 23:40）：字距均匀拉开到与英文行同宽 —— 不能加 white-space:nowrap，nowrap 会让浏览器失去拉伸依据，text-align-last 失效 */ .slogan .cn{text-align:justify;text-align-last:justify} /* 3. 导语 */ .hero-lead{font-size:24px;line-height:1.5;font-weight:400;letter-spacing:.02em} /* 4. 理念框（上浅下深渐变 + 顶部高光边，与组织架构卡片同款结构） */ .core{ padding:13px 22px;border-radius:12px;font-size:15px;line-height:1.9;letter-spacing:.4px; /* 2026-11-13 16:33 用户定：理念框改回白玻璃（11-12 线上版参数）+ 框内白字换三层实影（与标语同款）。 背景 .25/.12 + 白描边 .32 + 内高光 .38；文字投影见下方 .core 行。 历史存档：① 11-07 蓝底 .60/.52 + .38 + .32；② A 清爽蓝玻璃 .48/.38 + .30 + .25 + 外投影（13 日下午）； ③ 11-09 近实心白 .95/.90 + 深蓝字 #083B76；④ 11-09 原版白玻璃 .15/.05。 */ background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.12) 100%); border:1px solid rgba(255,255,255,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.38); } /* 文字从星链线条上浮出来（投影，非遮罩层） 2026-11-13 16:30 用户反馈「标语/导语与背景对比不强，远看不明显」⇒ .slogan/.hero-lead 换三层实影： 0 1px 2px .60（贴字锐影）+ 0 2px 6px .50（中距）+ 0 6px 28px .40（大范围环境影）；.brand 保持原两层 */ .brand{text-shadow:0 2px 18px rgba(2,30,64,.55),0 1px 3px rgba(2,30,64,.34)} .slogan,.hero-lead{text-shadow:0 1px 2px rgba(2,30,64,.60),0 2px 6px rgba(2,30,64,.50),0 6px 28px rgba(2,30,64,.40)} /* 16:55 用户反馈三层实影在框内小字上「有点脏」（环境影把玻璃晕灰了）⇒ 收成两层：贴字锐影 .50 + 中距 .32， 无大范围环境影；白玻璃上小字够立住且不发灰 */ .core{text-shadow:0 1px 2px rgba(2,30,64,.50),0 2px 8px rgba(2,30,64,.32)} .hero-cta{ display:inline-flex;align-items:center;gap:10px;margin-top:8px; background:#fff;color:var(--blue);text-decoration:none; font-size:15.5px;font-weight:700;letter-spacing:.12em; padding:14px 34px;border-radius:10px; box-shadow:0 10px 24px rgba(2,40,84,.30); transition:transform .18s ease, box-shadow .18s ease; } .hero-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(2,40,84,.38)} .hero-cta svg{display:block} /* ===== 响应式 ===== */ @media (max-width:900px){ .top-frame{margin:0 20px;padding-top:78px} .nav-inner{padding:10px 18px} .nav img{margin-left:0} .nav img{height:58px} /* 平板保持五项一行（实测 768 宽余量充足，不启用汉堡） */ .nav-menu{gap:16px;font-size:13px} .lang-switch{font-size:12px} .hero{padding:52px 24px;height:auto;min-height:0} /* 平板/手机：解除电脑端 600 硬锁，恢复内容撑开 */ .hero-photo{background-position:74% 50%} .hero-id{--brand:52px} .hero-lead{font-size:19px} /* 2026-11-13 17:00 用户定：手机图（-1248x500，≤900 档）理念框下方垫着大片白云，白玻璃+白字不显， 用户自己修不了云 ⇒ **仅 ≤900 档**把理念框改回蓝底（A 清爽蓝玻璃参数，含外投影浮起），桌面白玻璃不动 */ .core{font-size:14px;padding:11px 18px; background:linear-gradient(180deg,rgba(2,120,230,.48) 0%,rgba(2,120,230,.38) 100%); border:1px solid rgba(255,255,255,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 20px rgba(2,40,84,.18)} /* 装饰层：平板收敛（同样按新高度 412 等比缩） */ .deco-aur{width:470px;height:470px;right:-150px;top:-165px} } @media (max-width:560px){ .top-frame{margin:0 14px 0;padding-top:62px} .nav{width:calc(100% - 28px)} .nav-inner{padding:8px 14px} .nav img{margin-left:0} .nav img{height:46px} /* 只有手机用汉堡（用户 2026-10-18 定：平板不要）。五项一行在 ≤560 放不下（390 差约 30px） ⇒ 收进右上角三条横线，纯 CSS（checkbox），无 JS、无动画；页眉高度仍 62 ⇒ 锚点补偿不用改 */ .nav-burger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;margin-left:auto;padding:9px 8px;border-radius:8px; cursor:pointer;-webkit-tap-highlight-color:transparent; } .nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink)} /* 语言开关手机档收一档字号；与汉堡并排一行（开关在最右，同英文版页眉排法） */ .lang-switch{font-size:12px} .nav-menu{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;font-size:15px; background:#fff;padding:4px 0 6px; border-top:1px solid var(--line); border-radius:0 0 14px 14px; box-shadow:0 14px 24px rgba(8,59,118,.10); } .nav-menu a{padding:13px 18px} .nav-menu a + a{border-top:1px solid #EEF4FB} .nav-menu a.on::after{display:none} .nav-menu a.on{background:#F3F8FD} .nav-toggle:checked ~ .nav-inner .nav-menu{display:flex} /* 点菜单外任意处收起（用户 2026-10-18 要求）：勾选时显示一层全屏透明遮罩， 点遮罩 = 取消勾选 ⇒ 菜单收起。z-index:-1 使它压在自身页眉内容之下、页面其余内容之上 */ .nav-overlay{display:none} .nav-toggle:checked ~ .nav-inner .nav-overlay{ display:block; position:fixed;top:0;left:0;right:0;bottom:0; z-index:-1; -webkit-tap-highlight-color:transparent; } /* 手机首屏加高（用户 2026-10-18 23:40：太矮）⇒ 只放大上下留白，文字与装饰不动 */ .hero{padding:76px 18px} /* 手机端大图：2026-11-07 起桌面/平板/手机统一为「无蒙版、无滤镜」原样铺满， 这里只保留偏右取景的 background-position（春笋 65% 处在窄屏会被裁，右移取景更稳） */ .hero-photo{background-position:78% 50%} .hero-id{--brand:44px} /* 导语：手机端保持一行（用户 2026-10-18 23:32 改，两行方案作废）⇒ 加粗 + 字号随宽度收 + 不换行 */ .hero-lead{font-size:clamp(11px,3.75vw,15px);line-height:1.5;font-weight:700;white-space:nowrap} /* 理念框：两行文案（每行 20 字，含顿号）任何宽度都不许折行（用户 2026-10-18 23:46） 字号按可用宽自动收：可用宽 ≈ 100vw − 94px（框架左右 28 + 首屏内距 36 + 框内边距 30）， 再留 6px 余量取 −100px；每字宽 = font-size + letter-spacing(.4px) ⇒ 除以 20（实测 20 字）后再减 .4px 宽 ≥390 时被 13.5px 上限挡住，与原来完全一致；320 下约 10.6px，是"不折行"能给的极限 */ .core{font-size:min(13.5px, calc((100vw - 100px)/20 - .4px));padding:10px 15px;line-height:1.8} /* 按钮 2026-11-05 用户改：不再拉宽（width:100%+max-width:260 的长条不好看）， 改 fit-content 按文字自然宽度；2026-11-06 01:43 用户改：去掉 auto 居中、与桌面版一样靠左 注意：仍是 flex（不是 block），否则内部 svg 的 display:block 会把箭头挤到第二行 */ .hero-cta{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:22px 0 0;padding:13px 26px;font-size:15px;text-align:center} /* 装饰层：手机只留柔光（网格/圆环在 390 宽下会挤进文字区，且手机照片本就压得淡，关掉； 顶部高光手机上糊，也去掉） */ .deco-sheen,.deco-grid,.deco-ring{display:none} .deco-aur{width:335px;height:335px;right:-125px;top:-110px} .deco-glow{width:335px;height:335px;left:-110px;bottom:-125px} } /* ===== about-section.html ===== */ @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* about 板块私有变量（原 :root 拆出，作用域限定板块内；方案A 2026-10-24） */ .about{ /* 两条通栏藕荷色：浅粉底色 + 上亮下暗渐变（与组织架构定稿一致） */ --glass-band:linear-gradient(180deg,rgba(239,210,220,.80) 0%,rgba(239,210,220,.58) 100%); /* 白卡透明度旋钮（近不透明档，已定稿） */ --card-a-top:.92; --card-a-bot:.82; } /* ===== 字体（自托管，本地引用） ===== */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ /* ===== 预览外壳（非网站内容） ===== */ /* ===== 板块：关于我们 ===== */ .about{padding:68px 0 0} /* 一级标题：英文小标 + 中文大标 + 蓝色短线 */ /* 二级小标题 */ .sub-head{margin-bottom:22px} .sub-head h3{font-size:22px;font-weight:700;color:var(--blue-dark);letter-spacing:1.5px;position:relative;padding-left:16px} .sub-head h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--blue);border-radius:2px} .sub-head .en{font-family:var(--font-en);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:8px;padding-left:16px} /* 公司介绍：左文右图占位 */ .intro{margin-bottom:64px} /* 公司介绍：正文段落环绕右图（2026-10-19 用户定） 文字比图高时，高出的部分排到图片下方，不把整块撑到与文字同高； 图片按宽度撑满、高度等比，永不变形、永不裁切。 flow-root＝容器含住浮动图，图片比文字高时也不会溢出；float 生效还要求图在 DOM 里排在正文之前 */ .intro-grid{ display:flow-root; } .intro-text p{ font-size:15.5px;line-height:2;color:var(--body); text-align:justify;text-indent:2em; } .intro-text p + p{margin-top:18px} /* 公司介绍配图容器（2026-10-23 换真图：占位框的虚线边/渐变底/内边距整套移除，只留环绕定位） */ .intro-media{ float:right; width:36%;max-width:384px;min-width:220px; margin:0 0 18px 32px; } /* 配图自适应：不变形、不裁切 */ /* 2026-10-23 用户定：图与正文等高 ⇒ 不再锁 4:3，比例由图片文件自带（1.55:1，按 1132 容器在成品副本上实测平衡点裁切） */ .intro-media img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--card-r)} /* ===== 组织架构：装进大框（与「JFC 管理思想实践领域」大卡同宽同圆角，首屏同款渐变 + 星点背景） ===== */ .org-section{ padding:8px 0 26px; } .org-box{ position:relative; /* 与产品服务「JFC 管理思想实践领域」大卡同宽：容器内容宽 1132； width=全宽-左右 34px（与 .container 留白一致，≤640 改 18px）—— 窄屏不再顶满屏幕（用户 2026-10-18 反馈） */ max-width:1132px;margin:0 auto;width:calc(100% - 68px); background:linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); border-radius:16px; padding:30px 34px 26px; overflow:hidden; isolation:isolate; } .org-box::after{ content:""; /* 星点：低透明度平铺 */ position:absolute;top:0;left:0;right:0;bottom:0; background-image:url("data:image/svg+xml;utf8,"); background-size:360px 360px; z-index:0;pointer-events:none; } .org-wrap{position:relative;z-index:1} .org-ceo{ background:var(--glass-band); /* 已去掉 backdrop-filter：毛玻璃滤镜渲染开销大（滚动掉帧、卡片"加载慢"）， 底色本身已近不透明，观感不变 */ border-radius:var(--card-r); padding:12px 24px; text-align:center;color:#fff; box-shadow:0 6px 18px rgba(3,50,100,.16), inset 0 1px 0 rgba(255,255,255,.45); } .org-ceo .role{font-family:var(--font-en);font-size:29px;font-weight:700;letter-spacing:2px;line-height:1.15;color:#FFFFFF} .org-ceo .cn{font-size:16px;font-weight:600;margin-top:4px;letter-spacing:1px;line-height:1.4;color:#FFFFFF} .org-ceo .en{font-family:var(--font-en);font-size:13px;font-weight:400;margin-top:2px;letter-spacing:.4px;line-height:1.45;color:#FFFFFF} /* 三个卡片组并排（2026-10-21 用户定：管理咨询 / 人才成长 / JFC 研究院）。 组标题（中英）统一放在各自框顶居中，不再做左侧竖排标签 */ .org-grid{ display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:30px; margin-top:28px;align-items:stretch; } .org-panel{ border:2px dashed rgba(255,255,255,.72);border-radius:16px; padding:14px 14px 16px; display:flex;flex-direction:column;gap:12px; } /* 卡片＝自然高度、顶部对齐：组内只有两张卡的框，多出的高度留在底部（优雅留空，不拉高卡片） */ .org-panel-head{text-align:center;color:#fff} .org-panel-head .cn{font-size:14px;font-weight:600;letter-spacing:1px;line-height:1.3} .org-panel-head .en{font-family:var(--font-en);font-size:10px;font-weight:400;letter-spacing:1px;line-height:1.35;margin-top:3px;opacity:.92} .org-card{ background:linear-gradient(180deg,rgba(255,255,255,var(--card-a-top)) 0%,rgba(255,255,255,var(--card-a-bot)) 100%); /* 已去掉 backdrop-filter（渲染开销大），底色透明度已足够，观感不变 */ border:1px solid rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.92); border-radius:var(--card-r); padding:12px 14px;min-height:64px; text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(3,50,100,.16), inset 0 1px 0 rgba(255,255,255,.55); transition:box-shadow .18s ease,transform .18s ease; } .org-card:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(3,50,100,.22), inset 0 1px 0 rgba(255,255,255,.6)} /* 卡片为链接（点击跳转到产品服务板块对应服务项；a 标签需重置默认样式） */ a.org-card{text-decoration:none;color:inherit;cursor:pointer} .org-card .cn{font-size:16.5px;font-weight:700;color:var(--blue-dark);letter-spacing:.5px;line-height:1.35} .org-card .en{font-family:var(--font-en);font-size:12px;font-weight:400;color:var(--muted);margin-top:5px;line-height:1.4} /* 综合管理部：底部通栏（2026-10-20 用户定，从右列挪到整块最下方） */ .org-dept{ margin-top:28px; background:var(--glass-band); /* 已去掉 backdrop-filter（渲染开销大），观感不变 */ border-radius:var(--card-r); padding:13px 20px;text-align:center; box-shadow:0 6px 18px rgba(3,50,100,.16), inset 0 1px 0 rgba(255,255,255,.45); } .org-dept .cn{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--blue-dark)} .org-dept .en{font-family:var(--font-en);font-size:10.5px;font-weight:400;margin-top:4px;color:var(--muted)} /* ===== 组织架构：桌面定值（小而美）===== 2026-10-19 01:00 起这套设定同时是平板的基础：平板（641–1024）不单独手调， 直接沿用下面这套值，仅用 zoom 整体缩小 */ .org-box{padding:38px 48px 34px} .org-ceo{padding:9px 20px} .org-ceo .role{font-size:23px;letter-spacing:1.5px} .org-ceo .cn{font-size:13.5px;margin-top:3px} .org-ceo .en{font-size:11px;margin-top:2px} .org-card{padding:12px 10px;min-height:56px} .org-card .cn{font-size:14px} .org-card .en{font-size:10.5px;margin-top:4px} /* 锚点跳转补偿：严格等于固定页眉的实际高度（logo 72 + 上下 11），避免板块标题被遮或露出上一屏 */ @media (max-width:900px){} @media (max-width:560px){} /* ===== 核心优势 ===== */ .advantage{padding:64px 0 76px} .adv-lead{ text-align:left;font-size:19px;font-weight:600;color:var(--blue-dark); line-height:1.8;letter-spacing:.5px;margin:14px 0 26px; } .adv-lead em{font-style:normal;color:var(--blue)} /* 卡片组的小标题：主色文字 + 延伸细线，做成一条分隔结构 */ /* 卡片组小标题：与「人才成长 · 人才寻访中心」小标题（.svc-cards-head）完全同款（2026-10-20 用户要求统一） */ .adv-group-head{display:flex;align-items:center;gap:14px;margin-bottom:24px} .adv-group-head .label{ padding-left:10px;border-left:3px solid var(--blue); font-size:15px;font-weight:700;color:var(--blue-dark);letter-spacing:1px;line-height:1.2;white-space:nowrap; } .adv-group-head .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(2,120,230,.22),rgba(2,120,230,0))} .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .adv-card{ background:#fff;border:1px solid var(--line);border-radius:var(--card-r); padding:24px 22px 26px;position:relative; box-shadow:0 6px 16px rgba(8,59,118,.05); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .adv-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(8,59,118,.10);border-color:#CFE2F7} .adv-card h4{ font-size:17px;font-weight:700;color:var(--blue-dark);letter-spacing:.5px; margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line); } .adv-card p{font-size:14px;line-height:1.9;color:var(--body);text-align:justify} .adv-card.wide{grid-column:span 2} /* ===== 响应式 ===== */ /* ===== 组织架构：平板/手机沿用桌面版式（用户 2026-10-18 要求），只等比缩小、不堆叠 ===== */ @media (max-width:1024px){ .adv-grid{grid-template-columns:repeat(2,1fr)} .adv-card.wide{grid-column:span 2} /* 结构不动：三个虚线卡片组并排（管理咨询 3 卡 / 人才成长 2 卡 / JFC 研究院 2 卡）+ 底部综合管理部通栏 */ .org-section{padding:12px 0 24px} /* 平板＝直接用电脑的设定，仅 zoom 整体缩小（用户 2026-10-19 01:00：不再单独手调平板字号。 .78：768 宽下三栏里「市场与消费者洞察研究室」等 11 字卡片仍能一行放下；手机 ≤640 在下面改回 zoom:1 并改为上下堆叠 */ .org-wrap{zoom:.78} } @media (max-width:900px){ .about{padding:48px 0 0} /* 平板保持左文右图（用户 2026-10-18 定），单列规则下移到 ≤640 */ .advantage{padding:48px 0 56px} .adv-lead{font-size:17px} } @media (max-width:640px){ /* 公司介绍：手机取消环绕改单列，仍按「第一段 → 图片 → 第二段」排列（用户 2026-10-18 要求） */ .intro-grid{display:flex;flex-direction:column;gap:26px} .intro-text-1{order:1} .intro-media{ order:2;float:none;width:100%;max-width:none;min-width:0;margin:0; } .intro-text-2{order:3} /* 组织架构不再全出血（用户 2026-10-18 反馈）：与容器 18px 留白一致，宽度都给内容 */ /* 核心优势：手机＝与平板完全一致（两列白卡，第 5 张通栏）—— 用户 2026-10-18 要求，原横滑卡片作废 */ .adv-grid{grid-template-columns:repeat(2,1fr);gap:12px} .adv-card{padding:16px 14px 18px} .adv-card h4{font-size:15.5px;margin-bottom:10px;padding-bottom:10px} /* 窄栏里两端对齐会出现大空隙，手机上改左对齐 */ .adv-card p{font-size:14px;line-height:1.85;text-align:left} .adv-card.wide{grid-column:span 2} /* 组织架构：手机用自己的一套字号（不用平板的 zoom 缩小），恢复 1:1 */ .org-wrap{zoom:1} .org-box{width:calc(100% - 36px);padding:16px 8px 14px;border-radius:12px} .org-ceo{padding:7px 10px} .org-ceo .role{font-size:16px;letter-spacing:1px} .org-ceo .cn{font-size:10.5px;margin-top:2px;letter-spacing:.3px} .org-ceo .en{font-size:8px;letter-spacing:.1px} /* 手机三组竖着排（横排三栏字会缩到看不清），每组内部卡片两列； 三张卡的那组最后一张通栏，避免出现半格空位 */ .org-grid{grid-template-columns:1fr;gap:12px;margin-top:13px} .org-panel{ display:grid;grid-template-columns:1fr 1fr;gap:7px; padding:9px 8px 10px;border-radius:10px;border-width:1.5px; } .org-panel-head{grid-column:1 / -1} .org-panel-head .cn{font-size:11px;letter-spacing:.8px} .org-panel-head .en{font-size:7.5px;letter-spacing:.3px;margin-top:2px} .org-panel > .org-card:last-child:nth-child(even){grid-column:1 / -1} .org-card{padding:6px 4px;min-height:38px;border-radius:8px} .org-card .cn{font-size:10.5px;letter-spacing:0;line-height:1.3} .org-card .en{font-size:7.5px;margin-top:2px;line-height:1.3} .org-dept{margin-top:12px;padding:9px 8px} .org-dept .cn{font-size:10.5px} .org-dept .en{font-size:7.5px;margin-top:2px} .intro p{font-size:15px} } /* 超窄手机（≤360，如 320/360 屏）：两列很挤，卡片中文再降 1px 保住一行（英文仍允许两行） */ /* ===== services-section.html ===== */ @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* ===== 字体（构建时内联 base64） ===== */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ /* ===== 预览外壳（非网站内容） ===== */ /* 锚点跳转补偿：严格等于固定页眉的实际高度（logo 72 + 上下 11），避免板块标题被遮或露出上一屏 */ @media (max-width:900px){} @media (max-width:560px){} /* ===== 板块：产品服务（整板块：三个服务纵向排布） ===== */ .services{padding:52px 0 64px} /* 服务与服务的间距（板块内分隔，仅新增，不改任何单项已定稿样式） */ .svc+.svc{margin-top:72px} /* 一级标题（全站规范：英文 eyebrow + 中文 32px + 蓝短线） */ /* ===== 二级标题（全站规范：中文 22px 深蓝 + 左蓝条 + 英文灰蓝） ===== */ /* 引子句：三处同规格（19px / 600 / 深蓝 / lh1.8）；不限宽，用满容器到右边界 */ /* ===== 占位框样式（人才寻访配图 / 研究院配图共用） ===== */ /* ===== JFC 管理思想实践领域（2026-10-19 八组定稿：连线取消只留圆点、右列镜像、hover 三联动）（照参考图结构） ===== 模型标题在卡外居中 → 浅蓝大卡内：左列 4 块「标签+条目」+ 中央图案 + 右列 3 块 */ .model-title{text-align:center;margin:0 0 18px} .model-title .en{ font-family:var(--font-en);font-size:11.5px;font-weight:600;color:var(--muted); letter-spacing:2.5px;text-transform:uppercase; } .model-title h4{font-size:20px;font-weight:700;color:var(--blue-dark);letter-spacing:2px;margin-top:6px} .model{ --ring:330px; /* 中央列宽 = 图案区宽度，想调只改这一个值 */ --k:1; /* 图案整体缩放系数：桌面 1，平板/手机缩小（见响应式断点）；只缩图案不缩文字 */ --col-gap:20px; /* 中央列与左右列的间距（收紧：两侧卡片更贴中央图案） */ background: /* ① 最内层：贴着圆环的一圈柔光（半径小、稍亮），把环"托"起来 */ radial-gradient(circle 240px at 50% 50%,rgba(2,120,230,.070) 0%,rgba(2,120,230,.030) 62%,rgba(2,120,230,0) 100%), /* ② 中层：以圆心为中心的放射性雾面，弥散到卡片大半（这是主要的"放射感"来源） */ radial-gradient(circle 480px at 50% 50%,rgba(2,120,230,.050) 0%,rgba(2,120,230,.026) 45%,rgba(2,120,230,.008) 78%,rgba(2,120,230,0) 100%), /* ③ 最外层：超大半径、极淡，一直化到卡片边角，彻底消除"到边界就断"的硬感 */ radial-gradient(circle 820px at 50% 50%,rgba(2,120,230,.028) 0%,rgba(2,120,230,.012) 55%,rgba(2,120,230,0) 100%), /* ④ 底色：改为近乎纯白的极浅底，让上面的放射雾成为唯一"光的方向" */ linear-gradient(180deg,#FCFDFF 0%,#F5F9FD 100%); border:1px solid var(--line);border-radius:16px; padding:16px 26px 18px; } /* 注：最大框（.model）不做 hover 浮起——它是承载整组的容器，浮起会带动整卡抖动 */ .model-grid{ display:grid;grid-template-columns:1fr calc(var(--ring) * var(--k)) 1fr; column-gap:var(--col-gap);align-items:stretch; } /* 左右列：块纵向撑开分布（左右块数不同也能顶底对齐，同参考图） gap 10→5 + 正文 margin-top 8→6 + 大框 padding 收紧：左右更紧凑，整框高度下降 */ .col{display:flex;flex-direction:column;justify-content:space-between;gap:5px;min-width:0} /* 块：标签 + 延伸细线（末端小圆点）+ 条目文字 左列：标签在左、细线向右延伸；右列：镜像（标签在右、细线向左延伸）—— 维持原样 正文一律靠左（不随块头镜像） */ .blk-head{display:flex;align-items:center;gap:12px} .col.right .blk-head{flex-direction:row-reverse} /* 手机端「点标签弹说明」用的隐藏开关（纯 CSS，无 JS）；桌面端只当普通元素，不影响排版 */ .model .pop{display:none} /* 弹层关闭键只给手机，桌面和平板隐藏（否则会在正文末尾露出一颗 × ） */ /* 弹层的全屏遮罩：桌面/平板一律隐藏，仅 ≤640 且有弹层打开时显示 */ .model .m-cards{display:none} /* 手机横滑卡片容器：仅 ≤640 且由 JS 搬入

后显示 */ /* ===== 横滑卡手动控件（2026-10-28 与英文版同步）===== ① 左右箭头：按「当前居中卡」翻上一张/下一张，到头禁用 ② 圆点：8 个，点击直达；当前卡对应的点拉长成蓝色小胶囊并上浮 ③ 鼠标拖拽：细指针设备可按住在卡片区左右拖（触屏本就是原生滑动，无需处理） ⚠️ 必须放在顶层（与英文版同构）：display:none 是全宽度的默认态， 若放进 ≤640 块，>640 桌面/平板没有隐藏规则，两只箭头会裸露在页面上（10-28 bug.png 实证）。 平板不带这套控件由 JS 保证：matchMedia ≤640 不匹配就永不加 .is-live */ .m-nav{display:none;align-items:center;justify-content:center;gap:10px;margin:12px 0 2px} .m-nav.is-live{display:flex} .m-arrow{ flex:0 0 auto;width:30px;height:30px;padding:0; display:inline-flex;align-items:center;justify-content:center; background:#fff;border:1px solid #CFE2F7;border-radius:50%;color:var(--blue); cursor:pointer; transition:border-color .18s ease,color .18s ease,opacity .18s ease,background .18s ease; } .m-arrow:hover{border-color:var(--blue);background:#F2F8FF} .m-arrow:disabled{opacity:.32;cursor:default;border-color:#DCE7F3;color:#8FA6BE;background:#fff} .m-arrow svg{display:block} .m-dots{display:flex;align-items:center;gap:2px} .m-dot{ width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:transform .2s ease; /* 选中圆点浮起的动画（2026-10-28） */ } .m-dot i{ display:block;width:7px;height:7px;border-radius:4px;background:#C6D8EC; transition:width .2s ease,background .2s ease; } .m-dot:hover i{background:#8FB6DC} .m-dot.on i{width:16px;background:var(--blue)} .m-dot.on{transform:translateY(-3px)} /* 选中态：当前圆点上浮（2026-10-28 用户要求） */ /* 键盘可达：焦点环只在键盘操作时出现（鼠标点不画框） */ .m-arrow:focus-visible,.m-dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* 鼠标拖拽（仅细指针设备）：拖的时候临时关掉 scroll-snap，否则会跟吸附打架 */ @media (hover:hover) and (pointer:fine){ .m-cards{cursor:grab} /* 拖拽时必须 instant：关掉 snap 吸附 + 关掉平滑，否则每帧赋值都排队动画、跟不上手 */ .m-cards.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto} } .tag{ display:inline-flex;align-items:center;gap:7px; /* 背景与中央「企业/顾问」大圆同款：左上柔光 + 首屏同款深蓝渐变 */ background: radial-gradient(circle at 32% 22%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 58%), linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); color:#fff; font-size:13px;font-weight:600;letter-spacing:.8px; padding:6px 13px;border-radius:8px;white-space:nowrap; border:1px solid rgba(255,255,255,.34); box-shadow:0 5px 14px rgba(4,38,79,.30); transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } /* 标签 hover 浮起（同手机端手感；深蓝底上边框用更亮的白，才看得出"变亮"） */ .tag:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(4,38,79,.34); border-color:rgba(255,255,255,.78); } /* ★ 划过小标题 ⇒ 整张卡片（标题 + 正文）一起浮起，移开一起回落（与划过小圆的状态完全一致） 卡片内的标题取消自身那 -3px，避免标题比正文多抬 3px、两者分离 */ .blk:hover{transform:translateY(-4px)} .blk:hover .tag{transform:none;box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .blk:hover p{font-weight:600} .tag svg{display:block;flex-shrink:0} /* 连线已取消：只保留末端 9px 蓝圆点，回缩贴在小标题旁 桌面/平板布局图：左列点在标题右侧、右列点在标题左侧（镜像）；≤1024 白卡版式：统一点在标题右侧 */ .tl{position:relative;width:0;height:0;flex:0 0 auto} .tl::after{ content:"";position:absolute;top:-4.5px;width:9px;height:9px; border-radius:50%;background:var(--blue); /* 圆点带一圈淡光晕，与中央图案的雾面呼应 */ box-shadow:0 0 0 3px rgba(2,120,230,.12),0 0 8px rgba(2,120,230,.30); } .col.left .tl::after{left:0} .col.right .tl::after{right:0} .blk p{font-size:13.5px;line-height:1.66;color:var(--body);text-align:left;margin-top:6px} /* ★ 鼠标划过小圆 ⇒ 对应卡片浮起，移开即取消（纯 CSS :has，无 JS） 平板＝桌面等比缩放，交互同样有效；手机档（≤640）横滑版式同样生效（2026-10-28 用户确认：划小圆⇒卡浮起为已验收行为，全宽保留） */ .blk{transition:transform .2s ease} .hub .sm{cursor:pointer} .model-grid:has(.sm[data-k="global"]:hover) .blk[data-key="全球"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="global"]:hover) .blk[data-key="全球"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="mech"]:hover) .blk[data-key="机制"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="mech"]:hover) .blk[data-key="机制"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="project"]:hover) .blk[data-key="项目"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="project"]:hover) .blk[data-key="项目"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="process"]:hover) .blk[data-key="流程"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="process"]:hover) .blk[data-key="流程"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="org"]:hover) .blk[data-key="组织"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="org"]:hover) .blk[data-key="组织"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="strategy"]:hover) .blk[data-key="战略"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="strategy"]:hover) .blk[data-key="战略"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="talent"]:hover) .blk[data-key="人才"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="talent"]:hover) .blk[data-key="人才"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .model-grid:has(.sm[data-k="coach"]:hover) .blk[data-key="教练"]{transform:translateY(-4px)} .model-grid:has(.sm[data-k="coach"]:hover) .blk[data-key="教练"] .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} /* 浮起时正文加粗（字重恢复上一版），颜色仍与实践领域正文一致（var(--body)） */ .model-grid:has(.sm[data-k="global"]:hover) .blk[data-key="全球"] p{font-weight:600} .model-grid:has(.sm[data-k="mech"]:hover) .blk[data-key="机制"] p{font-weight:600} .model-grid:has(.sm[data-k="project"]:hover) .blk[data-key="项目"] p{font-weight:600} .model-grid:has(.sm[data-k="process"]:hover) .blk[data-key="流程"] p{font-weight:600} .model-grid:has(.sm[data-k="org"]:hover) .blk[data-key="组织"] p{font-weight:600} .model-grid:has(.sm[data-k="strategy"]:hover) .blk[data-key="战略"] p{font-weight:600} .model-grid:has(.sm[data-k="talent"]:hover) .blk[data-key="人才"] p{font-weight:600} .model-grid:has(.sm[data-k="coach"]:hover) .blk[data-key="教练"] p{font-weight:600} /* ★ 划过小标题 ⇒ 对应中央小圆浮起（2026-10-28 用户要求：与「划过小圆 ⇒ 卡片浮起」反向联动； 2026-10-28 深夜放宽：桌面/平板/手机全宽生效，手机版式里小圆仍在，联动照常） 视觉参数与小圆自身 hover 完全一致：--lift -3px + 阴影加深 + 边框变蓝； 绑在 .blk:hover 上（划到卡片正文区同样联动，与 .blk:hover 卡片浮起同步发生）。 触屏 sticky-hover 说明：手机档点按标题卡会同时进入选中态（.blk.on 浮起 + .up 小圆浮起）， 与 hover 的视觉结果一致，粘住的 hover 不会产生额外变化 */ .model-grid:has(.blk[data-key="战略"]:hover) .hub .sm[data-k="strategy"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="全球"]:hover) .hub .sm[data-k="global"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="项目"]:hover) .hub .sm[data-k="project"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="流程"]:hover) .hub .sm[data-k="process"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="组织"]:hover) .hub .sm[data-k="org"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="机制"]:hover) .hub .sm[data-k="mech"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="人才"]:hover) .hub .sm[data-k="talent"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} .model-grid:has(.blk[data-key="教练"]:hover) .hub .sm[data-k="coach"]{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} /* 压在大圆上的三颗（.on 布局类）：hover 时保持「压住」的重投影（与 .sm.on:hover 同参数） */ .model-grid:has(.blk[data-key="战略"]:hover) .hub .sm.on[data-k="strategy"]{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:#A6D0F5} .model-grid:has(.blk[data-key="机制"]:hover) .hub .sm.on[data-k="mech"]{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:#A6D0F5} .model-grid:has(.blk[data-key="教练"]:hover) .hub .sm.on[data-k="coach"]{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:#A6D0F5} /* ===== 中央图案：交叠双圆「企业 × 顾问」＝ 全程陪伴，外围小圆＝实践领域关键词 ===== */ .hub{ position:relative;min-height:340px; width:var(--ring); margin-left:calc(var(--ring) * (var(--k) - 1) / 2); transform:scale(var(--k));transform-origin:center center; } /* 中央图案外框：五层「精工」层次（由外到内） ① 最外柔光晕（::after 的 box-shadow）② 外圈细实线（::after） ③ 中层疏虚线轨道（::before）④ 内圈细实线（inset ring）⑤ 环内极淡雾面（本体 radial-gradient） —— 三层轨道用不同粗细 / 疏密 / 透明度拉开节奏，形成纵深 */ .hub .ring{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:calc(var(--ring) - 30px);height:calc(var(--ring) - 30px); border-radius:50%; /* ⑤ 环内雾面：中心透明 → 靠近环线处极淡蓝，像薄雾托住轨道 （最外一档 .085 → 透明，让雾面在环线处不"截断"，继续向外淡出） */ background:radial-gradient(circle,rgba(2,120,230,0) 74%,rgba(2,120,230,.040) 88%,rgba(2,120,230,.080) 96%,rgba(2,120,230,0) 100%); /* ④ 内圈细实线（贴在本体边缘，比外圈更淡，形成"双实线夹虚线"的层级） */ box-shadow: 0 0 0 1px rgba(2,120,230,.20) inset, 0 0 0 9px rgba(2,120,230,.026) inset; } /* ③ 中层疏虚线：细、疏、半透，与外实线形成节奏差，读起来像一圈"刻度轨道" */ .hub .ring::before{ content:"";position:absolute;top:11px;left:11px;right:11px;bottom:11px; border:1px dashed rgba(2,120,230,.30);border-radius:50%; } /* ①② 外层：较亮的细实线 + 外圈柔光晕 + 外圈更淡的一线拖尾 ⇒ 三层纵深 注：外扩量刻意收在 7px 内 —— 实体线最外沿 r=164px < hub 半宽 165px，不会侵占左右列 消割裂感：外圈实线进一步调淡（.20 → .16），并让【柔光晕大幅外扩】—— 三档渐远的光晕（36 / 70 / 120px）把边界"化开"到很远， 最终与整卡背景的放射雾面接上，看不出环在哪儿"结束" */ .hub .ring::after{ content:"";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px; border:1px solid rgba(2,120,230,.16);border-radius:50%; box-shadow: 0 0 0 3px rgba(2,120,230,.045), 0 0 36px rgba(2,120,230,.13), 0 0 70px rgba(2,120,230,.075), 0 0 120px rgba(2,120,230,.042); } /* 两只大圆：企业（左偏上）× 顾问（右偏下），互相交叠即"陪伴" 底色＝首屏同款深蓝渐变 + 白字 ⇒ 中央图案有视觉重点（用户要求） */ .hub .big{ position:absolute;top:50%;left:50%; width:138px;height:138px;border-radius:50%; background: radial-gradient(circle at 32% 22%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 58%), linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); border:1px solid rgba(255,255,255,.34); display:flex;align-items:center;justify-content:center; font-size:20px;font-weight:700;color:#fff;letter-spacing:3px;text-indent:3px; box-shadow:0 16px 32px rgba(4,38,79,.34),inset 0 1px 0 rgba(255,255,255,.24); /* 居中位移与浮起分层：--px/--py 承载居中与错位偏移，--lift 只承载 hover 上浮 ⇒ hover 时不会覆盖掉居中定位（与小圆同一套分层方案） */ --px:0px;--py:0px;--lift:0px; transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py) + var(--lift))); transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } /* 大圆 hover 浮起：只改 --lift，圆心位置保持不变 */ .hub .big:hover{ --lift:-4px; box-shadow:0 22px 40px rgba(4,38,79,.40),inset 0 1px 0 rgba(255,255,255,.28); border-color:rgba(255,255,255,.62); } .hub .c1{--px:-43px;--py:-31px} /* 顾问圆比企业圆小一号（用户要求）；圆心距 106px < 半径和 130 ⇒ 交叠约 24px（用户要求交叠多一些） */ .hub .c2{ width:122px;height:122px;font-size:18px;letter-spacing:3px;text-indent:3px; --px:43px;--py:31px; } /* 桥接胶囊：骑在两圆交叠处 —— 全程陪伴 */ /* 桥接标签「全程陪伴」：骑在两圆交叠中心 与大圆同族：同款深蓝渐变底 + 左上柔光 + 白字 描边提亮为"银边"：1.5px 银白渐显 + 内嵌高光 + 外圈极淡银晕 ⇒ 精致镶嵌感 */ .hub .bridge{ position:absolute;top:50%;left:50%;z-index:2; /* 居中位移与浮起分层：--bx/--by 承载居中，--lift 只承载 hover 上浮 */ --bx:0px;--by:0px;--lift:0px; transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by) + var(--lift))); background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 60%), linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); /* 银边：描边本身用半透明白，外侧再叠一圈更亮的银晕 */ border:1.5px solid rgba(255,255,255,.72);color:#fff; font-size:12.5px;font-weight:600;letter-spacing:1.5px;text-indent:1.5px;white-space:nowrap; padding:6px 15px;border-radius:999px; box-shadow: 0 0 0 1px rgba(214,232,250,.42), /* 银边外沿：极淡冷白，勾出金属感 */ 0 0 5px rgba(198,224,250,.22), /* 银晕：柔光外溢（收敛） */ 0 8px 20px rgba(4,38,79,.34), /* 深蓝投影，保持同族 */ inset 0 1px 0 rgba(255,255,255,.72), /* 顶部内高光 */ inset 0 -1px 0 rgba(255,255,255,.22); /* 底部反光，增强立体 */ transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } /* 全程陪伴 hover 浮起：只改 --lift，居中位置不变；银边进一步提亮 */ .hub .bridge:hover{ --lift:-4px; border-color:rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(232,243,255,.70), 0 0 9px rgba(206,230,252,.42), 0 14px 30px rgba(4,38,79,.40), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(255,255,255,.28); } /* ★ 划过「全程陪伴」⇒ 企业 / 顾问两只大圆跟着一起浮起，移开一起回落 （参数与各自 hover 完全一致：--lift -4px + 阴影加深 + 边框提亮；只改 --lift，圆心坐标不动） */ .hub:has(.bridge:hover) .big{ --lift:-4px; box-shadow:0 22px 40px rgba(4,38,79,.40),inset 0 1px 0 rgba(255,255,255,.28); border-color:rgba(255,255,255,.62); } /* 小圆：绕大圆散落（位置＝相对圆心的位移 + scale，可逐个微调） 关键词 8 枚：战略 / 组织 / 人才 / 教练 / 流程 / 项目 / 机制 / 全球 层级：小圆一律在两只大圆【之上】——3 颗主动压在大圆上、其余 5 颗环内错落，彼此不重叠 压上去的 3 颗与大圆内文字保持净距（真实字盒含 3px 字距已核算）⇒ 压得住圆面、绝不挡字 */ .hub .sm{ position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:4; width:42px;height:42px;border-radius:50%; background:radial-gradient(circle at 38% 30%,#FFFFFF 0%,#EDF5FD 55%,#DCEBFB 100%); /* 描边取与"连接线圆点"同色系的蓝 ⇒ 环内元素与两侧连线读作同一族，不再是两个世界 */ border:1px solid #8CBCEC;color:var(--blue-dark); font-size:13.5px;font-weight:600;letter-spacing:0; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 10px rgba(8,59,118,.10); /* 位移与缩放全由 CSS 变量驱动 ⇒ hover 加 translateY 时不会覆盖行内的 scale */ --dx:0px;--dy:0px;--s:1;--lift:0px; transform:translate(var(--dx),calc(var(--dy) + var(--lift))) scale(var(--s)); transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } /* 小圆 hover 浮起：只改 --lift，缩放与坐标保持不变，边框变蓝加深 */ .hub .sm:hover{ --lift:-3px; box-shadow:0 10px 20px rgba(8,59,118,.18); border-color:#6FAEE9; } .hub .sm.on:hover{ box-shadow:0 12px 24px rgba(4,38,79,.34); border-color:#A6D0F5; } /* 压在大圆上的三颗：描边提亮 + 投影加重，让"压上去"的层次看得出来 */ .hub .sm.on{ background:radial-gradient(circle at 36% 28%,#FFFFFF 0%,#F1F7FE 55%,#E2EFFC 100%); border-color:#7FB6EC; box-shadow:0 6px 16px rgba(4,38,79,.30); } /* 大圆文字单独一层，压在大圆与小圆之上（圆可以叠，字永远露出来） */ .hub .big{overflow:visible} .hub .big span{position:relative;z-index:6} /* ================================================================ 服务二 · 人才寻访（已定稿样式，原样并入） ================================================================ */ /* 左文环绕右图（2026-10-19 用户定）：文字比图高时，高出的部分排到图片下方， 不把整块撑到与文字同高；图片按宽度撑满、高度等比，永不变形、永不裁切。 flow-root＝让容器含住浮动图，图片比文字高时也不会溢出到下方卡片上 */ .talent-grid{ display:flow-root; margin-top:26px; } .talent-media{ float:right; width:36%;max-width:384px;min-width:220px; margin:0 0 20px 32px; } /* 2026-10-23 用户定：图与正文等高 ⇒ 不再锁 4:3，比例由图片文件自己带（1.94:1，按 1132 容器实测平衡点裁切） */ .talent-media img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--card-r)} .talent-text p{ font-size:15.5px;line-height:2;color:var(--body); text-align:justify;text-indent:2em;margin-bottom:12px; } .talent-text p:last-child{margin-bottom:0} /* 卡片组小标题（2026-10-20：人才成长板块用，卡片组＝人才寻访中心的业务介绍） */ .svc-cards-head{display:flex;align-items:center;gap:14px;margin:34px 0 14px} .svc-cards-head .cn{padding-left:10px;border-left:3px solid var(--blue);font-size:15px;font-weight:700;color:var(--blue-dark);letter-spacing:1px;line-height:1.2} .svc-cards-head .en{font-family:var(--font-en);font-size:11px;letter-spacing:2px;color:#41678F} .svc-cards-head .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(2,120,230,.22),rgba(2,120,230,0))} .talent-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px; } .t-card{ background:#fff;border:1px solid var(--line);border-radius:var(--card-r); padding:22px 20px 24px;box-shadow:0 6px 16px rgba(8,59,118,.05); transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; } .t-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(8,59,118,.10);border-color:#CFE2F7} .t-card .t-head{ display:flex;align-items:center;gap:10px; padding-bottom:12px;margin-bottom:12px; border-bottom:1px solid var(--line); } .t-card .ico{ width:34px;height:34px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--blue); background:radial-gradient(circle at 36% 28%,#FFFFFF 0%,#EDF5FD 55%,#DCEBFB 100%); border:1px solid #C7DFF7; } .t-card h4{font-size:17px;font-weight:700;color:var(--blue-dark);letter-spacing:.5px} .t-card p{font-size:13.5px;line-height:1.85;color:var(--body);text-align:left} /* ================================================================ 服务三 · JFC 研究院（已定稿样式，原样并入） ================================================================ */ /* 左文环绕右图（同人才寻访）：文字比图高时，高出的部分排到图片下方 */ .research-grid{ display:flow-root; margin-top:26px; } .research-media{ float:right; width:36%;max-width:384px;min-width:220px; margin:0 0 20px 32px; } /* 2026-10-23 用户定：图与正文等高 ⇒ 不锁 4:3，比例由图片文件自带（最终比例按成品副本实测平衡点裁切） */ .research-media img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--card-r)} .research-text p{ font-size:15.5px;line-height:2;color:var(--body); text-align:justify;text-indent:2em;margin-bottom:12px; } .research-text p:last-child{margin-bottom:0} .research-text p b{font-weight:700;color:var(--blue-dark)} /* ===== 响应式（三处单项已定稿断点，原样并入） ===== */ @media (max-width:1024px){ /* 板块底色：浅蓝渐变带（仅平板/手机，桌面保持白底定稿），打破满屏白底的单调 */ .services{background:linear-gradient(180deg,#F7FAFE 0%,#F1F7FD 100%)} /* —— 管理咨询（平板 2026-10-19 定）：保留电脑同款布局图，只缩图案 + 左右文字压小一档 圆随屏宽放大一档（.88），避免大圆相对两侧文字"显小"；圆/字比 ≈21x（桌面 22x） */ .model{--k:.88;padding:18px 18px 20px} .blk p{font-size:12.5px;line-height:1.62;margin-top:6px} .tag{font-size:12px;padding:5px 10px;letter-spacing:.6px} .tag svg{width:14px;height:14px} .blk-head{gap:9px} /* —— 人才寻访 / JFC 研究院：左文环绕右图保持（用户 2026-10-18 定，平板不改单列） —— */ .talent-media,.research-media{width:38%;max-width:370px;margin-left:26px} /* 人才寻访优势卡：平板 3 张排一行 */ .talent-cards{grid-template-columns:repeat(3,1fr);gap:14px} .svc+.svc{margin-top:56px} } /* 小尺寸平板（641–900，含 iPad 竖屏 768）：图案再小一档，否则左右文字列只剩一百多像素 */ @media (max-width:900px){ .model{--k:.78;padding:16px 12px 18px} .model-grid{--col-gap:12px} .blk p{font-size:12px;line-height:1.6} } /* 特殊档（10-19 八组改版定稿，勿归并标准五档）：再窄两档各退一步：保住列宽，避免正文被挤成四行 */ @media (max-width:800px){.model{--k:.70}} @media (max-width:700px){.model{--k:.64}} @media (max-width:640px){ .services{padding:44px 0 56px} .svc+.svc{margin-top:48px} /* —— 管理咨询（手机 2026-10-20 定稿）：八标题分两行（上行＝业务线 4 张、下行＝职能线 4 张）， 大圆放大居中（直径＝大框宽度六成），整图下方横滑卡片；弹层 m-pop 已作废 */ .model{--k:1.05;padding:14px 10px 16px} /* 2026-10-20 手机端改版（用户定）： 八个小标题分两行 —— 圆上方一行＝业务线，圆下方一行＝职能线；中央大圆放大居中 */ .model-grid{ --col-gap:6px;row-gap:14px; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto auto; } /* 两列改 display:contents ⇒ 八块 + 圆直接进网格显式定位 */ .col{display:contents} /* 圆上方一行（业务线）：战略 · 全球 · 项目 · 流程 */ .blk[data-key="战略"]{grid-area:1 / 1} .blk[data-key="全球"]{grid-area:1 / 2} .blk[data-key="项目"]{grid-area:1 / 3} .blk[data-key="流程"]{grid-area:1 / 4} /* 圆下方一行（职能线）：组织 · 机制 · 人才 · 教练 */ .blk[data-key="组织"]{grid-area:3 / 1} .blk[data-key="机制"]{grid-area:3 / 2} .blk[data-key="人才"]{grid-area:3 / 3} .blk[data-key="教练"]{grid-area:3 / 4} /* 标签框填满格子、文字居中 ⇒ 同一行的框宽高一致 标题与圆点改竖排：上行卡「标题在上、圆点在下」，下行卡反过来（点始终朝着圈） —— .col.left/.col.right 各是三个类，这里也用同权重的双列选择器压掉桌面端 row-reverse */ .blk{display:flex} .col.left .blk-head,.col.right .blk-head{width:100%;flex-direction:column;align-items:center;gap:6px} .tag{flex:1;width:100%;justify-content:center;text-align:center} /* 手机端正文走横滑卡；2026-10-28 深夜起 hover 交互恢复（用户要求）： ① 划标题卡 ⇒ 卡自身浮起（-4px + 亮边重投影，与选中态 .blk.on 同参，移开回落） + 对应中央小圆浮起（顶层 :has(.blk:hover) 反向联动段，全宽生效） —— 手机档 .blk 里只有标题卡 ⇒ .tag:hover 与 .blk:hover 等价，标题不再另抬 -3px； ② 划小圆 ⇒ 卡片浮起（顶层正向联动全宽生效，2026-10-28 用户确认为已验收行为） 触屏 sticky-hover：点按标题卡同时进选中态（.blk.on 同参），粘住的 hover 无额外变化 */ .blk{transition:transform .2s ease} .tag{transition:box-shadow .2s ease,border-color .2s ease} .tag:hover, .blk:hover .tag{ transform:none; box-shadow:0 12px 24px rgba(4,38,79,.34); border-color:rgba(255,255,255,.78); } .blk:hover{transform:translateY(-4px)} /* 划小圆 ⇒ 卡片浮起：顶层正向联动规则全宽生效（含手机档，2026-10-28 用户确认为已验收行为， 勿再按 10-19「划小圆不带卡片」旧口径中性化） */ /* 中央图案：放大到「大框宽度的六成」并居中 transform:scale 不吃布局 ⇒ 直接把盒子高度设成 330*--k（正好等于圆的视觉直径）， 上下不再需要负外边距；宽度撑满整行只为取中（子元素仍按 --ring 定位，圆心始终在盒子中心） */ .hub{ grid-area:2 / 1 / 3 / 5; justify-self:center; width:100%; height:calc(330px * var(--k)); min-height:0; margin:0; } .model-title{text-align:center;margin:0 0 16px} .model-title .en{font-size:10px;letter-spacing:2px} .model-title h4{font-size:16px;letter-spacing:1.5px;margin-top:4px} /* 连线圆点找回（用户 10:55 要求）：贴在标题卡靠圈的一侧、水平居中 —— 上行四块点在卡下方，下行四块点在卡上方（见 .blk-head 的 column-reverse） */ .tl{display:block} .col.left .tl::after,.col.right .tl::after{left:-4.5px;right:auto;top:0} .blk:is([data-key="组织"],[data-key="机制"],[data-key="人才"],[data-key="教练"]) .blk-head{flex-direction:column-reverse} .blk:is([data-key="组织"],[data-key="机制"],[data-key="人才"],[data-key="教练"]) .tl::after{top:-9px} .tag{ /* 2026-10-28：9.5px→12px、图标 9→11（bug.png 反馈标题太小）；放不下自动折两行（white-space:normal） */ font-size:12px;padding:6px 5px;gap:5px; letter-spacing:0;line-height:1.4;border-radius:6px; white-space:normal; } .tag svg{width:11px;height:11px} /* 手机端（2026-10-19 定）：弹层取消 ⇒ 正文搬到图形下方横滑卡片

由 JS 原地搬入 .m-cards（文案仍单源）；点上方标题卡或中央小圆 ⇒ 对应卡片滑入视野并高亮 */ .model{position:relative} .blk p{display:none} /* 搬入卡片前先藏住，避免在格子里闪现 */ .tag{cursor:pointer;-webkit-tap-highlight-color:transparent} /* —— 选中态浮起（2026-10-28 用户要求，与英文版同步）—— ① 当前选中的卡 ⇒ 对应小标题卡浮起（参数与 hover 浮起一致）+ 控件圆点上浮 3px（见 m-nav 段） ② 点小标题 ⇒ 跳到对应卡（与点小圆同效）；小标题随选中态浮起，对应中央小圆同步浮起 小圆用 .up 标选中：.on 已被「压在大圆上」的布局类占用，不能复用（见中央图案注释）； 非选中态靠 JS 在 setActive 里统一摘掉，不留残影 */ .blk.on{transform:translateY(-4px)} .blk.on .tag{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:rgba(255,255,255,.78)} .hub .sm.up{--lift:-3px;box-shadow:0 10px 20px rgba(8,59,118,.18);border-color:#6FAEE9} /* 压在大圆上的三颗（布局类 .on）选中时保持「压住」的重投影，不被 .up 的轻投影盖掉 */ .hub .sm.on.up{box-shadow:0 12px 24px rgba(4,38,79,.34);border-color:#A6D0F5} .model .m-cards{ display:flex;gap:10px;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch; margin-top:14px;padding:2px 2px 6px; scrollbar-width:none; } .m-cards::-webkit-scrollbar{display:none} .m-card{ flex:0 0 75%;scroll-snap-align:center; /* 2026-10-28：82%→75%（bug.png 反馈内容卡太宽），右侧多露下一张 */ background:#fff;border:1px solid #CFE2F7;border-radius:12px; padding:13px 15px 14px; box-shadow:0 8px 20px rgba(8,59,118,.08); transition:border-color .2s ease,box-shadow .2s ease; } .m-card.on{border-color:var(--blue);box-shadow:0 10px 24px rgba(2,120,230,.16)} .m-card p{ display:block;margin:0; font-size:13px;line-height:1.9;letter-spacing:0; color:var(--body);text-align:left;text-indent:0;white-space:normal; } /* 卡片小标题：图标（沿用八个标签的同一枚 SVG，JS 克隆进来）+ 标题 */ .m-card-hd{ display:flex;align-items:center;gap:8px; padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line); font-size:13px;font-weight:700;color:var(--blue-dark);letter-spacing:.5px; } .m-card-ico{ flex:0 0 auto;width:22px;height:22px;border-radius:6px; display:inline-flex;align-items:center;justify-content:center;color:#fff; background: radial-gradient(circle at 32% 22%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 58%), linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); box-shadow:0 3px 8px rgba(4,38,79,.24); } .m-card-ico svg{width:12px;height:12px;display:block} /* —— 人才寻访 / 研究院：手机改单列（图在上、正文在下；DOM 里图本就排在最前） —— */ .talent-grid,.research-grid{display:flex;flex-direction:column;gap:20px} .talent-media,.research-media{float:none;width:100%;max-width:none;min-width:0;margin:0} /* 优势卡 ×3：横滑（纯 CSS scroll-snap） */ .talent-cards{ grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:76%;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory; padding:2px 2px 10px;scrollbar-width:none; } .talent-cards::-webkit-scrollbar{display:none} .t-card{scroll-snap-align:center} } /* 手机端「大圆直径＝大框宽度六成」的缩放分档：k = 0.6 × (屏宽 − 36) ÷ 330 （scale 只吃数字不吃长度，按常见屏宽逐档逼近六成；越窄的断点写在后面覆盖前面的值） 特殊档（10-19 手机端重设计定稿，实测 390/375/320 无横向溢出；10-24 复核非旧需求残留，勿归并） */ @media (max-width:560px){.model{--k:.95}} @media (max-width:480px){.model{--k:.805}} @media (max-width:430px){.model{--k:.715}} @media (max-width:414px){.model{--k:.685}} @media (max-width:390px){.model{--k:.643}} @media (max-width:375px){.model{--k:.616}} @media (max-width:360px){.model{--k:.589}} @media (max-width:320px){.model{--k:.515}} /* ===== cases-new-section.html ===== */ @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* ===== 字体（构建时内联 base64） ===== */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ /* ===== 预览外壳（非网站内容） ===== */ /* ===== 板块：案例作品（新需求独立稿，与现有 cases-section 并行，未合入） ===== */ .cns{padding:52px 0 64px} /* ===== 数据条（自原案例板块搬入；同名同值，合并时即同一块搬家） ===== */ .stats{ margin-top:30px; background:linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); border-radius:16px; padding:30px 26px; display:grid;grid-template-columns:repeat(4,1fr);gap:18px; position:relative;overflow:hidden; } /* 左上柔光（与首屏/管理咨询大圆同族） */ .stats::before{ content:"";position:absolute;top:-40%;left:-8%;width:60%;height:180%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 60%); pointer-events:none; } .stat{text-align:center;position:relative} .stat .num{ font-family:var(--font-en);font-size:34px;font-weight:700;color:#fff;letter-spacing:.5px; } .stat .num .unit{font-size:18px;font-weight:600;margin-left:2px} .stat .lab{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:6px;letter-spacing:.5px} /* 新稿数据条 3 格：改 3 列撑满（.cns 作用域隔离，不影响原板块 4 格同名规则；2026-10-26 用户定） */ .cns .stats{grid-template-columns:repeat(3,minmax(0,1fr))} /* ===== 二级标题（与全站 svc-head 同款：中文 22/700 深蓝 + 左 4px 蓝条 + 英文 12 灰蓝） ===== */ .cns-svc{margin:56px 0 20px} /* 紧跟板块大标题的第一个二级标题收间距 */ .cns-svc--first{margin-top:36px} .cns-svc--first+.stats{margin-top:8px} .cns-svc h3{ font-size:22px;font-weight:700;color:var(--blue-dark);letter-spacing:1.5px; position:relative;padding-left:16px; } .cns-svc h3::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:20px;background:var(--blue);border-radius:2px; } .cns-svc .en{ font-family:var(--font-en);font-size:12px;font-weight:600;color:var(--muted); letter-spacing:2px;text-transform:uppercase;margin-top:6px;padding-left:16px; } .cns-svc--flush{margin-bottom:0} /* 引言（与各板块副标题下引言同款：19/600 深蓝，em 主色） */ .cns-lead{ font-size:19px;font-weight:600;color:var(--blue-dark); line-height:1.8;letter-spacing:.5px; margin-top:14px; } /* em 用主色强调、去斜体：全板块通用（标题 h3、引言等都吃这条） */ .cns em{font-style:normal;color:var(--blue)} /* ===== 深蓝大框卡（页脚同款样式：圆角 + 玻璃高光 + 四层装饰；留在容器内，宽度随容器） ===== */ .cns-band{ margin-top:26px; border-radius:16px; background:linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); padding:20px 0 24px; position:relative;overflow:hidden; } /* 顶部玻璃高光线（页脚同参数） */ .cns-band::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%); } .cns-band .container{position:relative;z-index:1} /* 装饰层（页脚同参数，纯 CSS） */ .cns-deco-aur{position:absolute;right:-180px;top:-260px;width:820px;height:820px;border-radius:50%; background:radial-gradient(circle,rgba(80,170,255,.20) 0%,transparent 66%);pointer-events:none} .cns-deco-glow{position:absolute;left:-180px;bottom:-220px;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(61,155,240,.40) 0%,transparent 68%);pointer-events:none} .cns-deco-grid{position:absolute;right:0;top:0;width:54%;height:100%; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%); pointer-events:none} .cns-deco-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10);pointer-events:none} .cns-deco-ring.r1{width:940px;height:940px;right:-300px;bottom:-470px} .cns-deco-ring.r2{width:700px;height:700px;right:-180px;bottom:-350px;border-color:rgba(255,255,255,.16)} .cns-deco-ring.r3{width:460px;height:460px;right:-60px;bottom:-230px;border-color:rgba(255,255,255,.22)} /* 左右分栏（电脑/平板）：左侧行业胶囊 3×3 + 右侧「行业名 + 公司卡」 两栏等高拉伸：左栏 3 行胶囊均分高度，避免胶囊上下留空 */ .cns-split{display:flex;gap:32px;align-items:stretch;margin-top:16px} /* 行业导航（电脑/平板＝左栏 3×3 胶囊；手机＝左栏竖排，见底部媒体查询） */ .cns-tabs{ flex:0 0 45%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr;gap:10px 12px;align-content:stretch;padding:2px; } .cns-tab{ cursor:pointer;white-space:nowrap; display:flex;align-items:center;justify-content:center;gap:7px;width:100%; font-family:var(--font-cn);font-size:13px;font-weight:600;letter-spacing:.5px; color:rgba(255,255,255,.92); background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30); border-radius:20px;padding:7px 8px; transition:background .2s ease,color .2s ease,border-color .2s ease; } .cns-ico{width:15px;height:15px;flex-shrink:0} .cns-tab:hover{background:rgba(255,255,255,.22)} .cns-tab.active{background:#fff;color:var(--blue-dark);border-color:#fff} /* 单卡舞台：行业名一行（中文大字 + 英文 eyebrow 在右侧），居中于公司卡上方 */ .cns-stage{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px} .cns-stage-head{width:100%;max-width:520px;display:flex;align-items:baseline;justify-content:center;gap:12px;text-align:center} .cns-stage-cn{font-size:32px;font-weight:700;color:#fff;letter-spacing:2px;line-height:1.25;white-space:nowrap} .cns-stage-en{font-family:var(--font-pjs);font-size:12px;font-weight:600;letter-spacing:3px; text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.4;white-space:nowrap} /* 公司卡：只留一张（9 张里当前行业那张，其余隐藏） 桌面＝横排紧凑卡：logo 框固定 150px 居左，文字在右与 logo 同行；视觉重心在文字 */ .cns-grid{width:100%;max-width:520px;min-width:0;display:block} .cns-card{ background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.55);border-radius:var(--card-r); display:flex;align-items:center;gap:18px; width:100%;padding:15px 20px;min-width:0; box-shadow:0 10px 26px rgba(4,38,79,.18); transition:box-shadow .2s ease,transform .2s ease; } .cns-card.is-off{display:none} .cns-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(4,38,79,.30)} .cns-name{ font-size:15.5px;font-weight:700;color:var(--blue-dark);letter-spacing:.5px; line-height:1.4; } /* 公司名下的装饰：渐隐横线（全站卡片组小标题同族渐变，白底上起点略加深） */ .cns-name::after{ content:"";display:block;height:1px; background:linear-gradient(90deg,rgba(2,120,230,.45),rgba(2,120,230,0)); margin-top:8px; } /* logo 版卡头：单个框框（与 logo 墙 .logo-cell 同款：白底 + 细边 + 圆角 10） 九框统一 150px（2026-10-27 用户定，勿改回铺满）；视觉重心放在卡内文字：logo 框小、字大且深。 糊化（2026-10-27 截图法定稿）：卡头嵌的是「糊图」——从 CSS blur 页面上截下来的 浏览器真实渲染（tools/make_card_logo_blur.py），清晰原图不进页面，右键拿不到。 截图＝白底内框最大矩形（克隆时去边框，无弧线残留）；页面端 padding:0 + 图铺满 内框（最小边距），截图与摆放几何 1:1 对应；平板/手机只是整框等比缩小 */ .cns-logo{ background:#fff;border:1px solid var(--line);border-radius:10px; height:52px;padding:0;margin:0;width:150px;flex:0 0 150px; display:flex;align-items:center;justify-content:center;overflow:hidden; } .cns-logo img{ width:100%;height:100%;object-fit:fill;display:block; } /* 卡内文字：卡的主体信息，字号/字重/颜色都比 logo 强；与 logo 同行，用竖线分隔 */ .cns-fact{ flex:1;min-width:0; font-size:15px;font-weight:500;color:#2A5282;line-height:1.6;letter-spacing:.3px; white-space:nowrap; border-left:1px solid rgba(2,120,230,.28);padding-left:18px; } .cns-fact::before{display:none} /* ===== 响应式 ===== */ @media (max-width:1024px){ /* 平板：与电脑同构（左 3×3 胶囊 + 右横排卡）；胶囊用自然高度、列内居中（不随右栏拉伸长高） */ .cns-split{gap:24px;margin-top:16px} .cns-tabs{grid-auto-rows:auto;align-content:center} .cns-tab{font-size:clamp(10px,1.55vw,12px);padding:5px 4px;gap:5px} .cns-ico{width:clamp(10px,1.3vw,13px);height:clamp(10px,1.3vw,13px)} .cns-stage{max-width:520px;gap:11px} .cns-stage-head{max-width:460px;gap:clamp(8px,1.3vw,10px)} .cns-grid{max-width:460px} .cns-stage-cn{font-size:26px} .cns-stage-en{font-size:clamp(8.5px,1.2vw,11px);letter-spacing:clamp(1px,.2vw,2.5px)} /* 平板公司卡与电脑同构（横排：logo 左、文字右）。宽度不够＝先缩卡宽（卡随栏宽流动）， 卡宽顶到字后＝缩字（字号/框宽/内边距全部随 vw 缩放，文字始终一行） */ .cns-card{gap:clamp(8px,1.2vw,12px);padding:clamp(8px,1.2vw,12px) clamp(10px,1.55vw,16px)} .cns-logo{flex:0 0 auto;width:clamp(76px,11.5vw,128px);height:clamp(36px,4.8vw,46px)} .cns-fact{font-size:clamp(8.5px,1.32vw,13px);padding-left:clamp(8px,1.2vw,12px)} } /* 平板最底边（641~660）：clamp 全部触底仍差几 px，再收一档 */ @media (min-width:641px) and (max-width:660px){ .cns-tab{font-size:9.5px;padding:4px} .cns-card{gap:6px;padding:8px 9px} .cns-logo{width:70px} .cns-fact{padding-left:6px} } @media (max-width:640px){ .cns{padding:44px 0 56px} .cns-svc{margin-top:44px} .cns-svc h3{font-size:20px} .cns-lead{font-size:16px} .cns-band{padding:22px 0 26px;margin-top:20px} /* 手机：左侧行业竖排胶囊（绝对定位 → 高度严格等于右栏「行业名+公司卡」，超出上下滑动），右侧＝行业名 + 公司卡 */ .cns-split{display:block;position:relative;margin-top:0} .cns-tabs{position:absolute;left:0;top:0;bottom:0;width:100px; display:flex;flex-direction:column;gap:4px;padding:0 4px 0 0; overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent} .cns-tabs::-webkit-scrollbar{width:3px} .cns-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:2px} .cns-tabs::-webkit-scrollbar-track{background:transparent} .cns-tab{width:100%;flex:0 0 auto;justify-content:flex-start;text-align:left; font-size:11px;padding:5px 8px;letter-spacing:0;gap:5px;border-radius:14px} .cns-ico{width:11px;height:11px} .cns-stage{flex:1;min-width:0;max-width:none;margin-left:112px;align-items:stretch;justify-content:flex-start;gap:8px} /* 手机：行业名回上下堆叠并居中（横排放不下长英文）；align-items:center 抵消基础样式的 baseline 左对齐 */ .cns-stage-head{max-width:none;flex-direction:column;align-items:center;gap:3px} .cns-stage-en{font-size:9.5px;letter-spacing:2px} .cns-stage-cn{font-size:18px;letter-spacing:.5px;line-height:1.2} .cns-grid{max-width:none} .cns-card{display:block;padding:12px;border-radius:12px;box-shadow:0 8px 20px rgba(4,38,79,.16)} .cns-logo{height:32px;width:88px;flex:none} .cns-fact{font-size:10.5px;line-height:1.55;margin-top:9px;border-left:0;padding-left:0;letter-spacing:0} .cns-fact::before{display:block;content:"";height:1px; background:linear-gradient(90deg,rgba(2,120,230,.45),rgba(2,120,230,0));margin-bottom:7px} /* 数据条：与电脑端一致＝四格一行（原板块同款规则搬入） */ .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:18px 10px} .stat{padding:0;border:0;min-width:0} .stat .num{font-size:clamp(16px,5vw,21px);letter-spacing:0} .stat .num .unit{font-size:clamp(10px,3vw,12.5px);margin-left:1px} .stat .lab{font-size:clamp(9.5px,2.75vw,11px);line-height:1.4;margin-top:5px;letter-spacing:0} } /* ===== contact-section.html ===== */ @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* ===== 字体（构建时内联 base64） ===== */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ /* ===== 预览外壳（非网站内容） ===== */ /* 锚点跳转补偿：严格等于固定页眉的实际高度（logo 72 + 上下 11），避免板块标题被遮或露出上一屏 */ @media (max-width:900px){} @media (max-width:560px){} /* ===== 板块：联系我们 ===== */ .contact{padding:52px 0 72px} /* 一级标题（全站规范：英文 eyebrow + 中文 32px + 蓝短线） */ /* ===== 两栏：左联络信息 / 右表单 ===== */ .contact-grid{ display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:stretch; } /* grid 项默认 min-width:auto，会被内部输入框/占位说明顶宽 → 手机宽度下整块超出容器 */ .contact-grid > *{min-width:0} /* 图片 ×1（2026-10-23 用户定：两张改一张，图高固定）：高度按「表单高 − 文字高 − 22 间距」实测钉死， 左栏文字底与表单底齐平（桌面 1132 容器下表单 345.4 / 文字 173.0 ⇒ 图 150px）；将来入页把图片文件按 左栏宽 ≈522px 裁成同比例（≈3.48:1），CSS 不另写比例（同裁图适配口径） */ .contact-info{display:flex;flex-direction:column} .img-row{ height:150px; margin-bottom:22px; } /* 真图（2026-10-23 入页）：比例由图片文件自带（1200×345 ≈ 3.48:1），object-fit:cover 铺满 150px 格子 */ .img-row img{ width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--card-r); } /* ---- 左栏：联络信息（正文与「关于我们 · 公司介绍」完全同规范） ---- */ /* 注意：类名不能叫 .intro —— 会和「关于我们」的 .intro{margin-bottom:64px} 撞车（整页合并后段落之间会空 64px） */ .contact-info p.addr-text{ font-size:15.5px;line-height:2;color:var(--body); text-align:justify;text-indent:2em;margin:0; } .contact-info p.addr-text + p.addr-text{margin-top:18px} /* ---- 右栏：表单（正式站用 Spectra Forms） ---- */ .contact-form{ background:var(--bg-soft);border:1px solid var(--line);border-radius:14px; padding:16px 18px 18px; /* 2026-10-23 用户定：整表单高度收紧 */ } .contact-form .form-title{ font-size:18px;font-weight:600;color:var(--blue-dark);letter-spacing:.5px; padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line); } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .field{display:flex;flex-direction:column;gap:4px;min-width:0} .field.full{grid-column:1 / -1} .field label{font-size:13px;font-weight:700;color:var(--blue-dark);letter-spacing:1px} .field label i{font-style:normal;color:var(--blue);margin-left:2px} .field input,.field textarea{ width:100%;font-family:var(--font-cn);font-size:14px;color:var(--ink); background:#fff;border:1px solid #D8E5F2;border-radius:7px; padding:2px 10px;outline:none;line-height:1.5; /* 2026-10-23 用户定：单行框高度＝输入字体高度（上下不留空） */ } .field input{height:26px} /* 单行输入框锁高：14px 字号×1.5 + 上下 2px + 边框 */ .field input::placeholder,.field textarea::placeholder{color:#A5B7CC} .field textarea{min-height:56px;resize:vertical} /* 2026-10-23 16:41 用户定：留言框恢复固定最小高度 */ /* 纯 CSS 演示态，不做 JS 校验 */ .form-actions{margin-top:10px;display:flex;align-items:center;justify-content:flex-start;gap:14px} .btn-submit{ display:inline-block;font-family:var(--font-cn);font-size:15px;font-weight:700; letter-spacing:2px;color:#fff;text-decoration:none;cursor:pointer; background:linear-gradient(128deg,#02498F 0%,#0278E6 100%); border:none;border-radius:7px;padding:7px 36px;line-height:1.4; /* 2026-10-23 用户定：按钮高度随表单收紧同步缩 */ } .form-tip{font-size:12px;color:#9AB2CC;line-height:1.7} /* 个人信息告知（2026-10-19 加）：表单收集姓名/电话，按国内常见做法补一行用途说明 */ .form-note{margin-top:10px;font-size:12px;color:#9AB2CC;line-height:1.7;letter-spacing:.2px} /* 表单提交反馈（2026-11-03 接口化 /api/contact.php）：成功＝主蓝、失败＝深蓝加粗（全站红色禁用） */ .form-msg{margin-top:8px;font-size:12.5px;color:#0278E6;min-height:1em} .form-msg.is-err{color:#083B76;font-weight:600} /* 蜜罐字段：视觉与无障碍双重隐藏，真人不可见不可聚焦 */ .hp-field{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} /* ===== 响应式 ===== */ @media (max-width:1024px){ /* 板块底色：浅蓝渐变带（仅平板/手机），与产品服务板块同节奏；桌面保持白底定稿 */ .contact{background:linear-gradient(180deg,#F7FAFE 0%,#F1F7FD 100%)} /* 单列：左栏（配图 ×1 + 地址）**占满整行宽度**（用户 2026-10-18 要求，原 max-width:560px 已去掉） */ .contact-grid{grid-template-columns:1fr;gap:28px} /* 留言框高度 ×2（用户要求，平板/手机都翻倍） */ .field textarea{min-height:140px} /* 平板/手机单列：图不再锁 150px 格子，按图片文件自身比例（3.48:1 横幅） */ .img-row{height:auto} .img-row img{height:auto} } @media (max-width:640px){ .contact{padding:44px 0 56px} .form-grid{grid-template-columns:1fr} .contact-form{padding:16px 16px 18px} .img-row{gap:8px} /* 「留下您的信息…」必须一行放下（用户 2026-10-18 要求）：字号随宽度缩，17 字不折行 */ .contact-form .form-title{font-size:clamp(13.5px,4.4vw,17px);letter-spacing:0;white-space:nowrap} } /* ===== footer.html ===== */ @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* ===== 字体（构建时内联 base64） ===== */ /* ===== 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter）===== ⚠️ 必须带 unicode-range，只放 ASCII + Latin-1（并跳过 U+00B7）： 中文正文里的 “ ” ‘ ’ — … · 这几个码位 Inter 也自带字形，不设范围就会被它抢走， 结果是中文引号变窄、破折号只剩 1em、间隔号偏离基线 —— 整篇中文排版会散。 设了范围：英文/数字走 Inter，汉字与中文标点继续走雅黑，各取各的。 */ /* ===== 预览外壳（非网站内容） ===== */ /* 内容层置于装饰层之上 */ .footer .container{position:relative;z-index:1} /* 页脚上方留白示意 */ /* ===== 页脚：大框卡（1200px，首屏同款渐变） ===== */ .footer{ max-width:1200px;margin:0 auto 40px; border-radius:16px; background:linear-gradient(128deg,#04264F 0%,#02498F 40%,#0278E6 100%); color:#fff;position:relative;overflow:hidden; } /* 特殊档（10-21 容器 1200 化的边距档；10-24 用户定 1240→1200 与容器一致，勿归并标准五档） */ @media (max-width:1200px){.footer{margin:0 20px 40px}} /* 顶部玻璃高光（同首屏手法，纯 CSS） */ .footer::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%); } /* ===== 首屏同款装饰层（纯 CSS，零图片） ===== 命名加 f- 前缀：与首屏 .deco-* 解耦，避免合并整页时同名类互相覆盖 */ /* 1) 右上柔光斑：与左下光晕形成对角双光源（首屏同参数） */ .f-deco-aur{position:absolute;right:-180px;top:-260px;width:820px;height:820px;border-radius:50%; background:radial-gradient(circle,rgba(80,170,255,.20) 0%,transparent 66%);pointer-events:none} /* 2) 左下柔光（首屏同参数） */ .f-deco-glow{position:absolute;left:-180px;bottom:-220px;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(61,155,240,.40) 0%,transparent 68%);pointer-events:none} /* 3) 右侧极细网格：向左渐隐（首屏同参数） */ .f-deco-grid{position:absolute;right:0;top:0;width:54%;height:100%; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 46%,#000 100%); pointer-events:none} /* 4) 同心圆环 ×3（首屏同参数，垂直居中改贴底） */ .f-deco-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.10);pointer-events:none} .f-deco-ring.r1{width:940px;height:940px;right:-300px;bottom:-470px} .f-deco-ring.r2{width:700px;height:700px;right:-180px;bottom:-350px;border-color:rgba(255,255,255,.16)} .f-deco-ring.r3{width:460px;height:460px;right:-60px;bottom:-230px;border-color:rgba(255,255,255,.22)} .footer-main{ display:grid;grid-template-columns:1.4fr 1fr;gap:40px; padding:36px 0 28px;position:relative; } /* ---- 左：品牌区（横版反白 logo：文字在 JFC 右侧，2026-10-19 用户定） ---- */ .f-brand .f-logo{height:72px;width:auto;max-width:100%;object-fit:contain;display:block;margin-bottom:14px}/* 电脑 72，与页眉同高；平板 58 / 手机 46 见下方媒体查询 */ /* 标语类名＝.f-slogan（2026-10-28 由 .slogan 改名）：首屏也有 .slogan(display:flex;width:max-content)， 整页合并 CSS 时同名会串味，把页脚标语撑成 max-content 后溢出被 footer 的 overflow:hidden 裁掉 */ .f-brand .f-slogan{font-size:14px;line-height:1.9;color:#FFFFFF;letter-spacing:1px;text-shadow:0 1px 8px rgba(4,38,79,.35)} .f-brand p{font-size:13.5px;line-height:2;color:rgba(255,255,255,.82);max-width:380px;text-align:justify} .f-brand p em{font-style:normal;color:rgba(255,255,255,.55);font-size:12px} /* ---- 中：联络区 ---- */ .f-contact h4{ font-size:14px;font-weight:700;color:#fff;letter-spacing:2px;margin-bottom:12px; } .f-contact h4::after{content:"";display:block;width:26px;height:2px;background:#fff;opacity:.55;border-radius:1px;margin-top:6px} .f-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px} .f-item .ico{flex-shrink:0;margin-top:2px;opacity:.85} .f-item .txt{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.85)} .f-item .txt .ph{ display:inline-block;border-bottom:1.5px dashed rgba(255,255,255,.45); color:rgba(255,255,255,.65);letter-spacing:1px;padding-bottom:1px; } /* ---- 右：二维码区（2026-10-18 22:30 用户要求整块删除，样式保留注释备查） ---- */ /* ---- 底部版权条 ---- */ .footer-bottom{ border-top:1px solid rgba(255,255,255,.18); padding:14px 0 16px;position:relative; } .footer-bottom .row{ display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap; } .footer-bottom span{font-size:12.5px;letter-spacing:1px;color:rgba(255,255,255,.62);white-space:nowrap} .footer-bottom .ph{ display:inline-block;border-bottom:1.5px dashed rgba(255,255,255,.4); color:rgba(255,255,255,.6);letter-spacing:1px; } .footer-bottom a{color:rgba(255,255,255,.75);text-decoration:none;font-size:12.5px;letter-spacing:1px;white-space:nowrap} /* ===== 响应式 ===== */ @media (max-width:1024px){ /* 平板：页脚与电脑同款两栏（二维码区已按用户要求删除，2026-10-18 22:30） 联络栏 minmax(150px,1fr)：最窄平板 641 下保住 150px，邮箱地址不折行 */ .footer-main{grid-template-columns:minmax(0,1.4fr) minmax(150px,1fr);gap:26px;padding:26px 0 20px} /* 品牌栏允许收缩；栏太窄时靠 max-width+object-fit 等比缩，不放大 —— 原 height:auto 写法会让 logo 回到原始尺寸异常放大，已废弃（用户 2026-10-18 反馈） */ .f-brand{min-width:0} } /* 页脚 logo 高度逐档跟随页眉 logo（用户 2026-10-19 00:26 要求：三端都与页眉显示高度一致） 断点必须与页眉一致：>900 → 72px、≤900 → 58px、≤560 → 46px */ @media (max-width:900px){ .f-brand .f-logo{height:58px} } @media (max-width:640px){ .footer{margin:0 14px 28px} .footer-main{grid-template-columns:1fr;gap:20px;padding:26px 0 22px} /* 版权条：两行各自独占一行、都强制不换行（用户 2026-10-18 22:30 要求）， 字号用 vw 跟随宽度收，保证 320 宽也不溢出 */ .footer-bottom .row{flex-direction:column;align-items:flex-start;gap:6px} .footer-bottom span,.footer-bottom a{font-size:clamp(8.8px,2.75vw,12px);letter-spacing:0} .footer-bottom{padding:12px 0 14px} } /* 手机：页脚 logo 46px，与手机页眉一致（用户 2026-10-19 00:26） */ @media (max-width:560px){ .f-brand .f-logo{height:46px;margin-bottom:12px} }.hero-photo{background-image:url("../images/hero/hero-skyline-day-3120x1248.jpg")} @media (max-width:900px){ /* 手机档首屏图（构建期自动追加，不改模板）：解码像素降到 1/6，手机上不卡顿 */ .hero-photo{background-image:url("../images/hero/hero-skyline-day-1248x500.jpg")} } /* ===== 隐私政策正文（本页自有样式，类名 priv-* 前缀）===== */ /* 顶部留白 2026-11-04 收窄 64 → 24（用户定：白底整页时页眉下显得太空）。 .top-frame 已为固定页眉预留 94px，这里只是标题与页眉之间的呼吸位； 手机档 nav 预留 62px，同比收到 20px，别写成 24 否则 390 宽下标题会顶到页眉。 */ .priv{padding:24px 0 84px} .priv .sec-head{margin-bottom:34px} .priv-body{max-width:860px;margin:0 auto} .priv-body p{margin:0 0 16px;font-size:15.5px;line-height:2;letter-spacing:.2px;color:var(--ink);text-align:justify;text-indent:2em} .priv-body h3{margin:32px 0 14px;font-size:18px;font-weight:700;color:var(--blue-dark);letter-spacing:.02em;position:relative;padding-left:14px} .priv-body h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:18px;background:var(--blue);border-radius:2px} @media (max-width:640px){ .priv{padding:20px 0 60px} .priv-body p{font-size:14.5px} .priv-body h3{font-size:16.5px;margin-top:26px} } @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* 特殊档（10-21 容器 1200 化的边距档；10-24 用户定 1240→1200 与容器一致，勿归并标准五档） */ @media (max-width:1200px){ .top-frame{margin:0 20px} } /* ===== 响应式 ===== */ @media (max-width:900px){ .top-frame{margin:0 20px;padding-top:78px} .nav-inner{padding:10px 18px} .nav img{margin-left:0} .nav img{height:58px} /* 平板保持五项一行（实测 768 宽余量充足，不启用汉堡） */ .nav-menu{gap:16px;font-size:13px} .lang-switch{font-size:12px} .hero{padding:52px 24px;height:auto;min-height:0} /* 平板/手机：解除电脑端 600 硬锁，恢复内容撑开 */ .hero-photo{background-position:74% 50%} .hero-id{--brand:52px} .hero-lead{font-size:19px} /* 2026-11-13 17:00 用户定：手机图（-1248x500，≤900 档）理念框下方垫着大片白云，白玻璃+白字不显， 用户自己修不了云 ⇒ **仅 ≤900 档**把理念框改回蓝底（A 清爽蓝玻璃参数，含外投影浮起），桌面白玻璃不动 */ .core{font-size:14px;padding:11px 18px; background:linear-gradient(180deg,rgba(2,120,230,.48) 0%,rgba(2,120,230,.38) 100%); border:1px solid rgba(255,255,255,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 20px rgba(2,40,84,.18)} /* 装饰层：平板收敛（同样按新高度 412 等比缩） */ .deco-aur{width:470px;height:470px;right:-150px;top:-165px} } @media (max-width:560px){ .top-frame{margin:0 14px 0;padding-top:62px} .nav{width:calc(100% - 28px)} .nav-inner{padding:8px 14px} .nav img{margin-left:0} .nav img{height:46px} /* 只有手机用汉堡（用户 2026-10-18 定：平板不要）。五项一行在 ≤560 放不下（390 差约 30px） ⇒ 收进右上角三条横线，纯 CSS（checkbox），无 JS、无动画；页眉高度仍 62 ⇒ 锚点补偿不用改 */ .nav-burger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;margin-left:auto;padding:9px 8px;border-radius:8px; cursor:pointer;-webkit-tap-highlight-color:transparent; } .nav-burger span{display:block;height:2px;border-radius:2px;background:var(--ink)} /* 语言开关手机档收一档字号；与汉堡并排一行（开关在最右，同英文版页眉排法） */ .lang-switch{font-size:12px} .nav-menu{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;font-size:15px; background:#fff;padding:4px 0 6px; border-top:1px solid var(--line); border-radius:0 0 14px 14px; box-shadow:0 14px 24px rgba(8,59,118,.10); } .nav-menu a{padding:13px 18px} .nav-menu a + a{border-top:1px solid #EEF4FB} .nav-menu a.on::after{display:none} .nav-menu a.on{background:#F3F8FD} .nav-toggle:checked ~ .nav-inner .nav-menu{display:flex} /* 点菜单外任意处收起（用户 2026-10-18 要求）：勾选时显示一层全屏透明遮罩， 点遮罩 = 取消勾选 ⇒ 菜单收起。z-index:-1 使它压在自身页眉内容之下、页面其余内容之上 */ .nav-overlay{display:none} .nav-toggle:checked ~ .nav-inner .nav-overlay{ display:block; position:fixed;top:0;left:0;right:0;bottom:0; z-index:-1; -webkit-tap-highlight-color:transparent; } /* 手机首屏加高（用户 2026-10-18 23:40：太矮）⇒ 只放大上下留白，文字与装饰不动 */ .hero{padding:76px 18px} /* 手机端大图：2026-11-07 起桌面/平板/手机统一为「无蒙版、无滤镜」原样铺满， 这里只保留偏右取景的 background-position（春笋 65% 处在窄屏会被裁，右移取景更稳） */ .hero-photo{background-position:78% 50%} .hero-id{--brand:44px} /* 导语：手机端保持一行（用户 2026-10-18 23:32 改，两行方案作废）⇒ 加粗 + 字号随宽度收 + 不换行 */ .hero-lead{font-size:clamp(11px,3.75vw,15px);line-height:1.5;font-weight:700;white-space:nowrap} /* 理念框：两行文案（每行 20 字，含顿号）任何宽度都不许折行（用户 2026-10-18 23:46） 字号按可用宽自动收：可用宽 ≈ 100vw − 94px（框架左右 28 + 首屏内距 36 + 框内边距 30）， 再留 6px 余量取 −100px；每字宽 = font-size + letter-spacing(.4px) ⇒ 除以 20（实测 20 字）后再减 .4px 宽 ≥390 时被 13.5px 上限挡住，与原来完全一致；320 下约 10.6px，是"不折行"能给的极限 */ .core{font-size:min(13.5px, calc((100vw - 100px)/20 - .4px));padding:10px 15px;line-height:1.8} /* 按钮 2026-11-05 用户改：不再拉宽（width:100%+max-width:260 的长条不好看）， 改 fit-content 按文字自然宽度；2026-11-06 01:43 用户改：去掉 auto 居中、与桌面版一样靠左 注意：仍是 flex（不是 block），否则内部 svg 的 display:block 会把箭头挤到第二行 */ .hero-cta{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:22px 0 0;padding:13px 26px;font-size:15px;text-align:center} /* 装饰层：手机只留柔光（网格/圆环在 390 宽下会挤进文字区，且手机照片本就压得淡，关掉； 顶部高光手机上糊，也去掉） */ .deco-sheen,.deco-grid,.deco-ring{display:none} .deco-aur{width:335px;height:335px;right:-125px;top:-110px} .deco-glow{width:335px;height:335px;left:-110px;bottom:-125px} } —— 构建时注入页眉样式（含全局层/字体/top-frame，取自 hero 预览） */ /* /* ===== 全局层（方案A 2026-10-24）：全站唯一真源，各板块源经全局占位符注入 ===== */ :root{ --blue:#0278E6; --blue-dark:#083B76; --muted:#41678F; --ink:#26374D; --body:#46586E; --line:#E3ECF5; --bg-soft:#F6F9FD; --card-r:12px; /* 拉丁字形统一 Inter（2026-10-29 用户要求：中文版的英文也用 Inter；PJS 退役）。 --font-cn 的首位放 Inter ⇒ 英文/数字走 Inter，汉字与中文标点自然回落到雅黑； 中文引号 “”‘’、破折号 —、省略号 … 不被 Inter 抢走，靠 @font-face 的 unicode-range 限定在 ASCII + Latin-1（见各板块源顶部，本文件不声明 @font-face）。 --font-en 仍用于 .en 小标签，同样指向 Inter。 */ --font-cn:"Inter","Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif; --font-en:'Inter',var(--font-cn); } @media (max-width:900px){[id]{scroll-margin-top:78px}} @media (max-width:560px){[id]{scroll-margin-top:62px}} @media (max-width:1024px){ .svc-head .lead{font-size:17px} .svc-head .lead .lead-tail{font-size:14px} } @media (max-width:640px){ .container{padding:0 18px} .sec-head h2{font-size:26px} .svc-head h3{font-size:20px} } /* 特殊档（10-21 容器 1200 化的边距档；10-24 用户定 1240→1200 与容器一致，勿归并标准五档） */ @media (max-width:1200px){.footer{margin:0 20px 40px}} /* ===== 响应式 ===== */ @media (max-width:1024px){ /* 平板：页脚与电脑同款两栏（二维码区已按用户要求删除，2026-10-18 22:30） 联络栏 minmax(150px,1fr)：最窄平板 641 下保住 150px，邮箱地址不折行 */ .footer-main{grid-template-columns:minmax(0,1.4fr) minmax(150px,1fr);gap:26px;padding:26px 0 20px} /* 品牌栏允许收缩；栏太窄时靠 max-width+object-fit 等比缩，不放大 —— 原 height:auto 写法会让 logo 回到原始尺寸异常放大，已废弃（用户 2026-10-18 反馈） */ .f-brand{min-width:0} } /* 页脚 logo 高度逐档跟随页眉 logo（用户 2026-10-19 00:26 要求：三端都与页眉显示高度一致） 断点必须与页眉一致：>900 → 72px、≤900 → 58px、≤560 → 46px */ @media (max-width:900px){ .f-brand .f-logo{height:58px} } @media (max-width:640px){ .footer{margin:0 14px 28px} .footer-main{grid-template-columns:1fr;gap:20px;padding:26px 0 22px} /* 版权条：两行各自独占一行、都强制不换行（用户 2026-10-18 22:30 要求）， 字号用 vw 跟随宽度收，保证 320 宽也不溢出 */ .footer-bottom .row{flex-direction:column;align-items:flex-start;gap:6px} .footer-bottom span,.footer-bottom a{font-size:clamp(8.8px,2.75vw,12px);letter-spacing:0} .footer-bottom{padding:12px 0 14px} } /* 手机：页脚 logo 46px，与手机页眉一致（用户 2026-10-19 00:26） */ @media (max-width:560px){ .f-brand .f-logo{height:46px;margin-bottom:12px} } —— 构建时注入页脚样式（取自 footer 预览） */