html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 100%;
}
body
{
  overflow-x: hidden;
  background-color: #00044e;
}
.pa {position: absolute;}
.pr {position: relative;}
.pf {position: fixed;}
.hd {overflow: hidden; text-indent: -999em;font-size: 0;line-height: 0;}

h1{
  font-size:0.3rem;
  color: #2e6e80;
  position:fixed;
  left:1rem;
  right:1rem;
}
@font-face {
  font-family: "Poppins-Regular";
  src: url('../font/Poppins-Regular.ttf');
}
@font-face {
  font-family: "Poppins-SemiBold";
  src: url('../font/Poppins-SemiBold.ttf');
}
.wrap {
  z-index: 1000;
  width: 7.5rem;
  overflow-x: hidden;
}
.bg1 {width:7.50rem;height:14.03rem;background: url(../images/bg1.jpg) no-repeat 50% 50%/100% 100%;}
.bg2 {width:7.50rem;height:15.21rem;background: url(../images/bg2.jpg) no-repeat 50% 50%/100% 100%;margin-top: -0.01rem;overflow: hidden;}
.bg3 {width:7.50rem;height:16.51rem;background: url(../images/bg3.jpg) no-repeat 50% 50%/100% 100%;margin-top: -0.01rem;}
.bg4 {width:7.50rem;height:16.94rem;background: url(../images/bg4.jpg) no-repeat 50% 50%/100% 100%;margin-top: -0.01rem;}
.bg5 {width:7.50rem;height:12.25rem;background: url(../images/bg5.jpg) no-repeat 50% 50%/100% 100%;margin-top: -0.01rem;}

.copyright {width:7.5rem;height:4.68rem;background-color: #00044e; text-align: center;}

.logo {width:1.90rem;height:0.59rem;background: url(../images/logo.png) no-repeat 50% 50%/100% 100%;left:0.43rem;top:0.5rem;z-index:9999;}

.music {
  background-image: url(../images/music.png);
  background-repeat: no-repeat;
  background-position:0 0;
  background-size: 1.48rem 0.74rem;
  width:0.74rem;
  height:0.74rem;
  position: fixed;
  top: 0.45rem;
  right: 0.4rem;
  animation: bgm 4s linear infinite both;
  -webkit-animation: bgm 4s linear infinite both;
  z-index: 9999;
  cursor: pointer;
  pointer-events: auto;
}

.pause {
  animation-play-state:paused;
  background-position:right 0;
}

@keyframes bgm {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes bgm {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
#music {opacity: 0;}

.ste {width:2.66rem;height:0.23rem;background: url(../images/ste.png) no-repeat 50% 50%/2.120rem 0.17rem;left:50%;bottom:0.2rem;margin-left:-1.33rem;z-index: 9999;}
.ste::after {content:"";width:2.66rem;height:0.23rem;background-image: url(../images/arrow.png);background-repeat:no-repeat;background-position:0 0;background-size:2.66rem 0.46rem;position: absolute;left:0;bottom:-0.01rem;-webkit-animation:fadeIn 1s 0s ease infinite;animation:fadeIn 1s 0s ease infinite;}
.ste::before {content:"";width:2.66rem;height:0.23rem;background-image: url(../images/arrow.png);background-repeat:no-repeat;background-position:0 bottom;background-size:2.66rem 0.46rem;position: absolute;left:0;bottom:-0.01rem;-webkit-animation:fadeIn 1s 0.5s ease infinite;animation:fadeIn 1s 0.5s ease infinite;}
@-webkit-keyframes fadeIn{
  0%{opacity:0;-webkit-transform:translateY(0)}
  100%{opacity:1;-webkit-transform:translateY(-0.05rem)}
}
@keyframes fadeIn{
  0%{opacity:0;transform:translateY(0)}
  100%{opacity:1;transform:translateY(-0.05rem)}
}

.pal {width:2.38rem;height:2.17rem;background: url(../images/pal.png) no-repeat 50% 50%/100% 100%;left: 3.81rem;top: 5.26rem;z-index:999;-webkit-animation:pulse 1s .8s ease both;-moz-animation:pulse 1s .8s ease both;}
  @-webkit-keyframes pulse{
  0%{-webkit-transform:scale(1)}
  50%{-webkit-transform:scale(1.4)}
  100%{-webkit-transform:scale(1)}
  }
  @-moz-keyframes pulse{
  0%{-moz-transform:scale(1)}
  50%{-moz-transform:scale(1.4)}
  100%{-moz-transform:scale(1)}
  }

.join {width:4.46rem;height:2.95rem;right:0.25rem;bottom:0.4rem;z-index: 9999;}
.join i {width:4.46rem;height:1.99rem;background: url(../images/join.png) no-repeat 50% 50%/100% 100%;display: block;}
.join img {width: 100%;height:100%;}
.twitter_ico {width:0.97rem;height:0.97rem;background: url(../images/twitter_ico.png) no-repeat 50% 50%/100% 100%;right:0rem;bottom:0rem;}
.xterio_ico {width:0.97rem;height:0.97rem;background: url(../images/xterio_ico.png) no-repeat 50% 50%/100% 100%;right:1rem;bottom:0rem;}

.hoverStyle {
  transition: all 0.2s linear;
}

.hoverStyle:hover {
  transform: scale(1.09);
  -webkit-transform: scale(1.09);
}

.role1 {width:2.37rem;height:4.47rem;background: url(../images/role1.png) no-repeat 50% 50%/100% 100%;left:-0.15rem;bottom: 0.18rem;-webkit-animation:fadeInLeft 2s 1.5s ease both; animation:fadeInLeft 2s 1.5s ease both;}
.role2 {width:2.84rem;height:2.04rem;background: url(../images/role2.png) no-repeat 50% 50%/100% 100%;left:0;top:2.65rem;display: none;-webkit-animation:fadeInLeft 2s 1.5s ease both; animation:fadeInLeft 2s 1.5s ease both;}
.land {width:32.82rem;height:10.09rem;background: url(../images/land.png) no-repeat 50% 50%/100% 100%;top: 3.1rem;}
.l0 {left:-0.34rem;transition: all 0.5s linear;}
.l1 {left: -8rem;transition: all 0.5s linear;}
.l2 {left:-18rem;transition: all 0.5s linear;}
.l3 {left:-28rem;transition: all 0.5s linear;}
.land_txt {width:6.17rem;height:3.40rem;background: url(../images/land_txt.png) no-repeat 50% 50%/100% 100%;left:0.66rem;top:11rem;}
.land_swp {color: #eb4f90;font-size: 0.20rem;width: 4.96rem;height:2.6rem;left:0.59rem;top:0.65rem;line-height: 0.30rem;font-family: "Poppins-Regular";z-index:999;overflow: hidden;}
.land_swp .swiper-slide {margin-top: -6rem;padding-top: 6rem;}
.land i {width:1.22rem;height:1.22rem;background: url(../images/point.png) no-repeat 50% 50%/100% 100%;}
.hover1 {left: 3.56rem;
  top: 2.5rem;}
.hover2 {left: 11.2rem;
  top: 4.5rem;}
.hover3 {left: 21.1rem;
  top: 5.2rem;}
.hover4 {right: 0.3rem;
  top: 4.5rem;}
.l0 .hover1,.l1 .hover2,.l2 .hover3,.l3 .hover4 {transform: scale(1.2);
  -webkit-transform: scale(1.2);transition: all 1s linear;}
.swiper-pagination_land { text-align: center;left:0;bottom:0.2rem;position: absolute;}
.swiper-pagination_land .swiper-pagination-bullet {width: 0.13rem;height: 0.13rem;border-radius: 50%;background-color: #e38fad;opacity: 1;}
.swiper-pagination_land .swiper-pagination-bullet-active {width: 0.6rem;height: 0.13rem;border-radius: 0.07rem; background-color: #eb4f90;}
.prevBtn,.nextBtn {width: 0.5rem;height: 0.7rem;top:1.5rem;}
.prevBtn {left:-0.55rem;}
.nextBtn {right:-0.55rem;}


.movie_bg {width:6.99rem;height:4.06rem;background: url(../images/movie_bg.png) no-repeat 50% 50%/100% 100%;left:0.25rem;top:3.7rem;}
.movieImg {width:6.64rem;height:3.75rem;background:#000 url(../images/movieImg.jpg) no-repeat 0 0/6.64rem 3.75rem;border-radius:0.2rem;left: 0.158rem;top: 0.144rem;z-index:99;}
.movieImg span {width:100%; position: absolute;left:0;bottom:0.9rem;color: #fff;font-size: 0.18rem;font-family: "Poppins-Regular"; text-align: center;}
.pv_sit {width:6.64rem;height:3.75rem;left: 0.158rem;top: 0.144rem;display:none;z-index:100;border-radius:0.2rem;overflow: hidden;}
.pv_sit video {width: 100%;height: 100%;object-fit: cover;}
.playBtn {width:1.50rem;height:1.50rem;background: url(../images/playBtn.png) no-repeat 50% 50%/100% 100%;left: 2.56rem;top: 1rem;}



.movie_txt {width:6.18rem;height:3.82rem;background: url(../images/movie_txt.png) no-repeat 50% 50%/100% 100%;left:0.16rem;top:7.75rem; padding-left: 0.5rem;padding-right: 0.5rem;color: #eb4f90;padding-top:1.77rem;}
.movie_txt span {font-size: 0.4rem;display: block;font-family: "Poppins-SemiBold";line-height: 0.42rem;}
.movie_txt p {font-size: 0.20rem;display: block; line-height: 0.26rem;margin-bottom: 0.25rem;margin-top: 0;font-family: "Poppins-Regular";}
.movie_txt p i {font-size: 0.28rem;font-style: normal;font-weight: bold;}

.swp1 {
  width:6.97rem;height:4.56rem;background: url(../images/swp1_bg.png) no-repeat 50% 50%/100% 100%;
  left: 0.27rem;
  top: 2.3rem;
  z-index: 100;
}
.mySwiper1 {
  width:6.65rem;
  height:3.75rem;
  left: 0.145rem;
  top: 0.155rem;
}
.mySwiper1 .swiper-wrapper {
  width:6.65rem;
  height:3.75rem;
}
.mySwiper1 .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  overflow: hidden;
}

.mySwiper1 .swiper-slide img {
  display: block;
  width:6.65rem;
  height:3.75rem;
  object-fit: cover;
}
.mySwiper1 .swiper-pagination-bullet {width: 0.13rem;height: 0.13rem;border-radius: 50%;background-color: #f8b199;opacity: 1;}
.mySwiper1 .swiper-pagination-bullet-active {width: 0.6rem;height: 0.13rem;border-radius: 0.07rem; background-color: #f38c6b;}
.mySwiper1 .swiper-pagination1 {width: 100%;left:0;bottom:-0.32rem; text-align: center;height: 0.13rem;line-height:0;font-size: 0;position:absolute;}


.swp2 {
  width:6.98rem;height:6.84rem;background: url(../images/swp2_bg.png) no-repeat 50% 50%/100% 100%;
  left:0.26rem;
  top: 6.96rem;
  z-index: 100;
}
.swp2 h2 {
  font-size: 0.44rem;
  display: block;
  padding:0.2rem;
  margin: 0;
  color: #f38c6b;
  text-align: center;
}
.mySwiper2 {
  width: 6.6rem;
  height:5.62rem;
  left:0.22rem;
  top:0.96rem;
  border-radius: 0.25rem;
  overflow: hidden;
}
.mySwiper2 .swiper-slide {width:3.18rem;height:5.12rem;position: relative;border-radius: 0.25rem;background-color: #fff;padding-top: 0.11rem;font-family: "Poppins-Regular";}
.mySwiper2 .swiper-slide i {display: block;text-align: center;border-radius: 0.15rem;overflow: hidden;width:3.05rem;height:4.21rem;margin: 0 auto 0.1rem;}
.mySwiper2 .swiper-slide img {width:2.96rem;height:4.08rem;object-fit: cover;border-radius: 0.2rem;}
.mySwiper2 .swiper-pagination-bullet {width: 0.13rem;height: 0.13rem;border-radius: 50%;background-color: #f8b199;opacity: 1;}
.mySwiper2 .swiper-pagination-bullet-active {width: 0.6rem;height: 0.13rem;border-radius: 0.07rem; background-color: #f38c6b;}
.mySwiper2 .swiper-pagination2 {width: 100%;left:0;bottom:0rem; text-align: center;height: 0.13rem;line-height:0;font-size: 0;position:absolute;z-index:101;}
.sName {font-size:0.2rem;color:#000;display: block;padding-left:0.29rem;display: none;}
/* .sAuthor {font-size: 0.14rem;color:#f38c6b;display: block;padding-left:0.29rem;} */
.sAuthor {font-size:0.2rem;color:#000;display: block;padding-left:0.29rem;display: block;}
.role3 {width:2.25rem;height:2.55rem;background: url(../images/role3.png) no-repeat 50% 50%/100% 100%;right: 0rem;top: 13.6rem;display: none;-webkit-animation:fadeInRight 2s 1.5s ease both; animation:fadeInRight 2s 1.5s ease both;}

.ffBar {z-index: 9999;width: 7.5rem;height:4.2rem;position: absolute;left:0;top:2rem;}
.ffBar i {width: 1.22rem;height: 1.22rem;background-image: url(../images/point2.png);background-repeat:no-repeat;background-size:3.5rem 1.22rem;background-position: right 0;display: block;position: absolute;transform: scale(0.8);-webkit-transform: scale(0.8);}
.ffBar i.cur {transform: scale(1);-webkit-transform: scale(1);}
.ffBar i.cur::after {content: "";width: 1.22rem;height: 1.22rem;position: absolute;left:0;top:0;background-position:0 0;display:block;background-image: url(../images/point2.png);background-repeat:no-repeat;background-size:3.5rem 1.22rem;}
.pnt_five1 {left:1.3rem;top:0.5rem;animation:pulse 1s .2s ease both;-webkit-animation:pulse 1s .2s ease both;}
.pnt_five2 {left: 2.3rem;top: 0.9rem;animation:pulse 1s 1s ease both;-webkit-animation:pulse 1s 1s ease both;}
.pnt_five3 {left: 3.1rem;top: 1.55rem;animation:pulse 1s 1.8s ease both;-webkit-animation:pulse 1s 1.8s ease both;}
.pnt_five4 {left: 4.65rem;top: 0.7rem;;animation:pulse 1s 2.6s ease both;-webkit-animation:pulse 1s 2.6s ease both;}
.pnt_five5 {left: 5.8rem;top: 0.15rem;animation:pulse 1s 3.4s ease both;-webkit-animation:pulse 1s 3.4s ease both;}


.line_txt {width:6.68rem;height:3.68rem;background: url(../images/line_txt.png) no-repeat 50% 50%/100% 100%;left:0.41rem;top:8.2rem;}
.line_swp {color: #1a63da;font-size: 0.20rem;width:5.7rem;height:3.2rem;left:0.49rem;top:0.45rem;line-height: 0.30rem;font-family: "Poppins-Regular";z-index:999;overflow:hidden;}
.line_swp .swiper-slide span {font-size: 0.32rem;line-height: 0.34rem;margin-bottom: 0.1rem;display:block;font-weight: bold;}
.line_swp .swiper-slide p {font-size: 0.22rem;line-height: 0.24rem;padding: 0;margin: 0;display: block;}

.swiper-pagination_line { text-align: center;left:0;bottom:0.15rem;position: absolute;}
.swiper-pagination_line .swiper-pagination-bullet {width: 0.13rem;height: 0.13rem;border-radius: 50%;background-color: #4374d6;opacity: 1;}
.swiper-pagination_line .swiper-pagination-bullet-active {width: 0.6rem;height: 0.13rem;border-radius: 0.07rem; background-color: #004eca;}


h2.logo2 {width:2.68rem;height:1.89rem;background: url(../images/logo2.png) no-repeat 50% 50%/100% 0.79rem;padding:0;margin:0 auto;}

.backBtn {width:0.78rem;height:0.78rem;background: url(../images/top.png) no-repeat 50% 50%/100% 100%;right:0.16rem;bottom:0.65rem;}

/* a.logo3 {width:1.90rem;height:0.38rem;background: url(../images/logo3.png) no-repeat 50% 50%/100% 100%;padding:0;margin:0 auto;display: block;} */
a.logo3 {width:1.90rem;height:0.38rem;background: url(../images/logo3.png) no-repeat 50% 50%/100% 100%;padding:0;margin:20px auto 0 auto;display: block;}




.ply {width:80%;line-height:0.32rem;font-size:0.24rem;margin: 0 auto;padding-top:0.4rem;}
.ply a {color: #565a93; text-decoration: none;display: block; text-align: center;}
.ply a:hover {color: #9999cc;}
.ply p {color: #565a93; text-decoration: none;display: block; text-align: center;}


.role4_1 {width:2.90rem;height:2.75rem;background: url(../images/role4_1.png) no-repeat 50% 50%/100% 100%;left: 17.68rem;top: 0.8rem;z-index:300;-webkit-animation:fadeInLeft 2s 1.5s ease both; animation:fadeInLeft 2s 1.5s ease both;display: none;}
.role4_2 {width:2.36rem;height:2.68rem;background: url(../images/role4_2.png) no-repeat 50% 50%/100% 100%;left: 29.85rem; top: 7.5rem;z-index:300;-webkit-animation:fadeInLeft 2s 1.5s ease both; animation:fadeInLeft 2s 1.5s ease both;display: none;}
@-webkit-keyframes fadeInLeft{
0%{opacity:0;-webkit-transform:translateX(-1rem)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
0%{opacity:0;transform:translateX(-1rem)}
100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(1rem)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
0%{opacity:0;transform:translateX(1rem)}
100%{opacity:1;transform:translateX(0)}
}