@charset "utf-8";
/*
-webkit-animation:0.3s ease-in 1.1s 1 ui;
-webkit-animation-fill-mode:both;
input::-moz-placeholder{opacity:1;}
input::-webkit-input-placeholder{opacity:1;color:#060;}
*/

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, select {margin:0;padding:0;-webkit-box-sizing: border-box;box-sizing: border-box;}
html{height:100%;}
body{color:#707070;font-family:微软雅黑,'Heiti SC',黑体,Arial;}
ol,ul,li{list-style:none outside none;}
a{text-decoration:none;color:inherit;}
img{border:none;vertical-align:middle;max-width:100%;}
table{border-collapse:collapse;}
tr,td,th{padding:0;margin:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;color:#474747;line-height:120%;}
input,textarea,select,button{border:1px solid #CCC;font-family:微软雅黑,'Heiti SC',黑体,Arial;padding:0;margin:0;}

/*--类--*/
.clear{clear:both;height:0;overflow:hidden;}
.left{float:left;}
.right{float:right;}


@media screen and (min-width:540px){
	body{width:540px;}
	header{width:540px;}
}
@media screen and (max-width:320px){
	body{width:320px;}
	header{width:320px;}
}

body{background:#eee;}


@-webkit-keyframes right{ 0%{opacity:0;right:0%;} 100%{opacity:1;}	}
@keyframes right{ 0%{opacity:0;right:0%;} 100%{opacity:1;}	}
@-webkit-keyframes top{ 0%{opacity:0;top:0%;} 100%{opacity:1;}	}
@keyframes top{ 0%{opacity:0;top:0%;} 100%{opacity:1;}	}
@-webkit-keyframes bottom{ 0%{opacity:0;bottom:0%;} 100%{opacity:1;}}
@keyframes bottom{ 0%{opacity:0;bottom:0%;} 100%{opacity:1;}}
@-webkit-keyframes left{ 0%{opacity:0;left:2%;} 100%{opacity:1;}	}
@keyframes left{ 0%{opacity:0;left:0%;} 100%{opacity:1;}	}

.p1{background:url(../images/bg1.jpg?v=1?) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p1 .a1{width:100%;height:auto;position:absolute; right:50%; top:50%; margin-right:-50%;}
.p1 .a2{width:80%;height:auto;position:absolute; left:50%; top:30%; margin-left:-40%;opacity:0;}
.p1 .a3{width:64%;height:auto;position:absolute; left:50%; bottom:10%; margin-left:-32%;opacity:0;}
.p1.active .a1{
	-webkit-animation:right 1s ease-out 0.5s 1;
	animation:right 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p1.active .a2{
	-webkit-animation:top 1s ease-out 0.5s 1;
	animation:top 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p1.active .a3{
	-webkit-animation:bottom 1s ease-out 0.5s 1;
	animation:bottom 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}





.p2{background:url(../images/bg2.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p2 img.b1{width:60%;height:auto;position:absolute; left:10%; top:10%;}
.p2 img.b2{width:60%;height:auto;position:absolute; left:10%; top:25%;}
.p2 img.b3{width:60%;height:auto;position:absolute; left:10%; top:40%;}
.p2.active .b1{
	-webkit-animation:left 1s ease-out 0.5s 1;
	animation:left 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p2.active .b2{
	-webkit-animation:left 1.4s ease-out 0.7s 1;
	animation:left 1.4s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p2.active .b3{
	-webkit-animation:left 1.8s ease-out 0.9s 1;
	animation:left 1.8s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}




.p3{background:url(../images/bg3.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p3 img.c1{width:80%; height:auto; position:absolute; left:50%; top:24%; margin-left:-40%;}
.p3.active .c1{
	-webkit-animation:top 1s ease-out 0.5s 1;
	animation:top 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}



.p4{background:url(../images/bg4.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p4 img.d1{width:40%; margin-left:-20%; height:auto; position:absolute; left:50%; top:20%;}
.p4.active .d1{
	-webkit-animation:left 1s ease-out 0.5s 1;
	animation:left 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.p4 .main-con img.d2{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:40%;}
.p4 .main-con img.d3{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:48%;}
.p4 .main-con img.d4{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:56%;}
.p4 .main-con img.d5{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:64%;}
.p4 .main-con img.d6{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:72%;}
.p4 .main-con img.d7{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:80%;}
.p4 .main-con img.d8{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:88%;}
.p4.active .d2{
	-webkit-animation:right 0.4s ease-out 0.4s 1;
	animation:right 0.4s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d3{
	-webkit-animation:right 0.4s ease-out 0.8s 1;
	animation:right 0.4s ease-out 0.8s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d4{
	-webkit-animation:right 0.4s ease-out 1.2s 1;
	animation:right 0.4s ease-out 1.2s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d5{
	-webkit-animation:right 0.4s ease-out 1.6s 1;
	animation:right 0.4s ease-out 1.6s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d6{
	-webkit-animation:right 0.4s ease-out 2s 1;
	animation:right 0.4s ease-out 2s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d7{
	-webkit-animation:right 0.4s ease-out 2.4s 1;
	animation:right 0.4s ease-out 2.4s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p4.active .d8{
	-webkit-animation:right 0.4s ease-out 2.8s 1;
	animation:right 0.4s ease-out 2.8s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.p5{background:url(../images/bg5.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}

.ap5,.ap6,.ap7,.ap9,.ap92,.ap16,.ap162,.ap17,.ap18,.ap182{
	display: block;
    width: 100px;
    height: 40px;
    top: 45%;
    left: 35%;
    /*border:1px solid #f10;*/
    position: absolute;
}

.ap6{
	top: 31%;

    left: 45%;
}

.ap7{
	top: 40%;
    left: 28%;
}

.ap9{
	top: 45%;
    left: 13%;
}

.ap92{
	top: 72%;
    left: 34%;
}

.ap16{
	top: 23%;
    left: 16%;
    width: 66%;
}

.ap162{
	top: 31%;
    left: 16%;
    width: 31%;
}

.ap17{
	top: 54%;
    left: 54%;
    width: 32%;
}

.ap18{
	top: 30%;
    left: 27%;
    width: 41%;
}

.ap182{
	top: 37%;
    left: 12%;
    width: 32%;
}



@media  screen and (min-width: 400px) and (min-height:700px) {
.ap5{
	top: 45%;
}
.ap6{
	top: 31%;
}

.ap7{
	top: 39%;
	left: 27%;
}

.ap9{
	top: 45%;
	    left: 16%;
}

.ap92{
	top: 72%;
	left: 35%;
}

.ap16{
	top: 22%;
}

.ap162{
	top: 32%;
}

.ap17{
	top: 52%;
}

.ap18{
	top: 29%;
}

.ap182{
	top: 36%;

}

}

@media  screen and (max-width: 375px) and (min-height:700px) {
.ap5{
	top: 37%;
}
.ap6{
	top: 26%;
}

.ap7{
	top: 33%;
	left: 27%;
}

.ap9{
	top: 38%;
	left: 13%;
}

.ap92{
	top: 60%;
	left: 34%;
}

.ap16{
	top: 18%;
	left: 36%;
}

.ap162{
	top: 25%;
}

.ap17{
	top: 44%;
}

.ap18{
	top: 24%;
}

.ap182{
	top: 30%;

}

}

.p6{background:url(../images/bg6.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p7{background:url(../images/bg7.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p8{background:url(../images/bg8.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p9{background:url(../images/bg9.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p10{background:url(../images/bg10.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p11{background:url(../images/bg11.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p11{background:url(../images/bg20.png?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
img.e1{width:80%; margin-left:-40%; height:auto; position:absolute; left:50%; top:2%;}
.active .e1{
	-webkit-animation:top 1s ease-out 0.5s 1;
	animation:top 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}




.p15{background:url(../images/bg12.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p15 img.l1{width:40%; margin-left:-20%; height:auto; position:absolute; left:50%; top:20%;}
.p15.active .l1{
	-webkit-animation:left 1s ease-out 0.5s 1;
	animation:left 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15 .main-con img.l2{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:40%;}
.p15 .main-con img.l3{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:48%;}
.p15 .main-con img.l4{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:56%;}
.p15 .main-con img.l5{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:64%;}
.p15 .main-con img.l6{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:72%;}
.p15 .main-con img.l7{width:64%; margin-right:-32%; height:auto; position:absolute; right:50%; top:80%;}

.p15.active .l2{
	-webkit-animation:right 0.4s ease-out 0.4s 1;
	animation:right 0.4s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15.active .l3{
	-webkit-animation:right 0.4s ease-out 0.8s 1;
	animation:right 0.4s ease-out 0.8s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15.active .l4{
	-webkit-animation:right 0.4s ease-out 1.2s 1;
	animation:right 0.4s ease-out 1.2s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15.active .l5{
	-webkit-animation:right 0.4s ease-out 1.6s 1;
	animation:right 0.4s ease-out 1.6s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15.active .l6{
	-webkit-animation:right 0.4s ease-out 2s 1;
	animation:right 0.4s ease-out 2s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p15.active .l7{
	-webkit-animation:right 0.4s ease-out 2.4s 1;
	animation:right 0.4s ease-out 2.4s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}


.p13{background:url(../images/bg13.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p14{background:url(../images/bg14.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p15{background:url(../images/bg15.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p16{background:url(../images/bg16.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p17{background:url(../images/bg17.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p18{background:url(../images/bg18.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p19{background:url(../images/bg19.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}


.p20{background:url(../images/bg20.jpg?v=1) center center no-repeat;-webkit-background-size:cover;background-size:cover;}
.p20 .t1{width:80%;height:auto;position:absolute; left:50%; top:10%; margin-left:-40%;}
.p20 .t2{width:100%;height:auto;position:absolute; left:50%; bottom:8%; margin-left:-50%;opacity:0;}
.p20 .t3{width:160px;height:auto;position:absolute; left:50%; bottom:5%; margin-left:-80px;opacity:0;}
.p20 .tbtnx{
	width: 130px;
    height: auto;
    position: absolute;
    left: 33%;
    bottom: 9%; 
}
.p20.active .t1{
	-webkit-animation:top 1s ease-out 0.5s 1;
	animation:top 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p20.active .t2{
	-webkit-animation:left 1s ease-out 0.5s 1;
	animation:left 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.p20.active .t3{
	-webkit-animation:bottom 1s ease-out 0.5s 1;
	animation:bottom 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}



@-webkit-keyframes r3d{
0% {
	-webkit-transform:perspective(600px) rotateY(90deg);
}
50% {
	-webkit-transform:perspective(600px) rotateY(-30deg);
}
100% {
	-webkit-transform:perspective(600px) rotateY(0deg);
}
}
@keyframes r3d{
0% {
	-webkit-transform:perspective(600px) rotateY(90deg);
	        transform:perspective(600px) rotateY(90deg);
}
50% {
	-webkit-transform:perspective(600px) rotateY(-30deg);
	        transform:perspective(600px) rotateY(-30deg);
}
100% {
	-webkit-transform:perspective(600px) rotateY(0deg);
	        transform:perspective(600px) rotateY(0deg);
}
}