.newsArticleText {text-align:center; max-width: 630px; margin: 0 auto 150px auto;}

.tagList {margin: 0 0 50px 0;}
.tagList a {border: 2px solid #000; padding: 15px 20px; color:#000; text-decoration:none; display:inline-block; margin: 0 20px 20px 0; line-height:1em;}
.tagList a:hover,
.tagList a.on {background:#000; color:#fff;}

#newsList { }
#newsList .newsItem {width: 32.7%; margin: 0 0.6% 13px 0; overflow:hidden;}
    #newsList .newsItem:nth-child(3n) { margin: 0 0 13px 0; }
#newsList .newsItem a {display:block; position:relative;}
    #newsList .newsItem img { display: block; width: 100%; transition: transform 0.6s ease; }
    #newsList .newsItem:hover img { transform: scale(1.15); }
    #newsList .newsItem .filter { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; z-index: 2; }
#newsList .newsItem .title {position:absolute; bottom: 25px; left:25px; color:#fff; font-size:22px; z-index:3; }


@media screen and (max-width: 1050px) {
    .newsArticleText { margin: 0 auto 50px auto; }
    .tagList { margin: 0 0 25px 0; display: flex; justify-content: flex-start; align-items: center; overflow-x: auto; }
    .tagList a {padding: 10px 15px; margin: 0 10px 10px 0; font-size:16px; white-space:nowrap; display:inline-block;}
}

@media screen and (max-width: 860px) {
    #newsList .newsItem { width: 49.3%; margin: 0 0.6% 8px 0; overflow: hidden; }
        #newsList .newsItem .title { bottom: 15px; left: 15px; font-size: 18px; }
}

@media screen and (max-width: 600px) {
    #newsList .newsItem .title { bottom: 10px; left: 10px; font-size: 16px; }

}
@media screen and (max-width: 480px) {
    #newsList .newsItem { width: 100%; margin: 0 0 10px 0; }

}