@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;box-sizing: border-box;}
html{height:100%;}
body{color:#333;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;}

.ico{width:23px;height:23px;position:absolute;}
.ico span.a1{display:block;width:100%;height:100%;background:url(http://img.crabchina.cn/topic/20150611/ico.png) center center no-repeat;background-size:contain;opacity:0;position:absolute;left:0;top:0;
	-webkit-transform:scale(0);
	transform:scale(0);
	-webkit-transition:all 0.8s linear 1s;
	transition:all 0.8s linear 1s;
}
.ico span.a2{display:block;width:100%;height:100%;background:url(http://img.crabchina.cn/topic/20150611/ico.png) center center no-repeat;background-size:contain;opacity:1;position:absolute;left:0;top:0;
	-webkit-transform:scale(0);
	transform:scale(0);
	-webkit-transition:all 0.8s linear 1s;
	transition:all 0.8s linear 1s;
}
.active .ico .a1{
	-webkit-transform:scale(1);
	transform:scale(1);
	opacity:1;
}
.active .ico .a2{
	-webkit-transform:scale(2);
	transform:scale(2);
	opacity:0;
}

.p1{background:url(http://img.crabchina.cn/topic/20150611/bg1.jpg) center center no-repeat;background-size:cover;}
.p1 .logo{width:70%;height:auto;position:absolute;top:3%;left:50%;margin-left:-35%;}
.p1 .text{width:80%;height:auto;position:absolute;top:26%;left:50%;margin-left:-40%;opacity:0;}
.p1 .text img{width:100%;height:auto;}
.p1 .text a.more{width:55px;height:15px;position:absolute;right:0;bottom:0;}
.p1.active .text{
	-webkit-animation:p1 1s ease-out 0.5s 1;
	animation:p1 1s ease-out 0.5s 1;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes p1{
0%{opacity:0;top:40%;}
100%{opacity:1;top:26%;}	
}
@keyframes p1{
0%{opacity:0;top:40%;}
100%{opacity:1;top:26%;}		
}

.p2{background:url(http://img.crabchina.cn/topic/20150611/bg2.jpg) center center no-repeat;background-size:cover;}
.p2 .a{width:90%;height:auto;left:50%;margin-left:-45%; top:10px; color:#000; text-align:center; font-size:18px;position:absolute;opacity:0;-webkit-transition:all 1s ease-out 0.5s;transition:all 1s ease-out 0.5s}
.p2.active .a{opacity:1;top:30px;}



.p3{background:url(http://img.crabchina.cn/topic/20150611/bg3.jpg) center center no-repeat;background-size:cover;}
.p3 .text{position:absolute;left:50%;top:80px;width:78%;height:auto; font-size:22px;margin-left:-39%; text-align:center; opacity:0;-webkit-transition:all 0.5s ease-out 1.5s;
transition:all 0.5s ease-out 1.5s;	}
.p3.active .text{opacity:1;top:70px;}
.p3 .ico{width:90%;height:auto;left:50%;margin-left:-45%; top:10px; color:#000; text-align:center; font-size:24px;position:absolute;opacity:0;
-webkit-transition:all 1s ease-out 0.5s;
transition:all 1s ease-out 0.5s}
.p3.active .ico{opacity:1;top:20px;}





.p4{background:url(http://img.crabchina.cn/topic/20150611/bg4.jpg) center center no-repeat;background-size:cover;}
.p4 .ico{left:50%;top:50%;margin:-220px 0 0 40px;}
.p4 .text{width:178px;height:151px;position:absolute;left:40%;top:50%;margin:-190px 0 0 -130px;opacity:0;-webkit-transition:all 1s ease-out 0.5s;transition:all 1s ease-out 0.5s;
}
.p4 .text img{width:100%;height:100%;}
.p4 .text a.more{width:55px;height:15px;position:absolute;left:0;bottom:0;}
.p4.active .text{opacity:1;left:50%;}



.p5{background:url(http://img.crabchina.cn/topic/20150611/bg5.jpg) center center no-repeat;background-size:cover;}
.p5 .ico{left:50%;top:50%;margin:20px 0 0 30px;}
.p5 .text{width:178px;height:151px;position:absolute;left:40%;top:50%;margin:60px 0 0 -130px;opacity:0;
	-webkit-transition:all 1s ease-out 0.5s;
	transition:all 1s ease-out 0.5s;
}
.p5 .text img{width:100%;height:100%;}
.p5 .text a.more{width:55px;height:15px;position:absolute;left:0;bottom:0;}
.p5.active .text{opacity:1;left:50%;}

.p6 .bg{background:url(http://img.crabchina.cn/topic/20150611/bg6.jpg) center center no-repeat;background-size:100% 100%;width:110%;height:100%;position:absolute;left:50%;top:0;margin-left:-55%;
	-webkit-animation:p9 6s linear 0s infinite;	animation:p9 6s linear 0s infinite;}
	
.p6 .ico{left:50%;top:50%;margin:-20px 0 0 -10px;}
.p6 .text{width:230px;height:151px;position:absolute;left:50%;top:50%;margin:-190px 0 0 -115px;top:40%;opacity:0;
	-webkit-transition:all 1s ease-out 0.5s;
	transition:all 1s ease-out 0.5s;
}
.p6 .text img{width:100%;height:100%;}
.p6 .text a.more{width:55px;height:15px;position:absolute;left:0;bottom:0;}
.p6.active .text{opacity:1;top:50%;}

.p7 .bg{background:url(http://img.crabchina.cn/topic/20150611/bg7.jpg) center center no-repeat;background-size:100% 100%;width:110%;height:100%;position:absolute;left:50%;top:0;margin-left:-55%;
	-webkit-animation:p9 6s linear 0s infinite;	animation:p9 6s linear 0s infinite;}
	
.p7 .ico{left:50%;top:50%;margin:40px 0 0 -50px;}
.p7 .text{width:281px;height:132px;position:absolute;left:50%;top:50%;margin:80px 0 0 -140px;left:60%;opacity:0;
	-webkit-transition:all 1s ease-out 0.5s;
	transition:all 1s ease-out 0.5s;
}
.p7 .text img{width:100%;height:100%;}
.p7 .text a.more{width:55px;height:15px;position:absolute;right:0;bottom:0;}
.p7.active .text{opacity:1;left:50%;}

.p8{background:url(http://img.crabchina.cn/topic/20150611/bg8.jpg) center center no-repeat;background-size:cover;}
.p8 .a{width:222px;height:27px;position:absolute;left:50%;top:50%;margin:100px 0 0 -150px;left:40%;opacity:0;
	-webkit-transition:all 1s ease-out 0.5s;
	transition:all 1s ease-out 0.5s;
}
.p8 .b{width:285px;height:60px;position:absolute;left:50%;top:50%;margin:150px 0 0 -150px;left:60%;opacity:0;
	-webkit-transition:all 1s ease-out 0.5s;
	transition:all 1s ease-out 0.5s;
}
.p8.active .a{opacity:1;left:50%;}
.p8.active .b{opacity:1;left:50%;}


.p9 .bg{background:#fcefdb;width:110%;height:100%;}
.p9 .a{width:50px;height:auto; text-align:center; font-size:35px; position:absolute;left:50%;top:24%; margin-left:-25px; opacity:0; -webkit-transition:all 1s ease-out 0.5s;transition:all 1s ease-out 0.5s;
}
.p9 .b{width:50px;height:auto; text-align:center; font-size:35px; position:absolute;left:50%;top:50%; margin-left:-25px; opacity:0; -webkit-transition:all 1.5s ease-out 1.5s;transition:all 1.5s ease-out 1.5s;}
.p9.active .a{opacity:1;}
.p9.active .b{top:48%;opacity:1;}



.p10{background:url(http://img.crabchina.cn/topic/20150611/bg10.jpg) center center no-repeat;background-size:cover;}
.p10 .a{width:68%;height:auto;position:absolute;left:50%;top:30px;margin-left:-34%;opacity:0;-webkit-transition:all 0.5s ease-out 1s;	transition:all 0.5s ease-out 1s;}
.p10.active .a{opacity:1; top:20px}



@-webkit-keyframes p9{
0%{left:50%;}
33%{left:48%;}
66%{left:52%;}
100%{left:50%;}	
}
@keyframes p9{
0%{left:50%;}
33%{left:48%;}
66%{left:52%;}
100%{left:50%;}	
}

@-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% {
	transform:perspective(600px) rotateY(90deg);
}
50% {
	transform:perspective(600px) rotateY(-30deg);
}
100% {
	transform:perspective(600px) rotateY(0deg);
}
}