html{height: 100%;}
body{font-size: 1em;-webkit-user-select: none;overflow: hidden;height: 100%!important;max-width: 640px;}
.wrapper{overflow: hidden;}
.page{
	position:absolute;
    top:0px;
    left:0px;
    width:100%;
    z-index:9;
    background-color: #dddddd;
    display:none;
}

.page.active{z-index:40;}

#page_loading{
	
}

#page_loading .page-con{
	background-image: url(../images/kmzhc_app1_bg1.jpg); background-repeat: no-repeat;background-size: 100%;
}

#page1{background-color: #b01116;overflow: hidden;}
#page1 .c1{width:  480px;height:613px;background-image: url(../images/page1_1.png);background-repeat: no-repeat;background-position: center center;margin:10px auto 0 auto;}

#page1 .page1-con{position: relative;width: 100%;height: 100px;}

#page1 .c2{width: 400px;height: 58px;background-image: url(../images/page1_2_1.png);background-repeat: no-repeat;background-position: center center;position: absolute;top:0px;left:-400px;opacity: 0.1;margin-left:-184px;}

#page1 .c2.active{
	left:50%;
	opacity: 1;
	-webkit-transition: all 1s 0.2s;
}

#page1 .c3{width: 319px;height: 60px;background-image: url(../images/page1_2_2.png);background-repeat: no-repeat;background-position: center center;position: absolute;top:60px;left:1000px;opacity: 0.1;margin-left:-184px;}

#page1 .c3.active{
	left:50%;
	top: 80px;
	margin-left: -146px;
	opacity: 1;
	-webkit-transition: all 1s 0.6s;
}


#page2{
	
}
#page2 .sex-select{width: 400px;height: 460px;position: absolute;top:50%;left:50%;margin-left:-200px;margin-top:-260px;}
#page2 .sex-select a{display: block;width: 100%;height: 100%;}

#page2 .sex-select-male{width: 400px;height:460px;background:url(../images/select.png) no-repeat center 0;margin:0 auto;
}

#page2 .sex-select-unkonw{width: 332px;height:460px;background:url(../images/select.png) no-repeat center -510px;margin:0 auto;}

#page2 .sex-select-hua{width: 37px;height:35px;background:url(../images/select.png) no-repeat -73px -152px;margin:25px auto;}

#page2 .select-sex-tip{text-align: center;color: #ffffff;font-size: 30px;padding-top: 40px;}

#page2 .sex-select-hua.active{
	-webkit-transform:rotate(0deg);
	animation: select_hua 1.2s infinite linear;
	-moz-animation: select_hua 1.2s infinite linear;
	-webkit-animation: select_hua 1.2s infinite linear;
	-o-animation: select_hua 1.2s infinite linear;
}
@-webkit-keyframes select_hua {
      0%{ -webkit-transform:rotate(0deg); }
    100%{-webkit-transform:rotate(360deg);}
}

#page3 header{
	position: absolute;
	top:-1000px;
	width: 100%;height: 663px;background-image:url(../images/su1.png);background-repeat: no-repeat;background-position: center 0px;background-size: 80%;
	-webkit-transition: all 0.8s;
}
#page3 header p{
	font-size: 40px;
	color: #590202;
	font-weight: bold;
	margin-top: 220px;
	width: 380px;
	margin-left: 140px;
	text-align: center;


}


#page3 header.active{
	top:20px;
}


#page3 footer{
	position: absolute;
	bottom: -52px;
	width: 100%;height: 32px;background-image:url(../images/su2.png);background-repeat: no-repeat;background-position: center 0px;background-size: 80%; 
	-webkit-transition: all 0.8s;
}

#page3 footer.active{
	bottom:52px;
}

#page3 .yao-con{
	position: absolute;
	top:50%;
	left:1000px;
	margin-top:-250px;
	margin-left: -169px;
	width: 338px;height: 500px;background-image: url(../images/yao_con.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100%;
	-webkit-transition: all 0.8s;
}

#page3 .yao-con.active{
	left:50%;
}


#page3 .yao-con .yaoyiyao{
	width: 80px;
	height: 100px;
	position: absolute;left:0px;bottom: 0px;
	background: url(../images/yaoyiyao.png?v=2) no-repeat 0 0;
	-webkit-transform:rotate(-60deg);
	animation: yaoyao 0.8s infinite;
	-moz-animation: yaoyao 0.8s infinite;
	-webkit-animation: yaoyao 0.8s infinite;
	-o-animation: yaoyao 0.8s infinite;

	 -webkit-transform-origin:(center bottom);
	 -moz-transform-origin:(center bottom);
	 -o-transform-origin:(center bottom);
	 transform-origin:(center bottom);
}

@-webkit-keyframes yaoyao {
      0%{ -webkit-transform:rotate(-60deg);-webkit-transform-origin:(center bottom); }
      50%{ -webkit-transform:rotate(60deg);-webkit-transform-origin:(center bottom); }
    100%{-webkit-transform:rotate(-60deg);-webkit-transform-origin:(center bottom); }
}


#page3 .huaban1,#page3 .huaban2,#page3 .yezi1{
	position: absolute;
	top:-10px;
	left:100px;
	z-index:90;
}

#page3 .huaban1.active{
	animation: huaban_a 10s infinite linear;
	-moz-animation: huaban_a 10s infinite linear;
	-webkit-animation: huaban_a 10s infinite linear;
	-o-animation: huaban_a 10s infinite linear;
	z-index:90;
}
@-webkit-keyframes huaban_a {
      0%{ -webkit-transform:rotate(10deg) translate(150px,100px); }
      10%{ -webkit-transform:rotate(80deg) translate(360px,200px);}
      20%{ -webkit-transform:rotate(50deg) translate(370px,300px);}
      30%{ -webkit-transform:rotate(30deg) translate(380px,400px);}
      40%{ -webkit-transform:rotate(10deg) translate(490px,500px);}
      50%{ -webkit-transform:rotate(30deg) translate(480px,600px);}
      60%{ -webkit-transform:rotate(70deg) translate(530px,700px); }
      70%{ -webkit-transform:rotate(90deg) translate(460px,800px);}
      80%{ -webkit-transform:rotate(130deg) translate(350px,900px);}
      90%{ -webkit-transform:rotate(100deg) translate(300px,1000px);}
    100%{-webkit-transform:rotate(140deg) translate(230px,1100px); }
}

#page3 .huaban2.active{
	-webkit-transform:rotate(10deg) translate(-20px,-20px) scale(1.2);
	animation: huaban_b 10s 1s infinite linear;
	-moz-animation: huaban_b 10s 1s infinite linear;
	-webkit-animation: huaban_b 10s 1s infinite linear;
	-o-animation: huaban_b 10s 1s infinite linear;
	z-index:90;
}
@-webkit-keyframes huaban_b {
      0%{ -webkit-transform:rotate(10deg) translate(900px,150px) scale(1.2); }
      10%{ -webkit-transform:rotate(80deg) translate(260px,250px) scale(1.2);}
      20%{ -webkit-transform:rotate(50deg) translate(570px,350px) scale(1.2);}
      30%{ -webkit-transform:rotate(30deg) translate(380px,450px) scale(1.2);}
      40%{ -webkit-transform:rotate(10deg) translate(530px,550px) scale(1.2);}
      50%{ -webkit-transform:rotate(30deg) translate(380px,650px) scale(1.2);}
      60%{ -webkit-transform:rotate(70deg) translate(630px,750px) scale(1.2); }
      70%{ -webkit-transform:rotate(90deg) translate(460px,850px) scale(1.2);}
      80%{ -webkit-transform:rotate(130deg) translate(950px,950px) scale(1.2);}
      90%{ -webkit-transform:rotate(100deg) translate(510px,1050px) scale(1.2);}
    100%{-webkit-transform:rotate(140deg) translate(730px,1150px) scale(1.2); }
}

#page3 .yezi1.active{
	animation: yezi_a 10s 5s infinite linear;
	-moz-animation: yezi_a 10s 5s infinite linear;
	-webkit-animation: yezi_a 10s 5s infinite linear;
	-o-animation: yezi_a 10s 5s infinite linear;
	z-index:90;
}
@-webkit-keyframes yezi_a {
      0%{ -webkit-transform:rotate(10deg) translate(750px,100px) scale(1.2); }
      10%{ -webkit-transform:rotate(80deg) translate(360px,200px) scale(1.2);}
      20%{ -webkit-transform:rotate(50deg) translate(470px,300px) scale(1.2);}
      30%{ -webkit-transform:rotate(30deg) translate(380px,400px) scale(1.2);}
      40%{ -webkit-transform:rotate(10deg) translate(690px,500px) scale(1.2);}
      50%{ -webkit-transform:rotate(30deg) translate(480px,600px) scale(1.2);}
      60%{ -webkit-transform:rotate(70deg) translate(130px,700px) scale(1.2); }
      70%{ -webkit-transform:rotate(90deg) translate(460px,800px) scale(1.2);}
      80%{ -webkit-transform:rotate(130deg) translate(750px,900px) scale(1.2);}
      90%{ -webkit-transform:rotate(100deg) translate(800px,1000px) scale(1.2);}
    100%{-webkit-transform:rotate(140deg) translate(230px,1100px) scale(1.2); }
}

#page4 .smart{
	position: absolute;
	top:0px;
	left:0px;
	width: 66px;
	height: 74px;
	background-image: url(../images/smart.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
	display: none;
}

#page5 .page-con{
	background-image: url(../images/kmzhc_app1_bg2.jpg);
	position: relative;
	z-index:900;
}

#page5 .rs-name{
	position: absolute;top:20px;left:-50px;width: 50px;height: 225px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 0;
}

#page5 .rs-name.active{
	-webkit-transition: all 0.8s;
	left:20px;
}

#page5 .rs-info{
	position: absolute;bottom: 100px;right:-100px;width: 100px;height: 400px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center bottom;
}

#page5 .rs-info.active{
	-webkit-transition: all 0.8s;
	right:20px;
}
#page5 .rs-btn2{position: absolute;bottom:240px;left:0px;width: 100%;height: 36px;text-align: center;color: #ff3573;font-size: 30px;}
#page5 .rs-btn2 a{
	color: #ffffff;
}
#page5 .rs-btn2.active{
	-webkit-transition: all 0.6s;
	bottom:70px;
}
#page5 .rs-btn{position: absolute;bottom:-60px;left:0px;width: 100%;height: 36px;text-align: center;color: #ff3573;font-size: 30px;}
#page5 .rs-btn.active{
	-webkit-transition: all 0.6s;
	bottom:70px;
}

#page5 .rs-btn a{color: white;text-decoration: none;font-size: 30px;}

#page5 .rs-page{
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-377px;
	margin-left:-209px;
	width: 398px;
	height: 650px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 0;
	-webkit-transform:scale(0);
}

#page5 .rs-page.active{

	-webkit-transform:scale(1);
	-webkit-transition: all 1s;

}


#page5 .page-mask{
	width: 100%;height: 100%;
	position: absolute;
	top:0px;
	left:0px;
	background-color: rgba(0,0,0,0.7);
	z-index:999;
	display: none;
}

#page5 .page-mask .sharetip{
	position: absolute;
	top:5px;
	right:30px;
	width: 260px;
	height: 427px;
	background-image:url(../images/share_tip.png);
	background-repeat: no-repeat;
	background-position: 0 0 ;
	background-size: auto;
	
}







.page .page-con{
	background-image: url(../images/kmzhc_app1_bg1.jpg); background-repeat: no-repeat;background-size: 100%;z-index:10;
	position: relative;
	width: 100%;
	height: 101%;
	overflow: hidden;
}

.page2_active{z-index:20;-webkit-transform:translate(0px,250px);}

.prepage{
	-webkit-transform:translate(0px,-200px) translateZ(0px) scale(0.8) !important;
	-o-transform:translate(0px,-200px) translateZ(0px) scale(0.8) !important;
	-moz-transform:translate(0px,-200px) translateZ(0px) scale(0.8) !important;
	-ms-transform:translate(0px,-200px) translateZ(0px) scale(0.8) !important;
	-webkit-transition: all 0.3s;
}

.nextpage{
	-webkit-transform:translate(0px,0px) !important;
	-o-transform:translate(0px,0px) !important;
	-moz-transform:translate(0px,0px) !important;
	-ms-transform:translate(0px,0px) !important;
	-webkit-transition: all 0.3s;
}


.goback1{
	-webkit-transform:translate(0px,0px) translateZ(0px) scale(1) !important;
	-o-transform:translate(0px,0px) translateZ(0px) scale(1) !important;
	-moz-transform:translate(0px,0px) translateZ(0px) scale(1) !important;
	-ms-transform:translate(0px,0px) translateZ(0px) scale(1) !important;
	-webkit-transition: all 0.3s;
}



/*
#page_loading .mask{
	width: 100%;
	height: 100%;
	background-image: -webkit-radial-gradient(circle,hsla(0, 0%, 0%, 0.75),hsla(0, 68%, 1%, 1));
  	background-image: radial-gradient(circle,hsla(0, 0%, 0%, 0.75),hsla(0, 68%, 1%, 1));
}
*/


@keyframes huahua {
      0%{ background-position:    0px 0; }
    100%{ background-position: -1079px 0; }
}

@-webkit-keyframes huahua {
      0%{ background-position:    0px 0; }
    100%{ background-position: -1079px 0; }
}


#page_loading .hua{
	width:83px;height: 320px;position: absolute;top:50%;left:50%;margin-left:-42px;margin-top: -160px;background-repeat: no-repeat;
	background-image: url(../images/kmzhc_app1_hua.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	/*
	animation: huahua 2s steps(13) 1;
	-moz-animation: huahua 2s steps(13) 1;
	-webkit-animation: huahua 2s steps(13) 1;
	-o-animation: huahua 2s steps(13) 1;
	*/
}



.pa-arrow{
	width: 90px;
	height: 90px;
	background: black;
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -38px;
	border-radius: 45px;
	opacity: 0.5;
	z-index: 10000;
}



.pa-icon-arrow{
	display: block;
	width: 49px;
	height: 27px;
	background: url(../images/arrow.png?v=2) no-repeat 0 0;
}
.pa-icon-arrow.active{
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-31px;
	margin-left:-25px;

	animation: arror_up 1.8s infinite;
	-moz-animation: arror_up 1.8s infinite;
	-webkit-animation: arror_up 1.8s infinite;
	-o-animation: arror_up 1.8s infinite;
}


.pa-icon-music{
	display: block;
	width: 45px;
	height: 45px;
	background-image: url(../images/music_icon.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.pa-icon-music.off{
	background-position: 0 -45px;
}


@-webkit-keyframes arror_up {
      0%{ -webkit-transform:translate(0px,0px);}
      50%{ -webkit-transform:translate(0px,26px);}
    100%{-webkit-transform:translate(0px,0px);}
}



.huaban1{
	width: 37px;
	height: 31px;
	display: block;
	background: url(../images/huaban1.png) no-repeat 0 0;
}

.huaban2{
	width: 12px;
	height: 17px;
	display: block;
	background: url(../images/huaban2.png) no-repeat 0 0;
}

.yezi1{
	width: 19px;
	height: 20px;
	display: block;
	background: url(../images/yezi1.png) no-repeat 0 0;
}


#page6{
	overflow: hidden;
}

.footer-con{
	width: 400px;
	height: 356px;
	position: absolute;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top:-178px;
}

.footer-con-1{
	position: absolute;
	width: 240px;
	height: 96px;
	top:0px;
	left:-300px;
	background-image:url(../images/footer.png?v=1);
	background-position: -92px 0;
	background-repeat: no-repeat;
}

.footer-con-1.active{
	left:80px;
	-webkit-transition: all 1s;
}

.footer-con-2{
	position: absolute;
	width: 230px;
	height: 80px;
	top:120px;
	left:1000px;
	background-image:url(../images/footer.png?v=1);
	background-position: -88px -120px;
	background-repeat: no-repeat;
}

.footer-con-2.active{
	left:88px;
	-webkit-transition: all 1s;
}

.footer-con-3{
	position: absolute;
	width: 126px;
	height: 83px;
	top:277px;
	left:148px;
	background-image:url(../images/footer.png?v=1);
	background-position: -148px -273px;
	background-repeat: no-repeat;
	opacity: 0;
}

.footer-con-3.active{
	opacity: 1;
	top:237px;
	-webkit-transition: all 1s 0.8s;
}

.music-states{
	display: none;
	color: white;
	line-height: 26px;
	font-size: 14px;
	position: absolute;
	top:40px;
	left:0px;
	width: 45px;
	text-align: right;
	padding-right: 5px;
}

.pa-music-wrap{
	position: absolute;
	right: 0;
	top: 40px;
	width: 132px;
	height: 73px;
	z-index: 100;
	display: none;
}


.pa-music-wrap .pa-icon-music{
	position: absolute;
	bottom: 0;
	left: 50px;
}

.music-play{
	height: 100px;
	width: 44px;
	left: 54px;
	top: -50px;
	position: absolute;
	overflow: hidden;
	z-index: 0;
	display: none;
}



.noOp{opacity: 0 !important;}

#rs_canvas{opacity: 1;
	-webkit-transition:opacity .5s;
	-ms-transition:opacity .5s;
	-moz-transition:opacity .5s;
}

.footer-tip{position: absolute;width: 100%;height:20px;left:0px;bottom:30px;color:#818181;text-align: center;font-size: 18px;opacity: 0.8;}