#newslist{margin:50px 0 20px;position:relative;z-index:2;overflow: hidden;}
#newslist ul li{float:left;width:calc(100%/3)}
#newslist .border{margin:18px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:center;align-content:center}
#newslist .border .photo{width:100%}
#newslist .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size: cover;background-color: #ffffff;position:relative;}
#newslist .border .photo a img{width:100%}
#newslist .border .photo .news-bottom{position:absolute;top:0;left:0;color:#fff;background: rgb(7 43 58 / 63%);width:100%;height:100%;transition:all linear .3s;opacity:0;}
#newslist .border .photo .news-bottom .info,.news-date{position:absolute;width:50px;left:calc(50% - 56px);top:calc(50% - 52px);border:1px solid #fff;padding:20px 30px}
#newslist .border .photo .news-bottom .info p,.news-date p{text-align:center;font-family:'Lusitana',serif;font-size:15px}
#newslist .border .photo .news-bottom .info p.year,.news-date p.year{font-size:24px}
#newslist .border .photo .news-bottom .info span,.news-date span{display:block;width:30%;height:1px;background:#fff;margin:6px auto 10px}
#newslist ul li .news-info{width:100%;overflow:hidden;margin-top:20px}
#newslist .border .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;margin:13px 0;float:right;width:calc(100% - 85px)}
#newslist .border .news-info h3 a{color:#4b4b4b;font-size: 16px;}
#newslist .border .news-info p{color:#727272;font-size:15px;line-height:20px;overflow:hidden;height:40px;margin:0 20px;width:calc(100% - 40px)}
#newslist .border .news-info p.describe{clear:both;padding-top:10px;margin:0;width:100%;text-align:center}
#newslist .news-date{position:initial;left:0;top:0;border:0;padding:0;float:left;width:72px}
#newslist .border .news-info .news-date p{height:20px;margin:0;width:auto}
#newslist .news-date p.year{margin:10px 20px;height:18px}
#newslist .news-date span{background: #d3d3d3;width:100%;}
.article-info{margin-bottom:30px}
@media screen and (min-width: 1025px) {
#newslist .border .photo:hover .news-bottom{opacity:1}
#newslist .border .photo .news-bottom .info{transition:linear all .3s;transform:scale(0.8)}
#newslist .border .photo:hover .news-bottom .info{transform:scale(1)}
}
@media screen and (max-width: 1280px) {
#newslist ul li{width:50%}
}
@media screen and (max-width: 640px) {
#newslist .border{margin:10px}
#newslist .news-date{width:100%;overflow:hidden}
#newslist .border .news-info h3{width:100%;margin:5px 0 0}
#newslist .border .news-info p.describe{padding:0;text-align:left}
#newslist .border .news-info .news-date p{float:left}
#newslist ul li .news-info{margin-top:10px}
#newslist .news-date span{width:1px;height:15px;margin:2px 10px 0;float:left}
#newslist{margin:0 0 20px}
}