*,::after,::before{box-sizing:border-box}

.img-fluid{max-width:100%;height:auto}
.article{width:100%; float:left;margin:0 auto}
.articleContainer{ width:90%; float: left; margin: 0 5% 40px;font-size: 0;}
.article-item{width:33.333333%;padding:0 2%;margin:30px 0; font-family: 'Noto Sans TC', sans-serif;font-weight:500;display:inline-block; vertical-align:top;}
.article-box{width:100%; float: left; overflow: hidden;padding:0;margin-top:0;margin-bottom:0;color: #000}
.article-box:hover {color:#cf2127!important;text-decoration: none;}
.article-box .article-box-img {position: relative;overflow: hidden;}
.article-box .particle-box-img:after {content: " ";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;
    -webkit-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);}
.article-box .article-box-img > img {-webkit-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);margin:0;display:block}
.article-box:hover .article-box-img:after {background:rgba(101, 101, 101, 0.4);}
.article-box:hover .article-box-img > img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05); }
.article-box .article-boxinfo{width: 100%; display:block;margin: 20px 0 0 0}
.article-box .article-boxinfo h2{margin:5px 0 10px;font-size:18px; letter-spacing:0.1em; line-height: 1.7em;text-align:justify;font-family: 'Noto Sans TC', sans-serif;font-weight:500;}
.article-box .article-boxinfo h3{margin:0;font-size:14px;color: #666}
.article-box .article-boxinfo h4{margin:0;font-size:16px;color:#8e732d;font-weight: 500;}
.articleall{float:left;width:100%;margin:0 0 40px;padding:0;border-bottom: 1px solid #c9ccca;border-top: 1px solid #c9ccca;text-align: center;line-height:46px}
.articleall ul { margin:0; padding:0; list-style:none;} 
.articleall li {margin:0 15px; padding:0;display: inline;text-align:center;font-family: 'Noto Sans TC', sans-serif;font-weight:500;} 
.articleall a {font-size:16px;color:#171717;text-decoration:none;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}
.articleall a:hover {color: #cf2127;text-decoration: none;transition: 0.5s;-moz-transition: 0.5s;-webkit-transition: 0.5s;-o-transition: 0.5s;}
.initem a {color: #cf2127; text-decoration:none;border-bottom:3px solid #cf2127;padding:9px 1px}
.initem a:hover {color: #cf2127;text-decoration: none} 
.article-row{width:100%; float: left}
.article-content{width:90%;margin:140px auto 60px; text-align: center}
.article-title{width:100%; float:left; margin:0 0 20px}
.article-title h1{ font-size: 32px;line-height: 1.2em; font-family: 'Noto Sans TC', sans-serif;font-weight:500;letter-spacing:.2em;text-indent:-.2em;margin: 0;padding: 0}
.article-subtitle{ width:90%;float:left; line-height:2em;margin: 0 5%;font-size:18px;font-family: 'Noto Sans TC', sans-serif;font-weight:400;letter-spacing:.1em;text-indent:-.1em}
@media screen and (max-width: 1600px) {
.article-content{margin:140px auto 50px}
.articleall{margin:0 0 30px}
.article-item{margin:25px 0}
}
@media screen and (max-width: 1200px) {
.article-content{margin:130px auto 40px}
.articleContainer{width:94%; margin: 0 3% 30px;}
.article-item{margin:20px 0}
}
@media only screen and (max-width: 980px) {
.article-content{margin:110px auto 35px}
.articleContainer{margin: 0 3% 25px;}
.article-title h1{ font-size: 28px}
.articleall{margin:0 0 25px}
.article-item{width: 50%;margin:15px 0}
}
@media only screen and (max-width: 550px) {
.articleContainer{width: 90%; margin: 0 5% 20px;}
.article-content{width: 96%; margin:90px auto 25px}
.article-title{margin:0 0 15px}
.article-title h1{ font-size: 24px}
.article-subtitle{line-height:1.8em}
.article-item{width:100%;padding: 0}
.articleall li {margin:0 10px} 
.articleall{margin:0 0 20px}
}
