body{
	overflow-x: hidden;
	overflow-y: hidden;
}
.bodybg{
	/*background-image: url(../img/bg-pattern.gif);*/
	background-color: rgba(0,0,0,.8);
}
.content{
	width: 100%;
	position: absolute;
	top: 50px;
	bottom: 0px;
}
.content .con-directors{
	width: 100%;
	position: relative;
	height: 575px;
}
/*背景颜色*/
.con-directors .bacground-left{
	background-color: rgba(255,255,255,1);
	width: 0%;
	height: 100%;
	position: absolute;
	left: -4%;
	top: 0;
	transform: skewX(-10deg);
	/*z-index: -10;*/
	/*animation-name: bg-left-animation;
	animation-delay: 0.8s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;*/
	/*animation: bg-left-animation 0.8s 0.5s forwards;*/

	/*animation-fill-mode:  forwards;*/
}
.con-directors .bacground-right{
	background-color: rgba(255,255,255,1);
	width: 0%;
	height: 100%;
	position: absolute;
	right: -3%;
	top: 0;
	transform: skewX(-10deg);
	z-index: -10;
	/*animation-name: bg-right-animation;
	animation-delay: 0.8s;
	animation-duration: 0.5s;*/
	/*animation: bg-right-animation 0.8s 0.5s forwards;*/
	/*animation-fill-mode: ;*/
}
.con-directors .dir-catgory-left,.con-directors .dir-catgory-right{
	position: absolute;
	top: 13%;
	cursor: pointer;
}
.con-directors .dir-catgory-left{
	left: 10%;
	text-align: left;
	width: 465px;
	/*z-index: 10;*/
	/*-moz-transition: all 0.5s ease-out;*/
}
.con-directors .dir-catgory-right{
	left: 55%;
	text-align: right;
	width: 465px;
	position: relative;
	/*z-index: 10;*/
	/*-moz-transition: all 0.5s ease-out;*/
}
.con-directors .dir-catgory-left h1,.dir-catgory-right h1{
	font-size: 110px;
	line-height: 110px;
	color: #2f2f2f;
	font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
}

.con-directors .dir-catgory-left p,.dir-catgory-right p{
	font-size: 14px;
	line-height: 24px;
	color: #2f2f2f;
	font-family: "LetterGothicStd-Slanted", "Lucida Console", Monaco, monospace;
}
/*滑动条*/
.con-directors .dir-catgory-left span,.dir-catgory-right span{
	display: block;
	width: 143px;
	height: 9px;
	margin-top: 30px;
	background-color: #2F2F2F;
}
.dir-catgory-right span{
	position: absolute;
	right: 0;
}

.con-directors .dir-catgory-left:hover h1{
	color: #FFFFFF;
}
.con-directors .dir-catgory-left:hover p{
	color: darkgrey;
}
.con-directors .dir-catgory-right:hover h1{
	color: #FFFFFF;
}
.con-directors .dir-catgory-right:hover p{
	color: darkgrey;
}
.con-directors .dir-catgory-left:hover span{
	background-color: #e74c4c;
}
.con-directors .dir-catgory-right:hover span{
	background-color: #e74c4c;
}

/*中间那一条闪现的线*/
.dir_line{
	width: 10px;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	transform: skewX(-10deg);
}
.dir_line .line{
	width: 10px;
	height: 0%;
	background-color: rgba(255,255,255);
	animation-name: annotion;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;	
}
/*兼容谷歌*/
@keyframes annotion{
	from{
		height: 0%;
	}
	to{
		height: 100%;
	}
}
/*页面加载后左右两边的动画*/
/*@keyframes bg-left-animation{
	from{
		width:54%;
	}
	to{
		width: 0%;
	}
}
@keyframes bg-right-animation{
	from{
		width:53%;
	}
	to{
		width: 0%;
	}
}*/
/*兼容火狐*/
@-moz-keyframes annotion{
	from{
		height: 0%;
	}
	to{
		height: 100%;
	}
}
/*页面加载后左右两边的动画*/
/*@-moz-keyframes bg-left-animation{
	from{
		width:54%;
	}
	to{
		width: 0%;
	}
}
@-moz-keyframes bg-right-animation{
	from{
		width:53%;
	}
	to{
		width: 0%;
	}
}*/