@charset "utf-8";

body{background:#eeeeee;width:100%;height:100%;overflow:hidden;}

.kuang{position: absolute;top:0;bottom:0;left:0;right:0;z-index:99999999;}

.box{background: no-repeat center 0 #fff;height:950px;width:1550px;overflow:hidden;position:absolute;top:0;bottom:0;left:50%;margin-left:-775px;}

.scroll { position: absolute;display:none;z-index:99999;}

.page{float:left;position:relative;overflow:hidden;opacity:0;}
.page.on{animation:fadein 2s;-moz-animation:fadein 2s; /* firefox */-webkit-animation:fadein 2s; /* safari and chrome */-o-animation:fadein 2s; /* opera */opacity:1;}

.box0{width:1550px;background: no-repeat center 0;}
.on .p0_1{position:absolute;height:515px;background: no-repeat 0 bottom;bottom:0;left:0;right:0;animation:bounceinup 1s;-moz-animation:bounceinup 1s; /* firefox */-webkit-animation:bounceinup 1s; /* safari and chrome */-o-animation:bounceinup 1s; /* opera */}
.on .p0_2{position:absolute;width:792px;height:696px;background: no-repeat 0 bottom;right:5%;top:2%;animation:zoomindown 3s;-moz-animation:zoomindown 3s; /* firefox */-webkit-animation:zoomindown 3s; /* safari and chrome */-o-animation:zoomindown 3s; /* opera */}
.on .p0_3{position:absolute;width:0;height:434px;background: no-repeat 0 0;left:39%;top:55%;animation:show02 5s;-moz-animation:show02 5s; /* firefox */-webkit-animation:show02 5s; /* safari and chrome */-o-animation:show02 5s; /* opera */animation-delay:2s;-webkit-animation-delay:2s; /* safari 和 chrome */animation-fill-mode: forwards;}
.on .p0_4{position:absolute;width:173px;height:95px;background: no-repeat 0 bottom;left:75%;top:8%;animation:zoomin 3s;-moz-animation:zoomin 3s; /* firefox */-webkit-animation:zoomin 3s; /* safari and chrome */-o-animation:zoomin 3s; /* opera */}
.on .p0_5{position:absolute;width:856px;height:0px;background: no-repeat 0 0;left:43%;top:60%;animation:show01 5s linear;-moz-animation:show01 5s linear; /* firefox */-webkit-animation:show01 5s linear; /* safari and chrome */-o-animation:show01 5s linear; /* opera */animation-fill-mode: forwards;}

@keyframes show01
{
from {height:0;}
to {height:248px}
}

@-moz-keyframes show01 
{
from {height:0;}
to {height:248px}
}

@-webkit-keyframes show01 
{
from {height:0;}
to {height:248px}
}

@-o-keyframes show01 
{
from {height:0;}
to {height:248px}
}


/**/
@keyframes show02
{
from {width:0;}
to {width:482px}
}

@-moz-keyframes show02 
{
from {width:0;}
to {width:482px}
}

@-webkit-keyframes show02 
{
from {width:0;}
to {width:482px}
}

@-o-keyframes show02 
{
from {width:0;}
to {width:482px}
}


.box1{width:540px;background: no-repeat right 0;}

.on .p1_1{position:absolute;width:122px;height:500px;background: no-repeat 0 bottom;right:15%;top:7%;animation:slideindown 3s;-moz-animation:slideindown 3s; /* firefox */-webkit-animation:slideindown 3s; /* safari and chrome */-o-animation:slideindown 3s; /* opera */}

.on .p1_2{position:absolute;width:222px;height:552px;background: no-repeat 0 bottom;right:15%;top:8%;animation:slideinup 3s;-moz-animation:slideinup 3s; /* firefox */-webkit-animation:slideinup 3s; /* safari and chrome */-o-animation:slideinup 3s; /* opera */}


.con{width:1570px;background: no-repeat right 0;}

.on .p2_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p2_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p3_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p3_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p4_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p4_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}


.box5{width:540px;background: no-repeat right 0;}

.on .p5_1{position:absolute;width:115px;height:668px;background: no-repeat 0 bottom;left:11%;top:7%;animation:slideindown 3s;-moz-animation:slideindown 3s; /* firefox */-webkit-animation:slideindown 3s; /* safari and chrome */-o-animation:slideindown 3s; /* opera */}

.on .p5_2{position:absolute;width:312px;height:746px;background: no-repeat 0 bottom;right:10%;top:9%;animation:slideinup 3s;-moz-animation:slideinup 3s; /* firefox */-webkit-animation:slideinup 3s; /* safari and chrome */-o-animation:slideinup 3s; /* opera */}


.on .p6_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p6_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p7_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p7_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}


.on .p8_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p8_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}


.box9{width:540px;background: no-repeat right 0;}

.on .p9_1{position:absolute;width:113px;height:558px;background: no-repeat 0 bottom;right:10%;top:7%;animation:slideindown 3s;-moz-animation:slideindown 3s; /* firefox */-webkit-animation:slideindown 3s; /* safari and chrome */-o-animation:slideindown 3s; /* opera */}

.on .p9_2{position:absolute;width:218px;height:644px;background: no-repeat 0 bottom;right:30%;top:7%;animation:slideinup 3s;-moz-animation:slideinup 3s; /* firefox */-webkit-animation:slideinup 3s; /* safari and chrome */-o-animation:slideinup 3s; /* opera */}


.on .p10_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p10_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p11_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p11_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p12_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p12_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p13_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p13_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}


.box14{width:540px;background: no-repeat right 0;}

.on .p14_1{position:absolute;width:125px;height:568px;background: no-repeat 0 bottom;right:10%;top:7%;animation:slideindown 3s;-moz-animation:slideindown 3s; /* firefox */-webkit-animation:slideindown 3s; /* safari and chrome */-o-animation:slideindown 3s; /* opera */}

.on .p14_2{position:absolute;width:218px;height:644px;background: no-repeat 0 bottom;left:21%;top:7%;animation:slideinup 3s;-moz-animation:slideinup 3s; /* firefox */-webkit-animation:slideinup 3s; /* safari and chrome */-o-animation:slideinup 3s; /* opera */}


.on .p15_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p15_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p16_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p16_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p17_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p17_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;bottom:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}

.on .p18_1{position:absolute;width:1550px;height:825px;background: no-repeat 0 bottom;right:0;top:0;animation:slideindown 1.5s;-moz-animation:slideindown 1.5s; /* firefox */-webkit-animation:slideindown 1.5s; /* safari and chrome */-o-animation:slideindown 1.5s; /* opera */}

.on .p18_2{position:absolute;width:1550px;height:125px;background: no-repeat 0 bottom;right:0;top:0;animation:slideinup 1.5s;-moz-animation:slideinup 1.5s; /* firefox */-webkit-animation:slideinup 1.5s; /* safari and chrome */-o-animation:slideinup 1.5s; /* opera */}


@media screen and (orientation: portrait) {
        .box {
            -webkit-transform:rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            overflow: hidden;
        }
		.kuang{display:none;}
        
    }
@media screen and (orientation: landscape) {
        .box {
            -webkit-transform:rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }
		.kuang{display:none;}
    }


/*音乐按钮*/
#audio_btn{width:43px;height:43px;background: no-repeat center 0;position: absolute;top:30px;right:30px;display:inline-block;z-index:999999999;}
#audio_btn.on{animation:yuan 2s infinite linear;-moz-animation:yuan 2s infinite linear; /* firefox */-webkit-animation:yuan 2s infinite linear; /* safari and chrome */-o-animation:yuan 2s infinite linear; /* opera */}

@keyframes yuan
{
from {transform:rotate(0);-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);}
to {transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
}

@-moz-keyframes yuan 
{
from {transform:rotate(0);-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);}
to {transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
}

@-webkit-keyframes yuan 
{
from {transform:rotate(0);-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);}
to {transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
}

@-o-keyframes yuan 
{
from {transform:rotate(0);-ms-transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);}
to {transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);}
}