/* ===== en-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，PJS 只留在 logo 图里） ===== 两条变量都要重写，只改一条没用： · --font-cn 是 body 的基字体 —— 它没有西文字面时，英文单词就落进雅黑的拉丁字形 （2026-10-29 实测：/en/ 的 body/.hero-lead/.intro-text p/h2 全是 Microsoft YaHei 在渲染）； · --font-en 是 eyebrow/.en/brand 用的，:root 里写的是 'Plus Jakarta Sans', var(--font-cn)， 而 var(--font-cn) 在 :root 就已经求值（＝雅黑串）再继承下来，改 body 的 --font-cn 影响不到它。 顺带作废了原来的「JFC Quote」引号字面补丁：Inter 自带正确的曲线引号（U+2018–201D）， 不会再被雅黑画成 18.5px 的全角宽度，那个 unicode-range 小把戏不需要了。 */ @font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap} body{ --font-cn:"Inter","Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif; --font-en:"Inter","Microsoft YaHei","微软雅黑",sans-serif; } /* ===== 预览外壳（非网站内容） ===== */ /* 页眉+首屏共用大框：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-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} .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)} .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} } /* ===== 英文版覆盖层（2026-10-27 批 2：英文专属重排，中文版不受影响） ===== 原则：视觉语言（渐变/大图/蒙版/装饰/按钮）一律不动，只改英文排版参数。 ① 标语只剩英文一行（中文版是「中文行 + 英文行」两行）⇒ 取消 .745×brand 的定高，改为对齐 JFC 字面中线 ② 英文行更长，导语 20px（视觉重量≈中文 24px）；2026-10-27 用户定稿为「逗号后
硬断两行」， 桌面/平板固定两行（1280/1024 实测 2 行、768 2 行），手机取消硬断（≤560 段），480 硬锁内不溢出 ③ 理念框两行靠
控制，宽度富余时不会折行 */ .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)} .hero-id{align-items:center} .slogan{height:auto;margin-top:0;justify-content:flex-start} /* 标语字号取 .30×brand：中文字面比拉丁字饱满，英文同 px 显得小，故比中文版 .25 加大一档 */ .slogan .en{font-size:calc(var(--brand) * .30);letter-spacing:.005em} .hero-text{max-width:760px} .hero-lead{font-size:20px;line-height:1.65;letter-spacing:0;max-width:700px} .core{font-size:15px;letter-spacing:0} @media (max-width:900px){ .lang-switch{font-size:12px} .hero-text{max-width:640px} .hero-lead{font-size:17px} } @media (max-width:560px){ .lang-switch{font-size:12px} /* 手机上英文导语允许折行（中文版是强制一行的 nowrap） 2026-10-27：用户给导语加了
（桌面/平板固定两行），但手机窄到
+ 自动折行＝4 行 ⇒ 手机上取消硬断，交给自然折行（390/360/320 实测 3 行） ⚠️ 2026-10-28：
前必须留一个空格（源里写 `coaching,
`）。display:none 会把换行连同位置 一起吞掉，逗号后无空格时两个词拼成 `coaching,focused`——iOS 不在逗号后断行， 该「长词」溢出卡片被裁（用户手机截图 bug.jpg 实证） */ .hero-lead{font-size:clamp(11.5px,3.9vw,15px);line-height:1.55;font-weight:700;white-space:normal;max-width:none} .hero-lead br{display:none} /* 英文理念框：最长一行实测 22.38em（canvas 100px 精测，Inter 400） ⚠️ 2026-11-06 用户反馈手机上折成 3 行：旧公式 clamp(11px,3.35vw,13.5px) 在 390 宽给 13.06px， 加 15px 内边距后整框只比可用宽小 2px —— iOS 字形略宽于 headless Chrome 就折第三行。 ⇒ 改「按可用宽算字号」公式：内容宽 = 100vw − 90px（框架 28 + 首屏内距 36 + 边框 2）， 字号 = (100vw − 96px)/24 ⇒ 390 宽给 12.25px，整框留约 10% 余量抗各端字形差异； 320 宽给 9.3px，任何宽度都保证
两行不折三行；13.5px 上限与中文版一致； 框内边距 15→12 一并补回可用宽 */ .core{font-size:min(13.5px, calc((100vw - 96px)/24));padding:10px 12px;letter-spacing:0;line-height:1.85} } /* ===== en-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; } /* ===== 预览外壳（非网站内容） ===== */ /* ===== 板块：关于我们 ===== */ .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))} /* 核心优势 5 卡：一整行横滑（2026-10-28 用户要求，原网格换行作废） 电脑 3 列 / 平板 2 列 / 手机 1 列；最后一张 Hands-on Delivery 在电脑与平板占 2 列宽。 纯 CSS scroll-snap，无 JS：卡片按列宽算 flex-basis，超出即横滑，滚动条兼作可见提示。 padding 上下留白：上给 hover 的 -3px 浮起与阴影，下给滚动条（否则被 overflow 裁掉）。 */ .adv-grid{ display:flex;gap:22px; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:8px 0 16px; scrollbar-width:thin;scrollbar-color:rgba(2,120,230,.35) transparent; } .adv-grid::-webkit-scrollbar{height:5px} .adv-grid::-webkit-scrollbar-track{background:rgba(2,120,230,.08);border-radius:3px} .adv-grid::-webkit-scrollbar-thumb{background:rgba(2,120,230,.35);border-radius:3px} .adv-card{ flex:0 0 calc((100% - 44px)/3);min-width:0;scroll-snap-align:start; 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{flex:0 0 calc((100% - 44px)/3*2 + 22px)} /* = 2 列宽 + 1 个间距 */ /* ===== 响应式 ===== */ /* ===== 组织架构：平板/手机沿用桌面版式（用户 2026-10-18 要求），只等比缩小、不堆叠 ===== */ @media (max-width:1024px){ /* 核心优势：平板 2 列（最后一张占 2 列），仍是一整行横滑 */ .adv-card{flex:0 0 calc((100% - 22px)/2)} .adv-card.wide{flex:0 0 100%} /* = 2 列宽 + 1 个间距 */ /* 结构不动：三个虚线卡片组并排（管理咨询 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 留白一致，宽度都给内容 */ /* 核心优势：手机 1 列改「一屏 76%」横滑（2026-10-28 用户要求）——前 4 卡宽度与人才成长 3 张滑动白卡（.talent-cards 的 grid-auto-columns:76%）完全一致，同 gap 12 / snap 居中 / 左右 2px 内边距；第 5 张（wide）仍整宽收尾。原「1 列占满」作废 */ .adv-grid{gap:12px;padding:2px 2px 14px} .adv-card{flex:0 0 76%;scroll-snap-align:center;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{flex:0 0 100%} /* 组织架构：手机用自己的一套字号（不用平板的 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 保住一行（英文仍允许两行） */ /* ===== 英文版覆盖层（2026-10-27 批 2：英文专属重排） ===== ① 正文：去两端对齐 + 去 2em 首行缩进（中文排版机制），行高 2 → 1.8 ② 优势卡正文同理左对齐 ③ 组织架构：主文字已换英文、次要英文行已删，卡片自然高度自适应，无需改尺寸 */ .intro-text p{text-align:left;text-indent:0;line-height:1.8;letter-spacing:0} .adv-card p{text-align:left;line-height:1.8;letter-spacing:0} .adv-lead{letter-spacing:0} .sub-head h3{letter-spacing:.5px} /* ===== en-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} } /* ===== 预览外壳（非网站内容） ===== */ /* 锚点跳转补偿：严格等于固定页眉的实际高度（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} /* 弹层关闭键只给手机，桌面和平板隐藏（否则会在正文末尾露出一颗 × ） */ /* 弹层的全屏遮罩：一律隐藏（弹层 m-pop 已作废） */ .model .m-cards{display:none} /* 横滑卡片容器：≤1024 且由 JS 搬入

后显示 */ .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） 横滑档（≤1024）同样生效（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 深夜放宽：桌面/平板/手机全宽生效，平板 641–1024 与手机 ≤640 的横滑版式里 小圆仍在，联动照常） 视觉参数与小圆自身 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-27 用户定）：平板直接改用手机版式（八标题两行 + 大圆居中 + 横滑卡片）， 电脑同款布局图只在 >1024 出现 —— 英文词比中文长 2~3 倍，平板四列挤不下（bug.png 文字与圆重叠实证）。 版式规则统一写在下方 max-width:1024px 大块里 */ /* —— 人才寻访 / 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} } /* —— 管理咨询：≤1024 平板/手机共用手机版式（2026-10-20 手机定稿、2026-10-27 平板并入，用户定）： 八标题分两行（上行＝业务线 4 张、下行＝职能线 4 张），大圆放大居中，整图下方横滑卡片；弹层 m-pop 已作废 */ @media (max-width:1024px){ .model{--k:1.05;padding:14px 10px 16px} .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 用户确认为已验收行为） */ /* 中央图案：放大到「大框宽度的六成」并居中 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{ font-size:9.5px;padding:5px 4px;gap:4px; letter-spacing:0;line-height:1.4;border-radius:6px; white-space:normal; } .tag svg{width:9px;height:9px} /* 手机端（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 82%;scroll-snap-align:center; 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} } /* —— 手机端（≤640）专属：板块留白收紧 + 人才寻访/研究院改单列（图在上、正文在下；DOM 里图本就排在最前） 平板 641–1024 不在此列：两块仍走左文环绕右图（用户 2026-10-18 定），优势卡 3 张一行 —— */ @media (max-width:640px){ .services{padding:44px 0 56px} .svc+.svc{margin-top:48px} .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}} /* ===== 英文版覆盖层（2026-10-27 批 3：英文专属重排，中文版不受影响） ===== ① 正文：去两端对齐与首行缩进（英文 2em 缩进是错的），行高收到 1.85 ② 实践领域卡片：标签/明细字号各收一档（英文词比中文长 2~3 倍），tag 仍 nowrap 靠列宽 355px 容纳 ③ 中央图案：8 个关键词由「2 个汉字」变英文单词 ⇒ 小圆 42→56、字号 10、统一 scale 1 （中文版靠 --s 1.30/1.14/… 做大小节奏，英文圆已放大，节奏交给 .on 的描边与投影） ④ 两只大圆：Enterprise / Consultant 10 字母 ⇒ 字号与字距同步收（20→15 / 18→13.5，ls 3→1） ⑤ 桥接胶囊：End-to-end 比「全程陪伴」长 ⇒ 字号 11.5、内距收 2px */ .talent-text p,.research-text p{text-align:left;text-indent:0;line-height:1.85} .tag{font-size:12.5px;letter-spacing:.2px} .blk p{font-size:12.5px;line-height:1.7} .hub .sm{width:56px;height:56px;margin-left:-28px;margin-top:-28px;font-size:9.5px;letter-spacing:0} .hub .big{font-size:15px;letter-spacing:1px;text-indent:1px} .hub .c2{font-size:13.5px} .hub .bridge{font-size:11.5px;letter-spacing:.8px;text-indent:.8px;padding:6px 13px} @media (max-width:900px){ .blk p{font-size:12px} .tag{font-size:12px} } @media (max-width:1024px){ /* 平板/手机：8 块两行标题卡 + 横滑明细。 ⚠️ 英文单词不可断 ⇒ grid 列必须 minmax(0,1fr)，否则被「Regionalization」等长词的 min-content 撑爆（中文每字可断无此问题，实测 docW 458/375 溢出）；长词交给 hyphens:auto 连字断行（依赖 ）。tag 字号收 10.5（中文 9.5，英文略大）。 */ .model-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .tag{font-size:10.5px;letter-spacing:0;white-space:normal;line-height:1.3;text-align:left;overflow-wrap:break-word;hyphens:auto} /* 小圆保持桌面 56px 布局、只提字号（--k≈.64 缩放后视觉圆 36px、字 7.4px）—— 44px/8px 的缩法字会缩到 5px 不可读；大圆/桥接同理按视觉下限反推布局值 */ .hub .sm{font-size:11.5px} .hub .big{font-size:17px} .hub .c2{font-size:15px} .hub .bridge{font-size:13px;padding:5px 12px} } /* 平板（641–1024）：版式同手机，但屏宽更大 ⇒ 标签/大框内距放宽一档（10.5→12px）， 卡片每屏露两张（手机 82% 单张），否则 1024 上一张卡 840px 宽、一行字太长 */ @media (min-width:641px) and (max-width:1024px){ .tag{font-size:12px;line-height:1.4} .model{padding:18px 14px 20px} .m-card{flex:0 0 47%} .m-card p{font-size:13.5px;line-height:1.8} } /* ===== 横滑卡手动控件（2026-10-27 用户要求：8 张卡要能手动滑动看） ===== ① 左右箭头：按「当前居中卡」翻上一张/下一张，到头禁用 ② 圆点：8 个，点击直达；当前卡对应的点拉长成蓝色小胶囊 ③ 鼠标拖拽：细指针设备可按住在卡片区左右拖（触屏本就是原生滑动，无需处理） 显示与否由 JS 控制（挂载卡片时加 .is-live），>1024 桌面版式完全不占位 */ .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} } /* ===== en-cases-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} } /* ===== 预览外壳（非网站内容） ===== */ /* ===== 板块：案例作品 · 英文版（结构/样式与中文版同构，2026-10-28 批3 建源） ===== */ .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 蓝条 + 12px 灰蓝副标） ===== */ .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} /* 行业导航（左栏 2 列；≤760 才改竖栏，见底部媒体查询） 2026-11-03 晚第 3 次调整（用户口径）：放弃 3×3 改 2 列 —— 三列时每格只有 157px， 而英文最短的 Healthcare 只需 65px、最长的 Industrial Equipment 折成了两行， 「等宽 + 折行」两头不讨好。改 2 列后每格 244px，九个行业全部单行放得下（最长 174px）， 于是：① 文字不换行、② 高度压到一行文字刚好（29px，原 46px 显胖）、③ 左对齐成清单感。 2026-11-03 晚第 4 次调整（用户口径）：左栏从固定 47% 收窄 —— 「两列行业卡 + 左侧留空共占 38~40%，字装不下时最多放宽到 50%，不超过」。 依据＝所有胶囊等宽且文字不换行，最长条目 Industrial Equipment 自然宽 175.6px （12px Inter 600 的 125.6 + 图标 15 + 左右内边距 14×2 + 边框 2）； 两列每格 =（左栏宽 − 2 − 12）÷ 2，逐档实测（无头 Chrome，dist/en/，溢出 0）： 1280+ → 40%（split 1064，格 206，余 30） 1441+ → 38%（格 195，余 19） 1101~1200 → 40%（1101 格 186，余 10） 1025~1100 → 43%（1025 格 184，余 8） 901~1024 → 46%（1024 格 197 余 21；900 格 169 余 9） 761~900 → 49%（900 格 180 余 20；820 格 161 余 12；768 格 148 余 7） ← 这一段必须 49%：46% 时 820 只剩 1px 余量、768 差 2px 直接切字 左栏窄了右栏就宽，公司卡 max-width 仍 470 居中（用户定：两边各留 84 就够）。 段与段之间最大跳 3%（≈12px），肉眼无感；容器宽在 1200 封顶，故 ≥1200 用同一比例。 */ .cns-tabs{ flex:0 0 40%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto;gap:8px 12px;align-content:center;padding:2px; } /* 超大屏：容器已封顶 1200，左栏再收一档（40%→38%），胶囊 195 与 1280 的 206 观感一致 */ @media (min-width:1441px){ .cns-tabs{flex:0 0 38%} } .cns-tab{ cursor:pointer;white-space:nowrap; display:flex;align-items:center;justify-content:flex-start;gap:7px;width:100%; /* EN 版：Inter、12px；中文版为 font-cn 13px。 line-height:1.25 + 上下 padding 6px = 29px 高（刚好包住一行字，不再像药丸）。 2 列下每格 244px，最长条目「Industrial Equipment」含图标仅 174px，永远不折行。 */ font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.2px; color:rgba(255,255,255,.92);line-height:1.25; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30); border-radius:16px;padding:6px 14px; 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} /* 单卡舞台：行业名一行（英文大字；中文副行已删——2026-10-28 用户定，英文版不保留 data-cn 小字），居中于公司卡上方 */ .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-main{font-size:32px;font-weight:700;color:#fff;letter-spacing:.5px;line-height:1.25;white-space:nowrap} /* 公司卡：只留一张（9 张里当前行业那张，其余隐藏） 桌面＝横排紧凑卡：logo 框居左，文字在右与 logo 同行；视觉重心在文字 2026-11-03 晚：容器改 grid + 九张卡叠在同一格（grid-area:1/1），隐藏卡改 visibility:hidden 而不是 display:none —— 这样格子高度自动取「最高那张卡」， 切换行业时深蓝块不会因 fact 行数变化而上下跳（560/390 档实测跳 17px）。 用户口径：「整个高度按右侧最高那个公司卡的高度，加上上下需要的留空」。 同轮：卡宽 520→470、logo 150→130（用户：卡太宽）—— 470 下 fact 有 282px， 最长的 Global Brand 文案 261px 仍单行；长文案（Smart Devices 类）折两行也不跳高。 */ .cns-grid{width:100%;max-width:470px;min-width:0;display:grid} .cns-card{ grid-area:1/1; 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{visibility:hidden} .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:48px;padding:0;margin:0;width:130px;flex:0 0 130px; 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; /* EN 版：white-space:normal——英文 fact 长一倍以上，横排一行放不下，允许折行 */ font-size:15px;font-weight:500;color:#2A5282;line-height:1.6;letter-spacing:.2px; white-space:normal; border-left:1px solid rgba(2,120,230,.28);padding-left:18px; } .cns-fact::before{display:none} /* ===== 响应式 ===== */ /* 2026-11-03 重做三档：三档的病因各不相同，别再混用一个断点。 实测（无头 Chrome，en/ 页面，胶囊文字右边界 vs 胶囊右边界）： 1280 → 0 溢出，但 Industrial Equipment 只剩 2.3px 余量（换台机器/字体渲染一变就爆）； 1024 → 1 个溢出 8.9px；900 → 5 个；820 → 6 个（最大 23px）；768 → 8 个（最大 26px）； 641~660 → 9 个全线溢出。手机上文字能折行不溢出，但竖栏只有 120px 高、9 条要 240px， 纵向溢出 115~151px，只能滚、看着像被裁（用户截图 02）。 */ /* 1101~1200：容器已开始跟着视口缩，左栏补 3%（40→43），胶囊宽度维持 186~198 */ @media (max-width:1100px){ .cns-tabs{flex:0 0 43%} } @media (max-width:1024px){ /* 平板（901~1024）：左栏 46%（1024 格 197、900 格 169），九个行业全部单行。 字号/内边距/图标自这一档起同步用 clamp 随视口缩 —— 只缩左栏不缩字号， 窄档必然切字（46% 时 820 只剩 1px 余量）。 */ .cns-split{gap:24px;margin-top:16px} .cns-tabs{flex:0 0 46%;grid-auto-rows:auto;align-content:center} .cns-tab{font-size:clamp(10px,1.32vw,12px); padding:6px clamp(9px,1.1vw,14px);gap:clamp(5px,.55vw,7px); white-space:nowrap;line-height:1.25} .cns-ico{width:clamp(11px,1.2vw,15px);height:clamp(11px,1.2vw,15px)} .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-main{font-size:26px} /* 平板公司卡与电脑同构（横排：logo 左、文字右） */ .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)} } @media (max-width:900px){ /* 761~900（2026-11-03 晚第 4 次调整，用户口径）：这一档仍做两列，左栏 49% —— 46% 在 768 会差 2px 切字（Industrial Equipment 140.7 vs 格 138.4）， 49% 后 768 余 7、820 余 12、900 余 20。右栏 51% 配 24 gap： 768 卡 298（<310 自动转上下式，用户选的）、820 卡 325、900 卡 366（横排）。 块高因此从竖栏时代的 140 长到 213~222（卡片变窄、fact 折行 + 五行胶囊撑高）， 用户 2026-11-03 明确接受这个代价（换九条全部可见，不再只露 3 条）。 */ .cns-tabs{flex:0 0 49%} /* 容器查询兜底：卡片实际宽度 < 310 时回上下式（logo 一行、fact 在下）。 阈值 310 的由来：768 卡 298 转上下、820 卡 325 保持横排，两种都经用户确认。 */ .cns-grid{container-type:inline-size;container-name:cnsgrid} @container cnsgrid (max-width:310px){ .cns-card{display:block;padding:12px} .cns-logo{height:32px;width:88px;flex:none} .cns-fact{margin-top:9px;border-left:0;padding-left: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} } } @media (max-width:760px){ /* ≤760（手机 + 极窄平板）：左侧竖排行业栏。 2026-11-03 晚第 4 次调整：断点从 ≤900 下移到 ≤760 —— 761~900 实测能做两列 （左栏 49%、字号 10~11.9），用户口径「≤900 应该还够做两列，手机竖栏就可以了」。 760 以下两列每格只剩 <146px，最长条目要 140.7px，字号得砍到 9px 才塞得进，不可读， 只能竖排；竖排也正好是用户认可的手机形态（截图 04）。 栏宽 = clamp(132px,34vw,168px)（2026-11-03 用户定：45% 太宽，胶囊留白多）： 窄屏不低于 132px（Semiconductor 单行要 124px）、宽屏不超过 168px（Industrial Equipment 单行要 157px），中间按视口 34% 走 —— 900 档 168、641 档 168、430 档 146、390 档 133。 高度仍严格等于右栏「行业名 + 公司卡」（top:0;bottom:0），超出在栏内滚动，不撑高深蓝块。 2026-11-03 晚（用户真机验收后第 2 次调整）：去掉 min-height:216px —— 它让 900 档深蓝块 高 260px 而卡片只有 102.6px，卡下空出 83.8px（用户：「整个高度按右侧最高那个公司卡的高度， 加上上下需要的留空就好」）。现在高度纯由内容撑开＝上下 padding + 行业名 + 公司卡； 竖栏一屏看 4 条、余下 5 条靠滚动（滚动条 4px 常显 + 底部 24px 渐隐提示）。 */ .cns-split{display:block;position:relative;margin-top:0} .cns-tabs{position:absolute;left:0;top:0;bottom:0;width:clamp(132px,34vw,168px); display:flex;flex-direction:column;gap:3px;padding:0 8px 0 0; overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent; /* 底部渐隐 14px（原 24）：块高砍到 ~140 后竖栏只有 96px、一屏正好 3 条完整胶囊， 24px 的遮罩会把第 4 条的露头也吃掉，看起来像「只有 3 个行业」； 缩到 14px 后第 4 条露出一小截，配合细滚动条＝「下面还有」。 */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 14px),transparent 100%)} .cns-tabs::-webkit-scrollbar{width:4px} .cns-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:2px} .cns-tabs::-webkit-scrollbar-track{background:transparent} /* 胶囊竖向收紧（gap 4→3、上下 padding 6→5）：块高按用户要求砍到 ~140 后竖栏只有 ~96px，原尺寸一屏只看 3 条；收紧后同一高度能看 5 条，滚动距离从 6 条降到 4 条。 横向 padding 与字号不动 —— 胶囊宽度由栏宽决定，文字可读性不受影响。 */ .cns-tab{width:100%;flex:0 0 auto;justify-content:flex-start;text-align:left; white-space:normal;line-height:1.25;font-size:11px;padding:5px 8px; letter-spacing:0;gap:6px;border-radius:14px} .cns-ico{width:11px;height:11px} .cns-stage{flex:1;min-width:0;max-width:none;margin-left:calc(clamp(132px,34vw,168px) + 14px); align-items:stretch;justify-content:center;gap:8px} .cns-stage-head{max-width:none;flex-direction:column;align-items:center;gap:3px} .cns-stage-main{font-size:18px;letter-spacing:.2px;line-height:1.2} /* 公司卡：默认与电脑同构＝横排（logo 左、fact 右，竖线分隔）。 2026-11-03 晚用户反馈：本档卡片宽 502~520px，完全够横排；竖排会让 logo 只占 104px、 fact 单独一行铺满，右侧空出一大片（截图 03）。改回横排后卡片也矮了，深蓝块跟着收紧。 容器查询兜底：卡片「实际宽度」< 310px 时自动回到竖排（logo 一行、fact 在下）—— 那是用户认可的「宽度不够时上下式好看」。容器取 .cns-grid 而不是媒体查询，是因为 同一视口下不同档竖栏宽度不同，卡片宽 ≠ 视口减固定值，只有量真实宽度才准。 阈值 310 的由来：641 档卡片 323、640 档 386、561 档约 308 —— 取 310 可让 641 与 640 都走横排（原来 340 会把 641 判成竖排，与 640 差 1px 就跳版）；真正转竖排在 560 附近， 那时两种布局的高度差最小。 */ .cns-grid{max-width:470px;margin:0 auto; container-type:inline-size;container-name:cnsgrid} .cns-card{display:flex;align-items:center;gap:12px;padding:12px 14px; border-radius:12px;box-shadow:0 8px 20px rgba(4,38,79,.16)} /* logo 按卡片宽度取 24%，夹在 88~112px：641 档卡片只有 323px（全站 .container 在 ≤640 档左右 padding 减半，所以 641 反而比 640 窄 63px），固定 112px 会把 fact 压到 169px； 改比例后 641 的 fact 有 195px，520 档仍是满宽 112px、与电脑档观感一致。 */ .cns-logo{height:40px;width:clamp(88px,24%,112px);flex:0 0 auto} .cns-fact{font-size:12px;line-height:1.5;margin-top:0;letter-spacing:0; border-left:1px solid rgba(2,120,230,.28);padding-left:12px} .cns-fact::before{display:none} @container cnsgrid (max-width:310px){ .cns-card{display:block;padding:12px} .cns-logo{height:32px;width:88px;flex:none} .cns-fact{margin-top:9px;border-left:0;padding-left: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} } } @media (max-width:640px){ /* 手机：只做尺寸微调，结构全在 ≤760 里（2026-11-03 晚起 760 是结构断点） */ .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-tab{font-size:10.5px;padding:5px 7px} .cns-ico{width:10px;height:10px} .cns-stage-main{font-size:16px;letter-spacing:.2px} /* 卡片尺寸交给 ≤760 的「横排基准 + 容器查询竖排」，这里只管字号， 否则 padding / logo 尺寸会被 ≤640 覆盖成第四套值，641 与 640 之间出现跳变 */ .cns-fact{font-size:11.5px} /* 数据条：与电脑端一致＝四格一行（原板块同款规则搬入） */ .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} } /* ===== en-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} } /* ===== 预览外壳（非网站内容） ===== */ /* 锚点跳转补偿：严格等于固定页眉的实际高度（logo 72 + 上下 11），避免板块标题被遮或露出上一屏 */ @media (max-width:900px){} @media (max-width:560px){} /* ===== 板块：联系我们 · 英文版（结构/样式与中文版同构，2026-10-28 批3 建源） ===== */ .contact{padding:52px 0 72px} /* 一级标题（全站规范：eyebrow + 32px 标题 + 蓝短线；EN 版 eyebrow=Talk to Us） */ /* ===== 两栏：左联络信息 / 右表单 ===== */ .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-en);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 用户定：留言框恢复固定最小高度 */ /* Message 框弹性撑满（2026-10-28 用户定，EN 专属）：两栏 grid align-items:stretch 已把表单列 拉到与左栏等高，这里把多余高度全部传导给 Message——form 纵向 flex 吃满列高， form-grid 第三行（Message）设 1fr，textarea flex:1 填满该行剩余空间； 英文左栏文字比中文长，右侧表单原本矮一截，由此自动补齐 */ .contact-form{display:flex;flex-direction:column} .contact-form form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .form-grid{flex:1 1 auto;grid-template-rows:auto auto 1fr} .field.full textarea{flex:1 1 auto} /* 纯 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;grid-template-rows:repeat(4,auto) 1fr} /* 单列 5 行：Message 仍是末行吃剩余高 */ .contact-form{padding:16px 16px 18px} .img-row{gap:8px} /* EN：表单标题是英文长句，手机档不锁一行（中文版「一行放下」口径不适用），自然折两行 */ .contact-form .form-title{font-size:15px;letter-spacing:.2px;white-space:normal;line-height:1.4} } /* —— EN 覆盖（批2 en-about 同口径）：英文段落左对齐、无首行缩进、行距收紧 —— */ .contact-info p.addr-text{text-align:left;text-indent:0;line-height:1.8;letter-spacing:0} /* ===== en-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} } /* ===== 预览外壳（非网站内容） ===== */ /* 内容层置于装饰层之上 */ .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（420px）后溢出、被 footer 的 overflow:hidden 裁掉 ⇒ 手机上「focused on」显示不全（用户截图 bug.jpg 实证） */ .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} } /* ===== 英文版覆盖层（2026-10-27 批 2） ===== ① 品牌区标语：英文取消字距拉伸（中文 ls 1px 是为汉字设的），并退两端对齐（英文 justify 会出大空隙） ② 联络标题 ls 2px 保留（CAPS 般的疏排对英文同样成立） ③ 版权条英文行中文版已验证 320 不溢出，字号 clamp 不动 ④ 2026-10-27：标语由破折号改逗号并在逗号后
（桌面固定两行）；手机宽度不足时 「硬断 + 自动折行」会把一句拆成 3~4 行 ⇒ ≤560 取消硬断，交给自然折行（实测 390 两行、320 三行） 2026-10-28：
前必须留一个空格（源里写 `coaching,
`）。display:none 会把换行连同位置 一起吞掉，逗号后无空格时拼成 `coaching,focused`——iOS 不在逗号后断行，溢出卡片被裁 （用户手机截图 bug.jpg 实证，首屏导语同款写法已同步修） */ .f-brand .f-slogan{text-align:left;letter-spacing:.2px;line-height:1.8;max-width:420px} @media (max-width:560px){ .f-brand .f-slogan br{display:none} }.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")} } /* ===== Privacy body styles (priv-* prefix, this page only) ===== */ /* 顶部留白 2026-11-04 收窄 64 → 24（与中文页同步，用户定：白底整页时页眉下显得太空） */ .priv{padding:24px 0 84px} .priv .sec-head{margin-bottom:34px} .priv-body{max-width:860px;margin:0 auto} /* 英文段落：左对齐、无缩进、lh1.8（全站英文排版口径） */ .priv-body p{margin:0 0 16px;font-size:15.5px;line-height:1.8;color:var(--ink);text-align:left} .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} .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)} .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} } @media (max-width:900px){ .lang-switch{font-size:12px} .hero-text{max-width:640px} .hero-lead{font-size:17px} } @media (max-width:560px){ .lang-switch{font-size:12px} /* 手机上英文导语允许折行（中文版是强制一行的 nowrap） 2026-10-27：用户给导语加了
（桌面/平板固定两行），但手机窄到
+ 自动折行＝4 行 ⇒ 手机上取消硬断，交给自然折行（390/360/320 实测 3 行） ⚠️ 2026-10-28：
前必须留一个空格（源里写 `coaching,
`）。display:none 会把换行连同位置 一起吞掉，逗号后无空格时两个词拼成 `coaching,focused`——iOS 不在逗号后断行， 该「长词」溢出卡片被裁（用户手机截图 bug.jpg 实证） */ .hero-lead{font-size:clamp(11.5px,3.9vw,15px);line-height:1.55;font-weight:700;white-space:normal;max-width:none} .hero-lead br{display:none} /* 英文理念框：最长一行实测 22.38em（canvas 100px 精测，Inter 400） ⚠️ 2026-11-06 用户反馈手机上折成 3 行：旧公式 clamp(11px,3.35vw,13.5px) 在 390 宽给 13.06px， 加 15px 内边距后整框只比可用宽小 2px —— iOS 字形略宽于 headless Chrome 就折第三行。 ⇒ 改「按可用宽算字号」公式：内容宽 = 100vw − 90px（框架 28 + 首屏内距 36 + 边框 2）， 字号 = (100vw − 96px)/24 ⇒ 390 宽给 12.25px，整框留约 10% 余量抗各端字形差异； 320 宽给 9.3px，任何宽度都保证
两行不折三行；13.5px 上限与中文版一致； 框内边距 15→12 一并补回可用宽 */ .core{font-size:min(13.5px, calc((100vw - 96px)/24));padding:10px 12px;letter-spacing:0;line-height:1.85} } —— injected at build time (global layer / fonts / top-frame, from EN hero preview) */ /* /* ===== 全局层（方案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} } @media (max-width:560px){ .f-brand .f-slogan br{display:none} } —— injected at build time (from EN footer preview) */