.warp{ width: 100%; height: 100%; position: relative; }


.swiper { width: 100%; height: 100%; }

.swiper-slide { position: relative; }




/* page1 */
.page1{ width: 100%;
   /* background: url(../img/page1/bg.jpg) center top no-repeat; */
   background-image: url(../img/page1/bg.jpg);
   background-position: center top;
   background-repeat: no-repeat;
   background-size:cover;
   }


.page1 .content{position: absolute;bottom: 23rem;width: 100%;}

.page1 .sglon{ width: 200rem; display: block; margin: 0 auto;position: absolute;left: 50rem; top:150rem;display:none;}



.page1 .btn1{ display: flex; justify-content: center; align-items: center;gap: 50rem; margin-bottom: 50rem;}

.page1 .btn1 .play{
  width: 102rem;
  height: 101rem;
  background: url(../img/page1/play.png) center center no-repeat;
  background-size: 100% auto;
}
.page1 .btn1 .gift{
  position: relative;
  width: 103rem;
  height: 106rem;
  background: url(../img/page1/gift.png) center center no-repeat;
  background-size: 100% auto;
  animation: giftScale 1.5s ease-in-out infinite;
  display: none;
}
.page1 .btn1 .gift span{
  width: 100%;
  position: absolute;
  bottom: 1rem;
  font-size: 11rem;
  color: #ffe7ac;
  text-align: center;
}
.page1 .btn2{ display: flex; justify-content: space-around; align-items: center; }
.page1 .btn2 a{ width:238rem; height: 57rem; }
.page1 .btn2 a img{ width: 100%; }
@keyframes giftScale {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.music_btn{
    /* position: absolute;
    right: 0.16rem;
    top:1rem; */
    width: 40rem;
    height: 32rem;
    background: url('../img/page1/music.png') no-repeat center;
    background-size: 100% auto;
    /* margin-bottom: 0.26rem; */
    position: absolute;
    right: 16rem;
    top: 160rem;
    transform: translateZ(0);
}
.music_btn.on{
    background: url('../img/page1/music_on.png') no-repeat center ;
    background-size: 100% auto;
}
.system-des{
    height: 30rem;
    /* background-color: #0b3b2e; */
    border-radius: 16rem;
    opacity: 0.8;
    font-size: 12rem;
    line-height: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 23rem auto 0;
    color: #efd38b;
    /* background: red; */
}
.system-des .system-tip{
    color: #fbdb8c;
    color: #efd38b;
}
.system-des .system-type{
    color: #fff5cf;
    color: #ffffff;
}
.system-des .system-icon{
    margin-left: 10rem;
    width: 67rem;
    height: 100%;
    background: url(../img/page1/system-icon.png) center no-repeat;
    background-size: 100% auto;
}
/* page2 */

.page2{ width: 100%; background: url(../img/page2/bg.jpg) center top no-repeat; background-size:cover; }

.page2 .content{ position: absolute; width: 720rem; left: 50%; transform: translate(-50%); height:100%; }
.page2 .title{position: relative;margin: 160rem auto 0;text-align: center;color: #f8e6a0;font-size: 50rem;width:384rem;height: 127rem;line-height: 140rem;background: url(../img/btbg.png) center bottom no-repeat;background-size: 178rem auto;}
.page2 .title i{position: absolute;right: -10rem;top: 25rem;width: 26rem;height: 25rem;background: url(../img/yinzhang.png) center center no-repeat;background-size: 26rem auto;}
.page2  .title em{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 17rem;
  color: #e4cc8d;
  bottom: 10rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
.page2 .feature-content{
    width: 713rem;
    overflow: hidden;
    position: relative;
    border-radius: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* padding-bottom: 20rem; */
    margin: 34rem auto;
}
.feature-swiper{
    position: relative;
    height: 406rem;
}
.page2 .feature-kv{
    width: 713rem;
    height: 406rem;
    position: relative;
}
.page2 .feature-kv::after{
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0;
    top:0;
    background: url(../img/page2/vbg.png) no-repeat center center;
    background-size: 100% 100%;
    pointer-events: none; 
    z-index: 1;
}
.page2 .swiper-container {
    width: 100%;
    height: 100%;
}
.page2 .swiper-slide{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
 
}
.page2 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40rem;
}
 .swiper-button-prev,
 .swiper-button-next {
    width: 60rem;
    height: 47rem;
    margin: 0;
    /* background-size: contain; */
    position: relative;
    top: 0;
    background-size: auto 100%;
}
 .swiper-button-prev::after,
 .swiper-button-next::after {
    display: none;
}
.page2 .swiper-button-prev {
   background-image: url(../img/page2/arrow_left.png);
}

.page2 .swiper-button-next {
   background-image: url(../img/page2/arrow_right.png);
}
.page2 .swiper-controls{
    width: 665rem;
    height: 47rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    gap: 30rem;
    position: relative;
    z-index: 11;
    margin: 30rem auto 0;
    /* background: red; */
}
.page2 .swiper-pagination{
    position: relative;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 47rem;
    top:0;
}
.page2 .vbgbox{ width: 713rem; height: 406rem; margin: 140rem auto 0; position: relative;display:none; }

.page2 .vbgbox .kbox{ position: absolute; z-index: 20; left: 0; top: 0; pointer-events: none; width: 713rem; height: 406rem; background: url(../img/page2/vbg.png) center center no-repeat; background-size: 100% auto; }

.page2 .showVideo{ position: absolute; width: 698rem; height: 390rem; top: 8rem; left: 8rem; }
.page2 .showVideo iframe{ width: 100%; height: 100%; border-radius: 10rem; pointer-events: all; }


.page2  .dec{     margin-top: 130rem; }

.page2  .dec h4{ font-size: 35rem; color: #fff0ba; text-align: center; background: url(../img/page2/tbg.png) center bottom no-repeat; background-size: 517rem auto; }
.page2  .dec  p{ font-size: 21rem; color: #fff6ca; width: 570rem; margin: 30rem auto 0; text-indent: 40rem;font-family: dpr; }


/* page3 */


.page3{ width: 100%; background: url(../img/page3/bg.jpg) center top no-repeat; background-size:100% 100%; }

.page3 .content{/* position: absolute; *//* width: 100%; *//* left: 50%; *//* transform: translate(-50%); *//* height:100%; *//* position: absolute; *//* width: 100%; *//* height: 100%; *//* display: flex; *//* flex-direction: column; *//* align-items: center; *//* padding-top: 70rem; *//* left: 0; *//* top: 0; *//* box-sizing: border-box; */position: absolute;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 0.7rem;left: 0;top: 0;box-sizing: border-box;}
.page3 .title{white-space: nowrap;  z-index:1; position: absolute;margin: 160rem auto 0;text-align: center;color: #f8e6a0;font-size: 50rem;width:384rem;height: 127rem;line-height: 140rem;background: url(../img/btbg.png) center bottom no-repeat;background-size: 178rem auto;}
.page3 .title i{position: absolute;right: -10rem;top: 25rem;width: 26rem;height: 25rem;background: url(../img/yinzhang.png) center center no-repeat;background-size: 26rem auto;}
.page3  .title em{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 17rem;
  color: #e4cc8d;
  bottom: 10rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.page3 {
  position: relative;
  overflow: hidden;
  background-color: #501d12;
}
.page3 .main-content{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.8rem;
  left: 0;
  top: 0;
  box-sizing: border-box;
  background-color: #501d12;
}

.page3 .role-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.role-swiper .swiper-slide{
  display: none;

}
.role-swiper .swiper-slide.active{
 display: block;
}
.page3 .slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.page3 .role-content{
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  /* background-image: url(../img/page3/role_bg.png); */
  background-size: 100% auto;
  background-repeat: no-repeat;
  object-position: center top;
}
.role-content.role-lz{
  background-image: url(../img/page3/role/lz.jpg);
  background-size: cover;
  background-repeat: no-repeat;object-fit: cover;
  background-position: center;
}
.role-content video{
  height: 100%;
  height: 100%;
  object-fit: cover;
}
.page3 .role-content.active{
 display: block;
}
.page3 .slide-content .role-img {
  width: 100%;
  height: auto;
  /* position: relative;
  object-fit: cover;
  object-position: top;   */
}
.page3 .role-bottom::before{
  content: "";
  width: 100%;
  height: 600rem;
  position: absolute;
  bottom:0;
  left: 0;
  background: url(../img/page3/thumbs-bg.png) no-repeat center bottom;
  background-size: 100% auto;
}

.page3 .text-content .main-title {
  
  color: #eed289;
  white-space: nowrap;
  font-size: 20rem;
  /* margin-bottom: 5rem; */
}

.page3 .text-content .sub-title {
  font-size: 30rem;
  color: #eed289;
  /* line-height: 1.5; */
  margin-right: 18rem;
  white-space: nowrap;
  line-height: 30rem;
}

.page3 .title-group {
  width: 446rem;
  height: 47rem;
  display: flex;
  align-items: flex-end;
  margin: 20rem auto;
  position: relative;
  justify-content: center;
  padding-bottom: 15rem;
  background: url(../img/page3/role_line.png) no-repeat bottom center;
  background-size: 100% auto;
}

.page3 .main-title {
  font-size: 0.47rem;
  color: #fff;
  margin-right: 20rem;
  line-height: 1;
}

.page3 .sub-title {
  font-size: 0.27rem;
  color: rgba(255, 255, 255, 0.8);
  /* line-height: 1; */
 
}

.page3 .desc-text {
  width: 100%;
  font-size: 24rem;
  color: #eed289;
  line-height: 24rem;
  margin: 2rem auto;
  /* text-align: center; */
  /* text-indent: 2em; */
  font-family: dpr;
}

.role-bottom {
      position: absolute;
      bottom:0rem;
      width: 100%;
      padding-bottom: 0.8rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .role-text{
      width: 645rem;
      position: relative;
  }
.role-text .text-content{
  display: none;
}
.role-text .text-content.active{
  display: block;
}
.page3 .role-nav-thumbs{
  /* position: absolute; */
  /* bottom: 1.2rem; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
  width: 539rem;
  z-index: 10;
}
.role-nav-thumbs .swiper-slide{
  width: 113rem;
}
.page3 .swiper-controls{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 18rem;
  margin-bottom: 50rem;
  /* align-items: center; */
}

.page3 .thumbs-swiper {
  width: 539rem;
  height: 78rem;
  z-index: 10;
  overflow: hidden;
}
。
.page3 .thumbs-swiper .swiper-slide {
  width: 1.13rem;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
}
.page3 .thumbs-swiper   .rwtxbg i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1rem;
  width: 65rem;
  height: 65rem;
  background: url(../img/page3/txzs.png) center center no-repeat;
  background-size: 100% 100%;
  /* display: none; */
}

.page3 .thumbs_slide  .rwtxbg-content{
  width: 113rem;
  display: flex;
  flex-direction: column;
}
.page3  .swiper-slide .thumbs_name{
  height: 26rem;
  width: 100%;
  line-height: 26rem;
  font-size: 22rem;
  color: #eed289;
  text-align: center;
  background: url(../img/page3/txbg.png) no-repeat center center;
  background-size: 100% 100%;
  margin-top: -10rem;
  z-index: 1;
  white-space: nowrap;
}
.page3  .swiper-slide-active  .thumbs_name{
  color: #6d3711;
  background: url(../img/page3/txbgOn.png) center center no-repeat;
  background-size: 100% 100%;
}
.page3 .thumbs_slide  .rwtxbg{
  width:  100%;
  height: 63rem;
  background: url(../img/page3/thumb-nav-bg.png) center bottom 10rem  no-repeat;
  background-size: 87rem auto;
  display: flex;
  justify-content: center;
}
.page3 .thumbs_slide  .rwtxbg .img {
  width: 63rem;
  height: 63rem;
  -webkit-mask: url(../img/page3/txzs1.png);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  position: relative;
}
.page3 .thumbs-swiper .rwtxbg img {
  width: 63rem;
  height: 63rem;
  position: absolute;
  left: 0;
  top: 0;
  /* transform: translate(-50%, -50%); */
}


.page3 .swiper-button-prev,
.page3 .swiper-button-next {
  width: 60rem;
  height: 47rem;
  top:34.5%;
  /* top: 65%; */
  position: absolute;
}

.page3 .swiper-button-prev {/* background-size: contain; */left: 40rem;}

.page3 .swiper-button-next {
  width: 60rem;
  height: 47rem;
  background-size: auto 100%;
  right: 40rem;
}

.page3 .swiper-button-prev::after,
.page3 .swiper-button-next::after {
  display: none;
}
.page3 .swiper-button-prev {
    background-image: url(../img/page3/honors_left.png);
}
.page3 .swiper-button-next{
    background-image: url(../img/page3/honors_right.png);
}

/* page4 */
/* 循环播放logo */
@keyframes run {
  0% {
      background-position: 0 0;
     
  }
  100% {
      background-position: -14220rem 0rem;
  }
  
}
.page4{ width: 100%; background: url(../img/page4/bg.jpg) center top no-repeat; background-size:100% 100%; }

.page4 .content{ position: absolute; width: 100%; left: 50%; transform: translate(-50%); height:100%; }
.page4-title {
  position:relative;
  width:100%;
}
.page4 .subtitle{
     width: 158rem;
     height: 88rem;
     background-image: url(../img/page4/sprites.png);
     background-repeat: no-repeat;
     background-position: 0 0;
     background-size: 14220rem 88rem;
     animation: run 3s steps(90) 0.1s infinite;
     overflow: hidden;
     top: 50%;
     position: absolute;
     transform: translateY(-50%) scale(1.5);
     left: 10%;
     /* left: 39rem; */
}
.page4 .title{    white-space: nowrap;position: relative;margin: -60rem auto 0;text-align: center;color: #f8e6a0;font-size: 50rem;width: 300rem;height: 120rem;line-height: 120rem;background: url(../img/btbg.png) center bottom no-repeat;background-size: 178rem auto;}
.page4 .title i{ position: absolute; right:-30rem; top: 0; width: 26rem; height: 25rem; background: url(../img/yinzhang.png) center center no-repeat; background-size: 26rem auto; }

.page4  .title em{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 17rem;
  color: #e4cc8d;
  bottom: 10rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
.page4 .zuipin{
  width: 100%;
  height: 545rem;
  opacity: 0;
  margin-top: 20rem;
  pointer-events: none;
}
.page4 .kv-image {
  width: 100%;
  height: auto;
}

.page4 .boxMask {
  overflow: hidden;
  opacity: 1;
  display: block;
  width: 100%;
  -webkit-mask: url(../img/page4/mask2.png);
  -webkit-mask-size: 599% 100%;
  -webkit-mask-position: 0 0;
  animation: mask .6s steps(5) forwards;
}
.page4 .honor{
  
  width: 680rem; 
  height: auto;
  margin: 80rem auto 0;

}
.page4 .honor-box{
  display: flex;
  flex-wrap: wrap;
}
.page4 .honor-item{
  width: 167rem;
  height: 83rem;
  background: url(../img/page4/honor_bg.png) center no-repeat;
  background-size: 100% auto;
  color: #ffec96;
  margin-right: 88rem;
  margin-bottom: 30rem;
  position: relative;
  box-sizing: border-box;
  padding: 0 21rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page4 .honor-item:nth-child(3n){
  margin-right: 0;
}
.page4 .honor-item::after{
  content: "";
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:197rem;
  width: 31rem;
  height: 1rem;
  background-color: rgba(255, 220, 129, 0.5);

}
.page4 .honor-item:nth-child(3n)::after{
  content: "";
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:273rem;
  width: 44rem;
  height: 2rem;
  display: none;
}
.page4 .honor-item:last-child::after{
  display: none;
}
.page4 .honor-title{
  width: 100%;
  font-size: 15.5rem;
  line-height: 20rem;
  margin-top: 11rem;
  text-align: center;

  
}
.page4 .honor-des{
  font-size: 10rem;
  line-height:15rem;
  text-align: center;
}
@keyframes mask {
  0% {
      -webkit-mask-position: 0 0;
  }
  100% {
      -webkit-mask-position: 100% 0;
  }
}


.page4 .img { width: 100%; height: 100%; position: relative; }

.page4 .img img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.page4 .txt {color: #451f04;width: 90%;margin: 30rem auto 0;font-family: dpr;  height: 422rem;overflow: auto;padding: 0 20rem;}
.page4 .txt p{ font-family: xq; font-size: 26rem; line-height: 30rem; color: #fde9ba;margin-bottom: 20rem;text-indent: 40rem;}


/* 滚动条 */
.page4 .txt::-webkit-scrollbar {
  width: 55rem;
}

/* 滚动槽 */
.page4  .txt::-webkit-scrollbar-track {
  /* background: #e0bf6e; */
  background: url(../img/page4/popLine.png) center top no-repeat;
  background-size: 5.5rem 100%;
}

/* 滚动槽 */
.page4 .txt::-webkit-scrollbar-thumb {
  /* background: #888; */
  background: url(../img/page4/dian.png) center bottom no-repeat;
  background-size: 45rem auto;
  width: 45rem;
}

/* page5 */

.page5{ width: 100%; background: url(../img/page5/bg.jpg) center top no-repeat; background-size:cover; }

.page5 .content{ position: absolute; width: 100%; left: 50%; transform: translate(-50%); height:100%; }
.page5 .title{position: relative;margin: 160rem auto 0;text-align: center;color: #f8e6a0;font-size: 50rem;width: 350rem;height: 120rem;line-height: 140rem;background: url(../img/btbg.png) center bottom no-repeat;background-size: 178rem auto;}
.page5 .title i{position: absolute;right: -10rem;top: 25rem;width: 26rem;height: 25rem;background: url(../img/yinzhang.png) center center no-repeat;background-size: 26rem auto;}
.page5  .title em{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 17rem;
  color: #e4cc8d;
  bottom: 10rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  display: none;
}

.page5 .plBox{position: relative;margin: 107rem auto 0;width: 620rem;}
.page5 .plBox .swiper{height:505rem ;}
.page5 .plBox .pinglun1{width: 619rem;height: 505rem;background: url(../img/page5/plbg1.png) center top no-repeat;background-size: 100% 100%;}
.page5 .plBox .pinglun2{width: 619rem;height: 505rem;background: url(../img/page5/plbg1.png) center top no-repeat;background-size: 100% 100%;}

.page5 .plBox .pinglun3{width: 619rem;height: 505rem;background: url(../img/page5/plbg1.png) center top no-repeat;background-size: 100% 100%;}
.page5 .plBox .pinglun4{width: 619rem;height: 505rem;background: url(../img/page5/plbg1.png) center top no-repeat;background-size: 100% 100%;}

.page5  .pl-message{position: absolute;left: 50%;transform: translate(-50%);width: 500rem;height: 450rem;top: 30rem;}
.page5  .pl-message .img{ height: 69rem; }
.page5  .pl-message .topicon{ width: 235rem; margin: 0 auto; }
.page5 .plBox .pinglun2 .topicon{width: 91rem;}
.page5 .plBox .pinglun3 .topicon{width: 266rem;}
.page5  .pl-message p{margin-top: 30rem;line-height: 30rem;color: #fde8ba;font-size: 24rem;text-transform: uppercase;text-align: left;text-indent: 40rem;font-family: dpr;}
.page5  .pl-message .pl-text{
  text-indent: 0;
}
.page5 .pl-message a{
  color: #ffd364;
  /* font-size: 20rem; */
}
 .swiper-pagination-bullet { background: url(../img/page5/dian1.png) no-repeat; background-size: 100% auto; width: 14rem; height: 14rem; opacity: 1; z-index: 60; margin: 0 10rem;}
 .swiper-pagination-bullet-active { width: 17rem; height: 16rem; background: url(../img/page5/dian2.png) no-repeat; background-size: 100% auto; }


.page5 .jlbox{ height: 235rem; width: 100%; margin: 100rem auto 0; position: relative; 
  background: url(../img/page5/rybg.png) center center no-repeat;
  background-size: 618rem auto;

}
.page5 .jlbox .jlSwiper{width: 550rem;height: 200rem;position: absolute;transform: translate(-50%,-50%);left: 50%;top: 50%;}



.page5 .jlbox .jlSwiper p{
    padding-left: 45rem;
    font-size: 16rem;
    background: url(../img/page5/jlicon.png) left 3rem no-repeat;
    background-size: 34rem auto;
    margin-top: 12rem;
    font-family: dpr;
}

.page5 .swiper-pagination{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.page5 .jlbox .page5_next::after,.page5 .jlbox .page5_prev::after{ content: ''; }
.page5 .jlbox .page5_next { top:50%; margin-top: -16rem; width: 35rem; height: 31rem; background: url(../img/page5/right.png) center center no-repeat; background-size: 100% auto; }
.page5 .jlbox .page5_prev { top:50%; margin-top: -16rem; width: 35rem; height: 31rem; background: url(../img/page5/left.png) center center no-repeat; background-size: 100% auto; }
.pl-arrow{
  display: inline-block;
  width:14rem ;
  height: 11rem;
  background: url(../img/page5/pl_arrow.png) center no-repeat;
  background-size: 14rem auto;
}

.page5 .personMessage {
  /* position: absolute; */
  /* top: 720rem; */
  width: 714rem;
  height: 370rem;
  /* left: 50%;
  transform: translate(-50%); */
  /* overflow: hidden; */
  margin: 0rem auto 0;
  position: relative;
  display: none;
}

.page5 .btn {
  position: absolute;
  /* top: -65rem; */
  /* right: 50rem; */
  font-size: 22rem;
  color: #fff;
  z-index: 20;
  height: 60rem;
  width: 323rem;
  background: url(../img/page5/rightbg.png) center center no-repeat;
  background-size: 100% auto;
  /* position: relative; */
  margin: 0 auto;
  bottom:-20rem;
  left: 50%;
  transform: translate(-50%);

}

.page5 .btn a {
  position: absolute;

  width: 35rem;
  height: 60rem;
  transform: rotate(90deg);
  /* left: -12rem; */
 
}

.page5 .btn a.prev {
  background: url(../img/page5/next.png) center center no-repeat;
  background-size: 100% auto;
  left: 0rem;
  /* bottom: 80rem; */

}

.page5 .btn a.next {
  background: url(../img/page5/prev.png) center center no-repeat;
  background-size: 100% auto;
  right: 00rem;
  /* top: 80rem; */

}

.page5 .messageBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.page5 .comtxt {
  position: absolute;
  z-index: 15;
  width: 714rem;
  height: 215rem;
  background: url(../img/page5/gerenbox1.png) center center no-repeat;
  background-size: 100% auto;
  transform: scale(.8);
  top: -13rem;
}

.page5 .comtxt {
  opacity: 0;
}


.page5 .prevBox .prev {
  transform: scale(.8);
  top:0rem;
  opacity: .7;
  animation: upmove 1s alternate forwards;
}
.page5 .prevBox .prev img {
  opacity: .7;
}
.page5 .prevBox .on {
  opacity: 1;
  z-index: 20;
  position: relative;
  top: 50%;
  transform: translate(0, -50%) scale(1);
  background: url(../img/page5/gerenbox.png) center center no-repeat;
  background-size: 100% auto;
  animation: showliuyan 1.2s alternate forwards;
}

.page5 .prevBox .next {
  transform: scale(.8);
  top: auto;
  bottom: 0rem;
  opacity: .7;
  animation: downmove 1s alternate forwards;
}
.page5 .prevBox .next img{
  opacity: .7;
}
.page5 .nextBox .prev {
  transform: scale(.8);
  top: 0rem;
  opacity: .7;
  animation: upmove2 1s alternate forwards;
}

.page5 .nextBox .on {
  opacity: 1;
  z-index: 20;
  position: relative;
  top: 50%;
  transform: translate(0, -50%) scale(1);
  background: url(../img/page5/gerenbox.png) center center no-repeat;
  background-size: 100% auto;
  animation: showliuyan2 1.2s alternate forwards;
}

.page5 .nextBox .next {
  transform: scale(.8);
  top: auto;
  bottom: 0rem;
  opacity: .7;
  animation: downmove2 1s alternate forwards;
}




.page5 .avatar {
  position: absolute;
  width: 211rem;
  top: -10rem;
  left: 0rem;
  height: 174rem;
  background: url(../img/page5/txbox.png) center center no-repeat;
  background-size: 100% auto;
}

.page5 .avatar .img {
  position: absolute;
  width: 169rem;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  opacity: 1;
}


.page5 .avatar .txbg {
  position: absolute;
  z-index: 20;
  width: 217rem;
  height: 38rem;
  background: url(../img/page5/txbg.png) center center no-repeat;
  background-size: 100% auto;
  left: 50%;
  bottom: -25rem;
  transform: translate(-50%, 0);
  font-family: nsb;
  font-size: 20rem;
  line-height: 37rem;
  text-align: center;
  color: #ffd364;
}

.page5 .txt {
  position: absolute;
  height: auto;
  width: 455rem;
  top: 50%;
  right: 40rem;
  transform: translate(0, -50%);
}

.page5 .txt p {
  font-size: 16rem;
  color: #f5d8ab;
}

.page5 .comtxt a {
  position: absolute;
  right: 120rem;
  bottom: 25rem;
  font-size: 24rem;
  color: #fff;
}
@keyframes downmove {
  0% {
    transform: translate(0, -50%) scale(1);
  }

  to {
    transform: translate(0, 0%) scale(.8);
  }
}


@keyframes upmove {
  0% {
    transform: translate(0, 40%) scale(1);
  }

  to {
    transform: translate(0, 0%) scale(.8);
  }
}

@keyframes showliuyan {
  0% {
    transform: translate(0, -90%) scale(.8);
  }

  to {

    transform: translate(0, -50%) scale(1);
  }
}

@keyframes downmove2 {
  0% {
    transform: translate(0, -50%) scale(1);
  }

  to {
    transform: translate(0, 0%) scale(.8);
  }
}


@keyframes upmove2 {
  0% {
    transform: translate(0, 40%) scale(1);
  }

  to {
    transform: translate(0, 0%) scale(.8);
  }
}

@keyframes showliuyan2 {
  0% {
  
    transform: translate(0, 0%) scale(.8);
  }

  to {

    transform: translate(0, -50%) scale(1);
  }
}
/* page6 */

.page6{ width: 100%; background: url(../img/page6/bg.jpg) center top no-repeat; background-size:cover; }

.page6 .content{ position: absolute; width: 100%; left: 50%; transform: translate(-50%); height:100%; }
.page6 .title{position: relative;margin: 160rem auto 0;text-align: center;color: #f8e6a0;font-size: 50rem;width: 262rem;height: 120rem;line-height: 140rem;background: url(../img/btbg.png) center bottom no-repeat;background-size: 178rem auto;}
.page6 .title i{position: absolute;right: -10rem;top: 25rem;width: 26rem;height: 25rem;background: url(../img/yinzhang.png) center center no-repeat;background-size: 26rem auto;}
.page6  .title em{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 17rem;
  color: #e4cc8d;
  bottom: 10rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  display: none;
}
.media-nav {
    width: 669rem;
    height: 80rem;
    display: flex;
    justify-content: center;
    margin-bottom: 12rem;
    background: url(../img/page6/new_nav_bg.png) center no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 80rem;
    margin: 20rem auto;
}

 .nav-item {
    display: flex;
    line-height: 80rem;
    height: 100%;
    text-align: center;
    font-size: 38rem;
    color: #666;
    cursor: pointer;
    position: relative;
    color: #ffeed5;
    justify-content: center;
    flex:1;
}
.nav-item.active {
    color: #ffdb9d;
    /* text-shadow: 0 0 2px #ffdb9d,0 0 0px #ffdb9d,0 0 0px #ffdb9d,0 0 0px #ffdb9d; */
}
.nav-item.active::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 3rem;
    background: url(../img/page6/new_nav_on.png) bottom no-repeat;
    background-size: auto 12rem;
}
.photo-list, .video-list {
    width: 671rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
    display:none;
    /* height: 100%; */
    /* overflow: scroll; */
    /* align-items: flex-end; */
}
.video-list{
  width: 580rem;
}
.list-content.active{
  display: flex;
}
 .video-wrapper {
    width:100%;
    height: 280rem;
    position: relative;
    overflow: hidden;
    /* border: solid 2rem #ffdb9d; */
    /* border-radius: 0.09rem; */
    box-sizing: border-box;
    margin-bottom:  5rem  ;
}
.video-wrapper::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
   
}
/* .video-wrapper:first-child{
    width: 100%;
    height: 377rem;
}
.video-wrapper:nth-child(2n+1){
    margin-right: 0;
} */

.photo-wrapper img, .video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    display: block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87rem;
    height: 85rem;
    background: url(../img/page6/play.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
    z-index: 11;
}
/*剧照  */
.flow-container{
    width: 100%;
    display: flex;
    justify-content: space-between;  
    align-items: flex-start; 
}
.work-box{
    width: 207rem;
    position: relative;
}
.photo-list {
    width: 665rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
    display: none;
}
.photo-wrapper {
    width:100%;
    height: auto;
    position: relative;
    border: solid 2rem #ffdb9d;
    box-sizing: border-box;
    margin-bottom: 12rem;
}

.photo-wrapper .popimg{
    display: block;
    width: 100%;
    height: 100%;
}
.magnifier-icon {
    position: absolute;
    right: 0.1rem;
    bottom: 0.1rem;
    width: 0.43rem;
    height: 0.44rem;
    background: url(../img/page6/magnifier_icon.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.page6 .list{
  width: 665rem;
  height: 900rem;
  margin: 30rem auto 0;
  /* overflow: scroll; */
  overflow-x: hidden;
  overflow-y: auto;
}
.page6 .list .com{
  width:450rem;
  height: 340rem;
  position: relative;
  margin: 0 auto 30rem;
}
.page6 .list i{
  position: absolute;
  z-index: 9;
  top: 40rem;
  width:450rem;
  height: 310rem;
  background: url(../img/page6/kbg.png) center center no-repeat;
  background-size: 100% auto;
}
.page6 .list  em{
  position: absolute;
  z-index: 15;
  width: 65rem;
  height: 63rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%,0);
  background: url(../img/page6/play.png) center center no-repeat;
  background-size: 100% auto;
}
.page6  .showimg{
  width: 440rem;
  height: 288rem;
  position: absolute;
  left: 50%;
  z-index: 10;
  top: 50rem;
  transform: translate(-50%);
  border-radius: 10rem;
}

.page6 .popimg{
  /* position: absolute; */
  /* z-index: 30; */
  /* left: 50%; */
  /* top: 50%; */
  /* transform: translate(-50%,-70%); */
  /* width: 59rem; */
  /* height: 59rem; */
  /* background: url(../img/page6/look.png) center center no-repeat; */
  /* background-size: 100% auto; */
}
.page6 .btn{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  text-transform: uppercase;
  color: #fef2b3;
  font-size: 22rem;
  width: 446rem;
  height: 180rem;
  line-height: 68rem;
  text-align: center;
  /* background: url(../img/page6/btbg.png) center center no-repeat; */
  background-size: 100% auto;
  text-shadow: 1rem 0rem 5rem #333;
}
.page6 .more{
  margin: 20rem auto 0;
    display: block;
  width: 388rem;
  height: 51rem;
  line-height: 51rem;
  text-align: center;
  font-size: 16rem;
  background: url(../img/page6/more.png) center center no-repeat;
  background-size: 100% auto;
  color: #ffeed5;
  display: none;
}



/* footer */

.bottom{
  width: 100%;
  height: auto !important;

}
.pagebottom{
  width: 100%;
  
  
  /* height:182rem; background: url(../img/bottom/bg.jpg) center top no-repeat; background-size: 100% auto; */
}
.footer_top{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112rem;
   background: url(../img/bottom/footer_t_bg.png) center top no-repeat; background-size: 100% 100%;
}
 .xiapia-yuyue{
  display: block;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position:center ;
  background-repeat: no-repeat;
  width: 231rem;
  height: 104rem;
  position: absolute;
  top: 200rem;
  right: 16rem;
  
}
.lang_en .xiapia-yuyue{

  background-image: url(../img/bottom/yuyue_en.png);
}
.lang_ja .xiapia-yuyue{
  
  background-image: url(../img/bottom/yuyue_ja.png);
}
.lang_ko .xiapia-yuyue{
 
  background-image: url(../img/bottom/yuyue_ko.png);
}
.lang_th .xiapia-yuyue{
 
  background-image: url(../img/bottom/yuyue_th.png);
}
.lang_zh-tw .xiapia-yuyue{
  
  background-image: url(../img/bottom/yuyue_zh-tw.png);
}
.follow_line{
  width:2rem ;
  height: 81rem;
  background: url(../img/bottom/follow_line.png) center center no-repeat;
  background-size: 2rem auto;
  margin: 0 8rem;
}
.pagebottom .iconbox{ line-height: 120rem; text-align: center;}

.pagebottom .iconbox span{ font-weight: bold;  font-size: 30rem; color: #ffe3a3;font-family: xq;    vertical-align: middle; }
.pagebottom .iconbox a{ display: inline-block; width: 30rem; height:50rem; vertical-align: middle; margin-left: 15rem;}

.pagebottom .iconbox .link1{background: url(../img/header/s-icon.png) center center no-repeat; background-size: 100% auto; }
.pagebottom .iconbox .link2{ background: url(../img/header/dy-icon.png) center center no-repeat; background-size: 100% auto;  }
.pagebottom .iconbox .link3{background: url(../img/header/in-icon.png) center center no-repeat; background-size: 100% auto; }
.pagebottom .iconbox .link4{ background: url(../img/header/x_icon.png) center center no-repeat; background-size: 100% auto;  }
.pagebottom .iconbox .link5{ background: url(../img/header/f_icon.png) center center no-repeat; background-size: 100% auto;  }
.pagebottom .iconbox .link6{ background: url(../img/header/y_icon.png) center center no-repeat; background-size: 100% auto;  }


.pagebottom .footerbg{
  height: 100%;
  width: 100%;

}




.pagebottom  .footer{  

  text-align: center;
  height: 71rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0  0 5rem  0;
  background: url(../img/bottom/footer_b_bg.png) center top no-repeat; background-size: 100% 100%;
  
}

.pagebottom  .footer img{     width: auto;
  vertical-align: super;
  height: 43rem;
  margin-left: 25rem;}
.pagebottom  .footer .zctxt{color: #d4c39a;display: inline-block;vertical-align: sub;margin-left: 50rem;text-align: left;font-size: 12rem;}
.pagebottom  .footer .zctxt a{  color: #d4c39a !important;  background: none !important;  font-size: 12rem !important;padding: 0 !important; }
.pagebottom  .footer span{
  position: relative;
}
.pagebottom  .footer span:hover{
  cursor: pointer;
  color: #ffdd40 !important;
}
.pagebottom  .footer span  a{
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 21rem !important;
  width: 100%;
  padding: 0 !important;
  position: absolute;
  left: 0;
  opacity: 0;
  text-indent: -9999rem;
}


.pagebottom  .footer .zctxt p{
  margin-top: 0rem;
  height: 12rem;
}
.pagebottom  .footer i{
  font-size: 12rem !important;
}
#onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-b-addl-desc{
font-size: 25rem !important;	
}
#onetrust-banner-sdk #onetrust-accept-btn-handler, #onetrust-banner-sdk #onetrust-reject-all-handler, #onetrust-banner-sdk #onetrust-pc-btn-handler{
	font-size: 27rem !important;	
  margin-top: 40rem;
}
	
#onetrust-banner-sdk.otRelFont {
 font-size: 0;
 padding-top: 50rem;
  padding-bottom: 60rem;
}



#onetrust-pc-sdk #ot-pc-desc, #onetrust-pc-sdk .ot-always-active{font-size: 24rem !important;}
#onetrust-pc-sdk #ot-category-title, #onetrust-pc-sdk #ot-pc-title{
  font-size: 27rem !important;
}
#onetrust-pc-sdk button{      font-size: 24rem !important;  margin-bottom: 20rem;}
#onetrust-pc-sdk .ot-cat-header{
font-size: 18rem !important;
}

#onetrust-banner-sdk #onetrust-policy-text a{
  outline: none !important;
  text-decoration: none !important;
}