@import "https://fonts.googleapis.com/css?family=Archivo+Black";
#newslist li{display:inline-block;vertical-align:top;width:calc(25% - 4px);margin-right:-4px;}
#newslist li .border{margin: 0 12px 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}
#newslist li .border .photo a p{position:absolute;top:0;left:0;background:#ad7ccc;color:#fff;font-size:14px;line-height:120%;overflow:hidden;padding:25px;max-width:30px}
#newslist li .border .news-info{background:#f7f7f7;padding:30px}
#newslist li .border .news-info .news-bottom{color:#00d2d0;font-size:7pt;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:132px;overflow:hidden}
#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: #c2c2c2;
}
@media screen and (max-width: 1440px) {
#newslist li{width:calc(33% - 4px);}
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
#newslist li{width:50%;}
#newslist li .border{margin:0 10px 20px}
}
@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}
}
@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}
#newslist li .border{margin: 0 5px 8px}
}