.newsList{display: flex;justify-content: space-between; flex-wrap: wrap;}
.news-item{width: 47%;}
.news-item{display: flex;margin-bottom: 45px;}
.news-item .left-date{width: 73px;padding-top: 150px;position: relative;}
.news-item .photo-content{width: calc(100% - 73px);}
.news-item .left-date .date{transform: rotate(-90deg);position: relative;width: 85px;color: #505050;}
.news-item .left-date .date::after{content: "";position: absolute;width: 100px;height: 1px;background: #c3c3c3;top: 50%;left: 110%;}
.news-item .photo-content a.photo{width: 100%;background-size: cover;}
.news-item .info .protitle{padding: 15px 0px;}
.news-item .info .protitle .title{-webkit-line-clamp: 1;font-size: 18px;}
.news-item .info .desc{-webkit-line-clamp: 3;}
.news-item .btn{text-align: right;}
.news-item .btn a{padding: 0px;transition: ease .3s;}
.news-item .btn a:hover{letter-spacing: 2px;}
.news-item .btn a i{margin-right: 5px}



@media screen and (max-width: 1024px){
  
    .news-item .photo-content{width: calc(100% - 50px);}
    .news-item .left-date{width: 50px;}
    .news-item .left-date .date{position: absolute;left: -20px;}
}
@media screen and (max-width: 768px){
    .news-item .left-date .date::after{left: 106%;width: 75px;}
    .news-item .left-date{padding-top: 125px;}
}

@media screen and (max-width: 580px){
    #articleBox{padding-right: 10px;}
    .news-item{width: 100%;}
    .news-item .left-date{width: 35px;}
    .news-item .photo-content{width: calc(100% - 35px);}
    .news-item .left-date .date{left: -30px;}
}