* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;height: 100%; text-align: center; background: #fafaf9;}
body {overflow: hidden;}
section{width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;overflow: hidden;}
.loadingSection{ background: url(../images/loadingBg.jpg); background-size: 100% 100%;  background-position: 50% 50%;}
.loadingSection .pic1{width: 5.333rem; height: 3.12rem; background: url(../images/loading1.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; margin-left: -2.666rem;margin-top: -1.83rem; transition: all 200ms; opacity: 0;}
.loadingSection .pic2{width: 5.333rem; height: 3.12rem; background: url(../images/loading2.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; margin-left: -2.666rem;margin-top: -1.83rem;transition: all 200ms; opacity: 0}
.loadingSection .pic3{width: 5.333rem; height: 3.12rem; background: url(../images/loading3.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; margin-left: -2.666rem;margin-top: -1.83rem;transition: all 200ms; opacity: 0}
.loadingSection .pic4{width: 5.333rem; height: 3.12rem; background: url(../images/loading4.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; margin-left: -2.666rem;margin-top: -1.83rem;transition: all 200ms; opacity: 0}

#videoSec{display: none; z-index: 100; background: url(../images/introBg.jpg) no-repeat; background-size: 100% 100%;  position: relative;}
.introBlack{width: 100%; height: 100%; background: url(../images/introBlack.png); background-size: 17.773rem 10rem; position: absolute; left: 0; top: 0;}
.introBlack1{-webkit-mask-image: url(../images/introM1.png);-webkit-mask-size: 0 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position:50% 0;}
.introBlack2{-webkit-mask-image: url(../images/introM2.png);-webkit-mask-size: 0 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position:50% 0;}
.introBlack3{-webkit-mask-image: url(../images/introM3.png);-webkit-mask-size: 0 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position:50%  20%;}
.introBlack4{-webkit-mask-image: url(../images/introM5.png);-webkit-mask-size: 0 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position:50%  0;}
.introBlack5{-webkit-mask-image: url(../images/introM6.png);-webkit-mask-size: 0 0;-webkit-mask-repeat: no-repeat;-webkit-mask-position:50%  30%;}
.active .introBlack1{-webkit-animation: t1Ani 5000ms ease-out 0ms forwards;}
.active .introBlack2{-webkit-animation: t1Ani 2500ms ease-out 0ms forwards;}
.active .introBlack3{-webkit-animation: t1Ani 3000ms ease-out 2000ms forwards;}
.active .introBlack4{-webkit-animation: t1Ani 4000ms ease-out 1500ms forwards;}
.active .introBlack5{-webkit-animation: t1Ani 2000ms ease-out 1200ms forwards;}
@-webkit-keyframes t1Ani{
	0%{-webkit-mask-size: 0 0;}
	100%{-webkit-mask-size: 17.773rem 10rem;}
}
.introLine4{width: 3.266rem; height: 0.373rem; position: absolute; background: url(../images/introLine4.png) no-repeat; background-size: 100% 100%; left: 50%; top: 5.546rem; margin-left: -1.626rem;opacity: 0;}
.introLine3{width: 3.266rem; height: 0.373rem; position: absolute; background: url(../images/introLine3.png) no-repeat; background-size: 100% 100%; left: 50%; top: 5rem; margin-left: -1.626rem;opacity: 0;}
.introLine2{width: 4.84rem; height: 0.373rem; position: absolute; background: url(../images/introLine2.png) no-repeat; background-size: 100% 100%; left: 50%; top: 4.426rem; margin-left: -2.42rem;opacity: 0;}
.introLine1{width: 4.853rem; height: 0.373rem; position: absolute; background: url(../images/introLine1.png) no-repeat; background-size: 100% 100%; left: 50%; top: 3.88rem; margin-left: -2.426rem;opacity: 0;}

.introZ1{width: 1.16rem; height: 1.226rem; position: absolute; background: url(../images/introZ1.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.2rem; margin-left: -4.666rem; opacity: 0;}
.introZ2{width: 1.04rem; height: 0.986rem; position: absolute; background: url(../images/introZ2.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.013rem; margin-left: -3.626rem;opacity: 0;}
.introZ3{width: 0.96rem; height: 1.053rem; position: absolute; background: url(../images/introZ3.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.466rem; margin-left: -2.613rem;opacity: 0;}
.introZ4{width: 1.026rem; height: 0.986rem; position: absolute; background: url(../images/introZ4.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.106rem; margin-left: -1.72rem;opacity: 0;}
.introZ5{width: 0.733rem; height: 0.8rem; position: absolute; background: url(../images/introZ5.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.493rem; margin-left: -0.693rem;opacity: 0;}
.introZ6{width: 0.76rem; height: 0.786rem; position: absolute; background: url(../images/introZ6.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.266rem; margin-left: 0;opacity: 0;}
.introZ7{width: 0.706rem; height: 0.666rem; position: absolute; background: url(../images/introZ7.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.626rem; margin-left: 0.68rem;opacity: 0;}
.introZ8{width: 0.853rem; height: 0.866rem; position: absolute; background: url(../images/introZ8.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.386rem; margin-left: 1.346rem;opacity: 0;}
.introZ9{width: 0.893rem; height: 0.92rem; position: absolute; background: url(../images/introZ9.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.573rem; margin-left: 2.106rem;opacity: 0;}
.introZ10{width: 0.68rem; height: 0.72rem; position: absolute; background: url(../images/introZ10.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.426rem; margin-left: 2.92rem;opacity: 0;}
.introZ11{width: 1.186rem; height: 1.2rem; position: absolute; background: url(../images/introZ11.png) no-repeat; background-size: 100% 100%; left: 50%; top: 2.28rem; margin-left: 3.493rem;opacity: 0;}
.active .introZ1{-webkit-animation: t2Ani 1000ms ease-out 3000ms forwards;}
.active .introZ2{-webkit-animation: t2Ani 1000ms ease-out 3200ms forwards;}
.active .introZ3{-webkit-animation: t2Ani 1000ms ease-out 3400ms forwards;}
.active .introZ4{-webkit-animation: t2Ani 1000ms ease-out 3600ms forwards;}
.active .introZ5{-webkit-animation: t2Ani 1000ms ease-out 3800ms forwards;}
.active .introZ6{-webkit-animation: t2Ani 1000ms ease-out 4000ms forwards;}
.active .introZ7{-webkit-animation: t2Ani 1000ms ease-out 4200ms forwards;}
.active .introZ8{-webkit-animation: t2Ani 1000ms ease-out 4400ms forwards;}
.active .introZ9{-webkit-animation: t2Ani 1000ms ease-out 4600ms forwards;}
.active .introZ10{-webkit-animation: t2Ani 1000ms ease-out 4800ms forwards;}
.active .introZ11{-webkit-animation: t2Ani 1000ms ease-out 5000ms forwards;}
.active .introLine4{-webkit-animation: t3Ani 1000ms ease-out 5500ms forwards;}
.active .introLine3{-webkit-animation: t3Ani 1000ms ease-out 5000ms forwards;}
.active .introLine2{-webkit-animation: t3Ani 1000ms ease-out 4500ms forwards;}
.active .introLine1{-webkit-animation: t3Ani 1000ms ease-out 4000ms forwards;}
@-webkit-keyframes t2Ani{
	0%{transform: translateY(-0.666rem) rotateY(-50deg); opacity: 0;}
	100%{transform: translateY(0) rotateY(0deg); opacity: 1;}
}
@-webkit-keyframes t3Ani{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.skipIntroBtn{width: 3.426rem; height: 0.933rem; position: absolute; z-index: 150; background: url(../images/skipIntroBtn.png); background-size: 100% 100%; bottom: 1.2rem; left: 50%; margin-left: -1.7rem; transition: all 500ms; opacity: 0;}

.loadingSection .per{width: 6.16rem; height: 0.8rem;   position: absolute; bottom: 2.733rem; left: 50%; margin-left: -3.08rem; overflow: hidden;}
.loadingSection .per .blot{width: 6.16rem; height: 0.8rem; background: url(../images/loadingBlot.png) no-repeat; background-size: 6.16rem 0.8rem; position: absolute; left:-5.38rem ;}
.loadingSection .txt{position:absolute ; left: 50%; width: 3rem; margin-left: -1.5rem;top: 7.2rem;font-size: 14px; color: #666;}


.logo{width:4.306666rem; height: 0.506666rem; position: absolute; left: 0.453333rem; top: 0.413333rem; background: url(../images/logo.png); background-size: 100% 100%; z-index: 200;}

.musicBtn{width: 1.226rem; height: 1.226rem; display: block; position: absolute; right: 0.4rem; top: 0.4rem;background:url(../images/soundOn.png) center center no-repeat;  background-size:100% 100% ;  z-index: 1000; pointer-events: auto;}
.mute{background:url(../images/soundOff.png) center center no-repeat;  background-size:100% 100% ;}

#world{-webkit-mask-image: url(../images/mask.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
#world.show{-webkit-animation: mainbgAni 4000ms ease-out  forwards;}
@-webkit-keyframes mainbgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:50% 0 ;}
	100%{-webkit-mask-size:40rem 25rem ;-webkit-mask-position:50% 0 ;}
}
/* popups */

.md-modal {position: fixed;top: 50%;left: 50%; width: 100%; height: 100%;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: rgba(255,255,255,0.8);-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

/* Content styles */
.md-content {position: relative;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}


.popUp{text-align:center; width: 100%; height: 100%; pointer-events: all;}

.popUp .md-close{ width: 2.893rem; height: 0.933rem; position: absolute; display: block; right: 0; top:0; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
.popUp .md-return{ width: 3.36rem; height: 0.933rem; position: absolute; display: block; right: 0; top:0; background:url(../images/btnReturn.png); background-size: 100% 100%;z-index: 1;}

.popUp .popMain .picBox{width: 100%; height: 70%; position: absolute; left: 0; bottom: 2rem; text-align: center;}
.popUp .picBox>img{width: auto; height: 100%;  margin: auto;}
.popUp .popSec .picBox{width: 100%; height: 75%; position: absolute; left: 0; bottom: 1.2rem; text-align: center;}
.popUp .popSec .picBox>img{}
.popUp .popTrd .picBox{width: 100%; height: 90%; position: absolute; left: 0; bottom: 0.3rem; text-align: center;}
.popUp .popTrd .picBox>img{ margin-left: -1.5rem;}
.popUp .popFor .picBox{width: 100%; height: 90%; position: absolute; left: 0; bottom: 0.5rem; text-align: center;}
.popUp .popFor .picBox>img{}

.popUp .btnLine{display: flex; justify-content: center; position: absolute; bottom: 0.8rem; width: 100%;}
.popUp .btnLine .btnItem{width: 2.946rem; height: 0.933rem; margin: 0 0.186rem;}
.popUp .btnLine .btn1{background: url(../images/btn1.png) no-repeat; background-size: 100%;}
.popUp .btnLine .btn2{background: url(../images/btn2.png) no-repeat; background-size: 100%;}
.popUp .btnLine .btn3{background: url(../images/btn3.png) no-repeat; background-size: 100%;}
.popUp .btnLine .btn4{background: url(../images/btn4.png) no-repeat; background-size: 100%;}
.popUp .btnLine .btn5{background: url(../images/btn5.png) no-repeat; background-size: 100%;}

.popUp .popSec{display: none;}
.popUp .popTrd{}


ul {display: flex; position: absolute; left: 50%; bottom: 1rem; margin-left: -1.5rem; opacity: 0;  z-index: 200; transition: all 500ms;}
ul:before{content: ""; width: 0.1rem; height: 0.2rem; background: url(../images/arrawLeft.png) no-repeat; background-size: 100% 100%; position: absolute; left: -0.266rem; top: 0;margin: 0.066rem;}
ul:after{content: ""; width: 0.1rem; height: 0.2rem; background: url(../images/arrawRight.png) no-repeat; background-size: 100% 100%; position: absolute; right: -0.266rem; top: 0;margin: 0.066rem;}
ul li{display: block; width: 0.18rem; height: 0.18rem; border-radius: 0.18rem; background: #737373; margin: 0.066rem; transition: all 500ms;}
ul li.active{background: #be1313;}