.tabs {
	margin:0 auto;
	display:inline-block;
}
.tabs .tabs-item {
	position:relative;
	display:inline-block;
	border:0;
	background:transparent;
	margin-right:0;
	text-align:center;
	color:#7C89BB;
	text-transform:uppercase;
	text-decoration:none;
	font:18px/1 MicrosoftYaHei;
	cursor:pointer;
	z-index:10;
	padding:16px 0;
	font-size:14px;
	width:162px;
}
.tabs a:link,.tabs a:visited,.tabs a:hover,.tabs a:active {
	text-decoration:none
}
.tabs>.tabs-item::before,.tabs>.tabs-item:last-child::before {
	content:'';
	position:absolute;
	top:0;
	right:-4px;
	bottom:0;
	left:0;
	z-index:-1;
	background:#dedede;
	transform:skew(45deg);
	border-right:1px solid #3D3D3D;
}
.tabs>.tabs-item:first-child::after {
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:-23px;
	right:90px;
	z-index:-1;
	background:#dedede;
}
.tabs>.tabs-item:last-child::after {
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:60px;
	right:-26px;
	z-index:-1;
	background:#dedede;
}
.tabs .tabs-item:hover::before,.tabs>.tabs-item:last-child:hover::before,.tabs>.tabs-item:first-child:hover::after,.tabs>.tabs-item:first-child:hover::before,.tabs>.tabs-item:last-child:hover::after {
	background:#000;
}
.tabs .tabs-item:hover {
	color:red;
}
.tabs .tabs-item.active {
	color:red;
	&:hover::before,&:last-child::before,&:first-child::after,&:first-child::before,&:last-child::after {
	background:#000;
}