.bg-tab{ background-image: linear-gradient(to bottom, #fff 0%, #fff 50%, rgba(255,245,213,.45) 100%);} 
@media (max-width:820px) {
.bg-tab{margin-top: 0px;}
}

/*  banner area*/
.text-content {   width: 100%; height: 100%; padding: 20px 30px; transform: translateX(0); position: relative; z-index: 1;    }
 /*----------------------------------------/
熱門推薦
----------------------------------------*/
.product-cate{ width:100%; max-width:1200px;height: auto; margin:0px; padding:40px 0px;  position: relative;   }
.product-cate li{width: 100%; height: auto; max-height:600px; margin:0px auto 5% auto;padding:0px; list-style: none; display: flex;flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0.3s linear 0s;   position: relative; z-index: 0;  }
.product-cate li:last-child { margin: 0 auto 50px auto;}
.product-cate li figure{ width:50%; height: auto; margin:0px; overflow: hidden; background-color:transparent;  position: relative;z-index: 1; transition: all 0.5s ease 0s; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.product-cate li figure img { width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s; }
.product-cate li:hover figure img {  transform: scale(1.1);  opacity: 1; } 
 .product-cate li .inner{width:40%; max-height:40%; min-height:320px; padding:40px;  margin:0px 0px 0px -5% ; overflow: hidden; display: flex; flex-flow: column; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: relative; z-index: 4; background: rgba(255,255,255,1); box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); }

/*.product-cate .inner h3{ display:  flex; align-items: center; justify-content: center;  width: auto; height: 100%;margin:0px 20px 10px 0px; font-size: 3vmin; line-height:5rem; text-align: center; font-weight:700; color:#a41b29;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow-wrap: break-word; word-break: normal; position: relative;  }*/

 .product-cate .inner h3 { position: relative; z-index: 1; margin:0px 20px 10px 0px; line-height: 2.857; font-size: 21px; font-weight:700;text-align: center; color:#a41b29;}




.product-cate .inner h3::before{ content: ""; width: 1px; height: 100%; background:#a41b29; right: 1px; top:0px; position: absolute;}
.product-cate .inner h3::after{ content: ""; width: 1px; height: 100%; background:#a41b29; left: 0px; top:0px; position: absolute;}
 .product-cate .inner p { position: relative; z-index: 1; margin:0px 10px 10px 30px; font-size: 14px; line-height: 2.22; color:#4c4635; font-weight:500;/*display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;*/ }



.btn01 a { position: relative; z-index: 1;  display: flex; align-items: center; justify-content: center; width: auto; height: 140px; margin: auto; text-align: center;  border: 1px solid #ac8a5e;  font-size: 0.875rem; letter-spacing: 0.1rem; color: #ac8a5e; }
.btn01 a::before { content: ""; position: absolute; left:2px; top: 2px; border: solid 1px #ac8a5e; width: 94%; height: 97%; z-index: -1; transition: all 0.5s cubic-bezier(0.9, 0, 0.1, 1);}
.btn01 a::after {  content: "";  position: absolute; left: 0; bottom: 0; z-index: -2;  width: 100%; height: 0;  background-color: #ac8a5e; transition: all 0.5s;}
.btn01 a span {  position: relative;  padding: 10px 15px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.btn01 a span::before, .btn01 a span::after { content: ""; position: absolute; top: 50%;  margin-top: -0.5px;  width: 8px; height: 1px; background-color: #ac8a5e; transition: all 0.5s;}
.btn01 a span::before { left: 4px;}
.btn01 a span::after { right: 4px;}
.btn01 a:hover { color: #fff;}
.btn01 a:hover::after { bottom: auto;  top: 0; height: 100%;}
.btn01 a:hover span::before, .btn01 a:hover span::after { background-color: #fff;}
 
.product-cate .inner .price{ display: block; width: 100%;margin: 20px 0px; font-size: 2.125em;  font-style: italic; font-weight:700; color:#b18d45; }
.product-cate .inner .price em{   font-size:0.875rem;  }
.product-cate li:nth-child(even){flex-direction: row-reverse;}
.product-cate li:nth-child(even) .inner{margin: 0 -10% 0px 10%; }
@media (max-width:1024px) {
.product-cate li .inner{width:45%;  padding:40px 20px;    }
.product-cate li:nth-child(even) .inner{margin: 0 -5% 0px 0; }
}

@media (max-width:979px) {
.product-cate li .inner{width:50%;  padding:40px 20px;    }
.product-cate li:nth-child(even) .inner{margin: 0 -5% 0px 0; }
}
 @media (max-width:840px) {
.product-cate li figure{ width:70%;  }
.product-cate li .inner{width:50%; max-height: 400px; padding: 20px; margin-left: -20%   }
/*.product-cate li:nth-child(even){flex-direction: column;}*/
.product-cate li:nth-child(even) .inner{margin: 0 -20% 0px 0; }
}
@media (max-width:1024px) {
.product-cate li .inner{writing-mode: inherit; -webkit-writing-mode: inherit;justify-content: center;min-height: auto;max-height: auto;}
.product-cate .inner h3{margin: 0px 0px 10px 0px;}
.product-cate .inner p{margin:  0 10px 10px 10px;text-align: left;}
.btn01 a::before{left: 1%;top: 4%;width: 98%;height: 92%;}
.btn01 a{height: auto;}
.btn01 a span {-webkit-writing-mode: inherit;writing-mode: inherit;}
}
 @media (max-width:768px) {
.product-cate li {margin:0px auto 10% auto; max-height: 100%; }
.product-cate li figure{ width:100%;  }
.product-cate li .inner{width:100%; max-height:100%; min-height:auto; padding-bottom: 20px;  display: flex; flex-wrap: wrap;flex-direction: column; margin:auto; writing-mode: horizontal-tb;    }
.product-cate li:nth-child(even) .inner{width:100%; margin:auto}
.product-cate .inner h3{ width:100%; margin:0px 0px 10px 0px; font-size: 1.35rem; line-height: 3rem;  }
.product-cate .inner p{ max-width:100%; height: auto; font-size: 1rem; line-height: 2rem;  }
.btn01 a {  width: auto; margin:20px auto 0 auto; height: auto;  position: relative;}
.btn01 a::before { left:2px; top: 2px; border: solid 1px #ac8a5e; width:calc(100% - 4px); height: 93%; }
.btn01 a span {  position: relative;  padding: 10px 15px; writing-mode: horizontal-tb;   }
}
 @media (max-width:640px) {
/*.product-cate .inner p{display: none;}*/
}
@media (max-width:350px) {
.product-cate .inner h3{font-size: 1.2rem;}
}

/*edit style*/
.edit-body p{ margin: 15px 0px; }
.edit-body .txtbox .title { color: #333; }
.edit-body .txtbox .txtdes { margin-top: 1em}
.edit-body .txtbox .summary{   }
.sub-title { font-size: 16px; font-weight: 400; letter-spacing: 1px;}

.edit-body { margin: 1em 0}
@media (min-width:768px) {
.edit-body{ margin: 0 0 2rem  }
}
@media (min-width:1200px) {
.edit-body{  margin:0em 0 2rem }
}
 
/*col1item*/
 .edit-body .col1item { width: 100%}
@media (min-width:980px) {
.edit-body .col1item { display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center;   }
 .edit-body .col1item .txtbox { padding: 0 5%  }
}
/*col4item*/
.edit-body .col4item { -ms-flex-preferred-size: auto; flex-basis: auto; width: 100%}
@media (min-width:768px) {
.edit-body .col4item { width: 50% }
}
.edit-body .txtbox { margin-top: 1.5em}
@media (min-width:1200px) {
.edit-body .txtbox {  margin-top: 2em  }
}
 
.edit-tip .txtbox {  -webkit-box-flex: 1;  -ms-flex: 1; flex: 1; margin-left: 3%}
.edit-tip .box-item { width: 100%; display: flex; flex-wrap: wrap; }
.edit-tip .tiptit {margin-bottom: .5em;font-size: 1rem; font-weight: 700;}
@media (min-width:768px) {
.edit-tip .tiptit { font-size: 1.125rem;  margin-bottom: .75em }
}

.edit-tip { color: #333;   padding: 1.25em; }
.edit-tip-bg { background-color:rgba(231,213,176,.3)  }
@media (min-width:768px) {
.edit-tip { padding: 1.5em  }
}
  
.edit-tip ul { margin: .25em 0px;padding: 0px; list-style: none;}
.edit-tip li { margin: .25em 0;padding: 0px 0px 0px 10px; position: relative;}
.edit-tip li:last-child { margin-bottom: 0}
.edit-tip li:before { background-color: #c9c9c9}
.edit-tip ul > li:before { content: ""; display: block; width: 4px; height: 4px;background: #b38757;position: absolute; top: 16px;left:0px; border-radius: 50px; }
 
 
/*cms-btn-more =================================*/ 
.cms-more { width: auto;   height: 35px; padding: 20px 2px 20px 15px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer;  border-radius:30px;  background-image: linear-gradient(120deg, #22559e 0%, #6fcccb 55%);  }
@media (max-width:767px) {
.cms-more { width: auto; height: 24px }
}
.cms-more:hover .cms-more-circle, .cms-more:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.cms-more:hover .cms-more-txt, .cms-more:hover i { -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-more:hover{background:#afd9d3; }
.cms-more-circle { width: 30px; height: 30px;  position: relative; display: block; margin-left: 20px; border:2px solid #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-circle { width: 24px; height: 24px; margin-right: 15px}
}
.cms-more i { font-size: 1.875rem; color: #fff;  position: absolute; top: 0; bottom: 0; left: auto; margin: 5px auto auto 100px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-more i.icon-check { font-size: 1.35rem; margin: 10px auto auto 86px;  }
.cms-more-txt { font-size: 16px; font-weight: 400; line-height: 1.5;  color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}

  
/*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{width: 100%; margin:0 auto; padding:50px 0px; display: flex; flex-wrap: wrap;  background: url("/images/theme-c67/index/bg-end-3.jpg") repeat-x left bottom #f8f6ef;}
.product-list { width: 100%; padding:0px;  margin:0px auto;   display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.product-list li{ width:calc(100%/3 - 10px); padding:0px;margin:0px 5px;box-sizing: border-box;overflow: hidden;list-style: none; position: relative; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);transition: all 0.5s ease 0s; transform: scale(0.9); }
.product-list figure img {width: 100%; position: relative; overflow: hidden; transition: all 0.5s ease-in-out;}
.product-list li:hover figure img { opacity: .5;  transform: scale(1.15);    }
.product-list figure {position: relative; overflow: hidden; background: #000; }
.product-list .inner{width: 100%;  min-height:100px;  padding:10px;  position: relative;  z-index: 4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;  }
.product-list .date{  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color:#b18e43;}
.product-list a h3 {position: relative;width: 100%;  margin:0px 0px 10px 0px; font-size:1.125rem; line-height: 1.7142857143rem; font-weight:700; color:#a51b29;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.product-list a p { width: 100%;  font-size:1rem; line-height: 1.5rem; color:#4c4635; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.product-list li:before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 3px; background-color: #741a1e; transition: all 0.4s ease;} 
.product-list li:hover:before {width: 100%;}

/*--recommended --*/
.recommended  {   background-image: linear-gradient(to bottom,#f8f4ed 0%,#ded6be 100%);background-size: 100% auto;  justify-content: center; padding: 100px 0px 20px 0px; }
.recommended-list {width: 100%; padding: 20px 0px;  margin:20px auto;}
.recommended-list li{width: calc(100% - 40px); display: flex; align-items: flex-end; padding:0px 10px; margin:5px 20px ; box-sizing: border-box;overflow: hidden;list-style: none;transition: all 0.5s ease 0s;  position: relative;border-bottom: 1px dotted rgba(0,0,0,.5);   }
.recommended .item-btn{width: 25%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.recommended .item{width: 75%;}
.recommended .item .inner{width: 100%;display: flex; flex-wrap: nowrap; align-items: flex-end; }
.recommended .item .inner .item-name{width: 70%; padding:0px; margin:5px 0px;   }
.recommended .item .inner .item-name h3{width: 100%; padding:0px; margin:5px 0px; font-size: 1.2rem; font-weight:700;  line-height: 1.5; letter-spacing: .5px; color:#000; display: -webkit-box;  overflow: hidden;   word-break: break-all;  word-wrap: break-word;  -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.recommended .item .inner .item-name p{width: 100%; padding:0px; margin:5px 0px; font-size: 1rem; font-weight:700;  line-height: 1.5; letter-spacing: .5px; color:#a18337; display: -webkit-box;  overflow: hidden;   word-break: break-all;  word-wrap: break-word;  -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.recommended .item .inner .item-price{ width:30%; display: flex; justify-content: flex-end;  margin:5px 0px; font-size: 1rem; font-weight:700;  line-height: 1.5; letter-spacing: .5px; color:#9c1a29;}
.recommended .item .inner .item-price em{margin:0px 15px; }
@media (max-width:979px) {
.recommended-list li{width: 100%; padding:0px; margin:5px 0px;  }
}
@media (max-width:767.98px) {
.recommended-list li{width: 100% ; padding:0px 0px 10px 0px; flex-wrap: wrap;}
.recommended .item-btn{width:100%; margin: auto;}
.recommended .item{width: 100%;}
.recommended .item .inner{width: 100%; flex-wrap: wrap;  }
.recommended .item .inner .item-name{width: 100%; padding:0px; margin:5px 0px;   }
.recommended .item .inner .item-price{ width:100%; display: flex; justify-content:center;  margin:5px 0px; font-size: 1rem; font-weight:700;  line-height: 1.5; letter-spacing: .5px; color:#9c1a29;}
.recommended .item-btn{width: 100%;justify-content: center;}
}