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