:root {
  --font-scale: 1;              /* 全局字体缩放比例，移动端媒体查询里会调小 */
}

/* ===== 基础重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: #ffffff;   /* 板块间留白也是白色，整体通白 */
  color: #222;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== 01 顶部导航（两段红底：上深红条 + 主红栏，白色 logo 与菜单） ===== */
.site-header {
  border-top: 28px solid #780c0c;
  background: #891b1a;
}

.header-inner {
  max-width: 1333px;
  margin: 0 auto;
  height: 74px;
  padding: 0 146px 0 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img {
  display: block;
  height: 43px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  color: #fff;
  font-size: calc(16px * var(--font-scale));
  transition: opacity 0.2s ease;
}

.site-nav a:hover {
  opacity: 0.75;
}

/* 汉堡按钮：桌面端隐藏 */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 汉堡展开时变 X */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== 内容板块 ===== */
main {
  display: block;
}

.section {
  width: 100%;
  background: #fff;
}

/* 板块间距：相邻板块之间留白，避免画面过于紧凑 */
.section + .section {
  margin-top: 20px;
}

/* 最后一个板块与页脚之间的留白 */
main {
  padding-bottom: 20px;
}

.section img {
  width: 100%;
  height: auto;
}

/* picture 包裹层：块级，避免内联元素带来的间隙 */
.section picture {
  display: block;
}

/* 整块可点击的板块（如 04 睿途VIP）：链接铺满板块，不影响图片原有布局 */
.section-link {
  display: block;
  cursor: pointer;
}

.section-link:focus-visible {
  outline: 3px solid #891b1a;
  outline-offset: -3px;
}

/* 02 视频区：静音自动循环播放（视频本身无声音，无需声音控件）
   容器压短为 2:1，视频 object-fit:cover 居中裁掉上下部分，只裁切不拉伸、不变形 */
.video-player {
  position: relative;
  line-height: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  /* 极简模糊底图（32x18 内联，约 620 字符）：容器一渲染就有内容，
     兜住"封面图/视频都还没到达"的那一瞬间，彻底消除闪烁 */
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAASACADASIAAhEBAxEB/8QAGwAAAgEFAAAAAAAAAAAAAAAAAAYDAQIEBQf/xAAhEAACAQQCAwEBAAAAAAAAAAABAgMABAUREjETISJBUf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAwL/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIRAxMx/9oADAMBAAIRAxEAPwCfC31q+Uuop2SPwBQC5B5N72d1ucqyQY+Ry4XkOKnfZNc+tJjDLLJw1zOqzjfyPH4yxEY9iMn53/dVRVpJyt0cceEmx8MpcceP0xPWu6DLaFgFuYjvr7HulizyZhjaNpR4ypARgSq7/Ro1cJbdiNXca9H0pBofK59M9ci+lSUUU0VKig0UUxH/2Q==") center / cover no-repeat;
}

.video-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;   /* 不能给纯色背景：视频首帧绘制前会先刷这层底色，导致闪黑 */
  z-index: 1;
}

/* 视频底层封面图：先用它把视频区铺满，视频首帧绘制完成后自然把它完全盖住 */
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* ===== 08 录取学校：整图 + 5 列悬停覆盖层 ===== */
/* 覆盖层按整图比例定位：5 等分列（--col 控制第几列），
   纵向覆盖照片区（header 带 507/1593 ≈ 31.8% 到照片底 1320/1593 ≈ 82.9%） */
.schools-wrap {
  position: relative;
}

.schools-overlay {
  position: absolute;
  top: 31.8%;
  bottom: 17.1%;
  left: calc((var(--col) - 1) * 20%);
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;                    /* 透明但仍可接收悬停/点击 */
  transition: opacity 0.25s ease;
  cursor: pointer;
  padding: 0 4%;
  box-sizing: border-box;
}

.schools-overlay:hover,
.schools-overlay.is-active {
  opacity: 1;
}

/* 覆盖层背景：上下渐变，整体 60% 透明度
   藏青列（1/3/5）：#757498 → #172d77 */
.schools-overlay--navy {
  background: linear-gradient(to bottom, rgba(117, 116, 152, 0.6) 0%, rgba(23, 45, 119, 0.6) 100%);
}

/* 红列（2/4）：#f3635e → #910000 */
.schools-overlay--red {
  background: linear-gradient(to bottom, rgba(243, 99, 94, 0.6) 0%, rgba(145, 0, 0, 0.6) 100%);
}

.schools-overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 700;
  font-size: clamp(10px, 0.95vw, 22px);
  line-height: 1.5;
  white-space: nowrap;
}

.schools-overlay ul li + li {
  margin-top: 0.35em;
}

/* 学校名单里的链接：与文字同色，悬停加下划线提示可点击 */
.schools-overlay ul a {
  color: #fff;
  text-decoration: none;
}

.schools-overlay ul a:hover {
  text-decoration: underline;
}


/* ===== 页脚（09：左 logo / 中间 标题+校区列 / 右 二维码 三段式） ===== */
.footer {
  width: 100%;
  background: #333333;
  padding: 45px 0 14px;
}

/* 三段式弹性布局：中间内容最高、决定行高，
   logo 与二维码 align-self 垂直居中；中间内容自身从顶部开始排列
   整行铺满视口宽度，logo 贴左、二维码贴右，中间区域因此获得更多空间 */
.footer-inner {
  width: 100%;
  padding: 0 5%;
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.footer-logo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  display: block;
  margin-right: 40px;        /* 与中间内容的距离 = gap 40px + 40px，共 80px */
  margin-top: 59px;          /* 下移越过「联系我们」标题（标题行25+红线6+2），与地区名行顶端对齐 */
  align-self: flex-start;
}

.footer-center {
  flex: 1 1 auto;
  min-width: 0;
}

/* 红色标题「联系我们」：比 logo 小、比地区名大，不加粗 */
.footer-heading {
  margin: 0;
  font-size: calc(18px * var(--font-scale));
  font-weight: 400;
  color: #e03018;
  line-height: 25px;
  width: fit-content;        /* 宽度贴合文字，便于下方红线按文字宽度计算 */
}

/* 标题下方的红线：与文字同宽 */
.footer-heading::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #e03018;
  margin-top: 6px;
}

/* 校区列：与「联系我们」标题之间留出 26px 下边距 */
.footer-main {
  display: flex;
  align-items: flex-start;
  margin-top: 26px;
  gap: 48px;                 /* 两列之间的间距固定 */
}

.footer-col {
  flex: 0 0 auto;            /* 宽度由文字内容自动决定 */
}

/* 红色地区名（北京/深圳/上海/广州）：
   字间距加大；不做左右偏移，保证左缘与下方学校名称严格对齐 */
.footer-region {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: #e03018;
  letter-spacing: calc(6px * var(--font-scale));
  margin: 0 0 16px;
  line-height: 1.4;
}

/* 校区条目：纯展示文本（无链接、无小手、无悬停变色/变淡） */
.footer-item {
  display: block;
}

.footer-group + .footer-group {
  margin-top: 20px;
}

.footer-group h4 {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: #d2d2d2;
  margin: 0 0 10px;
  line-height: 1.4;
  white-space: nowrap;       /* 宽屏下校区名称单行显示，不折行 */
}

.footer-group p {
  font-size: calc(11px * var(--font-scale));
  color: #7d7d7d;
  margin: 0;
  line-height: 1.7;
}

/* 二维码：右端，相对中间内容垂直居中 */
.footer-qr {
  flex: 0 0 auto;
  margin-top: 59px;          /* 与地区名行顶端对齐 */
  align-self: flex-start;
}

.footer-qr-inner {
  text-align: center;
}

.footer-qr img {
  width: 68px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer-qr p {
  margin: 10px 0 0;
  font-size: calc(12px * var(--font-scale));
  color: #e3e3e3;
  white-space: nowrap;
}

/* 版权与备案：底部独立一行，分隔线与内容区左右对齐 */
.footer-copyright {
  margin: 34px 5% 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
}

.footer-copyright a {
  color: inherit;
  text-decoration: none;
}

.footer-copyright a:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* ===== 响应式 ===== */
/* 中等宽度（769–1240px）：左右留白略缩，地址列弹性均分，
   字号略缩，二维码缩小到 104px，保证不溢出、不互相挤压 */
@media (max-width: 1240px) and (min-width: 769px) {
  .footer-inner {
    padding: 0 4%;
    gap: 24px;
  }

  .footer-main {
    gap: 32px;
  }

  /* 空间变窄，允许校区名称折行 */
  .footer-group h4 {
    white-space: normal;
  }

  .footer-region { font-size: calc(13px * var(--font-scale)); }
  .footer-group h4 { font-size: calc(13px * var(--font-scale)); }
  .footer-group p { font-size: calc(10.5px * var(--font-scale)); }

  .footer-qr img { width: 58px; }
  .footer-qr p { font-size: calc(11px * var(--font-scale)); }
}

@media (max-width: 768px) {
  /* 全局字体缩放：移动端所有文字（HTML 文字，不含图片内文字）整体缩小到 85%，
     觉得还大/还小只需改这一个数字，全站字号同步变化 */
  :root {
    --font-scale: 0.85;
  }

  /* 移动端板块间距缩小 */
  .section + .section {
    margin-top: 16px;
  }

  main {
    padding-bottom: 16px;
  }

  /* 移动端屏幕窄，视频恢复原始 16:9 高度 */
  .video-player {
    aspect-ratio: 16 / 9;
  }

  /* 01：窄屏改为汉堡菜单（点击展开/收起，竖排单列） */
  .site-header {
    border-top-width: 14px;
    position: relative;
  }

  .header-inner {
    height: 54px;
    padding: 0 16px;
    gap: 12px;
  }

  .site-logo img {
    height: 30px;
    flex-shrink: 0;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #891b1a;
    padding: 6px 0 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    font-size: calc(15px * var(--font-scale));
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-nav a:last-child {
    border-bottom: 0;
    font-size: calc(15px * var(--font-scale));
  }


  /* 09：窄屏改为上下堆叠，文字列两列换行，二维码单独一行 */
  .footer-inner {
    display: block;
    padding: 0 5%;
  }

  .footer-logo {
    height: clamp(26px, 8.5vw, 34px);   /* 随窗口宽度缩放，390px 屏约 33px */
    margin-right: 0;
    margin-top: 0;
  }

  .footer-heading {
    margin: 20px 0 0;
  }

  .footer-main {
    flex-wrap: wrap;
    padding: 0;
    margin-top: 20px;
    gap: 24px 48px;
  }


  .footer-main .footer-col {
    flex: 0 0 calc(50% - 24px);
  }

  /* 移动端允许校区名称折行 */
  .footer-group h4 {
    white-space: normal;
  }

  .footer-qr {
    margin: 24px 0 0;      /* 覆盖桌面端的 margin-top: 59px */
  }

  .footer-qr img {
    width: clamp(48px, 14vw, 57px);    /* 随窗口宽度缩放，390px 屏约 94px */
  }
}


/* ===== 课程咨询浮窗（来自线上 public/contact）=====
   全局 body 的 line-height:1.5 会把 30px 图标行撑到 45px，
   浮窗固定 65px 高 + overflow:hidden，导致"课程咨询"四个字底部被裁掉。
   这里按浮窗原始设计收紧行高，选择器带 .bg-contact 前缀以压过浮窗自带样式。 */
/* 浮窗容器整体提到最上层：其自身 position:fixed 但没写 z-index，
   在新版页面里会被前面的板块图片盖住（老站层级恰好不同），这里补上保险 */
.bg-contact {
  z-index: 99999;
}

/* 浮窗本体高度自适应：原始写死 65px，内部白底只有 60px，
   旧站是 content-box（多的缝被边框遮住），我们的全局 box-sizing:border-box
   会让底部露出约 3px 的透明缝（能透出后面的图片）。改为按内容自适应并补白底兜底 */
.bg-contact .contact {
  height: auto;
  background: #fff;
}

.bg-contact .contact-icon i {
  line-height: 1;
}

.bg-contact .contact-title {
  line-height: 1.4;
}