body{
	background-color: #f6f7fa;
}


/* ========== Tab begin ========== */
#tab{
	padding-top: 50px;
	min-height: 125px;
	margin-bottom: 10px;
}
#tab li{
	float: left;
	position: relative;
	min-width: 100px;
	margin-right: 20px;
	margin-bottom: 10px;
}
#tab li a{
	display: inline-block;
	width: 100%;
	height: 30px;
	border: 1px solid #e3e3e3;
	color: #333;
	border-radius: 30px;
	font-size: 17px;
	line-height: 30px;
	text-align: center;
	padding: 0 10px;
}
#tab li .active{
	border: 1px solid #1E4398;
	color: #1E4398;
}
#tab li:after{
	content: "";
	display: inline-block;
	width: 0;
	height: 30px;
	transition: .3s;
	background: #1E4398;
	border-radius: 30px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
#tab li:hover::after{
	width: 100%;
}
#tab li:hover a{
	color: #fff;
	border: 1px solid #1E4398;
}
/* ========== Tab end ========== */


/* ========== 列表 begin ========== */
#product{
	height: auto;
	min-height: 1000px;
}
#product li{
	/* float: left; */
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 40px;
	position: relative;
	top: 0;
	transition: .5s;
}
#product li:nth-child(4n+0){
	margin-right: 0;
}
#product li:hover{
	top: -10px;
	box-shadow: 1px 1px 20px #ccc;
}
#product li:hover a p{
	color: #1E4398;
}
#product li a{
	display: inline-block;
	width: 275px;
	height: 220px;
	padding-top: 20px;
	text-align: center;
	background-color: #fff;
}
#product li a div{
	width: 235px;
	height: 140px;
	overflow: hidden;
	text-align: center;
	display: inline-block;
}
#product li a div img{
	height: 140px;
}
#product li a p{
	margin-top: 10px;
	font-size: 18px;
	line-height: 36px;
	color: #000000;
	font-family: "microsoft yahei";
	width: 235px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* ========== 列表 end ========== */