*{margin: 0;padding: 0;}
html,body{width:750px;height: 100%;overflow: hidden;background: #fff;}

audio{width: 0; height: 0;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;}

@font-face {
font-family: hyjh;
src: url(/css/font/hyjhj.eot);
src: url(/css/font/hyjhj.eot?) format("embedded-opentype"), url(/css/font/hyjhj.woff) format("woff"), url(/css/font/hyjhj.ttf) format("truetype");
	
}

@font-face {
font-family: TrimRegular;
src: url(/css/font/Trim-Regular.eot);
src: url(/css/font/Trim-Regular.eot?) format("embedded-opentype"), url(/css/font/Trim-Regular.woff) format("woff"), url(/css/font/Trim-Regular.ttf) format("truetype");
font-style: normal;
font-weight: 400;
}

a{display: block;text-decoration: none;}

body{font-family:"TrimRegular","hyjh";}

@-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 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 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 moveP31 {
	0% {
		-webkit-transform: translate3d(110px,0px,0);
	}

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

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

@-webkit-keyframes movePt1 {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0px,300px,0);
	}

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

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


@-webkit-keyframes moveP1111 {
	0% {
		  -webkit-transform: translate3d(0px,0px,0) scale(1);
	}

	100% {
		  -webkit-transform: translate3d(-66px,140px,0) scale(0.8);
	}
}

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





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

.tz1{width: 239px;height: 245px;position: absolute;top: 100px;z-index: 999;left: 390px;}



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

	100% {
		-webkit-transform: translate3d(-341px,130px,1px);
	}
}

.tz1Ani {
	-webkit-animation: tz1Ani 1s forwards ease-in-out;
}

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

	100% {
		opacity: 1;
	}
}

.start5Ani{
	opacity: 0;z-index: 99;
	-webkit-animation: start5Ani 0.5s forwards ease-in-out;
}

@-webkit-keyframes s1Ani {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


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

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

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




.page img.s1Ani{width: 253px;height: 432px;position: absolute;right: -19px;top: 423px;left: auto;
	-webkit-animation: s1Ani 1.5s infinite ease-in-out;
	-webkit-animation-delay: 2.5s;
	opacity: 0;
}

@-webkit-keyframes s2Ani {
	0% {
		-webkit-transform: translate3d(0,0px,0);
	}
	25% {
		-webkit-transform: translate3d(0,5px,0);
	}
	50% {
		-webkit-transform: translate3d(0,0px,0);
	}
	75% {
		-webkit-transform: translate3d(0,-5px,0);
	}
	100% {
		-webkit-transform: translate3d(0,0px,0);
	}
}

.page img.s2Ani{
	-webkit-animation: s2Ani 1.5s infinite ease-in-out;
}

.tz1 .tip,.tz2 .tip{width: 88px;height: 85px;position: absolute;top: 200px;left: 50%;margin-left: -42px;}
.tz2{width: 239px;height: 245px;position: absolute;top: 230px;z-index: 99;left: 50px;}
.tz3{width: 100%;height: 533px;bottom: 0;position: absolute;left: 0;z-index: 9;
-webkit-transform:translate3d(0px,533px,0px);
}


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

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

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

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

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

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


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

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

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


@-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;
}
.scaleAni02{-webkit-animation: scaleAni 0.5s 0s linear forwards normal;}

#p3Btn{position: absolute;z-index: 99;left: 477px;top: 373px;}

.p7{position: absolute;z-index: 999;right: 0px;top: 255px;display: block;width: 465px;height: 816px;}

#p7Plus{width: 88px;height: 85px;position: absolute;z-index: 99;left: 68px;top: 567px;}
#p7Ple{width: 88px;height: 85px;position: absolute;z-index: 99;left: 400px;top: 527px;}


#p7F{position: absolute;z-index: 9;top: 350px;left: 0;opacity: 0;}

.box{
			position: absolute;
			left:0;
			top:0;
			bottom:0;
			right: 0;
			background:url("../img/b2.jpg") no-repeat;
			background-size: 100% 100%;
			backface-visibility: hidden;
			overflow: hidden;
		}
		#cas{
			width: 100%;
			height: 100%;
			opacity: 1;
			-webkit-transition:opacity .5s;
			-ms-transition:opacity .5s;
			-moz-transition:opacity .5s;
		}
		
.noOp{
			opacity: 0 !important;
		}

.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: 420px;left: 300px;}

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

.arrD{width: 40px;height: 25px;background: url(../img/arrd.png);position: absolute;bottom: 40px;left: 50%;margin-left: -20px;}
.arrS{width: 40px;height: 25px;background: url(../img/arrs.png);position: absolute;bottom: 40px;left: 50%;margin-left: -20px;}
.btnStart{ display: block; width: 201px; height: 196px;position: absolute;top: 332px;left: 122px; z-index: 10;}



.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);}
}

@-webkit-keyframes p02Ani{ 
	0%{-webkit-transform:scale(1.2) translateX(-10px) translateY(-10px);} 
	70%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;}
	85%{-webkit-transform:scale(1.02) translateX(-1px) translateY(-1px); opacity: 1;} 
	100%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;}
}

@-webkit-keyframes p03Ani{ 
	0%{-webkit-transform:scale(1) translateX(0px) translateY(0px);} 
	30%{-webkit-transform:scale(1.2) translateX(-10px) translateY(-10px); opacity: 1;}
	60%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;} 
	90%{-webkit-transform:scale(1.1) translateX(-5px) translateY(-5px); opacity: 1;} 
	100%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;}
}
@-webkit-keyframes p04Ani{ 
	0%{left:-264px;} 
	100%{left:-2020px;}
}
@-webkit-keyframes p05Ani{ 
	0%{-webkit-transform:scale(0.9) translateX(5px) translateY(5px);} 
	33%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;}
	66%{-webkit-transform:scale(1.2) translateX(-10px) translateY(-10px);} 
	100%{-webkit-transform:scale(1) translateX(0px) translateY(0px); opacity: 1;} 
}
#page10 a{z-index: 9999;}
.showPopAn{-webkit-animation:p02Ani 0.5s linear forwards normal; opacity: 0;}
.showFist{-webkit-animation:p03Ani 1s linear forwards normal; opacity: 0;}

#muOnOff{width: 37px;height: 37px;position: fixed;top: 40px;right: 50px;z-index: 999;-webkit-transform:scale(1.5);}

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


.picList{ position: absolute; top: 0; left: -264px;}
.picListAni{ -webkit-animation:p04Ani 20s 0.5s linear forwards normal;}
.popPer{ position: absolute; z-index: 10; opacity: 0;}

.popPer01 {left: 341px; top: 849px; width: 184px; height: 183px; background: url(../img/per01.png);}
.popPer02 { left: 707px; top: 564px; width: 115px; height: 116px; background: url(../img/per02.png);}
.popPer03 { left: 1208px; top: 965px; width: 115px; height: 116px; background: url(../img/per03.png);}
.popPer04 { left: 1415px; top: 561px; width: 184px; height: 183px; background: url(../img/per04.png);}
.popPer05 { left: 1872px; top: 805px; width: 115px; height: 116px; background: url(../img/per05.png);}
.popPer06 { left: 1881px; top: 989px; width: 264px; height: 266px; background: url(../img/per06.png);}
.popPerShow{ -webkit-animation:p05Ani 2s linear forwards normal;}

.delay05{-webkit-animation-delay: 0.5s;}
.delay07{-webkit-animation-delay: 0.7s;}
.delay10{-webkit-animation-delay: 1s;}
.delay12{-webkit-animation-delay: 1.2s;}

.delay15{-webkit-animation-delay: 1.5s;}
.delay17{-webkit-animation-delay: 1.7s;}
.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;}
.delay60{-webkit-animation-delay: 6s;}
.delay70{-webkit-animation-delay: 7s;}
.delay01{-webkit-animation-delay: 12s;}


.btn{ display: block; position: absolute;}

/*点击按钮*/
.touchCon{ width: 470px; height: 273px; position: absolute;/* top: 889px;*/ top:435px; left: 137px;}
.btnTouch{ width: 134px; height: 132px; font-size: 28px; font-weight: bold; text-decoration: none; text-indent: -12px; line-height: 120px; text-align: center; color: #fff; background: url(../img/icoS01.png);}
.btnTouchB{ background: url(../img/icoS02.png);}
.btnTouchC{ background: url(../img/icoS03.png);}
.btnTouch01 {left: 0; top: 20px;}
.btnTouch02 {left: 168px;top: 0;}
.btnTouch03 { left: 336px;top: 20px;}
.btnTouch04 {left: 70px;top: 142px;}
.btnTouch05 {left: 230px;top: 142px;}

.pop{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; background: #fff; z-index: 100; display: none;}
.pop .btnClose{ width: 40px; height: 40px; background: url(../img/btnClose.png); position: absolute; top: 20px; right: 20px;}
.lostPop .btnRestart{ width: 201px; height: 196px; top: 284px; left: 50px; background: url(../img/btnReset.png); display: none;}
.lostPop .p_tit{ width: 550px; height: 46px; position: absolute; top: 84px; left: 45px; background: url(../img/p_tit.png); opacity: 0;}
.lostPop .p_result {position: absolute;left: 41px;top: 153px; color:#2d2d2d; font-size: 30px; line-height: 44px; opacity: 0;}

.pop img{ position: absolute; top: 0; left: 0;}

.pop .guessTxt{ width: 254px; height: 249px; position: absolute; left: 355px;top: 175px; font-size: 64px; line-height: 250px; text-align: center; color: #65b1b1; background: url(../img/icoB01.png);}
.guessTime{ position: absolute; width: 124px; height: 121px; top: 120px; left: 610px; font-size: 70px; line-height: 126px; color: #fff; text-indent: 38px; font-style: italic; background: url(../img/guessTime.png);}
.gameNum{ position: absolute; width: 60px; top: 71px; left: 475px; font-size: 48px; color:#2d2d2d; font-family: Tahoma, Geneva, sans-serif; font-style:italic;}
.countTime,.countTimeCover{ width: 266px; height: 24px; position: absolute; top: 47px; left: 360px; background: url(../img/countTime.png);}
.countTimeCover{ top: 0; left: 0; background: url(../img/countTimeCover.png); width: 30%;}
.countTime,.guessTime{ display: none;}

@-webkit-keyframes ani02 { 
	0% { -webkit-transform:scale(0.9);} 
	100% { -webkit-transform:scale(1);}
}
.showBtn{-webkit-animation:ani02 1s ease-in 0s infinite alternate;}