html, body, .wrap, .page {margin: 0; color: #000; padding: 0;width: 100%; height: 100%; overflow: hidden; font-family: arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑"; font-weight: normal;}
.wrap {background-color: #fff; }
.hide {display: none;}

.wrap {width: 100%; height: 100%; position: relative;}

.welcome-page {position: absolute; z-index: 20; color: #fff; text-align: center; width: 100%; margin-top: 100px;}
.welcome-page p {font-size: 24px; line-height: 1.5;}
.welcome-page p span {color: #FF96A2;}
#start-game {background-color: orange; padding: 10px 7px; color: #000; width: 150px; margin: 30px auto; border-radius: 4px; font-size: 20px;}

/*game*/
.game-wrap {background: url(../img/bgimg.jpg) no-repeat top left; background-size: 100% 100%;}
.game-wrap ul {position: absolute; bottom: 0; width: 100%; height: 100%;}
.game-wrap ul li {display: inline; position: absolute; bottom: 2%; left: 0; width: 70px;}
.game-wrap ul li img {width: 100%;}
#app1 {left: 5%;}
#app2 {left: 28%;}
#app3 {left: 51.5%;}
#app4 {left: 75%;}
.statistics {text-align: center; font-size: 20px; margin-top: 30px; line-height: 1.5;}
.statistics span {color: firebrick; margin: 0 7px;}

/*result*/
.result {position: absolute; top: 0; left: 0; background-color: #fff; text-align: center;}
.result > p {margin-top: 100px; font-size: 25px; line-height: 1.5;}
.result > p span { color: firebrick; margin: 0 7px;} 
.result > span { display: inline-block; padding: 10px 15px; color: #000; border-radius: 4px; font-size: 20px; margin-top: 50px; margin-left: 10px;}
#share {background-color: orange; color: #000;}
#more {background-color: #6E7FA5; color: #fff;}
#replay {width: 150px; margin: 30px auto; text-decoration: underline; }

/*@media screen and (min-width: 400px) and (max-width: 600px){
.story {top: -40px;}
}
@media screen and (min-width: 330px) and (max-width: 400px) {
.story {top: -85px;}
}*/

.mask {width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 15; position: absolute; top: 0; left: 0;}
.share-page img {display: block; position: absolute; right: -20px; top: 0;}

.shake {animation: shake .6s ease infinite;}
.shake2 {animation: shake2 .4s ease infinite;}
/*.run {animation: run 2.5s ease-in infinite;}*/
/*.aimPoint {animation: aimPoint 3s ease; animation-fill-mode: forwards}*/

/*shake*/
@keyframes shake {
	0%,100% {transform: rotate(0deg);}
	33% {transform: rotate(20deg);}
	66% {transform: rotate(-20deg);}
}

@keyframes shake2 {
	0%,100% {transform: rotate(0deg);}
	33% {transform: rotate(-15deg);}
	66% {transform: rotate(15deg);}
}

/*run*/
@keyframes run {
	0% {transform: translateY(0px);}
	100% {transform: translateY(-450px); }
}