@CHARSET "UTF-8";

/*list*/
#_webZien ul{overflow:hidden; border-top:2px solid #000; border-bottom:1px solid #8c9099; padding:10px 0;}
#_webZien ul li{display:inline-block; position:relative; float:left; box-sizing:border-box; padding:20px; margin:10px 0; width:calc(100% / 4);}
#_webZien ul li a .thumbnail{height:260px;}
#_webZien ul li a{position:relative; display:block; border: 1px solid #d6d6d6;}
#_webZien ul li a:hover {border:1px solid #7787b4; background-color:#f6f8fa;}
#_webZien ul li a .artclInfo{text-align:center; box-sizing:border-box; padding:20px 0; line-height:1.6}
#_webZien ul li a .artclInfo .artclTitle{display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 20px;}
#_webZien ul li a .artclInfo .vol{color: #18327c;font-size: 16px;font-weight: 500;}
#_webZien ul li a .thumbnail {background: url(../images/thumBg.png) center center no-repeat;}
#_webZien ul li a .thumbnail img {left: 28%;position: absolute;top: 15.1111%;width: 45%;height: 45%;}
#_webZien ul li a:after{display:none;}
@media only screen and (max-width:1279px){
	#_webZien ul li{width:calc(100% / 3); padding:10px;}
}
@media only screen and (max-width:767px){
	#_webZien ul li a .thumbnail{height:230px;}
	#_webZien ul li{width:calc(100% / 2); padding:10px;}
}
@media only screen and (max-width:420px){
	#_webZien ul li a .thumbnail{height:270px;}
	#_webZien ul li{width:calc(100% / 1); padding:10px;}
}