/* 关于我们页面样式 - gylf.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero { background: #eef3fb url('../img/gylf/61750220.jpg') 50% 50%/cover no-repeat; }
/* 「免费诊断」正常态沿用 .btn-primary 的底图，hover 态换本页专属图 */
.hero-btns .btn-primary:hover { background-image: url('../img/gylf/61250273.jpg'); }

/* ==================== 公司介绍 ==================== */
/* 设计稿 con_17_54：区块 top 700 / 高 1000，背景 61749230.jpg 50% 100% cover。
   区块内全部绝对定位，坐标原点 = 1400 容器左缘：
   标题 700×42 @(0,168)、正文 800×517 @(0,230)、
   配图 1015×909 @(788,88)（右侧出血，靠区块 overflow 裁掉）、
   三个 300×130 数据块 @top760，left -97 / 203 / 503。 */
.company {
  position: relative; height: 1000px; margin-top: 4px; overflow: hidden;
  background: #fff url('../img/gylf/61749230.jpg') 50% 100%/cover no-repeat;
}
.company-wrap { height: 100%; }
.company-name {
  position: absolute; left: 0; top: 168px; width: 700px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 32px; font-weight: 700; color: #1d2129; line-height: 34px;
}
.company-desc { position: absolute; left: 0; top: 230px; width: 800px; }
.company-desc p {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; color: #636e80; line-height: 2;
}
/* 设计稿用空段落分隔，实测段间多出 12px */
.company-desc p + p { margin-top: 12px; }
.company-stats { position: absolute; left: -97px; top: 760px; display: flex; }
.company-stats li { position: relative; width: 300px; height: 130px; text-align: center; }
.company-stats span {
  position: absolute; left: 50px; top: 25px; width: 200px; height: 35px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 22px; color: #636e80; line-height: 23px;
}
/* 数字是 Arial 度量（设计稿 1000+ 宽 118；Tahoma 会是 141） */
.company-stats em {
  position: absolute; left: 50px; top: 62px; width: 200px; height: 64px; font-style: normal;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 42px; font-weight: 700; color: #317af7; line-height: 45px;
}
.company-stats em i { font-style: normal; font-size: 22px; }
.company-pic { position: absolute; left: 788px; top: 88px; width: 1015px; height: 909px; }
.company-pic img { width: 100%; height: 100%; display: block; }

/* ==================== 愿景使命 ==================== */
/* 设计稿 con_77_10：区块 top 1699 / 高 980、**白底、没有色块面板**。
   两列各由「114px 巨大浅色底字 + 48 图标 + 32px 彩色标题 + 6 条 18px 居中条目」组成。
   全部绝对定位，坐标原点 = 1400 容器左缘；列头是两块 360×167（left 538 / 987），内部偏移一致。 */
/* 设计稿里本区 top 1699，与公司区（底 1700）重叠 1px */
/* overflow:hidden —— 右列 area（927+488=1415）本就超出 1400 容器，设计稿靠页面裁掉 */
.vision { position: relative; margin-top: -1px; height: 980px; overflow: hidden; background: #fff; }
/* 设计稿这几块文字走灰度抗锯齿（文字压在带透明通道的背景/面板上），
   我方默认是子像素抗锯齿、会出现彩色边缘 —— 提升为独立图层就能对齐 */
.vision .sec-title, .vision-head, .vision-list { transform: translateZ(0); }
.vision .sec-title { position: absolute; left: 0; top: 80px; width: 100%; }
.vision .sec-title h2 {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 36px; font-weight: 700; color: #1d2129; line-height: 1.75;
}
.vision .sec-title p {
  margin-top: 0;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px; color: #a5a5a5; line-height: 1.75;
}
.vision-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.vision-pic { position: absolute; left: 0; top: 230px; width: 478px; height: 640px; }
.vision-pic img { width: 100%; height: 100%; display: block; }
/* 两列是设计稿里带背景图的 area：488×534 @(478,320) / (927,320)，
   图 61749860.png / 61750149.png 以 50% 50% cover 铺满 —— 就是那层极淡的蓝/粉底 */
.vision-col { position: absolute; top: 320px; width: 488px; height: 534px; }
.vision-col--a { left: 478px; background: url('../img/gylf/61749860.png') 50% 50%/cover no-repeat; }
.vision-col--b { left: 927px; background: url('../img/gylf/61750149.png') 50% 50%/cover no-repeat; }
/* 列头在 area 上方（area 内 (60,-90) = 容器 (538/987, 230)），两块内部偏移完全一致 */
.vision-head { position: absolute; left: 60px; top: -90px; width: 360px; height: 167px; }
.vision-badge {
  position: absolute; left: 65px; top: 38px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 114px; font-weight: 700; line-height: 121px; white-space: nowrap;
}
.vision-head--a .vision-badge { color: #e6f2fb; }
.vision-head--b .vision-badge { color: #fff1f0; }
.vision-icon { position: absolute; left: 84px; top: 83px; width: 48px; height: 48px; }
.vision-head h3 {
  position: absolute; left: 136px; top: 87px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 32px; font-weight: 700; line-height: 34px; white-space: nowrap;
}
.vision-head--a h3 { color: #317af7; }
.vision-head--b h3 { color: #e42c58; }
/* 条目：488 宽、居中、行高 3（54px）；设计稿用空段落分隔，实测再加 12px */
.vision-list { position: absolute; left: 0; top: 123px; width: 488px; list-style: none; }

.vision-list li {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; color: #656d78; line-height: 54px; text-align: center;
}
.vision-list li + li { margin-top: 12px; }
.vision-list .hl { color: #317af7; }
.vision-list--b .hl { color: #e42c58; }

/* ==================== 数据与客户 ==================== */
/* 设计稿 con_123_53：区块高 800，背景 61620915.jpg（1920×800）50% 50% cover；
   容器 1400 居中（1440 下 left=20）。区块内落点：
   标题块 @top80（1400×106）、数据块 @top240（730×181，3 行 ×57）、
   两排客户 logo 各 1400×95 @top490 / @top609（7 项可见，项宽 190 + 间距 10）。 */
.data {
  position: relative; height: 800px; margin-top: -1px; padding-top: 80px;
  background: #eef2fe url('../img/gylf/61620915.jpg') 50% 50%/cover no-repeat;
}
.data-title {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 36px; font-weight: 700; color: #1d2129; line-height: 1.75;
}
.data-title em { font-style: normal; color: #317af7; }
.data-sub {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px; color: #a5a5a5; line-height: 1.75;
}
/* 240 = 80(上内距) + 63(标题行盒) + 28(副标题行盒) + 69 */
.data-stats { margin-top: 69px; }
.data-stats li {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px; font-weight: 700; color: #1d2129; line-height: 57px;
}
.data-stats em { font-style: normal; color: #317af7; }
/* 490 = 240 + 171(数据块 3×57) + 79 */
.logo-wall { --logo-w: 190px; margin-top: 79px; overflow: hidden; }
.logo-row { display: flex; height: calc(var(--logo-w) * .5); will-change: transform; }
.logo-row + .logo-row { margin-top: 24px; }
/* 素材 248×134，卡片实体（白底圆角）是中间 227×113 的一块，四周有透明外边距。
   设计稿按 190px 宽渲染：卡片实体正好贴齐项框左上角 —— 横向再左移 11×190/248≈8.4px，
   纵向按项框高居中裁掉 (134×190/248−95)/2≈3.8px。用 --logo-w 比例式表达，便于断点缩放。 */
.logo-row li {
  flex: 0 0 var(--logo-w); width: var(--logo-w); height: calc(var(--logo-w) * .5);
  margin-right: calc(var(--logo-w) * .0526); overflow: hidden;
}
.logo-row img {
  width: var(--logo-w); height: auto;
  margin: calc(var(--logo-w) * -.0202) 0 0 calc(var(--logo-w) * -.0444);
}

/* ==================== 服务优势 ==================== */
.adv { padding: 80px 0 68px; background: #fff; }
.adv .sec-title { margin-bottom: 79px; }
.adv .sec-title h2 { line-height: 1.75; }
.adv .sec-title p { margin-top: 0; line-height: 1.75; }
.adv-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.adv-card {
  grid-column: span 2; height: 200px;
  border: 1px solid #e7f2ff; border-radius: 20px;
  box-shadow: 0 5px 10px rgba(198, 224, 255, .3);
  background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
  padding: 54px 48px 0;
}
.adv-card--a { background-image: url('../img/gylf/61278112.jpg'); }
.adv-card--b { background-image: url('../img/gylf/61278341.jpg'); }
.adv-card--c { background-image: url('../img/gylf/61278385.jpg'); }
.adv-card--d { background-image: url('../img/gylf/61278913.jpg'); }
.adv-card--e { background-image: url('../img/gylf/61278972.jpg'); }
.adv-card:nth-child(4) { grid-column: 1 / span 3; }
.adv-card:nth-child(5) { grid-column: 4 / span 3; }
.adv-card h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 26px; font-weight: 700; color: #1d2129; line-height: 1;
}
.adv-card p {
  margin-top: 22px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #636e80; line-height: 1.5;
}
.adv-btn-wrap { display: flex; align-items: center; margin-top: 36px; }
.adv-line { flex: 1 1 auto; height: 1px; background: #c6e0ff; }
.adv .adv-btn {
  flex: 0 0 200px; height: 58px; margin: 0 26px 0 29px; border-radius: 200px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 21px 0 32px;
  font-family: Tahoma, Geneva, sans-serif; font-size: 24px; font-weight: 700;
}
.adv .adv-btn img { width: 40px; height: 40px; flex: none; }

/* ==================== 陪伴式服务 ==================== */
/* 组件样式复用公共 style.css 的 .newmedia / .nm-*（与服务案例页 fwal 同一套组件）。
   设计稿这两页的该区块像素完全一致，本页只覆盖区块背景图（素材取自本页 img/gylf） */
.newmedia { background-image: url('../img/gylf/61252542.jpg'); }

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {.hero { background-position: 62% 50%; }
  /* 定尺解除后回归文档流 */
  .hero-inner { height: auto; padding-top: 0; position: static; }

  .company { height: auto; padding: 60px 0 64px; margin-top: 0; overflow: visible; }
  .company-wrap { height: auto; }
  .company-name { position: static; width: auto; font-size: 26px; line-height: 1.35; }
  .company-desc { position: static; width: auto; margin-top: 20px; }
  .company-desc p { font-size: 16px; }
  .company-stats { position: static; margin-top: 34px; }
  .company-stats li { width: auto; flex: 1 1 0; height: auto; }
  .company-stats span { position: static; width: auto; height: auto; line-height: 1.4; }
  .company-stats em { position: static; width: auto; height: auto; line-height: 1.4; margin-top: 6px; font-size: 34px; }
  .company-pic { position: static; width: 100%; max-width: 480px; height: auto; margin: 28px auto 0; }

  .vision { height: auto; padding: 60px 0 64px; overflow: visible; }
  .vision .sec-title { position: static; width: auto; }
  .vision-wrap { position: static; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 32px; }
  .vision-pic { position: static; width: 100%; max-width: 360px; height: auto; margin: 0 auto; grid-column: 1 / -1; }
  .vision-col { position: static; width: auto; height: auto; background: none; }
  .vision-head { position: static; left: auto; top: auto; width: auto; height: auto; display: flex; align-items: center; gap: 12px; }
  .vision-badge { display: none; }
  .vision-icon { position: static; left: auto; top: auto; width: 40px; height: 40px; }
  .vision-head h3 { position: static; left: auto; top: auto; font-size: 24px; line-height: 1.2; }
  .vision-list { position: static; left: auto; top: auto; width: auto; margin-top: 14px; }
  .vision-list li { font-size: 16px; line-height: 1.9; text-align: left; }
  .vision-list li + li { margin-top: 8px; }

  /* 定尺解除后回归文档流 */
  .data { height: auto; margin-top: 0; padding: 60px 0 64px; }
  .data-title { font-size: 30px; }
  .data-sub { font-size: 15px; }
  .data-stats { margin-top: 30px; }
  .data-stats li { font-size: 24px; line-height: 1.9; }
  .logo-wall { --logo-w: 168px; margin-top: 40px; }
  .logo-row + .logo-row { margin-top: 18px; }

  .adv { padding: 64px 0 60px; }
  .adv .sec-title { margin-bottom: 54px; }
  .adv-card { background-size: 100% 100%; }

}

@media (max-width: 1199px) {

  .adv-cards { grid-template-columns: repeat(2, 1fr); }
  .adv-card { height: 210px; padding: 42px 32px 0; }
  .adv-card h4 { font-size: 23px; }
  .adv-card p { margin-top: 14px; font-size: 15px; }
  .adv-card, .adv-card:nth-child(4), .adv-card:nth-child(5) { grid-column: auto; }
  .adv-card:nth-child(5) { grid-column: 1 / -1; }

}

@media (max-width: 991px) {.hero { background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .6)),
      url('../img/gylf/61750220.jpg'); background-position: 50% 50%, 68% 50%; background-size: cover, cover; }

  .vision-wrap { grid-template-columns: 1fr; }
  .vision-pic { max-width: 300px; }

  .logo-wall { --logo-w: 150px; }
}

@media (max-width: 767px) {

  .company { padding: 40px 0 48px; }
  .company-name { font-size: 21px; }
  .company-desc { margin-top: 16px; }
  .company-desc p { font-size: 14px; line-height: 1.8; }
  .company-desc p + p { margin-top: 10px; }
  .company-stats { margin-top: 26px; }
  /* 三项统一"文字一行 + 数值一行"（设计稿本身就是上下两行、没有同行）。
     ⚠️ 窄屏 li 宽只有 119px（390 视口）："行业深耕"52 + "10+ 年"60 = 112 **恰好放得下**
     ⇒ 这一项会与数字挤在同一行；另两项（52+67、78+54）都超宽、自然折行 —— 三项观感不一致。
     这里显式 block 化 + `nowrap`（防"10+ / 年"再被拆）把它拉成两行：任何宽度下三项都是两行。
     li 用 flex 纵向居中 + `min-height:55`（= 现状 li 高）：三项行位完全对齐，
     且 li1/li2 的行位与改动前逐像素一致（只有第 1 项由一行变两行）。
     ⚠️ 只在 ≤767 档生效；1399 档（768~1399）保持原样 ⇒ PC 端零影响。 */
  .company-stats li { display: flex; flex-direction: column; justify-content: center; min-height: 55px; }
  .company-stats span { display: block; font-size: 13px; }
  .company-stats em { display: block; margin-top: 0; font-size: 24px; white-space: nowrap; }
  .company-stats em i { font-size: 13px; }

  .vision { padding: 44px 0 52px; }
  .vision-wrap { gap: 24px; }
  .vision-pic { max-width: 240px; }
  .vision-icon { width: 32px; height: 32px; }
  .vision-head h3 { font-size: 19px; }
  .vision-list { margin-top: 12px; }
  .vision-list li { font-size: 14px; }
  .vision-list li + li { margin-top: 6px; }

  .data { padding: 44px 0 52px; }
  .data-title { font-size: 21px; }
  .data-sub { font-size: 13px; }
  .data-stats { margin-top: 22px; }
  .data-stats li { font-size: 17px; line-height: 1.9; }
  .logo-wall { --logo-w: 124px; margin-top: 28px; }
  .logo-row + .logo-row { margin-top: 14px; }

  .adv { padding: 40px 0 48px; }
  .adv .sec-title { margin-bottom: 30px; }
  .adv .sec-title h2 { line-height: 1.5; }
  .adv-cards { grid-template-columns: 1fr; gap: 14px; }
  .adv-card, .adv-card:nth-child(4), .adv-card:nth-child(5) { grid-column: auto; height: 168px; padding: 28px 22px 0; }
  .adv-card h4 { font-size: 19px; }
  .adv-card p { margin-top: 10px; font-size: 14px; }
  .adv-btn-wrap { margin-top: 26px; }
  .adv-line { display: none; }
  .adv .adv-btn { flex: 1 1 auto; margin: 0; height: 50px; font-size: 18px; padding: 0 18px 0 24px; }
  .adv .adv-btn img { width: 32px; height: 32px; }

  /* 陪伴式服务卡片（公共组件 .newmedia / .nm-*）底部的插画：
     桌面档是 `position:absolute; right:13px`（贴卡右下），窄屏在公共 style.css 里改成
     `position:static; width:100%; max-width:240px; margin:24px 0 0` —— 成了**贴内容盒左缘**的定宽块，
     390 视口右侧空 78px、767 视口空 455px，观感明显偏左。本页要求居中显示：
     `margin-left/right:auto` 让这个定宽块在卡片内容盒里水平居中。
     ⚠️ 只改水平位置：`width/max-width/height/margin-top` 全部沿用公共档 ⇒ 图片尺寸、距上方按钮
     24px 的纵向位置、栏体总高都不变（下游零位移）。仅本页生效（fwal / index 复用同一组件，未改动）。 */
  .nm-img { margin-left: auto; margin-right: auto; }

}

@media (max-width: 479px) {
  .logo-wall { --logo-w: 106px; }
}