/* 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:=================================*/
.color-white{color: #fff!important; }
.wrapper { position: relative;display: block; margin:0px auto; padding: 0px 40px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.wrapper { padding-right: 20px; padding-left: 20px; max-width: 100%;}
}
@media (min-width: 1401px) {
.wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px;   }
}
 
 
 /*----------------------------------------/
common  
----------------------------------------*/
 .section{ min-height: 50vh;}
/* ==== Main CSS === */
.main-banner { width: 100%;  margin:0px auto auto auto;position: relative; }
.banner-item{width: 100%;  margin: 0px auto; padding:0px;}
/* ==== Slider Style === */
.slider-item{ width: 100%;  overflow: hidden; position: relative;  }
.slider-item img { width: 100%; height: auto; display:block;  }
.slider-item figure{width: 100%; margin: 0px; padding: 0px;}
.banner-item .slick-dots{ bottom:30px; }
.main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;justify-content: space-between;   }


 @media (max-width: 768px) {
.imgSliderBox .slider-item img{ animation:none;}
.main-banner .imgSliderBox { width: 100%; height:auto; }
.main-banner .slick-dots{  bottom:10px; }
}
 @media (max-width: 767.98px) {
 .main-banner {   margin:130px auto auto auto;position: relative; }
    
}



.grid-box{  width: 100%; margin: 0px auto; padding: 50px 0px; }  
@media (max-width:1120px) {
.grid-box{    padding:0px; }     
}
.grid-height{ height: 600px; padding: 100px 0px;  }

.bg-about{ padding: 100px 0px; position: relative; }
 .block-pc {width:50%;  margin:0px; padding:0px; display: flex; position: relative;z-index: 1;  }
.block-pc figure{width:100%; height: 100%;  margin:0px; padding:0px;     }
.block-pc figure img{width:100%;height:auto; display: block;  margin:0px; padding:0px;     }
  .block-box {width:50%;  margin:0px auto; padding:0px;  position: relative;z-index: 1;  }
.block-txt{width:88%; margin:0px auto; padding:0px 0px 20px 12%;  display: flex; flex-wrap: wrap; flex-direction: column; }
.block-txt p{ margin-bottom: 30px; font-size: 1.15rem;font-weight:400; line-height:1.875rem; letter-spacing:1px;  color:#1F100B; }
  
@media (max-width:1280px) {
 .bg-about{ padding: 100px 0px 50px 0px; position: relative; }
.block-txt{width:100%; padding: 20px;  margin:15px 20px 0px 20px;  }
.block-txt p{ font-size: 1rem; }
}

@media (max-width:1024px) {
.block-txt{ padding: 0px 0px 0px 20px;  margin:0px;  }
 }

@media (max-width:840px) {
.block-box { width: 100%;  margin:60px auto 10px auto;  padding:10px 20px;  }
.block-txt p{ font-size:1rem; margin-bottom: 15px;}
.block-pc {width:100%;  margin:0px;   }  
.block-pc figure{width:100%; height: auto;  margin:0px;  padding:0px;     }    
.block-pc.j-r{justify-content: center;}   
 .btnbox { justify-content: center; }  
 }
@media (max-width:767.98px) {
.block-box {margin: 0px auto 30px auto;  padding: 0px; order:1; }
.block-txt{ padding: 0px;  }
 .block-pc {order:2;  }

}

.btnbox { display: flex;  justify-content: flex-end;  width: 100%; height: auto; margin:20px auto 0px auto;  transition: all 1s;}  
.btnbox-center { display: flex;  justify-content: center;  width: 100%; height: auto; margin:20px auto 0px auto;  transition: all 1s;}  



/*cms-Title Styles 樣式
=================================*/
 

.title { width: 100%; margin:0px auto;padding:0px 0px 30px 0px;position: relative;  } 
.title h1,.title h2{ width: 100%;display: block;margin: 0 auto; font-size: 3rem; font-weight:500; color:#1F100B;letter-spacing: 3px;  }
.title h3{ margin:15px auto; font-size: 2.35rem; line-height: 3.75rem; color:#131212; font-weight:900; letter-spacing:10px; text-align: center;   }
.title p{ margin:10px auto;  font-weight: 400; line-height: 1.35rem;  color:#888; }
.title span{ font-size:1.875rem; font-weight:700;   }
.title strong{ color: #E44029   }

@media (max-width:1280px) {
.title {   margin: 0px auto;padding: 10px 0px;  } 
}
@media (max-width:1024px) {
.title {padding:0px;  } 
}


@media (max-width:992px) {
.title { margin:0px auto 20px auto; }     
.title h1,.title h2{  font-size: 2rem; }
.title span{ font-size:1rem;}
}

@media (max-width:767.98px) {
 .title h1,.title h2{  font-size: 1.75rem; }
.title span{ font-size:.875rem;}
}

.title-1 { width: 100%; margin:0px auto;padding:30px 0px; display: flex; flex-wrap: wrap; flex-direction: column;justify-content: center; align-items: center; position: relative;  } 
.title-1::before {  content: ""; width:35%; height:75px;  position: absolute;  left:0px; background: url("../images/index/title_o.png") no-repeat right  top;   } 
.title-1::after {  content: ""; width:35%; height:75px; position: absolute; right:0px; background: url("../images/index/title_g.png") no-repeat left top;   } 
.title-1 h2{ margin: 0 auto; font-size: 3rem; font-weight:500; color:#1F100B;letter-spacing: 3px;  }
.title-1 p{ margin:10px auto;  font-weight: 400; line-height: 1.35rem;  color:#888; }

@media (max-width:1280px) {
.title-1{ margin: 0px auto;padding: 10px 0px;  } 
.title-1::before {  content: ""; width:35%; height:65px; } 
.title-1::after {  content: ""; width:35%; height:65px; } 
    
}


@media (max-width:992px) {
.title-1 { margin:0px auto 20px auto; padding:0px 20px; }     
.title-1 h2{  font-size: 2rem; }
.title-1 p{ font-size:1rem;}
}
@media (max-width:767.98px) {
 .title-1 h2{  font-size: 1.5rem; } 
 .title-1 p{ font-size:.875rem;}
   
.title-1::before { display:none;} 
.title-1::after { display:none; } 
}



.title-2 { width: 100%; margin:0px auto;padding:30px 0px; display: flex; flex-wrap: wrap; flex-direction: column;justify-content: center; align-items: center; position: relative;  } 
.title-2::after {  content: ""; width:35%; height:16px; position: absolute; right:0px; background: url("../images/index/line01.png") no-repeat right top;   } 
.title-2 h2{ margin: 0 auto; font-size: 3rem; font-weight:500; color:#1F100B;letter-spacing: 3px;  }
@media (max-width:1280px) {
.title-2{   margin: 0px auto;padding: 10px 0px;  } 
.title-2 h2{ font-size: 2rem;    }
}

@media (max-width:767.98px) {
.title-2 h2{  font-size: 1.5rem; } 
.title-2 p{ font-size:.875rem;}
.title-2::after { display:none;  } 
}






/* Underline From Center */
.hvr-underline-from-center {
  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-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #009A90;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}



/*cms-btn Styles 1 bk===*/
a.btn-01{width: auto; height: auto; display: block; padding:10px 0px; margin: auto 0px;font-size:1.15rem; color: #000;font-weight:700;   cursor: pointer; position: relative; transition: all 0.3s linear 0s;  }
    

  
@media (max-width:979px) {
a.btn-01{  font-size:0.9rem;   }
}
  
/*cms-btn Styles 2===*/
 a.btn-02{width: 100%;   height: auto;   display: block; color: #fff!important;font-weight:700;   padding:10px 40px; text-align: center;  background-color:#EA5626;  position: relative;}
  a.btn-02:hover{ background: #E33C0B; }
  
 
 
/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.bg-product{ background:#F0F0F0;  }
 /*--分類new-tag --*/
.new-tag { display: flex; flex-wrap: wrap; align-items: center;  width: auto; padding:2px 4px; font-size: 0.75rem; color: #fff; 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; left:0px; top: 0px;  }
.new-tag a{color:#fff;}
.new-tag-01{ background:#eb7e1f;}
 /*----------------------------------------/
產品清單頁  cms-main-.product-cate  
----------------------------------------*/
.product-cate { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.product-cate li { width: 100%; margin:40px 10px; padding:0px; display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative;  }
.product-cate li figure{ position: relative; width:100%; height: auto;  display: block; margin: auto; overflow: hidden;  transition: all 0.5s ease 0s; }
.product-cate li img {  width: 100%; max-width: 100%; margin: auto;transition: all .35s ease;}
.product-cate li:hover img { transform: scale(1.1);  opacity: 1; }
.product-cate .inner{  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 10px 0px;   position: relative;} 
.product-cate .inner h3{ width: 100%; min-height:50px;  margin: 10px 0px; font-weight:500; font-size:1.25rem;  color:#1F100B; line-height:1.75rem;letter-spacing: 1px; overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.product-cate .inner a h3 {  color:#1F100B; }
.product-cate .inner a p{ width: 100%; margin:5px 0px; font-size: .9rem; line-height: 1.5rem; font-weight: 600; color:#312927;  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;} 
.product-cate .inner-txt{min-height: 68px;  font-size: .875rem;  line-height: 1.35rem;color:#312927; overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
 

  
.btn-area {   display: flex;width: 100%; background-color:transparent; position: relative;    opacity: 1;   transition: all .35s ease;}
.btn-area .btn-link {  width: 80%;margin: 0px auto; text-align: center;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding:10px 5px;font-size:1.125rem;  font-weight: 500; letter-spacing: 1px; color: #fff;  }
.btn-area .btn-link i { width:24px;  height:24px;  margin: 0px 5px;  display: inline-block;}
 .btn-area .btn-link.inquiry{ background-color:#E44029;; }
.btn-area .btn-link:hover{   box-shadow: 0 2px 10px rgba(0,0,0,.3); }

.product-cate .slick-prev,.product-cate .slick-next{ top:35%;  }
.product-cate .slick-prev{left:-70px;}
.product-cate .slick-next{right:-70px;}
 @media (max-width:1280px) {
.product-cate {padding:20px;   }
.product-cate .slick-prev{left:-40px;}
.product-cate .slick-next{right:-40px;}
}
 @media (max-width:1024px) {
 .product-cate .slick-prev,.product-cate .slick-next{ width: 40px;height: 40px; }
 .product-cate .slick-prev{left:-20px;}
.product-cate .slick-next{right:-20px;}
}

 @media (max-width:767.98px) {
.product-cate {padding:20px 0px; }
 .product-cate .inner h3{   font-size:1rem;  }
.btn-area .btn-link { padding: 5px;font-size:1rem; }
 .product-cate .slick-prev{left:-30px;}
.product-cate .slick-next{right:-30px;}

}

/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.main-news{ padding-bottom: 50px;}
.news-list{width: 100%; margin: 10px auto;  padding:10px 0px; display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.news-list li{ width: calc(100%/2 - 60px); padding:0px; margin:40px 30px; box-sizing: border-box; list-style: none;transition: all 0.5s ease 0s; position: relative;  }
.news-list figure img { max-width:100%; height: auto;   transition: all 0.5s ease-in-out;   }
.news-list figure  { width:100%; height: auto; object-fit: cover; margin: auto; display: flex; flex-wrap: wrap;  position: relative;  overflow: hidden;  transition: all 0.5s ease-in-out;}
.news-list figure:hover img {filter:opacity(.8) brightness(.5); }
.news-list .news-item  {width:100%; height: auto; padding: 0px; display: flex;  flex-wrap: wrap; align-content: stretch;   }
.list-date { width: 95px; height: 95px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  padding:0px;  position: absolute;z-index: 1; left:0px; top:-30px; background: #009A90;  }
.list-date .month { color: #fff;  font-size: 1rem;font-weight:700; } 
.list-date .day { color: #fff;  font-size: 2.15rem;font-weight:700; } 

.news-list .news-pic  {width:45%; height: auto; padding: 0px;   }
.news-list .news-box{position: relative;width: 55%; height: auto; margin: 0px;padding:0px 0px 0px 30px; box-sizing: border-box;     }
.news-list h3 {position: relative;width: 100%; height: auto;  margin:0px 0px 15px 0px; font-size:1.75rem; line-height:2rem; font-weight:500; letter-spacing:3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.news-list a h3 { color:#1F100B; }
.news-list a h3 :hover{ color:#E44029!important; }
.news-list p{ width: 100%;margin-bottom: 10px; font-size:1.15rem; line-height: 1.875rem; color:#888; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }

.listBox{width:100%;height: calc(100% - 50px);  padding:0px;  }
.news-list .news-box .view{  height: 50px;   }
a.view{width: 100%;   height: auto;   display: block; color: #fff!important;font-weight:700;   padding:10px 40px; text-align: center;  background-color:#EA5626;  position: relative;}
a.view:hover{ background: #E33C0B; }
@media (max-width:1280px) {
.news-list li{ width: calc(100%/2 - 30px); padding:0px; margin:40px 15px;   }
.news-list h3 { font-size:1.5rem;  }
.news-list p{  font-size:1rem; line-height: 1.5rem;   }
.news-list .news-pic  {width:50%; padding: 0px;   }
.news-list .news-box{ width: 50%;  margin: 0px;padding:0px 0px 0px 30px;    }
}
@media (max-width:992px) {
.news-list li{ width: calc(100%/2 - 20px); padding:0px; margin:40px 10px;}
.list-date {  transform: scale(.8); left:-10px; top:-30px;}
.news-list h3 { font-size:1.35rem;   line-height:1.5rem; }
}
@media (max-width:840px) {
.news-list li{ width: calc(100% - 20px); padding:0px; margin:40px auto;}
.list-date {  transform: scale(.8); left:-10px; top:-30px;}
.news-list h3 { font-size:1.35rem;   line-height:1.5rem; }
}
@media (max-width:767.98px) {
.main-news{ padding: 50px 0px;}

.news-list .news-pic  {width:100%; padding: 0px;   }
.news-list .news-box{ width: 100%;  margin:10px 0px 0px  0px;padding:0px;    }

}