.main .banner {
	height: 245px;
	background: url(../img/product.jpg?vv) center no-repeat;
}
.main .info-box {
    margin: 30px auto;
}
.main .info-box .category {
	float: left;
	box-sizing: border-box;
    width: 220px;
}
.main .info-box .category .category-title {
	display: block;
	padding: 0 20px;
	line-height: 60px;
	background: #355caf;
	font-size: 22px;
	color: #fff;
}
.main .info-box .category .category-item {
	display: block;
	padding: 0 20px;
	margin-right: -15px;
	line-height: 45px;
	background: #f3f5f8;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}
.main .info-box .category .category-item.active {
	position: relative;
	z-index: 1;
	overflow: hidden;
	color: blue;
}
.main .info-box .category .category-item.active::before {
	position: absolute;
	left: 0;
	content: "";
	width: 220px;
	height: 100%;
	z-index: -1;
	box-shadow: inset 6px 6px 10px 0 rgba(55,99,170,.11),inset -6px -6px 10px 0 #fff;
}
.main .info-box .category .category-item.active::after {
	position: absolute;
	left: 0;
	top: 100%;
	content: "";
	width: 220px;
	height: 100%;
	z-index: 2;
	box-shadow: 6px -6px 10px 0 rgba(55,99,170,.11),-6px 6px 10px 0 #fff;
}
.main .info-box .category .category-item.active:hover {
	background: #f3f5f8;
}
.main .info-box .category .category-item:hover {
	background: #f5f7fa;
}

.main .info-box .content {
	float: left;
	box-sizing: border-box;
	border: 1px solid #eef;
	padding: 20px;
    width: 960px;
    min-height: 622px;
	background: #f3f5f8;
	box-shadow: inset 6px 6px 10px 0 rgba(55,99,170,.11),inset -6px -6px 10px 0 #fff;
}
.main .info-box .content .content-item-box {
	display: none;
	z-index: 3;
}
.main .info-box .content .content-item-box.active {
	display: block;
}
.main .info-box .content .content-item-box .content-item {
	display: inline-block;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 222px;
	height: 222px;
}
.main .info-box .content .content-item-box .content-item img {
	width: 222px;
	height: 222px;
}
.main .info-box .content .content-item-box .content-item:nth-child(4n+4) {
	margin-right: 0;
	width: 222px;
}
.main .info-box .content .content-item-box .content-item:hover {
	box-shadow: 0 0 5px #333;
	animation: anima .5s linear;
}
@keyframes anima {
	0%, 100% {
		transform: scaleX(1);
    	transform: translateY(0);
    }
	25% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(-15px);
	}
	75% {
		ransform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}