*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;overflow: hidden;}

.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;z-index: 99;}
.loading_img{position: absolute;left:32%;top:39%;width: 22%;}
.load_wave{
    position:absolute;top:32%;left:24%;width: 52%;height:5px;background-color: #ffffff;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #ca181f;
}
.load_num{
    position:absolute;top:34%;left:41%;width: 8%;height:5px;color: #ca181f;font-size: 20px;
}

/*音乐*/
.music_blk{z-index:999;position:fixed;top:12px;right:45px;display: none}
.music{width:30px;height:30px;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/p0.jpg") no-repeat 0 0;background-size:100% 100%;}
.enter{
    width:100%;height:100%;position:absolute;left:0;top:0;background: url("../images/enter.png");background-size: 100% 100%;
}
.bg0 .next{position: absolute;width: 38%;height: 8%;top: 74%;left: 31%;}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/bj.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg1 .menu{overflow: auto;position: absolute;width: 92%; height: 50%;top: 18%;left: 5%;}
.bg1 .hand{position: absolute;width: 14%;height: 8%;top:50%;right:0;background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%;}
.bg1 .menu .btn{float: right;width: 86%;}
.bg1 .menu .up{position: absolute;top: 5%; width: 12%; height: 23%;left: 0%;background:url("../images/p1.3.png") no-repeat 0 0;background-size:100% 100%;}
.bg1 .menu .down{position: absolute;top: 161%; width: 12%; height: 23%;left: 0%;background:url("../images/p1.4.png") no-repeat 0 0;background-size:100% 100%;}

.bg1 .hand{
    animation:shake 1.5s .5s ease infinite;
    -moz-animation:shake 1.5s .5s ease infinite;
    -webkit-animation:shake 1.5s .5s ease infinite;
    -o-animation:shake 1.5s .5s ease infinite
}

.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/bj.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg2 .content{overflow: auto;position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.bg2 .goToUrl{position: relative;width: 100%;height: 9%;top: -22%;left: 0%;}
.bg2 .close {
    width: 45%;
    margin: 0 auto 10%;
    display: block;
}

@keyframes fade{ 0%{ opacity:1; } 32%{ opacity:1;} 33%{ opacity:0; } 100%{ opacity:0; } }

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

@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 /* 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 fadeInRight /* 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 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;}}

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

@keyframes fadeInRight1
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight1 /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight1 /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}

@keyframes fadeInRight2
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight1 /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight1 /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}


@-webkit-keyframes wobble {
    0% {
        -webkit-transform:translateX(0%);
        transform:translateX(0%)
    }
    15% {
        -webkit-transform:translateX(-25%) rotate(-5deg);
        transform:translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform:translateX(20%) rotate(3deg);
        transform:translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform:translateX(-15%) rotate(-3deg);
        transform:translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform:translateX(10%) rotate(2deg);
        transform:translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform:translateX(-5%) rotate(-1deg);
        transform:translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform:translateX(0%);
        transform:translateX(0%);
        opacity: 1
    }
}
@keyframes wobble {
    0% {
        -webkit-transform:translateX(0%);
        -ms-transform:translateX(0%);
        transform:translateX(0%)
    }
    15% {
        -webkit-transform:translateX(-25%) rotate(-5deg);
        -ms-transform:translateX(-25%) rotate(-5deg);
        transform:translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform:translateX(20%) rotate(3deg);
        -ms-transform:translateX(20%) rotate(3deg);
        transform:translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform:translateX(-15%) rotate(-3deg);
        -ms-transform:translateX(-15%) rotate(-3deg);
        transform:translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform:translateX(10%) rotate(2deg);
        -ms-transform:translateX(10%) rotate(2deg);
        transform:translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform:translateX(-5%) rotate(-1deg);
        -ms-transform:translateX(-5%) rotate(-1deg);
        transform:translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform:translateX(0%);
        -ms-transform:translateX(0%);
        transform:translateX(0%);
        opacity: 1;
    }
}

/* 放大显示(向左) */
@-webkit-keyframes zoomInRight {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}
@-moz-keyframes zoomInRight {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}
@keyframes zoomInRight {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}

/* 放大显示(向下) */
@-webkit-keyframes zoomInDown {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}
@-moz-keyframes zoomInDown {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}
@keyframes zoomInDown {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
    60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
    100% {opacity:1}
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform:rotate(15deg);
        transform:rotate(15deg)
    }
    40% {
        -webkit-transform:rotate(-10deg);
        transform:rotate(-10deg)
    }
    60% {
        -webkit-transform:rotate(5deg);
        transform:rotate(5deg)
    }
    80% {
        -webkit-transform:rotate(-5deg);
        transform:rotate(-5deg)
    }
    100% {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
    }
}
@keyframes swing {
    20% {
        -webkit-transform:rotate(15deg);
        -ms-transform:rotate(15deg);
        transform:rotate(15deg)
    }
    40% {
        -webkit-transform:rotate(-10deg);
        -ms-transform:rotate(-10deg);
        transform:rotate(-10deg)
    }
    60% {
        -webkit-transform:rotate(5deg);
        -ms-transform:rotate(5deg);
        transform:rotate(5deg)
    }
    80% {
        -webkit-transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        transform:rotate(-5deg)
    }
    100% {
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg)
    }
}

@-webkit-keyframes shake{
    0%{-webkit-transform:translateY(0);transform:translateY(0)}
    80%,100%{-webkit-transform:translateY(-40px);transform:translateY(-40px)}
}

@keyframes shake{
    0%{-webkit-transform:translateY(0);transform:translateY(0)}
    80%,100%{-webkit-transform:translateY(-40px);transform:translateY(-40px)}
}