body{margin:0;padding:0;font-family:"Microsoft YaHei";}
#main{width:100%;height:100%;position:absolute;overflow:hidden;}
#pause{display:none;width:100%;height:100%;position:absolute;background:url('../images/pause.jpg') no-repeat 0% 0%;background-size:100% 200%;}
.loading{z-index:90;width:100%;height:100%;position:absolute;background:url('../images/loading.jpg') no-repeat 100% 100%;background-size:100% 100%;overflow:hidden;}
.loading_pic{width:100%;height:0;top:31.8%;right:0;background:url('../images/loading_line_bg.png');background-size:100% 100%;}
.loading *{position:absolute;}
.load_anime{width:100%;height:100%;}
.load_val{width:100%;height:100%;}
.loading_line{top:27.5%;right:50%;width:5%;height:45%;background:url('../images/loading_line_bg.png');background-size:100% 100%;}
.loading_line div{position:initial;}

#first{overflow:hidden;z-index:90;display:none;width:100%;height:100%;top:0;left:0;position:absolute;background:url('../images/pause.jpg');background-size:200% 100%;}
.ani .title{position:absolute;width:69.375%;height:82.2%;top:8.9%;right:0;background:url('../images/title.png') no-repeat 100% 100%;background-size:100% 100%;animation: fadeInRight 1s .5s ease both;-webkit-animation: fadeInRight 1s .5s ease both;}
.ani .xjp{position:absolute;width:37%;height:39.2%;bottom:0;left:0;background:url('../images/xjp.png') no-repeat 100% 100%;background-size:100% 100%;animation: fadeInLeft 1s 1.5s ease both;-webkit-animation: fadeInLeft 1s 1.5s ease both;}
.ani .start{position:absolute;width:20%;height:27%;top:36%;left:14%;background:url('../images/start.png') no-repeat 100% 100%;background-size:100% 100%;animation: fadeIn 1s 2.5s ease both;-webkit-animation: fadeIn 1s 2.5s ease both;}
.ani .hand{position:absolute;width:12%;height:5%;top:40%;left:2%;background:url('../images/hand.png') no-repeat 100% 100%;opacity:0;background-size:100% 100%;animation: hand 2s 4.5s linear infinite;-webkit-animation: hand 2s 4.5s linear infinite;}
.explain_btn{position:absolute;opacity:0;}
.ani .explain_btn{position:absolute;position:absolute;width:6%;top:45%;left:5%;animation: fadeIn 1s 3.5s ease both;-webkit-animation: fadeIn 1s 3.5s ease both;}
.explain_btn img{position:absolute;width:100%;position:initial;animation: fadeIn .5s 2.5s ease-out both;-webkit-animation: fadeIn .5s 2.5s ease-out both;}
.explain{position:absolute;left:0;width:100%;height:100%;display:none;background:url('../images/explain.png') no-repeat 100% 100%;background-size:100% 100%;}
.know{position:absolute;width:14%;height:28%;top:36%;left:16%;}
.cloud.flow{position:absolute;z-index:100;top:-200%;left:0%;width:300%;height:300%;background:url('../images/cloud.png?1') no-repeat 0% 0%;background-size:100% 100%;animation: flowCloud 3s .5s ease-out both;-webkit-animation: flowCloud 3s .5s ease-out both;}


.game{position:absolute;width:100%;height:100%;z-index:80;}
.game .bg{position:absolute;width:100%;height:300%;background:url('../images/game_bg.jpg?1') no-repeat 100% 100%;background-size:100% 100%;}
.game .bg *{position:absolute;}
.chicken{top:5%;width:10%;height:4%;background:url('../images/chicken.png') no-repeat 100% 100%;background-size:100% 100%;animation: chicken 1s infinite;-webkit-animation: chicken 1s infinite;}
.corn{top:21%;left:12%;width:10%;height:7%;background:url('../images/corn.png') no-repeat 100% 100%;background-size:100% 100%;animation: corn 1s ease-out infinite;-webkit-animation: corn 1s ease-out infinite;}
.wheel1{width:12.8%;height:2.6%;top:24.4%;left:28.2%;background:url('../images/wheel1.png') no-repeat 100% 100%;background-size:100% 100%;animation: wheel 1s linear infinite;-webkit-animation: wheel 1s linear infinite;}
.wheel2{width:12.8%;height:2.6%;top:27.4%;left:28.2%;background:url('../images/wheel1.png') no-repeat 100% 100%;background-size:100% 100%;animation: wheel 1s .5s linear infinite;-webkit-animation: wheel 1s .5s linear infinite;}
.wheel3{width:12.8%;height:2.6%;top:30.4%;left:28.2%;background:url('../images/wheel1.png') no-repeat 100% 100%;background-size:100% 100%;animation: wheel 1s linear infinite;-webkit-animation: wheel 1s linear infinite;}
.train{width:5%;height:80%;top:30%;left:22%;background:url('../images/train.png') no-repeat 0% 0%;background-size:100% 25%;animation: train 10s infinite;-webkit-animation: train 10s  infinite;}
.wheel4{width:32.2%;height:6.6%;top:75.3%;left:21.5%;background:url('../images/wheel2.png') no-repeat 100% 100%;background-size:100% 100%;animation: wheel 2s linear infinite;-webkit-animation: wheel 2s linear infinite;}

.bag{position:absolute;top:0%;width:20%;height:13%;background:url('../images/bag.png') no-repeat 0% 0%;background-size:100% 100%;}
.coin{position:absolute;right:0%;width:12%;height:8%;background:url('../images/c1.png') no-repeat 0% 0%;background-size:100% 100%;}
.score{position:absolute;top:45%;right:5%;width:12%;}
.score img{width:100%;}
.time{position:absolute;padding:5% 0;line-height:0;top:5%;right:5%;width:10%;background:url('../images/clock.png') no-repeat 0% 0%;background-size:100% 100%;}
.time img{width:50%;margin-left:20%;}
.p5.plus{position:absolute;width:6%;height:5%;top:27%;right:6%;background:url('../images/p5.png') no-repeat 0% 0%;background-size:100% 100%;animation: plus 1s ease-out both;-webkit-animation: plus 1s ease-out both;}
.pct{animation: pct .5s ease-out both;-webkit-animation: pct .5s ease-out both;}

.result.over{position:absolute;top:28%;left:5%;width:88.75%;height:43.1%;background:url('../images/result.png') no-repeat 0% 0%;background-size:100% 100%;animation: result .5s ease-out both;-webkit-animation: result .5s ease-out both;}
.buttons{float:left;width:50%;height:100%;z-index:110;}
.btn_share{width:25%;height: 42%;margin: 11% 0 0 42%;}
.btn_replay{width:25%;height: 42%;margin: 4% 0 0 43%;}
.total{position: absolute;top: 45%;left: 52%;width:50%;height:100%;line-height:0;}
.total img{width:15%;}
.share{background:rgba(0,0,0,0.8);width:100%;height:100%;position:absolute;z-index:120;display:none;}
.share img{width:25%;float:right;margin:5%;}
.sc1,.sc2{display: none}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


@-webkit-keyframes fadeIn{0%{opacity:0}50{opacity:0.5}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}50{opacity:0.5}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}50{opacity:0.5}100%{opacity:1}}

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes loading_pic
{
	0%{background-image:url('../images/loading1.png');}
	50%{background-image:url('../images/loading2.png');}
	100%{background-image:url('../images/loading1.png');}
}
@-webkit-keyframes loading_pic /* Safari บอ Chrome */
{
	0%{background-image:url('../images/loading1.png');}
	50%{background-image:url('../images/loading2.png');}
	100%{background-image:url('../images/loading1.png');}
}

@keyframes loading_end
{
	0%{background-position-x:100%;}
	100%{background-position-x:0%;}
}
@-webkit-keyframes loading_end
{
	0%{background-position-x:100%;}
	100%{background-position-x:0%;}
}

@keyframes loading_end_animed
{
	0%{left:0;}
	100%{left:100%;}
}
@-webkit-keyframes loading_end_animed
{
	0%{left:0;}
	100%{left:100%;}
}

@keyframes three1
{
	0%{background-image:url('../images/three1.png');}
	50%{background-image:url('../images/three2.png');}
	100%{background-image:url('../images/three1.png');}
}
@-webkit-keyframes three1
{
	0%{background-image:url('../images/three1.png');}
	50%{background-image:url('../images/three2.png');}
	100%{background-image:url('../images/three1.png');}
}
@keyframes three2
{
	0%{background-image:url('../images/three3.png');}
	50%{background-image:url('../images/three4.png');}
	100%{background-image:url('../images/three3.png');}
}
@-webkit-keyframes three2
{
	0%{background-image:url('../images/three3.png');}
	50%{background-image:url('../images/three4.png');}
	100%{background-image:url('../images/three3.png');}
}
@keyframes transform1
{
	0%{transform:rotate(-90deg);opacity:0;}
	10%{transform:rotate(-90deg);opacity:1;}
	100%{transform:rotate(0deg);}
}
@-webkit-keyframes transform1
{
	0%{transform:rotate(-90deg);opacity:0;}
	10%{transform:rotate(-90deg);opacity:1;}
	100%{transform:rotate(0deg);}
}
@keyframes bag1
{
	0%{bottom:-36%;}
	90%{bottom:0%;height:37%;}
	100%{bottom:0%;height:36%;}
}
@-webkit-keyframes bag1
{
	0%{bottom:-36%;}
	90%{bottom:0%;height:37%;}
	100%{bottom:0%;height:36%;}
}

@keyframes hand
{
	0%{opacity:0;}
	20%{opacity:1;}
	40%{opacity:0;}
	60%{opacity:1;}
	100%{opacity:1;}
}
@-webkit-keyframes hand
{
	0%{opacity:0;}
	20%{opacity:1;}
	40%{opacity:0;}
	60%{opacity:1;}
	100%{opacity:1;}
}

@keyframes flowCloud{
	0%{opacity:0;top:0%;left:-200%;}
	5%{opacity:1;top:0%;left:-200%;}
	45%{opacity:1;top:-70%;left:-100%;}
	55%{opacity:1;top:-70%;left:-100%;}
	95%{opacity:1;top:-200%;left:0%;}
	100%{opacity:0;top:-200%;left:0%;display:none;}
}
@-webkit-keyframes flowCloud{
	0%{opacity:0;top:0%;left:-200%;}
	5%{opacity:1;top:0%;left:-200%;}
	45%{opacity:1;top:-70%;left:-100%;}
	55%{opacity:1;top:-70%;left:-100%;}
	95%{opacity:1;top:-200%;left:0%;}
	100%{opacity:0;top:-200%;left:0%;display:none;}
}

@keyframes chicken{
	0%{margin-left:12%;}
	50%{margin-left:13%;}
	100%{margin-left:12%;}
}
@-webkit-keyframes chicken{
	0%{margin-left:12%;}
	50%{margin-left:13%;}
	100%{margin-left:12%;}
}
@keyframes corn{
	0%{width:10%;}
	50%{width:11%;}
	100%{width:10%;}
}
@-webkit-keyframes corn{
	0%{width:10%;}
	50%{width:11%;}
	100%{width:10%;}
}
@keyframes result{
	0%{right:-90%;}
	80%{right:8%;}
	100%{right:5%;}
}
@-webkit-keyframes result{
	0%{right:-90%;}
	80%{right:8%;}
	100%{right:5%;}
}
@keyframes wheel{
	0%{-webkit-transform: rotate(0deg);}
	100%{-webkit-transform: rotate(90deg);}
}
@-webkit-keyframes wheel{
	0%{-webkit-transform: rotate(0deg);}
	100%{-webkit-transform: rotate(90deg);}
}
@keyframes train{
	0%{background-position-y:0%;}
	50%{background-position-y:100%;}
	100%{background-position-y:0%;}
}
@-webkit-keyframes train{
	0%{background-position-y:0%;}
	50%{background-position-y:100%;}
	100%{background-position-y:0%;}
}
@keyframes plus
{
	0%{opacity:1;}
	60%{opacity:1;}
	100%{opacity:0;}
}
@-webkit-keyframes plus
{
	0%{opacity:1;}
	60%{opacity:1;}
	100%{opacity:0;}
}
@keyframes pct
{
	0%{opacity:1;right:72%;}
	100%{opacity:0;right:60%;}
}
@-webkit-keyframes pct
{
	0%{opacity:1;right:72%;}
	100%{opacity:0;right:60%;}
}