.product-area{ position: relative; padding: 20px 0px;  width: 100%; display: flex; flex-wrap: wrap;   background: #fff;   }
  
 /*----------------------------------------/
產品總覽頁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;  }
 /*---------------*/
/***** 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: 767.98px) {
 figure.effect-bubba h2 { margin-top: 75%;  }
}

/*----------------------------------------/
filter-section
----------------------------------------*/
 .filter-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 48px; padding-top: 22px;padding-bottom: 22px; border-bottom: 1px solid #e5ebee; color: #1d1d1f;}
.filter-section .compare-title{width: 10%;color:#000; font-weight: 700; letter-spacing: 2px;}
.filter-section .select-type{width: 80%}
.filter-section .compare-btn{width: 10%; padding: 0px 10px;}
.filter-section .compare-btn .button { margin:auto; padding: 15px;border-radius:5px; border:none; color: #fff; background-color: #000; font-size: 14px; line-height: 1.2857742857; font-weight: 700; letter-spacing:2px; }

.select-type{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between}
.select-type .compare-row { width: calc(100%/3 - 15px ); }  
.select-type select { width: 100%;height: 50px; margin-bottom: 0px; padding: 0 30px 0 10px;  background: url(../images/index/product-select.png)  no-repeat 100% 17px #fff; background-size: auto;  -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size:0.9rem; color: #555555;letter-spacing: 0.05rem; border-radius:5px; border:solid 1px #e5ebee;}
.select-type select:hover{ border:solid 1px #000;}

@media (max-width: 1120px) {
.filter-section .compare-title{width:8%; }
.filter-section .compare-btn{width: 12%;  }	
}
@media (max-width:840px) {
.filter-section .compare-title{width:10%; }
.filter-section .select-type{width: 74%}
.filter-section .compare-btn{width: 16%;}	
}

@media (max-width:767.98px) {
.filter-section .compare-title{width:100%;margin-bottom: 10px; text-align: center;}
.filter-section .select-type{width: 100%;margin-bottom: 10px;}
.filter-section .compare-btn{width: 100%;padding: 0px; }	
.filter-section .compare-btn .button { width: 100%; }
.select-type .compare-row { width: calc(100%/2 - 15px );margin: 5px auto;}  
.select-type .compare-row:first-child{width: calc(100% - 15px );}	
}

 
.brand{width: 100%; border-radius:15px;background-image: linear-gradient(to top, #cfd9df 0%, #f4f5f5 100%);  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2);  }
.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);} 	
.brand-list li a h3 { letter-spacing: 0; }        	
}
@media (max-width:320px) {
.brand-list li{width:calc(100%/3 - 20px); } 	
}




/*----------------------------------------/
產品清單頁  cms-product-item  
----------------------------------------*/
.main-product { width: 100%; padding:50px 0px;  margin:0px;   }
.product-item { width:100%; height: auto;  margin:0px auto;  padding:20px 0px;  display: flex; flex-wrap: wrap;   }
.product-item li { width: calc(100%/4 - 20px); margin:0px 10px 30px 10px; padding:10px; 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 { /*transform: scale3d(1.01, 1.01, 1.01); */ }
.product-item li:hover .item{ /*transform: scale3d(1.01, 1.01, 1.01);*/ 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%);}
 @media (max-width: 840px) {
.product-item li { width: calc(100% /3 - 20px); margin: 10px; padding: 0px;   }	
}
 @media (max-width:767.98px) {
.product-item li { width: calc(100% /2 - 20px); margin: 10px; padding: 0px;}
.product-item li .inner{height: auto;min-height:auto; }	 
.product-item li .inner h3{width: 100%;min-height: 60px;	}
}
 @media (max-width: 320px) {
.product-item li { width: calc(100%  - 10px); margin: 10px auto; padding: 0px;   }
}

 

.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%  }
}
 
@-webkit-keyframes pulse3 {
0% { box-shadow:0 0 0 0 rgba(230,0,19,.6) }
to { box-shadow:0 0 0 20px rgba(230,0,19,0) }
}
 

.products-top { position: relative; max-width: 1004px; margin: 0 auto 80px auto; line-height: 0;}

.pro-btn1 { top:22%; left: auto; right: 38%; bottom: auto;}
.pro-btn2 { top:22%; left: auto; right: 55%; bottom: auto;}
.pro-btn3 { top:37%; left: auto; right: 47%; bottom: auto;}
.pro-btn4 { top:auto; left: 8%; right: auto; bottom: 28%;}

.pro-btn5 { top:auto; left: auto; right:28%;  bottom:28%;}
.pro-btn6 { top:22%; left: 25%; right: auto; bottom: auto;}
.pro-btn7 { top:28%; left: auto; right: 28%;  bottom: auto;}
.pro-btn8 { top:auto; left: auto; right: 47%; bottom:28%;}
 

.pro-btn > span.v-line { display: inline-block; position: relative;}
.pro-btn > span.v-line:before, .pro-btn > span.v-line:after { width: 17px; height: 1px; background: #fff; content: ""; position: absolute; top:50%; left: 50%;}
.pro-btn > span.v-line:after { transform: rotate(90deg);}

.pro-btn { width: 36px; height:36px; background:#000; border-radius: 100%; position: absolute; cursor: pointer; padding:10px 0 0 9px; }
.pro-btn:after { position: absolute;display: block;content: "";width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 50%;animation: pulse3 1s 0s infinite both;}


 
.pro-line { position: absolute; width: 1px; height: 100px; left: calc(50% - 1px); top:-100px; display: inline-block; background: #000;}
.pro-name { position: absolute; width: 120px; height: 24px; text-align: center; color: #fff; font-size: 14px; font-weight: 400;line-height: 1.275rem; background: #333; letter-spacing: 0.1rem; top:-115px; left: calc(50% - 60px);}
.pro-line2 { top:35px;}
.pro-name2 { top:135px;}


.pro-list { width: 100%; margin:10px auto;padding: 8px;  margin-bottom: 60px; border-radius: 18px; background-image: -webkit-linear-gradient(bottom, #f5f5f7, #ece8e8) }
.pro-list-pto {width: 100%; margin: auto;padding: 8px;   position: relative;  overflow: hidden;  border-radius: 18px; }
.pro-list-pto  iframe{ overflow: hidden;  border-radius: 18px;}
 
.pro-list-pto img { transition: all 0.4s ease-out 0s;border-radius:18px;  width: 100%;}
.pro-list-name {  margin-top: 10px; padding: 10px 14px 12px 14px; font-size: 1.125rem; font-weight: 400; color:#1d1d1f; letter-spacing: 3px;transition: all 0.4s ease-out 0s; position: relative; z-index: 2; line-height: 130%;}
.pro-list-name:before { content: ""; position: absolute; width: 50px; height: 2px; background: #56565c; left: 14px; top:0;transition: all 0.4s ease-out 0s;}

@media (max-width:992px) {
.pro-btn6 { left: 23%;  }	  
}

@media (max-width:768px) {
.pro-name { width: 100px; }
}
@media (max-width:767.98px) {
.pro-list {    margin-bottom: 20px  }	
.pro-btn {  transform: scale(.6)}
.pro-btn4 { left: 4%;  }	
.pro-btn6 { left: 18%;  }	  	
}
@media (max-width:320px) {
.pro-name { width: 62px; }
}

/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.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;  }
@media (max-width: 768px) {
.product-left{width:100%;  }
.product-right{ width:100% ;   }
}

.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: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; }
 
.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;}
/*----------------------------------------/
 敘述區塊
----------------------------------------*/
.date-range{ position: relative; width: 100%; margin: 15px 0px;}
.date-range .tag-cate{ position: relative; top:auto; left: auto; padding:0px 5px;  width:46px; height:32px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; border-radius: 18px 0px 18px 0px ; z-index: 11; }

.date-box { position: relative; width: 100%; height:auto; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; z-index: 11; }
.date-box-number{ margin-left: -20px; padding: 4px 40px 4px 40px;  color: #fff; font-weight: 700; background-color:#b64400;   border-radius: 18px 0px 18px 0px ;    }
/*----------------------------------------/
 敘述區塊
----------------------------------------*/
.product-description{ width: 100%; padding:15px 0px; border-bottom: solid 1px #eee; }
.product-description p strong{color:#000;}
.way-box{ width: 100%; padding:15px 0px; display: flex; flex-wrap: wrap;  }
.way-delivery{ display: flex; margin: 6px 5px 6px 0px;  padding: 12px 16px;  background-color: #edf1f4; border-radius: 18px; color: #1d1d1f;  font-size: 12px;  font-weight: 400; line-height: 1.3333733333; text-decoration: none;}
.way-delivery-txt{ font-size:0.875rem; font-size: min(max(2vw, .75rem), 0.875rem); font-weight: 400; color:#958484;  letter-spacing:2px; }
.badge-tag{ font-size:0.875rem; font-size: min(max(2vw, .75rem), 0.875rem); font-weight:700; line-height: 1.3333733333;  margin: auto 0;  padding: 2px 16px 2px 0px; text-decoration: none;/*background-color: #f5f5f7;  border-radius: 18px; */color: #1d1d1f; }
.way-wrap{ display: flex; flex-wrap: wrap; align-content: flex-start}
.way-wrap .way-delivery-txt{width: calc(100% - 20%); padding-left: 10px;}
.way-wrap .badge-tag{  padding-right: 10px;border-right: solid 1px #eee}

/*----------------------------------------/
 促銷
----------------------------------------*/
.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: 0.875rem; font-size: min(max(2vw, .75rem), .875rem);font-weight: 400;  }
.label{ width: 70%; padding:5px 10px; font-size: 0.875rem;font-size: min(max(2vw, .75rem), .875rem); font-weight: 400; }
.label a{color:#1d1d1f; padding:5px 10px; margin: 0px 5px; border-radius:12px;  color: #fff; background: #1d1d1f; border: solid 1px #1d1d1f; }
.ticket{  padding:0px 10px;font-size: 0.875rem;font-size: min(max(2vw, .75rem), .875rem);font-weight: 700;  background: #f5f5f7;}
@media (max-width: 768px) {
.promotion{ padding:5px 0px;}
.label{ width: 100%; padding:0px;  margin-top:10px; }
.ticket{ padding:0px 10px 0px 0px;  }
}
/*----------------------------------------/
產品規格
----------------------------------------*/
.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;}
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%; max-width:90%; 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: calc(100%/3); }
@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: 'Kanit', sans-serif; }
.price-orig { text-decoration:line-through; color:#969391; font-family: 'Kanit', sans-serif; }
.price-sale { margin-left: 20px; font-size:1.25rem; font-weight:bold;color:#b64400;font-family: 'Kanit', sans-serif;  } 
.spec-panel {width: 100%;max-width: 50%;margin:10px 0px ;}
.spec-panel > div { margin:10px 0px; }
.spec-group button { width:auto;min-width: 2.5rem;  margin:2px 2px 10px 2px; padding:3px 5px!important; font-size:0.875rem; color:#333; background-color:transparent; border: solid 1px #000; border-radius:0px;}
.spec-group button.active { color:#fff; background-color:#c30d25;  border: solid 1px #c30d25; }
.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:980px;   }
.product-group button:disabled { color:gray; background-color:lightgray; }
.product-group button.btn-secondary {background-color:transparent;  border-color:#c30d25;color:#c30d25; display: flex; justify-content: center; flex-wrap: nowrap;  }
.product-group button.btn-buynow  { background:#c30d25; border:solid 1px #c30d25;}
.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:#c30d25; 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;}    
}


/*---------------------------------
special
----------------------------------------*/
.special{ margin-top: 10px; width:100%;}
.special h3 {width:100%; margin:10px 0px; padding:10px 0px 10px 20px; font-size:1rem;  color:#c30d25; font-weight:400;  border-bottom: dashed 1px #c30d25;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 #c30d25; border-right: 2px solid #c30d25; -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); }
 

.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:#1d1d1f; font-family: 'Kanit', sans-serif; }

.spec-group{width: 100%;   }
.spec-group-title { width: auto; display: flex;   margin:0px; padding: 25px 0px 15px 0px; font-weight: 700; letter-spacing: 2px;}
.spec-group-title span{ width: auto; margin-bottom: 10px; font-size: 1.25rem; color:#1d1d1f; 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 #bdb3b4;}
#cms-tabs-product .resp-tabs-list li { width:auto; margin:0px 25px;padding-bottom: 0px; font-size: 1.125rem;  font-weight: 500; color: #86868b; letter-spacing:4px;}
@media (max-width: 767.98px) {
#cms-tabs-product .resp-tabs-list{ margin-top: 0px!important;}
#cms-tabs-product .resp-tabs-list li { margin: 0px 5px 0px 0px;  font-size: 0.9rem; }
 .title-2{padding-top: 0px;}	
}

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

#cms-tabs-product .resp-tab-active { color:#1d1d1f!important; position: relative; }
#cms-tabs-product .resp-tab-active:after { content: ""; position: absolute;left:0px;bottom:0px; width: 100%; height: 2px; background:#e50113; }
#cms-tabs-product .resp-tab-active a {   }
#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 { margin:1% auto; font-size: 0.9rem; font-weight: 400; }
.edit .edit-description strong{  color:#1d1d1f; font-weight: 700;   }
.edit-box  { display: grid; grid-template-columns: repeat(4, 1fr);   grid-gap: 20px; width: 100%;}
.edit-card { height: 250px; display: flex; justify-content: center; align-items: center;}

.feature { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:50px; width: 100%; margin: 10% auto}
.feature .info {  display: flex; flex-wrap: wrap;  align-content: flex-start;flex-direction: row; justify-content: center; align-items: center; border: solid 1px #1d1d1f; border-radius: 18px;/*background-color: #f6f6f8*/ }
@media (max-width: 768px) {
.edit-box  {  grid-template-columns: repeat(2, 1fr);  }
.edit-card { height: auto; flex-direction: column ; justify-content: flex-start;}
.feature { grid-template-columns: repeat(1, 1fr); grid-gap:50px; }	  
}
 

/*---------------------------------
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);}


 
/*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; }
}