body{margin:0;padding:0;font-family:"Microsoft YaHei";}

.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.music_blk{z-index:99999999999;position:absolute;left:10px;bottom:10px;}
.music{display:block;width:23px;height:23px;background:url(http://img.cyol.com/qingming/images/music.png) no-repeat;background-size:23px 23px;}
.music_on{-webkit-animation:rotate 1.2s linear infinite;animation:rotate 1.2s linear infinite;}

.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg') 0 0;background-size:100% 100%;}
.suggest{position:fixed;bottom:0;width:100%;text-align:center;color:white;font-size:12px;}
.load_val{width:100%;}
.loading_line{width:60%;height:8px;position:absolute;left:23%;top:46%;background:#8cd5fd;border-radius:5px;}
.loading_line_blank{width:0%;height:100%;background: #00558e;border-radius:5px;}
.loading_pic{width:128px;height:95px;margin:40% auto 10% auto;background:url('../images/loading.jpg');animation: loading_pic .6s infinite;
		-moz-animation: loading_pic .6s infinite;	/* Firefox */
		-webkit-animation: loading_pic .6s infinite;	/* Safari บอ Chrome */
		-o-animation: loading_pic .6s infinite;}
.coypright{position:fixed;bottom:8%;width:100%;text-align:center;color:#00558e;font-size:16px;}

section{position:absolute;width:100%;height:100%;display:none;background-size:100% 100%;}
section div{background:no-repeat 0 0;background-size:100% 100%;position:absolute;opacity:1;}
.layer{position:absolute;width:100%;height:100%;background-size:100% 100%;}
.action{display:block;}
.key{margin:0;padding:0;position:fixed;bottom:0;left:9%;width:84%;height:20%;}
.key li{float:left;list-style:none;width:12.5%;height:50%;}
.enter{width:25% !important;}
.paper{background-position-y:300px;background-repeat:no-repeat;}
.countdown{color:#493914;position: absolute;font-size: 30px;top: 3%;left: 18%;}

.words{width:100%;text-align:center;margin-top:75%;display:none;}
.words img{width:12%;}
#q0{background-image:url('../images/p0.jpg');}
#q0 .p1{background-image:url('../images/p0.a.png');width:52%;height:48%;top:27%;left:24%;}
#q0 .p2{background-image:url('../images/icon.jpg');width:14.5%;height:8.9%;top:9.2%;left:24%;}
#q0 .p3{background-image:url('../images/p0.3.jpg');width:46.6%;height:9%;top:84%;left:26.8%;}
.e,.r{width:72%;height:10.7%;}
.e img,.r img{height:100%;display:none;}

.sp1{top:66%;left:4%;}
.sp2{top:76.7%;left:4%;}
.sp3{top:87.4%;left:4%;}
.next{top:87%;left:24%;width:52%;height:9%;}

#q0.action .p1{animation: fadeInDown 1s ease-in both;-moz-animation: fadeInDown 1s ease-in both;-webkit-animation: fadeInDown 1s ease-in both;-o-animation: fadeInDown 1s ease-in both;}
#q0.action .p2{animation: fadeInRight .6s .6s ease-in both;-moz-animation: fadeInRight .6s .6s ease-in both;-webkit-animation: fadeInRight .6s .6s ease-in both;-o-animation: fadeInRight .6s .6s ease-in both;}
#q0.action .p3{animation: flash 1s 1.5s ease-in both;-moz-animation: flash 1s 1.5s ease-in both;-webkit-animation: flash 1s 1.5s ease-in both;-o-animation: flash 1s 1.5s ease-in both;}

#q0.action .p1.ear{animation: ear 1s ease-in both;-moz-animation: ear 1s ease-in both;-webkit-animation: ear 1s ease-in both;-o-animation: ear 1s ease-in both;}

.replay{width:45%;height:8%;top:78%;left:27%;}
.share{width:45%;height:8%;top:88%;left:27%;}
#share img {width:40%;float:right;}
.link{height: 5%;width: 32%;top: 65%;left: 46%;}

#share{position:absolute;width:100%;height:100%;display:none;background:rgba(0,0,0,0.9);}



@keyframes ear
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-moz-keyframes ear /* Firefox */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-webkit-keyframes ear /* Safari บอ Chrome */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}

@-o-keyframes ear /* Opera */
{
	0%{background-image:url('../images/p0.a.png');}
	50%{background-image:url('../images/p0.b.png');}
	100%{background-image:url('../images/p0.a.png');}
}


@-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}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}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}}

@-webkit-keyframes coin{
	0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	20%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	25%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	40%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	50%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	90%{background-image:url('../images/p0.b.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	100%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes coin{
	0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	20%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	25%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	40%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	50%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	90%{background-image:url('../images/p0.b.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	100%{background-image:url('../images/p0.a.png');opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}

@-webkit-keyframes flash /* Safari บอ Chrome */
{
	0%{opacity:0;}
	20%{opacity:1;}
	40%{opacity:0;}
	60%{opacity:1;}
	80%{opacity:0;}
	100%{opacity:1;}
}