﻿/*----------------------------------------/
產品分類總覽頁product
----------------------------------------*/
.cms-product-cate { width:100%;   margin: 5% -15px;  display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;}
.cms-product-cate li{ width: calc(100%/4 - 30px);  margin:40px 15px; padding:20px; position: relative; transition: all 0.5s ease 0s; background-image: url("../images/item/border-l.png"),url("../images/item/border-r.png"),url("../images/item/bg-paper-02.jpg"); background-position:left top,right bottom,left top; background-size:60% auto,60% auto,50px; background-repeat: no-repeat, no-repeat, repeat;  box-shadow: 0px 5px 6px rgba(0,0,0,.3); border-radius: 10px;}
.cms-product-cate li a{ display: flex;flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;     } 
/*.cms-product-cate li:nth-child(4n){margin-left:0; }*/
.cms-product-cate li figure{padding:0px; display: flex; justify-content: center;  }
.cms-product-cate li img{ width:100%; max-width:100%; height: auto;  margin: auto;transition: all 0.5s ease 0s; }
.cms-product-cate li a:hover{text-decoration: none; }
.cms-product-cate li:hover{transform: scale(0.95); text-decoration: none; }
.cms-product-cate li a h3{  width: 100%; justify-content: center; margin:5px auto;  padding:5px;  font-size:1.15rem; font-weight: 700!important;  text-align: center; color:#3c2700;  position: relative;    overflow: hidden;   word-break: keep-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
.cms-product-cate-title{width: 100%;display: flex; flex-wrap: wrap; justify-content: center; margin:10px auto; }
.cms-product-cate-title:before { left:0px;  top:0px;  -webkit-transform: translate(0%,50%); transform: translate(0%,50%);}
.cms-product-cate-title:before { content: ''; background: url("../images/item/line-1.png") left top repeat-x; display: inline-block;  width: 100%; height:3px; position: relative; vertical-align: middle;}
.cms-product-cate-title:after { content: ''; background: url("../images/item/line-1.png") left top repeat-x; display: inline-block; width:100%; height: 3px; position: relative; vertical-align: middle;}
.cms-product-cate-title:after { left:0px;  bottom:3px;  -webkit-transform: translate(0%,0px) ; transform: translate(0%,0px);}
.cms-product-cate-img{ position: absolute; top:10vh; right: -30px; width: 160px; height: auto;  z-index: 11; }
.cms-product-cate li p{ font-size:0.875rem; color:#726A6A; margin: 0 auto 10px auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.cms-product-cate li p span{border: solid 1px #434997;}
 @media (max-width: 991.98px) {
.cms-product-cate li{ width: calc(100%/3 - 40px); margin:60px 20px;}
.cms-product-cate-img{ top:5vh; }     
}
@media (max-width: 575.98px) {
.cms-product-cate li{  width: calc(100%/2 - 40px);  }
}

/*----------------------------------------/
產品總覽頁product-list
----------------------------------------*/
.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;  position: relative; transition: all 0.5s ease 0s; /*background: url("../images/item/pro-bg-outline.png") no-repeat center top;*/ background-size:70% auto;list-style: none; }
.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; /*background: url("../images/item/pro-bg.png") no-repeat left top;*/ background-size:70% auto; }
.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.95); }
.cms-main-product-item li a h3{ margin: 0 auto 10px auto;font-size:1.15rem; font-weight: 400;  text-align: center; line-height:1.4rem;  color:#3c2700; 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 .cms-main-product-item li a p{ margin: 0 auto 10px auto;  min-height:48px;  font-size:0.875rem; color:#726A6A;line-height: 1.5rem;   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-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:#E84A75;  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;  padding: 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 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;}
 
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.cms-main-product-info{ width: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/item/title-pro.png") no-repeat 0 0; background-size: auto 140px;  width: 100%; height:140px; position: absolute; z-index: 99; right:0px;  top:0px; display: none;}
.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 select, .cms-main-product-info input { width: 90%; max-width:200px; height: 30px; padding: 5px; border: solid 1px #ccc; border-radius:0px;  }
*/
.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:#fff;; background: #E84A75;  border-right: 1px dashed #E84A75; border-left: 1px dashed #E84A75; }
.cms-store { display:flex;  flex-wrap: wrap; }
.cms-store img{ display:flex;width: auto; height: 20px; margin: 5px; }

/*----------------------------------------/
產品規格
----------------------------------------*/
.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{ margin-top: 1.5rem; }  
.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; background:#f7f7f7; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
 

 


/*best-wrap============================================================*/
.cms-best-wrap{  width: 100%; max-width: 1100px; margin:0 auto; padding:0px 30px 40px 30px;  display:flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;  }
.cms-best-wrap .cms-main-product-item { width:100%; margin:2% auto; padding: 0;}
.cms-main-product-item li a h3{margin-bottom:15px; }
#cms-main .cms-best-wrap .cms-main-product-item li a p{ display: none;}
.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:-90px;}
@media only screen and (max-width: 1199px) { 
.cms-best-wrap { max-width: 1000px;}	
 }


/*------------information---------------------*/
.info ul.list {}
ul.list>li { text-align: center; display: flex;}
ul.list li p.num { font-size: 1rem;  width: 100px;  margin-right: 4px; padding-top: 50px; line-height: 1.6;}
ul.list li p.title { font-size: 1.25rem; font-weight: 700; width: 300px; margin: 0 4px; padding: 50px 25px 0 25px; line-height: 1.6; color: black; }
ul.list li p.textarea,ul.list li ol,ul.list li ul { font-size: 1rem; width: 763px; margin-left: 4px; padding: 50px 0 50px 40px;  text-align: justify; line-height: 1.6;}
ul.list li>* {  border-bottom: solid 1px #ccc;}
ul.list li:first-child>* {  border-top: solid 2px #000;}
ul.list li:last-child>* { border-bottom: solid 2px #000;}
/*original style*/
.edit-title-1{ margin: 30px 0px; padding-bottom: 5px;color:#454b4f; font-size: 18px; font-weight:400; line-height: 30px;border-bottom: 2px solid #454b4f;}
.edit-title-2{ margin: 20px 0px; padding:0px 0px 0px 40px; color:#47382a; font-size:1.25rem; font-weight:400; line-height:30px; background:url(../images/icon/note.svg) no-repeat left; background-size:30px;  }
.edit-title-3{ display: flex; margin:20px 0px;  color:#47382a; font-size:1.25rem; font-weight:400; line-height:30px; }
/***tab size*/
.edit{ width:96%; margin:10px auto;padding:10px; }
.edit p{ margin:2% auto; font-size:1rem; line-height:2rem; color:#47382a;}
.edit p strong{ padding-bottom:2em; font-weight: 700;  color:#990808; }
@media only screen and (max-width: 768px) { 
.leftwrap{ width: 100%; display: flex;   }	
.rightwrap { width: 100%; display: flex; padding: 0px;}
.product-info { width: 94%;}	
 }
