html{width:100%;height:100%;}
.appwrap{width:100%;height:100%;overflow:hidden;background:#3D3E4B;font-family:"Microsoft Yahei";-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;}
.app{position:relative;max-width:640px;height:inherit;margin:0 auto;}
.app-inner{width:inherit;height:inherit;overflow:hidden;}
.app-content{height:inherit;}

.app-page{position:absolute;left:0;top:0;z-index:0;width:100%;height:inherit;background-size:cover;background-repeat:no-repeat;overflow:hidden;display:none;transition:.3s all linear;-webkit-transition:.3s all linear;}
.app-page.current{z-index:1;display:block;}
.app-page.active{z-index:6;display:block;}

.app-page div,a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.app-page a{text-decoration: none;color: #fff;}

.app-page .start{position:absolute;bottom:30px;left:58%;margin-left:-80px;width:100px;height:100px;}
.app-page .start .pic{position:absolute;left:58%;top:-14px;width: 40px;height: 87px;margin-left:-26px;background-image:url(http://appfile.js118.com.cn/images/icon-nx.png);background-repeat:no-repeat;background-size:100%;}
.app-page .start .s{position:absolute;border:2px solid #fff;}
.app-page .start .s1{animation:startNX 1s linear 0s infinite;-webkit-animation:startNX 1s linear 0s infinite;}
.app-page .start .s2{animation:startNX 2s linear 0s infinite;-webkit-animation:startNX 2s linear 0s infinite;}
.app-page .start .s3{animation:startNX 3s linear 0s infinite;-webkit-animation:startNX 3s linear 0s infinite;}


/*--------------------------
 Ä£¿é£ºÒôÀÖ
---------------------------*/
.musicBox{position:absolute;right:10px;top:10px;width:30px;height:30px;background-image:url(http://appfile.js118.com.cn/images/icon-music.png);background-repeat:no-repeat;z-index:101;}
.musicBox.play{background-position:0 0;animation:rotate360 3s linear 0s infinite;-webkit-animation:rotate360 3s linear 0s infinite;}
.musicBox.stop{background-position:-30px 0;animation:none;-webkit-animation:none;}
#musicPlayer{position:absolute;z-index:-10;left:50%;top:50%;height: 0;visibility:hidden;}
/*--------------------------
 Ä£¿é£º»¬¶¯°´Å¥
---------------------------*/
.slideBtn{position:fixed;z-index:99;width:120px;height:75px;left:50%;margin-left:-60px;background-image:url(http://appfile.js118.com.cn/images/slide-arrow.png);background-repeat:no-repeat;display:none;}
.slideUp{top:20px;background-position:0 -75px;animation:slideUpAnimate 2s linear 0s infinite;-webkit-animation:slideUpAnimate 2s linear 0s infinite;}
.slideDown{bottom:20px;background-position:0 0;animation:slideDownAnimate 2s linear 0s infinite;-webkit-animation:slideDownAnimate 2s linear 0s infinite;}

@keyframes startNX{
	0%{width:0;height:0;opacity:0;border-radius:0;left:50%;top:50%;margin-left:0;margin-top:0;}
	50%{width:60px;height:60px;opacity:.5;border-radius:32px;left:50%;top:50%;margin-left:-30px;margin-top:-30px;}
	100%{width:120px;height:120px;opacity:0;border-radius:62px;left:50%;top:50%;margin-left:-60px;margin-top:-60px;}
}
@-webkit-keyframes startNX{
	0%{width:0;height:0;opacity:0;border-radius:0;left:50%;top:50%;margin-left:0;margin-top:0;}
	50%{width:60px;height:60px;opacity:.5;border-radius:32px;left:50%;top:50%;margin-left:-30px;margin-top:-30px;}
	100%{width:120px;height:120px;opacity:0;border-radius:62px;left:50%;top:50%;margin-left:-60px;margin-top:-60px;}
}
@keyframes rotate360{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}
@-webkit-keyframes rotate360{
	from{-webkit-transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);}
}
@keyframes slideUpAnimate{
	0%{top:20px;opacity:0;}
	50%{top:-20px;opacity:1;}
	100%{top:20px;opacity:0;}
}
@-webkit-keyframes slideUpAnimate{
	0%{top:20px;opacity:0;}
	50%{top:-20px;opacity:1;}
	100%{top:20px;opacity:0;}
}
@keyframes slideDownAnimate{
	0%{bottom:20px;opacity:0;}
	50%{bottom:-20px;opacity:1;}
	100%{bottom:0;opacity:0;}
}
@-webkit-keyframes slideDownAnimate{
	0%{bottom:20px;opacity:0;}
	50%{bottom:-20px;opacity:1;}
	100%{bottom:20px;opacity:0;}
}
@keyframes slideLeftAnimate{
	0%{left:20px;opacity:0;}
	50%{left:0;opacity:1;}
	100%{left:20px;opacity:0;}
}
@-webkit-keyframes slideLeftAnimate{
	0%{left:20px;opacity:0;}
	50%{left:0;opacity:1;}
	100%{left:20px;opacity:0;}
}
@keyframes slideRightAnimate{
	0%{right:20px;opacity:0;}
	50%{right:0;opacity:1;}
	100%{right:0;opacity:0;}
}
@-webkit-keyframes slideRightAnimate{
	0%{right:20px;opacity:0;}
	50%{right:0;opacity:1;}
	100%{right:20px;opacity:0;}
}