#newslist li { float: left; margin-bottom: 30px; }
#newslist li .border { position: relative; background: rgb(25, 25, 25); }
#newslist li .border .photo { margin-top: 20px; position: relative; z-index: 1; overflow: hidden; }

#newslist li .border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 100%; position: relative; transition: all linear .2s; background-color: #fff; }
#newslist li .border .photo a:hover { background-size: auto 110%; }
#newslist li .border .photo a:hover:after { background: rgba(41, 42, 55, 0); }
#newslist li .border .photo h3 { padding: 15px 10px; background: #2B5180; position: absolute; bottom: 0px; width: 100%; left: 0px; transform: translateY(52px); transition: ease .3s; box-sizing: border-box; }
#newslist li .border .photo:hover h3 { transform: translateY(0px); }
#newslist li .border .photo h3 a { background-color: unset; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#newslist li .border .news-info { position: absolute; left: 0px; top: 0px; width: 100%; }
#newslist li .border .news-info .news-bottom { position: relative; }

#newslist li .border .news-info .news-bottom p { max-width: calc(100% - 70px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; z-index: 2; display: inline-block; background: #0971f2; border: 2px solid #0971f2; padding: 3px 9px; }
#newslist li .border .news-info .news-bottom p a { font-size: 15px; display: block; color: #fff; }
#newslist li .border .news-info .news-bottom b { position: absolute; right: 0; top: 0; border: 1px solid #191919; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #7b6341; font-size: 15px; z-index: 2; background: #582431; border-radius: 50%; }
#newslist li .border .news-info h3 { font-size: 24px; line-height: 110%; margin: 10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#newslist li .border .news-info h3 a { color: #eaeaea; font-weight: normal; }
#newslist li .border .news-info h3 a:hover, #newslist li .border .news-info .news-bottom p a:hover { color: #fff; }
@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; }
	#newslist li .border .news-info h3 { font-size: 20px; }
}