/* 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; }
 
 body{ background: url("../images/index/dot-line.svg")  left top repeat-y; background-size:100% auto; }
    
     
/** font-family:=================================*/
.txt-ch{font-family:'Noto Sans TC','Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Roboto','Arial', "sans-serif"; }
.color-white{color: #fff!important; }
.container { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 20px; padding-left: 20px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1025px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 768px  }
}
@media (min-width:1200px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 1280px}
}
@media (min-width:1920px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 1440px }
}



/**banner=================================*/

.cms-main-banner { width: 100%; max-width:100%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 2;  }
.cms-main-banner .imgSliderBox { position: relative; z-index:0;width: 100%; display: flex; flex-wrap: wrap; }

 .cms-main-banner img{ display: block; width: 100%; max-width: 100%;  height: auto; position: relative; }
.cms-main-banner .slick-prev { left:0;z-index: 1; }
.cms-main-banner .slick-next { right:0;z-index: 1;  }
.cms-main-banner .slick-dots { right:50px; top:30px; width: 30px;  flex-direction: column;z-index: 999;  }

 

 
.slider-item { width: 100%; position: relative; z-index:2; }
/*.slider-item-img { width:30%; height: 100%; margin-top:30px;  position: absolute; left: 30%; top:0;  }
.slider-item-img  img{ width: auto; max-height: 90%; height: auto;  }
*/
.cms-main-banner .cms-sloga { width:40%; max-width: 600px; position: absolute; left:10%; top:20%;   display: flex; flex-wrap: wrap; z-index: 9;}    
.cms-main-banner .cms-sloga h2 {margin-bottom: 15px;  width: 100%; display: block; font-size: 2.35rem; text-align: left; font-weight:700;color:#000; word-wrap:break-word;word-break:keep-all; }
.cms-main-banner .cms-sloga h3 {margin-bottom: 15px;  width: 100%; display: block; font-size: 2.875rem; text-align: left; font-weight:700;color:#333; word-wrap:break-word;word-break:keep-all; }
.cms-main-banner .cms-sloga p { width: 100%; font-size:1.188rem;  font-weight: 400; color: #333; text-align: left; word-wrap:break-word;word-break:keep-all}
@media (min-width:1200px) {
.cms-main-banner .cms-sloga { left:14%; top:25%; }    

}
 @media (min-width:1600px) {
.cms-main-banner .cms-sloga { left:14%; top:40%; }    

}


.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: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}

@media (max-width: 1199.98px) {
.cms-main-banner .cms-sloga { top:10%;}    
.cms-main-banner .cms-sloga h2 {  font-size:1.75rem;   }

    
.cms-main-banner .cms-sloga p { font-size:0.875rem;  }
}
@media (max-width: 1024px) {
     .cms-notice{display: none;}
 }
@media (max-width: 767.98px) {
.cms-main-banner { width: 100%;} 
.cms-main-banner .imgSliderBox { width: 100%; height:534px; }
 .slider-item-img { width:30%; left:auto;right: 0px; top:0;  }    
.cms-main-banner .cms-sloga { width:80%; max-width: 600px; position: absolute; left:20px; top:30%;  }    
.cms-main-banner .cms-sloga h2 { margin-bottom: 5px; width: 100%;height: auto;  }
 .cms-main-banner .cms-sloga h3 {font-size:2.15rem; }
.cms-main-banner .cms-sloga p { width: 100%; display: none;  }
.type { animation:none; }
.animated.type { animation:none;}
}

 
.slider-item-img img { display: block;  -webkit-animation: zoom 2s ease-in-out; -moz-animation: zoom 2s ease-in-out; -o-animation: zoom 2s ease-in-out; -ms-animation: zoom 2s ease-in-out; animation: zoom 2s ease-in-out;}
.cms-main-banner .slick-dots {position: absolute; bottom:-40px!important; justify-content: center; }
.cms-main-banner .slick-dots li.slick-active button, .cms-main-banner .slick-dots li:hover button { background:#df7475; }
.cms-main-banner .slick-dots li button { background:rgba(254,254,254,.5);   }
 
@keyframes zoom {
  0% { -webkit-transform: translateY(-30px);  transform: translateY(-30px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); 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; }
}

  /**訊息公告區塊 =================================*/
.cms-notice{width: 100%; height:40px;  background:#333; padding:0px 30px; overflow:hidden;}
.cms-notice-wrap{width: 100%; max-width: 1160px; margin:0 ; padding: 0px; display: flex; flex-wrap: wrap; align-items: center;align-content: center; }
.cms-notice-wrap i{padding-right: 5px; color: #fff; }
.cms-notice-title{ width: 10%; font-size:0.9375rem;margin-top: -5px;color:#fff; }
.cms-notice-list{ width: 85%; list-style: none; }
.cms-notice-list li{list-style: none;padding-top:10px; display: block;  font-size:0.9375rem; color:#3c3c3c; }
.cms-notice-list li a{ color:#fff!important; }
.cms-notice-list .slick-prev {top:60%; left:95%;z-index: 1; }
.cms-notice-list .slick-next {top:60%; right:0;z-index: 1;  }
.cms-notice-list .slick-prev:before, .cms-notice-list .slick-next:before {  font-size: 1rem; color: #3c3c3c; }


@media (max-width: 767.98px) {
 .cms-notice-title{ margin-top: -25px; }
.cms-notice-title strong{ display: none;}
.cms-notice-list .slick-prev,.cms-notice-list .slick-next {display: none!important; }   
}

.cms-main-wrap{ width: 100%;max-width: 1200px;  margin: auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center; position: relative; z-index:1; }
  .cms-main-about{position: relative; margin:0px auto 0 auto; padding: 50px 0px 100px 0px;  width: 100%;display: flex; flex-wrap: wrap; z-index: 1;   }
.cms-main-about:before{ content: ""; display: block; width: 100%; height:34vh; position: absolute; margin-top:-100px; background: url("../images/index/line-1.png") no-repeat right bottom #221e1f; background-size: 30% auto;}
.cms-main-about-item {width:50%; height: auto; margin-top: -36px;  padding:0px 50px;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.cms-main-txt{width: 100%; margin:5% auto; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
#cms-main .cms-main-txt h2 { width: 100%; font-size:1.5rem;   font-weight: 400;  padding:5px;   margin-bottom: 20px;  color: #000; }

#cms-main .cms-main-txt p { width: 100%; font-size:1rem;   font-weight: 400;  padding:5px;   margin-bottom: 20px;  color: #4b4948; }
#cms-main .cms-main-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #000; }
.cms-main-about-card { width:30%;  margin:20px 0px;   padding:0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-about-card .item{ width: 100%; max-width: 100%; margin:0px; padding: 30px 0px 40px 0px; height: auto;position: relative;  transition: all 0.3s;}
.cms-main-about-card .item img{ position: relative; z-index: 0;margin: 0px; padding:15px;background: #fff; box-shadow: 7px 20px 36px -16px rgba(0,0,0,0.47);}
@media (min-width: 1520px) {
.cms-main-about-item { margin-top:20px; }
.cms-main-about-item .cms-title{margin-top: 20px; }
}

@media (max-width: 1024px) {
.cms-main-about-item {  margin: 0px; padding:0px 25px; }
.cms-main-about-card { margin: 0px;   padding: 0px;  }   
}


@media (max-width: 768px) {
.cms-main-about{  margin:0;padding:0px;background-position: right 44vh;background-size:auto 60% ; }
.cms-main-about-item {width: 100%;   -ms-flex: 1 1 100%; flex: 1 1 100%; margin: 0px; padding:0px 35px; }
.cms-main-about-card { width: 80% ; -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 30%); flex: 1 1 calc(100% - 30%); margin: 0px auto; padding: 0px; }
.cms-main-about-item .cms-main-txt{  margin:0px auto 2% auto; }
.cms-main-about-card .item{ width: 80% ; margin: 0px auto; padding: 0px; }
.cms-main-about:before{ display: none;}
    .cms-main-about-item .color-white{ color: #000!important; } 
 }

@media (max-width: 767.98px) {
.cms-main-about{   background-position: right 44vh; background-size: auto 100% ; }
.cms-main-about-item {  padding:0px 15px; }

}
 

/*-------------------*/
/***** product  *****/
/*------------------*/
.cms-main-product { width: 100%; padding:100px 15px;  margin:0 auto; position: relative; z-index: 0; background: url("../images/index/bg.png") no-repeat right top #fff; background-size: 100% auto;  }
 
@media (min-width: 992px) and (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 50px 15px; }
}
@media (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 50px 15px; }
}
@media (max-width: 768px) {
    
.cms-main-product {  padding:15px; }
 }
/*----------------------------------------/
產品總覽頁Product*/

.cms-product-wrap{ width:100%; max-width: 1400px; margin:0px auto;  padding:0px 0px 30px 0px; position:relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; } 
 .cms-product-cate:nth-child(1){ width:58%;  margin:0px;  padding:0px; position:relative; z-index: 1;   }
.cms-product-cate:nth-child(2) { width:42%;  margin:0px;  padding:0px; position:relative; z-index: 1;   }
.cms-product-cate li{ width:100%; margin:0px; padding:0px; display: flex; flex-wrap: wrap;    position: relative; z-index: 1;overflow: hidden;  transition: all 0.3s linear 0s;  }

 
.cms-product-cate li figure { position: relative; float: left; overflow: hidden; margin:0px;width: 100%; /* width: 300px;  height:480px;*/text-align: center; cursor: pointer;	}
.cms-product-cate li figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity:1;}
.cms-product-cate li figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cms-product-cate li figure figcaption::before,.cms-product-cate li figure figcaption::after {pointer-events: none;}
.cms-product-cate li figure figcaption{ position: absolute; top: 0; left: 0; width:100%; height: 100%;}
 
.cms-product-cate:nth-child(1) li figure figcaption > a { z-index: 1000;  margin-top: 90%;  opacity: 1;}
.cms-product-cate:nth-child(2) li figure figcaption > a { z-index: 1000;  margin-top: 5%;  opacity: 1;}

.cms-product-cate li figure figcaption > a.cms-btn{width: 150px; font-size:1.1rem;  }
.cms-product-cate li figure figcaption > a.cms-btn i{ margin-top: 0px; width: 30px;}

.cms-product-cate:nth-child(1) li figure h2 {word-spacing: -0.15em;  font-size: 200%;  font-weight: 700; text-align: left;}
.cms-product-cate:nth-child(2) li figure h2 {word-spacing: -0.15em;  font-size: 150%;  font-weight: 700; text-align: left; color: #333;}
.cms-product-cate li figure h2 span {font-weight: 700;}
.cms-product-cate li figure h2,.cms-product-cate li figure p {margin: 0;   }
.cms-product-cate li figure p { font-size:100%; font-weight: 700;}
.stroke{-webkit-background-clip: text; background-clip: text;  background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(#adadad), color-stop(#fff), to(#adadad));
background-image: -o-linear-gradient(left,  #ffffff, #ffffff, #adadad, #ffffff); background-image: linear-gradient(to right, #ffffff, #ffffff, #adadad, #ffffff);  color: #000119; font-size: 30vmin; font-weight: 700; letter-spacing: calc(1em / 8); padding: calc(--stroke-width / 2);  -webkit-text-stroke-color: transparent; -webkit-text-stroke-width: calc(1em / 16);}

 @media (max-width: 768px) {
     
 .cms-product-cate:nth-child(1) li figure h2, .cms-product-cate:nth-child(2) li figure h2 {  font-size: 120%;  }
}
 @media (max-width: 767.98px) {
      .cms-product-cate:nth-child(1){ width:100%;  margin:0px;  padding:0px; position:relative; z-index: 1;   }
.cms-product-cate:nth-child(2) { width:100%;  margin:0px;  padding:0px; position:relative; z-index: 1;   }
 .cms-product-cate li figure figcaption { padding:50px 10px 10px 10px; font-size:100%;  }
 .cms-product-cate li figure figcaption > a.cms-btn{ font-size:90%;width: 100px; height: 35px; padding: 10px; }   
.cms-product-cate li figure figcaption > a.cms-btn{width: 150px; font-size:0.9rem;  }
.cms-product-cate li figure figcaption > a.cms-btn i{ margin-top: 0px; width: 22px;}
     
}
/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { background: #000;}
figure.effect-bubba img {opacity: 0.7; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
figure.effect-bubba:hover img {opacity: 0.4;}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { position: absolute; top:16px; right:16px; bottom: 16px; left: 16px; content: ''; opacity:1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-bubba figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1);}
figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0);}
figure.effect-bubba h2 { position: absolute;  bottom: 60px; left: 0;  padding: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba p { padding: 0px; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba:hover figcaption::before,figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
figure.effect-bubba:hover h2,figure.effect-bubba:hover p { opacity: .7; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0);}
 
/*-----------------*/
/***** Apollo *****/
/*-----------------*/
figure.effect-apollo {background: #000;}
figure.effect-apollo img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1);}
figure.effect-apollo figcaption::before { position: absolute; top: -40px; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
figure.effect-apollo p { position: absolute; left: 0; top: 0; margin:5rem 1rem; padding: 0 1rem; border-top:3px solid #fff; text-align: right;opacity: 1; -webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
figure.effect-apollo h2 {padding-top: 20%; text-align: left; color: #fff; }
figure.effect-apollo:hover img { opacity: 0.3; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1);}
figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,150%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,150%,0);}
figure.effect-apollo:hover p, figure.effect-apollo:hover h2{color: #fff!important;  opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}

@media (max-width: 767.98px) {
figure.effect-apollo p {text-align: left; }  
 figure.effect-apollo h2 {padding-top:0px;  }
   
}


 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product { width: 100%; padding:50px 15px;  margin:0 auto; position: relative;  }
.cms-main-product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; }
.cms-main-product-item li { width: calc( 100%/4 - 30px); margin:15px; padding:0px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
 /*.cms-main-product-item li:hover { transform: scale(0.95);}*/
.cms-main-product-item li a{display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.cms-main-product-item li a figure { position: relative; width:100%; height: auto; margin-bottom: 15px; overflow: hidden;   transition: all 0.5s ease 0s; }
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%;  transition: all 0.3s;}
.cms-main-product-item li figure:hover img { transform: scale(1.1);  opacity: 0.6; }
.cms-main-product-item li .cms-main-product-inner{width: 100%;margin: 0px; display: flex; flex-wrap: wrap;align-content: center; align-items: center; } 

 .cms-main-product-item li figcaption{ width: calc(100% - 44px);padding: 0px 10px;   }

#cms-main .cms-main-product-item li figcaption em{font-size:0.75rem; }
 #cms-main .cms-main-product-item li figcaption  h3{flex: 0 0 100%; margin:0px; font-size:0.875rem; line-height:1.35rem; font-weight: 400;  color:#000; overflow: hidden; word-break:keep-all;  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{ flex: 0 0 100%; margin: 10px 0px; font-size: 0.875rem; line-height: 1.5rem; font-weight: 300;   overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 


.cms-main-product-item li .cms-buy{ width: 44px; height: 44px;  display: flex; justify-content: center; align-content: center; align-items: center; background: #000; border-radius:99rem; transition: all 0.5s ease 0s; transform: scale(1); }
.cms-main-product-item li .cms-buy:hover{transform: scale(1.1); background: #fcb811; }
.cms-main-product-item li .cms-buy i{color: #fff; -webkit-transform: translate3d(0, 0px,0); transform: translate3d(0, 0px,0);transition: transform 0.35s; }
.cms-main-product-item li .cms-buy:hover i{ -webkit-transform: translate3d(0, 5px,0); transform: translate3d(0,5px,0);}
.cms-main-product-item li .cms-price{ width: 100%;  display: flex; flex-wrap: wrap;  align-content:center;font-size:0.9rem;  font-weight: 400;  }
.cms-main-product-item li .cms-product-price{ margin:0px 10px;  color:#ea5b5b; }
.cms-main-product-item li .cms-product-price-origin{ margin:0px 10px; color:#b5b5b5; text-decoration: line-through; }
.cms-main-product-note { position: absolute; top:0px; left: 0px; padding: 5px; width:60px; height:30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.cms-main-product-note.cms-main-product-note-sale {  color: #fff; background:#cc3333; }
.cms-main-product-note.cms-main-product-note-stock { color: #fff; background:#333; }
@media (max-width: 768px) {
.cms-main-product-item li { width: calc(100% / 3 - 30px);   }
}


@media (max-width: 767.98px) {
.cms-main-product-item li { width: calc(100% / 2 - 10px); margin: 15px 5px;  }
.cms-main-product-item li figcaption{ width:100%;padding: 0px 10px;   } 
.cms-main-product-item li .cms-buy{  display: none;}
.cms-main-product-item li em{display: none;}
}


/*-------------------*/
/***** news圖文方格 *****/
/*------------------*/
 
.cms-news-wrap{ width: 100%; padding:50px 0px 100px 0px; margin:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index:0;
background:url("../images/index/line-2.png") left top no-repeat #221e1f; background-size: 30% auto;

}
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: -41px;  width: 100%; 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: relative; }
#cms-main a.new-tag-tcategory{ color:#000;  }
.new-tag-tcategory{ width: auto;max-width: 100%; font-size: 14px; font-weight: 400; line-height: 1.57; letter-spacing: normal; position: relative; padding:10px; margin: 0px;   color: #fff; background:#e7e7e7; -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
.new-tag-tcategory:hover{ color: #fff; background:#000;  }
#cms-main a.new-tag-tcategory:hover{ color: #fff;  }
.cms-main-news-list {width: 100%; max-width: 1400px; margin: 10px auto;  padding:10px; display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.cms-main-news-list li{ width: calc(100% - 60px); padding: 10px; margin:0px 30px ; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;   background: #fff; }
.cms-main-news-list li:hover{ }
.cms-main-news-list figure img { display: block; width: 100%; max-width:100%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s linear; position: relative;  }
.cms-main-news-list figcaption { box-sizing: border-box; color: #4c4c4c; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; padding: 20px;  position: relative;  }
.cms-main-news-list figcaption .wrap { display: -ms-flexbox; display: flex; flex-wrap: wrap;   width: 100%; margin: 0;}
.cms-main-news-list figcaption .news-box {position: relative;  width: 100%; box-sizing: border-box;}
.cms-main-news-list figcaption  h3 {width: 100%; margin-bottom: 10px; }
.cms-main-news-list figcaption a h3{ position: relative;width: 100%; height: 60px;  font-size: 1.25rem;  line-height: 1.75rem; font-weight:400; color:#000!important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
 .cms-main-news-list figcaption p { width: 100%; height: 52px; font-size: 0.9rem; line-height: 1.5rem; color:#404040; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
 
.cms-main-news-list .cms-date{  width: 40%; margin-top: -12%;  right: 0px;  padding: 0px;  height: 40px; color:#cacaca; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:flex-start;  -ms-flex-pack: flex-start;justify-content: flex-start; -webkit-box-align:flex-start; -ms-flex-align: flex-start; align-items: flex-start; opacity: 1; z-index: 9; position: relative;}
.cms-main-news-list .slick-next {right: 5px;}
.cms-main-news-list .slick-prev {left: 5px; z-index: 99;}
@media (max-width: 1199.98px) {
.cms-main-news-list li{  margin:0px 10px; }
 }
@media (max-width: 798px) {
.cms-news-wrap{ background-size:50% auto,100% auto ,100% 100%; }
.cms-main-news-list {  padding:10px; margin: 60px auto 30px auto;   }
}

/* Underline From Left */
a.hvr-underline-from-left {color: #006f8a;}
.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: #006f8a; 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;  }


	

 /*cms-Title Styles 樣式
=================================*/
.cms-title { width:100%; height: auto; margin:0 auto 50px auto;  padding-top: 0px;  padding-bottom: 0;  display: flex; justify-content:center; align-items: flex-start;  flex-wrap: wrap; flex-direction:column; background: #221e1f;}
.cms-title h1{  display: block;margin: 0; font-size: 2rem; text-align: left;  color:#000; }
.cms-title h2{ margin:0px;display: block;   }
.cms-title span{ margin:0; font-size: 3.6rem; letter-spacing: 12px; font-weight: 700; }
.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;  padding-top: 0px;  padding-bottom: 0; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;  flex-direction:column; background: none;}
#cms-main .cms-title-2 p{ width: 63%;  margin:10px auto;  font-size:1rem; font-weight:400; text-align: center; color:#6c7280;  }
.cms-title-style{   position: relative;width: auto; display: block;  font-size: 2rem; color: #000; font-weight: 400; }
.cms-title-style:after { content: ""; width: 12px;  height: 12px; display: block; position: absolute; left: -10px; top: -6%; background: url(../images/index/dot.svg) no-repeat left top; background-size: 12px;}
.cms-title-span{ margin:0px; font-size: 1rem; text-align: left; letter-spacing: 1px;  font-weight: 700;color:#999;}
@media (max-width: 1024px) {
.cms-title-style{  margin-bottom:10px;position: relative;width: auto; display: block;  font-size: 2rem; color: #000; font-weight: 400; }
.cms-title { justify-content: center; align-content: center; align-items: center; background: none;}

}

@media (max-width: 767.98px) {
.cms-title-style{ font-size: 1.875rem;}
#cms-main .cms-title-2 p{ width: 90%;   }

}

 /*---------------*/
/***** btn *****/
/*---------------*/
.icon-next{background: url("../images/icon/arrow-right-2.svg") no-repeat left 0px;  background-size:100% auto;}
.cms-btn { width: auto; height: 35px; padding: 20px 40px; font-weight: 700; text-decoration: none; border: 1px solid #fff; 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;  border-radius:30px;  overflow: hidden;position: relative;  }
a.cms-btn { color: #fff;font-weight: 400;  }
.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%;}
.cms-btn i { margin-left: 10px; 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: 500; 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;  border-radius:30px;  background:#000; border: solid 1px #000;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:#333; }




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