#newslist li { float: left; margin-bottom: 30px }
#newslist li .border {position: relative;padding: 30px;background: rgb(163 92 143);}
#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: #fff;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: #a35c8f;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: #fff;}
#newslist li .border .news-info .news-bottom b {position: absolute;width: 40px;height: 40px;background: #411c35;border-radius: 50%;border: 1px solid #411c35;text-align: center;line-height: 40px;font-size: 15px;color: #fff;right: 0;top: 0;z-index:2;}
#newslist li .border .news-info h3 { overflow: hidden; margin: 10px 0; font-size: 24px; line-height: 110%; white-space: nowrap; text-overflow: ellipsis; }
#newslist li .border .news-info h3 a { font-weight: normal; color: #eaeaea; }

@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; }
}