*{margin: 0;padding: 0;}
html,body{width:750px;height: 100%;overflow: hidden;background: url(../img/bg.jpg) top center;}

audio{display: none;}

img{vertical-align: bottom;}

.page{width: 100%;height: 100%;overflow: hidden;position: absolute;top: 100%;left: 0;z-index: 99;display: none;}

.page.cur{display: block;z-index: 2;}

.page.move{display: block;z-index: 4;}



@-webkit-keyframes pageAniUp {
	0% {
		-webkit-transform: translateY(100%);
	}

	100% {
		-webkit-transform: translateY(0%);
	}
}

.pageAniUp {
	-webkit-animation: pageAniUp 0.5s forwards ease-in-out;
}



@-webkit-keyframes pageAniUp2A {
	0% {
		-webkit-transform: translateY(0%);
	}

	100% {
		-webkit-transform: translateY(-100%);
	}
}

.pageAniUp2 {
	-webkit-animation: pageAniUp2A 0.5s forwards ease-in-out;
}

@-webkit-keyframes pageAniDown {
	0% {
		-webkit-transform: translateY(0%);
	}

	100% {
		-webkit-transform: translateY(100%);
	}
}

.pageAniDown {
	-webkit-animation: pageAniDown 0.5s forwards ease-in-out;
}



@-webkit-keyframes pageAniDown2A {
	0% {
		-webkit-transform: translateY(-100%);
	}

	100% {
		-webkit-transform: translateY(0%);
	}
}

.pageAniDown2 {
	-webkit-animation: pageAniDown2A 0.5s forwards ease-in-out;
}


@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.fadeOut {
	opacity: 1;
	-webkit-animation: fadeOut 0.5s forwards ease-in-out;
}

@-webkit-keyframes fade2Out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.fade2Out {
	opacity: 1;
	-webkit-animation: fade2Out 1.5s forwards ease-in-out;
}

@-webkit-keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.fadeInOut {
	opacity: 0;
	-webkit-animation: fadeInOut 3.5s forwards ease-in-out;
}






@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100%,0px,0);
	}

	100% {
		-webkit-transform: translate3d(0%,0px,0);
	}
}

.slideInRight {
	-webkit-transform: translate3d(100%,0px,0);
	-webkit-animation: slideInRight 0.5s forwards ease-in-out;
}


@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fadeIn {
	opacity: 0;
	-webkit-animation: fadeIn 0.5s forwards ease-in-out;
}

@-webkit-keyframes fadeIn2 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fadeIn2 {
	opacity: 0;
	-webkit-animation: fadeIn2 1.5s forwards ease-in-out;
}

@-webkit-keyframes fadeInGif {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	95% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.fadeInGif {
	opacity: 0;
	-webkit-animation: fadeInGif 2s forwards linear;
}

@-webkit-keyframes fadeInAtt {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.fadeInAtt {
	opacity: 0;
	-webkit-animation: fadeInAtt 1s forwards linear;
}







@-webkit-keyframes fade2In {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fade2In {
	opacity: 0;
	-webkit-animation: fade2In 1.5s forwards ease-in-out;
}


@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,20px,0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,0px,0);
	}
}

.fadeInUp {
	opacity: 0;
	-webkit-animation: fadeInUp 0.5s forwards ease-in-out;
}


@-webkit-keyframes p25Ani {
	0% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	40% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	70%{
		-webkit-transform: translate3d(-15px,0px,0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
}

.p25Ani {
	opacity: 1;
	-webkit-animation: p25Ani 4s 1s forwards linear;
}


@-webkit-keyframes p26Ani {
	0% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	40% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	70%{
		-webkit-transform: translate3d(-15px,0px,0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
}

.p26Ani {
	opacity: 1;
	-webkit-animation: p26Ani 4s 1.3s forwards linear;
}


@-webkit-keyframes p27Ani {
	0% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	40% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
	70%{
		-webkit-transform: translate3d(-15px,0px,0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(15px,0px,0);
		opacity: 0;
	}
}

.p27Ani {
	opacity: 1;
	-webkit-animation: p27Ani 4s 1.5s forwards linear;
}


@-webkit-keyframes p24Ani {
	0% {
		-webkit-transform: translate3d(100%,0px,0);
	}
	100% {
		-webkit-transform: translate3d(-150%,0px,0);
	}
}

.p24Ani {
	-webkit-transform: translate3d(100%,0px,0);
	-webkit-animation: p24Ani 2s 0.5s forwards linear;
}

@-webkit-keyframes p34Ani {
	0% {
		-webkit-transform: translate3d(-150%,0px,0) scale(2);
	}
	100% {
		-webkit-transform: translate3d(100%,0px,0) scale(0.3);
	}
}

.p34Ani {
	-webkit-transform: translate3d(-150%,0px,0) scale(2);
	-webkit-animation: p34Ani 2.5s 0.5s forwards linear;
}



.page img{position: absolute;top: 0;left: 0;z-index: 9;}



@-webkit-keyframes scaleAni {
	0% {
		-webkit-transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.1);
	}
	100% {
		-webkit-transform: scale(1);
	}
}

.scaleAni {
	-webkit-animation: scaleAni 1s infinite ease-in-out;
}



.app-loadingBg {
  position:fixed;
  top:0%;
  left:50%;
  margin-left: -375px;
  width: 750px;
  height: 100%;
  background: #fff;
  display:block;
  opacity:1;
  z-index:99998
}

.app-loadingBg img{position: absolute;top: 320px;left: 275px;}

.perNum{width: 100%;position: absolute;color: #000;top: 540px;text-align: center;font-size: 32px;}

.arrD{ width:71px;height: 5px;background: url(../img/arrD.png);position: absolute;bottom: 120px;left: 50%;margin-left: -35px;}

.array{
  position:absolute;z-index:999; 
  -webkit-animation-name:'start';/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 1.5s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/opacity: 0;
     -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
}

@-webkit-keyframes start {
  0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
  60% {opacity: 1;-webkit-transform: translate(0,0);}
  100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}



#muOnOff{width: 139px;height: 123px;position: fixed;top: 20px;right:0px;z-index: 999;-webkit-transform:scale(1);}

#bgm{position: fixed;bottom: 0;right: 0;display: none;}



.delay05{
	-webkit-animation-delay: 0.5s;
}
.delay06{
	-webkit-animation-delay: 0.6s;
}
.delay07{
	-webkit-animation-delay: 0.7s;
}
.delay08{
	-webkit-animation-delay: 0.8s;
}
.delay09{
	-webkit-animation-delay: 0.9s;
}

.delay10{
	-webkit-animation-delay: 1s;
}

.delay11{
	-webkit-animation-delay: 1.1s;
}
.delay12{
	-webkit-animation-delay: 1.2s;
}

.delay13{
	-webkit-animation-delay: 1.3s;
}

.delay14{
	-webkit-animation-delay: 1.4s;
}


.delay15{
	-webkit-animation-delay: 1.5s;
}

.delay20{
	-webkit-animation-delay: 2s;
}

.delay25{
	-webkit-animation-delay: 2.5s;
}
.delay30{
	-webkit-animation-delay: 3s;
}
.delay35{
	-webkit-animation-delay: 3.5s;
}

.delay40{
	-webkit-animation-delay: 4s;
}

.delay45{
	-webkit-animation-delay: 4.5s;
}

.delay50{
	-webkit-animation-delay: 5s;
}

.delay55{
	-webkit-animation-delay: 5.5s;
}

.delay60{
	-webkit-animation-delay: 6s;
}

.delay65{
	-webkit-animation-delay: 6.5s;
}


.delay70{
	-webkit-animation-delay: 7s;
}


.delay75{
	-webkit-animation-delay: 7.5s;
}

.delay80{
	-webkit-animation-delay: 8s;
}

.delay85{
	-webkit-animation-delay: 8.5s;
}



.page img.imgbd{width: 100%;height: 66px;position: absolute;bottom: 0;left: 0;top: auto;}