@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');

.articleList{display: flex;flex-wrap: wrap;}
.section-title h2{left: 66px;}
.section-title .btn{right: 60px;}
.articleList .article-item{margin-right: 30px;margin-bottom: 40px;width: 290px;}
.articleList .article-item:nth-child(4n){margin-right: 0px;}
.articleList .article-item a.photo{width: 100%;background-size: cover;position: relative;transition: ease .3s;}
.articleList .article-item a.photo::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background:transparent;transition: ease .3s;}
.articleList .article-item a.photo span{z-index: 2; transition: ease .3s;opacity: 0; font-family: 'Kaushan Script', cursive;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) skew(-15deg, 0deg);color: #fff;display: inline-block;width: 120px;height: 35px;background: #000;text-align: center;line-height: 35px;}
.articleList .article-item a.photo:hover::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);}
.articleList .article-item a.photo:hover span{opacity: 1;}
.articleList .article-item .cate{display: inline-block;padding: 10px 0px;}
.articleList .article-item .cate a{color: #7e7e7e;border-bottom: 1px dashed #7e7e7e;}
.articleList .article-item .title{font-size: 22px;-webkit-line-clamp: 2;}


@media screen and (max-width: 1240px){
    .articleList .article-item{width: 31%;}
}
@media screen and (max-width: 1100px){
    .articleList .article-item{margin-right: 25px;}
}
@media screen and (max-width: 960px){
    .articleList .article-item{margin-right: 20px;}
}
@media screen and (max-width:768px){
    .articleList{justify-content: space-between;}
    .articleList .article-item{width: 47%;margin-right: 0px;}
}
@media screen and (max-width: 480px) {
    .articleList .article-item{width: 100%;}
}