@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: 0 1.58% 30px;width: 30%;background: #fff;border: 4px solid transparent;transition: ease .3s;box-shadow: 1px 1px 10px 0px #ddd;}

.articleList .article-item .info{padding: 5px 20px 15px;}
.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:.5s .1s;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-70%);
    color: #fff;
    display: inline-block;
    width: 120px;
    height: 35px;
    background: #1f79a9;
    text-align: center;
    line-height: 35px;
    letter-spacing: 3px;
}

.articleList .article-item .cate{display: inline-block;padding: 10px 0px;}
.articleList .article-item .cate a{color: #7e7e7e;border-bottom: 1px solid #7e7e7e;}
.articleList .article-item .title{font-size: 22px;-webkit-line-clamp: 2;}

@media screen and (min-width: 769px){
    .articleList .article-item:hover{border: 4px solid #1f79a9;}
    .articleList .article-item:hover a.photo::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);}
    .articleList .article-item:hover a.photo span{opacity: 1;transform: translate(-50%,-50%);}
}

@media screen and (max-width: 768px){
    .articleList .article-item{width: 46%;}
    .articleList .article-item .title{font-size: 18px;}
}
@media screen and (max-width: 480px){
    .articleList .article-item .info{padding: 5px 5px 15px;}
}