/* * about_v2.css —— 关于页新版设计 ?new=1 测试页（英文站 /about-all/?new=1，正文由 app\service\AboutV2 输出） * 桌面（≥1200）按 Claude Design「VOOHU 英文站关于页」逐值还原；设计稿只有桌面版，平板 / 手机的排法是这里补的（390 无横向滚动）。 * 全部规则收在 #vh-about-v2 下（id 前缀压过站点通用样式），不影响页头页脚。 * 内容宽度按全站约定（vh-layout.css）：<1440 为 1200 居中（两侧 24），≥1440 跟随内容列 --vh-page。 * 字体：英文正文用应用领域页同一套自托管 "VHAP Poppins"（application-preview-fonts.css，400 / 600 / 700）。 */ /* 站点外层 #page.dbox 的 overflow:hidden 会让吸顶锚点栏失效，同 application-preview-board.css 的做法 */ #page.dbox:has(#vh-about-v2) { overflow: clip; } /* 通用横幅（含隐藏的标题）不显示，本页首屏自带 H1；页头已按 nhnavsTitleTag 把横幅标题改成 div */ .nhnavs { display: none !important; } #vh-about-v2 { --av2-red: #C30D23; --av2-red-hover: #8A0A18; --av2-red-hot: #E0213A; --av2-ink: #1A1A1A; --av2-muted: #565B63; --av2-rule: #E4E4E4; --av2-line: #C9C9C9; --av2-soft: #F4F4F4; --av2-note: #FFF6EA; --av2-gap: 24px; --av2-vis: 4; position: relative; overflow-x: clip; background: #FFFFFF; color: var(--av2-ink); font-family: "VHAP Poppins", "Poppins", "Poppins Fallback", Arial, sans-serif; -webkit-font-smoothing: antialiased; } #vh-about-v2 * { font-family: inherit; } #vh-about-v2[lang="zh-CN"] { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; } #vh-about-v2[lang="zh-CN"] .av2-kicker { letter-spacing: 1px; } #vh-about-v2[lang="zh-CN"] .av2-stat-l { letter-spacing: 1px; } #vh-about-v2 h1, #vh-about-v2 h2, #vh-about-v2 h3, #vh-about-v2 p, #vh-about-v2 ul, #vh-about-v2 ol, #vh-about-v2 figure { margin: 0; padding: 0; } #vh-about-v2 ul, #vh-about-v2 ol { list-style: none; } #vh-about-v2 img { display: block; max-width: none; } #vh-about-v2 a { color: var(--av2-red); } #vh-about-v2 :focus-visible { outline: 2px solid var(--av2-red); outline-offset: 3px; } #vh-about-v2 [data-tone="dark"] :focus-visible { outline-color: #FFFFFF; } #vh-about-v2 [data-zoom] img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); } #vh-about-v2 [data-zoom]:hover img { transform: scale(1.04); } #vh-about-v2 [data-nudge] svg { transition: transform .25s ease; } #vh-about-v2 [data-nudge]:hover svg { transform: translateX(4px); } #vh-about-v2 .av2-wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } @media (min-width: 1440px) { html #vh-about-v2 .av2-wrap { max-width: calc(var(--vh-page, 1240px) + 48px); } } /* ---------------------------------------------------------------- 通用：眉题、标题、按钮、卡片、要点 */ #vh-about-v2 .av2-kicker { height: 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 3px; color: var(--av2-red); } #vh-about-v2 .av2-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--av2-red); } #vh-about-v2 .av2-kicker--hero { color: var(--av2-note); } #vh-about-v2 .av2-kicker--hero .av2-dot { background: var(--av2-red-hot); } #vh-about-v2 .av2-accent { color: var(--av2-red); } #vh-about-v2 .av2-head { max-width: 792px; display: flex; flex-direction: column; gap: 16px; } #vh-about-v2 .av2-h2 { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.01em; color: var(--av2-ink); } #vh-about-v2 .av2-desc { font-size: 16px; line-height: 26px; color: var(--av2-muted); text-wrap: pretty; } #vh-about-v2 .av2-lead { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--av2-ink); text-wrap: balance; } #vh-about-v2 .av2-sec { position: relative; padding: 96px 0; background: #FFFFFF; } #vh-about-v2 .av2-sec--grey { background: var(--av2-soft); } #vh-about-v2 [id="about"], #vh-about-v2 [id="path"], #vh-about-v2 [id="values"], #vh-about-v2 [id="philosophy"], #vh-about-v2 [id="future"], #vh-about-v2 [id="production"] { scroll-margin-top: 200px; } #vh-about-v2 .av2-btns { display: flex; flex-wrap: wrap; gap: 12px; } #vh-about-v2 .av2-btn { height: 48px; box-sizing: border-box; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; } #vh-about-v2 .av2-btn--lg { height: 52px; padding: 0 28px; } #vh-about-v2 .av2-btn--red { background: var(--av2-red); border-color: var(--av2-red); color: #FFFFFF; } #vh-about-v2 .av2-btn--red:hover { background: var(--av2-red-hover); border-color: var(--av2-red-hover); color: #FFFFFF; } #vh-about-v2 .av2-btn--ghost { border-color: rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; } #vh-about-v2 .av2-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); color: #FFFFFF; } #vh-about-v2 .av2-btn--outline { border-color: var(--av2-red); background: #FFFFFF; color: var(--av2-red); } #vh-about-v2 .av2-btn--outline:hover { background: var(--av2-red); color: #FFFFFF; } #vh-about-v2 .av2-btn--grey { padding: 0 20px 0 24px; border-color: var(--av2-line); background: #FFFFFF; color: var(--av2-ink); } #vh-about-v2 .av2-btn--grey:hover { border-color: var(--av2-red); color: var(--av2-red); } #vh-about-v2 .av2-btn--white { padding: 0 20px 0 24px; border-color: #FFFFFF; background: #FFFFFF; color: var(--av2-red); } #vh-about-v2 .av2-btn--white:hover { border-color: var(--av2-note); background: var(--av2-note); color: var(--av2-red-hover); } #vh-about-v2 .av2-card { min-width: 0; border: 1px solid var(--av2-rule); border-radius: 10px; overflow: hidden; background: #FFFFFF; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } #vh-about-v2 .av2-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26, 26, 26, .1); border-color: var(--av2-red); } #vh-about-v2 .av2-num { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--av2-red); font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-num--up { text-transform: uppercase; } #vh-about-v2 .av2-bullets { display: flex; flex-direction: column; gap: 12px; } #vh-about-v2 .av2-bullets li { position: relative; padding-left: 16px; font-size: 15px; line-height: 26px; color: var(--av2-muted); text-wrap: pretty; } #vh-about-v2 .av2-bullets li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; background: var(--av2-red); } #vh-about-v2 .av2-bullets--sm { margin-top: 12px; gap: 8px; } #vh-about-v2 .av2-bullets--sm li { padding-left: 14px; font-size: 14px; line-height: 22px; } #vh-about-v2 .av2-bullets--sm li::before { top: 9px; } #vh-about-v2 .av2-strip { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; border-radius: 10px; } #vh-about-v2 .av2-strip--grey { padding: 20px 20px 20px 28px; background: var(--av2-soft); } #vh-about-v2 .av2-strip--line { padding: 24px 24px 24px 32px; border: 1px solid var(--av2-rule); background: #FFFFFF; } #vh-about-v2 .av2-strip-t { min-width: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--av2-ink); text-wrap: pretty; } #vh-about-v2 .av2-strip-lead { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; } #vh-about-v2 .av2-strip-ico { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--av2-note); color: var(--av2-red); } #vh-about-v2 .av2-strip--line .av2-btns { flex: none; } /* ---------------------------------------------------------------- 面包屑 */ #vh-about-v2 .av2-crumb { border-bottom: 1px solid var(--av2-rule); background: #FFFFFF; } #vh-about-v2 .av2-crumb .av2-wrap { min-height: 48px; display: flex; align-items: center; } #vh-about-v2 .av2-crumb ol { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--av2-muted); } #vh-about-v2 .av2-crumb li { display: flex; align-items: center; gap: 8px; } #vh-about-v2 .av2-crumb a { color: var(--av2-muted); text-decoration: none; } #vh-about-v2 .av2-crumb a:hover { color: var(--av2-red); } #vh-about-v2 .av2-crumb li > span { color: var(--av2-line); } #vh-about-v2 .av2-crumb li[aria-current] { font-weight: 500; color: var(--av2-ink); } /* ---------------------------------------------------------------- 首屏（深色） */ #vh-about-v2 .av2-hero { position: relative; overflow: hidden; background: var(--av2-ink); color: #FFFFFF; } #vh-about-v2 .av2-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; } #vh-about-v2 .av2-hero-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 80% 38%, rgba(195, 13, 35, .22) 0%, rgba(195, 13, 35, 0) 70%); } #vh-about-v2 .av2-hero-in { position: relative; padding-top: 72px; padding-bottom: 72px; } #vh-about-v2 .av2-hero-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } #vh-about-v2 .av2-hero-text { grid-column: 1 / 7; min-width: 0; } #vh-about-v2 .av2-h1 { margin-top: 24px; font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; } #vh-about-v2 .av2-h1 .av2-accent { color: var(--av2-red-hot); } #vh-about-v2 .av2-hero-desc { margin-top: 24px; font-size: 18px; line-height: 30px; color: rgba(255, 255, 255, .82); text-wrap: pretty; } #vh-about-v2 .av2-hero-text .av2-btns { margin-top: 32px; } #vh-about-v2 .av2-video { grid-column: 7 / 13; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; overflow: hidden; background: #FFFFFF; cursor: pointer; transition: border-color .3s ease, transform .3s ease; } #vh-about-v2 .av2-video:hover { border-color: var(--av2-red-hot); transform: translateY(-4px); } #vh-about-v2 .av2-video img { width: 100%; height: 100%; object-fit: cover; } #vh-about-v2 .av2-play { position: absolute; left: 20px; bottom: 20px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--av2-red); color: #FFFFFF; box-shadow: 0 8px 20px rgba(195, 13, 35, .35); } #vh-about-v2 .av2-stats { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; } #vh-about-v2 .av2-stats li { position: relative; min-width: 0; padding-top: 24px; border-top: 2px solid rgba(255, 255, 255, .22); } #vh-about-v2 .av2-stat-bar { position: absolute; left: 0; top: -2px; width: 48px; height: 2px; background: var(--av2-red-hot); } #vh-about-v2 .av2-stats strong { display: block; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; color: var(--av2-red-hot); font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-stat-l { display: block; margin-top: 8px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 1px; color: rgba(255, 255, 255, .78); } /* ---------------------------------------------------------------- 锚点栏（吸顶；top 由 about_v2.js 贴在固定页头下沿） */ #vh-about-v2 .av2-anchors { position: sticky; top: 0; z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--av2-rule); transition: box-shadow .25s ease; } #vh-about-v2 .av2-anchors.is-stuck { box-shadow: 0 8px 20px rgba(26, 26, 26, .08); } #vh-about-v2 .av2-anchors-row { position: relative; height: 64px; display: flex; align-items: stretch; } #vh-about-v2 .av2-anchors-rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--av2-ink); } #vh-about-v2 .av2-anchor { position: relative; flex: 1 1 0; min-width: max-content; box-sizing: border-box; padding-top: 2px; display: flex; align-items: center; color: var(--av2-ink); text-decoration: none; white-space: nowrap; transition: color .15s ease; } #vh-about-v2 .av2-anchor:hover { color: var(--av2-red); } #vh-about-v2 .av2-anchor-bar { position: absolute; top: 0; left: 16px; right: 16px; height: 2px; background: transparent; transition: background .25s ease; } #vh-about-v2 .av2-anchor-box { flex: 1; padding: 0 16px; border-left: 1px solid var(--av2-rule); display: flex; flex-direction: column; gap: 2px; } #vh-about-v2 .av2-anchors-rule + .av2-anchor .av2-anchor-bar { left: 0; } #vh-about-v2 .av2-anchors-rule + .av2-anchor .av2-anchor-box { padding-left: 0; border-left: 0; } #vh-about-v2 .av2-anchor-no { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--av2-muted); } #vh-about-v2 .av2-anchor-t { font-size: 15px; line-height: 20px; font-weight: 500; } #vh-about-v2 .av2-anchor.is-on { color: var(--av2-red); } #vh-about-v2 .av2-anchor.is-on .av2-anchor-bar { background: var(--av2-red); } #vh-about-v2 .av2-anchor.is-on .av2-anchor-no { color: var(--av2-red); } #vh-about-v2 .av2-anchor.is-on .av2-anchor-t { font-weight: 600; } /* ---------------------------------------------------------------- S1 关于我们 */ #vh-about-v2 .av2-about-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; } #vh-about-v2 .av2-about-paras { grid-column: 1 / 7; min-width: 0; border-top: 2px solid var(--av2-ink); } #vh-about-v2 .av2-para { padding: 24px 0; border-bottom: 1px solid var(--av2-rule); } #vh-about-v2 .av2-para-body { font-size: 15px; line-height: 26px; color: var(--av2-muted); text-wrap: pretty; } #vh-about-v2 .av2-para-body strong { display: block; margin-bottom: 8px; font-size: 17px; line-height: 28px; font-weight: 600; color: var(--av2-ink); } #vh-about-v2 .av2-para-stmt { font-size: 17px; line-height: 28px; font-weight: 600; color: var(--av2-ink); text-wrap: pretty; } #vh-about-v2 .av2-para a { font-weight: 500; color: var(--av2-red); text-decoration: underline; text-decoration-color: rgba(195, 13, 35, .35); text-decoration-thickness: 1px; text-underline-offset: 4px; } #vh-about-v2 .av2-para-stmt a { font-weight: 600; } #vh-about-v2 .av2-para a:hover { color: var(--av2-red-hover); text-decoration-color: var(--av2-red-hover); } #vh-about-v2 .av2-about-media { grid-column: 7 / 13; min-width: 0; display: flex; flex-direction: column; gap: 24px; } #vh-about-v2 .av2-showroom { position: relative; flex: 1 1 auto; min-height: 300px; border: 1px solid var(--av2-rule); border-radius: 10px; overflow: hidden; background: var(--av2-soft); } #vh-about-v2 .av2-showroom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } #vh-about-v2 .av2-brand { flex: none; padding: 32px; border-radius: 10px; background: var(--av2-red); color: #FFFFFF; } #vh-about-v2 .av2-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #vh-about-v2 .av2-brand-top img { width: 207px; height: 40px; } #vh-about-v2 .av2-brand-sub { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--av2-note); } #vh-about-v2 .av2-brand-callouts { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; } #vh-about-v2 .av2-brand-callouts > div { min-width: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .32); } #vh-about-v2 .av2-callout-k { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1px; color: var(--av2-note); } #vh-about-v2 .av2-callout-v { margin-top: 8px; font-size: 18px; line-height: 26px; font-weight: 600; color: #FFFFFF; } #vh-about-v2 .av2-brand-cta { margin-top: 32px; display: flex; } /* ---------------------------------------------------------------- S2 发展历程（一次 --av2-vis 张；--av2-idx 由 about_v2.js 设置，没设时停在最后几年） */ #vh-about-v2 .av2-path-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; } #vh-about-v2 .av2-path-head .av2-head { grid-column: 1 / 9; min-width: 0; } #vh-about-v2 .av2-path-ctrl { grid-column: 9 / 13; justify-self: end; display: flex; gap: 12px; } #vh-about-v2 .av2-arrow { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--av2-line); border-radius: 10px; background: #FFFFFF; color: var(--av2-ink); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } #vh-about-v2 .av2-arrow:hover { background: var(--av2-red); border-color: var(--av2-red); color: #FFFFFF; } #vh-about-v2 .av2-arrow:disabled { opacity: .35; cursor: default; } #vh-about-v2 .av2-arrow:disabled:hover { background: #FFFFFF; border-color: var(--av2-line); color: var(--av2-ink); } #vh-about-v2 .av2-path { --av2-pos: var(--av2-idx, calc(var(--av2-n) - var(--av2-vis))); } #vh-about-v2 .av2-rail { position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(var(--av2-n), minmax(0, 1fr)); } #vh-about-v2 .av2-rail-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--av2-line); } #vh-about-v2 .av2-rail-blk { position: absolute; top: 0; left: calc(var(--av2-pos) / var(--av2-n) * 100%); width: calc(var(--av2-vis) / var(--av2-n) * 100%); height: 2px; background: var(--av2-red); transition: left .6s cubic-bezier(.2, .7, .2, 1); } #vh-about-v2 .av2-rail-y { position: relative; min-height: 48px; margin: 0; padding: 16px 0 0 12px; display: flex; align-items: flex-start; border: 0; background: none; font: inherit; color: var(--av2-muted); cursor: pointer; text-align: left; transition: color .2s ease; } #vh-about-v2 .av2-rail-y:hover { color: var(--av2-red); } #vh-about-v2 .av2-rail-tick { position: absolute; left: 0; top: 0; width: 2px; height: 12px; background: var(--av2-line); transition: background .3s ease; } #vh-about-v2 .av2-rail-yt { font-size: 14px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-rail-y.is-on { color: var(--av2-ink); } #vh-about-v2 .av2-rail-y.is-on:hover { color: var(--av2-red); } #vh-about-v2 .av2-rail-y.is-on .av2-rail-tick { background: var(--av2-red); } #vh-about-v2 .av2-rail-y.is-on .av2-rail-yt { font-weight: 600; } #vh-about-v2 .av2-track-clip { margin: 24px 0 -32px; padding: 8px 0 32px; overflow: hidden; } #vh-about-v2 .av2-track { display: flex; align-items: stretch; gap: var(--av2-gap); transform: translateX(calc(var(--av2-pos) * -1 * (100% + var(--av2-gap)) / var(--av2-vis))); transition: transform .6s cubic-bezier(.2, .7, .2, 1); } #vh-about-v2 .av2-mcard { flex: none; width: calc((100% - (var(--av2-vis) - 1) * var(--av2-gap)) / var(--av2-vis)); box-sizing: border-box; display: flex; flex-direction: column; } #vh-about-v2 .av2-mcard-img { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--av2-rule); background: #FFFFFF; overflow: hidden; } #vh-about-v2 .av2-mcard-img img { width: 100%; height: 100%; object-fit: contain; } #vh-about-v2 .av2-mcard-body { flex: 1; padding: 20px 24px 24px; display: flex; flex-direction: column; } #vh-about-v2 .av2-mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #vh-about-v2 .av2-mcard-y { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--av2-red); font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-mcard-tag { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--av2-soft); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--av2-muted); white-space: nowrap; } #vh-about-v2 .av2-mcard-t { margin-top: 12px; min-height: 52px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--av2-ink); text-wrap: balance; } /* ---------------------------------------------------------------- S3 品牌价值（左侧大卡跨两行，右侧两张横卡） */ #vh-about-v2 .av2-values { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } #vh-about-v2 .av2-vimg { position: relative; min-height: 224px; overflow: hidden; background: var(--av2-rule); } #vh-about-v2 .av2-vimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #vh-about-v2 .av2-vbig { grid-column: 1 / 7; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; } #vh-about-v2 .av2-vbig .av2-vbody { padding: 24px 32px 32px; } #vh-about-v2 .av2-vbig h3 { margin-top: 8px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--av2-ink); text-wrap: balance; } #vh-about-v2 .av2-vbig p { margin-top: 12px; font-size: 15px; line-height: 26px; color: var(--av2-muted); text-wrap: pretty; } #vh-about-v2 .av2-vsm { grid-column: 7 / 13; display: flex; flex-wrap: wrap; } #vh-about-v2 .av2-vsm .av2-vimg { flex: 1 1 calc(50% - 12px); min-width: 240px; } #vh-about-v2 .av2-vsm .av2-vbody { flex: 1 1 calc(50% + 12px); min-width: 240px; box-sizing: border-box; padding: 24px; } #vh-about-v2 .av2-vsm h3 { margin-top: 8px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--av2-ink); text-wrap: balance; } #vh-about-v2 .av2-vsm p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--av2-muted); text-wrap: pretty; } /* ---------------------------------------------------------------- S4 经营理念 */ #vh-about-v2 .av2-principles { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } #vh-about-v2 .av2-pcard { grid-column: span 3; display: flex; flex-direction: column; } #vh-about-v2 .av2-pimg { aspect-ratio: 3 / 2; overflow: hidden; background: var(--av2-rule); } #vh-about-v2 .av2-pimg img { width: 100%; height: 100%; object-fit: cover; } #vh-about-v2 .av2-pbody { padding: 20px 24px 24px; } #vh-about-v2 .av2-pbody h3 { margin-top: 8px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--av2-ink); } #vh-about-v2 .av2-pbody p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--av2-muted); text-wrap: pretty; } /* ---------------------------------------------------------------- S5 未来规划 */ #vh-about-v2 .av2-phases { margin-top: 48px; border-top: 2px solid var(--av2-ink); } #vh-about-v2 .av2-phase { padding: 32px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; border-bottom: 1px solid var(--av2-rule); } #vh-about-v2 .av2-phase-when { grid-column: 1 / 4; min-width: 0; } #vh-about-v2 .av2-phase-y { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; color: var(--av2-red); font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-phase-when h3 { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--av2-ink); } #vh-about-v2 .av2-phase .av2-bullets { grid-column: 4 / 9; min-width: 0; } #vh-about-v2 .av2-phase-img { grid-column: 9 / 13; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--av2-rule); } #vh-about-v2 .av2-phase-img img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------- S6 总部与工厂 */ #vh-about-v2 .av2-bases { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } #vh-about-v2 .av2-base { grid-column: span 4; display: flex; flex-direction: column; } #vh-about-v2 .av2-base-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--av2-rule); } #vh-about-v2 .av2-base-img img { width: 100%; height: 100%; object-fit: cover; } #vh-about-v2 .av2-base-body { flex: 1; padding: 24px; display: flex; flex-direction: column; } #vh-about-v2 .av2-base-body h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--av2-ink); } #vh-about-v2 .av2-base-city { margin-top: 4px; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--av2-ink); } #vh-about-v2 .av2-base-addr { margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--av2-muted); text-wrap: pretty; } #vh-about-v2 .av2-base-tel { margin-top: auto; padding-top: 16px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: flex-end; gap: 8px; align-self: flex-start; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--av2-red); text-decoration: none; font-variant-numeric: tabular-nums; } #vh-about-v2 .av2-base-tel:hover { color: var(--av2-red-hover); } #vh-about-v2 .av2-base-tel svg { margin-bottom: 3px; } /* ---------------------------------------------------------------- 视频弹窗（about_v2.js 生成，挂在 body 下） */ .av2-video-modal { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .82); } .av2-video-modal-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000000; } .av2-video-modal video { display: block; width: 100%; height: 100%; } .av2-video-modal-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #FFFFFF; font-size: 26px; line-height: 44px; cursor: pointer; } .av2-video-modal-x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } /* ---------------------------------------------------------------- 1024–1199：桌面版式收窄 */ @media (max-width: 1199px) { #vh-about-v2 .av2-h1 { font-size: 44px; line-height: 52px; } #vh-about-v2 .av2-pcard { grid-column: span 6; } #vh-about-v2 .av2-vsm .av2-vimg, #vh-about-v2 .av2-vsm .av2-vbody { min-width: 200px; } } /* ---------------------------------------------------------------- 平板（≤1023）：首屏、关于我们、价值观改单列，历程一次 2 张 */ @media (max-width: 1023px) { #vh-about-v2 { --av2-vis: 2; } #vh-about-v2 .av2-sec { padding: 80px 0; } #vh-about-v2 .av2-hero-in { padding-top: 56px; padding-bottom: 56px; } #vh-about-v2 .av2-hero-row { row-gap: 40px; } #vh-about-v2 .av2-hero-text, #vh-about-v2 .av2-video { grid-column: 1 / -1; } #vh-about-v2 .av2-stats { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #vh-about-v2 .av2-about-paras, #vh-about-v2 .av2-about-media { grid-column: 1 / -1; } #vh-about-v2 .av2-about-media { margin-top: 32px; } #vh-about-v2 .av2-showroom { flex: none; aspect-ratio: 584 / 477; min-height: 0; } #vh-about-v2 .av2-path-head .av2-head { grid-column: 1 / 10; } #vh-about-v2 .av2-path-ctrl { grid-column: 10 / 13; } #vh-about-v2 .av2-vbig { grid-column: 1 / -1; grid-row: auto; display: flex; flex-direction: column; } #vh-about-v2 .av2-vbig .av2-vimg { aspect-ratio: 16 / 9; min-height: 0; } #vh-about-v2 .av2-vsm { grid-column: 1 / -1; } #vh-about-v2 .av2-phase-when { grid-column: 1 / -1; } #vh-about-v2 .av2-phase .av2-bullets { grid-column: 1 / 8; } #vh-about-v2 .av2-phase-img { grid-column: 8 / 13; } #vh-about-v2 .av2-base { grid-column: span 6; } #vh-about-v2 .av2-strip--line .av2-btns { flex: 1 1 100%; } } /* ---------------------------------------------------------------- 手机（≤767）：全部单列，锚点栏横向滑动，历程一次 1 张 */ @media (max-width: 767px) { #vh-about-v2 { --av2-vis: 1; --av2-gap: 16px; } #vh-about-v2 .av2-wrap { padding: 0 16px; } #vh-about-v2 .av2-sec { padding: 64px 0; } #vh-about-v2 .av2-kicker { letter-spacing: 2px; } #vh-about-v2 .av2-h2 { font-size: 30px; line-height: 38px; } #vh-about-v2 .av2-lead { font-size: 18px; line-height: 28px; } #vh-about-v2 .av2-hero-in { padding-top: 40px; padding-bottom: 48px; } #vh-about-v2 .av2-h1 { margin-top: 20px; font-size: 36px; line-height: 44px; } #vh-about-v2 .av2-hero-desc { margin-top: 20px; font-size: 16px; line-height: 26px; } #vh-about-v2 .av2-hero-text .av2-btns { margin-top: 28px; } #vh-about-v2 .av2-btn--lg { height: 48px; padding: 0 22px; } #vh-about-v2 .av2-stats { margin-top: 40px; column-gap: 16px; } #vh-about-v2 .av2-stats strong { font-size: 32px; line-height: 40px; } #vh-about-v2 .av2-stat-l { font-size: 12px; line-height: 16px; } #vh-about-v2 .av2-anchors-row { height: 56px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #vh-about-v2 .av2-anchors-row::-webkit-scrollbar { display: none; } #vh-about-v2 .av2-anchors-rule { display: none; } #vh-about-v2 .av2-anchor { flex: none; } #vh-about-v2 .av2-anchors-row { box-shadow: inset 0 2px 0 var(--av2-ink); } #vh-about-v2 .av2-anchor-t { font-size: 14px; } #vh-about-v2 .av2-para-body strong, #vh-about-v2 .av2-para-stmt { font-size: 16px; line-height: 26px; } #vh-about-v2 .av2-brand { padding: 24px; } #vh-about-v2 .av2-brand-top { flex-wrap: wrap; } #vh-about-v2 .av2-brand-top img { width: 166px; height: 32px; } #vh-about-v2 .av2-brand-callouts { grid-template-columns: minmax(0, 1fr); } #vh-about-v2 .av2-strip--grey, #vh-about-v2 .av2-strip--line { padding: 20px; } #vh-about-v2 .av2-strip-lead { flex: 1 1 100%; } #vh-about-v2 .av2-path-head { row-gap: 24px; } #vh-about-v2 .av2-path-head .av2-head, #vh-about-v2 .av2-path-ctrl { grid-column: 1 / -1; } #vh-about-v2 .av2-path-ctrl { justify-self: start; } #vh-about-v2 .av2-rail { margin-top: 32px; } #vh-about-v2 .av2-rail-y { padding-left: 6px; } #vh-about-v2 .av2-rail-yt { font-size: 12px; } #vh-about-v2 .av2-vsm .av2-vimg { flex-basis: 100%; min-width: 0; aspect-ratio: 16 / 9; min-height: 0; } #vh-about-v2 .av2-vsm .av2-vbody { flex-basis: 100%; min-width: 0; } #vh-about-v2 .av2-vbig .av2-vbody { padding: 24px; } #vh-about-v2 .av2-vbig h3 { font-size: 20px; line-height: 28px; } #vh-about-v2 .av2-pcard, #vh-about-v2 .av2-base { grid-column: 1 / -1; } #vh-about-v2 .av2-phase { padding: 28px 0; } #vh-about-v2 .av2-phase-y { font-size: 32px; line-height: 40px; } #vh-about-v2 .av2-phase .av2-bullets, #vh-about-v2 .av2-phase-img { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { #vh-about-v2 *, #vh-about-v2 *::before, #vh-about-v2 *::after { transition-duration: 0s !important; } }