.banner{
	background-image: url(?asset/jfrontend/cn/images/knowledge_banner_bg.jpg);
}

.wrap{
	background-color: #fff;
	padding: 4.792% 0 5.2%;
}
#pager{
	margin-bottom: 2.67%;
	font-size: 0;
}
#pager li{
	display: inline-block;
	vertical-align: top;
	width: 49.31%;
	margin-right: 1.38%;
	margin-bottom: 3.276%;
	-webkit-transition: box-shadow 0.3s;
	transition: box-shadow 0.3s;
}
#pager li:nth-child(even){
	margin-right: 0;
}
#pager li:hover{
	box-shadow: 0 0 16px rgba(0,0,0,0.09)
}
#pager .text-box{
	padding: 5.245% 3.5% 3.5%;
}
#pager .text-box h5{
	font-size: 16px;
	color: #222;
	font-weight: normal;
	max-height: 1.1em;
}
#pager .text-box p{
	font-size: 14px;
	color: #999;
	line-height: 2;
	max-height: 4em;
	margin: 2.63% 0 3.76%;
}
#pager .text-box .more{
	position:relative;
	z-index:1;
	overflow:hidden;
	display: inline-block;
	font-size:14px;
	color:#999;
	letter-spacing:1px;
	line-height: 1;
	text-transform:uppercase;
	border: 1px solid #999;
	padding:0.714em 1.5em 0.714em 1.5em;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#pager .text-box .more:hover{
	padding-left: 0.857em;
	padding-right: 2.143em;
	color: #fff;
	border-color: #ac1a2f;
}
#pager .text-box .more::before{
	content: "";
	background:rgba(0,0,0,0);
	width:0;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#pager .text-box .more:hover::before{
	width:100%;
	background: #ac1a2f;
}
#pager .text-box .more::after{
	font-family:FontAwesome;
	content:  "\f178";
	position:absolute;
	right:-1.5em;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#pager .text-box .more:hover::after{
	right: 0.857em;
}


@media only screen and (max-width:1024px) {



	.wrap{
		padding: 2.5rem 0 3rem;
	}
	#pager{
		margin-bottom: 1rem;
	}
	#pager li{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	#pager .text-box h5{
		font-size: 0.75rem;
	}
	#pager .text-box p{
		font-size: 0.625rem;
	}
	#pager .text-box .more{
		font-size: 0.625rem;
	}


}