*{margin:0;padding:0;list-style:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}
body{background:#000}
html, body{background:#fff;width:100%;height:100%;overflow: hidden;position: relative;max-width: 640px;margin: 0 auto;}
/********音乐*********/
.music{
    position: fixed;
    right:25px;
    top:73px;z-index:100;display: none;
}
.music span{
    display: block;width:60px;
    height:60px;
    background: url(../images/sprite.png) no-repeat -157px 0;
    /*background-size: 100% 100%;*/
}
.chupinBtn{
	position: fixed;
    right:30px;
    top:13px;z-index:100;display: none;width:60px;
    height:60px;
    background: url(../images/sprite.png) no-repeat -217px 0;
}


.music.mute span {animation: mymove 9s infinite;animation-timing-function: linear;-webkit-animation: mymove 9s infinite;-webkit-animation-timing-function: linear;}
@keyframes mymove{
	0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
	100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes mymove{
	0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
	100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}
.wrap{width:640px;height:100%;min-height:1138px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);
background:#faeccf url(../images/bg.jpg) no-repeat;background-size: 100% 100%; }
.loadLogo{padding-bottom: 2vh;}
.loadGRoup{width:50%;margin:0 auto;height:20px;margin-top: 20px;border:1px solid #fff;border-radius: 10px;overflow: hidden;background:#eee; }
.loadGRoup span{width:0;height:20px;display: block;background:#f00;}
.load2{position: absolute;top: 200px;left: 50%;opacity: 0;transform: translateY(-100px);-webkit-transform: translateY(-100px);}
.load2.active{transform:translateY(0);-webkit-transform:translateY(0);opacity: 1;transition:all 1s;-webkit-transition:all 1s;}
.load3{position: absolute;bottom: 0;left: 20%;}
.load1{opacity: 0;transform: scale(0);-webkit-transform: scale(0);transform-origin: top center;-webkit-transform-origin: top center;}
.load1.active{transform: scale(1);-webkit-transform: scale(1);opacity: 1;transition:all 1s;-webkit-transition:all 1s;}
@keyframes load1{
	0%{transform:rotate(-10deg) translateY(-5vh);-webkit-transform:rotate(-10deg);transform-origin: top center;-webkit-transform-origin: top center;}
	25%{transform:rotate(-25deg);-webkit-transform:rotate(-25deg);transform-origin: top center;-webkit-transform-origin: top center;}
	50%{transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform-origin: top center;-webkit-transform-origin: top center;}
	75%{transform:rotate(5deg);-webkit-transform:rotate(5deg);transform-origin: top center;-webkit-transform-origin: top center;}
	100%{transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform-origin: top center;-webkit-transform-origin: top center;}
}
#percent{width: 100%;text-align: center;position: absolute;top: 50%;;left: 0;font-weight: bold;color: #112b60;font-size: 30px;transform: translateY(-50%);-webkit-transform: translateY(-50%);padding-bottom: 10vh;}
.start{width: 350px;min-height: 111px;background:url(../images/start.png) no-repeat center;padding-top:50px;margin: 0 auto;margin-top: 1vh;}
.startImg{animation: slideTip 2s linear infinite;-webkit-animation: slideTip 2s linear infinite;}


#common-share{position:fixed;left:0;top:0;right:0;bottom:0;z-index:10000;display:none;background:url("../images/common-share-tip.png") no-repeat right top,rgba(11,14,24,0.8);-moz-background-size:60% auto;-o-background-size:60% auto;background-size:60% auto}
img{
	display: block;margin: 0 auto;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.main, .home{width: 100%;height: 100%;position: relative;box-sizing: border-box;background:#faeccf url(../images/bg.jpg) no-repeat center;background-size:cover;}
.main{display: none;}
.selectRole{background:url(../images/bg2.jpg);background-size: 100% 100%;}
.main, .container{width: 100%;height: 100%;}
.container{padding-top: 170px;}
.swiper-container {
    margin:0 auto;
    position: relative;
    overflow: hidden;
    width: 100% ;
    padding-top: 58px;
}
.mySwiper .swiper-slide{width:338px;opacity: 0.5;}
.swiper-slide.swiper-slide-active{opacity: 1;}
.pop,.pop1{width:100%;height:100%;background:rgba(5, 45, 60,0.9);position:fixed;top:0;left:0;z-index: 100;}
.chupin{width:100%;height:100%;background:#fcf5e5;position:fixed;top:0;left:0;z-index: 100;display: none;}
.popCont{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.pop .popCont{width: 90%;}
.pop .popCont .card{width:100%;}
.mySwiper_pop{width: 100%;height: 100%;position: relative;}
.chup{margin: 0 auto;padding-top:35vh;}
.close{width:180px;margin:0 auto;padding-top: 20px;}
.pop1{left: 200%;opacity: 0;}
.pop1.hov{left: 0;opacity: 1;}
.tk{width: 495px;height: 1080px;position: absolute;left: 50%;margin-left: -247px;top: 50%;margin-top: -540px;}
.bR,.bc{position: absolute;left: 50%;margin-left: -88px;top: 50%;margin-top: -213px;width: 80px;height: 398px;}
.pop{display:none;}


.close1{position: fixed; right:5%;top: 50%;margin-top:200px;z-index: 100;}
.swiper-button-next{background-image: url(../images/right.png);position:absolute;top:70%;right:10%;width: 34px;height: 49px;z-index:10;cursor:pointer;-moz-background-size:100%;-webkit-background-size:100%;background-size:100%;background-position:center;background-repeat:no-repeat;opacity:1;}
.swiper-button-prev{background-image: url(../images/left.png);position:absolute;top: 70%;left:10%;width: 34px;height: 49px;z-index:10;cursor:pointer;-moz-background-size:100%;-webkit-background-size:100%;background-size:100%;background-position:center;background-repeat:no-repeat;opacity: 1;}

.hide{display:none!important;pointer-events: none;}
.alpha{opacity: 0;}
.slideTips,.slideTips2,.slideTips3,.slideTips4,.slideTips5,.slideTips6,.slideTips7,.slideTipsEnd{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 10;}
.slideTips span,.slideTips3 span,.slideTips2 span,.slideTips6 span{
	width: 100%;height: 10vh;position: absolute;bottom: 10vh;left: 0;
	background: url(../images/up.png) no-repeat center bottom;background-size: 126px;
	animation: slideTip 2s linear infinite;-webkit-animation: slideTip 2s linear infinite;
}
@keyframes slideTip{
	0%{transform:translateY(30px);-webkit-transform:translateY(30px);}
	55%{transform:translateY(0);-webkit-transform:translateY(0);}
	100%{transform:translateY(30px);-webkit-transform:translateY(30px);}
}
@-webkit-keyframes slideTip{
	0%{transform:translateY(30px);-webkit-transform:translateY(30px);}
	55%{transform:translateY(0);-webkit-transform:translateY(0);}
	100%{transform:translateY(30px);-webkit-transform:translateY(30px);}
}



@keyframes mymove1{
0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
55%{transform:rotate(90deg);-webkit-transform:rotate(90deg);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
100%{transform:rotate(0deg);-webkit-transform:rotate(0deg); transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
}
@-webkit-keyframes mymove1{
0%{transform:rotate(0deg);-webkit-transform:rotate(0deg);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
55%{transform:rotate(90deg);-webkit-transform:rotate(90deg);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
100%{transform:rotate(0deg);-webkit-transform:rotate(0deg); transform-origin:50% 50%;-webkit-transform-origin:50% 50%;}
}
@keyframes mymove{
0%{
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg); 
	}
25%{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg); 	
	}
	
50%{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg); 	
	}
	
75%{
	transform:rotate(270deg);
	-webkit-transform:rotate(270deg); 	
	}
	
100%{
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg); 
	}
}
@-webkit-keyframes mymove {
0%{
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg); 	
	}
25%{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg); 	
	}
	
50%{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg); 	
	}
	
75%{
	transform:rotate(270deg);
	-webkit-transform:rotate(270deg); 	
	}
	
100%{
	transform:rotate(360deg);
	-webkit-transform:rotate(360deg); 
	}
}