@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700&display=swap');
.news-item{width: 33%;vertical-align: top;}
.news-item{display: inline-block;margin-bottom: 45px;position: relative;}
.news-item .left-date{width: 73px;padding-top: 140px;position: absolute;}
.news-item .photo-content{width: calc(100% - 73px);margin: 0 0 0 auto;}
.news-item .left-date .date{transform: rotate(-90deg);position: relative;width: 105px;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;/* font-size: 1.3rem; */font-weight: bold;line-height: 120%;color: #252525;}
.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}
#articleBox .pagetitle {
    line-height: 100%;
    font-size: 30px;
    color: #4f4f4f;
    margin: 30px 0;
    border-left: 3px solid #73cde5;
    padding-left: 15px;
    text-align: initial;
}
.article-info {
    margin-bottom: 50px;
    color: #6f6f6f;
}
    .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 {
    width: 49%;
    vertical-align: top;
}
@media screen and (max-width: 1140px){
    .news-item {
    width: 32%;
    vertical-align: top;
}
}
@media screen and (min-width: 1025px){
    .news-item .photo-content a.photo::after{
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: rgba(255, 255, 255, 0.24);
        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: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;}
.news-item {
    width: 48%;
    vertical-align: top;
}
}

@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;}
}

