#newslist li { float: left; margin-bottom: 30px; }
#newslist li .border { position: relative; background: #f9f9f9; padding: 30px; }
#newslist li .border .photo { margin-top: 20px; position: relative; z-index: 1; border: 1px solid #d6d6d6; }
#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 .news-info { position: relative; }
#newslist li .border .news-info .news-bottom { position: relative; }
#newslist li .border .news-info .news-bottom:after { content: ''; display: block; width: calc(100% + 30px); height: 1px; background: #d6d6d6; position: absolute; left: 0; top: 21px; z-index: 1; }
#newslist li .border .news-info .news-bottom p { padding-top: 10px; max-width: calc(100% - 70px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; z-index: 2; display: inline-block; background: #f9f9f9; padding-right: 10px; }
#newslist li .border .news-info .news-bottom p a { font-size: 15px; display: block; color: #a0a0a0; }
#newslist li .border .news-info .news-bottom b { position: absolute; right: 0; top: 0; border: 1px solid #d6d6d6; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #bd3738; font-size: 15px; z-index: 2; background: #f9f9f9; }
#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: #3e3e3e; font-weight: normal; }
#newslist li .border .news-info h3 a:hover, #newslist li .border .news-info .news-bottom p a:hover { color: #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; }
	#newslist li .border .news-info h3 { font-size: 20px; }
}