@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:url('bbg.jpg') 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:url('p0_bg.jpg') no-repeat center 0;}
.on .p0_1{position:absolute;height:515px;background:url('p0_t1.png') 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:url('p0_z2.png') 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:url('p0_z3.png') 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:url('p0_z4.png') 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:url('p0_z1.png') 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:url('p1_bg.jpg?1') no-repeat right 0;}

.on .p1_1{position:absolute;width:122px;height:500px;background:url('p1_z1.png') 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:url('p1_z2.png') 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:url('auto_bg.jpg') no-repeat right 0;}

.on .p2_1{position:absolute;width:1550px;height:825px;background:url('p2_t1.jpg?1') 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:url('p2_z1.png') 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:url('p3_t1.jpg') 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:url('p3_z1.png') 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:url('p4_t1.jpg') 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:url('p4_z1.png') 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:url('p5_bg.jpg') no-repeat right 0;}

.on .p5_1{position:absolute;width:115px;height:668px;background:url('p5_z1.png') 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:url('p5_z2.png') 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:url('p6_t1.jpg') 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:url('p6_z1.png') 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:url('p7_t1.jpg') 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:url('p7_z1.png') 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:url('p8_t1.jpg') 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:url('p8_z1.png') 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:url('p9_bg.jpg') no-repeat right 0;}

.on .p9_1{position:absolute;width:113px;height:558px;background:url('p9_z1.png') 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:url('p9_z2.png') 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:url('p10_t1.jpg') 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:url('p10_z1.png') 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:url('p11_t1.jpg') 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:url('p11_z1.png') 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:url('p12_t1.jpg') 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:url('p12_z1.png') 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:url('p13_t1.jpg') 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:url('p13_z1.png') 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:url('p14_bg.jpg') no-repeat right 0;}

.on .p14_1{position:absolute;width:125px;height:568px;background:url('p14_z1.png') 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:url('p14_z2.png') 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:url('p15_t1.jpg') 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:url('p15_z1.png') 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:url('p17_t1.jpg') 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:url('p17_z1.png') 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:url('p16_t1.jpg') 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:url('p16_z1.png') 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:url('p18_t1.jpg') 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:url('p18_z1.png') 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:url('play.png') 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);}
}