/* =============================================================
   WELLGO — About Us 页面 (Figma 1:1567)
   1920×4652 画板。页头/页脚/悬浮栏复用 style.css 公共组件。
   顶层区块页面偏移 = 设计 Y − 140px（页头高度）。
   ============================================================= */

/* ---------- ① Hero 首屏 (设计 y150, 高 373) ---------- */
.about-hero {
  position: relative;
  width: var(--page-w);
  height: 373px;
  margin-top: 10px;          /* 150 − 140 */
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-hero-overlay {
  position: absolute;
  right: 0;
  top: 0;
  width: 861.5px;
  height: 373px;
}
.about-hero-title {
  position: absolute;
  left: 1334px;
  top: 150px;
  font-size: 55px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ---------- ② Intro 引言 (设计 y523, 高 487) ---------- */
.about-intro {
  width: var(--page-w);
  /* 原设计固定 487px 仅容纳一段引言；现为三段文字，改为随内容自适应增高 */
  height: auto;
  padding-bottom: 90px;      /* 底部留白，呼应顶部 99px 的节奏 */
  margin-top: 0;             /* 523 − 523 上一区块底 */
  background: var(--panel-light);
}
.about-intro-inner {
  position: relative;
  width: 1083px;
  margin: 0 auto;
  padding-top: 99px;         /* 622 − 523 */
  text-align: center;
}
.about-intro-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-primary);
}
.about-intro-sub {
  margin-top: 14px;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand-red);
}
.about-intro-text {
  margin-top: 60px;          /* 791 − 523 − 99 − 55 − 14 − 42 */
  font-size: 18px;
  color: rgba(102,102,102,0.56);   /* 设计稿正文 ~56% 透明度 (#666 叠 #F1F0F1 ≈ #A3) */
  line-height: 1.5;
}
.about-intro-text strong {
  color: var(--brand-red);
  font-weight: 700;
}
.about-intro-text + .about-intro-text {
  margin-top: 28px;          /* 三段文字之间的段落间距 */
}

/* ---------- ③ 图片轮播 (设计 y1040, 高 400) ---------- */
.about-carousel {
  position: relative;
  width: var(--page-w);
  height: 400px;
  margin-top: 30px;          /* 1040 − 1010 */
}
.about-case {
  position: absolute;
  top: 0;
  height: 400px;
  overflow: hidden;
  transition: transform .35s ease, opacity .35s ease;
}
.about-case--left   { left: 193px;   width: 326px; }
.about-case--center { left: 549px;   width: 822px; }
.about-case--right  { left: 1401px;  width: 327px; }
.about-case-img {
  position: absolute;
  max-width: none;
}
.about-case-img--left   { width: 556.66%;  height: 162.75%; left: 0.07%;   top: -34.98%; }
.about-case-img--center { width: 196.1%;   height: 144.13%; left: -42.8%;  top: -19.36%; }
.about-case-img--right  { width: 556.66%;  height: 162.75%; left: -422.18%; top: -34.98%; }

.about-case-arrow {
  position: absolute;
  top: 156px;                /* 1196 − 1040 */
  z-index: 2;
  width: 36px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.about-case-arrow:hover { opacity: .75; }
.about-case-arrow img { width: 36px; height: 88px; }
.about-case-arrow--left  { left: 193px; }
.about-case-arrow--right { left: 1691px; }
.about-case-arrow--right img { transform: rotate(180deg); }
.about-swiper { width: min(1535px, 100%); height: 400px; margin: 0 auto; overflow: hidden; }
.about-swiper .swiper-wrapper { align-items: stretch; }
.about-swiper .about-case { position: relative; left: auto; top: auto; flex: 0 0 auto; }
.about-carousel { overflow: hidden; }
.about-swiper .about-case--left,
.about-swiper .about-case--center,
.about-swiper .about-case--right { width: 822px; }
.about-swiper .about-case-img,
.about-swiper .about-case-img--left,
.about-swiper .about-case-img--center,
.about-swiper .about-case-img--right {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- 分隔线 (设计 y1500) ---------- */
.line-h--about { margin-top: 60px; }   /* 1500 − 1440 */

/* ---------- ④ 时间轴 (设计 y1560, 高 859) ---------- */
.about-timeline {
  position: relative;
  width: var(--page-w);
  height: 859px;             /* 1560 → 2419, 内容全绝对定位需显式占位 */
  margin-top: 60px;          /* 1560 − 1500 */
}
.about-timeline-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.about-timeline-mobile { display: none; }

/* 背景残影图 */
.about-timeline-bg-clip {
  position: absolute;
  left: 0;
  top: 158px;                /* 1718 − 1560 */
  width: var(--page-w);
  height: 701px;
  overflow: hidden;
}
.about-timeline-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: 100%;
  opacity: .2;
  object-fit: cover;
  object-position: bottom;
}

/* 时间轴内容框 (page 260,1672 → 相对框 top 112) */
.about-timeline-track {
  position: absolute;
  left: 260px;
  top: 112px;                /* 1672 − 1560 */
  width: 1400px;
  height: 747px;
}

/* 顶部/底部说明文字 */
.tl-text {
  position: absolute;
  font-size: 20px;
  color: #333;   /* 设计稿正文 ~56% 透明度 */
  line-height: 1.3;
}
.tl-text--1 { left: 24.07px;  top: 17.43px; width: 278.9px; }
.tl-text--2 { left: 350.3px;  top: 17.43px; width: 278.9px; }
.tl-text--3 { left: 676.52px; top: 17.43px; width: 278.9px; }
.tl-text--4 { left: 1008.55px; top: 17.43px; width: 262.3px; }
.tl-text--5 { left: 1166px;   top: 665px;   width: 214px; }

/* 年份徽章 */
.tl-badge { position: absolute; }
.tl-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 10.958px;
  height: 300.486px;
  background: url("/skin/img/about-tl-line-554.svg") no-repeat center / 100% 100%;
}
.tl-line--tall { height: 332.33px; background-image: url("/skin/img/about-tl-line-553.svg"); }
.tl-line--up   { transform: rotate(180deg); }
.tl-year {
  position: absolute;
  left: 23.85px;
  height: 53.34px;
  background: var(--brand-red);
  border-radius: 9.668px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 0 25.783px;
  white-space: nowrap;
  width: 116.57px;
}
.tl-year--wide { width: 184.57px; }

/* 上排徽章 */
.tl-badge--1795 { left: 0;         top: 0; }
.tl-badge--1795 .tl-year { top: 279px; }
.tl-badge--1997 { left: 326.48px;  top: 31.85px; }
.tl-badge--1997 .tl-year { top: 245px; }
.tl-badge--2015 { left: 652.95px;  top: 31.85px; }
.tl-badge--2015 .tl-year { top: 245px; }
.tl-badge--2020 { left: 979.43px;  top: 31.23px; }
.tl-badge--2020 .tl-year { top: 245px; }

/* 下排徽章 (竖线旋转, 徽章在顶) */
.tl-badge--1995    { left: 163.24px; top: 278.91px; }
.tl-badge--2004    { left: 489.71px; top: 278.91px; }
.tl-badge--2019    { left: 816.19px; top: 278.91px; }
.tl-badge--present { left: 1142.78px; top: 278.91px; }
.tl-badge--1995 .tl-year,
.tl-badge--2004 .tl-year,
.tl-badge--2019 .tl-year,
.tl-badge--present .tl-year { top: 0; }

/* 底部编号条目 (红圆数字) */
.tl-numlist {
  position: absolute;
  left: 513.8px;
  top: 435px;
  display: flex;
  flex-direction: column;
  gap: 24.15px;
}
.tl-num-item {
  position: relative;
  padding-left: 36.52px;
}
.tl-num-dot {
  position: absolute;
  left: 0;
  top: 4.15px;
  width: 23.24px;
  height: 23.24px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 12.68px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-num-text {
  font-size: 20px;
  color: #333;
  width: 241.55px;
  line-height: 1.3;
}

/* 底部图文块 */
.tl-block { position: absolute; width: 279.7px; }
.tl-block--7 { left: 186.77px; top: 460px; }
.tl-block--8 { left: 840.87px; top: 435px; width: 278.9px; }
.tl-block-text { font-size: 20px; color: #333; line-height: 1.3; }
.tl-block img {
  width: 100%;
  margin-top: 16.6px;
  height: 118.45px;
  object-fit: cover;
}
.tl-block--8 img { height: 117.83px; }

/* ---------- 时间轴节点通用布局（fzlc 发展历程，8 个节点共用一条 {pboot:list}） ---------- */
/* 位置按 [list:i] 由 CSS 分配给节点，正文/图片随后台数据增减，不写死某几个格子 */
.tl-node { position: absolute; }
.tl-node--1 { left: 0;         top: 0; }
.tl-node--3 { left: 326.48px;  top: 31.85px; }
.tl-node--5 { left: 652.95px;  top: 31.85px; }
.tl-node--7 { left: 979.43px;  top: 31.23px; }
.tl-node--2 { left: 163.24px;  top: 278.91px; }
.tl-node--4 { left: 489.71px;  top: 278.91px; }
.tl-node--6 { left: 816.19px;  top: 278.91px; }
.tl-node--8 { left: 1142.78px; top: 278.91px; }

/* 竖线：上排朝下、下排朝上 */
.tl-node--1 .tl-line { height: 332.33px; background-image: url("/skin/img/about-tl-line-553.svg"); }
.tl-node--2 .tl-line, .tl-node--4 .tl-line,
.tl-node--6 .tl-line, .tl-node--8 .tl-line { transform: rotate(180deg); }

/* 年份位置（上排在下、下排在上） */
.tl-node--1 .tl-year { top: 279px; }
.tl-node--3 .tl-year, .tl-node--5 .tl-year, .tl-node--7 .tl-year { top: 245px; }
.tl-node--8 .tl-year { width: 184.57px; }

/* 节点正文（相对各自徽章，正文来自 [list:content]） */
.tl-node .tl-text { position: absolute; font-size: 20px; color: #333; line-height: 1.3; }
.tl-node--1 .tl-text { left: 24.07px;  top: 48.43px;  width: 278.9px; }
.tl-node--2 .tl-text { left: 23.53px;  top: 157.09px; width: 279.7px; }
.tl-node--3 .tl-text { left: 23.82px;  top: 17.43px;  width: 278.9px; }
.tl-node--4 .tl-text { left: 23.29px;  top: 156.09px; width: 241.55px; }
.tl-node--5 .tl-text { left: 23.57px;  top: 17.43px;  width: 278.9px; }
.tl-node--6 .tl-text { left: 23.81px;  top: 156.09px; width: 241.55px; }
.tl-node--7 .tl-text { left: 29.12px;  top: 17.43px;  width: 262.3px; }
.tl-node--8 .tl-text { left: 23.22px;  top: 156.09px; width: 234px; }

/* 节点图片（有缩略图才输出 .tl-node-img，无则不占位；onerror 兜底隐藏坏图） */
.tl-node-img { position: absolute; overflow: hidden; }
.tl-node-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-node--1 .tl-node-img { left: 24px;  top: 130px;  width: 160px; height: 100px; }
.tl-node--2 .tl-node-img { left: 23.53px; top: 291.09px; width: 279.7px; height: 100px; }
.tl-node--3 .tl-node-img { left: 24px;  top: 130px;  width: 160px; height: 100px; }
.tl-node--4 .tl-node-img { left: 23.29px; top: 276.09px; width: 160px; height: 100px; }
.tl-node--5 .tl-node-img { left: 24px;  top: 130px;  width: 160px; height: 100px; }
.tl-node--6 .tl-node-img { left: 23.81px; top: 290.09px; width: 160px; height: 100px; }
.tl-node--7 .tl-node-img { left: 24px;  top: 130px;  width: 160px; height: 100px; }
.tl-node--8 .tl-node-img { left: 23.22px; top: 276.09px; width: 234px; height: 100px; }

/* ---------- ⑤ Mission 使命 (设计 y2456, 高 612) ---------- */
.about-mission {
  position: relative;
  width: var(--page-w);
  height: 612px;
  margin-top: 37px;          /* 2456 − 2419 */
}
.about-mission-panel {
  position: absolute;
  left: 193px;
  top: 0;
  width: 767px;
  height: 612px;
  background: var(--panel-light);
}
.about-mission-text {
  position: absolute;
  left: 51px;                /* 244 − 193(面板) */
  top: 71px;                 /* 2527 − 2456 */
  width: 666px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 段落文字靠左（原 center，客户要求） */
  gap: 30px;
  text-align: left;          /* 段落文字靠左 */
}
.about-mission-title { font-size: 38px; font-weight: 700; color: var(--text-primary); line-height: 1.3; transform: translateX(-15px); text-align: center; align-self: center; }  /* 标题保持居中，设计稿标题偏左 ~15px(原始参照中心560.5 vs 副标题575) */
.about-mission-sub   { font-size: 32px; font-weight: 700; color: var(--brand-red); line-height: 1.3; text-align: center; align-self: center; }
.about-mission-para  { font-size: 20px; color: rgba(102,102,102,0.56); line-height: 1.3; }
.about-mission-red   { font-size: 20px; font-weight: 700; color: var(--brand-red); line-height: 1.3; }

.about-mission-img {
  position: absolute;
  left: 960px;
  top: 0;
  width: 960px;
  height: 612px;
  overflow: hidden;
}
.about-mission-img img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1599px) {
  .about-mission { width: 100%; height: auto; display: flex; margin-top: 32px; }
  .about-mission-panel, .about-mission-img { position: relative; left: auto; top: auto; width: 50%; height: auto; min-height: 520px; }
  .about-mission-text { position: relative; left: auto; top: auto; width: auto; padding: 56px 36px; }
  .about-mission-img img { position: absolute; inset: 0; }
}

@media (max-width: 767px) {
  .about-mission { display: flex; flex-direction: column; }
  .about-mission-panel, .about-mission-img { width: 100%; min-height: 0; }
  .about-mission-text { padding: 40px 24px; gap: 20px; }
  .about-mission-title { font-size: 30px; }
  .about-mission-sub { font-size: 24px; }
  .about-mission-para, .about-mission-red { font-size: 16px; }
  .about-mission-img { height: 300px; }
  .about-mission-img img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- ⑥ 世界地图 (设计 y3118, 高 873) ---------- */
.about-map {
  position: relative;
  width: var(--page-w);
  margin-top: 50px;          /* 3118 − 3068 */
}
.about-map-canvas {
  position: relative;
  left: 193px;
  width: 1535px;
  height: 873px;
  overflow: hidden;
}
.about-map-svg {
  position: absolute;
  left: 1.77%;
  top: 2.06%;
  width: 96.54%;
  height: 96.06%;
}
.about-map-detail {
  position: absolute;
  left: 206px;
  top: 168.29px;
  width: 980.5px;
  height: 454.7px;
}
.about-map-pins {
  position: absolute;
  left: 197px;
  top: 124px;
  width: 1008px;
  height: 514px;
}
.about-map-title {
  position: absolute;
  left: 904px;
  top: 427px;
  width: 281px;
  font-size: 55px;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.2;
  text-transform: capitalize;
}

/* 页脚：地图底(3991) → 页脚(4051) 留白 60 */
.footer--about { margin-top: 60px; }

/* Fluid page body: decorative layers remain local to the module. */
.about-hero { width: 100%; max-width: 100%; overflow: hidden; }

/* ---------- 响应式布局 ---------- */
@media (max-width: 1599px) {
  .about-hero, .about-intro, .about-carousel, .about-timeline, .about-map { width: 100%; }
  .about-hero { height: min(32vw, 373px); min-height: 220px; }
  .about-hero-overlay { width: 52%; height: 100%; }
  .about-hero-title { left: auto; right: 16%; top: 42%; font-size: clamp(32px, 4vw, 55px); }
  .about-intro { height: auto; padding: 64px 24px; }
  .about-intro-inner { width: min(100%, 900px); padding-top: 0; }
  .about-intro-text { margin-top: 36px; }
  .about-carousel { height: 32vw; min-height: 240px; }
  .about-case--left { left: 0; width: 22%; }
  .about-case--center { left: 24%; width: 52%; }
  .about-case--right { left: 78%; width: 22%; }
  .about-case-arrow--left { left: 0; }
  .about-case-arrow--right { left: auto; right: 0; }
  .about-timeline-bg-clip { width: 100%; }
  .about-timeline-track { left: 5%; width: 90%; }
  .about-map-canvas { left: 0; width: 100%; }
}

@media (max-width: 767px) {
  .about-hero { height: 220px; min-height: 0; }
  .about-hero-overlay { width: 68%; }
  .about-hero-title { right: 7%; top: 42%; font-size: 30px; }
  .about-intro { padding: 42px 18px; }
  .about-intro-title { font-size: 30px; }
  .about-intro-sub { font-size: 24px; }
  .about-intro-text { margin-top: 28px; font-size: 16px; }

  .about-carousel { height: 220px; margin-top: 20px; overflow: hidden; }
  .about-case { height: 220px; }
  .about-swiper { height: 220px; }
  .about-swiper .about-case--left,
  .about-swiper .about-case--center,
  .about-swiper .about-case--right { display: block; left: auto !important; width: 100% !important; }
  .about-swiper .about-case-img,
  .about-swiper .about-case-img--left,
  .about-swiper .about-case-img--center,
  .about-swiper .about-case-img--right { width: 100%; height: 100%; object-fit: cover; }
  .about-case-img--center { width: 140%; left: -20%; }
  .about-case-arrow { top: 66px; }
  .about-case-arrow--left { left: 14px; }
  .about-case-arrow--right { right: 14px; }

  .line-h--about { margin-top: 32px; }
  .about-timeline { height: auto; margin-top: 32px; padding: 0 18px; overflow: hidden; }
  .about-timeline-title { font-size: 24px; }
  .about-timeline-bg-clip, .about-timeline-track { display: none; }
  .about-timeline-mobile { position: relative; display: flex; flex-direction: column; gap: 22px; margin-top: 28px; padding-left: 24px; }
  .about-timeline-mobile::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: rgba(224,15,21,.25); }
  .tl-mobile-item { position: relative; padding: 0 0 4px 20px; font-size: 16px; line-height: 1.45; color: #555; }
  .tl-mobile-item::before { content: ""; position: absolute; left: -1px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px #fff; }
  .tl-mobile-year { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 8px; padding: 0 14px; border-radius: 6px; background: var(--brand-red); color: #fff; font-size: 16px; font-weight: 700; text-transform: capitalize; }
  .tl-mobile-item p { margin: 0 0 8px; }
  .tl-mobile-item img { width: 100%; height: 140px; margin-top: 8px; object-fit: cover; }

  .about-map { margin-top: 36px; padding: 0 18px; overflow: hidden; }
  .about-map-canvas { left: auto; width: 100%; height: 420px; }
  .about-map-svg { left: 0; top: 8%; width: 100%; height: 80%; }
  .about-map-detail { left: 8%; top: 20%; width: 78%; height: auto; }
  .about-map-pins { left: 8%; top: 18%; width: 80%; height: auto; }
  .about-map-title { left: auto; right: 10%; top: 45%; width: 140px; font-size: 26px; }
  .footer--about { margin-top: 36px; }

  /* 历史页移动端：公共 Footer Logo 改为正常流布局，避免覆盖 ABOUT 内容。 */
  .page:has(.about-hero) .pd-footer {
    height: auto;
    min-height: 0;
    padding: 40px 16px 32px;
    overflow: visible;
  }

  .page:has(.about-hero) .pd-footer-main {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .page:has(.about-hero) .pd-footer-main > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0;
  }

  .page:has(.about-hero) .pd-footer .pd-f-logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 237px !important;
    max-width: 70%;
    height: auto;
    margin: 28px 0 0;
    object-fit: contain;
  }

  .page:has(.about-hero) .pd-footer .pd-f-copy,
  .page:has(.about-hero) .pd-footer .pd-links-row {
    position: static !important;
    width: 100% !important;
    height: auto;
    margin: 28px 0 0;
  }
}