/*main { background-image:linear-gradient(180deg, #fff 0%, #fcfbf6 100%); }  */
main{position: relative;  width: 100%;  display: flex; flex-wrap: wrap;  background-image: linear-gradient(180deg, #fff 0%, #fcf9f5 100%)  }
.cms-main-content {width:96%;margin: auto; }
.cms-title-holder { position: relative;  width: 100%; border:solid 1px #fff; z-index: 1;}
.cms-title-holder .cms-main-breads{ width: 96%; margin: 0 auto; justify-content: flex-start;}
.cms-title-holder .cms-main-breads .breadcrumb{width: 100%; max-width: 1400px;  justify-content: flex-start;}
/*----------------------------------------/
product-show banner  
----------------------------------------*/
.cms-product-banner { width:100%; height: 100%; padding: 0; margin:0px auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; flex-direction: row; z-index: 0; line-height: 2.5em; vertical-align: top;  overflow: hidden;position: relative; }
.cms-product-banner-img{width: 100%;  position: relative; top: 0%; margin-top: 0px; z-index: 0;}
.cms-product-banner-img img{width: 100%; max-width: 100%; display: block;}

/*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
/* cms-product-cate -----------------*/
.cms-product-cate { width:100%; max-width: 1400px; margin: 5% auto; display: flex; flex-wrap: wrap; justify-content: center;   position: relative;}
.cms-product-cate li{  width:calc(100%/2 - 30px); margin: 30px 15px; padding:0px 15px;  position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start; background-image:linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 100%); border-radius:100px 0px 100px 0px;  transition: 0.3s;  border:solid 2px #fff;box-shadow: 0px 5px 8px rgba(236,221,206,.2); }
.cms-product-cate li:before{ content: "";  width: 100px; height: 100px; position: absolute; right: 0px; bottom: 0px; border-radius:100px 0px 100px 0px; background-color: transparent;  }

.cms-product-cate li:after { position: absolute; transition: 0.3s; content: "";  width: 0; left: 0%; bottom: 0; height: 0%; }
.cms-product-cate li:hover:after { width: 100%;height: 100%; left:0; border-radius:100px 0px 100px 0px;   border:solid 2px #ff828b; }
 .cms-product-cate li:nth-child(1):before{background-color: #e5d7c6;}
.cms-product-cate li:nth-child(2):before{background-color: #a9c89e;}
.cms-product-cate li:nth-child(3):before{background-color: #e4bfa0;}
.cms-product-cate li:nth-child(4):before{background-color: #ff8885;}

.cms-product-cate li:nth-child(1){ background-image:linear-gradient(180deg, #eedcc3 0%, #fff9f0 100%); }
.cms-product-cate li:nth-child(2){ background-image:linear-gradient(180deg, #b5d4ab 0%, #fff9f0 100%); }
.cms-product-cate li:nth-child(3){ background-image:linear-gradient(180deg, #e4bb99 0%, #f7f2e7 100%); }
.cms-product-cate li:nth-child(4){ background-image:linear-gradient(180deg, #ffbaba 0%, #f7f2e7 100%); }
 
.cms-product-cate li figure{ width: 50%;padding: 30px;  }
.cms-product-cate li figure img{ width: 100%; max-width: 80%; height: auto; margin: auto; position: relative;z-index: 1; }
.cms-product-cate li figcaption { width:45%; margin-left: 5%; margin-top:5%;   z-index: 9; position: relative;  display: flex; flex-wrap: wrap;  justify-content: flex-start; align-content: flex-start;  align-items: flex-start;flex-direction: column; }
.cms-product-cate li figcaption .cms-bg{background:#fff;padding: 20px;  box-shadow: 3px 5px 8px rgba(0,0,0,.2); }
.cms-product-cate li:nth-child(1) h3{ color:#795735;  }
.cms-product-cate li:nth-child(1) p{ color:#a98867;  }
.cms-product-cate li:nth-child(2) h3{ color:#4f6b46;  }
#cms-main .cms-product-cate li:nth-child(2) p{ color:#5b864d;  }
.cms-product-cate li:nth-child(3) h3{ color:#a7652e;  }
#cms-main .cms-product-cate li:nth-child(3) p{ color:#9c6c43;  }
.cms-product-cate li:nth-child(4) h3{ color:#e94949;  }
#cms-main .cms-product-cate li:nth-child(4) p{ color:#ca7775;  }


.cms-product-cate h3{  display: flex; font-size: 2rem; font-weight: 400; position: relative; z-index: 1; color:#000;  overflow: hidden; transition: 0.3s;  }
.cms-product-cate h3:hover{ color:#de0a06;   }
.cms-product-cate h3:after { position: absolute; transition: 0.3s; content: "";  width: 0; left: 0%; bottom: 0; height: 3px; background: #de0a06;}
.cms-product-cate h3:hover:after { width: 100%; left: 0;}

#cms-main .cms-product-cate p{ margin:20px 0px;  font-size: 1rem; line-height: 1.65rem;  overflow: hidden;  }
#cms-main .cms-product-cate li figcaption a.cms-btn-02{margin-left:0; }
.bg-circle {  position: absolute; width:50%; height: 100%;overflow: hidden; z-index: 0;  border-radius:  99rem; background-image:linear-gradient(180deg, #f8f8f8 0%, #fff 100%);   }

@media (max-width:1024px) {
.cms-product-cate{  padding: 0px; margin:15px auto!important;   }
 .cms-product-cate li figure{ width: 50%; margin:15px auto;  padding:   0px;  }
.bg-circle { width:50%; height: 80%; margin-top: 5%;  }    
}

@media (max-width: 991.98px) {
     
.cms-product-cate li{ width:calc(100%/2 - 40px);  justify-content:center; margin:20px auto;  padding:0px 15px; }
.cms-product-cate li figure{ width: 100%;margin:15px auto;  padding:0px 30px;  }
.cms-product-cate li figcaption { width:100%; margin-top:-10%;  margin-left:auto;  padding:15px;  }
.cms-product-cate li .bg-circle{ width:80%; height:50%; margin: 5% auto auto auto; }
}
 
@media (max-width: 420px) {
    .cms-product-cate li{ width:calc(100% - 40px); } 
.bg-circle {position: absolute; width:100%; height: 50%;overflow: hidden; z-index: 0;}    
}
 
@keyframes opacity {
0% { opacity: 1 }
65% { opacity: .5 }
to { opacity: 1 }
}
@keyframes bg-circle {
0% { transform: translateZ(0)   }
10% {transform: translate(0%, -10%) translate3d(0px, 50px, 0px); }
25% { transform:translate(0%, -18%) translate3d(0px, 0px, 0px);   }
50% {  transform: translate(0%, -20%) translate3d(0px, 0px, 0px); }
70% { transform: translate(0%, -10%) translate3d(0px, 0px, 0px);    }
to {  transform: translate(0%, -5%) translate3d(0px, 0px, 0px); }
}
 
/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product { width: 100%; padding:20px 15px 40px 15px; margin:auto; position: relative;  }
.cms-main-product-item { width:100%;  margin:0px;  padding:0px; display: flex; flex-wrap: wrap;   list-style: none; position: relative; z-index: 0;}
.cms-main-product-item li { width: calc(100% / 4); margin:0px; padding: 15px 0px;  display: flex; flex-wrap: wrap;  position: relative; transition: all 0.3s linear 0s; z-index:0; border-top: 1px solid #fdb9b9;border-bottom: 1px solid #fdb9b9;
    border-left: 1px solid #fdb9b9; -webkit-box-sizing: border-box;  box-sizing: border-box; background: #fff; }
.cms-main-product-item li:nth-child(4n){ border-right: 1px solid #fdb9b9;}
.cms-main-product-item li:hover { transform: scale(1.1); -webkit-transform: translate3d(0,-10,0);transform: translate3d(0,-10px,0);  }
.cms-main-product-item li a{ display: flex; flex-wrap: wrap; justify-content:center;}
.cms-main-product-item li a figure { position: relative; width:100%; max-width: 60%;   height: auto;  margin-bottom: 20px;  transition: all 0.5s ease 0s; }
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%;display: block; margin: auto; transition: all 0.3s; -webkit-transform: translate3d(0,0px,0);transform: translate3d(0px,0px,0px);  }
/*.cms-main-product-item li:hover figure img {  transform: scale(1.1);   }*/
#cms-main .cms-main-product-item li a h3{ margin:15px auto ; padding: 5px;  width: 100%; max-height:42px;  font-size:1.125rem; font-weight:400;color: #000;  text-align: center;  overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li a p{ width: 100%; margin: 0 10px; padding:0px 5px; font-size:0.875rem; line-height: 1.5rem; color:#6c7280; text-align: left; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li a span.cms-main-product-unit{  margin: 0 10px; padding:0px 5px; font-size:0.75rem; line-height: 1.5rem; color:#6c7280; text-align: right; border: solid 1px #6c7280; border-radius:5px;  overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical; }
.cms-main-product-item li a span.cms-main-product-price{ display: flex; justify-content: center; margin:0px auto;font-size:1rem; color:#000;  font-weight: 700; }
.cms-main-product-item li a span.cms-main-product-price-origin{ display: flex; justify-content: center; margin:0px auto;font-size:.85rem; color:#717171;  font-weight: 700;text-decoration: line-through; }
.cms-main-product-note { position: absolute; top:0px; left: 0; width:auto; height: auto; padding: 5px 15px;font-size:0.9375rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; border-radius:0px 0px 15px 0px;   }
.cms-main-product-note.cms-main-product-note-sale {  color: #fff; background:#cc3333; }
.cms-main-product-note.cms-main-product-note-stock { color: #fff; background:#ff9900; }
.cms-main-product-item .slick-current {  }	
.cms-main-product-item .slick-dots {bottom:-30px;  }	
.cms-main-product-item .slick-prev { left:0; z-index: 11; }
.cms-main-product-item .slick-next { right:10px; z-index: 11; }
@media (max-width: 768px) {
.cms-main-product-item li { width: calc(100% / 2 - 10px); margin: 0px 5px;   }
 .cms-main-product-item li:nth-child(2n){ border-right: 1px solid #fdb9b9;}

}
 
/*----------------------------------------/
btn區塊
----------------------------------------*/
 
 .cms-product-group{width: 100%; margin-top: 2%; display: flex; flex-wrap: wrap; justify-content: center; }
 #cms-main .cms-product-group .btn{ width: 30.333%;margin:4% 1%; }
 #cms-main .cms-product-group a.btn { color:#797371;}

/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.cms-main-product-wrapper {  display: flex;  flex-wrap: wrap; justify-content: center;  width: 100%; margin:auto; padding: 0px 15px; }
 @media (min-width: 1200px) {
.cms-main-product-wrapper {  padding-right: 40px; padding-left: 40px; max-width: 1200px; margin: auto; }
 }
@media (min-width: 1400px) {
.cms-main-product-wrapper { max-width: 1400px; }
 }
.cms-main-product-wrapper .cms-main-breads .breadcrumb { padding: 10px 0px;}
.section1{padding: 50px 0px; flex-direction: row-reverse;}
.section2 {  background-image: linear-gradient(to top, #fff 0%, #f5f5f5 100%);}
.section3 {   background-image: linear-gradient(to top, #fff 0%, #f5f5f5 100%);}

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.cms-main-product-left{width:50%; padding-left: 5%; display: flex;  flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.cms-main-product-right{ width:45%; padding-right: 5%;  margin-bottom: 15px;  overflow: hidden;  display: flex;  flex-wrap: wrap; flex-direction: row-reverse;  }
.cms-main-product-left .cms-social-icons{justify-content: center;align-content: center; align-items: center; font-size: 0.875rem;}
.swiper-container { width: 100%; height: 100%; position: relative;z-index: 0;  }
.swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: flex-start; -ms-flex-align:flex-start; -webkit-align-items:flex-start; align-items: flex-start;}
.swiper-slide img { display: block; width: 100%;  height: auto;  object-fit: cover;}
.swiper-container { width: 100%; height: auto;  margin-left: auto; margin-right: auto; }
.swiper-slide { background-size: cover; background-position: center; }
.cms-slider-for{ width:85%; }
.cms-slider-for .swiper-slide {width: 100%; height:auto!important;   }

.cms-slider-nav { width:15%; height:auto; box-sizing: border-box; padding: 10px 0; }
.cms-slider-nav .swiper-slide {width: 100%; height:auto!important;  margin:0px; padding: 0px; opacity: 0.5;  overflow: hidden; }
.cms-slider-nav .swiper-slide img{width: 100%; height:auto;  margin:10px 0px; padding: 0px; }
.cms-slider-nav .swiper-slide-thumb-active { opacity: 1; border: solid 1px #184598;}
 
 
@media (max-width: 991.98px) {
.cms-main-product-left,.cms-main-product-right{width: 100%;padding:0px;  }
.cms-main-product-left{order: 1; padding: 0px 15px;}
.cms-main-product-right{ order: 0; } 
.cms-slider-for{ width:80%; height: 100%; }
 .cms-slider-nav { width:20%;  }
   
}

 

.cms-main-product-info{ width:100%; margin: 0px; padding:0px;}
#cms-main .cms-main-product-info h1{   padding:0px;width: 100%; display: flex; justify-content: flex-start; font-size:2rem; font-weight: 400; color:#000; position: relative; word-spacing: normal; word-break:normal; }
#cms-main .cms-main-product-info h3{  width: 100%; margin-top: 30px; font-size:1.15rem; font-weight: 400; color:#6a6a6a;  word-spacing: normal; word-break:normal; }
#cms-main .cms-main-product-info p{  width: 100%; margin-bottom: 15px; font-size:0.9375rem; font-weight: 400; color:#404040;  word-spacing: normal; word-break:normal; }
.cms-product-description{ padding:15px 0px; border-bottom: solid 1px #eee;border-top: solid 1px #eee;}
#cms-main .cms-product-description p {margin-bottom: 15px; font-size:0.9375rem; color: #98979d;}
#cms-main .cms-product-description ul{width: 100%; margin: auto 0; padding: 0px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; }
#cms-main .cms-product-description ul li{width: 100%;margin:4px 10px; padding: 0px;font-size:0.95rem; line-height: 1.75rem; list-style: none;}
#cms-main .cms-product-description ul li span.cms-item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#797979;  font-size:0.85rem;}
#cms-main .cms-product-description p strong{color:#000;}
.cms-main-product-info del{color: #98979d;} 
.cms-main-product-info .cms-sale { font-size:1.313rem;  font-weight:700; color:#000;  }
.cms-main-product-info .cms-sale b{ margin-left: 5px; font-size:1.313rem; font-weight:400;   }
.cms-badge-tag{ padding: 5px 15px;  font-size: 0.875rem;  color:#5b3932;; background: #eae6dd;  border-right: 1px dashed #5b3932; border-left: 1px dashed #5b3932; }
.cms-store { display:flex;  flex-wrap: wrap; }
.cms-store img{ display:flex;width: auto; height: 20px; margin: 5px; }
.cms-product-marker { margin:15px 0px; border-top: 1px solid #e2e2e2; width: 100%;}
@media (max-width: 991.98px) {
.cms-main-product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
.cms-main-product-info{  padding:0px; border:none; }    
}
/*----------------------------------------/
顏色規格
----------------------------------------*/
.cms-color-group{ width: 100%; display: flex; flex-wrap: wrap;color: #4a4e5c;}
.cms-item-color{ width: calc(100% / 5 - 40px); margin: 10px 5px; }
.cms-selected-color{color: #4a4e5c;}
#cms-main .cms-color-group p{width: 100%; display: block; color:#b5b6ba;}

 /*----------------------------------------/
social-icons
----------------------------------------*/
#cms-main  .cms-social-icons{color:#bfa3a3;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center;  font-size:1rem;  }
#cms-main  .cms-social-icons i{color:#bfa3a3; font-size:1.3rem;   }
#cms-main  .cms-social-icons li{ width: auto!important; margin:5px; padding-top: 8px;  }
#cms-main  .cms-social-icons li a{ opacity:1;font-size:0!important;color:#ff8282!important;  }
 

.cms-spec-description{ padding:5px; }
#cms-main .cms-spec-description p {margin-bottom: 15px; font-size:1rem; color: #98979d;}
#cms-main .cms-spec-description ul{width: 100%; margin:0; padding: 0px; }
.cms-item-title{ width: 10%;padding-left: 10px; display: inline-block; color:#797979; letter-spacing: 1px;  }
@media (max-width:768px) {
.cms-item-title{ width: auto; padding-right: 20px; }
}


.cms-item-title strong{color:#ff8282; margin-right: 10px;}
.datatable{ width: 100%;}
.datatable tr{ width: 100%; border-bottom: solid 1px #f5f5f5;}
.datatable th{ color: #184598  }
 
 /*----------------------------------------/
tab
----------------------------------------*/
#cms-tabs-product .resp-tabs-list{ width: 100%;  max-width: 1400px;  margin: auto; justify-content:center;background: none;  border-bottom: 2px solid #f3dacb;}
#cms-tabs-product .resp-tabs-list li {  width:calc(100%/4 - 30px);  margin: 0px; padding: 0px 20px; justify-content: center; background-color:transparent!important; }
#cms-tabs-product .resp-tab-active { color: #e94949!important; font-weight: 700;  border-bottom: solid 2px #e94949!important;  }
#cms-tabs-product .resp-tab-active a { color: #e94949!important;    }
#cms-tabs-product .resp-tabs-container { max-width: 1400px; margin: auto; }
#cms-tabs-product .resp-tab-content { padding:30px 0px ;}
.resp-tab-content h4{ margin:2% 0;  font-size: 1.15rem; font-weight: 700; }
#cms-main .resp-tab-content p{ margin:1% auto; font-size: 1rem; font-weight: 400;  }
 
.edit {display: block; width: 100%; max-width:960px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}

#cms-main .edit h3{ display: flex; justify-content: center;width: 100%; max-width:680px;  margin:15px auto!important; color:#333;font-size:1.5rem;  font-weight: 700;  }
#cms-main .edit h4{  width: 100%;  margin:15px auto!important; color:#333;font-size:1.35rem;  font-weight: 300;  }

 
@media (max-width:768px) {
 #cms-tabs-product .resp-tabs-list{ width: 100%; }  
#cms-tabs-product .resp-tabs-list li {  width:calc(100%/3 - 30px);  margin: 0px 15px; padding: 0px 20px; word-break: keep-all;  word-wrap: break-word;}

}
/*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{  width: 100%; max-width: 1200px; height: auto!important;   margin:0 auto; padding:0px 20px; overflow: hidden; }
.cms-best-wrap .cms-main-product-item {   max-height: 500px!important;   padding:0px;  margin:0px; }
.cms-best-wrap .cms-main-product-item li {width: 100%; position: relative; transition: all 0.3s linear 0s; z-index: 1; border: solid 1px #fdb9b9}
.cms-best-wrap .slick-dots li button:before{ color: #fff; }
.cms-best-wrap .slick-dots li.slick-active button:before { opacity: .75; color: #fff; }
.cms-best-wrap .slick-dots {bottom:-30px;}
.cms-best-wrap .cms-main-product-item .slick-prev { left:0; top:40%;}
.cms-best-wrap .cms-main-product-item .slick-next { right:0px; top:40%;}