.page2_font,.page2_key{opacity: 0;overflow:hidden;}
.page1_font,.page1_key{opacity: 0;overflow:hidden;}

/*Zoom in*/
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -moz-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        -o-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -moz-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        -o-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    100% {
        opacity: 1;
    }
}
.page1_zoomin_1 {
    -webkit-animation:zoomIn .5s 1 linear 0s both;
    -o-animation:zoomIn .5s 1 linear 0s both;
    -moz-animation: zoomIn .5s 1 linear 0s both;
    -ms-animation:zoomIn .5s 1 linear 0s both;
    animation:zoomIn .5s 1 linear 0s both;
}

/*fade in*/
@keyframes fadeIn {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@-webkit-keyframes fadeIn {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.banner_btn{opacity: 0;}

.page1_fadein {
    -webkit-animation:fadeIn .5s 1 linear .7s both;
    -o-animation:fadeIn .5s 1 linear .7s both;
    -moz-animation: fadeIn .5s 1 linear .7s both;
    -ms-animation:fadeIn .5s 1 linear .7s both;
    animation:fadeIn .5s 1 linear .7s both;
    opacity: 1;
}


/*Page2 */


/*Bounce in left*/
@keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        /*-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-moz-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-ms-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-o-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        -moz-transform: translate3d(-3000px,0,0);
        -ms-transform: translate3d(-3000px,0,0);
        -o-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        -moz-transform: translate3d(25px,0,0);
        -ms-transform: translate3d(25px,0,0);
        -o-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0);
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        -moz-transform: translate3d(-10px,0,0);
        -ms-transform: translate3d(-10px,0,0);
        -o-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        -moz-transform: translate3d(5px,0,0);
        -ms-transform: translate3d(5px,0,0);
        -o-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        /*-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-moz-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-ms-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*-o-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        -moz-transform: translate3d(-3000px,0,0);
        -ms-transform: translate3d(-3000px,0,0);
        -o-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        -moz-transform: translate3d(25px,0,0);
        -ms-transform: translate3d(25px,0,0);
        -o-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0);
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        -moz-transform: translate3d(-10px,0,0);
        -ms-transform: translate3d(-10px,0,0);
        -o-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        -moz-transform: translate3d(5px,0,0);
        -ms-transform: translate3d(5px,0,0);
        -o-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}
.bounceInLeft {
    -webkit-animation:bounceInLeft .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -moz-animation:bounceInLeft .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -o-animation:bounceInLeft .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -ms-animation:bounceInLeft .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    animation:bounceInLeft .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    opacity:1;
}

/*Bounce in right*/

@keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        /*-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*transition-timing-function: cubic-bezier(0.215,.61,.355,1)*/
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        -moz-transform: translate3d(3000px,0,0);
        -o-transform: translate3d(3000px,0,0);
        -ms-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        -moz-transform: translate3d(-25px,0,0);
        -o-transform: translate3d(-25px,0,0);
        -ms-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        -moz-transform: translate3d(10px,0,0);
        -o-transform: translate3d(10px,0,0);
        -ms-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        -moz-transform: translate3d(-5px,0,0);
        -o-transform: translate3d(-5px,0,0);
        -ms-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }
}
@-webkit-keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        /*-webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);*/
        /*transition-timing-function: cubic-bezier(0.215,.61,.355,1)*/
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        -moz-transform: translate3d(3000px,0,0);
        -o-transform: translate3d(3000px,0,0);
        -ms-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        -moz-transform: translate3d(-25px,0,0);
        -o-transform: translate3d(-25px,0,0);
        -ms-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        -moz-transform: translate3d(10px,0,0);
        -o-transform: translate3d(10px,0,0);
        -ms-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        -moz-transform: translate3d(-5px,0,0);
        -o-transform: translate3d(-5px,0,0);
        -ms-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation:bounceInRight .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -moz-animation:bounceInRight .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -o-animation:bounceInRight .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    -ms-animation:bounceInRight .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    animation:bounceInRight .8s 1 cubic-bezier(0.215,.61,.355,1) 0s both;
    opacity:1;
}

@keyframes bounceInUp {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -ms-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        -ms-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        -ms-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        -ms-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes bounceInUp {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
        transition-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -ms-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        -ms-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        -ms-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        -ms-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    -o-animation-name: bounceInUp;
    -ms-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    animation-name: bounceInUp;
    opacity:1;
}

/*圆形旋转*/
@keyframes circle1{
    0%{}
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes circle1{
    0%{}
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes circle2 {
    0%{}
    100%{
        -webkit-transform: rotate(-600deg);
        -moz-transform: rotate(-600deg);
        -ms-transform: rotate(-600deg);
        -o-transform: rotate(-600deg);
        transform: rotate(-600deg);
    }
}
@-webkit-keyframes circle2 {
    0%{}
    100%{
        -webkit-transform: rotate(-600deg);
        -moz-transform: rotate(-600deg);
        -ms-transform: rotate(-600deg);
        -o-transform: rotate(-600deg);
        transform: rotate(-600deg);
    }
}
@keyframes circle3 {
    0%{}
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes circle3 {
    0%{}
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes display {
    0%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes display {
    0%{opacity:0;}
    100%{opacity:1;}
}
.circle1 {
    -webkit-animation:circle1 5s infinite linear .7s both;
    -moz-animation:circle1 5s infinite linear .7s both;
    -o-animation:circle1 5s infinite linear .7s both;
    -ms-animation:circle1 5s infinite linear .7s both;
    animation:circle1 5s infinite linear .7s both;
}
.circle2 {
    -webkit-animation:circle2 5s infinite linear .7s both;
    -moz-animation:circle2 5s infinite linear .7s both;
    -o-animation:circle2 5s infinite linear .7s both;
    -ms-animation:circle2 5s infinite linear .7s both;
    animation:circle2 5s infinite linear .7s both;
}
.circle3 {
    -webkit-animation:circle3 5s infinite linear .7s both;
    -moz-animation:circle3 5s infinite linear .7s both;
    -o-animation:circle3 5s infinite linear .7s both;
    -ms-animation:circle3 5s infinite linear .7s both;
    animation:circle3 5s infinite linear .7s both;
}
#page2_circle_container{
    opacity:0;
}
.page2_circle_container{
    -webkit-animation:display 0.5s linear 0.6s both;
    -o-animation:display 0.5s linear 0.6s both;
    -moz-animation:display 0.5s linear 0.6s both;
    -ms-animation:display 0.5s linear 0.6s both;
    animation:display 0.5s linear 0.6s both;
    opacity:1;
}




/*小火箭*/
.page2_huojian{opacity:0;}
@keyframes rocket {
    0% {
        opacity:0;
        -webkit-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -moz-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -ms-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -o-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
    }
    100%{
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        opacity: 1;
    }
}
@-webkit-keyframes rocket {
    0% {
        opacity:0;
        -webkit-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -moz-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -ms-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        -o-transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
        transform: translate3d(0,300px,0) scale3d(.3,.3,.3);
    }
    100%{
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        opacity: 1;
    }
}
.rocket1 {
    -webkit-animation:bounceInUp .5s 1 linear .6s both;
    -moz-animation:bounceInUp .5s 1 linear .6s both;
    -o-animation:bounceInUp .5s 1 linear .6s both;
    -ms-animation:bounceInUp .5s 1 linear .6s both;
    animation:bounceInUp .5s 1 linear .6s both;
    opacity:1;
}
/*小火球*/
.page1_huo{z-index:5;}
.page1_huo img{ opacity:0;}
.page1_key{z-index:3;}
.page1_cir{z-index:4;opacity:0;}
@keyframes fireball {
    0%,3% {
        -webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -moz-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -ms-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -o-transform: translate3d(0px, 0px, 0) rotate(0deg);
        transform: translate3d(0px, 0px, 0) rotate(0deg);
    }
    16%{
        -webkit-transform: translate3d(-260px, 30px, 0);
        -moz-transform: translate3d(-260px, 30px, 0);
        -ms-transform: translate3d(-260px, 30px, 0);
        -o-transform: translate3d(-260px, 30px, 0);
        transform: translate3d(-260px, 30px, 0);
    }
    28%{
        -webkit-transform: translate3d(-500px, 25px, 0);
        -moz-transform: translate3d(-500px, 25px, 0);
        -ms-transform: translate3d(-500px, 25px, 0);
        -o-transform: translate3d(-500px, 25px, 0);
        transform: translate3d(-500px, 25px, 0);
    }
    36%{
        -webkit-transform: translate3d(-584px, -55px, 0);
        -moz-transform: translate3d(-584px, -55px, 0);
        -ms-transform: translate3d(-584px, -55px, 0);
        -o-transform: translate3d(-584px, -55px, 0);
        transform: translate3d(-584px, -55px, 0);
        z-index:2;
    }
    /*42%{*/
        /*-webkit-transform: translate3d(-570px, -110px, 0);*/
        /*-moz-transform: translate3d(-570px, -110px, 0);*/
        /*-ms-transform: translate3d(-570px, -110px, 0);*/
        /*-o-transform: translate3d(-570px, -110px, 0);*/
        /*transform: translate3d(-570px, -110px, 0);*/
        /*z-index:2;*/
    /*}*/
    42%{
        -webkit-transform: translate3d(-584px, -120px, 0);
        -moz-transform: translate3d(-584px, -120px, 0);
        -ms-transform: translate3d(-584px, -120px, 0);
        -o-transform: translate3d(-584px, -120px, 0);
        transform: translate3d(-584px, -120px, 0);
        z-index:2;
    }
    65%{
        /*-webkit-transform: translate3d(90px, -150px, 0);*/
        /*-moz-transform: translate3d(90px, -150px, 0);*/
        /*-ms-transform: translate3d(90px, -150px, 0);*/
        /*-o-transform: translate3d(90px, -150px, 0);*/
        /*transform: translate3d(90px, -150px, 0);*/
        /*z-index:2;*/
        -webkit-transform: translate3d(90px, -180px, 0);
        -moz-transform: translate3d(90px, -180px, 0);
        -ms-transform: translate3d(90px, -180px, 0);
        -o-transform: translate3d(90px, -180px, 0);
        transform: translate3d(90px, -180px, 0);
        z-index:2;
    }
    69%{
        -webkit-transform: translate3d(140px, -148px, 0);
        -moz-transform: translate3d(140px, -148px, 0);
        -ms-transform: translate3d(140px, -148px, 0);
        -o-transform: translate3d(140px, -148px, 0);
        transform: translate3d(140px, -148px, 0);
        z-index:5;
    }
    70%{
        -webkit-transform: translate3d(150px, -138px, 0);
        -moz-transform: translate3d(150px, -138px, 0);
        -ms-transform: translate3d(150px, -138px, 0);
        -o-transform: translate3d(150px, -138px, 0);
        transform: translate3d(150px, -138px, 0);
        z-index:5;
    }
    /*78%{*/
    /*-webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-moz-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-ms-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-o-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*}*/
    90%{
        -webkit-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -moz-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -ms-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -o-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        transform: translate3d(-20px, 10px, 0) rotate(0deg);
    }
    85%,100%{
        -webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -moz-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -ms-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -o-transform: translate3d(0px, 0px, 0) rotate(0deg);
        transform: translate3d(0px, 0px, 0) rotate(0deg);
        z-index:5;
        opacity:1;
    }
}
@-webkit-keyframes fireball {
    0%,3% {
        -webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -moz-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -ms-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -o-transform: translate3d(0px, 0px, 0) rotate(0deg);
        transform: translate3d(0px, 0px, 0) rotate(0deg);
    }
    16%{
        -webkit-transform: translate3d(-260px, 30px, 0);
        -moz-transform: translate3d(-260px, 30px, 0);
        -ms-transform: translate3d(-260px, 30px, 0);
        -o-transform: translate3d(-260px, 30px, 0);
        transform: translate3d(-260px, 30px, 0);
    }
    28%{
        -webkit-transform: translate3d(-500px, 25px, 0);
        -moz-transform: translate3d(-500px, 25px, 0);
        -ms-transform: translate3d(-500px, 25px, 0);
        -o-transform: translate3d(-500px, 25px, 0);
        transform: translate3d(-500px, 25px, 0);
    }
    36%{
        -webkit-transform: translate3d(-584px, -55px, 0);
        -moz-transform: translate3d(-584px, -55px, 0);
        -ms-transform: translate3d(-584px, -55px, 0);
        -o-transform: translate3d(-584px, -55px, 0);
        transform: translate3d(-584px, -55px, 0);
        z-index:2;
    }
    /*42%{*/
    /*-webkit-transform: translate3d(-570px, -110px, 0);*/
    /*-moz-transform: translate3d(-570px, -110px, 0);*/
    /*-ms-transform: translate3d(-570px, -110px, 0);*/
    /*-o-transform: translate3d(-570px, -110px, 0);*/
    /*transform: translate3d(-570px, -110px, 0);*/
    /*z-index:2;*/
    /*}*/
    42%{
        -webkit-transform: translate3d(-584px, -120px, 0);
        -moz-transform: translate3d(-584px, -120px, 0);
        -ms-transform: translate3d(-584px, -120px, 0);
        -o-transform: translate3d(-584px, -120px, 0);
        transform: translate3d(-584px, -120px, 0);
        z-index:2;
    }
    65%{
        /*-webkit-transform: translate3d(90px, -150px, 0);*/
        /*-moz-transform: translate3d(90px, -150px, 0);*/
        /*-ms-transform: translate3d(90px, -150px, 0);*/
        /*-o-transform: translate3d(90px, -150px, 0);*/
        /*transform: translate3d(90px, -150px, 0);*/
        /*z-index:2;*/
        -webkit-transform: translate3d(90px, -180px, 0);
        -moz-transform: translate3d(90px, -180px, 0);
        -ms-transform: translate3d(90px, -180px, 0);
        -o-transform: translate3d(90px, -180px, 0);
        transform: translate3d(90px, -180px, 0);
        z-index:2;
    }
    69%{
        -webkit-transform: translate3d(140px, -148px, 0);
        -moz-transform: translate3d(140px, -148px, 0);
        -ms-transform: translate3d(140px, -148px, 0);
        -o-transform: translate3d(140px, -148px, 0);
        transform: translate3d(140px, -148px, 0);
        z-index:5;
    }
    70%{
        -webkit-transform: translate3d(150px, -138px, 0);
        -moz-transform: translate3d(150px, -138px, 0);
        -ms-transform: translate3d(150px, -138px, 0);
        -o-transform: translate3d(150px, -138px, 0);
        transform: translate3d(150px, -138px, 0);
        z-index:5;
    }
    /*78%{*/
    /*-webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-moz-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-ms-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*-o-transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*transform: translate3d(0px, 0px, 0) rotate(0deg);*/
    /*}*/
    90%{
        -webkit-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -moz-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -ms-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        -o-transform: translate3d(-20px, 10px, 0) rotate(0deg);
        transform: translate3d(-20px, 10px, 0) rotate(0deg);
    }
    85%,100%{
        -webkit-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -moz-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -ms-transform: translate3d(0px, 0px, 0) rotate(0deg);
        -o-transform: translate3d(0px, 0px, 0) rotate(0deg);
        transform: translate3d(0px, 0px, 0) rotate(0deg);
        z-index:5;
        opacity:1;
    }
}
.fireball{
    -webkit-animation:fireball 1.5s 1 linear  .8s both;
    -moz-animation:fireball 1.5s 1 linear  .8s both;
    -o-animation:fireball 1.5s 1 linear  .8s both;
    -ms-animation:fireball 1.5s 1 linear  .8s both;
    animation:fireball 1.5s 1 linear  .8s both;
    opacity:1;
}

/*小火球图片本身*/
@keyframes fire{
    0%{ zoom:1;opacity:0;}
    1%{opacity:1;opacity:1;}
    28%{ zoom:1; }
    50%{zoom:.95;}
    60%{zoom:.95;}
    80%{ zoom:1; }
    100%{zoom:1;opacity:1;}

    /*0%{ zoom:1;opacity:0;}*/
    /*1%{opacity:1;opacity:1;}*/
    /*30%{ zoom:1; }*/
    /*50%{zoom:.8;}*/
    /*60%{zoom:.8;}*/
    /*80%{ zoom:1; }*/
    /*100%{zoom:1;opacity:1;}*/
}
@-webkit-keyframes fire{
    0%{ zoom:1;opacity:0;}
    1%{opacity:1;opacity:1;}
    28%{ zoom:1; }
    50%{zoom:.95;}
    60%{zoom:.95;}
    80%{ zoom:1; }
    100%{zoom:1;opacity:1;}
}
.fire_body{
    -webkit-animation:fire 1.5s 1 linear .8s both;
    -moz-animation:fire 1.5s 1 linear .8s both;
    -o-animation:fire 1.5s 1 linear .8s both;
    -ms-animation:fire 1.5s 1 linear .8s both;
    animation:fire 1.5s 1 linear .8s both;
    opacity:1;
}
/*火球浮动*/
@keyframes fudong {
    0%,100%{transform: translate3d(0px, 0px, 0) rotate(0deg);}
    50%{
        transform: translate3d(0px, -18px, 0);
    }
}
@-webkit-keyframes fudong {
    0%,100%{transform: translate3d(0px, 0px, 0) rotate(0deg);}
    50%{
        transform: translate3d(0px, -18px, 0);
    }
}
#page1-fire{
    -webkit-animation:fudong 4s infinite linear 1.8s both;
    -moz-animation:fudong 4s infinite linear 1.8s both;
    -o-animation:fudong 4s infinite linear 1.8s both;
    -ms-animation:fudong 4s infinite linear 1.8s both;
    animation:fudong 4s infinite linear 1.8s both;
    opacity:1;
}

/*小火球轨道*/
@keyframes fire_track {
    0%,99%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes fire_track {
    0%,99%{opacity:0;}
    100%{opacity:1;}
}
.fire_track{
    -webkit-animation:fire_track .5s 1 ease-in 1.4s both;
    -moz-animation:fire_track .5s 1 ease-in 1.4s both;
    -o-animation:fire_track .5s 1 ease-in 1.4s both;
    -ms-animation:fire_track .5s 1 ease-in 1.4s both;
    animation:fire_track .5s 1 ease-in 1.4s both;
    opacity:1;
}

/*头图文字序列帧*/
@keyframes font_frames {
    /*0%{background-position:-0px 0;opacity: 0;}*/
    /*4%{background-position:-714px 0;opacity: 0.04;}*/
    /*8%{background-position:-1428px 0;opacity: 0.12;}*/
    /*12%{background-position:-2142px 0;opacity: 0.2;}*/
    /*16%{background-position:-2856px 0;opacity: 0.28;}*/
    /*20%{background-position:-3570px 0;opacity: 0.36;}*/
    /*24%{background-position:-4284px 0;opacity: 0.44;}*/
    /*28%{background-position:-4998px 0;opacity: 0.52;}*/
    /*32%{background-position:-5712px 0;opacity: 0.60;}*/
    /*36%{background-position:-6426px 0;opacity: 0.68;}*/
    /*40%{background-position:-7140px 0;opacity: 0.76;}*/
    /*44%{background-position:-7854px 0;opacity: 0.84;}*/
    /*48%{background-position:-8568px 0;opacity: 0.92;}*/
    /*52%{background-position:-9282px 0;opacity: 1;}*/
    /*56%{background-position:-9996px 0;opacity: 1;}*/
    /*60%{background-position:-10710px 0;opacity: 1;}*/
    /*64%{background-position:-11424px 0;opacity: 1;}*/
    /*68%{background-position:-12138px 0;opacity: 1;}*/
    /*72%{background-position:-12852px 0;opacity: 1;}*/
    /*76%{background-position:-13566px 0;opacity: 1;}*/
    /*80%{background-position:-14280px 0;opacity: 1;}*/
    /*84%{background-position:-14994px 0;opacity: 1;}*/
    /*88%{background-position:-15708px 0;opacity: 1;}*/
    /*92%{background-position:-16422px 0;opacity: 1;}*/
    /*96%{background-position:-17136px 0;opacity: 1;}*/
    /*100%{background-position: -17136px 0px;opacity:1;}*/
    0%{background-position:-0px 0;opacity: 0;}
    4%{background-position:-719px 0;opacity: 0.04;}
    8%{background-position:-1438px;opacity:0.12;}
    12%{background-position:-2157px 0;opacity:0.2;}
    16%{background-position:-2876px 0;opacity:0.28;}
    20%{background-position:-3595px 0;opacity:0.36;}
    24%{background-position:-4314px 0;opacity:0.44;}
    28%{background-position:-5033px 0;opacity:0.52;}
    32%{background-position:-5752px 0;opacity:0.60;}
    36%{background-position:-6471px 0;opacity:0.68;}
    40%{background-position:-7190px 0;opacity:0.76;}
    44%{background-position:-7909px 0;opacity:0.84;}
    48%{background-position:-8628px 0;opacity:0.92;}
    52%{background-position:-9347px 0;opacity: 1;}
    56%{background-position:-10066px 0;opacity: 1;}
    60%{background-position:-10785px 0;opacity: 1;}
    64%{background-position:-11504px 0;opacity: 1;}
    68%{background-position:-12223px 0;opacity: 1;}
    72%{background-position:-12942px 0;opacity: 1;}
    76%{background-position:-13661px 0;opacity: 1;}
    80%{background-position:-14380px 0;opacity: 1;}
    84%{background-position:-15099px 0;opacity: 1;}
    88%{background-position:-15818px 0;opacity: 1;}
    92%{background-position:-16537px 0;opacity: 1;}
    96%{background-position:-17256px 0;opacity: 1;}
    100%{background-position: -17256px 0;opacity:1;}
}
@-webkit-keyframes font_frames {
    /*0%{background-position:-0px 0;opacity: 0;}*/
    /*4%{background-position:-714px 0;opacity: 0.04;}*/
    /*8%{background-position:-1428px 0;opacity: 0.12;}*/
    /*12%{background-position:-2142px 0;opacity: 0.2;}*/
    /*16%{background-position:-2856px 0;opacity: 0.28;}*/
    /*20%{background-position:-3570px 0;opacity: 0.36;}*/
    /*24%{background-position:-4284px 0;opacity: 0.44;}*/
    /*28%{background-position:-4998px 0;opacity: 0.52;}*/
    /*32%{background-position:-5712px 0;opacity: 0.60;}*/
    /*36%{background-position:-6426px 0;opacity: 0.68;}*/
    /*40%{background-position:-7140px 0;opacity: 0.76;}*/
    /*44%{background-position:-7854px 0;opacity: 0.84;}*/
    /*48%{background-position:-8568px 0;opacity: 0.92;}*/
    /*52%{background-position:-9282px 0;opacity: 1;}*/
    /*56%{background-position:-9996px 0;opacity: 1;}*/
    /*60%{background-position:-10710px 0;opacity: 1;}*/
    /*64%{background-position:-11424px 0;opacity: 1;}*/
    /*68%{background-position:-12138px 0;opacity: 1;}*/
    /*72%{background-position:-12852px 0;opacity: 1;}*/
    /*76%{background-position:-13566px 0;opacity: 1;}*/
    /*80%{background-position:-14280px 0;opacity: 1;}*/
    /*84%{background-position:-14994px 0;opacity: 1;}*/
    /*88%{background-position:-15708px 0;opacity: 1;}*/
    /*92%{background-position:-16422px 0;opacity: 1;}*/
    /*96%{background-position:-17136px 0;opacity: 1;}*/
    /*100%{background-position: -17136px 0px;opacity:1;}*/
    0%{background-position:-0px 0;opacity: 0;}
    4%{background-position:-719px 0;opacity: 0.04;}
    8%{background-position:-1438px;opacity:0.12;}
    12%{background-position:-2157px 0;opacity:0.2;}
    16%{background-position:-2876px 0;opacity:0.28;}
    20%{background-position:-3595px 0;opacity:0.36;}
    24%{background-position:-4314px 0;opacity:0.44;}
    28%{background-position:-5033px 0;opacity:0.52;}
    32%{background-position:-5752px 0;opacity:0.60;}
    36%{background-position:-6471px 0;opacity:0.68;}
    40%{background-position:-7190px 0;opacity:0.76;}
    44%{background-position:-7909px 0;opacity:0.84;}
    48%{background-position:-8628px 0;opacity:0.92;}
    52%{background-position:-9347px 0;opacity: 1;}
    56%{background-position:-10066px 0;opacity: 1;}
    60%{background-position:-10785px 0;opacity: 1;}
    64%{background-position:-11504px 0;opacity: 1;}
    68%{background-position:-12223px 0;opacity: 1;}
    72%{background-position:-12942px 0;opacity: 1;}
    76%{background-position:-13661px 0;opacity: 1;}
    80%{background-position:-14380px 0;opacity: 1;}
    84%{background-position:-15099px 0;opacity: 1;}
    88%{background-position:-15818px 0;opacity: 1;}
    92%{background-position:-16537px 0;opacity: 1;}
    96%{background-position:-17256px 0;opacity: 1;}
    100%{background-position: -17256px 0;opacity:1;}
}

 
.banner_font1{
    top: 300px;
    left: 240px;

    width:719px;
    height:184px;
    overflow: hidden;
    background-image: url('../image/combine.png');
    background-position: -17256px 0px;

    -webkit-animation:font_frames 1s steps(1)  both;
    -o-animation:font_frames 1s steps(1)  both;
    -moz-animation:font_frames 1s steps(1)  both;
    -ms-animation:font_frames 1s steps(1)  both;
    animation:font_frames 1s steps(1)  both;
}



/*新版文字进入效果*/
@keyframes bounceInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,120px,0);
        -ms-transform: translate3d(0,120px,0);
        transform: translate3d(0,120px,0);
    }
    100% {
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes bounceInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,120px,0);
        -ms-transform: translate3d(0,120px,0);
        transform: translate3d(0,120px,0);
    }
    100% {
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.font_bouce_in_up{
    -webkit-animation:bounceInUp2 .55s 1 linear .34s both;
    -moz-animation:bounceInUp2 .55s 1 linear .34s both;
    -o-animation:bounceInUp2 .55s 1 linear .34s both;
    -ms-animation:bounceInUp2 .55s 1 linear .34s both;
    animation:bounceInUp2 .55s 1 linear .34s both;
}