﻿.cms-main-content:before {  content:"";  background: url("../images/index/left-leaf.png") no-repeat 0 0; background-size:300px auto;  width: 300px; height:313px; position: absolute; z-index: 9; left: -120px;  top:-120px; animation-delay:2s; animation:style1 4s ease 1 both;}
.cms-main-content:after {  content:"";  background: url("../images/index/right-line-1.png") no-repeat 0 0; background-size:300px auto;  width: 300px; height:800px; position: absolute; z-index: -1; right: -30px;  top:0px; animation-delay:2s; animation:style1 4s ease 1 both;}
@keyframes style1 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-left: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}
@-webkit-keyframes style1 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-left: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}
@keyframes style2 {
0% {  margin-right: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-right:-60px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}
@-webkit-keyframes style2 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-right: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}

@media (max-width: 1440px) {
.cms-main-content:before { left: -120px;  background-size:280px auto;  width: 280px; height:318px; }
}
@media (max-width: 1400px) {
.cms-main-content:before { left: -80px; top:-20px; background-size:230px auto;  width: 230px; height:260px; }
.cms-main-content:after {   }
}
@media (max-width: 767.98px) {
.cms-main-content:before { left: -80px;  background-size:180px auto;  width: 180px; height:204px; }
.cms-main-content:after {   }
}
.product_list {background: url("../images/index/bg-main.jpg") no-repeat right bottom #fff; background-size: 100% auto;}
.product_list .cms-main-content{background: unset;min-height: 900px;}
 
/*----------------------------------------/
產品總覽頁Product
----------------------------------------*/

/* cms-product-cate -----------------*/
#cms-main .cms-product-cate { width:100%;   margin: 5% auto; }
#cms-main .cms-product-cate li{margin: 5rem auto; padding:0px;  position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;list-style: none; }
#cms-main .cms-product-cate li figure{ width: 55%; position: relative;    }
#cms-main .cms-product-cate li figcaption { width: 50%;  position: relative; z-index: 10; margin-left:-5%;   padding: 50px 40px 55px;  background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
#cms-main .cms-product-cate .cms-product-cate-num { font-size: 60px; color:#d4d4d4;  font-style: italic; line-height: 1; letter-spacing: 2px; position: absolute; top: -35px; right: 40px;}
#cms-main .cms-product-cate h3{ font-size: 30px; font-weight: 700!important; color: #005a0d;}
.cms-product-cate h3 { width:100%;  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content:center;  -ms-flex-pack: center; justify-content: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;  }
.cms-product-cate h3::before,.cms-product-cate h3::after{  content: ''; width: 50px;  height: 1px; background: #005a0d;  }
.cms-product-cate h3::before { margin-right: 30px}
.cms-product-cate h3::after { margin-left: 30px}
#cms-main .cms-product-cate li figcaption p{ margin:30px 15px; height:6rem;   font-size: 1rem; line-height: 2rem; text-align: justify; overflow: hidden; text-overflow: ellipsis; text-overflow: initial; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}
#cms-main .cms-product-cate li:nth-child(even){ flex-direction: row-reverse; }
#cms-main .cms-product-cate li:nth-child(even) figcaption { margin-right:-5%; }
#cms-main .cms-product-cate li:last-child{ margin: 5rem auto 10rem auto;  }

@media (max-width: 1300px) {
#cms-main .cms-product-cate li:last-child{ margin: 5rem auto 8rem auto;  }
}
@media (max-width: 991.98px) {
#cms-main .cms-product-cate li{ justify-content:center; margin:20px auto;  }
#cms-main .cms-product-cate li figure{ width: 100%;  }
#cms-main .cms-product-cate li figcaption { width: 100%; margin-left:auto; padding: 50px 40px 55px; }
#cms-main .cms-product-cate li:nth-child(even){  flex-direction: row; }
#cms-main .cms-product-cate li:nth-child(even) figcaption { margin-right:auto; }
}
 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product-item { width:100%;   margin: 5% auto;  display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;  }
.cms-main-product-item li{ width: calc(100%/4 - 40px); margin:40px 20px; padding:10px;list-style: none;  position: relative; transition: all 0.5s ease 0s; }
.cms-main-product-item li a{ display: flex;flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;     } 
.cms-main-product-item li a figure{padding-bottom: 20px; display: flex; justify-content: center;  }
.cms-main-product-item li a img{ width:100%; height: auto;  margin: auto; overflow: hidden;  transition: all 0.5s ease 0s; }
.cms-main-product-item li:hover{transform: scale(0.9); }
.cms-main-product-item li a h3{ margin: 0 auto 5px auto; font-size:1.15rem; font-weight: 400;  text-align: center; line-height:1.4rem; color:#003607; overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
.cms-main-product-item li a p{ margin: 0 auto 10px auto; font-size:0.875rem; color:#726A6A;line-height: 1.5;   text-align: center;  overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:1;  -webkit-box-orient: vertical; }
.cms-main-product-item li a p span{border: solid 1px #434997;}
.cms-main-product-item li a span.cms-main-product-price{ display: flex; justify-content: center;    margin: 0 auto 10px auto;font-size:1rem; color:#6971c7;  font-weight: 700; }
.cms-main-product-note { position: absolute; top:-50px; left: 0; width:138px; height: 100px;   font-size: 0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.cms-main-product-note.cms-main-product-note-sale {  color: #cc3333; padding:15px 0px 0px 50px; background: url("../images/icon/note.png") no-repeat left 10px;  background-size:46px 33px;}
.cms-main-product-note.cms-main-product-note-stock { color: #ff9900; padding:15px 0px 0px 50px; background: url("../images/icon/note-1.png") no-repeat left 10px;  background-size:46px 33px;}
 @media (max-width: 991.98px) {
.cms-main-product-item  li{  width: calc(100%/3 - 30px);  margin:40px 10px; padding:10px 5px; } 
}
@media (max-width: 575.98px) {
.cms-main-product-item li{  width: calc(100%/2 - 20px);  margin:40px 5px; padding:10px 0px; }
 
}
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
ul.cms-slider-for{ width: 100%;  height: auto; margin: 30px auto 0;  }
ul.cms-slider-nav{ width: 100%;  height: auto; margin: 30px auto;  }
ul.cms-slider-nav li{  opacity: .5; }
ul.cms-slider-nav li:focus{opacity: 1;}
ul.cms-slider-nav li.slick-current{opacity: 1;}
ul.cms-slider-nav li img{ width:80%; margin:15px; }
ul.cms-slider-nav .slick-dots {bottom:-20px;}
.cms-promotion { margin:10px auto 20px auto; padding:5px; font-size:0.875rem; font-weight:400; display: flex;  flex-wrap: wrap; border-top:3px solid #8b8471;border-right: 1px dashed #5b3932; border-left: 1px dashed #5b3932;border-bottom: 1px solid #8b8471; border-radius: 5px;}
.cms-promotion a{color:#5b3932;}
.cms-coupon{  margin:0px; padding:3px; color:#5b3932;   border-right: 1px solid #8b8471;}
.cms-label { width: 100%; display: flex; flex-wrap: wrap; padding:3px; }
#cms-main .cms-label a.cms-ticket{padding:0px 5px;  margin: 0 10px; color:#fff; border: solid 1px #e15f5f; background: #e15f5f;}
.prod_txtbox{width: 100%;}
.prod_btnbox{width: 100%;margin-bottom: 20px;}
@media only screen and (max-width:1024px){
}
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.cms-main-product-info{ width:100%;display: flex;flex-wrap: wrap;align-content: space-between;height: 100%;  }
.cms-main-product-info.cms-main-product-info .cms-title-h1{  margin: 5% 0 0 0;  padding:5vh 0px 0px 0px; display: flex; justify-content: flex-start; font-size:2rem; font-weight: 400; color:#3e3e3e; position: relative;  }
.cms-main-product-info.cms-main-product-info .cms-title-h1:before { content:""; background: url("../images/index/title-pro.png") no-repeat 0 0; background-size: auto 140px;  width: 100%; height:140px; position: absolute; z-index:1; right:0px;  top:0px;  }
.cms-main-product-info.cms-title-h1::after{ display: none; background:none; }
.cms-main-product-info p {margin-bottom: 30px; font-size:1rem;  line-height: 1.5em; font-weight:400; }
.cms-main-product-info .cms-sale { font-size: 2rem; font-weight:700; color:#990808; font-family: "Times New Roman", "serif";}
.cms-main-product-info .cms-sale b{ margin-left: 5px; font-size:0.875rem; font-weight:400; color:#990808; }
.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; }


@media (max-width: 767.98px) {
}
/*----------------------------------------/
產品規格
----------------------------------------*/
.cms-product-form-item{ }
.cms-product-form-item label{font-size:.95rem;font-weight:700!important; color:#212529;   }
.cms-option-radio { border: 0;  padding: 0;  margin: 0;  position: relative;}
.cms-option-radio input[type="radio"]+label{ border: solid 1px #677788;}
.cms-option-radio input[type="radio"]+label:before{ display: none;}
.cms-option-radio input[type=radio]:checked+label {  color:#fff!important;  border-color: #30315f; background: #30315f;}
.cms-option-radio label { position: relative;min-width: 40px;  height: 36px;display: inline-block; padding: 0 10px; margin: 3px 8px 7px 0; line-height:36px; background-color: rgba(113,134,157,.1);  color: #30315f;  background-position: center;  background-size: cover;   text-align: center; vertical-align: middle;}
.product-variation { cursor: pointer;font-size: 0.85rem; display: inline-block;  min-width: 5rem;  -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 .75rem; height: 2.125rem; line-height: 1;  margin: 0 8px 8px 0; color: rgba(0,0,0,.8); text-align: center; white-space: nowrap;  border-radius: 2px;  border: 1px solid rgba(0,0,0,.09); position: relative;  background: #fff; outline: 0;}
 .product-variation:hover{ border: 1px solid #990808; color: #990808;}
/*----------------------------------------/
數量選擇
----------------------------------------*/
.cms-amount-pane{}  
.cms-amount { height: 36px; width:100%; margin:8px 0; display: flex;  flex-direction: row; justify-content: space-between; align-content: center; border:solid 1px #919eab; border-radius: 10px;}
.cms-amount-button { display: flex;  width:40px;  height: 34px;font-size:1.125rem; font-weight:700;  padding: 0;}
.plus {display: flex;  flex-wrap: wrap; justify-content: center; align-content: center;    border-top-right-radius: 9px;border-bottom-right-radius: 9px;  border-left:  solid 1px #919eab;  }
.minus {display: flex;  flex-wrap: wrap; justify-content: center; align-content: center;   border-top-left-radius: 9px;border-bottom-left-radius: 9px;  border-right:  solid 1px #919eab;}
.plus:hover,.minus:hover { color: #ffffff; background:#30315f; cursor: pointer; transition: all .3s ease-in-out;}
.cms-amount p { display: flex; flex-wrap: wrap; justify-content: center;  align-content: center; height:34px;  font-size:1.125rem; font-weight:400;  }
.cms-surplus {  padding-left: 10px; font-size:0.875rem;  text-align: center;  color:#c74060; }

/*----------------------------------------/
social-icons
----------------------------------------*/
.cms-main-product-infoul .cms-social-icons{ width: 100%;  margin:10px; display: flex;  flex-wrap: wrap; flex-direction: row;  font-size:0.875rem;   }
.cms-main-product-infoul .cms-social-icons li{ width: auto!important; margin:5px;  }
.cms-main-product-infoul .cms-social-icons li a{ opacity:1;font-size:0!important;  }
#cms-tabs-product .resp-tab-content { padding: 30px 50px;background: #fff;  -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.05);  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.05); }
 
/*----------------------------------------/
數量選擇
----------------------------------------*/
.resp-tab-content h4{ margin:2% 0;  font-size: 1.15rem; font-weight: 700; }
#cms-main .resp-tab-content p{ margin:1% 0; font-size: 1rem; font-weight: 700;  }


/*best-wrap============================================================*/
.cms-best-wrap{  width: 100%; max-width: 1100px; margin:0 auto; padding:40px 0px 50px 0px;  display:flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;  }
.cms-best-wrap .cms-main-product-item { width:100%;   margin:2% auto;  }
.cms-best-wrap .note { position: absolute; top:-30px; }
.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:-20px;}

.prod_btn a{width: 100%;}
.share_friend {text-align: right;}
.share_friend span{display: block;
  width: 182px;
  margin-left: auto;
  text-align: left;}
.prod_dtl {display: flex;flex-wrap: wrap;}
.prod_dtl ul{width: 60%;margin: 0;}
.prod_dtl .mui{width: 35%;margin:0 0 0 5% !important;}
@media only screen and (max-width:600px){
  .prod_dtl ul{width: 100%;}
  .prod_dtl .mui{width: 100%;margin:0 !important;}
}