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

.img-fluid{max-width:100%;height:auto}
.blog{width:100%;margin:0; }
.blog-content{width:94%; margin: 200px auto 0;}
.blogContainer{ width:100%; float: left; margin: 0 0 40px;font-size: 0;}
.blog-item{width:32.433333%;padding:0;margin: 10px 0.45% 50px; font-weight:500;display:inline-block; vertical-align:top;}
.blog-item{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.blog-item.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
@media (min-width:581px){.blog-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
@media (max-width:580px){.blog-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
.blog-box { width:100%; float: left; overflow: hidden;position: relative;padding:0;margin-top:0;margin-bottom:0;}
.blog-box .blog-box-img {position: relative;overflow: hidden;}
.blog-box .pblog-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);}
.blog-box .blog-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}
.blog-box:hover .blog-box-img:after {background:rgba(101, 101, 101, 0.4);}
.blog-box:hover .blog-box-img > img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05); }
.blog-box .blog-boxinfo{width: 100%; float: left; box-sizing: border-box;}
.blog-box .blog-boxtype{margin:10px 0 0; font-size: 14px;font-weight: 700;line-height: 1.6em;color: #333;}
.blog-box .blog-boxdate{margin:30px 0 0; font-size: 13px;line-height: 1.6em;color: #333;}
.blog-box .blog-boxinfo h2{margin-bottom:10px; font-size:22px;letter-spacing: 0.05em;font-family: 'Noto Sans TC', sans-serif;font-weight: 500; position: relative;display: inline-block;}
.blog-box .blog-boxinfo h2::after {content: '';position: absolute;bottom:1px;left: 0;width: 0%;border-bottom:1px solid #3a3e4b;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s;}
.blog-box:hover .blog-boxinfo h2:after{width: 100%;}
.blog-box .blog-boxinfo p{margin:0 0 20px;font-size: 14px; letter-spacing:0.05em; line-height: 1.7em;color: #333;text-align:justify;}
.blogtop{float:none;width:100%;margin-bottom: 65px;padding: 0 33% 40px; position:relative;border-bottom: 1px solid #ccc;text-align: center}
.blogtop h1{font-size:13px;margin: 0 0 25px;font-family: 'Noto Sans TC', sans-serif;font-weight: 400; letter-spacing: 0.1em;text-indent: -0.1em;}
.blogtop h1{opacity: 0;-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-webkit-transform: translateY(-50px);transform: translateY(-50px);-moz-transition: opacity 2s, -moz-transform 2s;-o-transition: opacity 2s, -o-transform 2s;-webkit-transition: opacity 2s, -webkit-transform 2s;transition: opacity 2.6s, transform 2.6s;}
.blogtop h1.show {opacity: 1;-moz-transform: translateX(0);-ms-transform: translateX(0);-webkit-transform: translateX(0);transform: translateX(0);}
.blogtop h2{line-height:2em;margin: 0;font-size: 16px;}
.blogtop h2{opacity:0!important;-webkit-transform:scale(.1);transform:scale(.1);-webkit-transition:opacity 2.2s,-webkit-transform 2.2s;transition:opacity 2.2s,-webkit-transform 2.2s;transition:opacity 2.2s,transform 2.2s;transition:opacity 2.2s,transform 2.2s,-webkit-transform 2.2s}
.blogtop h2.show{opacity:1!important;-webkit-transform:scale(1);transform:scale(1)}

@media screen and (max-width: 1600px) {
.blog-content{margin: 160px auto 0;}
.blog-item{width:32.3%;margin: 10px 0.5% 30px}
.blogContainer{margin: 0 0 30px}	
.blogtop{margin-bottom: 65px;padding: 0 28% 40px;}
}
@media screen and (max-width: 1280px) {
.blog-content{width:92%;margin: 130px auto 0; }
.blogContainer{margin: 0 0 20px}	
.blog-item{margin: 10px 0.5% 40px}
.blog-box .blog-boxdate{margin:20px 0 0; }
.blog-box .blog-boxinfo h2{font-size:20px;}
.blogtop{margin-bottom: 40px;padding: 0 19% 35px;}	
}
@media only screen and (max-width: 980px) {
.blog-content{margin: 110px auto 0;}
.blogContainer{margin: 0 0 20px;}
.blog-item{width: 49%;margin:10px .5%}
.blog-box .blog-boxinfo h2{font-size:18px;}
.blogtop{margin-bottom: 30px;padding: 0 9% 25px;}	
.blogtop h1{margin: 0 0 20px;}
}
@media only screen and (max-width: 767px) {
.blog-content{margin:90px auto 0;}
.blogContainer{margin: 0 0 10px;}
.blog-item{width:100%;margin:0 0 10px;}
.blogtop{margin-bottom: 30px;padding: 0 5% 20px;}
.blogtop h1{margin: 0 0 15px;}
.blogtop h2{line-height:1.8em;font-size: 17px;}
}