/*fourbox*/
.fourbox{ background:#000; overflow:hidden; max-height:657px; position:relative; z-index:3;}
.fourbox .swiper-slide { float:left; height:100%; width:20%;}
.fourbox .swiper-slide a{ display:block; height:100%; position:relative; overflow:hidden; }
.cp-item a .tu{
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity:0.6;

-moz-transition: transform 8s,opacity .5s;
	-ms-transition: transform 8s,opacity .5s;
	-o-transition:transform 8s,opacity .5s;
	-webkit-transition:transform 8s,opacity .5s;
	transition: transform 8s,opacity .5s;



}
.cp-item a:hover .tu{ opacity:1;
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);


}
.cp-item a .biao{ width:120px; height:120px; border-radius:100%; left:50%; top:50%; position:absolute; background:rgba(225,37,26,.8); margin:-60px;
-moz-transform:scale(.6);
-ms-transform:scale(.6);
-o-transform:scale(.6);
-webkit-transform:scale(.6);
transform:scale(.6);
opacity:0;


}
.cp-item a .biao span{ width:30px; height:30px; border-radius:100%; border:3px solid #fff; display:block; position:absolute; left:50%; top:50%; 
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
margin:-5px 0 0 -5px;

}
.cp-item a .biao span:after{ content:""; display:block; width:14px; height:3px; position:absolute; background:#fff; border-radius:2px; left:50%; top:50%;
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.cp-item a .biao span:before{ content:""; display:block; width:3px; height:14px; position:absolute; background:#fff; border-radius:2px; left:50%; top:50%;
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.cp-item a .biao:after{content:""; width:20px; height:3px; background:#fff; border-radius:3px; position:absolute; display:block; left:50%; top:50%;
-moz-transform:translate(-50%,-50%) rotate(45deg);
-ms-transform:translate(-50%,-50%) rotate(45deg);
-o-transform:translate(-50%,-50%) rotate(45deg);
-webkit-transform:translate(-50%,-50%) rotate(45deg);
transform:translate(-50%,-50%) rotate(45deg);
margin:11px 0 0 11px;
  }

.cp-item a:hover .biao{
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	-webkit-transform:scale(1);
	transform:scale(1);
	opacity:1;
	}
.cp-item a .href{ width:30px; line-height:30px; height:30%;

    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	position:absolute; z-index:1; bottom:2%; left:10%;
	color:rgba(255,255,255,.5); font-weight:bold; font-size:14px; letter-spacing:2px;
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);

}
.cp-item a:hover .href{ opacity:0; letter-spacing:20px;}
.cp-item a .title{ width:80%; left:10%; top:15%; position:absolute; text-align:left;}
.cp-item a .title .cn{ font-size:22px; line-height:30px; height:30px; overflow:hidden; color:rgba(255,255,255,1);}
.cp-item a .title .en{ font-size:16px; line-height:30px; height: auto; padding-top:5px; overflow:hidden; color:rgba(255,255,255,.5);}
.cp-item a:hover .title{ top:22%; opacity:0;}
.fourbox .swiper-pagination{ display:none;}

@media screen and (max-width:768px) {
.cp-item a:hover .href{ opacity:0; letter-spacing:20px;}
.cp-item a .title{ width:80%; left:10%; top:15%; position:absolute; text-align:left;}
.cp-item a .title .cn{ font-size:20px; line-height:40px; height:40px; overflow:hidden; color:rgba(255,255,255,1);}
.cp-item a .title .en{ font-size:15px; line-height:23px; height: auto; padding-top:0; overflow:hidden; color:rgba(255,255,255,.5);}
.cp-item a:hover .title{ top:22%; opacity:0;}
.fourbox .swiper-pagination{ display:none;}


.fourbox{ background:#000; overflow:hidden; max-height:650px; position:relative; z-index:3;}
.fourbox .swiper-slide { float:left; height: 100%; width: 20%;}
.fourbox .swiper-slide a{ display:block;  height: 100%; position:relative; overflow:hidden; }

}


.fourbox .btn.next {
	color: rgba(255,255,255,.6);
	padding-right: 20px;
	height: 30px;
	line-height: 30px;
	left: auto;
	right:3%;
	background: none;
	margin: 0px;
	top: 50%;
	margin-top:-15px;
	width: 60px;
	font-weight: bold;
	position: absolute;
	display: inline-block;
	z-index:999;
	cursor:pointer;
}

.fourbox .btn.next:after {
	content: "";
	display: block;
	position: absolute;
	right: 0px;
	top: 50%;
	margin-top: -5px;
	width: 8px;
	height: 8px;
	border-top: 2px solid rgba(255,255,255,.3);
	border-right: 2px solid rgba(255,255,255,.3);
	transform: rotate(45deg);
}

.fourbox .btn.next:before {
	content: "";
	display: block;
	position: absolute;
	right: 1px;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background: rgba(255,255,255,.3);
	width: 15px;
	border-radius: 0 1px 1px 0;
}

.fourbox .btn.prev {
	color: rgba(255,255,255,.6);
	padding-left: 20px;
	text-align: right;
	height: 30px;
	line-height: 30px;
	top: 50%;
	margin-top:-15px;
	left:3%;
	background: none;
	width: 60px;
	font-weight: bold;
	position: absolute;
	display: inline-block;
	z-index:999;
	cursor:pointer;
}

.fourbox .btn.prev:after {
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -5px;
	width: 8px;
	height: 8px;
	border-top: 2px solid rgba(255,255,255,.3);
	border-left: 2px solid rgba(255,255,255,.3);
	transform: rotate(-45deg);
}

.fourbox .btn.prev:before {
	content: "";
	display: block;
	position: absolute;
	left: 1px;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background: rgba(255,255,255,.3);
	width: 15px;
	border-radius: 0 1px 1px 0;
}