/* ============================================================
   工厂实力 (page-factory) — 设计稿 762:8398, 1920 基准
   视频banner + 智慧工厂统计 + 服务流程蛇形 + 车间图文
   ============================================================ */

/* ---------- 顶部导航: 透明底白字, 滚动后白底深字 (同 page-about) ---------- */
body.page-factory .site-header { background: transparent; }
body.page-factory .site-header .navbar > li > a { color: #fff; }
body.page-factory .site-header .navbar > li.active > a { color: #2168E5; }
body.page-factory .site-header .navbar > li > a:hover { color: rgba(255, 255, 255, .75); }
body.page-factory .site-header .vr-pill { border-color: rgba(255, 255, 255, .6); color: #fff; }
body.page-factory .site-header:not(.is-scrolled):not(.dd-open) .icon-btn img { filter: brightness(0) invert(1); }
body.page-factory .site-header:not(.is-scrolled):not(.dd-open) .nav-toggle span { background: #fff; }
body.page-factory .site-header.is-scrolled,
body.page-factory .site-header.dd-open { background: #fff; box-shadow: inset 0 -1px 0 0 #EBEBEB; }
body.page-factory .site-header.is-scrolled .navbar > li > a,
body.page-factory .site-header.dd-open .navbar > li > a { color: #2E3033; }
body.page-factory .site-header.is-scrolled .navbar > li.active > a,
body.page-factory .site-header.dd-open .navbar > li.active > a { color: #2168E5; }
body.page-factory .site-header.is-scrolled .navbar > li > a:hover,
body.page-factory .site-header.dd-open .navbar > li > a:hover { color: #2168E5; }
/* 滚动/下拉白底时 vr-pill 变深色 (否则白字白框在白底不可见) */
body.page-factory .site-header.is-scrolled .vr-pill,
body.page-factory .site-header.dd-open .vr-pill {
  border-color: #5C6066;
  color: #2E3033;
}

/* ============================================================
   区块1: banner (1920×720, 视频背景 + 播放按钮)
   ============================================================ */
.ft-banner {
  position: relative;
  height: 720px;
  overflow: hidden;
  background: #243659;
}
.ft-banner-video,
.ft-banner-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ft-banner-img-bg {
  background-size: cover;
  background-position: center;
}
.ft-banner-mask {
  position: absolute;
  inset: 0;
  background: rgba(36, 54, 89, .5);   /* 设计稿 #243659 a0.50 */
}
.ft-banner-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.ft-banner-title {
  font-size: 48px;
  font-weight: 749;
  line-height: 72px;
  color: #fff;
  text-align: center;
}
/* 播放按钮: 玻璃拟态胶囊 (同 about banner) */
.ft-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .2);
  outline: 1px rgba(255, 255, 255, .5) solid;
  outline-offset: -.5px;
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  font-weight: 513;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.ft-video-btn:hover { background: rgba(255, 255, 255, .32); }
.ft-video-btn .play-ic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ft-video-btn .play-ic svg { width: 36px; height: 36px; }

/* ============================================================
   区块2: 智慧工厂 (#F0F2F7, 标题+描述+4 统计卡)
   ============================================================ */
.ft-factory {
  background: #F0F2F7;
  padding: 84px 0 108px;
}
.ft-title {
  font-size: 36px;
  font-weight: 749;
  line-height: 40px;
  color: #232426;
  text-align: center;
}
.ft-desc {
  margin: 40px auto 0;
  max-width: 1170px;
  font-size: 16px;
  font-weight: 513;
  line-height: 32px;
  color: rgba(46, 48, 51, .85);
  text-align: center;
}
.ft-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 64px;
}
.ft-stat {
  flex: 1 1 calc(25% - 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;      /* 客户要求: 换行后的标签文字居中 */
  height: 150px;
  background: #fff;
  border-radius: 12px;
}
.ft-stat-num {
  display: flex;
  align-items: baseline;
}
.ft-stat-num b {
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 600;
  line-height: 64px;
  color: #222222;
}
.ft-stat-num i {
  font-style: normal;
  font-size: 16px;
  font-weight: 513;
  line-height: 28px;
  color: #222426;
  margin-left: 6px;
}
.ft-stat span {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 513;
  line-height: 28px;
  color: rgba(34, 36, 38, .85);
}

/* ============================================================
   区块3: 服务流程 (白色, 整图 images/fwlc.png)
   ============================================================ */
.ft-flow {
  background: #fff;
  padding: 80px 0 120px;
}
.ft-flow-img-wrap {
  margin-top: 64px;
}
.ft-flow-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ============================================================
   区块4: 车间图文 (#F0F2F7, 3 个特性块: 标题+描述+大图)
   ============================================================ */
.ft-features {
  background: #F0F2F7;
  padding: 102px 0 150px;
}
.ft-feature + .ft-feature { margin-top: 120px; }
.ft-feature-swiper {
  position: relative;
  margin-top: 40px;
}
.ft-feature-swiper .swiper-slide { height: auto; }
.ft-feature .ft-title { text-align: left; }
.ft-feature .ft-desc {
  margin: 32px 0 0;
  max-width: 100%;
  text-align: left;
}
.ft-media {
  position: relative;
  aspect-ratio: 1440 / 800;
  border-radius: 12px;
  overflow: hidden;
}
.ft-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 暗角遮罩: 上/下 0.35 → 中间 0 (设计稿渐变) */
.ft-media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .35) 0%,
    rgba(0, 0, 0, .16) 20%,
    rgba(0, 0, 0, 0)   50%,
    rgba(0, 0, 0, .16) 80%,
    rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
}
.ft-media-cap {
  position: absolute;
  left: 56px;
  top: 60px;
  right: 170px;              /* 给右上角页码留位: 长标题不会压到数字上 */
  display: flex;
  flex-direction: column;
}
.ft-media-cap b {
  font-size: 28px;
  font-weight: 749;
  line-height: 32px;
  color: #fff;
}
.ft-media-cap i {
  font-style: normal;
  font-size: 14px;
  font-weight: 513;
  line-height: 20px;
  color: #fff;
  margin-top: 8px;
}
.ft-media-no {
  position: absolute;
  right: 56px;
  top: 60px;
  display: flex;
  align-items: baseline;
}
.ft-media-no b {
  font-family: var(--font-num);
  font-size: 48px;
  font-weight: 700;
  line-height: 52px;
  color: #fff;
}
.ft-media-no i {
  font-style: normal;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  color: rgba(255, 255, 255, .65);
}
/* 共享控制条: 覆盖在轮播媒体底部 (同设计稿箭头+进度条) */
.ft-swiper-ctrl {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 88px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  pointer-events: none;
}
.ft-swiper-ctrl .ft-arrow { pointer-events: auto; }
.ft-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.ft-arrow:hover { background: rgba(0, 0, 0, .4); }
.ft-arrow.swiper-button-disabled { opacity: .4; cursor: default; }
.ft-arrow svg {
  width: 21px;
  height: 21px;
}
.ft-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .16);
  border-radius: 2px;
  overflow: hidden;
}
.ft-progress i {
  display: block;
  width: 33.333%;              /* 1/3, JS 随轮播更新 */
  height: 100%;
  background: #fff;
  transition: width .4s var(--ease);
}

/* 视频弹窗 (同 about, 供「观看完整视频」) */
.dt-video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dt-video-modal.open { display: flex; }
.dt-video-modal-mask {
  position: absolute;
  inset: 0;
  background: #171717;
  cursor: pointer;
}
.dt-video-modal-body {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%, calc((100vh - 48px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.dt-video-modal-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dt-video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dt-video-modal-close svg { width: 100%; height: 100%; }
.dt-video-modal .plyr {
  width: 100%;
  height: 100%;
  --plyr-color-main: #2168E5;
}

/* ============================================================
   响应式 (5 档: ≤1440 / ≤1100 / ≤900 / ≤767 / ≤400)
   ============================================================ */
@media (max-width: 1440px) {
  .ft-banner { height: 640px; }
}
@media (max-width: 1100px) {
  .ft-banner { height: 540px; }
  .ft-banner-title { font-size: 38px; line-height: 56px; }
  .ft-banner-inner { gap: 24px; }
  .ft-factory { padding: 72px 0 90px; }
  .ft-title { font-size: 32px; line-height: 40px; }
  .ft-desc { max-width: 900px; margin-top: 32px; }
  .ft-stats { gap: 20px; margin-top: 48px; }
  .ft-stat { flex: 1 1 calc(50% - 10px); height: 130px; }
  .ft-stat-num b { font-size: 44px; line-height: 54px; }
  .ft-flow { padding: 64px 0 90px; }
  .ft-flow-img-wrap { margin-top: 48px; }
  .ft-features { padding: 80px 0 110px; }
  .ft-feature + .ft-feature { margin-top: 96px; }
  .ft-media-cap { left: 40px; top: 44px; right: 140px; }
  .ft-media-cap b { font-size: 26px; }
  .ft-media-no { right: 40px; top: 44px; }
  .ft-media-no b { font-size: 42px; }
  .ft-swiper-ctrl { left: 40px; right: 40px; bottom: 64px; }
}
@media (max-width: 900px) {
  .ft-banner { height: 480px; }
  .ft-banner-title { font-size: 34px; line-height: 50px; }
  .ft-feature .ft-desc { max-width: 100%; }
  .ft-flow-img-wrap { margin-top: 40px; }
}
@media (max-width: 767px) {
  .ft-banner { height: 420px; }
  .ft-banner-title { font-size: 28px; line-height: 42px; padding: 0 20px; }
  .ft-factory { padding: 56px 0 64px; }
  .ft-title { font-size: 26px; line-height: 36px; }
  .ft-desc { font-size: 15px; line-height: 28px; margin-top: 24px; }
  /* 数据卡: 标签换行时改为"数字/标签统一顶部对齐 + 同行等高",
     原居中 + 固定高度会导致每张卡数字高低不一致 */
  .ft-stats { gap: 16px; margin-top: 40px; }
  .ft-stat { flex: 1 1 calc(50% - 8px); height: auto; min-height: 116px; justify-content: flex-start; padding: 16px 10px 12px; text-align: center; }   /* 客户要求: 内容居中 */
  .ft-stat-num b { font-size: 38px; line-height: 46px; }
  .ft-stat span { font-size: 16px; line-height: 22px; }
  .ft-flow { padding: 56px 0 72px; }
  .ft-flow-img-wrap { margin-top: 32px; }
  .ft-features { padding: 56px 0 72px; }
  .ft-feature + .ft-feature { margin-top: 72px; }
  .ft-feature-swiper { margin-top: 24px; }
  .ft-media-cap { left: 20px; top: 20px; right: 20px; }
  .ft-media-cap b { font-size: 22px; }
  .ft-media-cap i { font-size: 12px; }
  /* 页码移到右下角 (原右上角: 手机端长标题会压到数字上重叠) */
  .ft-media-no { right: 20px; top: auto; bottom: 6px; }
  .ft-media-no b { font-size: 22px; }
  .ft-media-no i { font-size: 13px; }
  .ft-swiper-ctrl { left: 20px; right: 20px; bottom: 40px; gap: 16px; }
  .ft-arrow { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .ft-banner { height: 360px; }
  .ft-banner-title { font-size: 24px; line-height: 36px; padding: 0 16px; }
  .ft-banner-inner { gap: 20px; }
  .ft-video-btn { height: 44px; padding: 0 10px 0 4px; }
  .ft-video-btn .play-ic, .ft-video-btn .play-ic svg { width: 32px; height: 32px; }
  .ft-factory { padding: 48px 0 56px; }
  .ft-stat { height: auto; min-height: 100px; padding: 12px 8px 10px; }
  .ft-stat-num b { font-size: 32px; line-height: 40px; }
  .ft-stat-num i { font-size: 14px; margin-left: 4px; }
  .ft-stat span { font-size: 14px; line-height: 20px; margin-top: 2px; }
  .ft-flow { padding: 48px 0 60px; }
  .ft-flow-img-wrap { margin-top: 24px; }
  .ft-features { padding: 48px 0 60px; }
  .ft-feature + .ft-feature { margin-top: 56px; }
  .ft-media-cap b { font-size: 20px; }
  .ft-media-cap i { font-size: 11px; }
  .ft-media-no b { font-size: 22px; }
  .ft-media-no i { font-size: 13px; }
  .ft-swiper-ctrl { bottom: 28px; gap: 12px; }
  .ft-arrow { width: 36px; height: 36px; }
}

/* ============ 服务流程配图: PC / 移动端各一张 (后台留空自动回退) ============
   注意: 必须带 .ft-flow-img-wrap 前缀, 否则会被上方 .ft-flow-img-wrap img{display:block}
   (0,1,1) 覆盖掉 (0,1,0) 的 display */
.ft-flow-img-wrap .ft-flow-img-mobile { display: none; }

@media (max-width: 767px) {
  .ft-flow-img-wrap .ft-flow-img-pc { display: none; }
  .ft-flow-img-wrap .ft-flow-img-mobile { display: block; }
}