@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);/*思源黑體 Noto Sans TC*/
body{
	font-family: "Noto Sans TC","微軟正黑體", "Arial Unicode MS";
	font-size: 15px;
	color: #000;
	word-wrap: break-word;
	word-break: break-all;
	background-color: #f9f9f9;
	}
a{color:#000;}
a:hover{color:#ee5f35; text-decoration: none}

/*==反選的底色==========================================*/	
::selection {text-shadow: none;background: #362e2b;	color:#eee;}
img::selection {background: 0 0}
/*==============================flex-box==============================*/
.flex-box{display: flex;flex-wrap:wrap;}
.flex-box:before,.flex-box:after{display: none}/*for IOS bug*/

.content-bg{
	
	}

/*============================================================*/
.title-textsyle1{ color: #992621; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px;border-bottom: 1px solid #a0a0a0; width: 100%; }
.title-textsyle2{color: #336699; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px;border-bottom: 1px solid #a0a0a0; width: 100%;}
.title-textsyle3{color: #006633; text-align: left;margin: 1% 0 2%; padding: 0 0 3px 15px;border-bottom: 1px solid #a0a0a0; width: 100%;}
.container-padding{padding: 1% 15px; min-height: 70vh}
/*欄位設定*/
.col-bottom{ margin-bottom: 15px;}
@media (max-width:767px){
.col-bottom{ margin-bottom: 15px;}	
}
.sectionpadding{padding: 1% 0 }
@media (max-width:767px){
.col-bottom{ margin-bottom: 15px;}
.sectionpadding{padding: 3% 0 1%}	
}
.img-box{position: relative; overflow: hidden;;box-sizing: border-box;background-color: #fff; }
.img-box-border{ box-shadow: 0 0 5px #d2d2d2;}
.col-bottom img.img-borderstyle2:hover{opacity: .6}
/*img設定*/
.img-borderstyle1{transition: all 0.5s; padding: 5px;}
.img-borderstyle1:hover{opacity: 0.6; transform: scale(1.1);}
.img-borderstyle2{border: 1px solid #a2c571;transition: all 0.5s;}


/*scroll-up-top*/
.scroll-up{ width: 50px; height: 50px;background-color: #ee5f35; border: 1px solid #DFDFDF;border-radius: 50%;position: fixed;
    bottom: 65px;right: 20px;z-index: 100;cursor: pointer; text-align: center; line-height: 50px; display: none;color: #fff}
.scroll-up::before{content: "\f106";  font-family: FontAwesome; color:#fff;  position: absolute;top: -15px;width: 50px;
    left: 0px;}
.scroll-up:hover{ background-color: #313131;color: #fff}
@media  (max-width : 768px) {
	.scroll-up{bottom: 70px;}
}
/*==navbar_padding==========================================*/	
.navbar_padding{padding-top:105px; }
@media  (max-width : 768px) {
.navbar_padding{padding-top:80px }	
}
/*首頁banner尺寸*/
header{ position:relative}
.banner-title{ position:absolute; top:42%; width:100%; z-index:999 }
.banner-title h1{ color: #00561f;
    text-shadow: 0px 0px 8px #FFF;
    text-align: center;
    font-weight: 800;
    font-size: 48px;}
.banner-title h2{color: #333;
    text-shadow: 0px 0px 5px #FFF;
    text-align: center;
    font-weight: 600;
    font-size: 36px; }			
.imgbox { 
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	height: 100vh;width: 100%; }
@media  (max-width : 768px) {
	.banner-title h1{ font-size: 30px;}
	.banner-title h2{font-size: 24px;
}
}
/*btn 向下*/
.btndown {
    position: absolute;
    bottom: 80px;
    width: 200px;
    margin: auto;
    display: block;
    cursor: pointer;
    padding-bottom: 40px;
    left: 0;
    right: 0;
	text-align:center;
    text-transform: uppercase;
	color:#fff;
	z-index:999;
}
@media  (max-width : 768px) {
.btndown{ display:none;}
}

.btndown .icondownsytle {
    margin-top: 20px;
    display: block;
    animation: down_ef 2s infinite;
    color: #fff;
	z-index:999;
}
@keyframes down_ef{
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } 
	}
/*==index-aboutus==========================================*/
.index-aboutus{ font-size:18px; line-height:2.0; border:5px solid #b7aa00;border-radius: 60px 20px; padding:5%; background-color:rgba(255,255,255,0.7)}

/*====index-link===========*/
.index-link{}
.index-link ul{ margin:0; padding:0}
.index-link > ul > li{ list-style: none;line-height:2.0; border-bottom:1px #B0B0B0 dashed; padding-right:30px; padding:0;float:left; box-sizing:border-box;width:47%;margin-right:3%;}/*width:47%;margin-right:3%;*/
.index-link > ul > li::before{ content: "\f0da";  font-family: FontAwesome; padding-right: 5px}
.index-link > ul > li a{ }
.index-link > ul > li a:hover{ color:#ee5f35}
@media (max-width: 767px) {
.index-link > ul > li{width:100%;margin-top: 1%;margin-bottom: 1%}
}
/*====index-link2===========*/
.index-link2{ background-color: rgba(104,142,165,0.5);}
.index-link2 .col-bottom2{ margin-bottom: 30px;}
@media (max-width:767px){
.index-link2 .col-bottom2{ margin-bottom: 10px;}	
}

/*====index-link3===========*/
.index-link3{ background-color: rgba(104,142,165,0.7);}
.index-link3 .col-bottom2{ margin-bottom: 30px;}
@media (max-width:767px){
.index-link3 .col-bottom2{ margin-bottom: 10px;}	
}

/*========indexnews============*/
.indexnews{width: 100%}

.index-title-1 h3{color: #021526; text-align: center;display:flex;
align-items: center; margin:1% 0 2.5%; position:relative}/*標題*/
.index-title-1 h3:after,.index-title-1 h3:before {
        content: "";
        flex: 1;/*幾等份*/border: none;margin: 0 1.5rem;border-top: 8px solid #021526;}
.index-title-1 h3 .news-more-link1 a{
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    right: 30px;
    top: -15px;
	color: #333;}
.index-title-2 h3 .news-more-link1 a,.index-title-3 h3 .news-more-link1 a {
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    right: 30px;
    top: -15px;
	color: #ff0000;}
.index-title-2 h3 .news-more-link1 a:hover,.index-title-3 h3 .news-more-link1 a:hover {
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    right: 30px;
    top: -15px;
	color: #eee;}

.newtime{font-size: 14px;color: #676767;float: right;padding-top: 25px}
.indexnews ul{ margin:0; padding:0; width: 100%;display:flex;flex-wrap:wrap;}
.indexnews ul li{list-style:none;border-bottom: 1px dashed #888;}
@media (max-width:767px) {
.indexnews ul li{padding: 0;}
}
.indexnews a{min-width:100%;}
.indexnews .news-box{background-color:#fff; box-sizing: border-box; box-shadow: 0 0 5px #d2d2d2; overflow: hidden; transition:all .5s; padding: 5px;margin: 5px}
.indexnews .news-box .news-img-box{position: relative;max-height: 180px; overflow: hidden;box-sizing: border-box;background-color: #fff;}
.indexnews .news-box .mv{position: relative;box-sizing: border-box;background-color: #fff;}

.img-bg2{position: relative;background-size: cover; height:190px;background-position: center;transition: all 0.5s;width: 99.99%}
.img-bg2:hover{opacity: 0.6; transform: scale(1.1);}
.news-box h4{padding: 0 10px; line-height: 1.4; letter-spacing: 1px;}
.news-box h1{font-size: 17px;padding: 0 10px; line-height: 1.4; letter-spacing: 1px;margin: 0px;font-weight: 600}
.indexnews ul li h4 a{font-size: 17px; color:#fff;letter-spacing:1px;  }
.indexnews ul li h4 a:hover{color: #fff;text-decoration: none;}
.indexnews ul li h1 a{font-size: 16px; color:#fff;letter-spacing:1px;  }
.indexnews ul li h1 a:hover{color: #fff;text-decoration: none;}
/*=====news==========================================*/
.news{box-shadow: 0 0 5px #d2d2d2; margin: 1% 0;background-color: rgba(255,255,255,.8);transition: all 0.5s;padding-bottom: 10px;}
.news:hover{ background-color:#ee5f35;}
.news:hover a span.date{color:#f8ae99;}
.news h4{padding: 0 2%;line-height: 1.4;letter-spacing: 1px;}
.news:hover  h4{color:#fff;}
.news .news-img-box{height: 200px; overflow: hidden;background-color: #fff;}
.news .mv{background-color: #000;}
.img-bg{position: relative;background-size: cover; height:200px;background-position: center;transition: all 0.5s;width: 99.99%}
.img-bg:hover{opacity: 0.6; transform: scale(1.1);}
.img-bg h5{ position:absolute; background-color:rgba(0,0,0,0.7); color:#fff; left:0; bottom:0;width:100%; box-sizing:border-box; padding:5%; margin:0}
.news a span.date,.indexnews span.date,.indexnews2 span.date,.index-latest-news span.date{color: #898989; border-radius: 20px;padding: 1px 10px;font-size: 13px; letter-spacing: 0.5px;font-weight: normal;}
@media (max-width:767px) {
	.news-mobile span.date{color: #898989; border-radius: 20px;padding: 1px 2px;font-size: 13px; letter-spacing: 0.5px}	
}
.news a span.date::before,.indexnews span.date::before,.news-text span.date::before,.indexnews2 span.date::before,.news-mobile span.date::before,.index-latest-news span.date::before{content: "\f073";  font-family: FontAwesome; padding-right:5px;}
/*====news-text===========*/
.news-text{border-bottom: 1px dashed #333; padding: 2px 5px; transition:all 0.5s}
.news-text:hover h4{color: #336699} 
.news-text a h4 { color: #000; font-size: 15px;}
.news-text a h4::before{
	content: "\f101";
    font-family: FontAwesome;
    padding-right: 5px;
	} 
.news-text span.date{color: #fff;
	font-size: 13px;
    background-color: #959595;
    padding: 5px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
	margin-left:1%}

/*==news_home==========================================*/	
@media (max-width:767px) {
.img-border-color{border:3px solid #fff}
}
/*==news_detail==========================================*/	
.news_detail{line-height: 1.5;letter-spacing: 1px;font-size:18px;}
.news_detail > h2{ font-size:24px;font-weight: 600;text-align: center}
.news_detail_img{ text-align:center; width:auto;height: auto;max-width: 90%; margin-bottom:10px;}
.news_detail img{ max-width:100% !important; height:auto !important}
.news_detail .news_detail_text p{margin-bottom: 2%}
.news_detail p img{margin-bottom: 3px}
@media (max-width:767px) {
	.news_detail{line-height: 1.5;letter-spacing: 1px;}
	.news_detail > h2{line-height: 1.3;font-weight: 900;}
	.news_detail .news_detail_text p{margin-bottom: 7%}
}
.share{}
.share ul{}
@media (max-width:420px){
.share ul{margin-left: 20%}	
}
.share ul li{list-style: none;float: left;margin-right: 3% }
.share ul li a{color: #fff;  }
.share ul li.share-fb{background-color:#3b5998;color: #fff;padding: 5px 10px;box-sizing: border-box;}
.share ul li.share-fb::before{content: "\f09a";font-family: FontAwesome; padding-right: 5px }
.share ul li.share-line{background-color:#01b901;color: #fff;padding: 5px 10px 5px 30px;box-sizing: border-box;position: relative;}
.share ul li.share-line::before{content: "";background-image: url(../images/symbol/line_icon.svg);width: 30px;height: 30px;
position: absolute;left: 0;top: 0;background-repeat: no-repeat;}
.share ul li.share-wechat{background-color:#01b901;color: #fff;padding: 5px 10px 5px 30px;box-sizing: border-box;position: relative;}
.share ul li.share-wechat::before{content: "";background-image: url(../images/symbol/wechat_icon.svg);width: 25px;height: 25px;position: absolute;left: 5px;top: 3px;background-repeat: no-repeat;}

.share ul li.share-fb a,.share ul li.share-line a,.share ul li.share-wechat a{display: inline-block}
/*==bannerimg==========================================*/	
.bannerimg{ background-repeat: no-repeat;background-size: cover; width: 100%; height: 550px; background-position: center center;}
@media (max-width:1681px){
.bannerimg{height: 550px;}	
}
@media (max-width:420px){
.bannerimg{height: 250px;}	
}
/*====MemoSpec===========*/
.memoSpec { font-size:16px; color: #000;letter-spacing: 1px;line-height:1.7;text-align:left;font-weight: normal;}
.memoSpec video{max-width: 100%}
.memoSpec a{ color:#333}
.memoSpec a:hover{ text-decoration:none; color:#ee5f35;}
.memoSpec p{font-size: 16px;letter-spacing: 1px;line-height:1.7;text-align:left;font-weight: normal;}
.memoSpec h3{line-height: 1.5}
.memoSpec img{ max-width:100% !important; height: auto !important;margin: 1.5% 0;}
.memoSpec table.noborder{ borer:0;}
.memoSpec table.noborder tr td{ text-align: center}
.memoSpec  table tr th{ background-color:#969696; color:#333; text-align:center;}
.memoSpec h4{font-size: 16px;line-height:1.5;color:#555}
.table_style1{}
.table_style1 tr.block{ background-color:#262626; color:#fff;}
.table_style1 tr td{ padding:1%;}
/*==coll_info==========================================*/
.coll_info{color: #535353;font-size:14px;}
.coll_info h3{ color:#362e2b; text-align:center; line-height:1.5; font-size:16px;margin:15px 0 10px;}
/*===========bottom-comp-info===========*/
.comp-info{
	background:#012606;
	padding: 2% 0 0;
	color: #fff;
	line-height:1.5;
	letter-spacing:0.5px;
	font-size: 14px;
	}
.comp-info  a{color: #fff}
.comp-info  a:hover{color: #ccffff}
.comp-info h4{ padding:0; margin:0 0 1%; letter-spacing:1px; }
@media (max-width:767px) {
	.comp-info h4{ margin: 5% 0}
	
}
.comp-info h2{ width: 50%; margin: 15px auto;color: #fff; text-align: center;}
.comp-time-title{ color:#fff;background-color: #982A2B; letter-spacing:2px; text-align:center; padding:2%; margin-bottom:1%}
.comp-time{ color:#fff;background-color: #B80608; letter-spacing:2px;padding:2% ;margin-bottom:1%}
.info-item{padding-bottom: 1%}
@media (max-width:767px) {
	.comp-info h2{ width: 100%;} 
	.info-item p{line-height: 1.8}
}
/*====bottom-icon===========*/
.bottom-icon{ height: 40px;margin-top:2%;}
.bottom-icon ul {margin: 0; padding: 0;}
.bottom-icon ul li{ list-style: none;float: left; margin-right: 3%;}

/*====footer===========*/
footer {padding: 5px 0;text-align: center;font-size:13px;background-color:#000;color:#fff;}
footer a{ color:#fff}
footer a:hover{ color:#eee}
/*==============================公司網頁內文==============================*/
/*關於我們*/
.about{}
.about p{ line-height: 2.0}
/*==首頁最新消息===================================================================*/
.indexnews2{padding:3% 2%; border: 1px solid #eee;}
.indexnews2 ul{ margin:0; padding-left:10px;}
.indexnews2 ul li{font-size: 15px; display:block;  border-bottom:1px #ccc dashed; width:100%}
.indexnews2 ul li::before{content: "\f101";  font-family: FontAwesome; padding-right: 5px;}
.indexnews2 ul li a{color: #333;line-height:1.8; letter-spacing:1px; }
.indexnews2 ul li a:hover{color: #304269;}
.news-more-link {
    font-size: 15px;
    float: right;
    display: inline;
    padding-right: 10px;
    padding-top: 5px;
}

.news-box2 {
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    transition: all .5s;
	padding-bottom: 10px;}
.img-bg3 {
    position: relative;
    background-size: cover;
    height: 240px;
    background-position: center;
    transition: all 0.5s;
    width: 99.99%;
}
@media (max-width:767px) {
	.img-bg3 {height: 190px;}
}
.img-bg3:hover {
    opacity: 0.6;
    transform: scale(1.1);
}
/*==首頁活動剪影===================================================================*/
.index-title-3 h3{color: #fff; text-align: center;display:flex;
align-items: center; margin:1% 0 2.5%; position:relative}/*標題*/
.index-title-3 h3:after,.index-title-3 h3:before {
        content: "";
        flex: 1;/*幾等份*/
        border: none;
        margin: 0 1.5rem;
        border-top: 8px solid #fff;
}
.index-title-3 h3 .news-more-link3 a {
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    right: 30px;
    top: -15px;
	color: #fff;}

.index-title-2 h3{ color: #012606; text-align: center;display:flex;
align-items: center; margin:1% 0 2.5%; position:relative}/*標題*/
.index-title-2 h3:after,.index-title-2 h3:before {
        content: "";
        flex: 1;/*幾等份*/
        border: none;
        margin: 0 1.5rem;
        border-top: 5px solid #012606;
}
/*==首頁最新消息===================================================================*/
.index-title-4 h3{ color: #333; margin:1% 0 2.5%; position:relative;border-bottom:3px solid #BF0404;padding-bottom: 0.8% }
/*標題*/

.index-title-4 h3:after {content:'';border-bottom: 5px solid #8C0303;width: 25%;position: absolute; bottom: -4px;
    left: 0;}
.index-title-4 h3 .news-more-link4 a {
    font-size: 15px;
    font-weight: 600;
    position: absolute;
    right: 20px;
    bottom: 5px;
	color: #333;text-align: right;}



.activity-photo{}
.activity-photo h5 a{ color:#000; letter-spacing:1px}
.activity-photo h5 a:hover{ color:#555}

.box-height{ width: 100%;height: 0;padding-top: 80%}/*圖片的高度，自動等比縮放*/
.box-height2{ width: 100%;height: 0;padding-top: 70%}/*圖片的高度，自動等比縮放*/

.box-height .img-bg,.box-height2 .img-bg{ position: absolute;top: 0;bottom: 0;left: 0;right: 0;max-width: 100%; max-height: 100%;margin: auto}

/*==產品介紹===================================================================*/
.prod-box{ padding-bottom:10px; padding-top:10px;display: flex;flex-wrap:wrap;}
.prod-box h2,.prod-box h3{ width:100%; margin-top: 10px;margin-bottom: 10px;}
.prod{ position:relative; margin-bottom:10px;}
.prod-box .line1{border-bottom:1px solid #939393; margin: 5px 0}
.prod > .prod-text{width:100%; text-align:center; padding:2%;color:#000;font-weight:600; letter-spacing:1px;}
.prod-box h4{ display:block; width:100%; margin-top:3%; font-weight:600}

/*==文字跑馬燈===================================================================*/
.marq{width:100%; height:45px; font-size:18px; line-height:45px;bottom:0; left:0;color:#000; margin-top: 10px; border:1px solid #990532;font-weight: 600}
.marq-title {
  background-color: #990532;
  height: 45px;
  line-height: 45px;
  width: 10%;
  float: left;
  margin-right: 30px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  position: relative; /* 必須加上 */
}

.marq-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px; /* 與 margin-right 對應，略超出容器寬度 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 22.5px solid transparent;
  border-bottom: 22.5px solid transparent;
  border-left: 15px solid #990532; /* 與背景色一致 */
}
.marq-rotator {
  height: 45px;
  overflow: hidden;
  cursor: pointer;
}
.marq-item-list {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}
.marq-item {
  height: 45px;
  line-height: 45px;
  white-space: nowrap;
}
.marq-item:nth-child(odd) a { color: #005108;}
.marq-item:nth-child(even) a {  color: #c51414;}	
.marq-item a {  text-decoration: none;}
.marq-item a:hover {  color: #ee5f35;}
@media (max-width:767px) {
	.marq-title{width:12%; }
	.marq-text{width:80%;}
	
}

/*img設定*/
.img-borderstyle3{border: 0px;transition: all 0.5s;}
.img-borderstyle3:hover{opacity: 0.8; transform: scale(1.1);}

.box-height{ width: 100%;height: 0;padding-top: 67%}/*圖片的高度，自動等比縮放*/
.box-height .img-bg{ position: absolute;top: 0;bottom: 0;left: 0;right: 0;max-width: 100%; max-height: 100%;margin: auto}
.box-height .mv-bg{ position: absolute;top: 0;bottom: 0;left: 0;right: 0;max-width: 100%; max-height: 100%;margin: auto}
.mvbg-color{background-color: #000}
.no-padding{padding-left: 0px;padding-right: 0px}

h1.news_title{font-size: 17px;letter-spacing: 1px;line-height: 1.3; margin-top: 0.5%;margin-bottom: 1%;padding-bottom: 2px;font-weight: 600;
display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}
h1.news_title:before{
content: "\f0da";
    font-family: FontAwesome;
    padding-right: 5px;
}
h1.index_news_title{font-size: 17px;letter-spacing: 1px;line-height: 1.3; margin-top: 0.5%;margin-bottom: 0.5%;padding-bottom: 2px;font-weight: 600;
display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}
h1.index_news_title:before{
content: "\f0da";
    font-family: FontAwesome;
    padding-right: 5px;
}

.text-box{width: 100%}
.two-col{ margin-bottom:3%}
.ad-slide{display: block}
.ad-slide h1{font-size: 17px;letter-spacing: 1px;line-height: 1.3; margin-top: 0.5%;margin-bottom: 1%;padding-bottom: 2px;font-weight: 600}
/*==rss===================================================================*/
.rss{}
.rss h4{font-weight:600;color: #004e98;}
.rss ul li{line-height: 1.7;margin-bottom: 10px;border-bottom: 1px dashed #888}
/*==標籤===================================================================*/
	.tag a{background-color: #777;padding: 5px;color: #fff;border-radius: 3px}
	.tag a:hover{background-color: #555;color: #fff !important;font-weight: 400}

@media (max-width:767px) {
.content-r{margin-top: 5%}
}
.content-r{}

/*==頁尾文字===================================================================*/
.bottom_link{text-align: center;margin: 1% auto 0.3%;font-size: 16px;display: block}
.bottom_link ul li{display: inline-block;}
.bottom_link ul li:after{content: "|";}
.bottom_link ul li:last-child:after{content: " ";}

/*=媒體文字連結===================================================================*/
.media-group h3{display: inline-block;margin-right: 15px;}
.media-group h4{font-size: 16px;
    display: inline-block;
    line-height: 1.5;
    font-weight: 600;}
.media-group h4 a{margin-right: 7px}
.media-group h4 a:hover{color:#ed3b4b }
/*=QRcode===================================================================*/
.qrcode {text-align: right}
.qrcode img{width: 100px}
@media (max-width:420px) {
	.qrcode{text-align: center;float: left}
	.qrcode img{width: 30%}	
	
}
/*==index-new==================================================================*/
.index-new-bg{width:100%;padding: 10px;text-align: center;background-color: #8C0303;color: #fff;}	
.index-new-bg h3{letter-spacing: 10px;padding: 0;margin: 0;}	
.indexnews-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.left-news {
  width: 50%;
  box-sizing: border-box;
}
.right-news {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.right-news .sub-news {
  width: 50%;
  box-sizing: border-box;
}
.news-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.img-box {
  position: relative; /* 新增 */
  background-size: cover;
  background-position: center;
  transition: all 0.5s;	
}
.img-box:hover{opacity: 0.6;transform: scale(1.1);}	
.left-news .img-box {
  padding-top: 85%; /* 大圖比例 */
}
.right-news .img-box {
  padding-top: 80%; /* 小圖比例 */
}

.index-news-title,.index-news-title2{
  position: absolute;
  left: 10px;
  right: 10px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  margin: 0;
  padding: 3px 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 限制最多顯示兩行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;          /* 允許換行 */
}
.news-box h1.index-news-title {
  bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  padding: 0px;
}
.news-box h1.index-news-title2 {
  bottom: 18px;
  font-size: 22px;
  font-weight: bold;
  padding: 0px;	
}	

.indexnews span.date-color{
  padding-left: 15px;
  color: #fff;
}
	
@media (max-width: 768px) {
  .indexnews-wrapper {    flex-direction: column;  }
  .left-news,  .right-news {    width: 100%;  }

  .right-news {
    flex-direction: row; /* 重點：維持橫向排列 */
    flex-wrap: wrap;
  }

  .right-news .sub-news {
    width: 50%; /* 每列兩欄 */
    float: none; /* 移除干擾 flex 的 float */
  }
	.news-box h1.index-news-title,.news-box h1.index-news-title{font-size: 17px;}	
}