/* 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-image: url("../images/index/dot-line.svg"),url("../images/index/style-1.svg"); background-position: left top, -5% top; background-repeat: repeat-y,repeat-y; background-size:100% auto,25% auto; }
      
/** font-family:=================================*/
.txt-ch{font-family:'Noto Sans TC','Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Roboto','Arial', "sans-serif"; }

.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 }
}


.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;transition-delay:.3s;}
 
.slider-item { width: 100%; position: relative; z-index:2; }
.slider-item img { clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);  }
/*.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:#e60044; word-wrap:break-word;word-break:keep-all; }
.cms-main-banner .cms-sloga h3 {margin-bottom: 15px;  width: 100%; display: block; font-size: 2rem; text-align: left; font-weight:700;color:#fff; word-wrap:break-word;word-break:keep-all; }
.cms-main-banner .cms-sloga p { width: 100%; font-size:1.188rem;  font-weight: 400; color: #fff; text-align: left; word-wrap:break-word;text-shadow: 2px 2px 0px #006f8a, -1px 1px 0px #006f8a, 1px -1px 0px #006f8a, -1px -1px 0px #006f8a;}
@media (min-width:1200px) {
.cms-main-banner .cms-sloga { left:14%; top:30%; }    
.cms-main-banner .cms-sloga h3 {margin-bottom: 15px;  width: 100%; display: block; font-size: 2.875rem;  }
}
 @media (min-width:1600px) {
 
}


.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:20%;  }    
.cms-main-banner .cms-sloga h2 { margin-bottom: 5px; width: 100%;height: auto;  }
.cms-main-banner .cms-sloga p { width: 100%;   }
.type { animation:none; }
.animated.type { animation:none;}
}

 
.slider-item-img  img {-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; }
 
@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:#f2f5f7; 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: #e60044; }
.cms-notice-title{ width: 10%; font-size:0.9375rem;margin-top: -5px;color:#e60044; }
.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:#3c3c3c!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; }
/**banner=================================*/
.cms-main-banner{ width:100%; height: auto; margin:0px auto; padding: 0px; overflow: hidden;  position: relative; z-index: 1;}
.cms-main-banner img{ 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;  }

 
@media (max-width: 767.98px) {
.cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
.cms-main-banner .slick-dots { bottom:-10px; }
.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%;  margin: auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center; position: relative; z-index:1; }
.cms-main-about{position: relative; margin:-50px auto 0 auto; padding: 100px 0px 0px 0px;  width: 100%;display: flex; flex-wrap: wrap; z-index: 0;  background: url(../images/index/bg-product.jpg) no-repeat right -30px; background-size:60% auto; }
 
.cms-main-about-item {width: 60%; height: auto; -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%;  padding:40px;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-txt{width: 100%; margin:3% auto; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
#cms-main .cms-main-txt p { width: 100%; font-size:1.188rem;   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: calc(100% - 60%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 60%); flex: 1 1 calc(100% - 60%); margin:20px 0px;   padding:10px 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-about-card .item{ width: 100%; max-width: 100%; margin:15px 0px; padding: 0px 0px 40px 0px; height: auto;position: relative;  transition: all 0.3s;}
.cms-main-about-card .item img{ position: relative; z-index: 0; padding:0px; box-shadow: 7px 20px 36px -16px rgba(0,0,0,0.47);}
.cms-main-about-card .item:after { content: ""; width: 24px;  height: 24px; display: block; position: absolute; right: -36px; bottom: 60px; background: url(../images/index/dot.svg) no-repeat right top;}
@media (min-width:1600px) {
 .cms-main-about{ margin:-80px auto 0 auto; }   
.cms-main-about-item {  padding-left:10%; }
.cms-main-about-card { width: calc(100% - 60%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 60%); flex: 1 1 calc(100% - 60%); margin:20px 0px;   padding:10px 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-about-card .item{  padding-top: 10%;  }
}
@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; }
 }

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

}

.cms-main-icon { width: 100%; padding:0px; margin: 0; position: relative;  display: flex; flex-wrap: wrap;   }
.cms-main-icon-card { width: calc(100% - 50%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 50%); flex: 1 1 calc(100% - 50%); margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-icon-card .item{ width: 100%; max-width: 100%; margin:15px 0px 0px 0px; padding:0px; height: auto;position: relative; clip-path: polygon(0 0, 100% 0, 81% 100%, 0% 100%); transition: all 0.3s;}
.cms-main-icon-card .item img{ position: relative; z-index: 0; padding:0px; }

.cms-main-icon-wrap {width: 50%; height: auto; -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%;  padding:0px 20px;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-icon-list{ width: 100%;  max-width: 80%;   padding:0px;  display: flex; flex-wrap: wrap; justify-content: center; } 
.cms-main-icon-list li{  display: flex; flex-wrap: wrap;flex-direction: column;  justify-content: space-between;  align-content: center; width: calc(100%/2 - 30px); margin:0px 15px 30px 15px;  list-style: none;  padding: 0px 0px; transition: all 0.5s ease 0s;}

.cms-main-icon-list li:hover{  transform: scale(1.1);   }

#cms-main .cms-main-icon-list li h3{ margin: 10px auto 0px auto; font-size:1.5rem; font-weight:500;  color:#006f8a; text-align: center;}
#cms-main .cms-main-icon-list li p{ color: #4b4948; text-align: center; }

.cms-main-icon-wrap i { display: block; width:100px; height:100px;  margin:0 auto; position: relative;  }
.icon-all{display: block; margin: auto; background-repeat: no-repeat; background-position: center; background-size: 90px 90px;}
.icon-1{background-image: url("../images/index/icon-1.png"); }
.icon-2{background-image: url("../images/index/icon-2.png"); }
.icon-3{background-image: url("../images/index/icon-3.png"); } 
.icon-4{background-image: url("../images/index/icon-4.png"); }
 

@media (max-width: 1024px) {
.cms-main-icon-list{ width: 100%;  max-width: 100%;   padding:0px;  display: flex; flex-wrap: wrap; justify-content: center; } 

}

@media (max-width:768px) {
.cms-main-icon-card {width:100%; -ms-flex: 1 1 100%; flex: 1 1 100%;  }
.cms-main-icon-card .item{ width: 100%; max-width: 90%; margin:15px 0px 40px 0px; padding:0px; height: auto;position: relative; clip-path: polygon(0 0, 100% 0, 81% 100%, 0% 100%); transition: all 0.3s;}


}



/*-------------------*/
/***** download *****/
/*------------------*/
.cms-download-wrap{width: 100%;display: flex; flex-wrap: wrap; position: relative; background:#8a8988;}
.cms-download-title{width: 30%; margin: 0px; padding: 40px 20px; display: flex; flex-wrap: wrap;justify-content: center;  background: linear-gradient(-75deg, transparent 50px, #d70749 0), linear-gradient(75deg, transparent 50px, #8a8988 0);}
.cms-download-title h2{ font-size: 2.75rem; font-weight:500; color: #fff;}
.cms-download-txt{width: calc(100% - 30%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 30%); flex: 1 1 calc(100% - 30%); margin: 0px; padding: 0px; display: flex; flex-wrap: wrap;  }
.cms-download-box{ width: calc(100% - 330px);  display: flex; flex-wrap: wrap; align-items: center;}
.cms-download-box p{color: #fff;}
.cms-download-btn{ width: 330px;  display: flex; flex-wrap: wrap; align-items: center; }
@media (max-width: 768px) {
.cms-download-title h2{ font-size:200%; }
.cms-download-title{width:25%; }
.cms-download-txt{width: calc(100% - 25%); -ms-flex: 1 1 calc(100% - 25%); flex: 1 1 calc(100% - 25%);  }
}
@media (max-width: 767.98px) {
    
.cms-download-title{width:100%;  padding:10px 20px; }
.cms-download-txt{width: 100%; -ms-flex: 1 1 100%; flex: 1 1 100%;padding: 15px;  }

}

@media (max-width: 576px) {
    .cms-download-box {width: 100%;; padding: 0 20px 0 0;}
    .cms-download-btn {margin-top: 15px;}
}

@media (max-width: 430px) {
    .cms-download-box {width: 100%; padding: 0;}
    .cms-download-btn {width: 100%;display: block;max-width: 330px;}
    .cms-main-about-item{padding: 0 15px;}
    .container{padding: 0px;}
    
}

/*-------------------*/
/***** product  *****/
/*------------------*/
.cms-main-product { width: 100%; padding:100px 15px;  margin:0 auto; position: relative; z-index: 0; background: linear-gradient(-45deg, transparent 120px, #f7f7f7 0);  }
.cms-main-product:after{content: "";  width: 100% ;  height: 100%; right: -5%; top:0px; position: absolute;  z-index: 0;background: url("../images/index/bg-line.svg") no-repeat right top; background-size: 50% 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-cate { 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 li{ width: 100%;  margin:0px 15px; padding:0px; display: flex; flex-wrap: wrap; justify-content: center;  position: relative; z-index: 1;overflow: hidden;  transition: all 0.3s linear 0s;  }
/* Common style */
.cms-product-cate li figure { position: relative; float: left; overflow: hidden; margin: 10px 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,.cms-product-cate li figure figcaption > a { position: absolute; top: 0; left: 0; width:100%; height: 100%;}
 /* Anchor will cover the whole item by default For some effects it will show as a button*/
.cms-product-cate li figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
.cms-product-cate li figure h2 {word-spacing: -0.15em;  font-size: 150%;  font-weight: 400;}
.cms-product-cate li figure h2 span {font-weight: 700;}
.cms-product-cate li figure h2,.cms-product-cate li figure p {margin: 0; color: #fff;  }
.cms-product-cate li figure p { font-size:100%; font-weight: 700;}
/*---------------*/
/***** 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 { padding-top: 30%; -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);}
.cms-product-cate .slick-prev { left:0; }
.cms-product-cate .slick-next { right:0 }
.cms-product-cate .slick-prev, .cms-product-cate .slick-next { font-size: 0; line-height: 0; position: absolute; top: 40%; z-index:1; display: block; width:36px; height: 36px; padding: 0;background:#d80a4a; border-radius:99rem; outline: none;}
 .cms-product-cate .slick-prev:before,.cms-product-cate .slick-next:before { color: #fff; font-size: 1.15rem;  }

 
/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.cms-news-wrap{ width: 100%; max-width: 1200px; padding:50px 0px; margin:0px auto; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; position: relative; z-index: 1;  }
.cms-news-box-left{width: 60%;margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center;  }
.cms-news-box-right{width:40%;margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center;}
 @media (max-width: 768px) {
.cms-news-box-left{width: 100%;margin: 0px;  padding: 0px 15px; }
.cms-news-box-right{width:100%;margin-top: 0px;  }  
}

 /*-------------------*/
/***** 消息一筆 *****/
/*------------------*/
.cms-news-top{width: 100%; height: auto; margin:0; padding:0px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; position: relative; background: #f7f7f7;  }
.cms-news-top figure { width: 55%;display: flex; padding:0px; background: #fff;  overflow: hidden; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s }
.cms-news-top figure img{ width: 100%; padding:0px; background: #fff;  -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-news-top figure:hover img{  -webkit-transform: scale(1.05); transform: scale(1.05);  opacity: .75;}
 .cms-news-top .cms-news-top-inner { width:45%; height: auto; margin:0 auto; padding:0px 30px;  display: flex; flex-wrap: wrap;  flex-direction: column;   }
.cms-news-top .cms-news-top-inner .cms-news-top-inner-box{ width: 100%;  height: auto;  padding:50px 0px;  }
 .cms-news-top .cms-news-top-inner .cms-news-top-date{ width: 100%; height:30px;  padding:30px 0px; display: flex; flex-wrap: wrap; }
 #cms-main .cms-news-top .cms-news-top-inner a .cms-news-top-inner-box h3 { width: 100%; max-width: 100%; font-size: 1.125rem; line-height: 1.875rem;  color:#4b4948;overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 6;  -webkit-box-orient: vertical;  word-break: normal; }
.cms-news-top .cms-news-top-inner .cms-date{ width: 50%; display: flex;   font-size: 0.875rem; font-weight:700;color:#4b4948;  }
.cms-news-top .cms-news-top-inner .new-tag {width: 50%; height: 30px; display: flex; justify-content: flex-end; }
 #cms-main .cms-news-top .cms-news-top-inner a h3:hover{ color:#e60044;}

 
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; 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;   }
#cms-main a.new-tag-tcategory{ color: #669999;  }
.new-tag-tcategory{ width: auto;max-width: 100%; height: auto; font-size: 14px; line-height: 1.5rem; font-weight: 400; letter-spacing: normal; position: relative; padding:0px 8px; margin: 2px; border: solid 1px #669999; border-radius:5px; color:#669999;  -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
@media (max-width:1024px) {
  #cms-main .cms-news-top .cms-news-top-inner a .cms-news-top-inner-box h3 {  max-width: 100%; }
   
}
   
@media (max-width: 767.98px) {
.cms-news-top{width: 100%;  padding: 10px; }   
.cms-news-top figure { width: 100%;  }
.cms-news-top figcaption { width:100%; margin-left:0;  }
.cms-news-top .cms-news-top-inner { width:100%; padding:10px;  }   
.cms-news-top .cms-news-top-inner .cms-news-top-inner-box{padding:0px;}  
#cms-main .cms-news-top .cms-news-top-inner  h3 a{  font-size:1.5rem; margin-bottom: 5px;  }  
#cms-main .cms-news-top .cms-news-top-inner  p {  font-size: 0.875rem; margin-bottom: 15px;  }   
 .cms-main-news-list li{ width:100%; padding: 20px 0px 0 0; margin:50px auto auto auto;  }
}

.cms-main-news-list .cms-news-top-date{ width: 100%; height:auto;  padding:10px 0px; display: flex; flex-wrap: wrap; }
.cms-main-news-list .cms-date{  width: 50%;   padding: 0px;  height: 40px; color:#4e4c4b; 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 .new-tag {width: 50%; height: 30px; display: flex; justify-content: flex-end; }
.cms-main-news-list {width: 100%; max-width: 1400px; padding:0px 10px 10px 10px;  display: flex;  flex-wrap: wrap; position: relative; margin:0px auto;  z-index: 1; }
.cms-main-news-list li{ width: 100%; padding: 0px; list-style: none; margin:0px 30px ; box-sizing: border-box; opacity: 1; transition: all 0.5s ease 0s; background: #fff;  border-bottom: solid 1px #dedede}
.cms-main-news-list li:hover{ box-shadow: 1px -5px 10px rgba(0,0,0,.1) }
.cms-main-news-list figure img { display: block; width: 70%; 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:0px 20px;}
.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: calc(100% - 46px); box-sizing: border-box;}
.cms-main-news-list figcaption .news-box p {font-size: 0.9rem; color: #a3a3a3; height: auto; margin-bottom: 10px!important;}
.cms-main-news-list figcaption h3 {width: 100%; margin-bottom: 10px; }
.cms-main-news-list figcaption h3 a { position: relative; font-size:1.063rem; line-height: 2rem; font-weight:400; color:#4b4948!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: 1rem; 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;}
 

 @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;  }

/*Core */
.cms-core { width: 100%; padding:100px 15px 150px 15px; margin:0 auto; position: relative; z-index: 0; background: url("../images/index/core-bg.jpg") no-repeat left top;background-size: cover;  }
.color-white{ color: #fff!important; }
.cms-core-list{width:100%; max-width:900px; margin:0 auto; padding: 0px;  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; } 
.cms-core-list div{ width:calc(100% /3 - 50px); padding:20px; margin: 50px 25px 0px 25px;   display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;  }
.cms-core-list h3,.cms-core-list em{ font-size: 1.75rem; font-weight:500; color: #fff; font-style: normal;  }
.cms-core-list ul{ width: 100%;display: block; margin: 10px 0px; padding: 0px; }
.cms-core-list ul li{ width: 100%; display: block; margin: 10px 0px; padding: 0px 0px 0px 15px;  color: #000;  background: url("../images/icon/dot.svg") no-repeat left 7px; background-size: 6px auto;-webkit-filter:invert(1);  }
@media (max-width: 1024px) {
.cms-core { width: 100%; padding:50px 15px; background-size: 124% auto; }
}

@media (max-width: 768px) {
.cms-core { width: 100%; padding:50px 15px; background-size: 150% auto; }
.cms-core-list div{ width:calc(100% /3 - 10px); padding:20px; margin:0px;}
}
@media (max-width: 575.98px) {
.cms-core { width: 100%; padding:50px 15px;  background: url("../images/index/core-bg-m.jpg") no-repeat left top #bb1551;   background-size:100%  auto;  }
.cms-core-list div{ width:calc(100% - 10px); padding:20px; margin:0px;}
}

.grid { position: relative; clear: both; margin: 10px auto;  width: 100%; display: flex; flex-wrap: wrap;  list-style: none; text-align: center;}
/* Common style */
.grid figure { position: relative;  overflow: hidden; margin:0px; display: flex; flex-wrap: wrap; width: calc(100%/3 - 6px); height: auto; background: #3085a3; text-align: center; cursor: pointer;}
.grid figure:nth-child(2) {margin:0px 9px;}
.grid figure img { position: relative; display: block; min-height: 100%; max-width: 100%; opacity: 0.8;}
.grid figure figcaption { padding: 2rem; color: #fff; text-transform: uppercase; font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.grid figure figcaption::before,.grid figure figcaption::after {pointer-events: none;}
.grid figure figcaption,.grid figure figcaption > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	
@media (max-width: 1024px) {
.grid { margin: 0 auto 10px auto;  }
}
@media (max-width: 767.98px) {
.grid figure { margin:10px; width: calc(100% - 6px); }
.grid figure:nth-child(2) {margin:10px;}   
 
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap;font-size: 0;opacity: 0;}
.grid figure h2 { font-size: 1.875rem;  font-weight: 700;}
.grid figure h2 span {font-weight: 700;}
.grid figure h2,.grid figure p {margin: 0;}
.grid figure p { font-size: 90%; color: #fff; font-weight: 700;}
	
/*-----------------*/
/***** Apollo *****/
/*-----------------*/
figure.effect-apollo {background: #0c6986;}
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 {text-align: left;}
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 { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;}

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


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

}

@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 2px;  background-size: 100% auto;}
.cms-btn { width: auto; height: 35px; padding: 20px; 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:22px; height: 16px; -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:22px; height: 22px;  }
}
@media (max-width: 360px) {
.cms-btn {   padding: 20px 4px;}
.cms-btn-btnbox > .custom-btn-1{padding: 20px 14px;}
}

/*cms-btn-more =================================*/ 
.custom-btn-1{  width: 310px; height: 35px; padding: 20px 10px;  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:#006f8a; 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:#d70749; }

 @media (max-width: 430px) {
.cms-btn {justify-content: center;}
}
 @media (max-width: 360px) {
.cms-btn {padding: 20px 4px;}
}
/*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;}