.home-news{position:relative;padding:4% 0;}
.home-news .news-list{display:flex;flex-wrap:wrap}
.home-news .news-list li{width:23.5%;margin-right:2%;box-shadow:0 6px 20px 0 rgba(8,1,3,.08);border-radius:3px;margin-top:40px;overflow:hidden}
.home-news .news-list li:nth-child(4n){margin-right:0}
.home-news .news-list li .img{position:relative;overflow:hidden;display:block}
.home-news .news-list li .img img{width:100%;transition:all .2s linear}
.home-news .news-list li .img .date{position:absolute;top:0;right:0;background-color:var(--color);font-size:var(--fontsize14);font-weight:var(--fontbold6);line-height:1.4;padding:11px 22px;transition:all .2s linear;color:#fff;}
.home-news .news-list li .img .date span{display:block;text-transform:uppercase}
.home-news .news-list li .info{padding:20px}
.home-news .news-list li .info .title{font-size:var(--fontsize18);font-weight:var(--fontbold5);line-height:1.4;transition:all .2s linear}
.home-news .news-list li .info .txt{padding-top:14px;border-top:1px solid #eaeaea;color:var(--introcolor);font-size:var(--fontsize16);margin-top:14px}
.home-news .news-list li .info .more{display:inline-flex;align-items:center;margin-top:10px;font-size:var(--fontsize14)}
.home-news .news-list li .info .more span{position:relative;margin-right:10px;font-weight:var(--fontbold6);text-transform:uppercase;transition:all .2s linear}
.home-news .news-list li .info .more span::before{content:"";position:absolute;width:6px;height:1px;background-color:var(--color);left:0;bottom:0;transition:all .2s linear}
.home-news .news-list li .info .more em{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color);color:#fff;transform:rotate(-45deg);transition:all .2s linear}
.home-news .news-list li:hover .img img{transform:scale(1.03)}
.home-news .news-list li:hover .date{color:#fff}
.home-news .news-list li:hover .info .more span::before{background-color:var(--color);width:100%}
.home-news .news-list li:hover .info .more em{transform:rotate(0)}
@media (max-width:768px){.home-news{padding:40px 0}
.home-news .news-list{margin-top:10px;justify-content:space-between}
.home-news .news-list li{width:49%;margin-top:15px;margin-right:0}}
@media (max-width:500px){.home-news .news-list li .img .date{padding:5px 10px}
.home-news .news-list li .info{padding:10px}}