@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700&display=swap');
.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;position: relative;}


.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 (min-width: 1025px){
    .news-item .photo-content a.photo::after{
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: rgba(206, 178, 103, 0.8);
        width: 0;
        height: 100%;
        z-index: 1;
        -webkit-transition: 1s;
        transition: 1s;
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
    }
    .news-item .photo-content a.photo:hover::after{
        width: 100%;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .news-item .photo-content a.photo p{
        color: #fff;
        font-family: 'Roboto Condensed', sans-serif;
        z-index: 2;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50% ,-50%);
        font-weight: bold;
        font-size: 1.71429rem;
        -webkit-transform: translate(-65% ,-50%);
        -ms-transform:  translate(-65% ,-50%);
        transform:  translate(-65% ,-50%);
        opacity: 0;
        -webkit-transition: .4s;
        transition: .4s;
        -webkit-transition-delay: 0;
        transition-delay: 0;
    }
    .news-item .photo-content a.photo:hover p{
        opacity: 1;
        -webkit-transition: .7s;
        transition: .7s;
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
        -webkit-transform: translate(-50% ,-50%);
        -ms-transform: translate(-50% ,-50%);
        transform:translate(-50% ,-50%);
    }
}

@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;}
}