/* 主要架构*/
body{
	background-color: #000;
	overflow-x: hidden;
}
.jc-warp{
	width: 100%;
	perspective: 800px;
	perspective-origin: 0 50%;
}
.jc-content{
	width: 100%;
	background-color: #EEEEEE;
}
.jc-nav{
	width: 220px;
	height: 100%;
	position: fixed;
	left: -214px;
	top: 0;
	z-index: 1;
	background-color: #333;
	color: #eee;
}
.jc-nav:hover{
	left:0;
	transition: left 0.8s;
}
.jc-nav:hover>.jc-nav-ctrl{
	color: transparent;
}
.jc-nav:hover+.jc-warp .jc-content{
	transform-origin: left;
	animation: containerMove 0.8s forwards;
} 
 @keyframes containerMove{
	from{
		transform: rotateY(0deg);
		margin-left: 0;
	}
	to{
		transform: rotateY(20deg);
		margin-left: 220px;
	}
}

/* 导航 */
.jc-nav{
	padding-top: 50px;
}
/* 手指 */
.jc-nav-ctrl{
	position: absolute;
	right: -40px;
	top: 50%;
	color: #333;
	font-size: 30px;
	margin-top: -30px;
	animation: jcNavCtrl 2s ease-in-out infinite;
}
@keyframes jcNavCtrl{
	from{
		right: -40px;	
	}
	to{
		right: -50px;
	}
}
.jc-nav ul>li{
	text-align: center;
	font-size: 20px;
	line-height: 50px;
}
.jc-nav ul>li:hover{
	background-color: #222;
}
.jc-nav ul>li>a:hover{
	color: #fcc7f6;
}
/* banner */
.jc-banner{
	height:100vh;
	background-color: blueviolet;
	font-size: 200px;
	line-height: 100vh;
	text-align: center;
}
/* 主体内容部分 */
.jc-body{
	
}
/* 底部 */
.jc-footer{
	text-align: center;
	line-height: 1.5;
	font-size: 12px;
	color: #888;
	background-color: #222;
	padding-bottom: 8px;
	padding-top: 8px;
}
/* 樱花 */
.yinghua{
    opacity: 0.5;
    position: fixed;
	z-index: 6;
}




/* 移动端导航 */
@media screen and (max-width:992px){
	.jc-nav{
		width: 160px;
		left: -154px;
	}
	 @keyframes containerMove{
		from{
			transform: rotateY(0deg);
			margin-left: 0;
		}
		to{
			transform: rotateY(20deg);
			margin-left: 160px;
		}
	}
	.jc-nav-ctrl{
		font-size: 26px;
	}
	@keyframes jcNavCtrl{
		from{
			right: -30px;	
		}
		to{
			right: -40px;
		}
	}
	/* 导航 */
	.jc-nav{
		padding-top: 40px;
	}
	.jc-nav ul>li{
		font-size: 16px;
		line-height: 40px;
	}
	.jc-footer{
		line-height: 1;
	}
}