html{font-size: 62.5%;height: 100%;}
body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{margin:0;padding:0}
body{font:1.6rem 'Microsoft Yahei';  color:#fff;background:#fff; min-width:320px;height: 100%;}
h1,h2,h3,h4,h5,h6{font-size:1.6rem;}  	
section,article{display: block;}

	#loading{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
		display: -webkit-box;
		-webkit-box-align:center;
		-webkit-box-pack:center;

	}
	#loading .icon{
		width: 32px;
		height: 32px;
	}
	#wrap{
		width: 100%;
		overflow: hidden;
		position: relative;
		height: 100%;
	}
	#scrollContent{
		width: 100%;
		position: absolute;
		-webkit-transform:translate3d(0px,0px,0px);
		-webkit-transition:all 0.4s linear;
	}
	#scrollContent .content{
		width: 100%;
		background-size: cover;
		overflow: hidden;
		position: relative;
	} 
	#c0{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/fpbg.jpg) no-repeat center center transparent;
		position: relative;
	}
	#c0 .fp1{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/fptitle1.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		top: 140px;
		left: 50%;
		margin-left: -98px;
		width: 196px;
		height: 51px;
		opacity: 0;
		-webkit-transition:all 0.7s linear;
		-webkit-transition-delay :0.2s;
	}
	#c0 .fp2{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/fptitle2.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		top: 200px;
		left: 50%;
		margin-left: -125px;
		width: 251px;
		height: 28px;
		opacity: 0;
		-webkit-transition:all 0.7s linear;
		-webkit-transition-delay :0.6s;
	}
	#c0 .fp3{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/fp.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		-webkit-transition:all 0.7s linear;
		-webkit-transition-delay :1.2s;

	}
	#c0 .fp3 img{
		visibility: hidden;
	}
	#c0 .dis{
		opacity: 1;
	}

	#c1{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c1bg.jpg) no-repeat center center transparent;
		position: relative;
			}
	#c1 .c11{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c11.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -25px;
		margin-left: -95px;
		width: 190px;
		height: 51px;
		opacity: 0;
		-webkit-transition:all 0.8s linear;
		-webkit-transition-delay :0.5s;
	}	
	#c1 .c12{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c12.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		right: 4%;
		top: 20%;
		width: 68px;
		height: 65px;
	}
	#c1 .c13{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c13.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		right: 2%;
		bottom: 23%;
		width: 100px;
		height: 100px;
		-webkit-transition:all 1.6s linear;
		-webkit-transition-delay :1.8s;
	}
	#c1 .c14{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c14.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 2%;
		bottom: 20%;
		width: 75px;
		height: 74px;
	}
	#c1 .c15{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c15.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 2%;
		top: 24%;
		width: 65px;
		height: 63px;
	}
	#c1 .dis{
		opacity: 1;
	}

	#c2{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c2bg.jpg) no-repeat center center transparent;
		position: relative;
	}
	#c2 .tipWrap{
		position: absolute;
		right: 10px;
		top: 20px;
		width: 147px;
		height: 330px;
	}
	#c2 .tip1{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/tip1.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 0%;
		top: 0%;
		width: 147px;
		height: 165px;
		-webkit-transition:all 0.4s linear;
		-webkit-transition-delay :0.4s;
		opacity: 0;
	}
	#c2 .tip2{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/tip2.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 0%;
		top: 195px;
		width: 146px;
		height: 143px;
		-webkit-transition:all 0.4s linear;
		-webkit-transition-delay:0.8s;
		opacity: 0;
	}	
	#c2 .c21{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c21.png) no-repeat center center transparent;
		background-size: cover;
		position: absolute;
		left: 50%;
		bottom: 35px;
		width: 291px;
		height: 57px;
		margin-left: -145px;
		-webkit-transform: rotateX(90deg);
		-webkit-transition:all 0.4s linear;
		-webkit-transition-delay :1.2s;
	}
	#c2 .rotateX{
		-webkit-transform: rotateX(0deg);
		-webkit-animation:rotateTip 2s ease-out backwards;

	} 
	@-webkit-keyframes rotateTip{
		0% {
			transform:perspective(400px) rotateX(90deg);
			opacity:0
		}
		40% {
			transform:perspective(400px) rotateX(-10deg)
		}
		70% {
			transform:perspective(400px) rotateX(10deg)
		}
		100% {
			transform:perspective(400px) rotateX(0);
			opacity:1
		}

	}

	#c2 .dis{
		opacity: 1;
	}

	#c3{
		position: relative;
	}
	#c3 .diqu{
		width: 100%;
		height: 100%;
		-webkit-transition:all 0.5s ease;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #fff4ed;
	}
	#c3 .diqu div{
		position: absolute;
		top: 0;
		left: 0;
		background-size: cover;
		width: 100%;
		height: 100%;
		
	}
	#c3 .wrap{
		opacity: 1;
		background-color: #fff4ed;
		
	}
	#diqu .c{
		display: none;
	}
	#c3 .adly{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/adly.jpg) no-repeat center center transparent;
	}
	#c3 .rb{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/rb.jpg) no-repeat center center transparent;
	}
	#c3 .mg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/mg.jpg) no-repeat center center transparent;
	}
	#c3 .fg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/fg.jpg) no-repeat center center transparent;
	}
	#c3 #diqu.opacity{
		opacity: 1;
		z-index: 9;
	}
	#c3 .front-bg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/dtadly.jpg) no-repeat center center transparent;
		background-size: cover; 
	}
	#c3 .back-bg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/dtfg.jpg) no-repeat center center transparent;
		background-size: cover; 
	}
	#c3 .left-bg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/dtmg.jpg) no-repeat center center transparent;
		background-size: cover; 
	}
	#c3 .right-bg{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/dtrb.jpg) no-repeat center center transparent;
		background-size: cover; 
	}

	#c4{
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/c4bg.jpg) no-repeat center center transparent;
		position: relative;
	}
	#c4 .share{
		width: 100%;
		height: 100%;
		background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/share.png) no-repeat center center transparent;
		background-size: cover; 
		display: none;
	}

	.hint{
		height:  12px;
		width: 15px;
		background-size:226px;
		z-index: 99;
		position: absolute;
		left: 50%;
		margin-left:-8px; 			
		opacity: 1;
		bottom: 24px;
		-webkit-animation:hint-move 1.2s infinite ease-in-out;
	}

	.hint img{
		width:100%;
	}

	@-webkit-keyframes hint-move{
		0%{opacity: 0 ;bottom: 3px;}
		70%{opacity: 1;bottom: 18px;}
		100%{opacity: 0;bottom: 24px;}
	}	

	.icon-scale{
		-webkit-animation:ring-scale 1s linear;
	}

	@-webkit-keyframes ring-scale {
		0%{  -webkit-transform:scale(0.85);}
		40%{  -webkit-transform:scale(0.85);}
		70%{  -webkit-transform:scale(1.3);}
		80%{  -webkit-transform:scale(0.8);}
		90%{  -webkit-transform:scale(1.2);} 
	}


/*长方体旋转*/
.cube-wrap {-webkit-perspective: 800px;-webkit-perspective-origin: 50% 100px;position: absolute;top: 0;left: 0;width: 100%;height: 100%;} 
.cube {position: relative;width: 100%;height: 100%;-webkit-transform-style: preserve-3d;} 
.cube div{position: absolute;width:100%;height:100%;background-color: #fff;}
.cube .cs{position: absolute;top:50%;left:50%;margin-left:-150px;margin-top:-225px; width: 300px;height: 450px;} 

.depth div.right-pane {-webkit-transform:rotateY(-270deg) translateX(100px);-webkit-transform-origin: top right;} 
.depth div.left-pane {-webkit-transform:rotateY(270deg) translateX(-100px);-webkit-transform-origin: center left;} 
.depth div.front-pane {-webkit-transform: translateZ(100px);} 

.cube-wrap.line .depth div.back-pane {-webkit-transform: translateZ(-100px) rotateY(180deg);} 
.front-bg{
	background:  url(http://y1.ifengimg.com/package/special_20141008_69958/images/adly.png) no-repeat center center transparent;
	background-size:cover;
	width: 100%;
	height: 100%;
}
.cube-wrap.line .cube {-webkit-transition:all 0.8s ;-webkit-transition-timing-function: ease;} 
.cube-wrap.line .cubeL {-webkit-transform: rotateY(360deg);-webkit-transition-delay:0.5s;}
.cube-wrap.line .cubeR {-webkit-transform: rotateY(-360deg);}
/*.cube-wrap.line .cubeR {-webkit-animation: spinR 1.5s;} 
.cube-wrap.line .cubeL {-webkit-animation: spinL 1.5s;} 
*/

@-webkit-keyframes spinR {from { -webkit-transform: rotateY(0); }to { -webkit-transform: rotateY(-360deg); }}
@-webkit-keyframes spinL {from { -webkit-transform: rotateY(0); }to { -webkit-transform: rotateY(360deg); }}

/*左右翻页提示*/
.guidePrev {
	background: url(http://y1.ifengimg.com/package/special_20141008_69958/images/hint.png) no-repeat center center transparent;
	background-size:cover;
	width: 15px;
	height: 12px;
	position: absolute;
	top: 50%;
	margin-top:;
	left: 18px;
	-webkit-transform:rotateZ(-90deg);
	z-index: 99;
}

.guidePrev.z-move {
	-webkit-animation: guidePrev 1.5s infinite;
}

.guideNext {
	background: url(http://y1.ifengimg.com/package/special_20141008_69958/images/hint.png) no-repeat center center transparent;
	background-size:cover;
	width: 15px;
	height: 12px;
	position: absolute;
	top: 50%;
	margin-top:;	
	right: 18px;
	-webkit-transform: rotateZ(90deg);
	z-index: 99;

}

.guideNext.z-move {
	-webkit-animation: guideNext 1.5s infinite
}

@-webkit-keyframes guidePrev {
	0%,20% {
		-webkit-transform: translateX(0px) rotateZ(-90deg)
	}

	35% {
		-webkit-transform: translateX(12px) rotateZ(-90deg)
	}

	50% {
		-webkit-transform: translateX(-20px) rotateZ(-90deg)
	}

	65% {
		-webkit-transform: translateX(0px) rotateZ(-90deg)
	}

	80% {
		-webkit-transform: translateX(-12px) rotateZ(-90deg)
	}

	100% {
		-webkit-transform: translateX(0px) rotateZ(-90deg)
	}
}

@-webkit-keyframes guideNext {
	0%,20% {
		-webkit-transform: translateX(0px) rotateZ(90deg)
	}

	35% {
		-webkit-transform: translateX(-12px) rotateZ(90deg)
	}

	50% {
		-webkit-transform: translateX(20px) rotateZ(90deg)
	}

	65% {
		-webkit-transform: translateX(0px) rotateZ(90deg)
	}

	80% {
		-webkit-transform: translateX(12px) rotateZ(90deg)
	}

	100% {
		-webkit-transform: translateX(0px) rotateZ(90deg)
	}
}