@import "https://fonts.googleapis.com/css?family=Archivo+Black";

#newslist ul{display: flex;flex-wrap: wrap;}

#newslist li{display:inline-block;vertical-align:top;width: calc((100% / 4) - 22px);margin: 10px 10px;border: 1px solid #dbdbdb;background-color: #fff;}

#newslist li .border{margin: 0 0px 24px;}

#newslist li .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}

#newslist li .border .photo a img{width:100%;transition:all linear .3s;margin: -81px 0 -26px 0px;}

#newslist li .border .photo a p{position:absolute;top:0;left:0;background: #393939;color:#fff;font-size:14px;line-height:120%;overflow:hidden;padding:25px;max-width:30px;display: none;}

#newslist li .border .news-info{background:#fff;padding:30px}

#newslist li .border .news-info .news-bottom{color: #e61111;font-size:10pt;line-height:110%;font-family:'Archivo Black',sans-serif;}

#newslist li .border .news-info h3 a{font-size:16px;line-height:100%}

/* #newslist li .border .news-info h3:first-letter{font-size:28px;display:inline-block;line-height:100%} */

#newslist li .border .news-info .describe{color:#858585;font-size:15px;line-height:150%;margin:22px 0;max-height: initial;overflow: hidden;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}

#newslist li .border .photo a:after{content:'VIEW';position:absolute;top:calc(50% - 12px);left:calc(50% - 17px);font-family:'Archivo Black',sans-serif;color:#fff;font-size:12px;font-weight:400;transition:all linear .3s;transform:rotateY(270deg);opacity:0}

#newslist li .border .photo:hover a img{background:rgba(0,0,0,0.46)}

#newslist li .border .photo:hover a:after{opacity:1;transform:rotateY(360deg)}

#NewsBox .NewsMore p a:hover span{transform:scaleX(-1)}

.article-info {margin-bottom: 30px;}

.article-info a{color: #5d5d5d;}

.article-info ul li b{vertical-align: bottom;font-weight: 400;}



@media screen and (max-width: 1440px) {

	#newslist li{width: calc((100% / 3) - 22px);}

}

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

	#newslist ul{}

	#newslist li{width: calc((100% / 2) - 22px);}

}

@media screen and (max-width: 640px) {

	#newslist li .border .news-info{padding:20px}

	#newslist li .border .news-info .describe{margin:15px 0 22px;max-height:45px}

	#newslist li .border .photo a p{padding:10px}

    #newslist li{width: calc((100% / 1) - 22px);}

}

@media screen and (max-width: 480px) {

	#newslist li .border .news-info .news-bottom{font-size:5pt}

	#newslist li .border .news-info h3{overflow:hidden;height:55px}

	#newslist li .border .news-info .describe{margin:10px 0 18px}

}