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

.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  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;
}

.code-area img{
  width:100%;
}

.page1{
  background:url('../img/bg1.jpg?v=1') center center no-repeat;
  background-size:auto;
  object-fit:cover;
}

.video-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background-size:cover;
  object-fit:cover;
}

.video-bg .img-wh{
  background-size:cover;
  object-fit:cover; 
}

.page1 .download-area{
  position:absolute;
  bottom:40px;left:60px;
  width:30%;height:auto;
}

.page1 .download-area .download{
  position:absolute;
  bottom:0;left:0;
  padding-top:45.7%;
  width:100%;height:0;
  background:url('../img/download.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page1 .download-area .download .code-area{
  position:absolute;
  top:15%;left:15%;
  width:32%;height:70%;
}

.page1 .download-area .download .btn{
  position:absolute;
  right:5%;
  width:41%;height:39%;
}
.page1 .download-area .download .btn1{
  top:8%;
}
.page1 .download-area .download .btn2{
  top:52%;
}

.page1 .icon-area{
  position:absolute;
  top:30px;right:45px;
  width:35%;height:auto;
}
.page1 .icon-area .icon{
  position:absolute;
  top:0;right:0;
  width:100%;height:0;
}
.page1 .icon-area .icon .btn{
  position:relative;
  float:right;
  margin-right:4%;
  padding-top:12%;
  width:12%;height:0;
  cursor:pointer;
}
.page1 .icon-area .icon .btn1{
  background:url('../img/icon1.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn1.active{
  background:url('../img/icon2.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn2{
  background:url('../img/icon3.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn3{
  background:url('../img/icon4.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn4{
  background:url('../img/icon5.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn5{
  background:url('../img/icon6.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn6{
  background:url('../img/icon7.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page1 .icon-area .icon .btn2 .wx-code{
  position:absolute;
  bottom:-255%;left:-75%;
  width:213%;height:240%;
  background:url('../img/wx-code.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page1 .icon-area .icon .btn5 .dy-code{
  position:absolute;
  bottom:-255%;left:-75%;
  width:213%;height:240%;
  background:url('../img/dy-code.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page1 .icon-area .icon .btn6 .kf-code{
  position:absolute;
  bottom:-210%;left:-340%;
  width:513%;height:195%;
  background:url('../img/kf-code.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page1 .icon-area .icon .btn6 .kf-code .link{
  position:absolute;
  bottom:20%;left:28%;
  width:40%;height:20%;
}

.nav-area{
  position:fixed;
  top:34%;left:85%;
  width:14%;height:auto;
  z-index:99;
}
.nav-area .close{
  position:absolute;
  top:0;right:0;
  padding-top:11%;
  width:11%;height:0;
  background:url('../img/nav-close.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  z-index:1;
}
.nav-area .nav{
  position:absolute;
  top:0;left:0;
  padding-top:66.4%;
  width:100%;height:0;
  background:url('../img/nav.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  animation:moveUpDown 0.8s ease infinite;
  -webkit-animation:moveUpDown 1s ease infinite;
}
@keyframes moveUpDown{
  0%{top:0px;}
  25%{top:-5px;}
  50%{top:0;}
  75%{top:5px;}
  100%{top:0px;}
}
@-webkit-keyframes moveUpDown{
  0%{top:0px;}
  25%{top:-5px;}
  50%{top:0;}
  75%{top:5px;}
  100%{top:0px;}
}

.page2{
  background:url('../img/bg2.jpg?v=1') top center no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page2 .world-text{
  position:absolute;
  top:100px;left:100px;
  width:23%;height:auto;
}

.page2 .world-text .icon{
  position:absolute;
  top:0;left:0;
  padding-top:99%;
  width:100%;height:0;
  background:url('../img/world-text.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.home-btn{
  position:absolute;
  top:25px;right:40px;
  width:5%;height:5%;
  background:url('../img/home-icon.png?v=1') center center no-repeat;
  background-size:contain;
  object-fit:contain;
  z-index:5;
}

.page-arrow{
  position:absolute;
  bottom:25px;left:50%;
  margin-left:-27px;
  /* width:55px;height:54px; */
  width:5%;height:5%;
  background:url('../img/arrow.png?v=1') center center no-repeat;
  background-size:contain;
  object-fit:contain;
  animation:arrowMoveUpDown 0.8s ease infinite;
  -webkit-animation:arrowMoveUpDown 1s ease infinite;
  z-index:5;
}
@keyframes arrowMoveUpDown{
  0%{bottom:40px;}
  25%{bottom:35px;}
  50%{bottom:40px;}
  75%{bottom:45px;}
  100%{bottom:40px;}
}
@-webkit-keyframes arrowMoveUpDown{
  0%{bottom:40px;}
  25%{bottom:35px;}
  50%{bottom:40px;}
  75%{bottom:45px;}
  100%{bottom:40px;}
}

.page3{
  background:url('../img/bg3.jpg?v=1') top center no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page3 .info-area{
  position:relative;
  width:100%;height:100%;
}

.page3 .info-area .style-area{
  position:absolute;
  top:0;left:0;
  padding-top:0%;
  width:100%;height:100%;
}
.page3 .info-area .style-area .style-tab{
  position:absolute;
  top:15%;right:3%;
  width:16%;height:63%;
  z-index:2;
}
.page3 .info-area .style-area .style-tab .style{
  float:left;
  width:40%;height:0;
  padding-top:40%;
  cursor:pointer;
}
.page3 .info-area .style-area .style-tab .style-gold{
  background:url('../img/gold/icon.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-tab .style-gold.active{
  background:url('../img/gold/icon-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-tab .style-wind{
  margin-left:25%;
  background:url('../img/wind/icon.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-tab .style-wind.active{
  background:url('../img/wind/icon-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-tab .style-water{
  margin-left:49%;
  background:url('../img/water/icon.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-tab .style-water.active{
  background:url('../img/water/icon-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-tab .style-fire{
  margin-left:25%;
  background:url('../img/fire/icon.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-tab .style-fire.active{
  background:url('../img/fire/icon-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-tab .style-thunder{
  background:url('../img/thunder/icon.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-tab .style-thunder.active{
  background:url('../img/thunder/icon-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-ul{
  display:none;
  position:absolute;
  top:25%;right:18%;
  width:10%;height:45%;
  z-index:2;
}
.page3 .info-area .style-area .style-ul.active{
  display:block;
}
.page3 .info-area .style-area .style-ul ul{
  width:100%;height:100%;
}
.page3 .info-area .style-area .style-ul li{
  position:relative;
  float:left;
  width:60%;
  height:0;
  padding-top:60%;
  cursor:pointer;
}
.page3 .info-area .style-area .style-ul li:nth-child(2),
.page3 .info-area .style-area .style-ul li:nth-child(3){
  margin-left:49%;
}
.page3 .info-area .style-area .style-ul li .img-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:url('../img/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul li.active .img-bg{
  -webkit-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}
@keyframes spin{
  from {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to {
   -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-webkit-keyframes spin{
  from {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to {
   -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
.page3 .info-area .style-area .style-ul1 li.active .img-bg{
  background:url('../img/gold/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul2 li.active .img-bg{
  background:url('../img/wind/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul3 li.active .img-bg{
  background:url('../img/water/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul4 li.active .img-bg{
  background:url('../img/fire/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul5 li.active .img-bg{
  background:url('../img/thunder/img-ibox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .style-ul li .img-wh{
  position:absolute;
  top:0;left:0;
  margin:25% 0 0 25%;
  width:50%;height:50%;
  border-radius:100%;
  overflow:hidden;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul li.active .img-wh{
  position:absolute;
  top:0;left:0;
  margin:18% 0 0 20%;
  width:60%;height:60%;
  border-radius:100%;
  overflow:hidden;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .style-ul li .icon{
  position:absolute;
  top:0;left:0;
  margin:68% 25% 32%;
  width:50%;height:20%;
  background:url('../img/ssr-icon.png?v=1') center center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info{
  display:none;
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
}
.page3 .info-area .style-area .info.active{
  display:block;
}
.page3 .info-area .style-area .info .gold-info,
.page3 .info-area .style-area .info .wind-info,
.page3 .info-area .style-area .info .water-info,
.page3 .info-area .style-area .info .fire-info,
.page3 .info-area .style-area .info .thunder-info{
  display:none;
  position:relative;
  width:100%;height:100%;
}
.page3 .info-area .style-area .info .gold-info.active,
.page3 .info-area .style-area .info .wind-info.active,
.page3 .info-area .style-area .info .water-info.active,
.page3 .info-area .style-area .info .fire-info.active,
.page3 .info-area .style-area .info .thunder-info.active{
  display:block;
  -webkit-animation:slideInFromRight 0.5s ease-out forwards;
  animation:slideInFromRight 0.5s ease-out forwards;
}
@keyframes slideInFromRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideInFromRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
.page3 .info-area .style-area .info .gold-info .role,
.page3 .info-area .style-area .info .wind-info .role,
.page3 .info-area .style-area .info .water-info .role,
.page3 .info-area .style-area .info .fire-info .role,
.page3 .info-area .style-area .info .thunder-info .role{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
}
.page3 .info-area .style-area .info .gold-info1 .role{
  background:url('../img/gold/role1.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info2 .role{
  background:url('../img/gold/role2.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info3 .role{
  background:url('../img/gold/role3.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info4 .role{
  background:url('../img/gold/role4.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .wind-info1 .role{
  background:url('../img/wind/role1.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info2 .role{
  background:url('../img/wind/role2.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info3 .role{
  background:url('../img/wind/role3.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info4 .role{
  background:url('../img/wind/role4.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .water-info1 .role{
  background:url('../img/water/role1.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info2 .role{
  background:url('../img/water/role2.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info3 .role{
  background:url('../img/water/role3.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info4 .role{
  background:url('../img/water/role4.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .fire-info1 .role{
  background:url('../img/fire/role1.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info2 .role{
  background:url('../img/fire/role2.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info3 .role{
  background:url('../img/fire/role3.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info4 .role{
  background:url('../img/fire/role4.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .thunder-info1 .role{
  background:url('../img/thunder/role1.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info2 .role{
  background:url('../img/thunder/role2.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info3 .role{
  background:url('../img/thunder/role3.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info4 .role{
  background:url('../img/thunder/role4.png?v=1') top center no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .gold-info .role-info,
.page3 .info-area .style-area .info .wind-info .role-info,
.page3 .info-area .style-area .info .water-info .role-info,
.page3 .info-area .style-area .info .fire-info .role-info,
.page3 .info-area .style-area .info .thunder-info .role-info{
  position:absolute;
  top:10%;left:5%;
  width:13%;height:43%;
}
.page3 .info-area .style-area .info .gold-info1 .role-info{
  background:url('../img/gold/text1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info2 .role-info{
  background:url('../img/gold/text2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info3 .role-info{
  background:url('../img/gold/text3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info4 .role-info{
  background:url('../img/gold/text4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .wind-info1 .role-info{
  background:url('../img/wind/text1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info2 .role-info{
  background:url('../img/wind/text2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info3 .role-info{
  background:url('../img/wind/text3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info4 .role-info{
  background:url('../img/wind/text4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .water-info1 .role-info{
  background:url('../img/water/text1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info2 .role-info{
  background:url('../img/water/text2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info3 .role-info{
  background:url('../img/water/text3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info4 .role-info{
  background:url('../img/water/text4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .fire-info1 .role-info{
  background:url('../img/fire/text1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info2 .role-info{
  background:url('../img/fire/text2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info3 .role-info{
  background:url('../img/fire/text3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info4 .role-info{
  background:url('../img/fire/text4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .thunder-info1 .role-info{
  background:url('../img/thunder/text1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info2 .role-info{
  background:url('../img/thunder/text2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info3 .role-info{
  background:url('../img/thunder/text3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info4 .role-info{
  background:url('../img/thunder/text4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .gold-info .role-card,
.page3 .info-area .style-area .info .wind-info .role-card,
.page3 .info-area .style-area .info .water-info .role-card,
.page3 .info-area .style-area .info .fire-info .role-card,
.page3 .info-area .style-area .info .thunder-info .role-card{
  position:absolute;
  bottom:10%;left:5%;
  width:10%;height:25%;
  -webkit-transform-origin:22% 0;
  transform-origin:22% 0;
  -webkit-animation:cardSpin 3s linear infinite;
  animation:cardSpin 3s linear infinite;
}
@keyframes cardSpin{
  0% {
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
  25% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
  }
  75% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
   -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
}
@-webkit-keyframes cardSpin{
  0% {
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
  25% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  50% {
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
  }
  75% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
   -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
}
.page3 .info-area .style-area .info .gold-info1 .role-card{
  background:url('../img/gold/card1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info2 .role-card{
  background:url('../img/gold/card2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info3 .role-card{
  background:url('../img/gold/card3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .gold-info4 .role-card{
  background:url('../img/gold/card4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .wind-info1 .role-card{
  background:url('../img/wind/card1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info2 .role-card{
  background:url('../img/wind/card2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info3 .role-card{
  background:url('../img/wind/card3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .wind-info4 .role-card{
  background:url('../img/wind/card4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .water-info1 .role-card{
  background:url('../img/water/card1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info2 .role-card{
  background:url('../img/water/card2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info3 .role-card{
  background:url('../img/water/card3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .water-info4 .role-card{
  background:url('../img/water/card4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .fire-info1 .role-card{
  background:url('../img/fire/card1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info2 .role-card{
  background:url('../img/fire/card2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info3 .role-card{
  background:url('../img/fire/card3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .fire-info4 .role-card{
  background:url('../img/fire/card4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page3 .info-area .style-area .info .thunder-info1 .role-card{
  background:url('../img/thunder/card1.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info2 .role-card{
  background:url('../img/thunder/card2.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info3 .role-card{
  background:url('../img/thunder/card3.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page3 .info-area .style-area .info .thunder-info4 .role-card{
  background:url('../img/thunder/card4.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page4{
  background:url('../img/bg4.jpg?v=1') top center no-repeat;
  background-size:cover;
  object-fit:cover;
}

.page4 .leftBox{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
}
.page4 .leftBox ul{
  position:relative;
  width:100%;
}
.page4 .leftBox li{
  display:block;
  width:100%;height:100%;
  overflow:hidden;
}

.page4 .leftBox .li1{
  background:url('../img/left-gif1.png?v=1') no-repeat;
  background-size:100% 1600%;
  -webkit-animation:gifMove1 1.8s steps(15) infinite;
  animation:gifMove1 1.8s steps(15) infinite;
}
.page4 .leftBox .li2{
  background:url('../img/left-gif2.png?v=1') no-repeat;
  background-size:100% 1600%;
  -webkit-animation:gifMove1 1.8s steps(15) infinite;
  animation:gifMove1 1.8s steps(15) infinite;
}

.page4 .leftBox .li3{
  background:url('../img/left-gif3.png?v=1') no-repeat;
  background-size:100% 1600%;
  -webkit-animation:gifMove1 1.8s steps(15) infinite;
  animation:gifMove1 1.8s steps(15) infinite;
}

.page4 .leftBox .li4{
  background:url('../img/left-gif4.png?v=1') no-repeat;
  background-size:100% 1600%;
  -webkit-animation:gifMove1 1.8s steps(15) infinite;
  animation:gifMove1 1.8s steps(15) infinite;
}

.page4 .leftBox .li5{
  background:url('../img/left-gif5.png?v=1') no-repeat;
  background-size:100% 1600%;
  -webkit-animation:gifMove1 1.8s steps(15) infinite;
  animation:gifMove1 1.8s steps(15) infinite;
}

@keyframes gifMove1{
  from{
    background-position:0 0;
  }
  to{
    background-position:0 100%;
  }
}
@-webkit-keyframes gifMove1{
  from{
    background-position:0 0;
  }
  to{
    background-position:0 100%;
  }
}

.page4 .playGame-area{
  position:absolute;
  top:25%;right:3%;
  width:60%;height:0;
  padding-top:30%;
  z-index:2;
}
.page4 .playGame-area .game-area{
  position:absolute;
  top:4%;left:17%;
  width:65%;height:77%;
  overflow:hidden;
}
.page4 .playGame-area .game-area ul{
  position:relative;
  width:500%;height:100%;
}
.page4 .playGame-area .game-area ul li{
  float:left;
  width:20%;height:100%;
  overflow:hidden;
}

.page4 .playGame-area .game-area ul li .img-wh{
  -webkit-transform:scale(1.4, 1.4);
  transform:scale(1.4, 1.4);
}

.page4 .playGame-area .game-box{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:url('../img/gameBox.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page4 .playGame-area .game-box .prev{
  position:absolute;
  top:45%;left:3%;
  width:8%;height:16%;
  overflow:hidden;
}
.page4 .playGame-area .game-box .prev .img-wh{
  -webkit-transform:scale(1.6, 1.6);
  transform:scale(1.6, 1.6);
}
.page4 .playGame-area .game-box .next{
  position:absolute;
  top:45%;right:3%;
  width:8%;height:16%;
  overflow:hidden;
}
.page4 .playGame-area .game-box .next .img-wh{
  -webkit-transform:scale(1.6, 1.6);
  transform:scale(1.6, 1.6);
}

.page4 .playGame-area .game-box .pageArea{
  position:absolute;
  bottom:3%;left:38%;
  width:24%;height:8%;
}
.page4 .playGame-area .game-box .pageArea .swiper-pagination-bullet{
  float:left;
  margin-right:1%;
  width:19%;height:100%;
  background:url('../img/game-page.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
  opacity:1;
  border-radius:0;
}
.page4 .playGame-area .game-box .pageArea .swiper-pagination-bullet-active{
  background:url('../img/game-page-active.png?v=1') no-repeat;
  background-size:contain;
  object-fit:contain;
}

.page5{
  height:180px !important;  
  background:#181819 url('../img/footer.jpg?v=1') top center no-repeat;
  background-size:auto;
  object-fit:cover;
}

.page5 .link{
  position:absolute;
  top:104px;left:50%;
  margin-left:343px;
  width:175px;
  font-size:14px;
  color:#629afe;
  text-decoration:underline;
}

.page5 .age-btn{
  position:absolute;
  top:34px;left:50%;
  margin-left:613px;
  width:86px;height:111px;
  font-size:14px;
  color:#629afe;
  text-decoration:underline;
}

.mask{
  z-index:100;
}

.age-tc{
  position:fixed;
  top:50%;left:50%;
  padding:50px;
  margin:-185px 0 0 -400px;
  width:800px;height:370px;
  background:#fff;
  box-sizing:border-box;
  z-index:101;
}
.age-tc p{
  line-height:30px;
  font-size:18px;
  color:#000;
}
.age-tc p.hd{
  font-weight:700;
}