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:200% 100%;overflow:hidden;}
.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?1') no-repeat 100% 100%;background-size:100%;}
.loading_line div{position:initial;}
.loading_line_l{width:100%;height:5%;background:url('../images/loading_line_l.png?1') no-repeat 100% 100%;background-size:100%;}
.loading_line_c{width:100%;height:0%;background:url('../images/loading_line_c.png?1') repeat 100% 100%;background-size:100%;}

.loading_line_r{width:100%;height:5%;background:url('../images/loading_line_r.png?1') no-repeat 100% 0%;background-size:100%;}

.loading_pic{width:20%;height:12%;top:44%;right:20%;background:url('../images/loading1.png?1') no-repeat 100% 100%;background-size:100%;
		animation: loading_pic 1s infinite;
		-webkit-animation: loading_pic 1s infinite;
}
.loading.end{animation: loading_end 1s ease-in both;-webkit-animation: loading_end 1s ease-in both;}
.load_anime.end{animation: loading_end_animed 1s ease-in both;-webkit-animation: loading_end_animed 1s  ease-in both;}


.end .p0_1{width:30%;height:22%;animation: fadeInLeft .5s 1s ease-in both;-webkit-animation: fadeInLeft .5s 1s ease-in both;}
.end .three1{width:100%;height:100%;background:url('../images/three1.png?1') no-repeat 100% 100%;background-size:100% 100%;animation: three1 3s infinite;-webkit-animation: three1 3s infinite;}
.end .p0_2{width:90%;height:16%;left:-15%;animation: transform1 .5s 1s ease-in both;-webkit-animation: transform1 .5s 1s ease-in both;}
.end .three2{width:100%;height:100%;background:url('../images/three3.png?1') no-repeat 100% 100%;background-size:100% 100%;animation: three2 3.5s infinite;-webkit-animation: three2 3.5s infinite;}
.end .frame{width:100%;height:100%;background:url('../images/frame.png?1') no-repeat 100% 100%;background-size:100% 100%;}
.end .p0_3{width:56%;height:86%;top:4%;right:6%;background:url('../images/title.png?1') no-repeat 100% 100%;background-size:100% 100%;animation: fadeInRight .5s 2s ease-out both;-webkit-animation: fadeInRight .5s 2s ease-out both;}
.end .p0_4{width:62%;height:36%;bottom:0;background:url('../images/bag1.png?1') no-repeat 100% 100%;background-size:100% 100%;animation: bag1 .5s 1s ease-out both;-webkit-animation: bag1 .5s 1s ease-out both;}
.end .start{width:15%;height:32%;top:34%;left:16%;background:url('../images/start.png?1') no-repeat 100% 100%;background-size:100% 100%;animation: fadeIn .5s 2.5s ease-out both;-webkit-animation: fadeIn .5s 2.5s ease-out both;}
.end .hand{width:12%;height:5%;top:36%;left:2%;background:url('../images/hand.png?1') no-repeat 100% 100%;opacity:0;background-size:100% 100%;animation: hand 2s 4s linear infinite;-webkit-animation: hand 2s 4s linear infinite;}
.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;}
.explain_btn{opacity:0;}
.end .explain_btn{position:absolute;width:6%;top:44%;left:5%;animation: fadeIn .5s 2.8s ease-out both;-webkit-animation: fadeIn .5s 2.8s ease-out both;}
.explain_btn img{width:100%;position:initial;animation: fadeIn .5s 2.5s ease-out both;-webkit-animation: fadeIn .5s 2.5s ease-out both;}
.explain{width:100%;height:100%;display:none;background:url('../images/explain.png?1') no-repeat 100% 100%;background-size:100% 100%;}
.know{width:14%;height:28%;top:36%;left:16%;}


.game{position:absolute;width:100%;height:100%;z-index:80;}
.game .bg{position:absolute;width:100%;height:300%;background:url('../images/game_bg.jpg') no-repeat 100% 100%;background-size:100% 100%;}
.game .bg *{position:absolute;}
.chicken{top:5%;width:10%;height:4%;background:url('../images/chicken.png?1') 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?1') 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?1') 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?1') 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?1') 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?1') 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?1') 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?1') no-repeat 0% 0%;background-size:100% 100%;}
.coin{position:absolute;right:0%;width:12%;height:8%;background:url('../images/c1.png?1') 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?1') 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?1') 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:20%;right:-90%;width:90%;height:60%;background:url('../images/result.png?1') 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:36%;margin:28% 0 0 62%;}
.btn_replay{width:25%;height:36%;margin:6% 0 0 62%;}
.total{float:left;width:50%;height:100%;line-height:0;}
.total img{margin-left:30%;width:15%;}
.share{background:rgba(0,0,0,0.8);width:100%;height:100%;position:absolute;z-index:120;display:none;}
.share img{width:20%;float:right;margin:5%;}

@-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?1');}
	50%{background-image:url('../images/loading2.png?1');}
	100%{background-image:url('../images/loading1.png?1');}
}
@-webkit-keyframes loading_pic /* Safari บอ Chrome */
{
	0%{background-image:url('../images/loading1.png?1');}
	50%{background-image:url('../images/loading2.png?1');}
	100%{background-image:url('../images/loading1.png?1');}
}

@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?1');}
	50%{background-image:url('../images/three2.png?1');}
	100%{background-image:url('../images/three1.png?1');}
}
@-webkit-keyframes three1
{
	0%{background-image:url('../images/three1.png?1');}
	50%{background-image:url('../images/three2.png?1');}
	100%{background-image:url('../images/three1.png?1');}
}
@keyframes three2
{
	0%{background-image:url('../images/three3.png?1');}
	50%{background-image:url('../images/three4.png?1');}
	100%{background-image:url('../images/three3.png?1');}
}
@-webkit-keyframes three2
{
	0%{background-image:url('../images/three3.png?1');}
	50%{background-image:url('../images/three4.png?1');}
	100%{background-image:url('../images/three3.png?1');}
}
@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%;}
}