/*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.product-wrap{  width: 100%; margin: 0px auto; padding:50px 0px;  background:#f7fbf5; }
.product-wrap .main-wrap{  max-width: 1400px; margin: auto; height: auto; padding: 20px 0px; display: flex; flex-wrap: wrap; justify-content: space-between;  }
/* Common style */
 
/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { background:#fff;}
figure.effect-bubba img {opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
figure.effect-bubba:hover img {opacity: 0.8;}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { position: absolute; top:16px; right:16px; bottom: 16px; left: 16px; content: ''; opacity:1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-bubba h2 { margin-top: 72%;  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba p { padding: 0px; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba:hover h2,figure.effect-bubba:hover p { opacity: 1; -webkit-transform: translate3d(0,-40px,0); transform: translate3d(0,-40px,0);}
figure.effect-bubba:hover figcaption::after {  -webkit-transform: scale(1,0); transform: scale(1,0);}
figure.effect-bubba:hover figcaption::before{  -webkit-transform: scale(0,1); transform: scale(0,1); }
@media (max-width: 1024px) {
.cms-product-cate li{ width:calc(100%/3 - 10px); margin: 15px 5px;}
}
 @media (max-width: 768px) {
.cms-product-cate li{ width:calc(100%/2 - 10px); }
}
 @media (max-width: 767.98px) {
.cms-product-cate li{ width:calc(100%/2 ); margin: 15px 0px;}
.cms-product-cate figure h2 { font-size:15px; max-height: 30px; }
figure.effect-bubba h2 { margin-top: 75%;  }
}

 
/*----------------------------------------/
產品清單頁  cms-product-item  
----------------------------------------*/
.main-product { width: 100%; padding:50px 0px;  margin:0px; position: relative;  }
 /* */
.product-item { width:100%; height: auto;  margin:0px auto;  padding:20px 0px;  display: flex; flex-wrap: wrap;   }
.product-item li { width: calc( 100%/3); margin:0px; padding:10px;  position: relative; z-index: 1; list-style: none;transition: all 0.3s linear 0s;}
.product-item li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  background-color:#fafaf5;}
.product-item li:hover figure img { transform: scale(1.05);   }
.product-item li:hover .item{box-shadow: 0px 5px 12px #eee; border: solid 1px #f18201;}

.product-item li .item{width: 100%;margin:0px 0px 10px  0px; padding: 0px;display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; border: solid 1px #E2E2E2;transition: all 0.3s linear 0s; border-radius: 17px; overflow: hidden; } 
.product-item li .inner{width: 100%; margin:0px; padding: 10px; } 
.product-item li .inner h3 a{  margin:0px auto; padding: 0px; min-height: 60px; font-size:1.15rem; font-size: min(max(3vw, .9rem), 1.15rem); line-height:1.75rem; font-weight: 400; text-align: left; color:#2c2c2c; overflow: hidden;   word-break:normal; word-wrap: break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.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:normal; 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:1.15rem; font-size: min(max(3.5vw, .9rem), 1.15rem); display: flex; flex-wrap: wrap;  justify-content:space-between; font-family: 'Oswald', sans-serif; }
.product-item li .product-price{ margin:0px;  color:#ff3333; font-weight: 700; }
.product-item li .product-price-origin{ margin:0px; color:#c9c9c9;font-weight: 400;  text-decoration: line-through; }
.note { position: absolute; bottom:0px; right: 0px; padding: 5px; width:auto; height:auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:1rem;  font-size: min(max(3.5vw, .9rem), 1rem);text-align: left; line-height: 1.5rem; text-shadow:none; z-index: 11; }
.note.note-sale {  color: #fff; background:#266433; }

.tag-cate-list { position: absolute; top:5px; left: 5px;width: 100%; height:auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center;  z-index: 11; }
.tag-cate{ width: auto; max-width: 100%; height: auto;  padding:2px 5px; margin: 0px 5px 5px 0px; position: relative;  background-color:transparent;  border: solid 1px transparent;border-radius:10px;-webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
a.tag-cate{ color:#fff;  font-size:.9rem;  font-size: min(max(3.5vw, .75rem), .9rem);text-align: left; line-height: 1.35rem; text-shadow:none; }
a:hover.tag-cate{  opacity:.85;  }
.tag-red{background:#d65258; }
.tag-green{background:#296745;}
.tag-purple{background:#604f9e}
.tag-brown{background:#b04422;}

.product-item li .product-store{ margin:10px 0px; color:#668e69; font-size:0.875rem;   font-size: min(max(3vw, 0.75rem), 0.875rem); font-weight:400;  }

.btn-area { width: 100%; background-color:transparent; display: flex; position: relative; overflow: hidden; transition: all .35s ease;   }
.btn-area .btn-link {  width: calc(100%/2);margin: 0px; text-align: center;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #fff;  }
.btn-area  i { width: 20px;  height: 20px;  margin: 0px 5px;  display: inline-block;}
.btn-area .more {width: 100%;  background-color:#fff;  color:#ff9800;  border-radius:0px 0px 0px 15px; }
.btn-area .inquiry{ width: 100%; background-color:#ff9800;  color: #fff;}
.btn-area .more:hover { color: #fff;background: #777;border: solid 1px #777}
.btn-area .inquiry:hover {background: #2c2c2c;border: solid 1px #2c2c2c }

.btn-area button{border: solid 1px #ff9800;  padding:10px 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; transform: scale(1.05);}
.btn-area button:active,.btn-area button:visited { color: #b4a174; }

 
@media (max-width: 767.98px) {
.product-item li { width: calc(100% / 2 - 10px); margin: 10px 5px; padding: 0px;   }
.product-item li:nth-child(3n){margin-right: auto;}
.product-item li:nth-child(2n){margin-right: 0;}
.btn-area button{ padding:10px 2px; }
}
 
@media (max-width: 320px) {
.product-item li { width: calc(100%  - 10px); margin: 10px auto; padding: 0px;   }
 }



 /*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.product-wrapper {  display: flex;  flex-wrap: wrap; width: 100%; margin:auto; padding-top: 30px;}
 @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:before {  position: absolute; width: 100%;  content: ""; left: 0; height: 5px; background-image: -webkit-linear-gradient(left, #9eba8d, #ebf2cb) !important;}*/
.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;}
.product-info .social-icons li  { margin-right: 3px; width: 26px; height: 26px; background:#c8c8c8;}
.product-info .social-icons li i{ width: 26px; height: 26px; background-size: 16px;}


/*----------------------------------------/
 敘述區塊
----------------------------------------*/
.product-description{ padding:15px 0px; border-bottom: solid 1px #eee; }
.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); }

/*
.badge-tag{ padding: 5px 15px;  font-size: 0.875rem;  color:#5b3932;; background: #eae6dd;  border-right: 1px dashed #5b3932; border-left: 1px dashed #5b3932; }
.store { display:flex;  flex-wrap: wrap; }
.store img{ display:flex;width: auto; height: 20px; margin: 5px; }
.product-marker { margin:15px 0px; border-top: 1px solid #e2e2e2; width: 100%;}*/


/*----------------------------------------/
 促銷
----------------------------------------*/
.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;   }
.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;}
.amount-value input[type="number"] { 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: calc(50% - 10px); margin: auto 10px auto 0px;display: flex;  align-items: center; justify-content: center;}
.product-group-btn{width:70%; margin-top: 2%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.product-group-btn .btn{ width: 30.333%;  }


@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:#f18201;  border: solid 1px #f18201; }
.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 { width:50%; 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-color:transparent;  border-color: #ff5722;color:#ff5722; 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;}
}

/* group-list  客製化產品列表*/
.bg-special{background-color: #fafaf5}
.special-wrap{width:100%; margin:0px auto;  padding: 0px 30px;}
@media (max-width: 840px) {
.special-wrap{ padding: 0px;}    
}

.group-list { width:100%; margin:0px auto;  padding:0px 0px 40px 0px;  display: flex; flex-wrap: wrap;  }
.group-list li { width:calc(100%/4); margin:10px 0px; padding:0px 20px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; }
@media (max-width: 1024px) {
.group-list li { width:calc(100%/3); padding:0px 10px;   }   
}

@media (max-width: 767.98px) {
.group-list li { width:calc(100%/2); padding:0px 5px;   }   
}
@media (max-width:320px) {
.group-list li { width:100%;  margin:10px auto;   }   
}

.group-list li figure{  width: 100%; padding-bottom: 100%; height: 0;  background-color:#fafaf5; border-radius:15px 15px 0px 0px;overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  }

.group-item {display: flex; flex-wrap: wrap; width:100%;  padding:0px; background-color:#fff;border: solid 1px #80a083; border-radius:15px; }
.group-item-checkbox{ width: 30px;}
.group-item-checkbox input[type="checkbox"] { width:20px;height: 40px; text-align:center;color:#000; background-color: #fff; border: solid 1px #ccc; border-radius:0px;}
.group-item-title{ width: 100%; min-height: 110px;  padding:10px;  }
.group-item-title span{  font-weight: 700; }

.group-item-title p{   min-height: 90px;  margin:0px auto; padding: 0px; font-size:1em;  font-size: min(max(2vw, .9rem), 1rem);    line-height:1.75rem; font-weight: 400; text-align: left; color:#2c2c2c; overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.group-item-amount {width:calc(100% - 20px); margin: auto;}
.group-item-amount  select{  width: 100%; margin: auto;  border: solid 1px #ddd;}
.group-item-price{ width: 50%;  }
.group-item-price span{  font-size: 1rem; color:#ff5722;  }

.circle-style{ margin-right: 10px; width: 30px; height: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; border-radius: 99rem;font-size: 1rem;color: #fff;background-color:#f18201; font-family: 'Oswald', sans-serif; }

.spec-group{width: 100%;   }
.spec-group-title { width: auto; display: flex;   margin:0px; padding: 25px 0px 15px 0px;}
.spec-group-title span{ width: auto; margin-bottom: 10px; font-size: 1.25rem; color:#f18201; font-weight: 700; }

.special-item{display: flex; flex-wrap: wrap; align-items: center;}


/*----------------------------------------/
checkout-bar
----------------------------------------*/
.checkout-bar{ bottom: 0; left: 0; width: 100%; padding: 10px 0px; position: fixed;  z-index:9; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px #E2E2E2;}
.checkout-bar .main-wrap{ justify-content:center;}

 .checkout-block {  width: calc(100%/3);}

@media (max-width: 767.98px) {
.checkout-bar .checkout-block:nth-child(1) { width: 40%;}  
.checkout-bar .checkout-block:nth-child(2) { width:60%;}  
.checkout-bar .checkout-block:nth-child(3) { width: 100%;}  
}
@media (max-width: 320px) {
.checkout-block {  width: 100%;}
.checkout-bar .checkout-block:nth-child(1),.checkout-bar .checkout-block:nth-child(2) { width: 100%;}  
}

.checkout-block .spec-panel{ width: 100%;  max-width: 100%; margin: 5px auto;display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}
.checkout-block .spec-panel > div{ width: auto; margin: 0px 10px; }
.checkout-block .price-panel{ justify-content: flex-end;  margin: 10px auto; }

/*----------------------------------------/
tab
----------------------------------------*/
#cms-tabs-product .resp-tabs-list{ width: 100%; border-bottom: solid 1px #d6d6d6;}
#cms-tabs-product .resp-tabs-list li { width:auto; margin: 0px 25px;  font-size: 1.25rem;  font-size: min(max(2vw, 0.9rem),1.25rem);font-weight: 700;   justify-content: flex-start; border-radius:5px;    }
@media (max-width: 767.98px) {
#cms-tabs-product .resp-tabs-list{ margin-top: 0px!important;}
#cms-tabs-product .resp-tabs-list li { margin: 0px 25px 0px 0px;}
}

@media (max-width: 320px) {
#cms-tabs-product .resp-tabs-list li { margin: 0px 5px 0px 0px;}
}

#cms-tabs-product .resp-tab-active { color:#f18201;  position: relative; }
#cms-tabs-product .resp-tab-active:after { content: ""; position: absolute;left:0px;bottom:0px; width: 100%; height: 2px; background:#f18201; }
#cms-tabs-product .resp-tab-active a { color:#f18201!important;    }
#cms-tabs-product .resp-tab-content { padding:30px 0px ;}
 
  
.edit{ width: 100%; max-width:960px;padding:15px 5px; margin: auto;  }
.edit-pic{display: flex; flex-wrap: wrap; justify-content: center; width: 100%;  height: auto;  margin:auto!important;}
.edit .edit-description p{ margin:1% auto; font-size: 1rem; font-weight: 400; color:#777; }
.edit .edit-description p strong{  color:#f18201; font-weight: 700;   }
 

/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; height: auto;  margin:0 auto; padding:20px 0px 0px 0px;  }
.best-wrap .product-item li { width: 100%;  margin:15px 5px;   }
.best-wrap .slick-prev,.best-wrap .slick-next{  top:0px;}
.best-wrap .slick-prev{left: calc(50% - 50px);}
.best-wrap .slick-next{right: calc(50% - 50px);}


/*---------------------------------
special
----------------------------------------*/

.special{ margin-top: 10px; width:100%;}
.special h3 {width:100%; margin:10px 0px; padding:10px 0px 10px 20px; font-size:1rem;  color:#8eba46; font-weight:400; background:#f4f4f4;position: relative;  }
.special h3 a{width:100%; color:#000!important;}
.special h3::after { float: right; margin-right: 10px;margin-top: 5px; width: 10px; height: 10px; content: ""; display: inline-block; vertical-align: middle;  border-top: 2px solid #333; border-right: 2px solid #333; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }
.special .active h3::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.special .special-wrap { max-height: 0; overflow: hidden; padding:0px;  }
.special.active .special-wrap { max-height: 10000px; }
  

/*table css*/
:root { --stickyBackground: #eee; --borderColor: #C9D1DC;}
.table-wrapper { width: auto; height: auto;  margin: 0px auto 30px 0px;  }
@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: 1rem;}
.datatable th, .datatable td { font-size: 1rem; 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:last-child td { border-bottom: none; border-right:none;}
*/
.datatable tr:nth-child(even) {background-color: #f5f5f5; }



/*STICKY ROW Normal css box-shadow works for the header as it is a single html element*/
.datatable tr.sticky { color: #000;  font-weight: 700; position: sticky;  top: 0;  z-index: 1;background: var(--stickyBackground); box-shadow: 0 0 6px rgba(0,0,0,0.25);}
/*STICKY COLUMN Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.*/
.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; }
}


.shop-cart-model {
  width: 460px;
  min-width: 300px;
  border-top: 40px solid #dae24a;
  border-radius: 24px;
  padding: 40px 0 40px;
  background-color: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.shop-cart-model .shop-cart-content {
  margin-bottom: 40px;
}
.shop-cart-model .shop-cart-content .shop-cart-pic {
  width: 114px;
  margin-left: 32px;
}
.shop-cart-model .shop-cart-content .shop-cart-pic img {
  width: 100%;
}
.shop-cart-model .shop-cart-content .cart-model-txt p {
  font-size: 18px;
  color: #000;
  line-height: 1.5;
  margin-left: 1.3333em;
}
.shop-cart-model .shop-cart-content .cart-model-del {
  width: 24px;
  margin-left: auto;
  margin-right: 3rem;
}
.shop-cart-model .shop-cart-content .cart-model-del img {
  width: 100%;
}
.shop-cart-model .cart-model-title {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.shop-cart-model .cart-model-title > p {
  text-align: center;
  font-size: 16px;
  color: #000;
}
.shop-cart-model .cart-model-btn {
  width: 40%;
  font-size: 20px;
  color: #000;
  margin: 0px 20px;
  background-color: #dae24a;
  border-radius: 50px;
  #display: block;
}