/** font-family:=================================*/
 .f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.color-red{color: #9e2b2f;}
.color-white{color: #fff!important; }
.color-gray{color:#597990; }
.txt-stork { -webkit-text-stroke: 1px #333;  -webkit-text-fill-color: transparent;}
.txt-center{ text-align: center;}

.wrapper { position: relative; display: block; margin:0px  auto;  width: 100%; padding:0px 20px;  max-width: calc((100% - 40px)/12*12 + 40px)}
 
@media (min-width:1025px) {
.wrapper {padding: 0px 40px;  }
}
@media (min-width: 1401px) {
.wrapper { width: 100%;max-width: 90%; padding: 0px;  }
}
@media (min-width: 1920px) {
.wrapper { width: 100%;max-width: 100%;   padding-left: calc(50% - 720px)!important;  padding-right: calc(50% - 720px)!important;}
}
 .banner{ position: relative;  margin-top: 0px;  }  

.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: auto; 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:70px; padding: 0;}
.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:840px) {

 }
@media (max-width:767.98px) {
.main-slider { height: 80vw; }
.slick-slide iframe {   width: 100vw; height: 80vw;}
.main-slider .slick-dots{ bottom:-5px;}	
}
@media (max-width:280px) {
.main-slider .slick-dots{   bottom:-14px;}		
}
.slick-slide .slide-image { opacity: 0; height:100vh; background-size:cover; 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: 20%; top:28%;text-transform: uppercase; transform: translate(-20%, -28%); z-index: 999;}
.slide-content-headings h2 { font-size: 3.5rem; font-weight:700; 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 h3 { font-size: 2.75rem; font-weight:700; line-height:2rem; color:#cddc39;  margin:0px 0px 30px 0;letter-spacing: 2px;  word-wrap: normal; }
.slide-content-headings p { font-size:2.5rem; font-weight:700; line-height:2rem;color:#fff;  letter-spacing: 4px; word-wrap: normal; text-shadow: 1px 2px 2px rgba(0,0,0,.2)  } 
.slide-content-headings span { font-size:1.125rem; font-weight:400; line-height:1.375rem;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; }
.slide-content-headings h3 { font-size: 2rem; line-height:2.5rem;}
.slide-content-headings p { font-size:1.15rem;  }
}
@media (max-width:840px) {
.slide-content { width: 90%;  top:15%;  left:30%; transform: translate(-30%, -15%);}
.slide-content-headings h2 { font-size: 2rem; margin-bottom: 20px; }
.slide-content-headings h3 { font-size: 2rem;  }
.slide-content-headings p { font-size:1.5rem;  }
}
@media (max-width:767.98px) {
.slide-content-headings { position: relative; padding:0px 20px;}	
.slide-content-headings h2 { font-size: 1.5rem;  line-height:1.5rem;  margin-bottom: 10px; }
.slide-content-headings h3 { font-size: 1.15rem;  line-height:1.5rem;   }
.slide-content-headings p { font-size:1rem;line-height: 1.35rem;  }
}

@media (max-width:320px) {
.slide-content-headings h2 { font-size: 1.375rem; line-height:1.375rem; margin: 10px 0px; }
.slide-content-headings span {display: none} 
} 
@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); }
}
  

.nav-box{ width:100%;  max-width: 600px; left:calc(50% - 300px);  bottom:-30px;  margin: auto; position: absolute; z-index: 8; display: none;}
@media (max-width:767.98px) {
.nav-box{   max-width: 100%; left:auto;  bottom:0px;  margin: auto;  position: relative;}	
}
.slider-nav{ width:100%;  height: auto; margin:0px auto; padding:0px;  position: relative }
.slider-nav li{ width: 100%; opacity:1; margin: 0px;padding:5px; background: #fff; transition: all .2s ease-in-out  }
.slider-nav li:hover{background-color:#b62f01; transition: all .2s ease-in-out}
.slider-nav li img{ width:100%;  margin:0px; padding:0px;}
.slider-nav li h3{width: 100%; font-size: 1rem;font-weight:700; text-align: center;color:#fff;  background-color:#b62f01;}
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1; background-color:#b62f01;  transition: all .2s ease-in-out }
@media (max-width:767.98px) {
.slider-nav li h3{  font-size:.75rem; }	
}

 .main-wrap{ width: 100%; margin: auto; height: auto;  display: flex; flex-wrap: wrap;  position: relative;  }
  /**notice區塊 =================================*/
.notice{width: 100%;  padding:20px; display: flex; flex-wrap: nowrap;justify-content:space-between; align-items: center;  }
.notice-item{ width:calc(100%/4); padding: 20px 15px; }
.notice-switch{width: 100%;display: flex; flex-wrap:  wrap;justify-content:center; align-items: center;font-weight: 700; letter-spacing: 2px;  }
.notice-icon{width: 80px; height: 80px; padding: 10px 4px; margin:10px auto 30px auto; }
.notice-icon i{width: 60px; height: 60px; padding:0px; }

.notice-txt{width:100%;font-size:1rem; font-weight: 700; text-align: center;  }
.notice-txt strong{width: 100%; font-size: 1.15rem; display: block; }
@media (max-width: 1201px) {
.notice{ padding: 10px;}
.notice-txt{width:auto; }
 }
@media (max-width:992px) {
.notice{height:auto; flex-wrap:wrap;  padding: 0px; display: none;}    
.notice-item{ width:calc(100%/2); padding:0px 15px; }    
}
 


.brand{width: 100%;}
.brand-list{ width: 100%; margin: auto; padding: 0px; display: flex; flex-wrap: wrap; list-style: none}
.brand-list li{width:calc(100%/12 - 20px); margin:10px; padding:0px; transition: all 0s ease 0s;border:solid 1px rgba(33,82,132,0); } 
.brand-list li a{  padding: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column } 
.brand-list li a figure  {width:40px; height: 40px; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out; }
.brand-list li a figure img { width: 100%;height: auto; padding: 0px;     }
	
.brand-list li a h3 {width:100%; margin: 0px auto; padding:0px;  font-size:0.875rem; text-align: center; line-height: 1.5rem; letter-spacing: 1px; font-weight:400; text-decoration: none; color:#1d1d1f;  word-break: normal; word-wrap:normal;  font-family: 'Kanit', sans-serif; }        
.brand-list li:hover figure{ opacity: 0.35;  }
.brand-list li a:hover h3{ color:#e50012;}
@media (max-width:1280px) {
 .brand-list li{width:calc(100%/8 - 20px);   } 	
}
@media (max-width:767.98px) {
 .brand-list li{width:calc(100%/4 - 20px);   } 	
}

@media (max-width:320px) {
 .brand-list li{width:calc(100%/3 - 20px);   } 	
}

/*Recommend */
.recommend{width: 100%; padding:0px;    position: relative;}
.recommend-box{ width: 100%;  height: auto; margin:0 auto; }
.recommend-box .slick-dots{bottom:60px;}



.bg-recommend { background-image: attr(src url); background-repeat: no-repeat; background-size: cover;background-position:center;  background-attachment: scroll; position: absolute;z-index:-1;  width: 100%;  height:auto; top: 0px; right: 0; bottom: 0; left: 0; transition: 0.8s 1s; }

@media (max-width: 1199.98px) {
.recommend{background-size: auto 100% ; }     
}
@media (max-width:767.98px) {
.recommend{width: 100%; padding:0px;  margin:0px; }   
.recommend .title-2{padding-top: 20px;}
.recommend:before, .recommend:after{display: none;}   
}



 /*Special 
================================= */
.special {position: relative; margin:0 auto; padding:0px 0px 60px 0px; width: 100%;  display: flex; flex-wrap: wrap;justify-content: center;    }
.special-card {width: 50%; margin:0px auto; padding:0px; position: relative;  }
.special-item{ width: 50%;height: auto; margin: 0px; padding: 0px;  display: flex; flex-wrap: wrap;justify-content: center;align-items: center;    transition: all 0.3s; position: relative}
.special-item-inner{ width:auto; height: auto; margin: auto; padding:40px 30px; }
.special-item-inner h3{ font-size: 3.125rem; font-size: min(max(3.5vw, 1rem), 3.125rem); line-height: 2rem;letter-spacing: 3px; font-weight:700; color:#1d1d1f;margin-bottom: 30px;  }
 .special-item-inner p{ font-size: 1.5rem;  font-size: min(max(3.5vw, 1rem), 1.5rem); line-height: 2.375rem; color:#555; }
.special-item-inner .btn-01{margin:30px 0px 15px 0px;}
 
@media (max-width: 840px) {
.special-item-inner p{ font-size: 1.125rem;  line-height: 1.5rem; }
}
@media (max-width: 768px) {
.special-card {width: 100%; margin:0px auto; padding:0px;   }    
 
}
@media (max-width: 767.98px) {
 .special { padding:0px;}
.special-item{ width: 100%; position: relative; left: auto; top:auto; margin: 0px;border-radius:0px; ; }    
.special-item-inner{  width: 100%;  padding:20px;  }
.special-item-inner h3{ margin-bottom: 10px;  }	
.special-item-inner p{font-size: 0.9rem;}    
}

.transition-3d-hover { transition: all .2s ease-in-out}
.transition-3d-hover:focus, .transition-3d-hover:hover {-webkit-transform: translateY(-3px);transform: translateY(-3px)}
/*----------------------------------------/
產品清單頁  cms-product-item  
----------------------------------------*/
.main-product { width: 100%; padding:20px 0px 40px 0px;  margin:0px; position: relative;  }
@media (max-width: 1200px) {
.main-product {  padding:20px 0px;  }
}
 @media (max-width: 767.98px) {
.main-product {  padding:30px 0px }
}
.bg-product{ background: url("../images/index/bg-pro.jpg") no-repeat left top #f1f1f1; background-size: 100% auto;}
/* */
.product-item { width:100%; margin:0px auto;  padding:20px 0px;   }
.product-item li {width:100%;  margin: 15px auto; padding:15px; position: relative; z-index: 1; list-style: none;transition: all 0.3s linear 0s;}
.product-item li figure{  width: 100%; padding-bottom: 73.75%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;border-radius:15px 15px 0px 0px;  background-color:#fff;}
.product-item li:hover figure img { transform: scale(1.05);  opacity: 0.6; }
.product-item li .item{width: 100%;margin:0px; padding: 0px;display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; box-shadow: 2px 4px 16px rgba(0,0,0,.1); border-radius:15px; background-color:#fff;  transform: scale3d(1.01, 1.01, 1.01); overflow: hidden} 
.product-item li .inner{width: 100%;min-height: 146px; margin:0px; padding:20px 15px; } 
.product-item li .inner h3{  margin:0px auto 10px auto ; padding: 0px; font-size:1.05rem; font-size: min(max(2vw, 1rem), 1.05rem); line-height:1.375rem; font-weight: 500; text-align: left;  overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical;font-family: 'Kanit', sans-serif; }
.product-item li .inner h3 a{ color:#1d1d1f;   }
.product-item li:hover .item{ box-shadow: 2px 4px 16px #1d1d1f00029;}

.product-item li .inner p{ flex: 0 0 100%; margin: 0px; font-size:1.063rem; line-height:1.5rem; font-weight: 500; color:#2c2c2c;text-align: center; overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.product-item li .price{ width: 100%; padding: 5px 0px 2px 0px;font-size:0.85rem; font-weight: 400;   }
.product-item li .product-price{ margin:0px auto;  color:#b64400; font-family: 'Kanit', sans-serif;}

.note { position: absolute; bottom:0px; right: 0px; padding:0px 5px; width:auto; height:auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  z-index: 11; }
.note i { width: 26px; height: 26px; }
.note span { font-size:0.75rem; text-align: left; line-height: 1rem; text-shadow:none;  }
.note.note-sale{ background-color: #e4e4e4;}


.tag-cate{ position: absolute; top:0px; left: 0px; padding:0px 5px;  width:46px; height:32px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; border-radius:0px 0px 18px 0px; z-index: 11; }
.tag-black{ font-size:0.875rem; font-weight: 700;  color:#ffc107;background-image: linear-gradient(to right, #434343 30%, black 100%); }
.tag-red{ font-size:0.875rem; font-weight: 700;  color:#fff;background-image: linear-gradient(to right, #750202 0%, #b62f01 100%);}



.btn-area { width: 100%; margin-top: 10px; background-color:transparent;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  position: relative;  overflow: hidden;   transition: all .35s ease;}
.btn-area .btn-link {  width: calc(100%/2 ); margin: 0px auto; text-align: center;color: #fff;  }
.btn-area  i { width: 20px;  height: 20px;  margin: auto 5px auto 0px;  display: flex; flex-wrap: wrap; align-items: center; }
.btn-area  i img{ width: 20px;  height: 20px;  margin: auto; filter: brightness(0)}
.btn-area .more {width: 100%; border: solid 1px #555; background-color: #fff;  color: #000; border-radius:12px; }
.btn-area .more:hover { color: #fff;background: #777; }
.btn-area .inquiry{ background-color:#555; color: #fff; border-radius:12px;} 
.btn-area .inquiry:hover {background: #2c2c2c;  }
.btn-area button{border: none;  padding:8px 5px;font-size:0.875rem; font-size: min(max(3vw, 0.75rem), 0.875rem); font-weight: 500;  -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn-area button:hover { color:#fff;  background-color: #344357; text-decoration: none }
.btn-area button:active,.btn-area button:visited { color: #b4a174; }
@media (max-width:767.98px) {
.btn-area .btn-link { width: 100%  }
}


.product-item .slick-dots {bottom:-30px;  }	
.product-item .slick-prev { left:calc(50% - 60px);  top:100%; }
.product-item .slick-next { right:calc(50% - 60px); top:100%;  }
@media (max-width:840px) {
.product-item .slick-prev { left:calc(50% - 60px);  top:auto;bottom:-30px; }
.product-item .slick-next { right:calc(50% - 60px); top:auto; bottom:-30px;  }
}

@media (max-width: 767.98px) {
 .product-item li .inner{width: 100%;min-height: 146px;	}
}





/*blog */
.blog-wrap{width: 100%; margin: 0px; padding: 0px; }
.blog{ width:100%;   margin:80px auto auto  auto; }

 


.blog-list { width: 100%;  list-style: none;padding: 0px;margin: 0px;}
.blog-list li {  list-style: none;position: relative;  margin-bottom: 32px; flex-grow: 1;}
.blog-list li::after { content: ""; width: calc(100% - 30px); height: 1px; display: block; background-color: #d0d0d0;margin-right: 50px; margin-top: 24px;}

.blog-list .item {  display: flex;  flex-wrap: wrap;  width: 100%;transition: all 0.3s linear 0s;}
.blog-list .blog-pic { width: 132px; height: 132px; min-height: auto;  border-radius: 16px;overflow: hidden;  z-index: 0;  position: relative; }
.blog-list .blog-box {  width:calc(100% - 132px);     display: flex; flex-direction: column;  justify-content: center; padding: 0px 50px 0px 24px; }
.blog-list figure  {width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1;  background-size: cover; transition: all 0.5s ease-in-out;}
.blog-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;}
.blog-list .blog-box .blog-date { width: 100%; margin:0px 0px 10px 0px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.blog-list .blog-box .blog-date .date { font-size: 12px; font-weight: 400;}
.blog-list .blog-box .blog-date .date .top {  }
.blog-list .blog-box .blog-date .date .bom {margin-left: 10px;}
.blog-list .blog-box .blog-date .new-tag  {padding: 2px 8px;border-radius: 25px;color: #e50113;display: block;	font-size: 13px;border: 1px solid #e50113; }
.blog-list .blog-box .blog-inner {width: 100%;}
.blog-list .blog-box h3 {   margin-bottom: 12px; }
.blog-list .blog-box h3 a {  font-weight: 500; font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem); color: #1d1d1f; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;  }
.blog-list .blog-box  p {min-height:70px;font-size: 0.875rem; color: #333333; line-height: 1.375rem; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break:normal;}
 
.blog-list li:hover .item  h3 a ,.blog-list li:hover .item  p ,.blog-list li:hover .item .blog-date {color: #b64400;}
 .blog-list li:hover:hover figure img { transform: scale(1.05);  opacity: 0.6; }
@media (max-width: 640px) {
.blog-wrap{display: none }  
.blog-list li { margin:10px auto;  }    
.blog-list .blog-pic { width: 100%;  }
.blog-list .blog-box { width: 100%;padding: 0px;  }
.blog-list .slick-dots{ margin: 0;left: 0!important;  }
}



/*news */
.news-wrap{width: 100%; margin: 0px; padding:50px 0px 10px 0px; background-color:#fafafa }
.news{ width:100%; margin: auto; }
 
.news-list { width: 100%;   margin:40px auto auto auto;padding: 0px; }
.news-list li { width:100%;height: auto;  margin:10px; padding:0px 20px; list-style: none;position: relative; transition: all 0.3s linear 0s;}
.news-list .item {  display: flex; flex-wrap: wrap; flex-direction: column;  padding:0px; border-bottom: 1px solid #555;  border-radius: 15px 15px 0px 0px; transition: all 0.3s linear 0s;position: relative;}
.news-list .news-pic { width: 100%;padding: 0 ;  border-radius: 15px 15px 0px 0px; overflow: hidden}
.news-list .news-box { width: 100%;padding: 20px;  }
.news-list figure  {width: 100%; padding-bottom: 56.4%; height: 0; overflow: hidden; position: relative;  z-index: 1;  background: #1d1d1f;  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 .news-box .news-date { width: 100%; margin:0px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.news-list .news-box .news-date .date { font-size: 12px; font-weight: 400;}
.news-list .news-box .news-date .date .top { }
.news-list .news-box .news-date .date .bom {font-size: 12px;margin-left: 10px;}
.news-list .news-box .news-date .new-tag  {padding: 2px  10px;border-radius: 15px;color: #b64400;display: block;	font-size: 12px;border: 1px solid #b64400; }
.news-list .news-box .news-inner {width: 100%;}

.news-list .news-box h3 {   margin-bottom: 12px; }
.news-list .news-box h3 a {  font-weight: 500; font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem); color: #1d1d1f; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;  }
.news-list .news-box p {min-height:70px;font-size: 0.875rem; color: #333333; line-height: 1.375rem; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break:normal;}
 .news-list li:hover .item{ transform: scale3d(1.01, 1.01, 1.01); box-shadow: 2px 4px 16px rgba(0,0,0,.1);}

.news-list li:hover .item  h3 a ,.news-list li:hover .item  p ,.news-list li:hover .item .news-date{color: #b64400;}
 .news-list li:hover:hover figure img { transform: scale(1.05);  opacity: 0.6; }
@media (max-width: 640px) {
.news-wrap{display: none }  
.news-list li { margin:10px auto;  }    
.news-list .news-pic { width: 100%;  }
.news-list .news-box { width: 100%;padding: 0px;  }
.news-list .slick-dots{ margin: 0;left: 0!important;  }
}
 
 /*main-about
=================================*/
.main-about{ position: relative; margin:0px; padding: 0px; display: flex; flex-wrap: wrap;justify-content: space-between;  background: url( "../images/index/pr-bg.jpg") repeat-x left bottom;}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.block {width:50%; height: auto;  margin: 0; padding:0px;  display: flex; flex-wrap: wrap;  position: relative;z-index: 1 }
.block::after {width: 100%;  content: attr(data-content); font-size: 120px; font-weight: 700; letter-spacing: 10px; word-wrap: normal; -webkit-text-stroke:1px #eaeaea;  -webkit-text-fill-color:transparent; left: 67%; top: 0px; position: absolute; z-index: 3; animation: fadeInUp 1s both 1s; font-family: 'Kanit', sans-serif;} 
.block figure{ width:100%; margin: 0px; padding: 0px; display: block; }
.block figure img{ width:100%; height: auto; display: block;  }
.block-txt{width:100%; max-width:70%;  margin:60px auto; padding:0px 20px ; position: relative; z-index: 1;}
.block p { width: 100%; font-size:0.875rem;  line-height:1.875rem; font-weight: 400;  padding:5px; margin-bottom:10px;  color:#333;   }
.block p strong{  display: block;  width: 100%;  letter-spacing: 1.2px; font-weight:700;   margin-bottom: 0px; color: #1d1d1f; }
.card-1{ width: 100%; height:100%;padding: 0px;position: relative;clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background: url( "../images/index/pr-box-left.jpg") no-repeat left bottom;background-size: auto 100%;}
 
.block .btn-02{margin:10px 0px;}
@media (max-width: 1280px) {
.block-txt{max-width:100%; padding:20px 20px 0px 0px;  }
.block::after {width: 100%; font-size: 100px; letter-spacing: 5px; }
}
@media (max-width: 1024px) {
.block {width:100%;margin: 0px; padding: 0px; }  
.block-box{ width: 100%;}  
.block-txt{  padding:20px 40px 0px 40px;  }		
.card-1{  height: 308px; background-size:100% auto;clip-path:none; background: url( "../images/index/cate-1.jpg")  no-repeat left bottom; }
.block::after {width: 100%; font-size: 100px; letter-spacing: 5px; left:5%; }	

 }
@media (max-width:767.98px) {
.main-about{ padding:0px;background-size: 100% auto; background-position:0px top; background-color:#c8ced4; }
.block-txt{ margin:20px 0px; padding: 0px 20px;}   
.card-1{  height: 200px; background-size:100%  auto; background-position: center top}	
.block::after { font-size:72px;   }		
}

 
 
 /*cms-Title Styles 樣式
=================================*/
.title { width: 100%;  margin:30px 0px;   display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title::after {width: 100%;  content: attr(data-content); color: rgba(209, 76, 52, .1); font-size: 160px; font-weight: 700; letter-spacing: 2px;  word-wrap: normal; -webkit-text-stroke:1px #eaeaea;  -webkit-text-fill-color:transparent; left: 34%; top: -120%; position: absolute; z-index: 0; animation: fadeInUp 1s both 1s;} 
.title h2{margin:0px auto 10px auto; padding: 0px; font-size:2rem;  font-weight:500; color: #1d1d1f;  letter-spacing: 3px; position: relative;z-index: 2 }
.title h3{margin:0px auto; font-size:1rem; font-weight:600;color:#999; position: relative; }
.title h3 strong{ color:#2c2c2c;font-weight:700; }
.title p{ margin:0px auto; font-size:0.9rem;font-weight:400; color:#999;letter-spacing: 1px;  position: relative;z-index: 2  }
@media (max-width: 991.98px) {
.title h2{  font-size:2rem;  }
.title h3{  font-size: 1.875rem;  }
.title::after { font-size: 140px;  left: 25%; top: -120%; } 	
	
}
@media (max-width: 767.98px) {
.title h1, .title h2{  font-size:1.75rem;  }
.title h3{  font-size: 1.25rem;  }
} 

 
.title-3 {margin:  0px; position: relative; font-size: 1.75rem; font-weight: 500; letter-spacing: 3px; }
.title-3 h2{margin:-20px auto auto auto; padding: 0px; font-size:7rem; font-weight:900; color: #1d1d1f;  letter-spacing: 3px; position: relative;}
.title-3 h2 span{font-size:2rem; }
.title-3 h3{margin:-20px auto auto auto; padding: 0px; font-size:4rem; font-weight:900; color: #1d1d1f;  letter-spacing: 5px; position: relative;}

@media (max-width:320px) {
.title-3 h2{ font-size:4rem;  }
.title-3 h3{  font-size:2.75rem;  }
}

.title-4 {  margin: 30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  position: relative;  letter-spacing: 3px;}
.title-4 h1{margin:0px 0px 10px 0px;padding: 0px;  font-size:2rem;  font-size: min(max(3.5vw, 1.375rem), 2rem); font-weight:700;color:#1d1d1f;letter-spacing: 3px; position: relative;   }
.title-4 h2{margin:0px;  font-size:1.375rem;  font-size: min(max(3.5vw, 1.125rem), 1.375rem); font-weight:400; letter-spacing: 3px;}
 
 

 /*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.product-wrap{ width: 100%; margin: 0px auto; padding:50px 0px; /* background:#f7fbf5; */}
@media (max-width:1200px) {
.product-wrap{padding: 0px;}
}

 
.main-box{ width: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (max-width:1200px) {
.main-box{margin:3% auto;}
 }
.grid-row {width:auto; display: flex; flex-wrap: wrap; position: relative;   }
.grid-row:nth-child(1) {width:25%; }
.grid-row:nth-child(2) {width:25%; }
.grid-row:nth-child(3) {width:50%; }

.grid-item { -webkit-box-flex: 0;  -ms-flex-positive: 0; flex-grow: 0; width: 100%; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding:0px 10px 5px 10px;  position: relative;  }
.grid-switch{ width: 200px; height: 200px;left:calc(50% - 100px); top:calc(50% - 100px); display: flex; flex-wrap: wrap; flex-direction: column; justify-content:center; align-items: center; letter-spacing: 2px;border-radius:99rem;  background-color: rgba(255,255,255,.5);   position: absolute; }
.grid-icon{width: 80px; height: 80px; padding: 10px 4px; display: block;  }
.grid-icon i{width: 60px; height: 60px; padding:0px;display: block;}
.grid-icon i img{ -webkit-filter:invert(1);}
.grid-txt{width:100%; display: block;font-size: .875rem; font-weight: 500; color: #266433; text-align: center;  font-family: 'Kanit', sans-serif; }
.grid-txt strong{width: 100%; font-size: 1.375rem; font-weight: 700;display: block;color: #1d1d1f; font-family: 'Noto Sans TC', sans-serif; }
@media (max-width:992px) {
.grid-row:nth-child(1) {width:50%; }
.grid-row:nth-child(2) {width:50%; }
.grid-row:nth-child(3) {width:100%; }  
}
  
@media (max-width:767.98px) {
.grid-item { padding:3px;}
}

@media (max-width:640px) {
.grid-row:nth-child(1) {width:100%; }
.grid-row:nth-child(2) {width:100%; }
 
} 
 
/*cms-btn Styles 樣式=================================*/ 
.btn-01 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center; margin:20px auto; position: relative;background:#fff; border:solid 1px #1d1d1f;; z-index: 1;  }
.btn-01 span { font-size: 0.9rem; font-weight: 400;  color: #1d1d1f; text-transform: uppercase;letter-spacing: 3px;  text-align: center; padding:0px 10px;transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;}
.btn-01 em {position: relative;width: 60px; height: 1px;  margin-right: 10px; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.btn-01 i {  position: relative;  width: 10px!important; height: 10px!important; border-radius:99rem; background: #fff; z-index:1;   }

.btn-01:before,.btn-01:after {content: '';background:#1d1d1f;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{ color:#fff;}
.btn-01:hover em{background:#266433; transform: scaleX(0.5);}
.btn-01:hover i{background:#266433;  }
@media (max-width:767.98px) {
.btn-01 {  width: 100%;  max-width: 180px; height: 2.5rem; line-height: 2.5rem;  }   
.btn-01 em { width: 20px;   }
}


.btn-02 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: flex;  flex-wrap: wrap; justify-content: center; align-items: center; margin:20px auto; position: relative;background:#1d1d1f; border:solid 1px #1d1d1f;; z-index: 1;  }
.btn-02 span { font-size: 0.9rem; font-weight: 400;  color: #fff; text-transform: uppercase;letter-spacing: 3px;  text-align: center; padding:0px 10px;transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1;}
 
.btn-02:before,.btn-02:after {content: '';background:#fff;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-02:before { top: 0; left: 0; right: auto;   }
.btn-02:after { bottom: 0; right: 0; left: auto; }
.btn-02:hover:before { width: 100%; right: 0; left: auto;}
.btn-02:hover:after {  width: 100%; left: 0; right: auto;}
.btn-02:hover span{ color:#1d1d1f;}
 @media (max-width:767.98px) {
.btn-01 {  width: 100%;  max-width: 180px; height: 2.5rem; line-height: 2.5rem;  }   
}

 
/*cms-btn Styles 4====*/
.btn-btnbox {position: relative;z-index:1; display: flex;  justify-content: center;  width: 100%; height: auto;  margin: 0px;   padding: 30px 0px;transition: all 1s;}
.btnbox {  width: 100%; height: auto; display: flex;   margin: 0px;   padding: 30px 0px;   transition: all 1s; }
.hotNews {position: fixed; left: -472px; top: 18%; z-index: 999; height: auto; width: 100%; max-width: 502px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; transition: all 0.5s ease 0s;}
.hotNewsH {left: 0px; transition: all 0.5s ease 0s;}
.hotNewsC {width: calc(100% - 35px); height: 100%; max-height: 520px; overflow: scroll;  border-right: 15px solid  #b62f01; background-color: #fff; padding: 20px; box-shadow: 3px 3px 10px rgb(0 0 0 / 50%); border-radius:0px 15px 15px 0px;  }
.hotNewsC a:link, .hotNewsC a:visited {text-decoration:underline; color:#b62f01; transition: all 0.5s ease 0s;}
.hotNewsC a:active, .hotNewsC a:hover {text-decoration:underline; color:#000; cursor:pointer; transition: all 0.5s ease 0s;}
.hotNewsCC {  }
.hotNewsCC h3{ font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; letter-spacing: 3px; }
.hotNewsCC p{ font-size:0.9rem; font-weight:400; line-height: 1.5rem; letter-spacing: 2px; color:#858585 }
.hotNewsB {width: 35px; height: 90px; font-size: 1rem; font-weight:700; letter-spacing: 1px; writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *display: inline; *writing-mode: tb-rl; color: #fff; background-color: #b62f01; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); cursor: pointer; border-bottom-left-radius: 8px; border-top-left-radius: 8px;}
.hotNewsB::after {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px; margin: 3px 0 0 -5px;-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);}
@media only screen and (max-width: 576px) {
.hotNews {max-width: 90%;}
.hotNewsH {left: calc(-90% + 30px); transition: all 0.5s ease 0s;}
.hotNewsC {padding: 15px 15px 100px 15px;}

}
@media only screen and (max-width: 430px) {
.hotNewsC {padding: 10px 10px 100px 10px;}

}