.main-area.top {background-image: linear-gradient(to bottom, #ebeef1 0%, #FFF 100%);}
.product-arera{ padding: 0px;  margin-top:-120px; width: 100%; display: flex; flex-wrap: wrap;}
.main-area.top .product-arera{  margin-top:30px; padding: 0px; background-color: #fff; border-radius:   15px;  }
.product-arera .main-content {width:calc(100% - 300px); background-image: none; padding:30px 20px; margin-top:0px; margin-bottom: 30px; box-shadow: 0px 5px 10px rgba(0,0,0,.2); border-radius: 0px 0px 15px 15px;   position: relative;  }
.bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}

@media (min-width: 1920px) {
.product-arera{  margin-top: -160px; }
}
@media (min-width: 2520px) {
.product-arera{  margin-top: -380px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) { 
.product-arera{ margin-top: -50px;  padding:0px;}
.product-arera .main-content {width:calc(100% - 240px);  padding-left:30px; margin-top: 0px; }
}
 @media (max-width: 992px) {
.product-arera{   margin-top:auto;}
  .product-arera .main-content {width:100%;  padding:0px;   margin-top: 0px;  box-shadow: none;  }
}
@media (max-width: 840px) {
.main-area.top .product-arera{margin-top:0px; background-color: transparent}	
.product-arera{ margin-top:0px;  padding:0px;}
}
@media (max-width: 767.98px) {
.product-arera{  padding:0px;}

}
 
 /*font-size*/
.title { font-size: 1.25rem; font-weight: 700; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 768px) {
.title {font-size: 1.5rem; }
}

@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}


.bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }
.product{width: 100%; padding: 50px 0px; display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative; z-index: 1;}
@media (max-width: 992px) {
.product{  width:100%; margin: auto;  padding:0px 0px 50px 0px;  }    
}

@media (min-width: 1600px) {
.product{width: 100%; padding: 50px ;  margin: auto; }
}

.product li { width: calc(100%/3 - 40px);   margin: 50px 20px;  transition: all 0.3s linear 0s; list-style: none;  background-color: #fff;  border: solid 1px #e9e9e9; border-radius:15px;  overflow: hidden; position: relative; z-index: 1; }
.product li .item{width: 100%;  display: flex; flex-wrap: wrap;   overflow: hidden }
/*font-size*/
.product li h3 { min-height:66px; margin-bottom: 10px; color:#139d68; font-size:1.875rem;  line-height:1.875rem; overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:normal; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical;  }
.product li .photo { width: 100%; height: auto; padding: 0px;   overflow: hidden; position: relative;    }
.product li .photo figure{ width: 100%;  padding-top:100%;height: 0;  object-fit: cover; overflow: hidden; position: relative; transition: all 0.5s ease 0s;  } 
.product li:hover .photo  figure{  transform: scale(.9)}
.product li .inner-box {width:100%;margin:0 ; padding: 25px 30px;  position: relative; z-index: 9; transition: all .4s ease;   }
.product li:hover h3 a{ color:#ffc107 }

@media (max-width:1024px) {
.product li { width: calc(100%/3 - 20px); margin: 30px 10px;}
.product li .photo{ width:100%; padding: 0px; border-radius: 30px 30px 0px 0px;  }
.product li .inner-box { width: 100%; margin: 0px auto;padding: 20px ;border-radius: 0px 0px 30px 30px;   }   
.product li h3 {font-size:1.875rem;line-height: 2rem; letter-spacing: 0px; }   	
 }
@media (max-width: 840px) {
.product li h3 {font-size:1.5rem;  }   	
}

@media (max-width:767.98px) {
.product li { width: calc(100%/2 - 20px); margin:20px 10px;   }
.product li .inner-box { padding:15px ;  }   
.product li h3 { min-height:50px;margin-bottom: 0px;  font-size:1.375rem; line-height: 1.5rem; }   
 }
	
@media (max-width:320px) {
.product li { width: 100%; margin: 20px auto;}	
.product li h3 {font-size:1.125rem; }   
 }

  /*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
/*--分類new-tag --*/
.product-item .new-tag {  width: auto; padding:5px 14px; font-size: 1rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:0px; top:0px; border-radius:15px 0px 15px 0px;background-image: linear-gradient(135deg, #8BC34A 10%, #009688 100%);  }
.product-item .new-tag a{color:#fff;}
.product-item .new-tag-red {  background-image: linear-gradient(135deg, #E91E63 10%, #e91e1e 100%); }
  
.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc( 100%/3 - 20px); margin:40px 10px 40px 10px; padding:0px ; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; background-color: #fff; border: solid 1px #e9e9e9;position: relative;  border-radius: 15px; overflow: hidden  }
.product-item li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
@media (max-width:992px) {
.product-item li figure{ border-radius:20px;  }
}

@media (max-width:840px) {
.product-item li {margin:20px 10px; }
}
@media (max-width:767.98px) {
.product-item li { width: calc(100%/2 - 10px); margin:10px  5px;  } 
}
@media (max-width:280px) {
.product-item li { width: 100%; margin:20px auto;  } 
}


/*--橫式樣式--*/
.product-item li.photo-v figure{  width: 100%; padding-bottom:50%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item .inner{  width: 100%;  padding:0px 20px 20px  20px;   position: relative;} 
.product-item .inner h3{ width: 100%; min-height:48px; margin: 0px 0px 10px 0px; font-weight:500; font-size: 1.175rem;  color:#000; text-align: left; line-height:1.5rem;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 a h3 {  color:#000; }
.product-item .inner .price{ font-size: 1.375rem; line-height: 1.375rem; font-weight: 400;   color:#21a068;   } 
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: 1rem; 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 .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; }
.product-item li:hover a h3,.product-item li:hover a p{color: #ffa908;}
 
@media (max-width:840px) {
.product-item .inner h3{ font-size: 1.375rem; line-height:1.175rem;}		
}

@media (max-width:767.98px) {
.product-item .inner{ padding: 10px;} 
.product-item .inner h3{ font-size: 1.175rem; line-height:1.175rem;margin: 0px 0px 10px 0px; }	
.product-item .inner .price{ font-size:1rem;} 
}
@media (max-width:320px) {
.product-item .inner h3{ font-size:1rem; line-height:1.15rem;}	
.product-item .inner .price{ font-size:0.875rem;} 
	
}
 

/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%;  margin:0 auto; padding:20px 0px; background-image: linear-gradient(to top, #ebeef1 0%, #FFF 100%);   }
.best-wrap .product-item {width: 100%;  height: auto;  margin:0 auto;}
.best-wrap .product-item li{  width: calc(100% - 20px); margin: 10px; } 
.best-wrap .product-item .inner h3{font-size: 1.375rem;}
.best-wrap .slick-dots li {  width: 8px; height: 8px;  margin: 0 7.5px;  vertical-align: 6px; }

 i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("../images/icon/arrow-right-f.svg") no-repeat right top;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media only screen and (max-width:1180px){
.best-wrap .product-item .inner h3{  font-size:1rem; line-height:1.375rem; }
}
@media only screen and (max-width:992px){
.best-wrap{ background-image: none;}
}
 @media only screen and (max-width:440px){
.best-wrap .product-item .inner h3{  font-size:1rem; line-height:1.175rem; }
}
 
 
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.product-wrapper { width: 100%; margin:auto; padding:0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}
 
@media (min-width: 1200px) {
.product-wrapper {  padding-right: 40px; padding-left: 40px; max-width: 1200px; margin: auto; }
}
@media (min-width: 1400px) {
.product-wrapper { max-width: 1400px; }
}
.product-left{width:50%; position: relative;  }
.product-right{ width: 50% ;  margin-bottom: 15px;  overflow: hidden;  position: relative;  }
.product-right .main-breads .breadcrumb{justify-content: flex-start; padding: 0px;}
.product-left .social-icons{justify-content: center;align-content: center; align-items: center; font-size: 0.875rem;}

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.cms-slider-for { width:100%;  margin: 0px auto; padding:0px 0px 20px 0px!important; display: flex; align-content: flex-start; flex-wrap: wrap;  }
.slider-for{ width: 100%; margin: 0px!important; padding:0px!important; overflow: hidden;  position: relative; z-index: 0; }
.slider-for li,.slider-nav li { width: 100%; display: block;margin: auto; padding: 0px; cursor: pointer; }
.slider-for li img{ display: block;width:100%;  height:auto;margin: auto; padding: 10px;}  
.slider-for .slick-dots{bottom: 20px;}
.slider-nav{ width:100%; height: auto; margin:0px; padding:0px;   display: flex;  flex-wrap: wrap; justify-content: flex-start;   z-index: 9;}
.slider-nav li{ width: 100px; opacity:.8; margin:10px;padding: 5px; background: #fff; border: solid 1px #ededed;   }
.slider-nav li img{ width:100%;  margin:0px; padding:0px;  }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1; border: solid 1px #2f6b3c }
.slider-nav .slick-dots {bottom:-20px;}
.slider-nav .slick-prev,.slider-nav .slick-next{ width: 36px; height: 36px; top:30%;  }
@media (max-width: 767.98px) {
.product-left{width: 100%;padding:0px;  }
.product-right{width: 100%;padding:30px 0px 0px 0px;  }    
}


.product-info{ width:100%; padding:0px 0px 0px 40px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
.product-info h1{ padding: 15px 0px;width: 100%; display: flex; justify-content: flex-start; font-size:1.5rem;   font-size: min(max(3vw, 1.125rem), 1.5rem); font-weight: 600;  color:#000; position: relative; word-spacing: normal; word-break:normal; }
.product-info p{  width: 100%; margin: 15px 0px; font-size:0.875rem; font-weight: 400; color:#404040;  word-spacing: normal; word-break:normal; }


/*.item-title{  display: block; margin: 15px 0px; color:#558d32;  font-size:1.15rem;}*/

.product-info h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#989898;  word-spacing: normal; word-break:normal; }
@media (max-width: 991.98px) {
.product-info{padding-left:20px; }    
}
@media (max-width: 767.98px) {
.product-info{  padding:0px; border:none; }    
}
 
/*----------------------------------------/
 product-info .social-icons
----------------------------------------*/
.product-info .social-icons{margin: 10px 0px; justify-content: flex-start }
.product-info .social-icons li  { margin-right: 3px; width: 26px; height: 26px; background:#fff;}
.product-info .social-icons li i{ width: 26px; height: 26px; background-size: 16px;}


/*----------------------------------------/
 敘述區塊
----------------------------------------*/
.product-description{ padding:15px 0px;  }
.product-description p strong{color:#000;}

.way-delivery{ font-size:1rem; font-size: min(max(2vw, .75rem), 1rem);  margin-right: 5px;}
.way-delivery-txt{ font-size:1rem; font-size: min(max(2vw, .75rem), 1rem); }
 /*----------------------------------------/
 促銷
----------------------------------------*/
.color-group{ width: 100%; display: flex; flex-wrap: wrap;color: #4a4e5c;}
.promotion{width: 100%;padding:5px 10px; display: flex; flex-wrap: wrap; align-items: center;  }
.coupon{padding:0px 10px;  color:#000; font-size: 1rem; font-size: min(max(2vw, .75rem), 1rem);font-weight: 500;  }
.label{ width: 70%; padding:0px 10px; font-size: 1rem;font-size: min(max(2vw, .75rem), 1rem); font-weight: 700; }
.label a{color:#f18201;}
.ticket{  padding:0px 10px;font-size: 1rem; font-size: min(max(2vw, .75rem), 1rem);font-weight: 700; }
@media (max-width: 768px) {
.label{ width: 100%; padding:0px 10px;  }
.ticket{ padding:0px 10px 0px 0px;  }

}
.product-right form{width: 100%;}
/*----------------------------------------/
產品規格
----------------------------------------*/
.product-form-item{ width: 100%; display: flex; flex-wrap: wrap;}
.product-form-item label{font-size:.875rem;font-weight:700!important; color:#3a3a3c;   }
.spec-group{ width: 100%; }

.option-radio { width: auto; border: 0;  padding: 0;  margin: auto 0px;  position: relative; font-size:1rem; }
/*----------------------------------------/
數量選擇
----------------------------------------*/
.amount-value{ width:100%; margin:8px 0; display: flex;  flex-direction: row; justify-content: space-between; align-content: center; align-items: center; }  
.amount-value span{color: #333;}
.amount {  width:100%;  height: 41px;  border:solid 1px #333; border-radius:0px; margin:8px 0; display: flex;  flex-direction: row; justify-content: space-between; align-content: center; }
.amount a{ width: 40px;   border:none;  }
.amount-button { display: flex; justify-content: center; align-items: center; width: 40px;  height: 40px;  padding: 0;  font-size:1.125rem; font-weight:700;color: #333;  background-color: #fff; border: solid 1px #ccc;}
.amount-button.amount-less{border-radius: 5px 0px 0px 5px;}
.amount-button.amount-more{border-radius: 0px 5px 5px 0px;}
.amount-value input[type="text"] { width:100%;height: 40px; text-align:center;color:#000; background-color: #fff; border: solid 1px #ccc; border-radius:0px;}

/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%; max-width:70%; margin:5px 0px; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.product-group-btn{width:100%; margin-top: 2%; display: flex; flex-wrap: wrap; justify-content: space-between; }
 

@media (max-width: 768px) {
.product-group{  max-width:100%;  }
.product-group-btn{width:100%;  }
}

.product-info button {  border-radius:0px; }
.price-panel{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; font-family: 'Oswald', sans-serif; }
.price-orig { text-decoration:line-through; color:#969391; font-family: 'Oswald', sans-serif; }
.price-sale { margin-left: 20px; font-size:1.25em; font-weight:bold;color:#ff3333;font-family: 'Oswald', sans-serif;  } 
.spec-panel {width: 100%;max-width: 50%;margin:10px 20px 10px 0px;}

.spec-panel > div { margin:10px 0px; }
.spec-group button { width:auto;min-width: 3rem;  margin:2px 2px 10px 2px; padding: 5px!important; font-size:1rem; color:#333; background-color:#fff; border: solid 1px #ededed; border-radius:0px;}
.spec-group button.active { color:#fff; background-color:#616161;  border: solid 1px #616161; }
.spec-group button:disabled { color:#c9c9c9; background-color:#f4f4f4; }
@media (max-width:320px) {
.spec-panel {  max-width: 100%;margin:10px auto;}   
.spec-panel > div { text-align: center;}    
.spec-group button { width:100%; margin:3px auto; }
}
    
.product-group button { height:40px; padding: 5px; color:white; background-color:transparent;  border-radius:5px;   }
.product-group button:disabled { color:gray; background-color:lightgray; }
.product-group button.btn-secondary { background-image: linear-gradient(120deg, #0c9b67 0%, #74c666 100%);  border:none;color:#fff; display: flex; justify-content: center; flex-wrap: nowrap;  }
.product-group button.btn-buynow  { background:#f18201; border:solid 1px #f18201;}
.product-group button i{ width: 20px; height: 20px; display: flex; margin: auto 3px auto  ;  }
 
#cms-lower-panel{ width: 100%; margin-top: 15px;}
#cms-lower-panel > div + div { margin-top:5px; }
#cms-lower-panel > div.cms-lower-item {display: flex; flex-direction: row; align-items: center; width: 100%;  margin-bottom: 10px; font-size: 0.9rem;}
.cms-lower-item-checkbox{ width: 30px;}
.cms-lower-item-checkbox input[type="checkbox"] { width:20px;height: 40px; text-align:center;color:#000; background-color: #fff; border: solid 1px #ccc; border-radius:0px;}
.cms-lower-item-img{width:40px; height:auto; }
.cms-lower-item-img img { width:40px; height:auto;  }
.cms-lower-item-title{ width: 50%; max-width: 100%; padding: 0px 10px;   }
.cms-lower-item-title span{  font-weight: 700; }
.cms-lower-item-amount { width:12%;  margin: auto 10px;}
.cms-lower-item-amount  select{  width: 100%; margin: auto; padding: 0px; text-align: center;  border: solid 1px #ddd;}
.cms-lower-item-price{ width: 18%;font-size: 0.875rem; color:#f18201; font-weight: 700;}
.cms-lower-item-price span{  display: inline-block;}

@media (max-width: 767.98px) {
.cms-lower-item-amount  select{ padding-left: 0px;}
}

 /*----------------------------------------/
btn區塊
----------------------------------------*/
.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;   align-items:center;  }
@media (max-width:767.98px) {
.product-info{ padding:0px; }
}
.product-info-title { width:100%;  padding:0px 0px 20px 0px; margin: auto;   -webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.product-info-title h1 {margin: 0px;  font-weight: 700; font-size:2rem;line-height: 3.75rem; letter-spacing:2px;  color:#172987; }
.product-info-title h2{   margin-bottom: 30px; font-size:1.15rem; font-weight: 700;   word-spacing: normal; word-break:normal; }
.product-info-title p{ font-size:1.15rem;line-height: 1.75rem; font-weight: 700;  margin-bottom: 20px; } 
@media (max-width:1024px) {
.product-info-title { width:100%;  padding: 40px 0px 0px 0px;  }
}
@media (max-width:767.98px) {
.product-info-title {padding: 0px 20px 40px 20px;   }    
.product-info-title h1 { font-size:2rem;line-height:2.75rem;  }
.product-info-title p{ font-size:1.125rem;line-height: 1.5rem;   }   
}
@media (max-width:640px) {
.product-info-title {padding: 0px;}      
}
@media (max-width:320px) {
.product-info-title h1::before { width:36px;height:36px;}
.product-info-title h1 { font-size:1.5rem;line-height:2rem;  }  
.product-info-title p{ font-size:1rem; line-height: 1.375rem;}      
}
.pdd-toggle-area{width: 100%;margin:20px 0px 0px 0px;   display: flex; flex-wrap: nowrap; align-items: center;  }
.pdd-toggle-area .btn{ width: calc(100%/2 - 20px); margin-right:20px; }
@media (max-width:767.98px) {
.pdd-toggle-area{ flex-direction: column;}   
.pdd-toggle-area .btn{ width: 100%;;margin:10px auto; }  
}
  


.product-arera .main-content .resp-tabs-list{ align-items: stretch; border-bottom: solid 3px  #107a4e;}
.product-arera .main-content .resp-tabs-list li{ margin: 0px; padding:  0px 10px; font-size: 1.275rem;  border: solid 1px  #107a4e; background-image: linear-gradient(to left, #ebeef1 0%, #f8f8f8 100%);}
.product-arera .main-content .resp-tabs-list li.resp-tab-active{  color: #fff; background-color: #0f7a4d!important;background-image:none }
 .product-arera .main-content .resp-tabs-container{padding: 0px 30px}
.product-arera .main-content .resp-tabs-container .resp-tab-content{padding: 0px }

@media (max-width:440px) {
.product-arera .main-content .resp-tabs-list li{  padding:  0px 4px; font-size: 0.75rem; line-height: 1rem; }
.product-arera .main-content .resp-tabs-container{padding: 0px 0px}
 }
@media (max-width:380px) {
.product-arera .main-content .resp-tabs-list li{ width: calc(100%/2) }
}
.tab-content {padding: 40px 0px;}
@media (max-width:767.98px) {
.tab-content {padding:0px;}
}

.product-description{ width: 100%; padding:0px 0px 10px 0px;   color:#888;  }
.product-description p { margin: 5px 0px; font-size:1rem; font-weight: 400; letter-spacing: 1px; word-wrap:normal; word-spacing: normal; word-break:normal; }
.product-description span {  margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
.product-description p strong{color:#000;}
.specbox { padding:0px; margin: 10px 0px; width: 50% }
.specbox li{ width: 100%;padding:0px 0px 5px 0px; display: flex; flex-wrap: wrap; align-items: center}
.specbox .name-pix {  width: 20px; margin: 0;  }
.specbox .name-pix figure{margin-top: -5px; }
.specbox .name-pix img{  width: 20px;height:20px;margin:0px auto }
.specbox .name-txt {width: calc(100% - 26px - 10px); padding-left: 10px; font-size:1rem; color: #575757;}
@media (max-width:767.98px) {
.specbox {  width: 100% }
}

/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.edit{width: 100%; max-width: 1160px; padding:15px 5px; margin: auto;}
.edit h4 img{display: block; width: 100%; max-width:600px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.w5{ width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
 
.spec{ width: 100%;  margin: auto;   padding:20px 0px 20px 20px;  }
.spec li { width: 100%; padding: 0px; margin-bottom: 5px;  font-weight: 300; position: relative;}
 .spec li:hover{ background:#f8f7f7;}
.spec li .m-tag{ margin: 2px 5px; height: 26px; padding:0px 5px 2px 5px; background-color: #f66a2c; border-radius:10px; color: #fff; text-align: center;  position: relative;}
@media (max-width:768px) {
.spec{  padding:0px;  }
 .spec li { width:100%; }
}




.spec-box{position: relative}
.spec-box .title-left{  width: 100%!important;  display: block; margin: 0; padding:20px 0px 10px 0px;   cursor: pointer; position: relative; }
.spec-box .title-left::before {position: absolute;  right:0px; top:30px; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top:10px; width:16px; height:16px; background-color:transparent;  border-top: 4px solid #ffa908; border-right: 4px solid #ffa908; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }


.spec-box .spec-table {   height: auto; }
.spec-box.active .title-3::before { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.spec-box.active .spec-table { max-height: 0; overflow: hidden; padding:0px; }


.product-features { margin-top: 1.25rem; margin-left: .3125rem}
.product-features > dl.data-sheet { display: -webkit-box; display: -moz-box; display: box;  display: -moz-flex; display: -ms-flexbox; -js-display: flex;  display: flex;  -webkit-box-lines: multiple;  -moz-box-lines: multiple; box-lines: multiple;  -ms-flex-wrap: wrap; flex-wrap: wrap;  -webkit-box-align: start; box-align: start; -moz-align-items: flex-start;  -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start}
.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name { -webkit-box-flex: 1;  box-flex: 1; -moz-flex: 1 0 40%; -ms-flex: 1 0 40%; flex: 1 0 40%; font-weight: 400; background: #ebebeb; padding: .625rem; margin-right: .625rem; min-height: 2.5rem; word-break: break-all
}
.product-features > dl.data-sheet dd.value:nth-of-type(2n), .product-features > dl.data-sheet dt.name:nth-of-type(2n) {  background: #f6f6f6}
.product-features > dl.data-sheet dt.name {  text-transform: capitalize}


.product-attachments{ margin: auto;}
.product-attachments .attachment{ padding: 10px; margin:15px 10px;  border: solid 2px #9ccfba; border-radius:5px;}
.product-attachments .attachment:hover{ background-color:#9ccfba;  }
 .product-attachments .attachment a{ color: #0f7a4d}



/*table css*/
:root { --stickyBackground: #eee; --borderColor: #C9D1DC;}
.table-wrapper { width: 100%;  height: auto;  margin: 0px auto 30px 0px;  overflow: auto; }
@media (max-width: 991.98px) {
.table-wrapper { width: 100%; height: 320px; border: 1px solid var(--borderColor); overflow: auto;}
}
.datatable { width: 100%; border-spacing: 0; margin: auto; border: 1px solid var(--borderColor);}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}

.datatable thead { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;}
.datatable tbody { font-size: .9rem;}
.datatable th, .datatable td { font-size:.9rem; padding: 15px; white-space: nowrap; border-bottom: 1px solid var(--borderColor);  border-right: 1px solid var(--borderColor);}
.datatable thead td{ color: #000;  font-weight: 700; }
.datatable tr:nth-child(even) {background-color:#f5f9ff; }
.datatable tr.sticky {color: #fff; font-weight: 700; position: sticky;  top: 0;  z-index: 1;  background-image: linear-gradient( 135deg, #1D528B 10%, #3C8CE7 100%);box-shadow: 0 0 6px rgba(0,0,0,0.25);}
.datatable th.sticky,.datatable td.sticky {  color: #000;  font-weight: 700;  position: sticky; left: 0; background: var(--stickyBackground);}
.datatable th.sticky::after,.datatable td.sticky::after {  content: ""; position: absolute; right: -6px; top: 0; bottom: -1px;  width: 5px; border-left: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);}
.datatable th.sticky::before,.datatable td.sticky::before { content: ""; position: absolute; left: -6px; top: 0; bottom: -1px;  width: 5px; border-right: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);}
 @media (max-width:320px) {
.datatable tr.sticky {   position: relative;  }
.datatable th.sticky,.datatable td.sticky {  position: relative; }
}

.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style: none}
.w-list li{ display: block; padding-left: 20px;  margin-bottom: 20px; font-size: 1.15rem;   font-size: min(max(3.5vw, .9rem), 1.15rem);font-weight:400; line-height: 1.5; letter-spacing: normal; color: #000;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:10px;position: absolute; background-color:#49b232; border-radius: 2px;}
.w-list li p{font-size: 1rem;   font-size: min(max(3.5vw, .875rem), 1rem);}
 @media (max-width:767.98px) {
 .w-list{  padding: 0px; }    
}
 
.spec-box{position: relative}
.spec-box .title-left{  width: 100%!important;  display: block; margin: 0; padding:20px 0px 10px 0px;   cursor: pointer; position: relative; }
.spec-box .title-left::before {position: absolute;  right:0px; top:30px; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top:10px; width:16px; height:16px; background-color:transparent;  border-top: 4px solid #ffa908; border-right: 4px solid #ffa908; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }


.spec-box .spec-table {   height: auto; }
.spec-box.active .title-3::before { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.spec-box.active .spec-table { max-height: 0; overflow: hidden; padding:0px; }

 
.video { width:600px;margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  position: relative; transition: all 0.3s linear 0s; 
border: 1px solid #fff3eb;background: #fffaee;  box-shadow: 0px 2px 4px rgba(172, 184 ,204 ,.25), 0px 4px 4px rgba(172, 184 ,204 ,.2), 0px 8px 8px rgba(172, 184 ,204 ,.15), 0px 16px 16px rgba(172, 184 ,204 ,.1), 0px 24px 24px rgba(172, 184 ,204 ,.25);mix-blend-mode: multiply; border-radius:15px;  overflow: hidden;  }
.video figure{ position: relative; width:100%;  height: 0; padding:75% 0px 0px 0px; overflow: hidden;object-fit: contain;background-color: #fff; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.video figure img { max-width: 100%; height: auto; transition: all .35s ease;  }
.video:hover figure{  transform: scale(1.05)}
.video-title { width: 100%; max-height: 56.7px; margin: auto; padding:10px 0px; color:#565656; font-size:1rem; line-height: 1.375rem;  font-weight:400; overflow: hidden; word-break:normal;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.video .btn-play {   margin: auto; z-index:99; }  
@media (max-width: 768px) {
.video { width:100%; padding:0px; }   
.video li{ width: calc(100%/2 - 50px); margin: 50px 25px;  }
}

@media (max-width: 767.98px) {
.video { width: 100%; margin: 30px auto;}
.fancybox-slide--iframe .fancybox-content { padding: 0px;  width: 100%!important; height: 80%; max-width: calc(100% - 10px); max-height: calc(100% - 100px);}
}