/* 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; }
html { font-size: 100%; overflow-x: hidden; }  
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Poppins', "sans-serif"!important;  overflow-x:hidden; margin:0; padding:0;  position: relative; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em;font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Poppins', "sans-serif"!important; }
p, td, li, label { font-size: 1rem;   color: #6a6a6a; line-height: 1.5rem;   font-weight: 400!important;}
a { color:#232323;text-decoration: none!important; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
.no-gutters .col [class*="col-"] { padding-right: 0; padding-left: 0; }
 /** font-family:=================================*/
.txt-ch{font-family: 'Noto Sans TC', 'Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Poppins', "sans-serif"; }
 /**訊息公告區塊 =================================*/
.cms-notice{width: 100%; height:40px;  background:#f6f5f3; padding:0px 15px; overflow:hidden;}
.cms-notice-wrap{width: 100%; max-width: 1160px; margin:0 auto; padding: 0px; display: flex; flex-wrap: wrap; align-items: center;align-content: center; }
.cms-notice-wrap i{padding-right: 5px;}
.cms-notice-title{ width: 10%; font-size:0.9375rem;margin-top: -5px; }
.cms-notice-title strong{}
.cms-notice-list{ width: 85%; list-style: none; }
.cms-notice-list li{list-style: none;padding-top:10px; display: block;  font-size:0.9375rem;}
.cms-notice-list li a{ color: #000;}

.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: #000; }


@media (max-width: 768px) {
.cms-notice-title strong{display: none;}
.cms-notice-title i{margin-top: -10px;}
}


@media (max-width: 767.98px) {
  .cms-notice-title{margin-top: -20px;}
  
}
/**banner=================================*/
.cms-main-banner{ width: 94%; height: auto; margin:20px auto; padding: 0px; overflow: hidden;  position: relative; z-index: 0;}
.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 { bottom:20px; }
@media (max-width: 768px) {
.cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
.cms-main-banner .slick-dots { bottom:-10px; }
}
/**關於我們純文字區塊 =================================*/
.cms-main-about{position: relative;margin-top: 50px; width: 100%; z-index: 0; padding:0; margin: 0;    }
.cms-main-about-content {width:100%;  max-width:1100px; margin: 0 auto; padding:80px 10px; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 99;}
.cms-main-about-content blockquote{width:100%;  max-width:600px; margin: 0 auto; display: flex; justify-content: center;  text-align-last: center; color: #6c7280;font-size:1.313rem; font-weight:300; line-height: 2rem; }
.cms-main-about-txt{ margin:5% auto; padding:0px 15px;display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-about-txt-1{  width: 50%; }
.cms-main-about-txt-2{  width: 35%; }
.item-wrap{flex: 0 0 70%; padding-left: 15px; }
#cms-main .item-wrap h3 {margin-bottom: 15px; color:#0d386d; line-height: 1.75rem;  }
#cms-main .item-wrap p { color:#56667a;  font-weight: 400!important; font-size:0.9375rem; line-height: 1.75rem;  }
@media (max-width: 768px) {
.cms-main-about-content {width: 100%;max-width:600px; margin:0 auto; padding:50px 10px 130px 10px;}
.cms-main-about-txt-1,.cms-main-about-txt-2{width: 100%;}
}

/*cms-Title Styles 樣式
=================================*/
.cms-title { width: 100%; max-width: 600px;margin: auto;  display: flex; flex-wrap: wrap; position: relative; justify-content: center; flex-direction: column; }
.cms-title h1{  margin:15px auto;display: block; text-align: center;font-size: 2rem;   font-weight: 500;color:#000;}
.cms-title p{   margin:0px auto; text-align: center;  font-weight: bolder;color:#6c7280; font-family: 'Poppins', "sans-serif"; }
.cms-title::before,.cms-title::after{  content: ''; position: absolute; top:25px; width: 100px;  height: 3px;   background:#000;  }
.cms-title::before { content: ''; position: absolute; left:0px;    }
.cms-title::after { content: ''; position: absolute; right: 0px;     }
@media (max-width: 768px) {
#cms-main .cms-title h1{  font-size:1.75rem;  }
.cms-title::before,.cms-title::after{  display: none;  }
} 


 /*-------------------*/
/***** about -icon *****/
/*------------------*/
.cms-main-wrap{ width: 100%; max-width: 1200px; margin: auto;  padding:50px 0px; height: auto;  display: flex; flex-wrap: wrap;  }
.cms-main-icon { width: 100%; padding:100px 0px 100px 100px; margin:0; position: relative; display: flex; flex-wrap: wrap; }
.cms-main-icon-item { width: 30%;  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: flex-start; position: relative; }
#cms-main .cms-main-icon .cms-title-h3{margin-top:30px;   }
#cms-main .cms-main-icon .cms-title-h3 h3{  background: none; position: relative; z-index:4; }
#cms-main .cms-main-icon-item .cms-title-h3:before{  content: ''; position: absolute; top:0px; left: -10%; width: 300px;  height: 260px; border: solid 10px #c3c5c9;z-index: 0;  }
#cms-main .cms-main-icon-item.even .cms-title-h3:before{  content: ''; position: absolute; top:0px; left:-10%; width: 300px;  height: 260px; border: solid 10px #c3c5c9;z-index: 0;  }
.cms-main-icon-box { width:70%;  margin:0px; padding:0px;  display: flex; flex-wrap: wrap; }
#cms-main .cms-main-icon-wrap h3{ width: 100%; display: block; font-size:1.313rem;  font-weight: 700;   position: relative; z-index: 1;}
#cms-main .cms-main-icon-wrap h3:after{content: ""; display: block;  top:-5px; left:-10px;  background: rgba(194,197,201,.2);  width: 30px; height: 30px; position:absolute;z-index:0;   }
.cms-main-icon-wrap{ width:70%;  margin-left: 10%;  display: flex; flex-wrap: wrap;  justify-content:flex-end;  }
.cms-main-icon-list{ width: 100%; display: flex; } 
.cms-main-icon-list li{  display: flex; flex-wrap: wrap;flex-direction: column;  justify-content: center; width: calc(100%/3);  list-style: none; margin-top:20px;padding: 10px 0px; transition: all 0.5s ease 0s; border-right: solid 1px #eee;box-shadow: 0px 3px 15px 0px rgb(162 162 162 / 25%);  background: url("../images/index/bg-line.jpg") repeat left bottom ; background-size:100% 100%;   }
#cms-main .cms-main-icon-list li h4{ margin: 15px auto; font-size:0.9375rem; color: #000; text-align: center;}
.cms-main-icon-box  i { display: block; width: 58px; height:58px;  margin:0 auto; position: relative;  }
.icon-all{display: block; margin: auto; background-repeat: no-repeat; }
.icon-1-1{background: url("../images/icon/1-1.svg"); }
.icon-1-2{background: url("../images/icon/1-2.svg"); }
.icon-1-3{background: url("../images/icon/1-3.svg"); }
.icon-2-1{background: url("../images/icon/2-1.svg"); }
.icon-2-2{background: url("../images/icon/2-2.svg"); }
.icon-2-3{background: url("../images/icon/2-3.svg"); }
.icon-3-1{background: url("../images/icon/3-1.svg"); }
.icon-3-2{background: url("../images/icon/3-2.svg"); }
.icon-3-3{background: url("../images/icon/3-3.svg"); }

 .cms-title-h3:before{  content: ''; position: absolute; top:25px; right: -5%; width: 300px;  height: 200px; border: solid 10px #c3c5c9;z-index: 0;  }
 .cms-title-h3 h3{ margin:0;padding: 20px 0px; width: 100%;  font-size:2.875rem; color:#000; font-weight: 700; word-wrap: break-word; word-break: normal;  position: relative; background:#f6f5f3;z-index: 1;   }
#cms-main .cms-title-h3 h2{ margin:0px; font-weight: 400; font-size: 1.875rem; position: relative;  z-index: 1;}
#cms-main  .cms-title-h3 p{ margin:0px; font-size:1rem; font-weight: 700!important;color:#6c7280; position: relative;  z-index: 1; }




@media (max-width: 768px) {
.cms-main-wrap{ padding:20px 0px;}    
.cms-main-wrap:nth-child(2) {  flex-direction: column-reverse;}   
.cms-main-icon { padding:50px 0px;}
.cms-main-icon-box { width:100%; margin:50px 10px 0px 10px;}
.cms-main-icon-wrap{ width:100%; margin-left: 0px; justify-content: space-between;}
.cms-main-icon-list{ width: 100%; margin:0px; padding: 0; } 
.cms-main-icon-item { width: 100%; padding-left:10%;margin: 0; padding: 0; justify-content: flex-start; }
#cms-main .cms-main-icon .cms-title-h3{margin-top:0px; padding-left: 10%;   }
#cms-main .cms-main-icon-item .cms-title-h3:before{ left: -5%; height: 200px;   }
#cms-main .cms-main-icon-item.even .cms-title-h3:before{ height: 200px;  }
#cms-main .cms-main-wrap .cms-main-icon-item .cms-title-h3:before{ left: 20px; width: 5px;  height: 120px; border: none; background:#c3c5c9;  }
#cms-main .cms-main-wrap .cms-main-icon-item.even .cms-title-h3:before{ left: 20px; width: 5px;  height: 120px; border: none; background:#c3c5c9; }  
}
.cms-bg-1 { width: 100%; background: url("../images/index/banner.png") no-repeat right bottom ; background-size: 100% auto;}
.cms-bg-2 { width: 100%; background-image: url("../images/index/bg-4.png"),url("../images/index/bg-5.png");background-repeat: no-repeat; background-position: left top,right bottom; background-size: 100% auto, 80% auto;}
.cms-bg-3 { width: 100%; background: url("../images/index/bg-5.png") no-repeat left top #fff; background-size: 100% auto;}
/*-------------------*/
/***** about *****/
/*------------------*/
.cms-main-facility { width: 100%; padding:100px 0; margin:0; position: relative; display: flex; flex-wrap: wrap; background:#f6f5f3; }
.cms-main-facility-item { width: 40%; display: flex; flex-wrap: wrap; padding-left:5%; }
.cms-main-txt{width: 100%;  margin:5% auto; padding-top: 30px; display: flex; flex-wrap: wrap;}
 #cms-main .cms-main-txt p { width: 100%; font-size: 1rem; line-height:2rem; color: #000; font-weight: 400;  padding:5px;   }
.cms-main-card { width:60%;  margin:0px; padding:0px;  display: flex; flex-wrap: wrap; }
.cms-main-card figure { display: block;  width: 100%; max-width:100%; margin:0 auto;   }
.cms-main-card figure:before{content: ""; display: block; width:100px; height:200px;top:-5%; left:-3%;  position:absolute;z-index:0; background: #e0e0e0; }
.cms-main-card figure:after{content: ""; display: block; width:100px; height:200px;bottom:28%; left:55%; right: auto; position:absolute;z-index:0; background: #e0e0e0; }
.cms-main-card figure img {  width: 100%; max-width: 100%; transition: all 0.3s; position: relative; z-index: 1; }
.cms-main-facility .cms-title-h3 { 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-main-facility .cms-title-h3:before{  content: ''; position: absolute; top:25px; right: -5%; width: 300px;  height: 200px; border: solid 10px #c3c5c9;z-index: 0;  }
.cms-main-facility .cms-title-h3 h3{ margin:0;padding: 20px 0px; width: 100%;  font-size:2.875rem; color:#000; font-weight: 700; word-wrap: break-word; word-break: normal;  position: relative; background:#f6f5f3;z-index: 1;   }
#cms-main .cms-main-facility .cms-title-h3 h2{ margin:0px; font-weight: 400; font-size: 1.875rem; position: relative;  z-index: 1;}
#cms-main .cms-main-facility .cms-title-h3 p{ margin:0px; font-size:1rem; font-weight: 700!important;color:#6c7280; position: relative;  z-index: 1; }
@media (max-width: 768px) {
.cms-main-facility {  padding:20px 0; }
.cms-main-facility-item { width: 100%;padding-top: 50px; }
.cms-main-card { width:100%; padding:0px;}
.cms-main-card figure:before{ display: none; }
.cms-main-card figure:after{  display: none;  }
.cms-title-h3 h3{ font-size:1.875rem; word-break: keep-all; margin:0px; padding: 0px; }   
.cms-main-facility .cms-title-h3:before{ top:500px; left:20px;  }
} 

@media (max-width: 767px) {
.cms-main-facility .cms-title-h3:before{  top:260px; left: 0px; }
}


/*-------------------*/
/***** 圖文方格 *****/
/*------------------*/
.cms-main-product { width: 100%; padding:40px 15px; margin: auto; display: flex; flex-wrap: wrap;   position: relative;  }
.cms-main-product-title{ width: 20%; padding: 0px 20px; display: flex; flex-wrap: wrap; align-content: center;  }
.cms-main-product-wrap{ width: 80%;}
.cms-title-h2 { width:100%; height: auto; margin:0 auto;  padding:15px 0px;display: flex; flex-wrap: wrap;flex-direction: column; }
#cms-main .cms-title-h2 h2{ margin:0px; color:#000; font-size: 2rem;font-weight: 700;  }
#cms-main .cms-title-h2 p{ margin:0px; font-size:1rem; color:#000;  }
@media (min-width: 1400px) {
#cms-main .cms-title-h2 h2{ font-size: 2.25rem; }
}

@media (max-width: 768px) {
.cms-main-product-title{ width:100%;  }
.cms-main-product-wrap{ width: 100%;}
}
.cms-main-product { width: 100%; padding:20px 15px 40px 15px; margin:auto; position: relative;  }
.cms-main-product-item { width:100%;  margin:15px  auto;  padding:0px; display: flex; flex-wrap: wrap; overflow: hidden;  list-style: none; }
.cms-main-product-item li { width: 100%; margin:30px 20px; padding: 15px 0px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1; background: #fff; }
.cms-main-product-item li:hover { transform: scale(1.05); -webkit-transform: translate3d(0,-20,0);transform: translate3d(0,-20px,0); }
.cms-main-product-item li a{ display: flex; flex-wrap: wrap; justify-content:center;}
.cms-main-product-item li a figure { position: relative; width:100%; height: auto;  background:#fff; overflow: hidden; transition: all 0.5s ease 0s; border: solid 1px #e5e5e5;/*box-shadow: 0 6px 15px rgb(36 37 38 / 8%);*/   }
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%; transition: all 0.3s; -webkit-transform: translate3d(0,0px,0);transform: translate3d(0px,0px,0px);  }
.cms-main-product-item li:hover figure img {  opacity: 0.7;  opacity: .5; -webkit-transition-delay: 0.15s;transition-delay: 0.15s;}
#cms-main .cms-main-product-item li a h3{ margin:15px auto ; padding: 5px; width: 100%; min-height:54px; font-size:0.9375rem; font-weight: 400;color: #000;  text-align: center;  overflow: hidden; word-break:break-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 a span.cms-main-product-unit{  margin: 0 10px; padding:0px 5px; font-size:0.75rem; line-height: 1.5rem; color:#6c7280; text-align: right; border: solid 1px #6c7280; border-radius:5px;  overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical; }
.cms-main-product-item li a span.cms-main-product-price{ display: flex; justify-content: center; margin:0px auto;font-size:1rem; color:#e23f3f;  font-weight: 700; }
.cms-main-product-item li a span.cms-main-product-price-origin{ display: flex; justify-content: center; margin:0px auto;font-size:.85rem; color:#717171;  font-weight: 700; text-decoration:line-through }
.cms-main-product-note { position: absolute; top:16px; right: 0px; width: auto; height: auto; padding:5px 10px; 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:#e24040; }
.cms-main-product-note.cms-main-product-note-stock { color: #fff; background:#ff9900;}
.cms-main-product-item li button{display: none; z-index: 9}
.cms-main-product-item li:hover button{  position: absolute;  border:none;   z-index: 9; top: 45%; left:48%; display: block;pointer-events: none;   -webkit-transform: scale(0.95) translate(-50%, -50%); -ms-transform: scale(0.95) translate(-50%, -50%); transform: scale(0.95) translate(-50%, -50%);  -webkit-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; opacity: 1;}
.cms-main-product-item .slick-dots {bottom:-10px;  }	
@media (max-width: 768px) {
.cms-main-product {padding:0px 15px 0px 15px;background-position:-10% 20%, right 70%; background-size:35% auto, 28% auto;  }
.cms-main-product:before{ width:100%; height:100px; margin-top: -50px;background-size: 120% auto; }
.cms-main-product-item { margin:10px auto; }
.cms-main-product .slick-prev { left:5%; }
.cms-main-product .slick-next { right:5%; }
.cms-main-product .slick-prev, .cms-main-product .slick-next { font-size: 0; line-height: 0; position: absolute; top: 40% !important; z-index:9!important; display: block; width:30px; height: 58px; padding: 0; border-radius:0; outline: none; }
}
 
/*cms-btn Styles 樣式=================================*/ 
.cms-btn-01 {cursor: pointer; width: 100%; max-width: 300px; height: 2.5rem; line-height: 2.5rem; display: block; margin: auto; position: absolute;   box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-color: #000; border-radius:25px;}
.cms-btn-01 span { display: block; text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index: 1;font-size: 1rem; color: #fff;}
 .cms-btn-01:before,.cms-btn-01:after {content: '';background: #fff;height: 50%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.cms-btn-01:before { top: 0; left: 0; right: auto;  border-radius:25px; }
.cms-btn-01:after { bottom: 0; right: 0; left: auto; border-radius:25px; }
.cms-btn-01:hover:before { width: 100%; right: 0; left: auto;}
.cms-btn-01:hover:after {  width: 100%; left: 0; right: auto;}
/*cms-btn-more =================================*/ 
#cms-main a.cms-btn-more{ position: relative; display: block;width: auto;  min-width: 200px;  max-width: 300px; margin:15px 0; padding:6px 40px; font-size: 1rem; font-weight: 700; color:#fff;  background: #000; letter-spacing: 1px;  -webkit-transition: 0.3s ease;  transition: 0.3s ease; }
#cms-main a.cms-btn-more:hover{ color:#eb5e02!important;    }
#cms-main a.cms-btn-more:before { content: ""; position: absolute; top:20px; left:40px;  width: 100px; height: 8px; background:url("../images/icon/arrow-01.svg") no-repeat right top; transition: all 0.3s ease; font-family: 'boxicons';}
#cms-main a.cms-btn-more:hover:before { transform:translateX(10%); font-size:24px;  transition: all 0.3s ease; overflow: hidden; }
@media (max-width: 768px) {
#cms-main a.cms-btn-more{   letter-spacing: 0em; }
}
/*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;}