/*index*/

/*banner_start*/
.banner{
	width: 100%;
	height: 586px;
	background: #22252a;
	position: relative;
	overflow: hidden;
}

.banner ul{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.banner ul li{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

.banner ol{
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: center;
}

.banner ol li{
	cursor: pointer;
	width: 25px;
	height: auto;
	margin: 0 8px;
	vertical-align: middle;
	display: inline-block;
}

.banner ol li.active span{
	background: #fff;
}

.banner ol li span{
	width: 100%;
	height: 4px;
	margin: 8px 0;
	background: #333840;
	display: block;
	transition: .3s;
	-webkit-transition: .3s;
}

.banner .intro{
	position: absolute;
	left: 0;
	top: 200px;
	width: 500px;
	color: #fff;
}

.banner .intro p:nth-of-type(1){
	line-height: 100px;
	font-size: 50px;
}
.banner .intro p{
	line-height: 32px;
    font-size: 16px;
}

.banner ul li:nth-of-type(2) .img .bottom{
	margin: -320px 0 0 50px;
}

.banner .img{
	position: absolute;
	right: 0;
	top: 30px;
}

.banner .img .bottom{
	margin: -230px 0 0 0;
}

.banner ul li.active{
	display: block;
}

.banner ul li.active .intro{
	animation: admove .6s ease-in-out both;
	-webkit-animation: admove .6s ease-in-out both;
}

@keyframes admove{
	0%{
		opacity: 0;
		transform: translateX(200px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}
@-webkit-keyframes admove{
	0%{
		opacity: 0;
		-webkit-transform: translateX(200px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}

.banner ul li.active .img .top{
	animation: admove2 .6s ease-in-out both;
	-webkit-animation: admove2 .6s ease-in-out both;
}

@keyframes admove2{
	0%{
		opacity: 0;
		transform: translateY(160px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}
@-webkit-keyframes admove2{
	0%{
		opacity: 0;
		-webkit-transform: translateY(160px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

.banner ul li.active .img .bottom{
	animation: admove3 .9s ease-in-out both;
	-webkit-animation: admove3 .9s ease-in-out both;
}

@keyframes admove3{
	0%{
		opacity: 0;
		transform: translateY(120px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}
@-webkit-keyframes admove3{
	0%{
		opacity: 0;
		-webkit-transform: translateY(120px);
	}
	100%{
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}
/*banner_end*/

/*content_start*/
.content{
	width: 100%;
	height: auto;
}

/*wb_c1_start*/
.wb_c1{
	width: 100%;
	height: 120px;
	background: #333840;
}
.wb_c1_wrap{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.wb_c1_wrap li{
	float: left;
	width: 33.33%;
	height: 100%;
	border-left: 1px solid #44484d;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.wb_c1_wrap li:hover div{
	animation: wbMove 1s ease-in-out both;
	-webkit-animation: wbMove 1s ease-in-out both;
}
@keyframes wbMove{
	0%{
		transform: rotateZ(20deg);
	}
	20%{
		transform: rotateZ(-17deg);
	}
	40%{
		transform: rotateZ(14deg);
	}
	60%{
		transform: rotateZ(-11deg);
	}
	75%{
		transform: rotateZ(8deg);
	}
	90%{
		transform: rotateZ(-5deg);
	}
	100%{
		transform: rotateZ(0deg);
	}
}
@-webkit-keyframes wbMove{
	0%{
		-webkit-transform: rotateZ(20deg);
	}
	20%{
		-webkit-transform: rotateZ(-17deg);
	}
	40%{
		-webkit-transform: rotateZ(14deg);
	}
	60%{
		-webkit-transform: rotateZ(-11deg);
	}
	75%{
		-webkit-transform: rotateZ(8deg);
	}
	90%{
		-webkit-transform: rotateZ(-5deg);
	}
	100%{
		-webkit-transform: rotateZ(0deg);
	}
}
.wb_c1_wrap li a{
	width: 100%;
	height: 100%;
	display: block;
}
.wb_c1_wrap li:first-child{
	border-left: none;
}

.wb_c1_wrap li div{
	display: inline-block;
	height: 72px;
	overflow: hidden;
	padding: 28px 0 0 80px;
	font-size: 18px;
	color: #fff;

}

.wb_c1_wrap li div span{
	text-align: left;
	max-width: 240px;
	display: block;
	height: 20px;
	line-height: 20px;
}
.wb_c1_wrap li div span.smallSize{
	font-size:14px;
}

.wb_c1_wrap li div span:nth-child(2){
	margin: 8px 0 0 0;
}

.wb_c1_wrap li:nth-child(1){
	text-align: left;
}
.wb_c1_wrap li:nth-child(2){
	text-align: center;
}
.wb_c1_wrap li:nth-child(3){
	text-align: right;
}

.wb_c1_wrap li:nth-child(1) div{
	background: url(../images/wb_c1_1.png) no-repeat left 28px;
}
.wb_c1_wrap li:nth-child(2) div{
	background: url(../images/wb_c1_2.png) no-repeat left 28px;
}
.wb_c1_wrap li:nth-child(3) div{
	background: url(../images/wb_c1_3.png) no-repeat left 28px;
}

/*wb_c1_end*/

/*wb_c2_start*/
.wb_c2{
	width: 100%;
	height: 440px;
	background: #22252a;
}
.wb_c2_wrap{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.wb_c2_wrap dt{
	width: 100%;
	height: 90px;
	line-height: 90px;
	text-align: center;
	font-size: 30px;
	color: #fff;
	margin: 46px 0 0 0;
}
.wb_c2_wrap dd{
	width: 388px;
	height: 238px;
	float: left;
	margin: 0 0 0 18px;
	background: #fff;
	text-align: center;
}
.wb_c2_wrap dd:hover img{
	transform: rotateZ(-45deg);
}
.wb_c2_wrap dd a{
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
.wb_c2_wrap dd:nth-child(2){
	margin: 0;
}
.wb_c2_title{
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 16px;
	line-height: 16px;
	margin: 35px 0 0 0;
	font-size: 16px;
	color: #333;
}
.wb_c2_intro{
	padding: 0 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 12px 0 0 0;
	width: 100%;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	-webkit-line-clamp: 2;
}
.wb_c2_img{
	margin: 45px auto 0;
	width: 100px;
	height: 80px;
}
.wb_c2_img img{
	max-width: 100%;
	max-height: 100%;
	transition: .3s ease-in-out;
	transform-origin: left top;
}
/*wb_c2_end*/

/*wb_c3_start*/
.wb_c3{
	width: 100%;
	height: auto;
}
.wb_c3 img{
	width: 100%;
	height: auto;
}
/*wb_c3_end*/

/*wb_c4_start*/
.wb_c4{
	width: 100%;
	height: 430px;
	background: #212232;
}
.wb_c4 .hr{
	width: 100%;
	height: 85px;
	background: #fff;
}
.wb_c4_wrap{
	width: 1200px;
	height: 380px;
	margin: -65px auto 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.wb_c4_wrap ul{
	width: 10000px;
	height: 100%;
}
.wb_c4_wrap li{
	float: left;
	width: 300px;
	height: 100%;
	position: relative;
}
.wb_c4_wrap li:hover::before{
	background: rgba(0,0,0,.8);
}
.wb_c4_wrap li:hover .wb_c4_des{
	margin: -360px 0 0 0;
}
.wb_c4_wrap li:hover .wb_c4_con{
	opacity: 1;
}
.wb_c4_wrap li:hover .wb_c4_img img{
	transform: scale(1.1);
}
.wb_c4_wrap li::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	background: rgba(0,0,0,.6);
	transition: .4s ease-in-out;
}

.wb_c4_img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.wb_c4_img img{
	max-width: 100%;
	max-height: 100%;
	line-height: 380px;
	transition: 3.6s ease-in-out;
}

.wb_c4_des{
	margin: -260px 0 0 0;
	position: relative;
	z-index: 3;
	color: #fff;
	transition: .4s ease-in-out;
}
.wb_c4_con{
	opacity: 0;
	transition: .4s ease-in-out;
}
.wb_c4_ico{
	width: 150px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 0;
	margin: 0 auto;
}
.wb_c4_ico img{
	max-width: 100%;
	max-height: 100%;
}

.wb_c4_title{
	font-size: 24px;
	color: #fff;
	text-align: center;
}

.wb_c4_txt{
	width: 220px;
	line-height: 24px;
	-webkit-line-clamp: 4;
	margin: 20px auto 0;
	font-size: 14px;
	text-align: center;
}
.wb_c4_more{
	width: 100px;
	height: 34px;
	line-height: 34px;
	margin: 20px auto 0;
	border: 1px solid #fff;
	text-align: center;
	font-size: 14px;
}
.wb_c4_more a{
	width: 100%;
	height: 100%;
	display: block;
	color: #fff;
}
.wb_c4_more:hover a{
	color: #258fd2;
	background: #fff;
}

.wb_c4_btn{
	width: 1200px;
	height: 380px;
	margin: -380px auto 0;
	position: relative;
	z-index: 1;
}
.wb_c4_btn .btn{
	width: 70px;
	height: 100px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -50px;
}
.wb_c4_btn .left{
	left: -70px;
	background: url(../images/wb_c4_left.png) no-repeat center;
}
.wb_c4_btn .right{
	right: -70px;
	background: url(../images/wb_c4_right.png) no-repeat center;
}
/*wb_c4_end*/

/*content_end*/