/* 智能充电桩运营管理系统详情页专属样式：3 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

/* ============ charge 字体：阿里普惠体按字重映射（族在 common.css 注册） ============ */
[class*="chg-"] {
  font-family: 'AlibabaPuHuiTi-3', Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============ 通用区块头 .section-head（charge 复用结构；几何走 inline） ============ */
.section-head {
  margin: 0;
  padding: 0;
}

.section-head__title {
  margin: 0 auto;
  padding: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__sub {
  margin: 14px auto 0;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.section-head__line {
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
}

/* ============ 滚动显现 reveal（同站最小一次性方案，由 common.js 全局 Observer 驱动加 .in） ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ 图片＋看板 chg-hero（区间[696,1728]高1032；底图 700 高） ============ */
/* 去图层化：section min-height:1032＋overflow:hidden；bg 盒 700 高定宽 1920 居中（背景定则 B）；
   文案 absolute 直挂 stage（标题左对齐 left:188）；白板改正常流——stage 加 padding-top:600
   （首个流式子 margin 塌陷 guard，见 lv-banner 教训），白板 margin 清零；
   白板压横幅底边 100px 属设计叠放；板内相对板不动；stage 去 min-height；
   看板静态不 hover；无 z-index；无断点 */
.chg-hero {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 1032px;
  overflow: hidden;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.chg-hero__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 700px;
  background: url('/images/charge/chg-banner-4082.jpg') center / cover no-repeat;
}

/* v2 坐标统一：底图与 stage 同用 max(0px, 50% - 960px)——>=1920 居中，<1920 左缘贴视口只裁右边，
   两层同一坐标原点，文案不再随浏览器宽度相对底图漂移 */
.chg-hero__stage {
  position: relative;
  width: 1920px;
  padding-top: 600px;
  margin-left: max(0px, calc(50% - 960px));
}

/* 标题：(188,248) 616×68，56px #FFF 左 */
.chg-hero__title {
  position: absolute;
  left: 188px;
  top: 248px;
  width: 616px;
  height: 68px;
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：(188,355) 665×29，24px #CEE1FF 左 */
.chg-hero__sub {
  position: absolute;
  left: 188px;
  top: 355px;
  width: 665px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #cee1ff;
  text-align: left;
  white-space: nowrap;
}

/* 内容列（非装饰）：视口 <1920 时跟随视口居中（50vw-600），>=1920 回到设计的左 360；
   仅内容块跟随视口，底图/文案仍用 stage 的设计坐标，宽度变化时内容不会被裁掉 */
/* 看板白卡：1200×400 r20 投影 */
.chg-hero__panel {
  position: relative;
  width: 1200px;
  height: 400px;
  margin-left: clamp(0px, calc(50vw - 600px), 360px);
  margin-right: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 88, 203, 0.08);
}

.chg-hero__topbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 60px;
  background: #0058cb;
  border-radius: 20px 20px 0 0;
}

.chg-hero__panel-title {
  position: absolute;
  left: 510px;
  top: 19px;
  width: 180px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

.chg-hero__sep {
  position: absolute;
  left: 0;
  top: 60px;
  width: 1200px;
  height: 1px;
  background: rgba(0, 88, 203, 0.12);
}

.chg-hero__grid {
  position: absolute;
  top: 100px;
  border-radius: 10px;
}

.chg-hero__grid--kwh {
  left: 40px;
  width: 233px;
  height: 260px;
  background: #f4f8fc;
}

.chg-hero__grid--online {
  left: 313px;
  width: 286px;
  height: 260px;
  background: #f4f8fc;
}

.chg-hero__kwh-label {
  position: absolute;
  left: 44px;
  top: 21px;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}

.chg-hero__kwh-value {
  position: absolute;
  left: 31px;
  top: 46px;
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  color: #0066ff;
  white-space: nowrap;
}

.chg-hero__bar {
  position: absolute;
  width: 30px;
  background: #0066ff;
}

.chg-hero__ring {
  position: absolute;
  left: 62px;
  top: 51px;
}

.chg-hero__pct {
  position: absolute;
  left: 118px;
  top: 104px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}

.chg-hero__online-label {
  position: absolute;
  left: 108px;
  top: 138px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #666;
  white-space: nowrap;
}

.chg-hero__dot {
  position: absolute;
  border-radius: 50%;
}

.chg-hero__dot--red {
  left: 34px;
  top: 37px;
  width: 12px;
  height: 12px;
  background: #ff4d4f;
}

.chg-hero__dot--green {
  left: 235px;
  top: 217px;
  width: 16px;
  height: 16px;
  background: #00d26a;
}

.chg-hero__phone {
  position: absolute;
  left: 639px;
  top: 100px;
  width: 137px;
  height: 260px;
  background: #1a202c;
  border-radius: 20px;
}

.chg-hero__screen {
  position: absolute;
  left: 8px; /* 原 6，右/下边框 10 比左/上 6 宽 4px，改 8 四边均匀 */
  top: 8px;
  width: 121px;
  height: 244px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.chg-hero__screen-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 121px;
  height: 30px;
  background: #0058cb;
}

.chg-hero__scan {
  position: absolute;
  left: 44.5px; /* 原 53，(121−32)/2 居中 */
  top: 18px;
  width: 32px;
  margin: 0;
  font-size: 8px;
  line-height: 10px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

.chg-hero__donut {
  position: absolute;
  left: 38px; /* 原 43，(121−45)/2 居中 */
  top: 53px;
}

.chg-hero__donut-pct {
  position: absolute;
  left: 51px; /* 原 56，(121−19)/2 居中 */
  top: 71px;
  width: 19px;
  margin: 0;
  font-size: 9px;
  line-height: 11px;
  font-weight: 400;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.chg-hero__finish {
  position: absolute;
  left: 15px; /* 原 17，(121−91)/2 居中 */
  top: 199px;
  width: 91px;
  height: 23px;
  background: #ff4d4f;
  border-radius: 15px;
}

.chg-hero__finish span {
  position: absolute;
  left: 0;
  top: 6px;
  width: 91px;
  font-size: 8px;
  line-height: 10px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.chg-hero__mock {
  position: absolute;
  left: 816px;
  top: 100px;
  width: 344px;
  height: 260px;
  border-radius: 12px;
  object-fit: cover;
}

/* ============ 用户流程 chg-flow（区间[1728,2465]高737；底 #EBF3FF） ============ */
/* 去图层化：头手写居中（标题 36 #003399／线 288×4 #0066ff，左右 auto 居中，缝 11），
   section 加 box-sizing＋padding-top:35（原标题 top），头高 59；
   白卡改正常流（relative＋1200 居中，margin-top:60 即 154−94），板内步骤/连线相对卡不动；
   步骤循环（标签/圆心走数据，图标按步分支手画div/SVG 内联原样）；
   双图改 grid 2 列 580px、列缝 40，margin-top:40（394−354）；图标注居中 margin-top:33；
   stage 去 min-height；section 保 min-height:737；reveal 由 common.js 驱动；
   hover 圆上浮（白板/双图不动）；无 z-index；无断点 */
.chg-flow {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 737px;
  padding-top: 35px;
  background: #ebf3ff;
}

.chg-flow__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.chg-flow__head {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 标题：36px #003399 居中；蓝线 288×4 #0066FF 居中，缝 11 */
.chg-flow__title {
  width: 288px;
  height: 44px;
  margin: 0 auto;
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  color: #003399;
  text-align: center;
  white-space: nowrap;
}

.chg-flow__line {
  width: 288px;
  height: 4px;
  margin: 11px auto 0;
  background: #0066ff;
}

/* 白卡：1200×200 r20 */
.chg-flow__card {
  position: relative;
  width: 1200px;
  height: 200px;
  margin: 60px auto 0;
  background: #fff;
  border-radius: 20px;
}

/* 连接线：卡内(150,80) 900×3 #A3C7FF */
.chg-flow__link {
  position: absolute;
  left: 150px;
  top: 80px;
  width: 900px;
  height: 3px;
  background: #a3c7ff;
}

/* 步骤圆：卡内 top:40 80×80 #E8F1FF */
.chg-flow__circle {
  position: absolute;
  top: 40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e8f1ff;
  transition: transform 0.3s ease;
}

.chg-flow__circle:hover {
  transform: translateY(-4px);
}

/* 图标统一装进圆里（圆 hover 上浮时一起跳；坐标系由卡内改圆内：卡坐标减圆左上角） */
.chg-flow__qr-blue {
  position: absolute;
  left: 25px;
  top: 20px;
  width: 30px;
  height: 40px;
  border-radius: 4px;
  background: #0066ff;
}

.chg-flow__qr-white {
  position: absolute;
  left: 30px;
  top: 26px;
  width: 20px;
  height: 20px;
  background: #fff;
}

.chg-flow__icon59 {
  position: absolute;
  left: 20px;
  top: 20px;
}

.chg-flow__icon60 {
  position: absolute;
  left: 28px;
  top: 20px;
}

.chg-flow__blue-dot {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0066ff;
}

.chg-flow__icon61 {
  position: absolute;
  left: 32px;
  top: 34px;
}

/* 步骤标签：卡内 top:137 18px #333 */
.chg-flow__label {
  position: absolute;
  top: 137px;
  height: 22px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.chg-flow__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 580px);
  column-gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0;
}

.chg-flow__imgbox {
  position: relative;
  width: 580px;
}

/* 双图：580×251 r20 cover */
.chg-flow__img {
  display: block;
  width: 580px;
  height: 251px;
  border-radius: 20px;
  object-fit: cover;
}

.chg-flow__cap {
  margin: 33px 0 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #666;
  text-align: center;
  white-space: nowrap;
}

/* ============ 覆盖功能 chg-feat（区间[2465,3185]高720；底图下方对齐） ============ */
/* 去图层化：头换 sectionHead（标题 36 #003399／线 360×4 #0066ff／缝 11），
   body 改正常流（relative＋1200 居中），section 加 box-sizing＋padding-top:35（原体 top），头高 59；
   六卡改 grid 3 列 370px、列缝 45、行缝 30，卡片区 margin-top:60（119−59）；
   卡改 relative；卡内圆点/图标/标题/描述相对卡不动；
   bg 盒下方对齐全幅（bottom:0＋1920 定宽居中，背景定则 B，cover 不动，窄屏对称裁边）；
   stage 去 min-height；section 保 min-height:720＋overflow:hidden；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.chg-feat {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 720px;
  padding-top: 35px;
  overflow: hidden;
}

.chg-feat__bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 1920px;
  height: 720px;
  background: url('/images/home/chg-bg-a75b1f.jpg') center bottom / cover no-repeat;
}

.chg-feat__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.chg-feat__body {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.chg-feat__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 370px);
  column-gap: 45px;
  row-gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

/* 功能卡：370×220 渐变底 r16 */
.chg-feat__card {
  position: relative;
  width: 370px;
  height: 220px;
  background: linear-gradient(180deg, #fff, #f4f8ff);
  border-radius: 16px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.160784);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chg-feat__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(37, 99, 200, 0.25);
}

/* 圆点：32,32 40×40 #E8F1FF */
.chg-feat__dot {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 40px;
  height: 40px;
  background: #e8f1ff;
  border-radius: 50%;
}

/* 卡标题：92,38 22px #333 左；描述 32,94 300×50 15px/25px #666 pre-line */
.chg-feat__card-title {
  position: absolute;
  left: 92px;
  top: 38px;
  height: 27px;
  margin: 0;
  font-size: 22px;
  line-height: 27px;
  font-weight: 400;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.chg-feat__desc {
  position: absolute;
  left: 32px;
  top: 94px;
  width: 300px;
  height: 50px;
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  color: #666;
  text-align: left;
  white-space: pre-line;
}

.chg-feat__icon {
  position: absolute;
  object-fit: contain;
}