/* =====================================================
   index.html 专属定制层 —— 严格对照 02.psd 制作
   色板：主黄 #ffeb00 / teal #34b7af / 深蓝 #0f2552
         浅底 #f9f5f2 / 联系蓝 #0c1b5c / 版权条 #060d2c
   有效区域：≥1200 视口两侧各留 100px（1920 下 = 1720px）
   rem 基准：模板 html 12px / 13px@768 / 14px@992
   ===================================================== */

body { font-family: poppins, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; }

/* ---- 主色：PSD 主黄即模板 text-primary 黄 ---- */
.text-primary { color: #ffeb00 !important; }

/* ---- 浅色屏上白色 chrome（汉堡/圆点）加淡蓝描边保证可见 ---- */
.navbar-toggle .icon-bar { box-shadow: 0 0 0 1px rgba(15, 37, 82, .18); }
#pp-nav span, .pp-slidesNav span { box-shadow: 0 0 0 1px rgba(15, 37, 82, .18); }

/* ---- 右侧圆点导航（PSD：直径14px，间距30px，激活黄） ---- */
#pp-nav li { width: 1rem; height: 1rem; margin: 1.14rem auto; }
#pp-nav span { width: 1rem; height: 1rem; background: #fff; }
#pp-nav li .active span, .pp-slidesNav .active span { background: #ffeb00; transform: none; }

/* ---- 1720px 有效区（≥1200；1920 视口下内容区恰为 1720px） ---- */
@media (min-width: 1200px) {
  .pagepiling .boxed-inner { padding-left: 0; padding-right: 0; }
  .pagepiling .boxed-inner > .boxed { padding-left: 100px; padding-right: 100px; }
  .pagepiling .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }
  .navbar.boxed { padding-left: 100px; padding-right: 100px; }
}

/* ---- navbar（PSD：仅 logo + 右上汉堡） ---- */
.navbar { padding-top: 2.6rem; }
/* 整条 header 不拦截鼠标（全宽 fixed 会挡住下方课堂标签上半部的点击），
   仅 logo 与汉堡按钮保留可点 */
.page-home .navbar { pointer-events: none; }
.page-home .navbar .brand,
.page-home .navbar .navbar-toggle { pointer-events: auto; }
/* navbar-bg 是无样式的孤类（无 CSS/JS 用途），但会占 flex 第一槽把 logo 顶向中间，隐藏 */
.navbar-bg { display: none; }
.brand img { display: block; height: 3.07rem; width: auto; margin-right: 0; }
.brand-info { display: none; }
.navbar .contacts { display: none !important; }
/* 首页下拉离开第一屏后隐藏 logo，只保留右侧导航按钮（保留占位，汉堡不跳动） */
.navbar .brand { transition: opacity .3s ease, visibility .3s ease; }
.navbar.navbar-nologo .brand { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- 圆点导航靠内（PSD 点中心距右缘约 112px） ---- */
#pp-nav { right: 105px; }
/* 汉堡横条全站统一 42×4；<480 缩小一点 */
.navbar-toggle .icon-bar { width: 42px; height: 4px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 8px; }
/* 内页 flex：归零 margin 交给 align-items:center 居中；首页 float 单独保留原 margin */
.navbar .navbar-toggle { margin-top: 0; }
.page-home .navbar-toggle { margin-top: .8rem; }
@media (max-width: 479px) {
  .navbar-toggle .icon-bar { width: 28px; height: 3px; }
  .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; }
  /* ≤479px 首屏背景换用竖版图（覆盖模板内联样式） */
  .section-1 .section-bg { background: url(../image/hero-bg2.jpg) top right / cover !important; }
}

/* ---- 隐藏分节内滚滚动条（模板黄色滚动条在移动端内滚时很突兀） ---- */
.pp-scrollable { scrollbar-width: none; -ms-overflow-style: none; }
.pp-scrollable::-webkit-scrollbar { display: none; }

/* ---- 模板左下角版权隐藏（版权进第四屏底部深条） ---- */
.copy-bottom { display: none !important; }

/* ---- 逐层入场动画（fx）：count-up.js 在 load+1.1s 给 body 加 fx-go，
        各屏 .active 的 .fx 子元素按 fx-dN 依次上浮进场；
        离屏 0.4s 快速淡出复位，回看可重播；接管模板 .intro 整体动画 ---- */
.pagepiling .section .intro { opacity: 1; transform: none; transition: none; }
.fx { opacity: 0; transform: translateY(2.2rem); }
.fx-go .pagepiling .section.active .fx {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
.fx-go .pagepiling .section:not(.active) .fx {
  opacity: 0; transform: translateY(2.2rem);
  transition: opacity .4s ease, transform .4s ease; transition-delay: 0s;
}
.fx-go .pagepiling .section.active .fx-d1 { transition-delay: .12s; }
.fx-go .pagepiling .section.active .fx-d2 { transition-delay: .24s; }
.fx-go .pagepiling .section.active .fx-d3 { transition-delay: .36s; }
.fx-go .pagepiling .section.active .fx-d4 { transition-delay: .48s; }
.fx-go .pagepiling .section.active .fx-d5 { transition-delay: .6s; }

/* ---- p2/p3/p4：标题后内容间隔加长（p1 不变） ---- */
.fx-go .pagepiling .section-2.active .fx-d1,
.fx-go .pagepiling .section-3.active .fx-d1,
.fx-go .pagepiling .section-4.active .fx-d1 { transition-delay: .35s; }
.fx-go .pagepiling .section-2.active .fx-d2,
.fx-go .pagepiling .section-3.active .fx-d2,
.fx-go .pagepiling .section-4.active .fx-d2 { transition-delay: .55s; }
.fx-go .pagepiling .section-3.active .fx-d3,
.fx-go .pagepiling .section-4.active .fx-d3 { transition-delay: .72s; }
.fx-go .pagepiling .section-3.active .fx-d4,
.fx-go .pagepiling .section-4.active .fx-d4 { transition-delay: .88s; }
.fx-go .pagepiling .section-4.active .fx-d5 { transition-delay: 1.05s; }

/* ==================== 第一屏 首页 ==================== */
.section-1 .display-2 { font-size: 4.4rem; text-transform: none; letter-spacing: -.02em; }
.section-1 .subtitle-top { font-size: 2.57rem; line-height: 1.5; letter-spacing: 0; margin-bottom: 2.6rem; }
.hero-founder { color: #ffeb00; font-size: 2.57rem; font-weight: 600; line-height: 1.4; margin: 0 0 2.2rem; }
.hero-para { color: rgba(255, 255, 255, .92); font-size: 1.28rem; line-height: 1.7; max-width: 36em; margin-bottom: 0; }
.hero-actions { margin-top: 6.6rem; }
.btn-teal { background-color: #34b7af; border-radius: 4px; font-size: 1.28rem; padding: 1.05em 2.2em 1em; }
/* 首页 hero 主按钮：胶囊全圆角 */
.hero-actions .btn-teal { border-radius: 99em; }
.btn-teal:hover, .btn-teal:focus { background-color: #2ba49c; color: #fff; }
.btn-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.14rem; height: 4.14rem;
  margin-left: 6px; vertical-align: middle;
  background: #34b7af; border-radius: 50%;
}
.btn-round img { width: 1.8rem; height: auto; display: block; }
.btn-round:hover { background: #2ba49c; color: #fff; text-decoration: none; }

/* ---- 底部数据条（白底，数字 #333 / 标签 #666） ---- */
.stats-strip { position: absolute; left: 0; right: 0; top: auto; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .85); padding: 1.7rem 0 1.5rem; }
.stats-strip .row { margin: 0; }
.stats-row { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 10rem; }
.stats-row .col-stat { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
.stat b {
  display: block; font-family: montserrat, poppins, sans-serif; font-weight: 700;
  font-size: 3.43rem; line-height: 1; color: #333; letter-spacing: -.02em;
}
.stat span { display: block; margin-top: .6rem; font-size: 1.21rem; color: #666; }

/* ==================== 第二屏 媒体报道 ==================== */
.pagepiling .section-2 { background: #11224e; }
.section-2 .title-uppercase { text-align: center; color: #fff; font-size: 3.43rem; margin-bottom: 0.5rem; }
.section-2 .sec-en { text-align: center; color: rgba(255, 255, 255, .55); margin: 0; }

/* 顶对齐定位：标题距屏顶 168px，避开顶部数据条（≈152px 高），不再垂直居中 */
.pagepiling .section-2 { padding-top: 0; padding-bottom: 0; }
.pagepiling .section-2 .vertical-centred { vertical-align: top; padding-top: 7rem; }
/* 三视频轮播：点击侧栏小框平滑滑向中框，正在播放（激活）的始终居中 */
.media-stage { position: relative; height: 39.29rem; margin-top: 4.9rem; }
.media-item {
  position: absolute; top: 2.86rem; display: block; overflow: hidden;
  border: 0 solid #000000; cursor: pointer;
  transition: left .55s ease, top .55s ease, width .55s ease, height .55s ease,
              border-width .55s ease, box-shadow .55s ease;
}
.media-item video, .media-item img { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1e44; }
.media-item.is-left { left: 1.4rem; width: 59.82rem; height: 33.57rem; z-index: 1; }
.media-item.is-right { left: calc(100% - 61.22rem); width: 59.82rem; height: 33.57rem; z-index: 1; }
.media-item.is-center {
  left: calc(50% - 35rem); top: 0; width: 70rem; height: 39.29rem; z-index: 3;
  border-width: 4px; box-shadow: 0 24px 70px rgba(6, 13, 44, .5); cursor: default;
}
.media-item .media-play { opacity: 0; transition: opacity .55s ease; }
.media-item.is-center .media-play { opacity: 1; }
.media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 11.5rem; height: 11.5rem;
  background: url(../image/btn.png) center / contain no-repeat;
}
/* 播放按钮改用 btn.png 图片，原 ion 三角图标隐藏 */
.media-play .ion-ios-play { display: none; }

/* 媒体屏：中央播放按钮（btn.png）+ 点击弹窗播放 */
/* 用 inset+margin:auto 居中而不用 transform：fx 动画体系的 transform:none 特异度更高会覆盖按钮居中 */
.media-play-btn {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  width: 11.5rem; height: 11.5rem; display: block;
}
.media-play-btn img { width: 100%; height: 100%; display: block; transition: transform .3s ease; }
.media-play-btn:hover img { transform: scale(1.08); }
.video-popup { background: #000; max-width: 1200px; margin: 0 auto; }
.video-popup video { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16/9; background: #000; border: 4px solid #000; object-fit: cover; }
.mfp-hide { display: none !important; }
/* 底部指示小圆点：仅 ≤1199px banner 滑动模式显示，由 media-carousel.js 生成 */
.media-dots { display: none; }

/* ==================== 第三屏 常见胸骨感染 ==================== */
.pagepiling .section-3 { background: #f9f5f2; }
.section-3 .title-uppercase { text-align: center; color: #0f2552; font-size: 3.43rem; margin-bottom: 0.5rem; }
.section-3 .sec-en { text-align: center; color: #8b97a5; margin: 0 0 5rem; }

.case-col { margin-bottom: 3rem; }
.case-card {
  position: relative; background: #fff; border-radius: 18px;
  padding: 2.8rem 2.8rem 2.4rem; margin-bottom: 4rem;
  box-shadow: 0 18px 45px rgba(15, 37, 82, .10);
  font-size: 1.29rem; line-height: 1.75; color: rgba(15, 37, 82, .8); /* 纯文字卡片：1920下视觉18px */
}
.case-card p { color: rgba(15, 37, 82, .8); font-size: 1.29rem; line-height: 1.75; margin-bottom: 1.1rem; }
.case-card p:last-of-type { margin-bottom: 0; }
.case-card--dark { background: #0f2552; }
.case-card--dark p { color: rgba(255, 255, 255, .9); }

/* ---- 病例卡悬停变蓝 ---- */
.case-card { transition: background-color .25s ease; }
.case-card:hover { background: #0f2552; color: #fff; }
.case-card:hover p { color: rgba(255, 255, 255, .9); }
.case-card--dark:hover { background: #16337a; }

.card-btns { display: flex; align-items: center; margin-top: 1.8rem; }
.btn-pill {
  flex: 0 0 auto; background: #34b7af; color: #fff; border-radius: 2em;
  padding: .3em 1.2em; font-size: 1.21rem; line-height: 1.4; margin-right: .6rem;
}
.btn-arrow {
  flex: 0 0 auto; width: 2.42rem; height: 2.42rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #34b7af; border-radius: 50%;
}
.btn-arrow img { width: 1.5rem; height: auto; display: block; }
.card-tip { margin-left: 1.2rem; font-size: 1rem; color: #9aa3b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-card--dark .card-tip { color: rgba(255, 255, 255, .55); }

/* ==================== 第四屏 联系方式 ==================== */
.pagepiling .section-4 { background: #0c1b5c; }
.section-4 .title-uppercase { font-size: 3.43rem; margin-bottom: 0.5rem; }
.section-4 .sec-en { color: #747d9a; margin: 0 0 3rem; }
.contact-address { margin-top: 2.2rem; }
.contact-address .phone { color: #ffeb00; font-size: 2.28rem; font-weight: 700; letter-spacing: .04em; }
.section-4 h5.text-muted { color: rgba(255, 255, 255, .92) !important; font-size: 1.42rem; font-weight: 400; margin: 1.2rem 0 0; }
.qr-row { margin-top: 4.4rem; }
.qr-item { display: inline-block; width: 11.8rem; margin: 0 1.8rem 0 0; }
.qr-item img { display: block; width: 11.8rem; height: 11.8rem; }

.form-title { color: #fff; font-size: 2.57rem; font-weight: 600; margin: 5.4rem 0 2.9rem; }
/* 标题与表单左缘间距：表单整体相对标题右缩进 */
.js-form { padding-left: 2.7rem; }
.js-form .form-group { margin-bottom: 2.4rem; }
.js-form input, .js-form textarea {
  width: 100%; height: 4.25rem; padding: 0 1.7rem;
  background: rgba(255, 255, 255, .4); border: 0; border-radius: 4px;
  color: #fff; font-size: 1.5rem; outline: none;
}
.js-form textarea { height: 14.2rem; padding: 1.2rem 1.7rem; resize: none; }
.js-form input:focus, .js-form textarea:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.js-form ::placeholder { color: rgba(255, 255, 255, .85); opacity: 1; }
.js-form span.error { display: block; font-size: 1.07rem; line-height: 1.3; color: #ff8585; margin-top: .6rem; }
.js-form input.error, .js-form textarea.error { border-color: #ff8585; box-shadow: none; }
.section-4 .btn-teal {
  float: right; background: #fff; color: #0f2552;
  width: 16.67rem; height: 5rem; padding: 0; line-height: 5rem;
  text-align: center; border-radius: 2.5rem; font-size: 1.67rem;
}
.section-4 .btn-teal:hover, .section-4 .btn-teal:focus { background: #f3ca2f; color: #0f2552; }

/* ---- 第四屏底部版权条 ---- */
.copy-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 3.14rem; line-height: 3.14rem; background: #060d2c;
  color: #d2d2d2; text-align: center; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
}
/* 版权内容来自富文本编辑器：块级 p 自带 margin 会撑破固定高度，归零 */
.copy-strip p { margin: 0; }

/* ==================== 响应式微调 ==================== */
@media (max-width: 767px) {
  /* 移动端整体缩小：rem 基准 12px -> 10px（约 -17%，标题/正文/间距同步缩小） */
  html { font-size: 10px; }
  /* 数据条改为文档流（不再遮挡 hero 文案），两列网格；margin-top 归零，
     否则背景图(.scroll-wrap)与数字条之间露出深色区块底色形成黑条 */
  .stats-strip { position: static; background: #fff; padding: 1.8rem 0 1.6rem; margin-top: 0; }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; padding: 0 1.7rem; }
  .stat b { font-size: 2.4rem; }
  .stat span { margin-top: .5rem; font-size: 1.1rem; }
  /* 第四屏版权条入流，去除与联系方式区之间的空隙 */
  .copy-strip { position: static; margin-top: 0; }
  /* 底部区域防露白：body 底色与联系方式区衔接 */
  body { background: #0c1b5c; }
  .about-contact { margin-bottom: 0; padding-bottom: 3.4rem; }
  /* 二维码并排 */
  .qr-row { display: flex; gap: 1.2rem; }
  .qr-item { margin: 0; }
  .hero-actions { margin-top: 3rem; }
  .form-title { margin-top: 2.4rem; }
  .js-form { padding-left: 0; }
  .card-tip { white-space: normal; }
  .section-3 .sec-en { margin-bottom: 3rem; }
  /* 病例列父级 margin 归零：移动端三列堆叠时，跨列间隔(卡片margin 4rem+
     列margin 3rem)会大于同列间隔(仅 4rem)，归零后全列间隔统一 */
  .case-col { margin-bottom: 0; }
}

/* ==================== 1920+ 大屏字号基准 ==================== */
@media (min-width: 1900px) {
  body { font-size: 1.33rem; }               /* 全站基础文字：视觉 16px */
  .ketang-post-body { font-size: 1.5rem; }   /* 课堂/媒体详情正文：视觉 18px */
  .detail-article p { font-size: 1.5rem; }   /* 感染详情正文：视觉 18px */
}

/* ==================== ≤479px 首屏文案缩小 ====================
   必须置于基础规则之后：同优先级下后者胜出，放前面会被 .section-1
   基础字号覆盖导致不生效 */
@media (max-width: 479px) {
  .section-1 .display-2 { font-size: 2.8rem; }
  .section-1 .subtitle-top { font-size: 1.7rem; }
  .hero-founder { font-size: 1.7rem; }
  .hero-para { font-size: 1.2rem; }
  /* 文字框宽度收窄（含按钮组），露出右侧人物 */
  .section-1 .intro .col-md-8 { width: 60%; }
  /* 介绍文字再往左移一点（默认 1.7rem） */
  .pagepiling .section-1 .boxed-inner > .boxed { padding-left: 1rem; }
  /* 数据条文字加大 */
  .stat b { font-size: 3rem; }
  .stat span { font-size: 1.3rem; }
}

/* ==================== ≤1199px 媒体区 banner 式左右滑动 ====================
   满宽 16:9 横向 scroll-snap 翻页，底部指示小圆点（JS 生成 .media-dots） */
@media (max-width: 1199px) {
  /* 媒体区移动端：去掉模板 :before 100vh 行内居中机制（stage 改绝对定位后
     内容塌缩会让行盒把标题推出可视区），改普通块布局撑满整屏高度。
     scroll-wrap 必须显式 height:100%：min-height 依赖内容时子级百分比高度
     全部无法解析会逐级塌陷，按钮就会重叠到标题上 */
  .pagepiling .section-2 .scroll-wrap { height: 100%; }
  .pagepiling .section-2 .scrollable-content { height: 100%; font-size: 1rem; }
  .pagepiling .section-2 .scrollable-content:before { content: none; }
  .pagepiling .section-2 .vertical-centred {
    position: relative; display: block; height: 100%;
    vertical-align: baseline; padding-top: 7rem;
  }
  /* stage 相对满屏的 vertical-centred 铺满，按钮即在屏幕上下正中 */
  .pagepiling .section-2 .boxed-inner { position: static; }
  .media-stage {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    height: auto; margin-top: 0;
  }
  .media-play-btn { width: 8rem; height: 8rem; }
  .media-stage .media-item {
    position: relative; top: auto; left: auto; width: 100%; height: auto;
    flex: 0 0 100%; aspect-ratio: 16 / 9; scroll-snap-align: center;
    border-width: 2px; box-shadow: 0 10px 30px rgba(6, 13, 44, .4);
  }
  .media-stage .media-item .media-play { opacity: 1; }
  .media-play { width: 4.6rem; height: 4.6rem; }
  /* 底部指示小圆点 */
  .media-dots { display: flex; justify-content: center; gap: .9rem; margin-top: 1.8rem; }
  .media-dots .dot {
    width: 1rem; height: 1rem; border-radius: 50%;
    background: rgba(255, 255, 255, .35); cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
  }
  .media-dots .dot.active { background: #34b7af; transform: scale(1.15); }
}

/* ==================== 768-1199 首屏文字列加宽 ====================
   lg 档(≥992)默认 50% 太窄导致大量换行、内容变高，按钮被底部数据条遮挡；
   加宽到 md 档同款 66.67% 减少换行（md 档本就是该宽度，不受影响） */
@media (min-width: 768px) and (max-width: 1199px) {
  .section-1 .intro .col-md-8 { width: 66.67%; }
  /* 该区间字号整体缩小一档，进一步压缩内容高度，避免按钮被数据条遮挡 */
  .section-1 .display-2 { font-size: 3.4rem; }
  .section-1 .subtitle-top { font-size: 2rem; }
  .hero-founder { font-size: 2rem; }
  .hero-para { font-size: 1.15rem; }
  /* 缩小首屏顶部内边距，文字整体上移，消除导航下方过大空白 */
  .section-1 .vertical-centred { padding-top: 4.5rem; }
}

/* ==================== 首页科普课堂（section-5）：双栏目点击切换 ==================== */
/* 背景与列表页一致用白底，卡片样式完全交给 ketang.css（与 listketang 相同） */
/* 顶对齐：消除垂直居中 + section 默认 padding-top 造成的大片顶部空白（同 section-2 做法） */
.pagepiling .section-5 { background: #fff; padding-top: 0; padding-bottom: 0; }
.pagepiling .section-5 .vertical-centred { vertical-align: top; padding-top: 4rem; }
.ketang-tabs { display: flex; justify-content: center; gap: 1.6rem; margin: 0.6rem 0 0.5rem; }
.ketang-tab {
  cursor: pointer; user-select: none; padding: 0.9rem 2.7rem; line-height: 1;
  border: 1px solid #d8dde3; border-radius: 99px;
  color: #6b7484; font-size: 1.6rem; transition: all 0.3s ease;
}
.ketang-tab:hover { border-color: #0f2552; color: #0f2552; }
.ketang-tab.active { background: #0f2552; border-color: #0f2552; color: #fff; }
.ketang-panel { display: none; }
.ketang-panel.active { display: block; }
.section-5 .ketang-grid { margin-top: 3.5rem; }