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

.img-fluid{max-width:100%;height:auto}
.news{width:100%; float:left;margin: 170px auto 0; }
.news-title{ width:90%; float:left;margin:0 5% 80px; text-align: center;}
.news-title h1{ margin: 0 0 20px;font-size: 15px;font-weight:600; letter-spacing: 0.1em;}
.newsContainer{ width:90%; float: left; margin: 0 5% 40px;}
.news-item{position:relative;width:33.333333%;padding:0 5% 60px;margin-top:50px; margin-bottom: 30px; color: #333;font-family: 'Noto Sans TC', sans-serif;font-weight:500; border-bottom: 1px solid #ccc;}
.news-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;}
.news-item.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
@media (min-width:581px){.news-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
@media (max-width:580px){.news-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
.news-box { width: 90%; float: left; overflow: hidden;position: relative;padding:0;margin-top:0;margin-bottom:0;}
.news-box:hover {color:#7a6c6c!important;text-decoration: none;}
.news-box .news-box-img {position: relative;overflow: hidden;}
.news-box .pnews-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);}
.news-box .news-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}
.news-box:hover .news-box-img:after {background:rgba(101, 101, 101, 0.4);}
.news-box:hover .news-box-img > img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05); }
.news-box .news-boxinfo{width: 100%; padding:10px 0 20px; box-sizing: border-box; display:block; text-align: center;}
.news-box .news-boxinfo p{margin:5px 0 0 0;font-size: 17px; letter-spacing:0.1em; line-height: 1.7em;height: 70px; overflow: hidden;}
.news-box .link{opacity: 0;color: #b71648;width: 100%;padding: 8px 0 4px;box-sizing: border-box;position: absolute;left: 0;overflow: hidden;
    -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.5s cubic-bezier(0.3, 0.1, 0.58, 1);  text-align: center; font-size: 13px; font-weight: 400;display:block;}
.news-box:hover .link {-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);z-index: 3;opacity: 1;}

.itemdate{width:10%; float: left; writing-mode: vertical-rl;text-orientation: sideways;transform: rotate(-180deg);font-size: 13px; margin-top: 35%;}
.newsall{float:left;width:100%;margin:0 0 20px;padding: 0 0 10px 11%; border-bottom: 1px solid #ccc; }
.newsall ul { margin:0; padding:0; list-style:none;} 
.newsall li {margin:0 5px; padding:0;display: inline;text-align:center; line-height:2em;} 
.newsall a {font-size:14px;text-decoration: none;padding:3px 10px;border-radius: 20px;}
.newsall a:hover {color: #b71648;text-decoration: none;transition: .8s;-moz-transition: .8s;-webkit-transition: .8s;-o-transition: .8s;background-color: #ddd;}
.inpage a {color: #b71648; text-decoration:none;background-color: #ddd;padding:3px 10px;border-radius: 20px;}
.inpage a:hover {color: #b71648;} 

@media screen and (max-width: 1600px) {
.news{margin: 160px auto 0; }
.news-item{padding:0 4% 50px;margin-top:40px; margin-bottom: 25px;}
.news-title{margin-bottom: 25px;}
}
@media screen and (max-width: 1200px) {
.news{margin: 140px auto 0; }
.news-box .news-boxinfo{padding:10px 0%;}
.news-box .news-boxinfo p{margin:5px 0 0 0;height: 70px;}
.itemdate{width:10%; float: left; writing-mode: vertical-rl;text-orientation: sideways;transform: rotate(-180deg);font-size: 13px; margin-top: 35%;}
.news-box { width: 85%;}
.itemdate{width:15%;margin-top: 35%;}	
.news-item{padding:0 3% 30px;margin-top:30px; margin-bottom: 25px;}
.news-box .link{display:none;}
.newsContainer{ width:94%; margin: 0 3% 30px;}
.newsall{padding: 0 0 10px 8%;}
}
@media only screen and (max-width: 980px) {
.news{margin: 110px auto 0; }
.newsContainer{margin: 0 3% 20px;}
.news-item{width: 50%; padding:0 3% 15px;margin-top:20px; margin-bottom: 25px;}
.news-box .news-boxinfo p{margin:5px 0 0 0;font-size: 14px; letter-spacing:0.1em; height: 50px;}
.news-title{margin-bottom: 20px; }
.news-title h1{ font-size: 14px; }
}
@media only screen and (max-width: 767px) {
.news-item{width:50%;padding:0 3% 15px;margin-top:20px; margin-bottom: 25px;}
.news{margin:90px auto 0; }
.newsContainer{ width:85%;margin: 0 7.5% 20px;}
.news-title{margin-bottom: 15px; }
.news-item{width:100%;padding:0 3%;margin-top:15px; margin-bottom: 15px;}
.news-box .news-boxinfo p{height:auto; padding-bottom: 15px;}
.newsall{margin:0 0 20px;padding: 0 0 10px 3%;}
.newsall li {margin:0 1px 0 0} 
.newsall a {padding:3px 8px;}
}