/* ==================== 基础重置与变量 ==================== */
[v-cloak] { display: none; }

/* 自定义分享二维码浮层 */
.share-pop {
  position: absolute;
  z-index: 3000;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  padding: 40px;
  width: 400px;
  transform: translate(-50%, -100%);
}
.share-pop-arrow {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.08);
}
.share-pop-inner {
  text-align: center;
}
.share-qr-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 178px;
  min-height: 178px;
}
.share-qr-box canvas {
  display: block;
}

:root {
  --deep-blue: #061233;
  --accent-blue: #2B5BD7;
  --light-blue: #517EE6;
  --cyan-glow: #00D4FF;
  --bg-page: #F1F6FF;
  --bg-card: #FFFFFF;
  --text-primary: #222222;
  --text-secondary: #555555;
  --text-light: #888888;
  --border-color: #E0E0E0;
  --notice-bg: #FFF8E6;
  --notice-color: #E6A23C;
  --skeleton-base: #e8ecf1;
  --skeleton-shine: #f0f3f8;
  /* 布局基准宽度：1340(最小，更窄出横向滚动条) ~ 1920(最大，超宽锁定) 之间按视口
     用 calc(max()) + min() 等价实现 clamp() */
  --content-w: calc(max(1340px, min(100vw, 1920px)));
  /* 设计稿基准缩放因子：基于基准宽度计算，超过1920锁为1，低于1340按1340算 */
  --scale: calc(var(--content-w) / 1920);
  /* 直播预告 card-poster：1920→460px，1440→345px = 460 × --scale */
  --card-w: calc(460px * var(--scale));
  /* 卡片间距 18px（设计稿）按比例 */
  --gap: calc(18px * var(--scale));
  /* 内容区左右留白：设计稿约 (1920-460×3-18×2)/2 ≈ 252 */
  --page-pad: calc(120px * var(--scale));
  /* 字号也按比例缩放（基准值×--scale） */
  --fs-title: calc(38px * var(--scale));
  --fs-sub: calc(16px * var(--scale));
  --fs-card-title: calc(14px * var(--scale));
  --fs-meta: calc(12px * var(--scale));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
button { border: none; cursor: pointer; outline: none; background: none; font-family: inherit; }

/* ==================== Banner 视频播放 ==================== */
.banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 2;
}

/* 开播后显示的播放按钮 */
.banner-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--accent-blue), var(--cyan-glow));
  color: #fff;
  font-size: 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(43, 91, 215, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.banner-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(43, 91, 215, 0.5);
}
.banner-play-btn .play-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}

/* ==================== 页面容器 ==================== */
.page-wrapper {
    min-width: 1340px;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url(../img/bg_img.png);
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    padding-bottom: calc(40 * var(--scale));
    background-color: #00056D;
    background-size: calc(1238 * var(--scale)) calc(1064 * var(--scale)) ;
    background-position-x: calc(900 * var(--scale));
}

.section-inner {
  width: calc(1440 * var(--scale));
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* ==================== 头部区域 ==================== */
.site-header {
  padding: calc(82 * var(--scale)) 0 calc(70 * var(--scale));
  position: relative;
}

.header-inner {
 
}

.header-left {
  flex-shrink: 0;
}

.logo-img {
  height: auto;
  width: calc(176 * var(--scale));
}
.day-img {
  width: calc(720 * var(--scale));
  height: auto;
  margin-left: calc(42 * var(--scale));
  margin-top: calc(46 * var(--scale));
}
.header-center {
  text-align: left;
}

.header-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: calc(6 * var(--scale));
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 212, 255, 0.25);
}

.header-subtitle {
  font-size: var(--fs-sub);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: calc(1 * var(--scale));
  margin-top: calc(4 * var(--scale));
}

.highlight-num {
  color: var(--cyan-glow);
  font-weight: 800;
  font-size: 1.15em;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.code-txt{
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
}
.center-box{
  text-align: center;
  padding: 30px 0;
}
/* ==================== 直播预告轮播区域 ==================== */
.live-preview-section {
  padding: calc(28 * var(--scale)) 0 calc(36 * var(--scale));
}
.preview-card {
  display: flex;
  flex-direction: column;
}

.live-preview-section .preview-card {
  width: 100%;
  overflow: hidden;
  background: var(--bg-card);
  padding:calc(26 * var(--scale)) calc(60 * var(--scale)) calc(60 * var(--scale));
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}



/* ---- 顶部标签栏 ---- */
.preview-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 calc(37 * var(--scale));
  flex-wrap: wrap;
  gap: calc(8 * var(--scale));
}

.tag-row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--scale));
}

.blue-tag {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  width: 76px;
}

.title-text {
  font-size: calc(26 * var(--scale));
  font-weight: 600;
  color:#000000;
}

.top-right {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--scale));
}
.live-start{
  color: #333333;
  font-size: calc(18 * var(--scale));
  font-weight: 400;
  margin-bottom: calc(10 * var(--scale));
  text-align: center;
}
.date-badge {
  padding: calc(8 * var(--scale)) calc(30 * var(--scale));
  background: #999999;
  border-radius: 35px;
  font-size: calc(18 * var(--scale));
  color: #fff;
  white-space: nowrap;
}
.line-l{
  width: 1px;
  height: calc(24 * var(--scale));
  background: #DCDBDB;
}
.share-btn-sm {
  width: calc(30 * var(--scale));
  height: calc(30 * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.share-btn-sm:hover { background: rgba(0, 0, 0, 0.05); }

.share-icon-sm { width: 30px; }

/* ---- Banner展示区 ---- */
.preview-banner-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1e4a 0%, #16327a 50%, #0d2560 100%);
  min-height: calc(600 * var(--scale));;
}

.banner-bg-img {
  width: calc(1320 * var(--scale));
  height: calc(743 * var(--scale));
  object-fit: cover;
}

.banner-overlay-content {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 65% 45%, rgba(0, 212, 255, 0.08) 0%, transparent 55%),
    linear-gradient(135deg, rgba(10, 30, 74, 0.82) 0%, rgba(22, 50, 122, 0.72) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(30 * var(--scale)) calc(40 * var(--scale));
  color: #fff;
  text-align: center;
}

.overlay-main-title {
  font-size: calc(44 * var(--scale));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: calc(3 * var(--scale));
  background: linear-gradient(180deg, #FFFFFF 0%, #A8C8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(0, 212, 255, 0.2));
  margin-bottom: calc(14 * var(--scale));
}

.overlay-sub-title {
  font-size: calc(22 * var(--scale));
  font-weight: 600;
  letter-spacing: calc(4 * var(--scale));
  color: #fff;
  margin-bottom: calc(4 * var(--scale));
}

.overlay-date-line {
  margin-bottom: calc(10 * var(--scale));
}

.date-label {
  display: inline-block;
  padding: calc(2 * var(--scale)) calc(14 * var(--scale));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: calc(3 * var(--scale));
  font-size: calc(12 * var(--scale));
  letter-spacing: calc(1 * var(--scale));
  color: rgba(255, 255, 255, 0.85);
}

.overlay-desc {
  font-size: calc(11 * var(--scale));
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  max-width: calc(420 * var(--scale));
}

/* 右下角二维码 */
.qr-codes {
  position: absolute;
  bottom: calc(16 * var(--scale));
  right: calc(16 * var(--scale));
  display: flex;
  gap: calc(10 * var(--scale));
}

.qr-item .qr-placeholder {
  width: calc(52 * var(--scale));
  height: calc(52 * var(--scale));
  background: #fff;
  border-radius: calc(4 * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-item .qr-placeholder::after {
  content: '';
  width: calc(40 * var(--scale));
  height: calc(40 * var(--scale));
  background:
    repeating-linear-gradient(0deg, #333 0px, #333 3px, transparent 3px, transparent 6px),
    repeating-linear-gradient(90deg, #333 0px, #333 3px, transparent 3px, transparent 6px);
  opacity: 0.7;
}

/* ---- 重要通知 ---- */
.notice-section {
  padding: calc(30 * var(--scale)) 0 0;
}

.notice-tag {
  width: calc(84 * var(--scale));
  padding: calc(3 * var(--scale)) calc(10 * var(--scale));
  background: #FF9E00;
  color: #fff;
  border-radius: calc(3 * var(--scale));
  font-size: calc(15 * var(--scale));
  font-weight: 700;
  margin-bottom: calc(20 * var(--scale));
}

.notice-text {
  font-size: calc(18 * var(--scale));
  color: #333;
  line-height: 1.75;
}

/* ---- 底部操作栏 ---- */
.preview-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(26 * var(--scale)) 0 0;
}

.open-time-text {
  font-size: calc(14 * var(--scale));
  color: var(--text-light);
}

.enter-live-btn {
  padding: calc(14 * var(--scale)) calc(26 * var(--scale));
background: #043a96;
  color: #FFFFFF;
  font-size: calc(20 * var(--scale));
  font-weight: 500;
}


.enter-live-btn:active { transform: translateY(0); }

/* Swiper 控制器样式（直播预告卡片轮播） */
.preview-cards-swiper {
  padding-bottom: calc(44 * var(--scale));
  position: relative;
}

.preview-cards-swiper .swiper-slide {
  width:calc(460 * var(--scale));
  height: auto;
}

.preview-cards-swiper .swiper-pagination-bullet {
  width: calc(8 * var(--scale));
  height: calc(8 * var(--scale));
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: all 0.3s;
}
.preview-cards-swiper .swiper-pagination-bullet-active {
  background: var(--cyan-glow);
  width: calc(24 * var(--scale));
  border-radius: calc(5 * var(--scale));
}
.card-swiper-box{
  position: relative;
}
.card-swiper-box .swiper-button-prev,
.card-swiper-box .swiper-button-next {
  width: calc(38 * var(--scale));
  height: calc(38 * var(--scale));
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  color: #00056d;
  transition: all 0.25s;
  top: 42%;
}
.card-swiper-box .swiper-button-prev { left: calc(-50 * var(--scale)); }
.card-swiper-box .swiper-button-next { right: calc(-50 * var(--scale)); }
 
.card-swiper-box .swiper-button-prev::after,
.card-swiper-box .swiper-button-next::after {
  font-size: calc(17 * var(--scale));
  font-weight: bold;
}
.card-pagination { bottom: calc(4 * var(--scale)) !important; }

/* ==================== 虚线边框标题 ==================== */
.dashed-title-wrap {
  margin-bottom: calc(18 * var(--scale));
}

.dashed-title {
   width: 366px
}

/* ==================== 卡片区域 ==================== */
.card-section { padding: calc(10 * var(--scale)) 0 calc(32 * var(--scale)); }
.replay-section { padding-top: calc(4 * var(--scale)); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(460 * var(--scale)));
  gap: calc(30 * var(--scale));
  justify-content: center;
}

/* ---- 直播卡片 ---- */
.live-card {
  background: var(--bg-card);
  border-radius: calc(6 * var(--scale));
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  width: 100%;
  height: 100%;
}


/* 卡片海报区 */
.card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #e0f0ea 0%, #b8dcc8 100%);
}

.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.live-card:hover .poster-img { transform: scale(1.04); }

/* 海报左上角标签点 */
.poster-tags {
  position: absolute;
  top: calc(10 * var(--scale));
  left: calc(10 * var(--scale));
  display: flex;
  gap: calc(5 * var(--scale));
}

.pt-dot {
  width: calc(18 * var(--scale));
  height: calc(18 * var(--scale));
  border-radius: 50%;
  border: calc(2 * var(--scale)) solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dot-green { background: #4CAF50; }
.dot-orange { background: #FF9800; }
.dot-blue { background: #2196F3; }

/* 卡片内容区 */

.card-title {
  display: none;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20 * var(--scale)) calc(30 * var(--scale));
}

.cf-time {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--scale));
  font-size: calc(20 * var(--scale));
  color: #043a96;
    font-weight: 600;
    border-radius: 2px;
      opacity: 1;
      background: #eff3ff;
      padding: calc(14 * var(--scale)) calc(20 * var(--scale));
}

.cf-icon { width: calc(13 * var(--scale)); height: calc(13 * var(--scale)); }


.cf-share:hover { background: rgba(0, 0, 0, 0.04); }

.cf-share-img { width: 30px;height: 30px; }

/* ==================== 骨架屏效果 ==================== */
.skeleton { display: flex; flex-direction: column; }

.skeleton-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 37%,
    var(--skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: calc(6 * var(--scale)) calc(6 * var(--scale)) 0 0;
}

.skeleton-lines {
  padding: calc(12 * var(--scale)) calc(14 * var(--scale)) calc(14 * var(--scale));
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--scale));
}

.skeleton-line {
  height: calc(13 * var(--scale));
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 37%,
    var(--skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: calc(3 * var(--scale));
}

.line-1 { width: 78%; }
.line-2 { width: 58%; }
.line-3 { width: 38%; }

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}