*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute; font-family:"Heiti SC",sans-serif;overflow: hidden}
.loading{position:absolute;width:100%;height:100%;background:url("../images/background.jpg?1") no-repeat 0 0;background-size:100% 100%;z-index: 99}
#loading_img{position: absolute;left:40%;top:44%;width: 20%;height:21%;}
.load_wave{
    position:absolute;top:68%;left:19%;width: 64%;height:5px;background-color: #55c16a;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #f2d651;
}

a{opacity:1}
/*音乐*/
.music_blk{z-index:999;position:fixed;bottom:65px;right:80px;display: none}
.music{width:70px;height:50px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.bg0 .w1{position: absolute;top:0;left:0;background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg0 .w2{position: absolute;top:0;left:0;background:url('../images/p1.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w3{position: absolute;top:0;left:0;background:url('../images/p1.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .left{position: absolute;top:10%;left:7%;background:url('../images/lightleft.png') no-repeat 0 0;background-size:100% 100%;width: 50%;height:30%;opacity: 1;}
.bg0 .right{position: absolute;top:10%;right:7%;background:url('../images/lightright.png') no-repeat 0 0;background-size:100% 100%;width: 50%;height:30%;opacity: 1;}
.bg0 .btn0{position: absolute;top:78.5%;left:31%;width: 37%;height:6%;}

.bg0.ani .left{animation:light1 2.5s .5s linear infinite;
            -moz-animation:light1 2.5s .5s linear infinite;
            -webkit-animation:light1 2.5s .5s linear infinite;
            -o-animation:light1 2.5s .5s linear infinite}
.bg0.ani .right{animation:light2 2.5s .5s linear infinite;
            -moz-animation:light2 2.5s .5s linear infinite;
            -webkit-animation:light2 2.5s .5s linear infinite;
            -o-animation:light2 2.5s .5s linear infinite}
.bg0.ani .w2{
    animation:fadeInLeft 1.5s .5s linear both;
    -moz-animation:fadeInLeft 1.5s .5s linear both;
    -webkit-animation:fadeInLeft 1.5s .5s linear both;
    -o-animation:fadeInLeft 1.5s .5s linear both
}
.bg0.ani .w3{
    animation:fadeInOut 2s 2s linear infinite;
    -moz-animation:fadeInOut 2s 2s linear infinite;
    -webkit-animation:fadeInOut 2s 2s linear infinite;
    -o-animation:fadeInOut 2s 2s linear infinite
}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.bg1 .w1{position: absolute;top:0;left:0;background:url('../images/p3.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg1 .w2{position: absolute;top:0;left:0;background:url('../images/p3.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg1 .left{position: absolute;top:10%;left:7%;background:url('../images/lightleft.png') no-repeat 0 0;background-size:100% 100%;width: 50%;height:30%;opacity: 1;}
.bg1 .right{position: absolute;top:10%;right:7%;background:url('../images/lightright.png') no-repeat 0 0;background-size:100% 100%;width: 50%;height:30%;opacity: 1;}
.bg1 .btn0{position: absolute;top:70%;left:31%;width: 37%;height:6%;}

.bg1.ani .w2{
    animation:fadeInLeft 1.5s .5s linear both;
    -moz-animation:fadeInLeft 1.5s .5s linear both;
    -webkit-animation:fadeInLeft 1.5s .5s linear both;
    -o-animation:fadeInLeft 1.5s .5s linear both
}

.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p4.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.bg2 .w1{position: absolute;top:0;left:0;background:url('../images/p4.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg2 .w2{position: absolute;top:0;left:0;background:url('../images/p4.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg2 .w3{position: absolute;top:0;left:0;background:url('../images/p4.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg2 .w4{position: absolute;top:0;left:0;background:url('../images/p4.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}
.bg2 .w5{position: absolute;top:0;left:0;background:url('../images/p4.5.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg2 .w6{position: absolute;top:0;left:0;background:url('../images/p4.6.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg2 .btn0{position: absolute;top:74.5%;left:4%;width: 28%;height:6%;}
.bg2 .btn1{position: absolute;top:74.5%;left:36%;width: 28%;height:6%;}
.bg2 .btn2{position: absolute;top:74.5%;left:68%;width: 28%;height:6%;}
.bg2 .w5 .close{position: absolute;top:86.5%;left:43%;width: 14%;height:6%;}

@keyframes light1{
    0%{opacity: 1;transform: rotate(0);transform-origin:0% 0%;}
    25%{opacity: 1;transform: rotate(20deg);transform-origin:0% 0%;}
    50%{opacity: 1;transform: rotate(0);transform-origin:0% 0%;}
    75%{opacity: 1;transform: rotate(-20deg);transform-origin:0% 0%;}
    100%{opacity: 1;transform: rotate(0);transform-origin:0% 0%;}
}
/* Firefox */
@-moz-keyframes light1 {
    0%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 0%;}
    25%{opacity: 1;-moz-transform: rotate(20deg);-moz-transform-origin:0% 0%;}
    50%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 0%;}
    75%{opacity: 1;-moz-transform: rotate(-20deg);-moz-transform-origin:0% 0%;}
    100%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:0% 0%;}
}
/* Safari 和 Chrome */
@-webkit-keyframes light1 {
    0%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 0%;}
    25%{opacity: 1;-webkit-transform: rotate(20deg);-webkit-transform-origin:0% 0%;}
    50%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 0%;}
    75%{opacity: 1;-webkit-transform: rotate(-20deg);-webkit-transform-origin:0% 0%;}
    100%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:0% 0%;}
}
  
@keyframes light2{
    0%{opacity: 1;transform: rotate(0);transform-origin:100% 0%;}
    25%{opacity: 1;transform: rotate(-20deg);transform-origin:100% 0%;}
    50%{opacity: 1;transform: rotate(0);transform-origin:100% 0%;}
    75%{opacity: 1;transform: rotate(20deg);transform-origin:100% 0%;}
    100%{opacity: 1;transform: rotate(0);transform-origin:100% 0%;}
}
/* Firefox */
@-moz-keyframes light2 {
    0%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 0%;}
    25%{opacity: 1;-moz-transform: rotate(-20deg);-moz-transform-origin:100% 0%;}
    50%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 0%;}
    75%{opacity: 1;-moz-transform: rotate(20deg);-moz-transform-origin:100% 0%;}
    100%{opacity: 1;-moz-transform: rotate(0);-moz-transform-origin:100% 0%;}
}
 /* Safari 和 Chrome */
@-webkit-keyframes light2{
    0%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 0%;}
    25%{opacity: 1;-webkit-transform: rotate(-20deg);-webkit-transform-origin:100% 0%;}
    50%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 0%;}
    75%{opacity: 1;-webkit-transform: rotate(20deg);-webkit-transform-origin:100% 0%;}
    100%{opacity: 1;-webkit-transform: rotate(0);-webkit-transform-origin:100% 0%;}
}

@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 /* Firefox */
{0%{opacity: 0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity: 1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInLeft /* Safari 和 Chrome */
{0%{opacity: 0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,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 fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@-moz-keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}