.lwPage{
  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:cover;
  object-fit:cover;
}

.page1 .video-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background:url('../img/bg-video.gif') center center no-repeat;
  background-size:cover;
  object-fit:contain;
}

.page1 .download{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background:url('../img/download.gif') center center no-repeat;
  background-size:cover;
  object-fit:contain;
}
.page1 .download a{
  position:absolute;
  top:57%;left:25%;
  width:48%;height:15%;
}

.page1 .logo{
  position:absolute;
  top:30px;left:10px;
  width:197px;height:117px;
  background:url('../img/logo.png?v=1') no-repeat;
  background-size:cover;
}

.page1 .music-btn{
  position:absolute;
  top:92%;right:5%;
  width:56px;height:56px;
  background:url('../img/music-close.png?v=1') no-repeat;
}
.page1 .music-btn.open{
  background:url('../img/music-open.png?v=1') no-repeat;
}

.arrow-next{
  position:absolute;
  top:25px;right:30px;
  width:83px;height:69px;
  background:url('../img/arrow-next.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  animation:moveLeftRight1 0.8s ease infinite;
  -webkit-animation:moveLeftRight1 0.8s ease infinite;
  z-index:4;
}
@keyframes moveLeftRight1{
  0%{right:30px;}
  25%{right:25px;}
  50%{right:30px;}
  75%{right:35px;}
  100%{right:30px;}
}
@-webkit-keyframes moveLeftRight1{
  0%{right:30px;}
  25%{right:25px;}
  50%{right:30px;}
  75%{right:35px;}
  100%{right:30px;}
}

.page-arrow{
  position:absolute;
  bottom:50px;left:50%;
  margin-left:-50px;
  width:101px;height:98px;
  background:url('../img/page-arrow.png?v=1') no-repeat;
  animation:arrowMoveUpDown 0.8s ease infinite;
  -webkit-animation:arrowMoveUpDown 1s ease infinite;
  z-index:3;
}
@keyframes arrowMoveUpDown{
  0%{bottom:50px;}
  25%{bottom:45px;}
  50%{bottom:50px;}
  75%{bottom:55px;}
  100%{bottom:50px;}
}
@-webkit-keyframes arrowMoveUpDown{
  0%{bottom:50px;}
  25%{bottom:45px;}
  50%{bottom:50px;}
  75%{bottom:55px;}
  100%{bottom:50px;}
}

.page2{
  background:url('../img/bg2.jpg?v=1') center center no-repeat;
  background-size:cover;
  object-fit:cover;
}
.page2 .video-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background:url('../img/bg2-video.gif?v=1') center center no-repeat;
  background-size:cover;
  object-fit:contain;
}
.page2 .world-text{
  position:absolute;
  top:100px;left:50%;
  margin-left:-377px;
  width:755px;height:771px;
  background:url('../img/world-text.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
}

.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;
}

.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:before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:url('../img/mask.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  z-index:2;
}
.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:10%;right:5%;
  width:13%;height:auto;
  z-index:3;
}
.page3 .info-area .style-area .style-tab .style{
  margin-bottom:20%;
  width:100%;height:0;
  padding-top:100%;
  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{
  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{
  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{
  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:20%;left:3%;
  width:22%;height:auto;
  z-index:3;
}
.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;
  margin-bottom:15%;
  width:100%;
  height:0;
  padding-top:100%;
  cursor:pointer;
}
.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 .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{
  display:none;
  position:relative;
  width:100%;height:100%;
  z-index:1;
}
.page3 .info-area .style-area .info .gold-info.active .role,
.page3 .info-area .style-area .info .wind-info.active .role,
.page3 .info-area .style-area .info .water-info.active .role,
.page3 .info-area .style-area .info .fire-info.active .role,
.page3 .info-area .style-area .info .thunder-info.active .role{
  display:block;
  -webkit-animation:slideInFromTop 0.5s ease-out forwards;
  animation:slideInFromTop 0.5s ease-out forwards;
}
@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(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{
  display:none;
  position:absolute;
  top:78%;left:5%;
  width:90%;height:15%;
  z-index:3;
}
.page3 .info-area .style-area .info .gold-info.active .role-info,
.page3 .info-area .style-area .info .wind-info.active .role-info,
.page3 .info-area .style-area .info .water-info.active .role-info,
.page3 .info-area .style-area .info .fire-info.active .role-info,
.page3 .info-area .style-area .info .thunder-info.active .role-info{
  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-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{
  display:none;
  position:absolute;
  top:63%;right:5%;
  width:21%;height:15%;
  -webkit-transform-origin:22% 0;
  transform-origin:22% 0;
  -webkit-animation:slideInFromRight 0.5s ease-out forwards,cardSpin 2s 0.1s linear infinite;
  animation:slideInFromRight 0.5s ease-out forwards,cardSpin 2s 0.1s linear infinite;
  z-index:3;
}
@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-info.active .role-card,
.page3 .info-area .style-area .info .wind-info.active .role-card,
.page3 .info-area .style-area .info .water-info.active .role-card,
.page3 .info-area .style-area .info .fire-info.active .role-card,
.page3 .info-area .style-area .info .thunder-info.active .role-card{
  display:block;
}

.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 .playGame-area{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
}
.page4 .playGame-area .game-area{
  position:absolute;
  top:0%;left:0%;
  width:100%;height:100%;
  overflow:hidden;
}
.page4 .playGame-area .game-area ul li{
  float:left;
  overflow:hidden;
}
.page4 .playGame-area .game-area ul li .img-wh{
  background-size:cover;
  object-fit:cover;
}

.page4 .playGame-area .game-box{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:100%;
  background:url('../img/gameBox.png?v=1') bottom center no-repeat;
  background-size:cover;
  object-fit:cover;
  z-index:2;
}
.page4 .playGame-area .game-box .gameGif{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:100%;
  background:url('../img/game.gif') bottom center no-repeat;
  background-size:cover;
  object-fit:contain;
  overflow:hidden;
}
.page4 .playGame-area .game-box .arrowArea{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:100%;
  background:url('../img/gameArrow.gif') no-repeat;
  background-size:contain;
  object-fit:contain;
}
.page4 .playGame-area .game-box .arrowArea .prev{
  position:absolute;
  top:13%;left:3%;
  width:10%;height:8%;
  z-index: 999;
}
.page4 .playGame-area .game-box .arrowArea .next{
  position:absolute;
  top:13%;right:3%;
  width:10%;height:8%;
  z-index: 999;
}
.page4 .playGame-area .game-box .pageArea{
  position:absolute;
  bottom:11%;left:50%;
  margin-left:-195px;
  width:390px;height:68px;
}
.page4 .playGame-area .game-box .pageArea .swiper-pagination-bullet{
  float:left;
  margin-right:10px;
  width:68px;height:68px;
  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:cover;
  object-fit:cover;
}

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

.page5 .age-btn{
  position:absolute;
  top:41px;left:50%;
  margin-left:389px;
  width:73px;height:100px;
  font-size:14px;
  color:#629afe;
  text-decoration:underline;
}

.nav-area{
  position:fixed;
  top:180px;left:0;
  width:330px;height:222px;
  z-index:99;
}
.nav-area .close{
  position:absolute;
  top:0;right:0;
  width:35px;height:35px;
  background:url('../img/nav-close.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  z-index:100;
}
.nav-area .nav{
  position:absolute;
  top:0;left:0;
  width:330px;height:222px;
  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;}
}

.tcBox{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:url('../img/tc-bg.jpg?v=1') bottom center no-repeat;
  background-size:cover;
  object-fit:cover;
  z-index:2;
}
.tcBox .video-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow:hidden;
  background:url('../img/tcBox-video.gif') bottom center no-repeat;
  background-size:cover;
  object-fit:contain;
}
.tcBox .arrow-prev{
  position:absolute;
  top:25px;right:30px;
  width:83px;height:69px;
  background:url('../img/arrow-prev.png?v=1') no-repeat;
  background-size:cover;
  object-fit:cover;
  animation:moveLeftRight2 0.8s ease infinite;
  -webkit-animation:moveLeftRight2 0.8s ease infinite;
}
@keyframes moveLeftRight2{
  0%{right:30px;}
  25%{right:25px;}
  50%{right:30px;}
  75%{right:35px;}
  100%{right:30px;}
}
@-webkit-keyframes moveLeftRight2{
  0%{right:30px;}
  25%{right:25px;}
  50%{right:30px;}
  75%{right:35px;}
  100%{right:30px;}
}

.tcBox .music-btn{
  position:absolute;
  top:20%;left:15%;
  width:46px;height:54px;
  background:url('../img/music-open.png?v=1') no-repeat;
}
.tcBox .music-btn.close{
  background:url('../img/music-close.png?v=1') no-repeat;
}

.tcBox .menu-list{
  position:absolute;
  top:15%;left:50%;
  margin-left:-352px;
  width:704px;height:844px;
  transform:scale(0.9, 0.9);
}
.tcBox .menu-list .menu{
  position:relative;
  display:block;
  width:100%;height:211px;
  background:url('../img/menu.png?v=1') no-repeat;
}
.tcBox .menu-list .menu.active{
  background:url('../img/menu-active.png?v=1') no-repeat;
}
.tcBox .menu-list .menu1,
.tcBox .menu-list .menu1.active{
  background-position:0 0;
}
.tcBox .menu-list .menu2,
.tcBox .menu-list .menu2.active{
  background-position:0 -211px;
}
.tcBox .menu-list .menu3,
.tcBox .menu-list .menu3.active{
  background-position:0 -422px;
}
.tcBox .menu-list .menu4,
.tcBox .menu-list .menu4.active{
  background-position:0 -633px;
}

.tcBox .menu-list .menu.active .icon{
  position:absolute;
  top:46px;left:0;
  width:41px;height:80px;
  background:url('../img/menu-arrow.png?v=1') no-repeat;
}

.tcBox .icon-area{
  position:absolute;
  bottom:0px;left:50%;
  margin-left:-366px;
  width:732px;height:144px;
}
.tcBox .icon-area .icon{
  position:relative;
  float:left;
  margin:0 50px;
  width:144px;height:144px;
}
.tcBox .icon-area .icon1{
  background:url('../img/icon1.png?v=1') no-repeat;
}
.tcBox .icon-area .icon2{
  background:url('../img/icon2.png?v=1') no-repeat;
}
.tcBox .icon-area .icon3{
  background:url('../img/icon3.png?v=1') no-repeat;
}

.tcBox .icon-area .icon1 .wx-icon{
  position:absolute;
  top:-230px;left:50%;
  margin-left:-150px;
  width:219px;height:247px;
  background:url('../img/wx-code-ibox.png?v=1') no-repeat;
}
.tcBox .icon-area .icon1 .wx-icon .img-wh{
  position:absolute;
  top:20px;left:30px;
  width:157px;height:157px;
}

.tcBox .icon-area .icon3 .kf-icon{
  position:absolute;
  top:-130px;left:50%;
  margin-left:-280px;
  width:408px;height:155px;
  background:url('../img/kf-code.png?v=1') no-repeat;
}
.tcBox .icon-area .icon3 .kf-icon .link{
  position:absolute;
  top:65px;left:115px;
  width:170px;height:45px;
}

.mask{
  z-index:100;
}

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