/* 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 20px; 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 {  max-width: 1440px; }
}

.banner{ position: relative;  margin-top: 0px;background-color:#f5f5f5  }  
.banner .item {  position: relative; overflow: hidden;}
.slide-content-headings, .slick-slide::before, .slick-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.main-slider { position: relative;  height: 42vw; min-height: 8vw;  margin-bottom: 0; opacity: 0;  overflow: hidden;visibility: hidden; -webkit-transition: all 1.2s ease;  -moz-transition: all 1.2s ease; -o-transition: all 1.2s ease; -ms-transition: all 1.2s ease; transition: all 1.2s ease; }
.main-slider.slick-initialized { opacity: 1; visibility: visible;}
.main-slider .slick-dots li button:before{background-color:#e60012 }
.main-slider .slick-dots{ position: absolute; bottom:60px; margin: auto; padding: 0px;}
.slick-dotted.slick-slider { margin-bottom: 0;}
.slick-slide { position: relative;}
.slick-slide video { display: block; position: relative; top: 0px; left: 50%; min-width: 100%; height: 100%; transform: translate(-50%, 0); overflow: hidden; }
.slick-slide iframe { position: relative; pointer-events: none;   width: 100vw; height: 600px;}
.slick-slide figure { position: relative; height: 100%; margin: 0; }

@media (max-width:1024px) {
.main-slider .slick-dots{   bottom:0px;  }
}

@media (max-width:840px) {
.main-slider { height:80vw;   }
 }
@media (max-width:767.98px) {
.main-slider .slick-dots{ bottom:30px;}	
}
@media (max-width:280px) {
.main-slider .slick-dots{   bottom:20px;}		
}
.slick-slide .slide-image { opacity: 1; height:100vh; background-size:auto ; background-position: center;  -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease;}
.slick-slide .slide-image.show {  opacity: 1;}
.slick-slide .image-entity { height:100vh; opacity: 0; overflow: hidden; visibility: hidden;}

.slick-slide .loading { position: absolute; top: 44%; left: 0; width: 100%;}
.slick-slide .slide-media { animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1);}
.slick-slide.slick-active { z-index: 1;}
.slick-slide.slick-active .slide-media {  animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);}
.slick-slide.slick-active .slide-content-headings { opacity: 1;  -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0);  -o-transform: translateY(0); transform: translateY(0);  transition: all 0.7s cubic-bezier(0.32, 0.34, 0, 1.62) 0.6s;}

.slide-content-headings { position: relative; padding:0px 40px; opacity: 0; z-index: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;  -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px);  transform: translateY(100px);}
.slide-content { width: 55%; position: absolute; left:45%; top:20%; }
.slide-content-headings h2 { font-size:2.75rem; font-weight:900; line-height:3.5rem; color:#fff; margin:0px 0px 30px 0;letter-spacing: 2px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2) }
.slide-content-headings span { margin-top: 10px; display: block; font-size:1.75rem; line-height:2rem;font-weight:600;  color:#fff;  letter-spacing: 1px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2)  } 
@media (max-width:1160px) {
.slide-content-headings h2 { font-size: 2rem; line-height:2.5rem;  margin-bottom: 20px; }
}
@media (max-width:1024px) {
.slide-content { width:60%; top:12%; }
}
@media (max-width:840px) {
.slide-content {top:15%;  }
.slide-content-headings h2 { font-size: 2rem; margin-bottom: 20px; }
}
@media (max-width:767.98px) {
 .slide-content { left:35%;  top:10%; }   
    .slide-content-headings {  padding:0px; }
 .slide-content-headings h2 { font-size: 1.275rem;  line-height:1.5rem;  margin-bottom: 10px;letter-spacing: 1px; }
    .slide-content-headings span { font-size:0.875rem; line-height:1rem;   } 
 }
@media (max-width:320px) {
 .slide-content { left:30%;  }   
 } 
@keyframes slideIn {
from {
filter: url(blur.svg#blur);
filter: blur(15px);
-webkit-filter: blur(15px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");
}
to {
filter: url(blur.svg#blur);
filter: blur(0);
-webkit-filter: blur(0);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");
}
}
@keyframes slideOut {
from {
filter: url(blur.svg#blur);
filter: blur(0);
-webkit-filter: blur(0);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");
}
to {
filter: url(blur.svg#blur);
filter: blur(15px);
-webkit-filter: blur(15px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");
}
} 
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}
@-webkit-keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to {transform: scale3d(1, 1, 1); }
}
@keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to { transform: scale3d(1, 1, 1); }
}



.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.main-about{position: relative; margin:0px auto; padding:80px 0px; width: 100%;display: flex; flex-wrap: wrap; z-index: 0; background:url("../images/index/bg1.jpg") no-repeat  right bottom #f5f5f5; background-size: auto  100%; }
@media (max-width: 1160px) {
.main-about{ background-size: auto  80%; }
}

.block {width:50%; height: auto;margin: auto 0px; padding:2vw 4vw;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1 }
@media (max-width: 1160px) {
.block {width:70%; }   
}

@media (max-width: 990px) {

}
@media (max-width:767.98px) {
.main-about{ padding:40px 0px 220px 0px; }
.main-about{  background-size: auto 50%;   }
.block {width: 100%; margin: 0px auto; padding:0px 5px; }
}



.block-title{width:auto; margin:0; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
.block-txt{width:100%; margin:0; padding: 0px; display: flex; flex-wrap: wrap;align-content: center; position: relative; z-index: 1;}
.block p { width: 100%; font-size:1rem;   font-size: clamp(0.9rem, 2.3vw, 1rem); line-height:1.875rem; font-weight: 500;  padding:5px; margin-bottom: 20px;  color:#22314a; }
.block p strong{  display: block;  width: 100%; font-size: 1.313rem;  font-size: clamp(1rem, 2.3vw, 1.313rem); line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #000; }
@media (max-width:767.98px) {
 .block p { line-height:1.5rem;  }   
}
.main-wrap{width: 100%;  display: flex; flex-wrap: wrap; }
/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.product{padding: 4vw 0;}
.product-item { width:100%; margin:50px auto;  padding:0px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc( 100% - 20px); margin:20px 10px; padding:0px ;list-style: none;   transition: all 0.3s linear 0s; position: relative;    }
.product-item li figure{ width: 100%; padding-bottom:100%; height: 0; border:solid 1px #e4e3e3;  overflow: hidden;  position: relative; z-index: 1; transition: all 0.5s ease 0s; }
.product-item li .item{ width: 100%;  }
.product-item .inner{ width: 100%; padding:20px;   position: relative;   } 
.product-item .inner h3{  margin:0px 0px 5px 0px; font-weight:700;font-size: clamp(0.9rem, 2.3vw, 1.125rem); color:#000; line-height:1.5rem; letter-spacing: 0.2px; text-align: center; 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-item .inner h3 a{  color:#000; }
.product-item .inner p {  margin:0px; font-size: .9rem; line-height: 1.375rem; font-weight: 400; color:#312927;  overflow: hidden; white-space:pre-wrap;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;} 


.product-item li:hover h3 a ,.product-item li:hover p{color:#d7810c;}
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li:hover figure{ background-image: linear-gradient(to bottom, #d8e1e9 0%, #fff 100%); }

/*compare*/
.product-item .compare { width: 20px; height: 20px; margin:5px 10px auto auto;   align-items: flex-start;position: relative }
.product-item .compare > input[type='checkbox'],.compare > input[type='radio'] { position: absolute; z-index: 2;  top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0;  cursor: pointer;}

@media (max-width:992px) {
.product-item .inner a p{line-height: 1.125rem;  } 
}
/*-------------------*/
/***** 最新消息 *****/
/*------------------*/

.news{  margin: 5% auto auto auto; padding: 50px 0px 150px 0px; background-color:#f5f5f5; position: relative; }
@media (max-width: 1160px) {
.news{  margin:  auto; padding: 0px 0px 50px 0px; }    
}
@media (max-width: 840px) {
.news{  margin:  auto; padding: 50px 0px; }    
}
.new-tag { width:auto;; font-size: 0.875rem; font-weight: 700;position: relative; }
@media (max-width: 768px) {
.new-tag {  font-size: 0.75rem; }    
}
.new-tag a{color:#fff;   padding:5px 10px; background-color:#a7a4a4;}
.new-tag a:hover {color:#fff; background:#000;}

.news-list{width: 100%; margin: 0px auto; padding: 0px; position: relative; }
.news-list li{ width:100%; padding:10px;margin:10px; box-sizing: border-box; list-style: none;  border: solid 1px #dcdbdb; background-color: #fff;  transition: all 0.5s ease 0s; }
.news-list figure  {width: 100%; padding-bottom: 66.66%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.news-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.news-list figure:hover img { opacity: .75;border-color: #df7475;  transform: scale(1.15); }
.news-list .item  {width:100%; height: auto; padding: 0px; display: flex;  flex-wrap: wrap;    }
.news-list .news-box{position: relative;width: 100%; margin: 0px;padding:20px;  box-sizing: border-box;}

@media (max-width: 768px) {
.news-list .news-box{ padding:0px; }   
}
.time { width: 100%;text-align: right; color:#d7820e;}
.time .day{ margin-bottom: 5px; font-size: 1.75rem;line-height: 1.275rem; font-weight: 900;}
.time .mon{  font-size: 1rem;line-height: 1rem; font-weight: 500;}

.news-list .list-box{position: relative;width: 100%;height: 135px; margin:20px auto auto auto; padding:10px;  box-sizing: border-box;   cursor: pointer }
.news-list h3 {position: relative;width: 100%;  margin:0px 0px 15px 0px; font-size:1.188rem; line-height:1.5rem; font-weight:700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }

@media (max-width: 767.98px) {
.news-list .list-box{ height: 100px; margin:20px auto auto auto; padding:0px;  box-sizing: border-box;   cursor: pointer }  
.news-list h3 { font-size:1rem; margin:0px;}    
}
.news-list a h3 { color:#000; }
.news-list a:hover h3,.news-list a:hover p{ color:#fff; }
.news-list p{ height: 72px;  font-size:1rem; line-height: 1.375rem; color:#919191; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; }

.view { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end;  }
.view span { display:flex; margin: 2px;  width:6px; height:6px; background-color:#555;}
/*  hover*/
.news-list li:hover{ background:#000; }
.news-list li:hover h3,.news-list li:hover p{ color:#fff; }
.news-list li:hover .new-tag a{ color:#fff;   }
.news-list li:hover .view span {background-color:#fff;}

.news-list .slick-prev { left:-35px; }
.news-list .slick-next { right:-35px; }
.news-list .slick-dots{bottom: -20px;}


/*cms-Title Styles 樣式
=================================*/
.title { width: 100%; height: auto; margin:0px auto 30px auto;padding: 0px; display: flex;flex-wrap: wrap;  flex-direction:column; position: relative; } 
.title h1{  width: 100%;display: block;margin: 0 auto; font-size:2.5rem;  font-size: clamp(1.5rem, 2.3vw, 2.5rem); font-weight:700; }
.title h2{  width: auto;   font-size: 1.75rem;  font-size: clamp(1.275rem, 2.3vw, 1.75rem);  color:#d7810c; font-weight:600;   }
.title h3{ margin:10px auto; font-weight: 700; color:#bea570;  }
.title p{ margin:10px auto;  font-weight: 400; line-height: 1.35rem;  color:#fff; }
.title span{ width: auto; margin:10px auto; font-size:0.9375rem; letter-spacing:2px; font-weight:400; color: #333;   }
 @media (max-width: 767.98px) {
.title {  margin:0px auto 10px auto; }
}
 
/*ms-title-2  樣式
=================================*/
.title-2 { width:100%; height: auto;  margin:30px auto; padding: 0; position: relative; }
.title-2 h2{ width: auto; margin:0px auto; font-size: 2.75rem; font-size: clamp(1.75rem, 2.3vw, 2.75rem); line-height: 3rem; font-weight: 700; text-align:center;color:#000;  }
.title-2 h3{ width: auto; margin:15px 20px; font-size: 1.15rem; font-size: clamp(0.9rem, 2.3vw, 1.15rem);   font-weight: 600; text-align:center;color:#d7810c!important;  }
.title-2 p{ width: auto; margin:0px auto; font-size: clamp(0.9rem, 2.3vw, 1.15rem); font-weight:700; color: #d7810c; text-align:center;   }
 
 

/*---------------*/
/***** btn *****/
/*---------------*/
.btn-btnbox {position: relative;z-index:9; display: flex;  justify-content: center;  width: 100%; height: auto; margin:0px auto;  transition: all 1s;}  
.btnbox {position: relative;z-index:99; display: flex;  justify-content: center;  width: 100%; height: auto; margin:50px auto auto auto;  transition: all 1s;}  

.icon-next{background: url("../images/icon/arrow-right-2.svg") no-repeat left 0px;  background-size:auto;}

/*mousey Styles====*/
.scroll-downs { position: absolute; top: -30px; right: 0; bottom: auto; left: 0; margin:auto; width :20px; height: 44px;z-index: 9;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #d7810c; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative; }
.mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:30px; background:#d7810c;}
.scroller { width: 2px; height: 8px; border-radius: 25%; background-color:#d7810c; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
@media (max-width: 1024px) {
.scroll-downs { display: none;}    
}


/*cms-btn Styles 1===*/
.btn-01 { cursor: pointer; width:200px; height:2.75rem; padding:0px 30px; line-height:2.75rem; display: block; margin: 0; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background:#d7810c;z-index: 1;  }
.btn-01 span { display: block;  transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700; color: #fff;}
.btn-01 em {position: absolute;width:60px; height:25px; right:30px;top: 25%; transition: all 0.3s ease; background: url("../images/icon/arrow-right-f.svg") no-repeat right top; z-index:1;   }
.btn-01:before,.btn-01:after {content: '';background:#ec9722;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-01:before { top: 0; left: 0; right: auto; }
.btn-01:after { bottom: 0; right: 0; left: auto; }
.btn-01:hover:before { width: 100%; right: 0; left: auto;}
.btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.btn-01:hover span{ }
.btn-01:hover em{ transform:translateX(20px);}