#newslist li { float: left; margin-bottom: 30px }
#newslist li .border { position: relative; padding: 30px; background: rgb(25, 25, 25); }
#newslist li .border .photo { position: relative; margin-top: 20px; border: 1px solid #d6d6d6; z-index: 1; }
#newslist li .border .photo a { position: relative; background: #fff no-repeat 50% / auto 100%; display: block; transition: all linear .2s; }
#newslist li .border .news-info , #newslist li .border .news-info .news-bottom { position: relative; }
#newslist li .border .news-info .news-bottom:after {position: absolute;width: calc(100% + 30px);height: 1px;background: #393939;display: block;top: 21px;left: 0;z-index: 1;content: "";}
#newslist li .border .news-info .news-bottom p { overflow: hidden; position: relative; padding: 10px 10px 0 0; max-width: calc(100% - 70px); background: #191919; display: inline-block; white-space: nowrap; text-overflow: ellipsis; z-index: 2; }
#newslist li .border .news-info .news-bottom p a {display: block;font-size: 15px;color: #ffffff;}
#newslist li .border .news-info .news-bottom b {position: absolute;width: 40px;height: 40px;background: #ffc600;border-radius: 50%;border: 1px solid #191919;text-align: center;line-height: 40px;font-size: 15px;color: #7b6341;right: 0;top: 0;z-index:2;}
#newslist li .border .news-info h3 {overflow: hidden;margin: 10px 0;font-size: 26px;line-height: 110%;white-space: nowrap;text-overflow: ellipsis;}
#newslist li .border .news-info h3 a {font-weight: normal;color: #eaeaea;font-size: max(1.8 * (1vw + 1vh) / 2, 22px);}

@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 (min-width:1025px) {
	#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 .news-info h3 a:hover ,#newslist li .border .news-info .news-bottom p a:hover { color: #fff; }
}
@media screen and (max-width:640px) {
	#newslist li { margin-bottom: 15px; width: calc((100% - 15px) / 2); }
	#newslist li:nth-child(odd) { margin: 0 15px 15px 0; }
}
@media screen and (max-width:480px) {
	#newslist li { margin-bottom: 15px; width: 100%; }
	#newslist li:nth-child(odd) { margin: 0 0 15px; }
	#newslist li .border .news-info h3 { font-size: 20px; }
}