/* 多用户电商直播系统详情页专属样式：5 个 sections（本页无 JS；main 全局 common.css 先行，home.css 管轮播公告） */

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

/* ============ 通用区块头 .section-head（live 复用结构；几何走 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;
  }
}

/* ============ Banner lv-banner（区间[696,1416]高720；底图 650 高） ============ */
/* 去图层化：section min-height:736＋padding-bottom:16（卡底与 720 齐平，留 16 给卡片阴影，
   否则被下一 section 连同 overflow:hidden 一起裁掉；节奏 +16px 系保阴影的取舍）；
   bg 盒 650 高定宽 1920 居中（背景定则 B）；
   文案/标签 absolute 直挂 stage（标题左对齐）；四服务卡改 grid（4 列 276px、列缝 32 均匀），
   卡片区 margin-top:608；卡压 banner 底边 42px 属设计叠放；卡内相对卡不动；
   stage 去 min-height；hover 卡上浮（标签不动）；无 z-index；无断点 */
.lv-banner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 736px;
  padding-bottom: 16px;
  overflow: hidden;
  background: #f8f9fc;  scroll-margin-top: 88px; /* 首页产品直达锚：吸顶 72＋16 */
}

.lv-banner__bg {
  position: absolute;
  left: max(0px, calc(50% - 960px));
  top: 0;
  width: 1920px;
  height: 650px;
  background: url('/images/live/live-banner-3494.jpg') center / cover no-repeat;
}

/* v2 坐标统一：底图与 stage 同用 max(0px, 50% - 960px)——>=1920 居中，<1920 左缘贴视口只裁右边，
   两层同一坐标原点，文案不再随浏览器宽度相对底图漂移 */
.lv-banner__stage {
  position: relative;
  width: 1920px;
  /* 首个流式子 content 的 margin-top:608 会穿透 stage 塌陷（stage 无 padding 会被顶下去，
     absolute 文案相对 stage 定位跟着掉；改用 stage 自身 padding-top，content margin 清零） */
  padding-top: 608px;
  margin-left: max(0px, calc(50% - 960px));
}

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

/* 副标题：(233,291) 570×29，24px #A4BFFF 左，字间距 0.0833em */
.lv-banner__sub {
  position: absolute;
  left: 233px;
  top: 291px;
  width: 570px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #a4bfff;
  letter-spacing: 0.0833em;
  text-align: left;
  white-space: nowrap;
}

/* 标签：top:354 h32，半透明白底＋1px #A4BFFF 描边 r4，14px 白字居中 */
.lv-banner__tag {
  position: absolute;
  top: 354px;
  height: 32px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #a4bfff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.lv-banner__tag--app {
  left: 233px;
  width: 80px;
}

.lv-banner__tag--h5 {
  left: 333px;
  width: 80px;
}

.lv-banner__tag--mini {
  left: 433px;
  width: 100px;
}

/* 内容列（非装饰）：视口 <1920 时跟随视口居中（50vw-600），>=1920 回到设计的左 360；
   仅内容块跟随视口，底图/文案仍用 stage 的设计坐标，宽度变化时内容不会被裁掉 */
.lv-banner__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 276px);
  column-gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin-left: clamp(0px, calc(50vw - 600px), 360px);
  margin-right: 0;
}

/* 服务卡：276×112 白底 r12 投影 */
.lv-banner__svc {
  position: relative;
  width: 276px;
  height: 112px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.lv-banner__svc-icon {
  position: absolute;
  left: 24px;
  top: 32px;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.lv-banner__svc-title {
  position: absolute;
  top: 32px;
  height: 22px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #01378a;
  text-align: center;
  white-space: nowrap;
}

.lv-banner__svc-desc {
  position: absolute;
  top: 65px;
  height: 15px;
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}

/* ============ 运用场景 lv-sce（区间[1416,2077]高661，底 #F8F9FC） ============ */
/* 去图层化：头左对齐不进 sectionHead，手写流式头（内容列内 margin-left:299/475/505，
   margin-top 13/17，头高 92）；section 加 box-sizing＋padding-top:67（原标题 top）；
   八图卡改 grid 4 列 276px、列缝 32 均匀、行缝 32，卡片区 margin-top:64（223−159）；
   卡改 relative；卡内图/遮罩/标题相对卡不动；stage 去 min-height；
   section 保 min-height:661；reveal 由 common.js 驱动；hover 卡上浮＋图缩放；
   无 z-index；无断点 */
.lv-sce {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 661px;
  padding-top: 67px;
  background: #f8f9fc;
}

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

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

/* 标题：内容列(299,0) 612×41，34px #1A1A2E 左 */
.lv-sce__title {
  margin: 0 0 0 299px;
  font-size: 34px;
  line-height: 41px;
  font-weight: 400;
  color: #1a1a2e;
  text-align: left;
  white-space: nowrap;
}

/* 副标题：内容列(475,54) 257×15，12px #666 左 */
.lv-sce__sub {
  margin: 13px 0 0 475px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #666;
  text-align: left;
  white-space: nowrap;
}

/* 蓝条：内容列(505,86) 190×6 #1890FF */
.lv-sce__bar {
  width: 190px;
  height: 6px;
  margin: 17px 0 0 505px;
  background: #1890ff;
}

.lv-sce__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 276px);
  column-gap: 32px;
  row-gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
}

/* 图卡：276×203 r12，图 cover＋黑遮罩 0.2＋32px 白字 */
.lv-sce__card {
  position: relative;
  width: 276px;
  height: 203px;
  border-radius: 12px;
  overflow: hidden;
  background: #d9d9d9;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.lv-sce__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 276px;
  height: 203px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lv-sce__card:hover .lv-sce__img {
  transform: scale(1.2);
}

.lv-sce__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 276px;
  height: 203px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.lv-sce__card-title {
  position: absolute;
  top: 82px;
  height: 39px;
  margin: 0;
  font-size: 32px;
  line-height: 39px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* ============ 业务闭环 lv-flow（区间[2077,2621]高544，底 #F8F9FC） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0b1c47／线 444×4 #2d5be6／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 57；
   白板改正常流（relative＋1200 居中，margin-top:60 即 184−124）；
   板内四步卡改 flex 横排（padding 左右各 85，列缝 103；85+180+103+180+103+180+103+180+85=1199≈1200，
   右缝 104 差 1px 可忽略），箭头三个相对板不动；
   卡内椭圆/图标/标题/描述相对卡不动；stage 去 min-height；section 保 min-height:544；
   reveal 由 common.js 驱动；hover 步骤卡上浮（白板/箭头不动）；无 z-index；无断点 */
.lv-flow {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 544px;
  padding-top: 67px;
  background: #f8f9fc;
}

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

.lv-flow__panel {
  position: relative;
  display: flex;
  column-gap: 103px;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 70px 85px 0;
  height: 360px;
  margin: 60px auto 0;
  background: #fff;
  border-radius: 16px;
}

/* 步骤卡：180×220 浅蓝底 r12 */
.lv-flow__step {
  position: relative;
  flex: 0 0 auto;
  width: 180px;
  height: 220px;
  background: #f4f8ff;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.lv-flow__ellipse {
  position: absolute;
  left: 55px;
  top: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(45, 91, 230, 0.1);
}

.lv-flow__step-icon {
  position: absolute;
  object-fit: contain;
}

.lv-flow__step-title {
  position: absolute;
  top: 131px;
  height: 22px;
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: #0b1c47;
  text-align: center;
  white-space: nowrap;
}

.lv-flow__step-desc {
  position: absolute;
  top: 168px;
  height: 15px;
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #666;
  text-align: center;
  white-space: nowrap;
}

/* 蓝箭头：板内(301,163)/(584,163)/(867,163)，线 32×3＋右三角 15 #2D5BE6（原案线条+三角还原） */
.lv-flow__arrow {
  position: absolute;
  top: 163px;
  width: 32px;
  height: 3px;
  background: #2d5be6;
}

.lv-flow__arrow::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 15px solid #2d5be6;
}

.lv-flow__arrow--1 { left: 301px; }
.lv-flow__arrow--2 { left: 584px; }
.lv-flow__arrow--3 { left: 867px; }

/* ============ 核心功能 lv-feat（区间[2621,3255]高634，底 #F8F9FC） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0b1c47／线 216×4 #2d5be6／缝 12，无副标题），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 57；
   六卡改 grid 2 列 580px、列缝 40、行缝 30（三行均匀），卡片区 margin-top:60（184−124）；
   卡改 relative；卡内图标方块/图标/标题/描述相对卡不动；
   stage 去 min-height；section 保 min-height:634；reveal 由 common.js 驱动；
   hover 卡上浮（图标不动）；无 z-index；无断点 */
.lv-feat {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 634px;
  padding-top: 67px;
  background: #f8f9fc;
}

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

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

/* 横卡：580×130 渐变底 r16 */
.lv-feat__card {
  position: relative;
  width: 580px;
  height: 130px;
  background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.lv-feat__iconbox {
  position: absolute;
  left: 24px;
  top: 33px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(45, 91, 230, 0.1);
}

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

.lv-feat__card-title {
  position: absolute;
  left: 112px;
  top: 29px;
  height: 24px;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #0b1c47;
  text-align: left;
  white-space: nowrap;
}

.lv-feat__card-desc {
  position: absolute;
  left: 112px;
  top: 64px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #666;
  text-align: left;
  white-space: pre-line;
}

/* ============ 技术支持 lv-sup（区间[3255,4003]高748） ============ */
/* 去图层化：头换 sectionHead（标题 34 #0b1c47／副 16 #666／线 374×4 #2d5be6／缝 17），
   section 加 box-sizing＋padding-top:67（原标题 top），头高 95；
   四卡＋中央图改 grid 三列（341／430／341，列缝 44；行 200／200，行缝 30），
   中央图跨两行（430＝200+30+200），卡片区 margin-top:60（222−162）；
   卡改 relative；卡内标题/描述相对卡不动（左 36 写死，底色走数据）；
   stage 去 min-height；section 保 min-height:748；reveal 由 common.js 驱动；
   hover 卡上浮（中央图不动）；无 z-index；无断点 */
.lv-sup {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 748px;
  padding-top: 67px;
}

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

.lv-sup__content {
  position: relative;
  display: grid;
  grid-template-columns: 341px 430px 341px;
  column-gap: 44px;
  row-gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
}

.lv-sup__central {
  grid-row: 1 / 3;
  grid-column: 2;
  width: 430px;
  height: 430px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.lv-sup__card {
  position: relative;
  width: 341px;
  height: 200px;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.lv-sup__card-title {
  position: absolute;
  left: 36px;
  height: 29px;
  margin: 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

.lv-sup__card-desc {
  position: absolute;
  left: 36px;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #a4bfff;
  text-align: left;
  white-space: pre-line;
}