/* 通用重置 & 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设计稿基准宽度1920px，用于计算缩放比例 */
:root {
  --design-width: 1920;
  --scale: calc(100vw / var(--design-width));
  --min-scale: calc(1400 / var(--design-width));
}

/* 当屏幕宽度小于1400px时，使用最小缩放比例 */
@media (max-width: 1400px) {
  :root {
    --scale: 0.7px;
  }
}

body {
  font-family: "微软雅黑", sans-serif;
  color: #333;
  background-color: #fff;
  line-height: 1.6;
  min-width: 1400px;
  overflow-x: auto;
}

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

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

/* 头部 Banner */
.banner {
  position: relative;
  height: calc(1074 * var(--scale));
  min-height: calc(1074 * var(--min-scale));
  background: url("../img/top_bg.png") no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
  color: #fff;
}

.logo {
  position: absolute;
  top: calc(20 * var(--scale));
  left: calc(20 * var(--scale));
  font-size: calc(24 * var(--scale));
  font-weight: bold;
}

.back-btn {
  position: absolute;
  top: calc(20 * var(--scale));
  right: calc(20 * var(--scale));
  padding: calc(6 * var(--scale)) calc(12 * var(--scale));
  /* border: 1px solid #fff; */
  /* background: transparent; */
  /* color: #fff; */
  cursor: pointer;
  /* border-radius: 4px; */
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: calc(1300 * var(--scale));
}

.banner-content h1 {
  font-size: calc(32 * var(--scale));
  margin-bottom: calc(20 * var(--scale));
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hexagon-group {
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--scale));
  flex-wrap: wrap;
}

.hexagon {
  width: calc(80 * var(--scale));
  height: calc(92 * var(--scale));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}

.hexagon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 活动介绍 */
.intro {
  padding: calc(110 * var(--scale)) calc(20 * var(--scale)) calc(75 * var(--scale));
  background: linear-gradient(to bottom,
      #C6F0F7 0%,
      #C6F0F7 50%,
      #F2FDFF 62%,
      #F2FDFF 75%,
      #FFFFFF 87.5%);
  box-sizing: border-box;
}

.intro h2 {
  text-align: center;
  font-size: calc(28 * var(--scale));
  /* margin-bottom: 20px; */
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
}


blockquote {
  max-width: calc(1355 * var(--scale));
  margin: 0 auto;
  padding: calc(76 * var(--scale)) calc(46 * var(--scale)) calc(76 * var(--scale)) calc(109 * var(--scale));
  background-color: #fff;
  /* border: 1px solid #eee; */
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  position: relative;
  background: url("../img/intor_bg.png") no-repeat;
  background-size: 100% 100%;
  font-size: calc(24 * var(--scale));
  color: #000000;
  line-height: calc(53 * var(--scale));
  text-indent: 2em;
  height: calc(426 * var(--scale));
  top: calc(-20 * var(--scale));
  text-align: justify;
}



blockquote::before {
  top: calc(-20 * var(--scale));
  left: calc(10 * var(--scale));
}

blockquote::after {
  bottom: calc(-40 * var(--scale));
  right: calc(10 * var(--scale));
}

/* 短视频精选 */
.featured {
  padding: calc(171 * var(--scale)) calc(20 * var(--scale)) 0;
  /* height: 1399px; */
  background-color: #00c6ff;
  color: #fff;
  text-align: center;
  background: url("../img/video_list.png") no-repeat center top;
  background-size: cover;
}

.featured h2 {
  font-size: calc(32 * var(--scale));
  margin-bottom: calc(20 * var(--scale));
}

.year-tabs {
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--scale));
  margin-bottom: calc(230 * var(--scale));
}

.tab {
  padding: calc(6 * var(--scale)) calc(12 * var(--scale));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.tab.active {
  border-color: #fff;
}

.video-grid {
  /* display: flex; */
  /* align-items: center; */
  /* gap: 20px; */
  /* flex-wrap: wrap; */
  width: calc(1720 * var(--scale));
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: calc(124 * var(--scale));
}

.video-card {
  width: calc(200 * var(--scale));
  border-radius: calc(8 * var(--scale));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--scale)) calc(8 * var(--scale)) rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.video-card:hover {
  transform: translateY(calc(-5 * var(--scale)));
}

/* 全部短视频 */
.all-videos {
  /* padding: 150px 131px 85px; */
  /* background: url("../img/all_video_bg.png") no-repeat center top; */
  /* background-size: 100% 1087px; */
  /* color: #fff; */
  /* text-align: center; */
  background: #fff;
}

.videos-content {
  /* background: #fff; */
  padding: calc(150 * var(--scale)) calc(131 * var(--scale)) calc(85 * var(--scale));
  background: url(../img/all_video_bg.png) no-repeat center top;
  background-size: 100% calc(1087 * var(--scale));
  color: #fff;
  text-align: center;
}

.all-videos h2 {
  font-size: calc(32 * var(--scale));
  /* margin-bottom: 20px; */
  text-align: center;
  display: flex;
  justify-content: center;
}

.region-tabs {
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--scale));
  /* margin-bottom: 30px; */
  flex-wrap: wrap;
}

.region-tab {
  padding-bottom: calc(14 * var(--scale));
  cursor: pointer;
  transition: border-color 0.3s;
  font-size: calc(30 * var(--scale));
  color: #000000;
  line-height: calc(31 * var(--scale));
  position: relative;
  margin-left: calc(30 * var(--scale));
  margin-right: calc(30 * var(--scale));
}

.region-tab.active {
  color: #08C4DF;
}

.region-tab.active::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(12 * var(--scale));
  position: absolute;
  bottom: calc(-6 * var(--scale));
  background: #00c6ff;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(180 * var(--scale)), 1fr));
  gap: calc(20 * var(--scale));
  max-width: calc(1200 * var(--scale));
  margin: 0 auto;
}

.video-item {
  position: relative;
  border-radius: calc(8 * var(--scale));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--scale)) calc(8 * var(--scale)) rgba(0, 0, 0, 0.3);
}

.video-item span {
  position: absolute;
  bottom: calc(10 * var(--scale));
  left: calc(10 * var(--scale));
  background-color: rgba(0, 0, 0, 0.6);
  padding: calc(2 * var(--scale)) calc(6 * var(--scale));
  border-radius: calc(4 * var(--scale));
  font-size: calc(14 * var(--scale));
}

/* 页脚 */
.footer {
  padding: calc(40 * var(--scale)) calc(130 * var(--scale)) calc(40 * var(--scale)) calc(78 * var(--scale));
  background-color: #08C4DF;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* gap: 70px; */
}

.footer-logo {
  font-size: calc(24 * var(--scale));
  font-weight: bold;
  margin-right: calc(70 * var(--scale));
}

.copyright {
  /* text-align: center; */
  flex: 1;
  font-size: calc(14 * var(--scale));
  display: flex;
  justify-content: space-between;
  /* gap: 20px; */
  align-items: center;
  font-size: calc(22 * var(--scale));
  color: #FFFFFF;
  line-height: calc(40 * var(--scale));
}

.qrcodes {
  display: flex;
  /* gap: 20px; */
  margin-left: calc(70 * var(--scale));
}

.qrcode-item {
  text-align: center;
  font-size: calc(20 * var(--scale));
  color: #FFFFFF;
  line-height: calc(25 * var(--scale));
}

.qrcode-item+.qrcode-item {
  margin-left: calc(20 * var(--scale));
}

.qrcode-item img {
  width: calc(119 * var(--scale));
  height: calc(119 * var(--scale));
  margin-bottom: calc(5 * var(--scale));
}

.swiper-container {
  width: 100%;
  height: calc(600 * var(--scale));
  min-height: calc(600 * var(--min-scale));
}

.swiper-container .swiper-slide {
  text-align: center;
  font-size: calc(18 * var(--scale));
  background: #eee;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.7);
}

.swiper-container .swiper-slide.swiper-slide-active::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/arrow_icon.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 33;
}

.swiper-container-pagination {
  margin-top: calc(108 * var(--scale));
}

.swiper-container-pagination .swiper-pagination-bullet {
  background: #08C4DF;
  width: calc(20 * var(--scale));
  height: calc(20 * var(--scale));
  margin-right: calc(40 * var(--scale));
}

.swiper-container-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #08C4DF;
}

.swiper-container .swiper-slide-active,
.swiper-container .swiper-slide-duplicate-active {
  transform: scale(1);
}

.swiper-container .swiper-slide.swiper-slide-prev {
  transform: scale(0.8);
  translate: calc(-25 * var(--scale)) 0;
}

.swiper-container .swiper-slide.swiper-slide-next {
  transform: scale(0.8);
  translate: calc(25 * var(--scale)) 0;
}

.active_line {
  border-bottom: 1px solid #08C4DF;
  position: relative;
  padding-top: calc(260 * var(--scale));
  margin-bottom: calc(90 * var(--scale));
}

.active_line::after {
  content: "";
  display: block;
  width: calc(7 * var(--scale));
  height: calc(7 * var(--scale));
  position: absolute;
  border-radius: 50%;
  left: 0;
  bottom: calc(-3 * var(--scale));
  background: #08C4DF;
}

.active_line::before {
  content: "";
  display: block;
  width: calc(7 * var(--scale));
  height: calc(7 * var(--scale));
  position: absolute;
  border-radius: 50%;
  right: 0;
  background: #08C4DF;
  bottom: calc(-3 * var(--scale));
}

.mySwiper {
  height: calc(834 * var(--scale));
  width: calc(1600 * var(--scale));
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.mySwiper .swiper-slide {
  height: calc(50% - 10px);
  /* 2 行 */
  line-height: calc(240 * var(--scale));
  text-align: center;

  color: #fff;
  border-radius: calc(8 * var(--scale));
}

.province-list {
  display: flex;
  flex-wrap: wrap;
  /* display: flow; */
  /* flex-direction: column; */
  /* column-gap: 20px; */
  /* columns: 200px 4; */
  gap: calc(30 * var(--scale));
}

.province-list-title {
  font-size: calc(26 * var(--scale));
  color: #000000;
  line-height: calc(31 * var(--scale));
  position: relative;
  padding-bottom: calc(12 * var(--scale));
  padding-top: calc(16 * var(--scale));
  width: calc(368 * var(--scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.province-list-title::after {
  position: absolute;
  content: "";
  bottom: 0;
  width: calc(63 * var(--scale));
  height: calc(6 * var(--scale));
  background: #08C4DF;
  display: block;
  left: 50%;
  margin-left: calc(-32 * var(--scale));
}

.overlay-bg {
  background: url("../img/province_bg.png") no-repeat center;
  background-size: 100% 100%;
  width: calc(368 * var(--scale));
  height: calc(333 * var(--scale));
  position: relative;
}

.jx-overlay-bg {
  background: url("../img/province_bg.png") no-repeat center;
  background-size: cover;
  /* display: flex; */
  width: 100%;
  height: 100%;
}

.mySwiper-swiper-pagination {
  position: absolute;
}

.mySwiper-swiper-pagination .swiper-pagination-bullet {
  width: calc(6 * var(--scale));
  height: calc(63 * var(--scale));
  background: #E6E6E6;
  border-radius: 0;
}

.num_list {
  position: absolute;
  left: calc(22 * var(--scale));
  bottom: 0;
  color: #fff;
  font-size: calc(44 * var(--scale));
  line-height: calc(53 * var(--scale));
}

.hide {
  display: none;
}
.overlay-bg::before,
.jx-overlay-bg::before {
  background: url(../img/province_bg.png) no-repeat center;
  background-size: 100% 100%;
  display: block;
  content: "";
  position: absolute;
  z-index: 25;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: .67;
}

.overlay-bg img,
.jx-overlay-bg img {
  height: 100%;
}
/* 移动端适配 */
/* @media (max-width: 768px) {
  .banner {
    height: calc(300 * var(--min-scale));
  }

  .banner-content h1 {
    font-size: calc(24 * var(--min-scale));
  }

  .hexagon {
    width: calc(60 * var(--min-scale));
    height: calc(69 * var(--min-scale));
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .qrcodes {
    justify-content: center;
  }
} */