body{margin:0;padding:0;font-family:"Microsoft YaHei";background:#c4c2c3;}
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;}

.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.lqsaa.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/p1.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:40%;height:8px;position:absolute;left:30%;top:46%;background:#56faff;border-radius:5px;}
.loading_line_blank{width:0%;height:100%;background: #00165c;border-radius:5px;}

.coypright{position:fixed;bottom:8%;width:100%;text-align:center;color:#00558e;font-size:16px;}

.content,.f{position:absolute;width:100%;height:100%;}
.action{display:block;}

#s0{background: url("../images/p1.jpg") no-repeat 0 0;background-size:100% 100%;}
#s1{background: no-repeat 0 0;background-size:100% 100%;}
#s2{background: url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}

#s0 .p1{background: url("../images/p1.1.png") no-repeat 0 0;background-size:100% 100%;}
#s0 .p2{background: url("../images/p1.2.png") no-repeat 0 0;background-size:100% 100%;}
#s0 .p3{background: url("../images/p1.3.png") no-repeat 0 0;background-size:100% 100%;}
#s0 .p41{background: url("../images/1.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}
#s0 .p42{background: url("../images/2.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}
#s0 .p43{background: url("../images/3.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}
#s0 .p5{background: url("../images/p1.5.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}
#s0 .p6{background: url("../images/p1.6.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}
#s0 .p7{width:10%;height:8%;top:28%;right:14%;background: url("../images/p1.7.png") no-repeat 0 0;background-size:100% 100%;opacity:0;}


#s1 .p5{width:13%;height:10%;bottom:1%;right:26%;background: url("../images/p1.7.png") no-repeat 0 0;background-size:100% 100%;}
#s1 .p6{background: url("../images/p2.6.png") no-repeat 0 0;background-size:100% 100%;}
#s1 .p7{width:25%;height:42%;top:-10%;right:-5%;background: url("../images/s.png") no-repeat 0 0;background-size:100% 100%;}
#s1 .p8{background: url("../images/p2.8.png") no-repeat 0 0;background-size:100% 100%;}
#s1 .p9{width:40%;height:9%;bottom:5%;left:28%;}


#s2 .p1{background: url("../images/p3.1.png") no-repeat 0 0;background-size:100% 100%;}
#s2 .p2{background: url("../images/p3.2.png") no-repeat 0 0;background-size:100% 100%;}
#s2 .p3{background: url("../images/gif.gif") no-repeat 0 0;background-size:100% 100%;display:none;}
#s2 .p4{background: url("../images/p3.4.png") no-repeat 0 0;background-size:100% 100%;display:none;}
#s2 .p5{width:10%;height:7%;bottom:27%;right:30%;background: url("../images/p1.7.png") no-repeat 0 0;background-size:100% 100%;}
#s2 .p6{width:27%;height:17%;bottom:29%;left:37%;}
#s2 .p7{width:50%;height:8%;bottom:3%;left:24%;}

#s0.ani .p1{
	animation: ani1 .8s ease-out both;
		-moz-animation: ani1 .8s ease-out both;
		-webkit-animation: ani1 .8s ease-out both;
		-o-animation: ani1 .8s ease-out both;
}
#s0.ani .p2{
	animation: ani2 .8s ease-out both;
		-moz-animation: ani2 .8s ease-out both;
		-webkit-animation: ani2 .8s ease-out both;
		-o-animation: ani2 .8s ease-out both;
}
#s0.ani .p3{
	display:none;
}
#s0.ani .p41{
	animation: fadeIn .8s ease both;
		-moz-animation: fadeIn .8s ease both;
		-webkit-animation: fadeIn .8s ease both;
		-o-animation: fadeIn .8s ease both;
}
#s0.ani .p42{
	animation: fadeIn .8s 1s ease both;
		-moz-animation: fadeIn .8s 1s ease both;
		-webkit-animation: fadeIn .8s 1s ease both;
		-o-animation: fadeIn .8s 1s ease both;
}
#s0.ani .p43{
	animation: fadeIn .8s 2s ease both;
		-moz-animation: fadeIn .8s 2s ease both;
		-webkit-animation: fadeIn .8s 2s ease both;
		-o-animation: fadeIn .8s 2s ease both;
}
#s0.ani .p5{
	animation: fadeIn .8s 4s ease both;
		-moz-animation: fadeIn .8s 4s ease both;
		-webkit-animation: fadeIn .8s 4s ease both;
		-o-animation: fadeIn .8s 4s ease both;
}
#s0.ani .fl{
	animation: flash 2s 4s ease infinite;
		-moz-animation: flash 2s 4s ease infinite;
		-webkit-animation: flash 2s 4s ease infinite;
		-o-animation: flash 2s 4s ease infinite;
}
#s0.ani .p6{
	animation: fadeIn .8s 5s ease both;
		-moz-animation: fadeIn .8s 5s ease both;
		-webkit-animation: fadeIn .8s 5s ease both;
		-o-animation: fadeIn .8s 5s ease both;
}
#s1.action .p5,#s2.action .p5{
	animation: flash 1.5s .6s ease both;
		-moz-animation: flash 1.5s .6s ease both;
		-webkit-animation: flash 1.5s .6s ease both;
		-o-animation: flash 1.5s .6s ease both;
}

#s1.ani .p7{
	animation: ani3 1s ease both;
		-moz-animation: ani3 1s ease both;
		-webkit-animation: ani3 1s ease both;
		-o-animation: ani3 1s  ease both;
}


@-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}}


.pulse {-webkit-animation-name: pulse;animation-name: pulse}@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@-webkit-keyframes shake {0%, 80%, 100% {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}82%, 86%, 90%, 94%, 98% {-webkit-transform: translate3d(-15px, 0, 0);transform: translate3d(-15px, 0, 0);}84%, 88%, 92%, 96% {-webkit-transform: translate3d(15px, 0, 0);transform: translate3d(15px, 0, 0);}}@keyframes rotate {0 {-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}@-webkit-keyframes rotateY {0% {-webkit-transform: rotateY(90deg);transform: rotateY(90deg);}25% {-webkit-transform: rotateY(0);transform: rotateY(0);}50% {-webkit-transform: rotateY(-90deg);transform: rotateY(-90deg);}100% {-webkit-transform: rotateY(0);transform: rotateY(0);}}@keyframes rotateY {0% {-webkit-transform: rotateY(90deg);-ms-transform: rotateY(90deg);transform: rotateY(90deg);}25% {-webkit-transform: rotateY(0);-ms-transform: rotateY(0);transform: rotateY(0);}50% {-webkit-transform: rotateY(-90deg);-ms-transform: rotateY(-90deg);transform: rotateY(-90deg);}100% {-webkit-transform: rotateY(0);-ms-transform: rotateY(0);transform: rotateY(0);}}
     .rotateY {-webkit-animation-name: rotateY;animation-name: rotateY;}@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@-webkit-keyframes bubble{0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes bubble{0%{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes s3bottle{0%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:none;transform:none}100%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotate3d(0,0,1,33deg);transform:rotate3d(0,0,1,33deg)}}@keyframes s3bottle{0%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:none;transform:none}100%{-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotate3d(0,0,1,33deg);transform:rotate3d(0,0,1,33deg)}}@-webkit-keyframes s5leftHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,44deg);transform:rotate3d(0,0,1,44deg)}}@keyframes s5leftHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,44deg);transform:rotate3d(0,0,1,44deg)}}@-webkit-keyframes s5rightHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,-44deg);transform:rotate3d(0,0,1,-44deg)}}@keyframes s5rightHand{0%{opacity:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate3d(0,0,1,-44deg);transform:rotate3d(0,0,1,-44deg)}}@-webkit-keyframes people{0%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{-webkit-transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}}@keyframes people{0%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}50%{-webkit-transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(15px,0,0);transform:translate3d(15px,0,0)}}@-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}40%{-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}50%{-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}80%{-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}100%{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}40%{-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}50%{-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}80%{-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}100%{opacity:1;-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@-webkit-keyframes s9w3{0%{width:0}100%{width:245px}}@keyframes s9w3{0%{width:0}100%{width:245px}}@-webkit-keyframes s12water{0%{height:96px}100%{height:89px}}@keyframes s12water{0%{height:96px}100%{height:89px}}@-webkit-keyframes arrow{0%,100%{opacity:0}50%{opacity:1}}@keyframes arrow{0%,100%{opacity:0}50%{opacity:1}}
        .ani .wmw path,
        .ani .wmw polygon{stroke-dasharray:1000;-webkit-animation:dash 1s .5s linear both}@-webkit-keyframes dash{0%{opacity:0;stroke-dashoffset:1000}100%{opacity:1;stroke-dashoffset:0}}
        .up{margin:auto;left:0;right:2px;bottom:2.8%;width:29px;height:14px}
        .wmw{left:0;top:0}@-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}}@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 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}}@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}}@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 bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
        @keyframes bounceIn{
          0%,20%,40%,60%,80%,100%{
            -webkit-transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
            transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)
            }0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
          @-webkit-keyframes revolve{            
            0%{opacity:1;-webkit-transform:rotate(0deg);}
            100%{opacity:1;-webkit-transform:rotate(36000deg);}
          }

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

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

@keyframes ani2{
	0%{left:0}
	100%{left:-75%;}
}
@-webkit-keyframes ani2{
	0%{left:0}
	100%{left:-75%;}
}
@keyframes ani3{
	0%{top:-10%}
	50%{top:0%}
	100%{top:-10%;}
}
@-webkit-keyframes ani3{
	0%{top:-10%}
	50%{top:0%}
	100%{top:-10%;}
}