.bg-body{ background: linear-gradient(150deg, #e6d3f9 0%, #e6d3f9 50%, #cea0f1 50%, #cea0f1 100%);}
.background { position: fixed; bottom: 0px; right: 0px; width: 50%; height: 100%; background:#f7f5f5;  -webkit-clip-path: polygon(52% 0, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(52% 0, 100% 0, 100% 100%, 0% 100%);  z-index: -1; transition: all .8s ease;}
.main-area{ padding: 20px 0px 100px 0px; background: url("/images/theme-b67/index/bg-line.jpg") no-repeat left top; background-size: 100% auto;   }
.top.main-area{ padding-top: 50px; padding-bottom: 0px; position: relative;}

.top.main-area::before{ content: attr(data-content); color: #fff; font-size: 120px; font-weight: 700;  letter-spacing: 3px; position: absolute; left:10%; top:2%;  -webkit-text-stroke: 2px #f39800; z-index: 1; opacity: .1;  }
@media (max-width: 768px) {
 .main-area{ padding: 20px 0px 0px 0px;  }
 .top.main-area::before{  font-size: 80px; left:10%; top:5%; }
 }
@media (max-width: 767.98px) {
 .top.main-area::before{  font-size: 72px; left:-10px; top:130px;   letter-spacing: 0px;  }
 }

/*----------------------------------------/
麵包屑 自訂顏色樣式
----------------------------------------*/
.top .main-breads { margin-top: 0px;  }
.top .main-breads .breadcrumb li a{ color:#817e7a;   }
.top .breadcrumb-item+.breadcrumb-item::before { content: " | "; margin-left: 5px;color:#acacac;}
.top .breadcrumb li:first-child{ position: relative; padding-left: 20px; color: #ffbe5d;}
.top .breadcrumb-item.active{color:#f39700;}
.top .breadcrumb-item:first-child::before { background: url("/images/theme-b67/icon/home-b.svg") no-repeat left top; }
@media (max-width: 767.98px) {
 .top .main-breads { padding: 0px;  }
}




.product-arera{ padding: 0px;  width: 100%; display: flex; flex-wrap: wrap; position:relative}
.product-arera .main-content {width:calc(100% - 300px);  padding-left:30px;position:relative}
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
@media (min-width:993px) and (max-width: 1199.98px) { 
.product-arera{  padding:0px;}
.product-arera .main-content {width:calc(100% - 240px);  padding-left:20px;  }

}
 @media (max-width:992px) {
 .product-arera .main-content {width:100%;  padding-left:0px;  }
    
}
@media (max-width: 767.98px) {
.product-arera{  padding:0px;}
.product-arera .main-content {width:100%;  padding:0px;}
}
  /*  banner area*/
.banner-img img  { width: 100%; height: auto; -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 0;}
.text-content { flex: 1;   padding: 20px; transform: translateX(0); position: relative; z-index: 1;    }
@media (max-width:767.98px) {
.banner-img{  width: 100%;  position: relative; order: 1; }
.banner-txt {width: 100%; position: relative; top:auto; order:2; }
.text-content { min-width:320px;  max-width: 100%;  padding:15px; transform: translateX(0px);}
}

 
/*font-size*/
.title { font-size: 1.125rem; font-weight: 700;width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 740px) {
.title {font-size: 1.5rem; }
}
@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}


.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.main-wrap{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
      
.product-cate { width:100%; margin:0px auto;  padding:0px 0px 100px 0px; display: flex; flex-wrap: wrap;  position: relative;z-index: 0;}
.product-cate li {width: 100%;display: block; margin-top:50px; position: relative; padding-top: 1.5rem;transition: all 0.3s linear 0s; counter-increment: index;}
@media (min-width: 768px) {
 .product-cate {  padding: 100px 0px; }
   
.product-cate li { width: 45% }
.product-cate li:nth-of-type(2n+2) {margin-left: 55%; margin-top: -15% }
.product-cate li:nth-of-type(2n+1) {margin-top: -5% }
.product-cate li:first-of-type {margin-top: 0  }
}
@media (min-width: 1600px) {
.product-cate li { padding-top: 6rem}
}
.product-cate li a h3 { position: relative;margin-bottom: 20px; z-index: 5; color: #2F3E47;  display: block; text-align: center}
@media (min-width: 768px) {
.product-cate li a h3 {padding-left: 20%;  }
}
 /*----------------------------------------/
產品總覽頁Product
---------------------------------------- */
.product-cate li:after,.product-cate li:before {pointer-events: none; content: ''; width: 100%; height: 100%;  box-sizing: border-box;  position: absolute; top: 0;  left: 0;  transform: scale(0); transition: 0.5s;z-index:9; }
.product-cate li:after { border-top: 2px solid #f39800;  border-right:2px solid #f39800;  transform-origin: 100% 0%;}
.product-cate li:before { border-bottom: 2px solid #f39800; border-left: 2px solid #f39800; transform-origin: 0 100%;}
.product-cate li:hover:after,.product-cate li:hover:before { transform: scale(1);}
.product-cate li figure {display: block; vertical-align: top;  width:100%; height:auto; margin: 0px; padding-top:59%; white-space: normal; word-break: break-word; position: relative;z-index: 3;}
.product-cate li figure:before {  content: ""; display: block;  background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 50%,  rgba(243, 152, 0, 0.4) 100%); opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.product-cate li a img { position: relative;  transition: all 0.3s ease;z-index: 3}
.product-cate li a:before { content: counters(index, ".", decimal-leading-zero); font-variant-numeric: tabular-nums;  display: block; font-size: 4rem; font-weight: bold; color: #f2f2f2; position: absolute; line-height: 1.125em;  left: 20px;  top: -50px; text-align: left; z-index: 1; transition: all .4s ease;  }
@media (min-width: 0) and (max-width: 739px) {
.product-cate li a:before { color: #eef3f8; padding-top: 0.27em }
}
@media (min-width: 740px) {
.product-cate li a:before { font-size: 8rem; padding-top: 0 }
}
@media (min-width: 1600px) {
.product-cate li a:before { padding-top: 0.05em; font-size: 14rem}
}
.product-cate li .inner-box { position: absolute; left: 0; bottom: 0;  background-color: rgba(243, 152, 0, 0.8); padding: 25px 50px; z-index: 6; transition: all .4s ease; visibility: hidden; opacity: 0; transform: translateY(10px);width: 100%}
@media (min-width: 0) and (max-width: 1099px) {
.product-cate li .inner-box { display: none  }
}
.product-cate li .inner-box  h4 { margin-bottom: 0; color: #fff;}
.product-cate li .inner-box .desc { color: #fff;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
@media (min-width: 1100px) {
.product-cate li .inner-box .desc { padding-right: 20% }
.product-cate li .inner-box .desc:after { content: "";width: 30px; height: 30px; position: absolute;  right: 10%;  top: 50%; transform: translate(0, -50%); display: inline-block; vertical-align: middle; background-image: url("/images/theme-b67/icon/arrow-right-w.svg");}
}
@media (min-width: 1300px) {
.product-cate li .inner-box .desc { padding-right: 30% }
}
@media (min-width: 1100px) {
.product-cate li:hover a:before { color:rgba(243, 152, 0, 0.8); transform: translateY(-15px) }
.product-cate li:hover .inner-box { visibility: visible; opacity: 1; transform: translateY(0) }
}
 
/*--分類new-tag --*/
.new-tag { display: flex; flex-wrap: wrap; align-items: center; width: auto; padding:2px 4px; font-size: 0.75rem; color: #fff; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all; z-index: 9; position: absolute; right:0px; top: 0px;  }
.new-tag a{color:#fff;}
.new-tag-01{ background:#db0632;}

.product-item  { margin: 0 -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; }
.product-item li{ width: calc(100%/4); margin: 15px 0px; padding: 0 15px 0px 0px;  -webkit-transition: all 0.5s; transition: all 0.5s; list-style: none; position: relative;}
.product-item li figure {  position: relative; width: 100%; padding-bottom: 100%;  height: 0; transition: all 0.5s ease 0s; border-radius:15px;  }
.product-item li img {position: absolute; top: 0; left: 0;  width: 100%;  height: 100%; transform: scale(.95); transition: all .35s ease;/* -webkit-box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%);  box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%); */border-radius:15px;  }
.product-item li:hover img { transform: scale(1);  opacity: 1; }
.product-item li a .arrow { position: absolute; right: 0; bottom: 0; opacity: 1;}
.product-item li a .arrow:before { content: ""; display: block;  width: 0; height: 0; border-style: solid; border-width: 0 0 101px 101px; border-color: transparent transparent #2a82bc transparent;}
.product-inner{width: 100%;  text-align: center;}
.product-item li h3 { margin: 5px 0px; font-size:1.313rem; line-height: 1.466; font-weight: 700; overflow: hidden;white-space: normal;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis; }
.product-item li a h3 { color:#000;}
.product-item li a:hover h3 { color:#f39800;}
.product-item li p{ color: #262626; font-size: 15px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; height: 45px;}
.btn-area { width: auto;  position: absolute;  top:20px; left: 10px; z-index: 99;  transition: all .35s ease;  }
.btn-area .next-button{width: 113px; transform: scale(.9); position: relative; }

@media (max-width: 1180px) {
.product-item li a:before { opacity: 1; }
.product-item li a figure,.product-item li a .arrow {opacity: 1;  }
}
@media (max-width: 1024px) {
.product-item  {width: 100%; padding: 0px;  margin: 0 auto; }
}
@media (max-width: 992px) {
.product-item li a .arrow:before { border-width: 0 0 70px 70px; }
}
@media (max-width: 767.98px) {
.product-item li{ width: calc(100%/2 - 10px); padding: 0px;  margin: 15px 10px 15px auto;  }
.product-item li a:before { left:8px; right: 8px; top:8px; bottom: 8px;  }
.product-item li h3 { font-size:1rem; line-height: 1.466; }
.btn-area {top:10px; left: 5px; }
.btn-area .next-button{width: 95px;  }
}
i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("/images/theme-b67/icon/arrow-right-f.svg") no-repeat right top;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}




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

/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.product-wrapper { width: 100%; margin:auto; padding: 30px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;align-self: flex-start;    position: relative;}
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
 .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

.product-left{width:calc(60% - 30px);  padding: 50px 15px;/*  position: sticky;  height: 80vh; overflow-y: scroll; */display: flex; flex-wrap: wrap; z-index: 1;background-color: rgba(255,255,255,1.00);  order: 1; border-radius:20px;}
.product-left::-webkit-scrollbar { display: none;-webkit-appearance: none;}
.product-left::-webkit-scrollbar:vertical { width: 6px; }
.product-left::-webkit-scrollbar:horizontal {  height: 12px;}
.product-left::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}
.product-left::-webkit-scrollbar-track { border-radius: 0px;  background-color:#fff;}



.product-right{ width:40%;  padding:50px 0px; margin:0px auto;  position: relative; z-index: 0;  }
.slider-for{  width: 100%; margin: 0px ; padding: 0px; list-style: none;}
.slider-for li{ position: relative; width: 100%;max-width: 480px;  margin:0px;padding:0px 40px 0px 0px;}
.slider-for li img{width: 100%; box-shadow: 4px 13px 30px 1px rgb(252 255 255 / 20%); border-radius: 20px;}

 
.slider-nav{ width:100%;   height: auto; margin: 0px; padding:0px;   display: flex;  flex-wrap: wrap; justify-content: flex-start; position: relative; left:0px;  z-index: 9;}
.slider-nav li{ width: 100px; opacity:.3; margin:10px;padding: 5px; background: #fff; box-shadow: 2px 5px 6px rgba(0,0,0,.35)   }
.slider-nav li img{ width:100%; margin:0px; padding:0px;  }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav .slick-dots {bottom:-20px;}
 @media (max-width:820px) {
.product-left{width:100%;padding: 5px 0px 0px 0px; order: 2;}  
.product-right{ width:100%; margin: auto; padding: 10px 50px; order: 1;}
}
 @media (max-width:767.98px) {
.product-right{  padding: 10px;}
     
}



 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.product-group .btn{ width: calc(100%/3 - 20px); margin: auto 10px auto 0px;  border-radius:5px;  }
.product-info button {  border-radius:0px; }
 

.btn-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.btn-group a{width:auto; margin:10px 0px; padding:0px 20px; }
  
.product-info{ width:100%; padding:0px 20px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
.product-info h1{ width: 100%; display: flex; justify-content: flex-start; font-weight: 700; font-size: 26px; color:#333; letter-spacing: 1px;   }
.product-info h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#776b62;  word-spacing: normal; word-break:normal; }
.product-info p{  width: 100%; margin: 5px 0px; font-size:0.875rem; font-weight: 700; color:#7a7a7a; text-align: justify;  word-spacing: normal; word-break:normal;  }
 
 @media (min-width:1100px) {
.product-info h1{  font-size: 2.5rem;  }
}
 @media (min-width:1600px) {
.product-info h1{  font-size: 3rem;  }
}


.product-description{ width: 100%; padding:5px 0px 10px 0px;   color:#888;  }
.product-description p {width: 100%; margin: 5px 0px; font-size:0.9rem; font-weight: 400; color:#333;  word-spacing: normal; word-break:normal;}

 @media (max-width:767.98px) {
     .product-description p {text-align: left}
}

.product-description span {width: 100%; margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
.product-description ul li .item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#98979d;  font-size:0.85rem;}
.product-description p strong{color:#000;}
.badge-tag{ padding: 5px; width: 100%;  display: flex; flex-wrap: wrap; transition: all .3s; cursor: pointer;}

a.a-tag { width: auto; height: 36px; margin-right: 5px; font-size: 14px;  font-weight: 700; line-height: 1.57; letter-spacing: normal; position: relative;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px 8px 5px 9px;  max-width: 100%; color: #1e88c9;  border: 1px solid #1e88c9;  border-radius:0px;  -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s; -ms-flex-wrap: wrap; flex-wrap: wrap;}
a.a-tag:hover{color: #fff; background: #1e88c9;}


.product-info-title{ width: 100%;;padding: 0px 10px; align-self: center; margin-bottom: 20px;}
.product-info-title .product-info-title .btn{ width: 50%; justify-content: flex-end; }
 
.specbox {  display: -webkit-box; display: -ms-flexbox;  display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;width: 100%;}
.item-title { width: calc(100% / 2);padding: 0px 10px; margin-bottom: 10px;}
.item-title-r { width: calc(100%);padding: 0px 10px; margin-bottom: 10px;}
.item-title-btn{  width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-end}
.item-title-btn .item-title {  margin-bottom: 15px;max-width: 280px; }

 @media (max-width:767.98px) {
 .item-title { width: 100%; }   
 .item-title-btn{   justify-content: flex-start}
    
}

@media (max-width:350px) {
 .product-info .btn.btn-secondary{font-size: 12px;letter-spacing: 0.4px;}
    
}

.item-title p{ font-size: .875rem; color: #666;}

.item-title-full { width: 100%;padding: 0px 10px; margin-bottom:30px;}
 
.specbox .name { margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#000; font-weight:700; font-size:1rem; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.specbox p {width: calc(100% - 20px);font-size:.9rem; color: #575757;}
 
.pdd-toggle-area{ position: relative;width: 100%;margin: 30px 0px 0px 0px; border: 1px solid #f2f2f2; display: flex;  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);z-index: 3 }
.pdd-toggle-area:before { content: ""; display: block; width: 1px; height: 100%; border-left: 1px solid #e5e5e5; position: absolute; left: 50%; pointer-events: none; z-index: 6; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) }


.pdd-toggle-area a { width: 50%;height:3vw; display: flex; align-items: center; text-align: center; justify-content: center; position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a:after { content: ""; position: absolute;  width: 100%; height: 100%; background: linear-gradient(to right, #3676be, #292487); transform-origin: center bottom; transform: scaleY(0); left: 0;  top: 0;  z-index: 1; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a .fz-C, .pdd-toggle-area a .icon { display: inline-block; margin-left: 10px; transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);  position: relative; z-index: 3;font-weight: 600; color: #000}

.pdd-toggle-area a:nth-child(1){background-color:#f2f2f2; }
.pdd-toggle-area a:nth-child(2){background-color:#e5e5e5; }


.pdd-toggle-area a .icon:before { width: 1rem; height: 1rem }
.pdd-toggle-area a:hover { color: #fff; background-color:#f39800 }
.pdd-toggle-area a:hover span { color: #fff;  }

 
@media (min-width: 0) and (max-width: 979px) {
.pdd-toggle-area a { height: 52px }
.pdd-toggle-area a .fz-C { font-size: .875rem }
 }
 

.icon-down{width: 12px; height: 12px; background: url("/images/theme-b67/icon/slick-down.svg") no-repeat left top;}


.sec1 { position: relative; display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  margin-bottom: 100%;  width: 100%;  min-height: 800px; height: calc(100vh - 130px); background-color: #fff;}
.sec1.unlock { margin-bottom: 0; }
.fixblk { position: fixed; top: 0; z-index: -1; margin-top: 250px;  width: 100%; background: #000; }
.fixblk.unlock { position: relative;  margin-top: 110px;  z-index: 5; }
 


.spec-edit{ width: 100%; max-width: 900px;  padding: 50px 0px;}


.spec-item { display: flex;flex-wrap: wrap; }
.spec-item span {  padding: 1em 0 }
@media (min-width: 1700px) {
  .spec-item span { font-size: 1.125em }
}
.spec-item .fz-D { font-weight: 400;  line-height: 1.625}
@media (min-width: 740px) {
  .spec-item .fz-D { font-size: 1.5em; font-weight: 700; }
}
@media (min-width: 980px) {
  .spec-item .fz-D { padding-top: 1em  }
}
@media (min-width: 1700px) {
  .spec-item .fz-D { font-size: 1.125em }
}



.spec-item .field { font-weight: 700; flex-shrink: 0; padding-left: 1em}
.spec-item .value { font-weight: 400; flex-shrink: 0;  padding-right: 1em;  padding-left: 0.5em}
.spec-item ul li {display: flex; background: #fff;}
.spec-item ul li.bg-gray { background-color: #efefef }
@media (min-width: 0) and (max-width: 979px) {
.spec-item {padding: 24px }
.spec-item span {font-size: .875em }
.spec-item .field {width: 45%}
.spec-item .value { width: 55%}
}
@media (min-width: 740px) and (max-width: 979px) {
.spec-item { padding: 0 100px }
}
@media (min-width: 980px) {

.spec-item .fz-D { width: 18%; display: block; flex-shrink: 0 }
.spec-item ul {  width: 82%;  display: block; flex-shrink: 0 }
.spec-item ul li { display: flex;  width: 100% }
.spec-item .field { width: 30%  }
.spec-item .value { width: 70%  }
}


.spec-table { display: block; margin:20px 0; border-collapse: separate; background:#fff; /* -webkit-border-vertical-spacing: 10px; -webkit-border-horizontal-spacing: 10px; */}
.spec-table th { padding:10px 5px; font-size: 1rem; background:#066CB7; color: #fff; }
.spec-table td { padding:10px 5px; font-size: 0.9rem; border-right:solid 1px #eee; border-bottom: solid 1px #eee;}
.spec-table td:last-child { border-right:none;}

@media (max-width: 991.98px) {
.product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
.product-info{  padding:0px; border:none; }    
}


 
   
 /*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; margin:0 auto; padding:20px;  background-image: linear-gradient(to bottom, #f1f4f4 0%, #d9e1e0 100%);}
.best-wrap .product-item { width:100%; text-align: center;   padding:0px 30px;  margin: 10px auto; }
.best-wrap .product-item  li{ margin: 0px 10px;  border-radius:10px; }
.best-wrap .slick-dots li button:before{ color: #fff; }
.best-wrap .slick-dots li.slick-active button:before { opacity: .75; color: #fff; }
.best-wrap .slick-dots {bottom:-30px;}
.best-wrap .slick-dots li{margin: 15px 2px;}
.best-wrap .product-item .slick-prev {left:-30px; }
.best-wrap .product-item .slick-next{right:-30px;}
.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{ top:calc(50% - 50px); }

@media (max-width: 767.98px) {
.best-wrap{  padding:20px 5px;  }   
.best-wrap .product-item {   padding:0px 10px;  margin: 10px auto; }   
.product-item .slick-prev,.product-item .slick-next{ width:36px; height:36px;top:35%; }
.product-item .slick-prev {left:-15px; }
.product-item .slick-next{right:-15px;}
}



@media (max-width: 320px) {
.best-wrap .product-item {  padding:30px 20px;  }
.best-wrap .product-item .slick-prev{left:-18px;}
.best-wrap .product-item .slick-next{right:-18px} 
}


.section3{padding:20px 0px; background-image: linear-gradient(to top, #d9e1e0 0%, rgba(244,244,244,.1) 100%);   }


/*----------------------------------------/
tab
----------------------------------------*/
#cms-tabs-product .resp-tabs-list{ width: 100%;   /*border-bottom: solid 1px #e9ebef;*/}
#cms-tabs-product .resp-tabs-list li { width:auto; margin: 0px; justify-content: center; border-bottom: solid 1px #ececec; font-size:1rem; background-color: #fff;  }
#cms-tabs-product .resp-tabs-list a:hover {  color: #a01f35!important; }
#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{width: 100%; padding:30px 0px; margin: auto;   }
.edit h4 img{display: block; width: 100%; max-width:600px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.imgEditor { width:80%; height: auto; margin: auto; display: block;} 
 
@media (max-width: 991.98px) {
.item-title{ width: 100%;}  
.resp-tabs-list li { width: calc(100%/4 ); padding: 0px;  margin: 0px auto;   }
 .resp-tabs-list li a{ padding:5px;  }

}

.spec-description{ padding:5px; }
.spec-description p {margin-bottom: 15px; font-size:1rem; color: #98979d;}
.spec-description ul{width: 100%; margin:0; padding: 0px; }
.item-title{ color:#000;  font-size:1.188rem;}
.item-title strong{color:#e60013; margin-right: 10px;}
/*aside*/
 
 
/*search-box*/
.search-box{width: 100%; margin: 0px auto; padding: 10px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
@media (max-width: 992px) {
.search-box{  padding: 10px 0px; }
}
.search-box-type{width: 100%; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-content: center;  position: relative;}
.search-box-type .icon {color:#6c7280;  position: absolute;top:9px; right: 20px;z-index: 1; background: none; border: none;}
.search-box-type .icon i{ filter: brightness(0)}
.search-box .filter-inner{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.filter-title{ font-size:1rem; font-weight: 700; }
.search-box .filter-column{width: 12%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .filter-box{width: 88%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .filter-inner .column-box{width: calc(100%/3 - 20px); margin:5px 10px;}
.search-box .filter-inner .column-full{width: calc(100%  - 10px); margin:5px;}
@media (max-width: 767.98px) {
.search-box .filter-column{width:100%; margin:10px 0px;}
.search-box .filter-box{width: 100%; }
.search-box .filter-inner .column-box{width: calc(100%/2 - 20px); margin:5px 10px;}    
}
@media (max-width: 570px) {
.search-box .filter-inner .column-box{width: calc(100%  - 10px); margin:5px;}
}

/*--------form style------------*/
.search-box input,.search-box option, .search-box textarea, .search-box input[type="radio"]{  color: #000;background-color:transparent; border-radius:0px!important;   }
*:focus { outline: none; }
.search-box input{ width: 100%!important; padding:9px 8px; margin: 0px 10px; border: none; border-bottom: solid 1px #000;}
/* placeholder ---*/
.search-box input::placeholder {  font-size:0.875rem;  }
.search-box input:focus,.search-box textarea:focus { outline: none; box-shadow:0px 5px 1px rgba(243,152,0,.1);border-bottom: solid 1px rgba(243,152,0,1);}
.search-box input:focus:placeholder { color: transparent;  }
.search-box input:focus::-webkit-input-placeholder { color: transparent; }
.search-box input:focus:-moz-placeholder { color: transparent; }
.search-box input:focus::-moz-placeholder { color: transparent; }
.search-box input:focus:-ms-input-placeholder { color: transparent; }
/*.search-box select{ width: 100%; padding:9px 8px; font-size:0.875rem; line-height:2rem; color: #333; background-color: transparent!important; border-radius:0px; border: none; border-bottom: solid 1px #000;   }*/
/*IE --*/ 
.search-box select::-ms-expand {display: none; }
.search-box select:focus{ box-shadow:0px 0px 5px 2px rgba(243,152,0,.1);   }
.search-box input, .search-box button, .search-box select, .search-box textarea { outline: none; }
.search-box select option:focus{  box-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3; }

 
/** Custom Select **/
.custom-select-wrapper { width: 100%; position: relative; user-select: none;}
.custom-select-wrapper select {display: none;  }
.custom-select { width: 100%;padding:9px 0px;  position: relative; border: none; background: transparent; }
.custom-select-trigger { margin-top: -10px; min-height: 48px;position: relative; display: block; padding:0px 8px; font-size:0.875rem; line-height:1.5; color: #333; background-color: transparent!important;   border-radius:0px; border: none; border-bottom: solid 1px #000;  cursor: pointer; align-content: center;}
.custom-select-trigger:after { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 5px; margin-top: -3px; border-bottom: 1px solid #000; border-right: 1px solid #000;transform: rotate(45deg) translateY(-50%);transition: all .4s ease-in-out; transform-origin: 50% 0;}
.custom-select.opened .custom-select-trigger:after {margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }
.custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; min-width: 100%; margin: 19px 0; border: 1px solid #f39800; border-radius: 4px; box-sizing: border-box;  box-shadow: 0 8px 5px rgba(0,0,0,.5); background: #fcd991; transition: all .4s ease-in-out;opacity: 0; visibility: hidden;pointer-events: none; transform: translateY(-15px); z-index:100;  }
.custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all;transform: translateY(-10px);  }
.option-hover:before {background: #f9f9f9; }
.custom-option { padding: 10px;display: block;position: relative; border-bottom: 1px solid #fcd991;font-size: .875rem;font-weight: 400; color: #000; line-height:1.35rem; cursor: pointer;transition: all .4s ease-in-out; z-index: 9;  }
.custom-option:first-of-type {border-radius: 4px 4px 0 0;}
.custom-option:last-of-type { border-bottom: 0;border-radius: 0 0 4px 4px;   }
.custom-option:hover, .custom-option.selection { background:#f39800; color: #fff; }


 /*--------form style------------*/
.search-content{  position: relative; z-index: 1; padding: 5% 0;}
.search-inner {width: 100%;;margin: auto; display:flex; flex-wrap: wrap; justify-content: flex-end;  }
.search-btn {width:40%;;margin:5px 0; display:flex; flex-wrap: wrap; justify-content: flex-end; }
.search-btn button {width:calc(100%/3 - 10px)!important; margin: 5px 0px 5px 10px ;display:flex;justify-content: flex-end;   }
.table { overflow-x: auto;}
.table label:nth-child(odd) ul { background: #f4f4f4;}
.table-thead { display: flex;background:#dce8f0; padding: 15px 10px 15px 50px; font-weight: 700;}
.table-thead li{color:#026ebb;  font-weight: 700; }
.table-tbody { display: flex; padding: 10px 10px 10px 50px; margin: 0px; border: solid 1px #f4f4f4;}
.table ul { list-style: none;}
.table ul:nth-child(odd) { }
.table ul:nth-child(even) { background: #fff;}
.table ul:hover{background:#ffefda;}
.table-tr{font-size: 0.875rem;}
.table-tr { width: calc(56%/7); padding: 0 5px;}
.table-tr.w20 {  width: 20%;}
.table-tr.w12 {  width: 12%;}
.table label { position: relative; cursor: pointer; display: block;}
.table label input[type=checkbox] { width:18px; height: 18px;   position: absolute;  top: 15px; left: 15px;color:#006fbc!important; border-color: #006fbc!important;}
 
a.downloadPDF img{ width:30%; margin:auto; }
a.downloadPDF:hover img{  opacity: .5;}



.product { width:100%; margin:0px auto;  padding: 50px 0px;   position: relative;z-index: 0;}
.product li {display: block; position: relative; margin-top: 0px; transition: all 0.3s linear 0s; counter-increment: index;}
.product li:nth-child(odd)  { background-image: linear-gradient(to top, #cfd9df 0%, rgba(255,255,255,.1) 100%); }
.product li:nth-child(even)  { background-image: linear-gradient(to bottom, #cfd9df 0%, rgba(255,255,255,.1) 100%); }
.product li:nth-child(even) .item { flex-direction: row-reverse;}
.product li .item{width: 100%; max-width: 1360px;  margin: auto; padding:50px 0px;   display: flex; flex-wrap: wrap; align-items: center;}
.product li h3 { width: 100%; position: relative; z-index: 5;   display: block;  }
 .product li h3 a{ color: #000; }
/*----------------------------------------/
產品總覽頁Product
---------------------------------------- */
.photo { width: 50%;  height: auto; overflow: hidden; position: relative;  }
.photo figure{ width: 100%; padding-top:75%; height: 0; overflow: hidden;  position: relative; transition: all 0.5s ease 0s;}
  
.product li .inner-box { width: 50%; display: flex; flex-wrap: wrap;  flex-direction: column; padding: 25px 50px;position: relative; z-index: 9; transition: all .4s ease;  }
.product li .inner-box .inner-txt{  margin: auto 0px 20px 0px; }
.product li .inner-box .inner-txt .inner-btn-wrap{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.product li .inner-box .inner-txt .inner-btn{ width: 100%; max-width: 280px; margin: 10px 0px;  }
.product li .inner-box .inner-txt .inner-btn .btn.btn-secondary{background-color: #666464; border-color:#666464c!important;}
.product li .inner-box .inner-txt .inner-btn .btn.btn-secondary:hover { color: #fff; background-color:#f39700; border-color:#f39700; }



.product li .inner-box .desc { color: #000;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
@media (min-width: 1100px) {
.product li .inner-box .desc { padding-right: 20% }
}
@media (min-width: 1300px) {
.product li .inner-box .desc { padding-right: 15% }
}
@media (max-width:1024px) {
.product li .photo{width:100%;  }
.product li .inner-box { width: 100%;  padding: 25px 25px;  }   
}

@media (max-width:840px) {
.product { padding: 0px;  }
}
@media (max-width:767.98px) {
.product li .inner-box .inner-txt .inner-btn-wrap{justify-content: flex-start ; }
.product li .inner-box .inner-txt .inner-btn{ width: 100%;margin: 20px 0px;  }   
}
@media (max-width: 570px) {
.custom-select{height: auto;padding: 0;}
.custom-select-trigger{min-height: auto;padding: 15px 20px 15px 8px;}
.custom-options{margin: 10px 0;}
}
@media (max-width: 350px) {
.product li .inner-box .inner-txt .inner-btn .btn.btn-secondary{font-size: 12px;letter-spacing: 0.4px;}
}
 
 
 .model-area {
  color: #f39800;
  font-size: 24px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px
}
@media(max-width: 767px) {
 .model-area {
    font-size: 22px
  }
}
@media(max-width: 425px) {
 .model-area {
    font-size: 20px
  }
}
 .model-area .cicle {
  background: #f39800;
  font-size: 20px;
  color: #fff;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  line-height: 62px;
  text-align: center;
  margin-right: 15px
}
 
 



.specifications-area { width: 100%; margin-top: 12px}
 
.specifications-area .specifications-title { font-size: 18px; font-weight: bold}
@media(max-width: 767px) {
.specifications-area .specifications-title { font-size: 16px }
}
.specifications-area .datatable { width: 100%; margin: 2px auto; font-size: 18px;}
 
@media(max-width: 767px) {
.specifications-area .datatable { font-size: 16px ;}
 }
.specifications-area .datatable tr { border-bottom: 1px solid #d2d2d2}
.specifications-area .datatable tr td { line-height: 1.8; padding: 3px 0}
@media(max-width: 767px) {
.specifications-area .datatable tr td { display: block;  padding: 2px 0; width: 100%;}
    .specifications-name{font-weight: 700}
}
.update-page-title { display: none}