/* CSS Document */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }

/** font-family:=================================*/
.txt-ch{font-family:'Noto Sans TC','Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Libre Franklin',"sans-serif"; }
.color-white{color: #fff!important; }
.color-bk{color:#4d4d4d!important; }

.cms-wrapper { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left:0px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1200px) {
.cms-wrapper { padding-right:20px; padding-left: 20px;max-width: 1280px; }
}
@media (min-width:1600px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px; max-width: 1440px; }
}
.cms-wrapper-full { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 0px; padding-left: 0px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1002px) {
.cms-wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
@media (min-width:768px) {
.cms-wrapper-full { padding-right: 10px; padding-left: 10px;   }
}
@media (min-width:1920px) {
.cms-wrapper-full{ padding-right: 40px; padding-left: 40px; }
}
 
 
 .type { -webkit-animation-name: type; animation-name: type; -webkit-animation-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940) ; animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940) ;}
.animated.type { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
 @keyframes zoom {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(1.02); transform: scale(1.02);  opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
 }
@-webkit-keyframes type {
0% { -webkit-transform: translateX(600px); transform: translateX(600px); opacity: 0; }
100% { -webkit-transform: translateX(0);  transform: translateX(0); opacity: 1; }
}
@keyframes type {
0% {-webkit-transform: translateX(600px); transform: translateX(600px); opacity: 0; }
100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes zoomin {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
50% { -webkit-transform: scale(1.01); transform: scale(1.01);  opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
}

 
 
.mainArea { padding: 0;}
.wrap {max-width: 100%; flex-wrap: wrap;  }

#banner { margin-bottom: 0;position: relative;}
#banner.show .left {-webkit-transition-delay: 0s; -o-transition-delay: 0s;transition-delay: 0s;-webkit-transform: translateY(0);-ms-transform: translateY(0); transform: translateY(0); opacity: 1;}
#banner.show .right {-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;}
#banner .left { -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s;  -webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px); opacity: 1;}
#banner .right { -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 1;}

#banner .wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
#banner .left {padding-top: 160px;padding-left: 160px;max-width: 780px;-webkit-box-flex: 1; -ms-flex-positive: 1;flex-grow: 1;width: 40%;}
#banner .right { width: 60%;max-width: 1120px;}
 
.item-box{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end;position: relative; }
.item-1{ width: 100%;  padding-bottom: 100px;  position: relative; z-index: 0;}
.item-2{ width: 50%; position: absolute; right: 0px; top: 60px;text-align: right;}
 
.item-2 img{width:100%; max-width: 100%; height: auto; margin: 0;}

#banner .title,#banner .title02,#banner .title03 {color: #3c7622;}
#banner .title {margin-bottom: 10px;font-size: 24px;font-weight: 300;letter-spacing: 2.4px;line-height: 50px;}
#banner .title02 {margin-bottom: 25px;font-size: 78px;font-weight: 900;letter-spacing: 1.6px; line-height: 80px;}
#banner .title03 {font-size: 18px;letter-spacing: .4px;line-height: 28px;}


@media (max-width: 1280px) {
#banner .title02 { font-size:60px; }
#banner .left {padding-top: 100px;padding-left: 100px; }
}

@media (max-width: 1024px) {
#banner .title02 { font-size:60px; }
#banner .left {padding-top: 30px;padding-left: 30px; }
}
@media (max-width: 992px) {
  #banner {margin: 0px 0px 80px 0px; padding: 0px; position: relative;}  
}



@media (max-width: 767.98px) {
#banner {margin: 0px 0px 40px 0px;  }  
#banner .title,#banner .title02{color: #fff; font-weight: 700;}
#banner .title03 { display: none;}  
#banner .title02 { font-size:36px; line-height: 30px;margin-bottom: 80px; }
#banner .left { width: 100%; margin-top: -240px;  padding-top: 0px;padding-left: 50px; order: 2; z-index: 99; }
#banner .right { width: 100%!important;order: 1;  }
}





.titleBox em {  font-size: 35px; font-weight: 900; line-height: 35px; letter-spacing: 1.2px;color: #002d5d;}
.titleBox h2 { font-size: 20px; font-weight: 300; letter-spacing: .7px; color: #002d5d;}

 

.cms-main-banner > .wrap:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 200px); background-color: #ecf5e8; z-index: -1;}

.cms-main-banner .slick-dots { position: absolute; left: 50px; top:5%;  bottom: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 30px; height: 100%;}
.cms-main-banner .slick-dots .slick-active {margin-right: -10px;}
.cms-main-banner .slick-dots .slick-active button { padding-left: 10px;font-size: 14px;color: #3b7722;}
.cms-main-banner .slick-dots .slick-active button:before {font-size: 18px;letter-spacing: .9px;color: #3b7722;opacity: 1;}
.cms-main-banner .slick-dots .slick-active button:after {opacity: 1;}
.cms-main-banner .slick-dots li { margin-left: 0; margin-right: 0; width: 30px; height: 30px;}
.cms-main-banner .slick-dots button { padding: 0; width: 100%; height: 100%; font-size: 12px; letter-spacing: .6px;line-height: 30px; color: #696970;}
.cms-main-banner .slick-dots button:before { content: none; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; width: 30px;  height: 30px; font-size: 12px; line-height: 30px; letter-spacing: .6px; color: #696970;opacity: 1;}
.cms-main-banner .slick-dots button:after { content: ''; position: absolute; top: 50%; left: 0; margin-top: -1px; margin-left: -26px; width: 26px; height: 2px;opacity: 0; background-color:#3b7722;}
 .cms-main-banner .slick-dots li.slick-active button,.cms-main-banner .slick-dots li:hover button { background-color:transparent; border-radius:6px!important; }
 
.scrollDown { position: absolute; left: 50%;bottom:10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; font-size: 14px; letter-spacing: .7px; color: #333333; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none;cursor: pointer; padding: 10px;}
.scrollDown:after { content: ''; display: block;width: 20px; height: 20px; margin: auto; background: url(../images/icon/arrow-down.svg) no-repeat center;}
 @media (max-width: 1100px) {
.cms-main-banner .slick-dots { display: none !important; }
.scrollDown{ display: none !important;}    
}


 /*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
 .cms-main-about{position: relative; z-index: 0; padding:0px; margin: 0; background: #f7fbf5;   }
.cms-main-about-box{  width: 100%;  margin: auto;  display: flex; flex-wrap: wrap; justify-content: space-between; }
.cms-main-about-txt{width:calc(50% - 100px); margin:0 ; padding:30px 10px; line-height:2.5rem;  color:#000; word-break: keep-all;}
.cms-main-about-txt p{margin:10px 0px 30px 0px;font-size: 1rem; line-height:1.85rem;  font-weight: 500; }
.cms-main-about-pic{width:50%; margin:0; padding:0px; display: flex; flex-wrap: wrap;align-self: flex-start;  text-align: right;position: relative; z-index:9;  }
 .cms-pic{width:100%; position: relative; display: flex; justify-content: center; align-items:center; align-self: center; margin: auto; z-index: 3; }
.cms-pic figure{margin:0px; display: flex;flex-wrap: wrap; justify-content: center; }
.cms-pic img{ width: 100%; max-width: 100%;  }

@media (min-width: 1400px) {
 .cms-main-about-txt{width:calc(50% - 100px); margin:0 ; padding:30px 50px; line-height:2.5rem;  color:#000; word-break: keep-all;}
   
}
.num-box {  display: flex; flex-wrap: wrap; margin: auto 0px; padding: 0px;}
@media (min-width: 820px) {
.num-box { display: flex; justify-content: space-between; align-items: stretch; padding-top: 40px }
}
 @media (min-width: 1300px) {
 }
.num-box li{position: relative;}
@media (min-width: 1300px) {
.num-box li:before { content: ""; display: block;  position: absolute;  width: 1px;  height: 60%; top: 20%; left: -10px;  border-left: 1px solid #e7e7e7;   }
.num-box li:nth-of-type(1):before {display:none; } 
}
.num-box li { border-bottom: 1px solid #e7e7e7; display: block; padding-top: 20px; padding-bottom: 20px}
@media (min-width: 769px) and (max-width: 1299px) {
.num-box li { width: calc(50% - 40px); margin:0px 20px; }
.num-box li:nth-of-type(1),.num-box li:nth-of-type(2) { border-top: 1px solid #e7e7e7  }
}

@media (max-width: 768px) {
.num-box li { width: calc(100%/3 - 40px); margin:0px 20px; }
.num-box li:nth-of-type(1),.num-box li:nth-of-type(2) { border-top: none;  }
.num-box li:before { content: ""; display: block;  position: absolute;  width: 1px;  height: 60%; top: 20%; left: -30px;  border-left: 1px solid #e7e7e7;   }
}

@media (max-width: 767.98px) {
.num-box li {width: 100%;padding: 0px 0px; }
}
 @media (min-width: 1300px) {
.num-box li { border-bottom: none; padding: 0px 10px; }
}

.num-box strong { font-size: 2.75rem; display: inline-block;  line-height: 1em; letter-spacing: 1px}
@media (min-width: 1780px) {
.num-box strong { font-size: 3.125rem; letter-spacing: 2px  }
}
.num-box strong{color:#3c7622;}
.num-box span { font-size: 1.125rem; display: inline-block; line-height: 1.125rem; vertical-align: top;  margin-top: 5px}
.num-box p {  margin-bottom: 0; padding-bottom: 0}
.num-box h4 { font-size:1.063rem; font-weight: 400; word-break: normal; word-wrap: normal; margin-bottom: 3px; color:#333; }
 

  
@media (max-width: 992px) {
.cms-main-about-box{padding:0px 30px;}
.cms-main-about-txt{width: 100%; margin:0 ; padding:30px 15px; line-height:2.5rem;  color:#000; word-break: keep-all;  }
.cms-main-about-pic{width:100%;  padding:0px;}
.cms-pic figure{margin-top: -10%;  justify-content: center;}
.cms-pic img{ width:80%; max-width: 100%;  } 
.cms-main-about-pic::before { left: 96px; top: -20px;  }
.cms-main-about-pic::after { left: 70px; top: -44px;}
  }

@media (max-width: 767.98px) {
.cms-main-about-box{padding:0px 15px;}
.cms-main-about-pic{ flex-direction: column; justify-content: center;}   
.cms-pic{width:100%; order: 1;}    
.feature-icon{ width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-start; order: 2;}    
.feature-icon li { width: calc(100%/2);margin: 0px; } 
.feature-icon li:nth-child(1){margin-left: auto!important;}
.feature-icon li:nth-child(3){margin-left:auto!important;}
.feature-icon li:nth-child(4){margin-left: auto!important;}
.cms-pic img{ width:100%; max-width: 100%;  }     
}

 /*-------------------*/
/***** product  *****/
/*------------------*/
.cms-main-product { width:100%; padding:100px 0px 0px 0px; margin:0 auto; position: relative; z-index: 0; background:#edf5e8;  }
@media (min-width: 992px) and (max-width: 1199.98px) {
.cms-main-product {  padding:100px 0px 0px 0px; }
}
@media (max-width: 1199.98px) {
.cms-main-product {  padding:100px 0px 0px 0px; }
}
@media (max-width: 768px) {
.cms-main-product {  padding:20px 0px 0px 0px; }
}
 
 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product-item { width:100%; margin:0px auto;  padding:20px 0px 0px 0px; display: flex; flex-wrap: wrap; }
.cms-main-product-item li { width: 100%; margin:0px; padding: 20px 30px 0px 30px;transform: scale(1); background: #fff; display: flex; flex-wrap: wrap;align-self: flex-start; align-content: flex-start; align-items: flex-start;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
.cms-main-product-item li figure{ position: relative; z-index: 0; width:100%; height: auto; margin:0px; padding: 0px; overflow: hidden; background-color: transparent;  transition: all 0.5s ease 0s; }
.cms-main-product-item li img {  width: 100%; max-width: 100%;  transition: all .35s ease;}
.cms-main-product-item li:hover{background:#edf5e8; }
.cms-main-product-item li:hover img {-webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s;  -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);  opacity: 1; }
.cms-main-product-item .cms-main-product-inner{  width: 100%; display: flex; flex-wrap: wrap;padding: 10px 20px;   position: relative;} 
#cms-main .cms-main-product-item .cms-main-product-inner h3 a{ width: 100%; min-height:52px; font-weight:700; font-size:1.188rem;  color: #0e280d; line-height:1.5rem; overflow: hidden; white-space:pre-wrap;
word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li .cms-main-product-inner p{ width: 100%; margin: 10px 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; overflow: hidden; white-space:pre-wrap;
word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;} 
 
.cms-main-product-item .slick-prev{left:0;} 
.cms-main-product-item .slick-next{right:0 }
.cms-main-product-item li:after,.cms-main-product-item li:before {pointer-events: none; content: ''; width: 100%; height: 100%;  box-sizing: border-box;  position: absolute; top: 0;  left: 0;  transform: scale(0); transition: 0.5s;z-index:1; }
.cms-main-product-item li:after { border-top: 5px solid #5b7e48;  border-right:5px solid #5b7e48;  transform-origin: 100% 0%;}
.cms-main-product-item li:before { border-bottom: 5px solid #5b7e48; border-left: 5px solid #5b7e48;   transform-origin: 0 100%;}
.cms-main-product-item li:hover:after,.cms-main-product-item li:hover:before { transform: scale(1);}
@media (max-width: 767.98px) {
.cms-main-product {  background-size: 260% auto;   }   
.cms-main-product-item .slick-prev{left:0;} 
.cms-main-product-item .slick-next{right:0 }
.cms-main-product-item li.slick-current{ transform: scale(1);  }
}







/**Application=================================*/
 .cms-application{width:100%;  margin:0px;  padding: 40px 0px; background: url("../images/index/map-taiwan.jpg") no-repeat right top #3c7622; background-size:65% auto;}   
.cms-application::before{ content:""; display: block;position: absolute; left:0px;top:0px; }

.cms-application-wrap{width:100%; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;  margin:0px; padding-top: 120px;  background: url("../images/index/map-1.svg") no-repeat -12%  -5% ; background-size:30% auto;}
.cms-application-left{width: 30%; padding-left: 20px; display: flex; flex-wrap: wrap; align-content: center;  }
.cms-application-right{width: 70%; padding: 10px;}
@media (max-width:992px) {
.cms-application-wrap{justify-content: center;}
.cms-application-left{width: 100%;  padding-left: 50px; margin-bottom: auto; }   
.cms-application-right{width: 100%; padding: 10px;}
}

@media (max-width: 767.98px) {
 .cms-application-wrap{   margin:0px; padding-top: 0px;  background: url("../images/index/map-1.svg") no-repeat -20% -20px; background-size:40% auto;}
 .cms-application{padding:0px;}    
 .cms-application-left{  padding-top: 50px;   }   
   
}


@media (min-width: 1800px) {
 .cms-application{background-size:52% auto;}   

}

 /*-------------------*/
/***** cms-application-list  *****/
/*------------------*/
.cms-application-list { width: 100%; margin:50px auto 0 auto;  padding: 0px;  }
.cms-application-list li{ display: flex; width:100%; padding: 0px 20px; margin:0px auto; flex-wrap: wrap; flex-direction: row; justify-content: center;box-sizing: border-box;list-style: none;transition: all 0.5s ease 0s;  overflow: hidden; position: relative; z-index: 1;} 
  
.cms-application-list figure{ cursor: pointer;  width:100%;height: auto; vertical-align: middle;overflow: hidden; transform: translateZ(0); position: relative;transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; background: #000;  }
.cms-application-list figure img{  width:100%;height: auto;opacity:1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
.cms-application-list li:hover img { opacity: .6;}
.cms-application-list figure::before,.cms-application-list figure::after { position: absolute; top:10px; right: 10px; bottom: 10px; left: 10px; content: ''; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
.cms-application-list figure::before{ border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list figure::after{ border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1); transform: scale(1);}
.cms-application-list figure:hover::before{ opacity: 1; -webkit-transform: scale(0,1); transform: scale(0,1);}
.cms-application-list figure:hover::after{ opacity: 1; -webkit-transform: scale(1,0); transform: scale(1,0);}
 

.cms-application-list .wrap-box {width:100%; padding:20px; margin-top: 0; position: relative; display: flex; align-self: center; flex-direction: column; text-align: center; z-index: 1;  box-sizing: border-box;}
.cms-application-list .wrap-box h3 a{  width: 100%; min-height:52px; font-weight:700; font-size:1.188rem;  color: #fff; line-height:1.5rem; overflow: hidden; white-space:pre-wrap;word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.cms-application-list li:hover .wrap-box{ -webkit-transition: all .8s;  -o-transition: all .8s; transition: all .8s;  -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px);  opacity: 1; }
.cms-application-list .slick-prev{left:0; top:40%;} 
.cms-application-list .slick-next{right:0;top:40%;}

/*-------------------*/
/***** news *****/
/*------------------*/
 .cms-news-wrap { width: 100%; max-width:100%; height: auto; display: flex; flex-wrap: wrap;  justify-content: flex-end; margin:0px auto;  padding: 40px 0px; position: relative; z-index: 0; background:#f1f7ed;}
/*.cms-news-wrap::before{content: "NEWS & EXHIBITIONS";display: block; position:absolute; z-index: 0; left:0px; top:-100px;  font-size:3rem; font-weight: 900;color:rgba(241,150,0,.1); writing-mode: vertical-lr;text-orientation: mixed;}
*/ .cms-news-wrap .cms-wrapper{ position: relative; z-index: 2; }
.cms-news-wrap .cms-title-2{ width: 60%;}
.cms-news-box { width: 100%;  margin: 10px auto;  padding:0px; display: flex;  flex-wrap: wrap;  justify-content:center; position: relative; z-index: 1; }
 

.cms-main-news-list { width: 100%; margin: 10px auto;  padding:0px 30px; display: flex;  flex-wrap: wrap;  justify-content:center; position: relative; z-index: 1; }
.cms-main-news-list li{ display: flex; flex-wrap: wrap;flex-direction: column; width:100%; margin: 20px auto; padding:20px 20px; box-sizing: border-box; overflow: hidden; list-style: none; transition: all 0.5s ease 0s; position: relative; }
.cms-main-news-list li:hover{ }
.cms-main-news-list figure {width: 100%;   height: auto; position: relative; overflow: hidden;  }
.cms-main-news-list figure img {width: 80%;max-width: 100%; padding: 20px; position: relative; overflow: hidden;  background-color:#efefef; transition: all 0.5s ease-in-out;}
.cms-main-news-list figure:hover img { opacity: .5;border-color: #df7475;  transform: scale(1.15); }
.listDateBox { display: flex; align-items: center; flex-wrap: wrap;  }
.listDateBox .date,.listDateBox .category {  font-size: 0.875rem;  font-weight: 400; color: #1d3a0f;}
.listDateBox .category {  position: relative;  margin-left: 5px; padding-left: 5px; text-transform: uppercase;}
.listDateBox .category::before {  content: "";  position: absolute; left: 0; margin-top: 10px;  width: 1px; height: 12px; background-color: #aaa;}
.listDateBox .mTitle { position: relative; padding-left: 18px; margin-left: 7px;  font-size: 13px; letter-spacing: 0.02em;  color: #aaa;}
.listDateBox .mTitle::before { content: ""; position: absolute; left: 0;  top: 10px;  width: 12px;  height: 1px; background-color: #e1e1e1;}

.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; top:20px; right: 20px;  width: auto;padding:0px 10px; font-size: 0.75rem;  font-weight: 700; border-radius:30px;  color: #3c7622; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all;   z-index: 9;  position: absolute; }
.new-tag-01{ border: solid 1px #3c7622;}

.cms-main-news-list .news-box {width: 100%; margin: 0;  padding:20px ; position: relative; box-sizing: border-box;display: -ms-flexbox; display: flex; flex-wrap: wrap; align-self: center; background: #fff; color:#3c7622; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; }
 .cms-main-news-list p { width: 100%; height: 52px; font-size: 0.9375rem; line-height: 1.7142857143rem;  letter-spacing: .05em;color:#0e280d; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-main-news-list p a{ color:#0e280d;   }

.cms-main-news-list  h3 a:before { content: ""; position: absolute;width: 100%; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#3c7622!important;  -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.cms-main-news-list h3 a:hover, .cms-application-list h3 a:focus, .cms-application-list h3 a:active {  color: #fff!important; }
.cms-main-news-list h3 a:hover:before, .cms-application-list h3 a:focus:before, .cms-application-list h3 a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
.cms-main-news-list h3 {position: relative;width: 100%; height: 72px;  font-size:1.313rem;  line-height: 2rem; font-weight:400;  margin:30px auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.cms-main-news-list h3 a { display: block; cursor: pointer; color: #3c7622; padding:5px 0px; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);  -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.cms-main-news-list .slick-prev { top:auto; bottom:0px;left:42%;z-index: 1; }
.cms-main-news-list .slick-next { top:auto; bottom:0px;right:42%;z-index: 1;  }
.cms-main-news-list .slick-dots { width: 100%;  position: absolute;justify-content: center; align-items: center; flex-direction: column;z-index: 999;  }

 @media (max-width: 767.98px) {
.cms-news-wrap { padding: 15px; }  
.cms-news-wrap .cms-title{ margin-left:auto; width: 100%;}
.cms-news-box-item{width: 100%;  }    
 .cms-news-wrap .cms-title-2{ width: 100%;}
.cms-main-news-list { padding:0px; }
.cms-main-news-list li{ width:100%; margin: 20px auto; padding:20px 0px;}
}




/*cms-Title Styles 樣式
=================================*/
.cms-title { width: auto; height: auto; margin:0px;  padding:30px 0px;  display: flex;  align-items: flex-start; flex-wrap: wrap; flex-direction:column; }
.cms-title h1{  display: block; margin: 0 0 15px 0px; font-size: 2.5rem; font-weight: 700; color:#0e280d; word-break: keep-all; word-wrap:normal;}
.cms-title h2{ font-size:1.063rem;font-weight:400; line-height: 1.6; color:#3c7622; margin: 0; text-align: center;}
.cms-title p{ margin:0px auto; text-align: center; font-weight: 700; color:#615f5e;}
.cms-title-2 { width:100%; height: auto; margin:0 auto 2% auto;  color:#edf5e8; padding-top: 0px;  padding-bottom: 0; display: flex;  flex-wrap: wrap; justify-content:center;  flex-direction:column; background: none;}
.cms-title-2 h2{  display: block; margin: 0; font-size: 2.5rem; font-weight:700; color:#edf5e8;text-align: left;  }
.cms-title-2 h3{  display: block; margin: 0; font-size: 1.5rem; font-weight:700; color:#edf5e8;text-align: left;  }
#cms-main .cms-title-2 p{ width: 100%;  margin:10px 0px;  font-size:1rem;font-weight:400; text-align: left;   color:#edf5e8;  } 
.cms-title-style{  display: block; margin: 0 auto 15px auto; font-size: 3rem; text-align: center!important; font-weight: 900; color:#0e280d!important; position: relative;}
/*.cms-title-style::before { display: block; content: ''; width: 2px; height:80px; top:-100px;left: 50%; background:#000; position: absolute; z-index:0; }*/

.cms-title-span{  font-size:1.063rem;font-weight:400; line-height: 1.6; color:#3c7622; margin: 0; text-align: center;} 
@media (max-width: 1024px) {
.cms-title-style{  margin-bottom:10px; }
}

@media (max-width: 767.98px) {
.cms-title h1{  font-size: 1.875rem;  }
.cms-title-style{ margin-top: 0px; font-size: 1.875rem;}
.cms-title-style:after {}
#cms-main .cms-title-2 p{ width: 90%;}
.cms-title-span{font-size:0.9rem;} 
}


 




/*---------------*/
/***** btn *****/
/*---------------*/
.icon-next{background: url("../images/icon/arrow-right.svg") no-repeat left 0px;  background-size: auto;}
.cms-btn { width: auto; height: 35px; padding: 20px 40px; font-weight: 700; text-decoration: none; border: 1px solid transparent;  display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; overflow: hidden;position: relative; border-radius:30px;  }
a.cms-btn { color:#fff;   }
.cms-btn:hover {  border-color: rgba(255, 255, 255,.5);  box-shadow: 1px 1px 8px rgba(255, 255, 255, 0.4);}
a.cms-btn:hover {  color: #fff;}
.cms-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;}
.cms-btn:hover:before {left: 100%;}
a.cms-btn i {   margin-left: 30px; width:30px; height: 20px; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-btn:hover i{ -webkit-transform: translateX(15px); transform: translateX(15px)}

@media (max-width: 768px) {
.cms-btn i { width:18px; height: 18px;  }
.cms-btn {padding: 15px;}
}

/*cms-btn-more =================================*/ 
.custom-btn-1{  width: auto; height: 35px; padding: 20px 40px; font-weight: 700; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer; background-color:#274023;  background-size: 20px auto;  -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s  }
.custom-btn-1:hover{background:#3c7622; }
@media (max-width: 767.98px) {
a.cms-btn { color:#fff;   }
.custom-btn-white{ background-color: transparent}
}

/*cms-btn-white =================================*/ 
.custom-btn-white{ border: solid 1px #fff;   }
a.cms-btn.custom-btn-white{ color:#fff;  }
.custom-btn-white .icon-next{background: url("../images/icon/arrow-right.svg") no-repeat left 0px;  background-size:auto;}


/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:1; display: flex;   width: 100%; height: auto; margin:20px auto;  transition: all 1s;}

/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #756b63;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #000;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}