#newslist ul{display: flex;flex-wrap: wrap;}
#newslist li{width: calc((100%/3) - 40px);margin: 0 20px 30px;}
#newslist li .border{position:relative;overflow:hidden}
#newslist li .photo a{background-size:cover;position:relative;display:block;background-repeat:no-repeat;background-position:50% 50%}
#newslist li .photo a img{width:100%}
#newslist li .news-info{padding:20px;font-size:14px}
#newslist li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;line-height:110%}
#newslist li .news-info h3 a{overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-align: center;font-size: 17px;}
#newslist li .news-info .news-bottom{line-height:100%;font-size: 15px;display: none;}
#newslist li .news-info .news-bottom p a{font-size:14px}
#newslist li .news-info,#newslist li .photo a:before{transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;-webkit-transition:all linear .3s}
.article-info{margin-bottom:30px;}
@media screen and (min-width: 1025px) {
#newslist li .news-info{width:calc(100% - 40px);}
#newslist li:hover .news-info{opacity: .5;}
}
@media screen and (max-width: 1024px) {
#newslist li .news-info{padding:10px 20px}
#newslist li .news-info h3{margin-top:5px;font-size:17px}
#newslist li .news-info .news-bottom{overflow:hidden}
#newslist li .news-info .news-bottom p{float:left;margin-right:10px;max-width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media screen and (max-width: 768px) {
    #newslist li{width: calc((100%/2) - 40px);}
}
@media screen and (max-width: 640px) {
    #newslist li{width: 100%;margin: 0 0 30px;}
}