#newslist li { float: left; margin-bottom: 30px; }
#newslist li .border { position: relative; }
#newslist li .border .photo { position: relative; z-index: 1; }
#newslist li .border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 100%; position: relative; transition: all linear .3s; }
#newslist li .border .photo a:hover { background-size: auto 110%; }
#newslist li .border .photo a:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; background: rgba(0, 0, 0, 0.42); z-index: 2; transition: all linear .3s; }
#newslist li .border .photo a:hover:after { background: rgba(0, 0, 0, 0); }
#newslist li .border .news-info { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; z-index: 3; }
#newslist li .border .news-info .news-bottom {}
#newslist li .border .news-info .news-bottom p { display: inline-block; background: #8b0000; }
#newslist li .border .news-info .news-bottom p a { color: #fff; font-size: 14px; display: block; padding: 5px 15px; }
#newslist li .border .news-info h3 { margin: 20px; }
#newslist li .border .news-info h3 a { color: #fff; font-weight: 400; font-size: 17px; line-height: 120%; text-shadow: 0 0 2px #a77bb2, 0 0 2px #000, 0 0 2px #000; }

@media screen and (min-width: 1367px) {
	#newslist li { width: calc((100% - 60px) / 3); }
	#newslist li:nth-child(3n-1) { margin: 0 30px 30px; }
}
@media screen and (max-width: 1366px) {
	#newslist li { width: calc((100% - 30px) / 2); }
	#newslist li:nth-child(odd) { margin: 0 30px 30px 0; }
}
@media screen and (max-width: 640px) {
	#newslist li { width: calc((100% - 15px) / 2); margin-bottom: 15px; }
	#newslist li:nth-child(odd) { margin: 0 15px 15px 0; }
}
@media screen and (max-width: 480px) {
	#newslist li { width: 100%; margin-bottom: 15px; }
	#newslist li:nth-child(odd) { margin: 0 0 15px; }
}