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

.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?8) 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?10') 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:50%;height:8px;position:absolute;left:25%;top:50%;background:#1181a8;border-radius:5px;}
.loading_line_blank{width:0%;height:100%;background: #5ed696;border-radius:5px;}
/*音乐开关*/
#switch-music{z-index:9999999;position:absolute;bottom:10px; left:10px; width:30px; height:30px;}
#switch-music img{max-width: 100%;}
#switch-music.show{display:block; z-index:999;}
#switch-music .tips{color: rgba(255,255,255,.75); z-index:999; top: 15px;: 100px; width: 30px; text-align:; opacity: 0;}
#switch-music .tips.on{opacity: 1;: 100px; z-index:999;}
#switch-music div:nth-child(2){display:none; z-index:999;}
#switch-music.on div:nth-child(2){display:block; animation: music 1s linear infinite; -webkit-animation: music 1s linear infinite; z-index:999;}
@keyframes music{
	0%{transform: rotate(0)}
	100%{transform: rotate(360deg)}
}
@-webkit-keyframes music{
	0%{transform: rotate(0); -webkit-transform: rotate(0)}
	100%{transform: rotate(360deg); -webkit-transform: rotate(360deg)}
}
/*音乐开关*/

.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;}

.action{display:block;}


.words{width:100%;text-align:center;margin-top:75%;display:none;}
.words img{width:12%;}
#p0{background-image:url('images/p0.jpg?10');}
#p0 .w1{background-image:url('images/p0.1.jpg?10');width:100%;height:100%;}
#p0 .w2{background-image:url('images/p0.2.jpg?10');width:100%;height:100%;}
#p0 .w3{background-image:url('images/p0.3.jpg?10');width:100%;height:100%;}
#p0 .w4{background-image:url('images/p0.4.png?8');width:18%;height:14%;top:62%;left:54%;animation: a1 1s infinite;-webkit-animation: a1 1s infinite;}

.open .w1{animation: fadeOut .3s both;-webkit-animation: fadeOut .3s both;}
.open .w2{animation: fadeOut .3s .3s both;-webkit-animation: fadeOut .3s .3s both;}
.open .w3{animation: fadeOut .3s .6s both;-webkit-animation: fadeOut .3s .6s both;}
.open .w4{opacity:0;}
.open{animation: fadeOut .3s 1.5s both;-webkit-animation: fadeOut .3s 1.5s both;}


#p1{background:url('images/p1.jpg?10') 0% 100%;background-size:117% 100%;}
#p1 .w1{background-image:url('images/p1.1.png?8');width:50%;height:18%;top:27%;right:5%;opacity:0;}
#p1 .w2{background-image:url('images/p1.2.png?8');width:45%;height:19%;top:26%;right:10%;opacity:0;}
#p1 .w3{background-image:url('images/p1.3.png?8');width:50%;height:18%;top:27%;right:4%;opacity:0;}
#p1 .w3 div{width:100%;text-align:center;margin-top:4%;}
#p1 .w4{background-image:url('images/p1.4.png?8');width:50%;height:18%;top:62%;right:25%;opacity:0;display:none;}
#p1 .w5{background-image:url('images/p1.5.png?8');width:100%;height:100%;opacity:0;left: 2%;}
#p1 .w6{background-image:url('images/p1.6.png?8');width:100%;height:100%;opacity:0;}

#p1 .b{width:18%;height:15%;}
#p1 .b1{top:51%;left:1%;}
#p1 .b2{top:53%;left:42%;}
#p1 .b3{top:53%;left:64%;}
#p1 .m1{background-image:url('images/p1-1.png?8');width:100%;height:100%;display:none;}
#p1 .m2{background-image:url('images/p1-2.png?8');width:100%;height:100%;display:none;}
#p1 .m3{background-image:url('images/p1-3.png?8');width:100%;height:100%;display:none;}
.l{width: 12%;height: 22%;top: 38%;}
.r{width: 12%;height: 22%;top: 38%;right:0;}
.rb{width:100%;height:25%;bottom:0;}
.rbb{width:100%;height:8%;bottom:0;}

#p1 .b1 img,#p1 .b2 img,#p1 .b3 img{width:50%;margin:60% 0 0 40%;display:none;}
#p1 .b img{display:block;}
.ami{animation: a2 7s both;-webkit-animation: a2 7s both;}
.ami .w1{animation: a3 3s 2s both;-webkit-animation: a3 3s 2s both;}
.am2 .w6{animation: flash 2s both;}

.am2{animation: a4 1s 2s both;-webkit-animation: a4 1s 2s both;}

#p1.ami .b1.b img{animation: flash 1.5s both;-webkit-animation:flash 1.5s both;}
#p1.ami .b2.b img{animation: flash 1.5s 1.5s both;-webkit-animation:flash 1.5s 1.5s both;}
#p1.ami .b3.b img{animation: flash 1.5s 3s both;-webkit-animation:flash 1.5s 3s both;}
.am2 .w2{animation: a5 4s 3s both;-webkit-animation: a5 4s 3s both;}
.am2 .w4{animation: a5 3s 6s both;-webkit-animation: a5 3s 6s both;}
.am2 .w5{animation: a5 1s 6s both;-webkit-animation: a5 1s 6s both;}
.am3 .w3{animation: a5 1s .6 both;-webkit-animation: a5 1s .6s both;}

.am2 .hd{animation: a6 1.6s infinite;-webkit-animation: a6 1.6s infinite;}

.boss{display:none;width:100%;height:100%;}
.bo1{background-image:url('images/p2-1.jpg?10');}
.bo1 .button1{width: 35%;height: 8%;left: 14%;top: 22%;}
.bo1 .button2{width: 35%;height: 8%;left: 51%;top: 22%;}
.bo1 .button3{width: 35%;height: 8%;left: 14%;top: 35%;}
.bo1 .button4{width: 35%;height: 8%;left: 51%;top: 35%;}
.bo1 .button5{width: 35%;height: 8%;left: 14%;top: 47%;}
.bo1 .button6{width: 35%;height: 8%;left: 51%;top: 47%;}
.bo1 .button7{width: 35%;height: 8%;left: 14%;top: 60%;}
.bo1 .button8{width: 35%;height: 8%;left: 51%;top: 60%;}
.bo1 .button9{width: 35%;height: 8%;left: 14%;top: 73%;}
.bo1 .button10{width: 35%;height: 12%;left: 51%;top: 73%;}
.bo2{background-image:url('images/p2-2.jpg?10');}
.bo2 .button11{width: 35%;height: 8%;left: 14%;top: 22%;}
.bo2 .button12{width: 35%;height: 8%;left: 51%;top: 22%;}
.bo2 .button13{width: 35%;height: 8%;left: 14%;top: 35%;}
.bo2 .button14{width: 35%;height: 8%;left: 51%;top: 35%;}
.bo2 .button15{width: 35%;height: 8%;left: 14%;top: 47%;}
.bo2 .button16{width: 35%;height: 8%;left: 51%;top: 47%;}
.bo2 .button17{width: 35%;height: 8%;left: 14%;top: 60%;}
.bo2 .button18{width: 35%;height: 8%;left: 51%;top: 60%;}
.bo2 .button19{width: 35%;height: 8%;left: 14%;top: 73%;}
.bo2 .button20{width: 35%;height: 12%;left: 51%;top: 73%;}
.bo3{background-image:url('images/p2-3.jpg?10');}
.bo3 .button21{width: 35%;height: 8%;left: 14%;top: 22%;}
.bo3 .button22{width: 35%;height: 8%;left: 51%;top: 22%;}
.bo3 .button23{width: 35%;height: 8%;left: 14%;top: 38%;}
.bo3 .button24{width: 35%;height: 8%;left: 51%;top: 38%;}
.bo3 .button25{width: 35%;height: 8%;left: 14%;top: 50%;}
.bo3 .button26{width: 35%;height: 8%;left: 51%;top: 50%;}
.bo3 .button27{width: 35%;height: 8%;left: 14%;top: 63%;}
.bo3 .button28{width: 35%;height: 8%;left: 51%;top: 63%;}
.bo3 .button29{width: 35%;height: 8%;left: 14%;top: 76%;}
.bo3 .button30{width: 35%;height: 12%;left: 51%;top: 76%;}
.bo4{background-image:url('images/p2-4.jpg?10');}
.bo4 .button31{width: 35%;height: 8%;left: 14%;top: 22%;}
.bo4 .button32{width: 35%;height: 8%;left: 51%;top: 22%;}
.bo4 .button33{width: 35%;height: 8%;left: 14%;top: 35%;}
.bo4 .button34{width: 35%;height: 8%;left: 51%;top: 35%;}
.bo4 .button35{width: 35%;height: 8%;left: 14%;top: 47%;}
.bo4 .button36{width: 35%;height: 8%;left: 51%;top: 47%;}


#p2{background-image:url('images/p3.jpg?10');}
#p2 .b{width:50%;height:6%;}
#p2 .b1{top:29%;left: 0%;}
#p2 .b2{top:41%;left: 0%;}
#p2 .b3{top:51%;left: 0%;}
#p2 .b4{top:62%;left: 0%;}
#p2 .b5{top:73%;left: 0%;}
#p2 .b6{top:29%;left: 50%;}
#p2 .b7{top:41%;left: 50%;}
#p2 .b8{top:51%;left: 50%;}
#p2 .b9{top:62%;left: 50%;}
#p2 .b10{top:73%;left: 50%;}

#p3{background-image:url('images/p4.jpg?10');}
.label{width:100%;height:100%;}
#boss{top:29%;left:27%;}
#user{top:39.5%;left:45%;}
#button{width: 34%;height: 6%;top: 7%;left: 59%;}
#submit{width:100%;height:7%;top:61%;}
.sent{animation: sent 2s .5s both;-webkit-animation: sent 2s .5s both;}

#p4{background-image:url('images/end.jpg?10');}
#p4 .w1{width:100%;height:100%;top:0%;left:0%;color: #FFF;font-family:"Microsoft YaHei";text-align: center;}
#p4 .w1 #d{width: 17%;height: 9%;top: 32%;left: 8%;}
#p4 .w1 #h{width: 17%;height: 9%;top: 32%;left: 31%;}
#p4 .w1 #m{width: 17%;height: 9%;top: 32%;left: 53%;}
#p4 .w1 #s{width: 17%;height: 9%;top: 32%;left: 75%;}

/* #p4 .w1 img{width:34%;margin-left:16%;} */
@keyframes a1
{
	0%{width:18%;height:14%;top:62%;left:54%;}
	100%{width:17%;height:13.5%;top:61%;left:54%;}
}

@-moz-keyframes a1 /* Firefox */
{
	
	0%{width:18%;height:14%;top:62%;left:54%;}
	100%{width:17%;height:13.5%;top:61%;left:54%;}
}

@-webkit-keyframes a1 /* Safari 和 Chrome */
{
	
	0%{width:18%;height:14%;top:62%;left:54%;}
	100%{width:17%;height:13.5%;top:61%;left:54%;}
}

@-o-keyframes a1 /* Opera */
{
	
	0%{width:18%;height:14%;top:62%;left:54%;}
	100%{width:17%;height:13.5%;top:61%;left:54%;}
}

@keyframes a2
{
	0%{background-position-x:0%;}
	20%{background-position-x:100%;}
	80%{background-position-x:100%;}
	100%{background-position-x:0%;}
}

@-moz-keyframes a2 /* Firefox */
{
	0%{background-position-x:0%;}
	20%{background-position-x:100%;}
	80%{background-position-x:100%;}
	100%{background-position-x:0%;}
}

@-webkit-keyframes a2 /* Safari 和 Chrome */
{
	0%{background-position-x:0%;}
	20%{background-position-x:100%;}
	80%{background-position-x:100%;}
	100%{background-position-x:0%;}
}

@-o-keyframes a2 /* Opera */
{
	0%{background-position-x:0%;}
	20%{background-position-x:100%;}
	80%{background-position-x:100%;}
	100%{background-position-x:0%;}
}

@keyframes a3
{
	0%{opacity:0;}
	15%{opacity:1;}
	85%{opacity:1;}
	100%{opacity:0;}
}

@-moz-keyframes a3 /* Firefox */
{
	0%{opacity:0;}
	15%{opacity:1;}
	85%{opacity:1;}
	100%{opacity:0;}
}

@-webkit-keyframes a3 /* Safari 和 Chrome */
{
	0%{opacity:0;}
	15%{opacity:1;}
	85%{opacity:1;}
	100%{opacity:0;}
}

@-o-keyframes a3 /* Opera */
{
	0%{opacity:0;}
	20%{opacity:1;}
	80%{opacity:1;}
	100%{opacity:0;}
}

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

@-moz-keyframes a4 /* Firefox */
{
	0%{background-position-x:0%;}
	100%{background-position-x:100%;}
}

@-webkit-keyframes a4 /* Safari 和 Chrome */
{
	0%{background-position-x:0%;}
	100%{background-position-x:100%;}
}

@-o-keyframes a4 /* Opera */
{
	0%{background-position-x:0%;}
	100%{background-position-x:100%;}
}
@keyframes a5
{
	0%{opacity:0;}
	100%{opacity:1;}
}

@-moz-keyframes a5 /* Firefox */
{
	0%{opacity:0;}
	100%{opacity:1;}
}

@-webkit-keyframes a5 /* Safari 和 Chrome */
{
	0%{opacity:0;}
	100%{opacity:1;}
}

@-o-keyframes a5 /* Opera */
{
	0%{opacity:0;}
	100%{opacity:1;}
}


@keyframes a6
{
	0%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
	50%{width:51.5%;height:18.5%;top:63%;right:26%;opacity:1;}
	100%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
}

@-moz-keyframes a6 /* Firefox */
{
	0%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
	50%{width:51.5%;height:18.5;top:63%;right:26%;opacity:1;}
	100%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
}

@-webkit-keyframes a6 /* Safari 和 Chrome */
{
	0%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
	50%{width:51.5%;height:18.5;top:63%;right:26%;opacity:1;}
	100%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
}

@-o-keyframes a6 /* Opera */
{
	0%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
	50%{width:51.5%;height:18.5;top:63%;right:26%;opacity:1;}
	100%{width:50%;height:18%;top:62%;right:25%;opacity:1;}
}

@keyframes sent
{
	0%{width:100%;height:100%;left:0%;top:0%;transform:rotate(0deg);opacity:1;}
	100%{width:0%;height:0%;left:50%;top:50%;transform:rotate(720deg);opacity:0;}
}

@-moz-keyframes sent /* Firefox */
{
	0%{width:100%;height:100%;left:0%;top:0%;transform:rotate(0deg);opacity:1;}
	100%{width:0%;height:0%;left:50%;top:50%;transform:rotate(720deg);opacity:0;}
}

@-webkit-keyframes sent /* Safari 和 Chrome */
{
	0%{width:100%;height:100%;left:0%;top:0%;transform:rotate(0deg);opacity:1;}
	100%{width:0%;height:0%;left:50%;top:50%;transform:rotate(720deg);opacity:0;}
}

@-o-keyframes sent /* Opera */
{
	0%{width:100%;height:100%;left:0%;top:0%;transform:rotate(0deg);opacity:1;}
	100%{width:0%;height:0%;left:50%;top:50%;transform:rotate(720deg);opacity: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}}
@-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 fadeOut{0%{opacity:1}100%{opacity:0}}
@-moz-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}

@-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?8');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?8');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?8');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?8');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?8');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?8');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:0;}
}