body,
html {
  font-family: "微软雅黑", "arial, helvetica, sans-serif";
  background: #c3e8ec;
  height: 100%;
}

.logo {
  position: absolute;
  top: 0.5rem;
  display: flex;
  animation: logo 1s;
  align-items: center;
  width: 3.82rem;
}
.page {
  position: relative;
}

#page1 {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
#page1 .kv {
  height: 100%;
}
.logo {
  position: absolute;
  left: 50%;
  margin-left: -8rem;
  top: 0.5rem;
  width: 2.03rem;
}

#page2 {
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page2.jpg) no-repeat center top;
  background-size: 100% auto;
  /* height: 55.7rem; */
}
.page2-1 {
  margin: 0rem auto;
  width: 17rem;
  padding-top: 1rem;
  position: relative;
}
.page2-1 img {
  display: flex;
  justify-content: center;
}
#jb1 img {
  width: 15rem;
}
#jb2 img {
  width: 16rem;
}
#jb3 img {
  width: 15rem;
}
#jb4 img {
  width: 17rem;
}
#jb5 img {
  width: 15rem;
}
.page2-left {
  margin-left: 2.8rem;
}
.page2-right {
  margin-left: -1rem;
}

#page3 {
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3.jpg) no-repeat center top;
  height: 13.56rem;
  background-size: 100% 100%;
}

#page3 .swiper-container {
  width: 15.9rem;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -7.85rem;
  top: 3rem;
  display: none;
}
#page3 .swiper-slide {
  width: 5.19rem;
  height: 4.19rem;
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3-bg.png) no-repeat;
  background-size: 5.19rem 4.19rem;
  cursor: pointer;
}
#page3 .swiper-slide img {
  margin: 0.15rem;
  width: 4.7rem;
}
#page3 .swiper-slide p {
  margin: -0.1rem 0.15rem 0 0.34rem;
  color: #ffffff;
  line-height: 0.34rem;
  font-size: 0.24rem;
}
.page3-nav {
  width: 15rem;
  position: absolute;
  left: 50%;
  margin-left: -7.5rem;
  display: flex;
  justify-content: center;
  top: 8.45rem;
  font-size: 0.4rem;
  color: #02a497;
  display: flex;
  align-items: baseline;
}
.page3-nav li {
  margin: 0px 0.11rem;
  cursor: pointer;
}
.page3-nav li.selectOn {
  font-size: 0.46rem;
  color: #d3a08b;
}
#page3 .swiper-button-next {
  width: 0.76rem;
  height: 1.1rem;
  position: absolute;
  left: 50%;
  margin-left: 8.3rem;
  top: 5rem;
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3-right-off.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
#page3 .swiper-button-next:hover {
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3-right-on.png);
}
#page3 .swiper-button-prev {
  width: 0.76rem;
  height: 1.1rem;
  position: absolute;
  left: 50%;
  margin-left: -8.9rem;
  top: 5rem;
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3-left-off.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
#page3 .swiper-button-prev:hover {
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page3-left-on.png);
}

.swiper-button-next::after {
  content: "";
}
.swiper-button-prev::after {
  content: "";
}

#page4 {
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page4.jpg) no-repeat center top;
  height: 10.93rem;
  background-size: 100% 100%;
}

#page4 .swiper-container {
  width: 12rem;
  height: 7.44rem;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -6rem;
  top: 1.95rem;
  display: none;
}
#page4 .swiper-slide {
  width: 12rem;
}
#page4 .swiper-slide img {
  width: 12rem;
}

.page4-nav {
  width: 15rem;
  position: absolute;
  left: 50%;
  margin-left: -7.5rem;
  display: flex;
  justify-content: center;
  top: 10.2rem;
  font-size: 0.4rem;
  color: #02a497;
  display: flex;
  align-items: baseline;
}
.page4-nav li {
  margin: 0px 0.11rem;
  cursor: pointer;
}
.page4-nav li.selectOn {
  font-size: 0.46rem;
  color: #d3a08b;
}
#page4 .swiper-pagination {
  position: absolute;
  left: 50%;
  margin-left: 6.3rem;
  top: 8.9rem;
  width: 1.5rem;
  font-size: 0.6rem;
  color: #88c5c8;
  display: none;
}
#page4 .swiper-pagination-current {
  font-size: 0.6rem;
  color: #ddc0a2;
}
#page4 .swiper-pagination-total {
  font-size: 0.34rem;
  color: #88c5c8;
  margin-left: -0.15rem;
}

#page4 .swiper-button-next {
  width: 0.42rem;
  height: 0.68rem;
  position: absolute;
  left: 50%;
  margin-left: 7.5rem;
  top: 5.5rem;
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page4-right-on.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
#page4 .swiper-button-next:hover {
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page4-right-off.png);
}
#page4 .swiper-button-prev {
  width: 0.42rem;
  height: 0.68rem;
  position: absolute;
  left: 50%;
  margin-left: -8.05rem;
  top: 5.5rem;
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page4-left-on.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
#page4 .swiper-button-prev:hover {
  background-image: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page4-left-off.png);
}

#page5 {
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/gj-page5.jpg) no-repeat center top;
  height: 12.8rem;
  background-size: 100% 100%;
  text-align: center;
}

.p5-1 {
  width: 8.31rem;
  margin: 2rem auto;
}
.p5-2 {
  display: block;
}
.p5-2 img {
  width: 4.24rem;
  margin: 0px auto;
}

.videoPop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 100;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.pop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1145px;
  height: 624px;
  margin-left: -572px;
  margin-top: -312px;
}
.changeBig {
  animation: big 1s ease-in forwards;
  -webkit-animation: big 1s ease-in forwards;
  -ms-animation: big 1s ease-in forwards;
}
@keyframes big {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
  }
}

.exit {
  position: absolute;
  width: 0.83rem;
  height: 0.83rem;
  cursor: pointer;
  right: -1rem;
  top: 0;
}

.videoPlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}
.videoPlay video {
  width: 100%;
}
.video-wrapper {
  position: relative;
}
.other {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.showVideoBig {
  animation: page1Big 2s ease-in-out forwards;
  transform-origin: 33% 300px;
  -webkit-animation: page1Big 2s ease-in-out forwards;
  -webkit-transform-origin: 33% 300px;
  -ms-animation: page1Big 2s ease-in-out forwards;
  -ms-transform-origin: 33% 300px;
}

@keyframes page1Big {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  100% {
    transform: scale(20);
    -webkit-transform: scale(20);
    -ms-transform: scale(20);
  }
}

.showVideoSmall {
  animation: page1Small 2s ease-in forwards;
  transform-origin: 33% 300px;
  -webkit-animation: page1Small 2s ease-in forwards;
  -webkit-transform-origin: 33% 300px;
  -ms-animation: page1Small 2s ease-in forwards;
  -ms-transform-origin: 33% 300px;
}

@keyframes page1Small {
  0% {
    transform: scale(20);
    -webkit-transform: scale(20);
    -ms-transform: scale(20);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}

.showBig {
  width: 1145px;
  cursor: pointer;
}

.page-nav {
  position: fixed;
  width: 2.3rem;
  height: 5.99rem;
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/nav-bg.png) no-repeat;
  background-size: 100% 100%;
  left: 1rem;
  top: 50%;
  margin-top: -4rem;
  z-index: 100;
  padding-top: 1.86rem;
}

.page-nav ul {
  font-size: 0.3rem;
  color: #fff;
  line-height: 0.5rem;
  text-align: center;
}
.page-nav ul li {
  padding: 0.1rem 0rem;
  border-bottom: 0.02rem solid #a7c8c7;
  cursor: pointer;
}

.page-nav ul li span {
  display: block;
}
.page-nav ul li:hover span {
  background: url(https://x0.ifengimg.com/fe/special/2025_11_20/img/page-nav.png) no-repeat;
  background-size: 100% 100%;
}

#page2 .video-part {
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -2rem;
}

#jb1 .video-part {
  margin-left: 4rem;
}
#jb2 .video-part {
  margin-left: -3rem;
}
#jb3 .video-part {
  margin-left: 4rem;
}
#jb4 .video-part {
  margin-left: -3rem;
}
#jb5 .video-part {
  margin-left: 4rem;
}