main{  position: relative;  background: linear-gradient(to bottom, #fff , #f5f6f6);}      
 .main-area.top{margin-top: 74px; background-color: #fff;}

@media (max-width:1180px) {
 .main-area.top{margin-top:0px; }
}
 .product-arera{ padding:50px 0px 0px 0px;  width: 100%; display: flex; flex-wrap: wrap;}
.product-arera .main-content {width:calc(100% - 300px);  padding-left:40px; position: relative;  padding:30px 60px; margin-top: -70px; margin-bottom: 30px; border-radius: 20px; background: #fff;  box-shadow: 0 0 30px hsla(0,0%,46.7%,.2); }
.bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
@media (min-width: 992px) and (max-width: 1199.98px) { 
.product-arera{  padding:0px;}
.product-arera .main-content {width:calc(100% - 240px);  padding-left:30px; margin-top: -40px; }
}
 @media (max-width: 992px) {
 .product-arera .main-content {width:100%;  padding-left:0px;  padding-right: 0px;  margin-top: 0px;  box-shadow: none;  }
}
@media (max-width: 840px) {
.product-arera{  padding:0px;}
}
@media (max-width: 767.98px) {
.product-arera{  padding:0px;}
.product-arera .main-content {width:100%;  padding:0px;}
}
.bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }
/*--分類new-tag --*/


/*cms-btn-more =================================*/ 
.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) {
.more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}
  
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.main-product{ background-image: linear-gradient(to top, #efeeef 0%, #fff 70%, #efeeef 100%); }
.product-wrapper { width: 100%; height: auto;  margin:auto; padding:50px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}
@media (max-width:1360px) {
.product-wrapper {  padding:0px;  }	
}

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.product-right{width:calc(50% - 130px);  padding: 50px 15px;  z-index: 1;background-color:transparent;  order: 2; }
@media (max-width:1180px) {
.product-right{width:calc(60% - 130px);  height: auto;   padding:0px;}   
}
@media (max-width:840px) {
.product-right{width:100%;height: auto;  padding:40px 0px 0px 0px;  order: 2;}  
}
.product-right::-webkit-scrollbar { display: none;-webkit-appearance: none;}
.product-right::-webkit-scrollbar:vertical { width: 6px; }
.product-right::-webkit-scrollbar:horizontal {  height: 12px;}
.product-right::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}
.product-right::-webkit-scrollbar-track { border-radius: 0px;  background-color:#fff;}

.product-left{ width:50%; padding:20px 0px; margin:0px auto;order: 1;   }
.product-nav{ width:100px;  padding:20px 0px; margin:0px auto; order: 3;   }
@media (max-width:1180px) {
.product-left{ width:40%; padding:0px;}    
}



@media (max-width:840px) {
.product-left{ width:100%; margin: auto; padding: 10px 0px; order: 1;}
.product-nav{ width:100%; padding:20px 0px; margin:0px auto; order: 3;   }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px; border:none;  }
}
 
.box-for{width:100%; }
.box-nav{width:100%; padding:30px 10px;}
@media (max-width:1024px) {
.box-nav{ padding:0px;}
}
 


@media (max-width:767.98px) {
.box-nav{width:100%; order: 3; margin: 0px; padding: 10px 0px;  }
.box-for{width:100%; order: 2; }
}

.slider-for{width:100%; margin: 0px; padding: 0px; list-style: none;  }
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px; border-radius:15px; overflow: hidden; }
.slider-for li img{width: 100%; border-radius:15px; overflow: hidden;  }
.slider-for .slick-prev,.slider-for .slick-next{  top:35%;}

.slider-nav{ width:100%; height: auto; margin:0px; padding: 0px;   }
.slider-nav li{ width: 100%; opacity:1; margin:auto;padding: 5px; border-radius:5px;   }
.slider-nav li img{ width:100%; margin:0px; padding:0px; border: solid 1px #eee;border-radius:5px;opacity: .5;  }
.slider-nav li.slick-current img,.slider-nav li:focus img{opacity: 1;  border: solid 2px #000d3e}
 .slider-nav .slick-prev,.slider-nav .slick-next{  }
.slider-nav .slick-prev{left:25%; top:-40px;transform: rotate(90deg)}
.slider-nav .slick-next{left:25%; top:98%; transform: rotate(90deg)}


@media (max-width:1024px) {
.slider-nav li{  margin:5px;padding:0px;  }
}

@media (max-width:767.98px) {
.slider-nav li{ margin:10px 5px;padding: 0px; display: flex;  }
.slider-for li{  padding:0px;}
.btn-box.download,.btn-box.inquiry{transform: scale(.85)}
.slider-nav .slick-prev,.slider-nav .slick-next{width: 30px; height: 30px;}
.slider-nav .slick-prev{left:-22px; top:25px;transform: none}
.slider-nav .slick-next{left:auto; right:-22px; top:25px; transform:none}
 }
 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%;  margin:10px 0px; border-radius:0px; }
.product-group .btn{ width: 100px; height: 100px; margin: 0px auto 10px auto; display: flex; flex-wrap: wrap;justify-content: center; align-items: center; border-radius:0px;  border: solid 1px  #010b3e;overflow: hidden; }
@media (max-width:840px) {
.product-group{  display: flex; flex-wrap: wrap;justify-content: center;}
.product-group .btn{  margin:10px; width: calc(100%/3 - 20px); height: 100px;}	
 }

@media (max-width:640px) {
.product-group .btn{  margin:10px; width: calc(100%/3 - 20px); height: 80px;}	
}
 

.product-btn{width: 100%; margin:10px 0px; padding: 0px;   display: flex; flex-wrap: wrap;  }
.product-btn .btn{width:calc(100%/2 - 20px); min-height:50px;margin: auto 0px; padding: 0px 20px;  display: flex; }
@media (max-width:420px) {
.product-btn .btn{  margin: auto 10px auto 0px;  }
}

/*----------------------------------------/
social-icons
----------------------------------------*/
.share-wrap{  width: 100%; color:#555;  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.875rem;   }
.share-wrap span{width:auto;}
.share-wrap .share-icons{  width: 70%; margin: auto 0px; justify-content: flex-start;align-items: center; font-size: 0.875rem;}
.share-wrap .share-icons li{ width: 26px!important; height: 26px;  margin:5px; background-color: #555 }
.share-wrap .share-icons li a{ opacity:1;font-size:0!important;color:#0267a4!important;  }
.share-wrap .share-icons li i { background-size: 12px;  }
  
.btn-box {  background-color: transparent; border:none;  display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;  box-shadow: 0px 8px 8px rgba(0,0,0,.3);}

.btn-box  span{ font-size:.95rem;color:#fff; font-weight:700; letter-spacing:-.1px  }
.btn-box:hover { color: #fff; background-color:#000;  }
.btn-box:hover.download,.btn-box:hover.inquiry{ color: #fff; background-color:#555; border: solid 2px #555; transform: scale(.95)}

.btn-box.download{ border-radius:0px; border: solid 1px rgba(255,255,255,.15); background-color:#383535;}
.btn-box.inquiry{ border-radius:0px;  border: solid 1px rgba(255,255,255,.15);background-color:#9a000b; }
 

.btn-box i{ width:36px; height:36px;margin:auto 5px;filter: brightness(200%) grayscale(1) }
.btn-box i img{ width:36px; height:36px;margin:auto 5px;filter: brightness(200%) grayscale(1) }

.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
.product-info-title { width: 100%;   padding:0px 0px 20px 0px; }
.product-info-title h1{ font-weight: 700; font-size:1.75rem;font-size: min(max(3.5vw, .1.375rem), 1.75rem);line-height: 2rem;  letter-spacing: 0.5px;  }
.product-info-title h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#000;  word-spacing: normal; word-break:normal; }
.product-info-title p{  width: 100%; margin: 5px 0px; font-size:1.15rem; font-weight: 700; color:#727272;  word-spacing: normal; word-break:normal;  }
@media (min-width:1600px) {
.product-info-title h1{  font-size: 1.875rem;  }
}
@media (max-width:767.98px) {
.product-info{  padding:0px;  }    
}

 
.product-description{ width: 100%; padding:10px 0px; color:#888;   }
.product-description p {width: 100%; margin: 5px 0px; font-size:1.125rem; font-weight: 400; color:#333;  word-spacing: normal; word-break:normal;}
.product-description span {  word-spacing: normal; word-break:normal;}
.product-description p strong{color:#000;}
.way-delivery{ width: auto; font-size:1.125rem; font-weight: 700;  padding:2px 10px 2px 0px; color:#7c7d7d; }
.way-txt{ width:auto; font-size:1.125rem; font-weight: 700;  padding:2px 0px 2px 0px;  color:#000d3e;  }

@media (max-width:767.98px) {
.way-delivery{ width:100%; display:block; padding: 0px; text-align: left;  }
.way-txt{ width:100%; padding: 0px;   }
}

.btmline { border-bottom: 1px solid #e8e8e8; padding-bottom: 1.25rem; margin-bottom: 1.25rem; display: block;}

 
.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-full { width: 100%; padding:  10px; margin:10px 0px;}

 




.specbox .name { margin-bottom: 14px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#a8000c; 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: 1rem; color: #333;}



.spec-list{ width: 100%;  display: flex; flex-wrap: wrap; margin:10px 0px;padding: 0px; position: relative; }
.spec-list li{ width: 100%;  padding: 2px 5px 2px 14px; margin:0px 30px 10px 0px;font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.75rem; font-weight: 400;  position: relative ; list-style: none; color: #333  }
.spec-list li:before{ content: ''; width:6px; height:6px; background-color:#000; border-radius: 99rem; position: absolute; top: 14px; left: 0px;  transition: all 0.5s ease 0s;}
.spec-list.half li{ width: calc(100%/2 - 30px);}
@media (max-width:1024px) {
.spec-list li{  margin:0px 0px 5px 0px;font-size:0.9rem;line-height: 1.65rem;  }   
}

@media (max-width:767.98px) {
 .spec-list.half li{ width:100%;}   
}

.bg-tab{ 
	background-image: -moz-linear-gradient(90deg, rgb(221, 226, 232) 0%, rgb(234, 237, 240) 70%, rgb(246, 247, 248) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(221, 226, 232) 0%, rgb(234, 237, 240) 70%, rgb(246, 247, 248) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(221, 226, 232) 0%, rgb(234, 237, 240) 70%, rgb(246, 247, 248) 100%);
}
 

/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.resp-tabs-container{  padding:30px 0px;  background-color: #fff;}

.edit{width: 100%; max-width: 1160px; padding:30px 40px; margin: auto;}
@media (max-width:767.98px) {
.edit{ padding:30px 20px; }
}

.group-box { padding:30px;  display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; margin-bottom: 30px; background-color:#f0f0f0;border-radius:15px;  border: solid 1px #fff; box-shadow: 0px 0px 13px 0px #dbdee0;} 
.head-box{ padding: 40px 20px;   width: 100%;  border-left: 4px solid #000; background-color: #f7f7f7; }    
.head-box .title { font-size: 24px; font-weight: 500;}
.head-box .list-box { padding: 35px 64px;}
.head-box .list-box p{font-size:1.125rem;font-size: min(max(3.5vw, .95rem), 1.125rem);line-height: 1.75rem; font-weight: 400;}
@media (max-width:768px) {
 .head-box .list-box { padding: 30px;}   
}
@media (max-width:640px) {
 .head-box .list-box { padding:0px;}   
.head-box .title { font-size: 1.5rem; }    
}
.group-item{ display: flex; flex-wrap: wrap;  }
.group-item-box{ flex: 1 1 50%;display: flex; flex-wrap: wrap;  align-items: center }
.group-item-txt{ padding: 10px;margin: auto }
.group-item-txt p{font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.5rem; font-weight: 400; }

.group-item-pic{  flex: 1 1 25%; padding: 10px;display: flex; flex-wrap: wrap;  justify-content: center }
.group-item-pic p{font-size:1.275rem;font-size: min(max(3.5vw, .9rem), 1.275rem);line-height: 1.5rem; font-weight:700; color:#bf0008; text-align: center  }
@media (max-width:767.98px) {
.group-item-box{ flex: 1 1 100%; }	
.group-item-pic{  flex: 0 0 50%;  }    
}


.table-box{display: none}
 @media (max-width:767.98px) {
.table-box{display: block; background-color: #fff;}
.table-box .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center}
.table-box .wrap span{margin: auto 0; }
.table-box .txt-r{width: 30%;justify-content: flex-end; text-align: right}
.table-box .txt-name{width:70% }
.table-box .txt-center{text-align: center}

/*  Responsive2
------------------------------- */
.table-box{width: 100%; margin:auto ; padding:0px;}
.table-box .dl-row{ display: inline;}
.table-box dl{ display: flex; flex-wrap:wrap;align-items: center;position: relative; width: 100%; border-bottom: 1px solid #555; margin: 0; padding:3px 0;  letter-spacing: 1px;}
.table-box dl.noline{ border-bottom: none;}
.table-box dl.bottom-line{  border-bottom:2px solid #000; background-color:#eaeaea }
.table-box dl.mark img{ margin: 5px;}
.table-box dl.act dd{ color: #ce0000;}
.table-box dl dt{ width:65%; font-size: 0.875rem; font-weight:400;color:#575757;  padding: 1px 5px; }
.table-box dl dd{ width: calc(100% - 65%); font-size: 0.875rem; font-weight:700; text-align: center;}
.table-box .col.item {flex: 1 0 0; }
.table-box .full{ flex: 1 0 100%;}
.table-box .column{margin: auto 0; width: 100%;flex-direction: column}
.table-box .col {  padding: 0px 2px 0px 0px ;word-wrap: normal; word-break: keep-all; word-spacing: normal}
.table-box .item-half{margin: auto 0; width:50%;}
}





.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style: none}
.w-list li{ display: block; padding-left: 20px;  margin-bottom: 20px; font-size: 1.15rem;   font-size: min(max(3.5vw, .9rem), 1.15rem);font-weight:400; line-height: 1.5; letter-spacing: normal; color: #000;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:10px;position: absolute; background-color:#49b232; border-radius: 2px;}
.w-list li p{font-size: 1rem;   font-size: min(max(3.5vw, .875rem), 1rem);}
 @media (max-width:767.98px) {
 .w-list{  padding: 0px; }    
}
 
.spec-box{position: relative}
.spec-box .title-left{  width: 100%!important;  display: block; margin: 0; padding:20px 0px 10px 0px;   cursor: pointer; position: relative; }
.spec-box .title-left::before {position: absolute;  right:0px; top:30px; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top:10px; width:16px; height:16px; background-color:transparent;  border-top: 4px solid #e60012; border-right: 4px solid #e60012; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }


.spec-box .spec-table {   height: auto; }
.spec-box.active .title-3::before { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.spec-box.active .spec-table { max-height: 0; overflow: hidden; padding:0px; }
 

@-webkit-keyframes pulse3 {
0% { box-shadow:0 0 0 0 rgba(230,0,19,.6) }
to { box-shadow:0 0 0 20px rgba(230,0,19,0) }
}
  
   /* 汽車容器 */
        .car-wrapper { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding-top: 50px; }
        .car-bg { width: 100%; display: block; }
        
        /* 指示點 Pin 樣式 */
        .pin { 
            position: absolute; width: 16px; height: 16px; 
            background: #d32f2f; border-radius: 50%; cursor: pointer;animation: pulse3 1s 0s infinite both;
            transition: 0.3s;
        }

        /* 畫出垂直線 (::before) */
        .pin::before {
            content: ''; position: absolute; bottom:16px; left: 50%;
            width: 1px; height: 40px; background: #d32f2f;
            opacity: 1; transition: 0.3s;
        }

        /* 畫出文字標籤 (::after) */
        .pin::after {
            content: attr(data-title);
            position: absolute; bottom:55px; left: 50%;
            transform: translateX(-50%);
            background: #000; color: #fff; padding: 4px 10px;
            font-size: 1rem; font-weight: 400;  border-radius: 4px;
            opacity: 1; transition: 0.3s; white-space: nowrap;
        }

        /* Hover 互動效果 */
        .pin:hover, .pin.is-opened { background: #fff; }
        .pin:hover::before, .pin.is-opened::before,
        .pin:hover::after, .pin.is-opened::after { opacity: 1;  background: #d32f2f;  }

        /* 滑動區域 */
        .slider-container { width: 100%; max-width:960px; margin: 50px auto; }
        .card { padding: 10px; margin: 10px; text-align: center; outline: none; background: #333; }
        .card img { width: 100%; height: auto; border-radius: 0px; }
        .card a{  color: #fff;}

 .card h3{ margin:0px auto 10px auto; font-size:1.125rem;}

.pin-0 { top: 32%; left: 35%; }
.pin-1 { top: 40%; left: 72%; }
.pin-2 { top: 50%; left: 50%; }
.pin-3 { top: 42%; left: 8%; }
.pin-4 { top: 65%; left:8%; }
.pin-5 { top: 75%; left:10%; }
.pin.pin-5::before { bottom: -40px; }
.pin.pin-5:after { bottom: -60px; }

.slider-container .card.slick-current {background:#9a000b; }
.slider-container .slick-prev{left:-25px;}
.slider-container .slick-next{right:-25px;}


@media (max-width: 840px) {
.slider-container { padding: 0px 35px; }   
.slider-container .slick-prev{left:2px;}
.slider-container .slick-next{right:2px;}
}
@media (max-width: 640px) {
.slider-container{margin: auto}
.car-wrapper { transform: scale(0.85)}
.pin-3 { top: 40%; left: 8%; }
.pin-4 { top: 68%; left:8%; }
.card h3{font-size:1rem;}
}
/* .product*/
.product{ width: 100%; margin: auto; padding: 0px; display: flex;  flex-wrap: wrap;justify-content: flex-start;}
.product li{  width: calc(100%/3 - 10px);   margin:10px 10px 10px 0px;  list-style: none;}
.product li .item { width: 100%; margin: auto; position: relative; transition: .3s ease-in-out; background-color: #000; overflow: hidden; }
.product li .inner{ position: absolute; left:0px; top:0px; width: 100%; height: 100%; padding: 20px; z-index: 9;}
.product li .inner h3{ color:#9a000b;  margin-bottom: 15px; font-weight: 700; font-size: 1.375rem; line-height: 1.2;}
.product li .inner a h3 { color:#fff;  text-decoration: none;}
.product li .inner p{ color:#fff;margin-bottom: 30px;padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400;  overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;} 
.product li figure{ position: relative;  z-index: 1; opacity:.15; width:100%;  padding-top:75%; height: 0;  overflow: hidden; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.product li figure img { width: 100%; max-width: 100%;  transition: all .35s ease;}
/* hover */
.product li .item:hover figure {opacity: 1; }
.product li .item:hover figure img { transform: scale(1.05)}
.product li .item:hover .inner{opacity: 0; }

 .icon-next { background: url(../images/icon/arrow-right-2.svg) no-repeat left 0px;  background-size: auto;}
/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.product  li {  width: calc(100%/2 - 10px);  }
}
/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.product li { flex: 0 0 auto; width: 100%; margin-bottom: 20px;  }
.product li .item{  width: 100%;}
}

/*--分類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;   position: absolute; left:0px; top: 0px; z-index: 11; }
.new-tag a{color:#fff;}
.new-tag-01{ background:#e7364b;}

 
 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc( 100%/4 - 20px);  margin:40px 10px 40px 10px; padding:0px; height: auto; overflow: hidden; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; list-style: none; position: relative;  border-radius:0px 30px 0px 0px; transition: all 0.3s linear 0s;  background-image: linear-gradient(to bottom, rgba(216,227,235,.75) 50%,rgba(235,241,245,.25) 100%); }
.product-item li figure{ position: relative; width:100%;  padding-top:75%; height: 0;  overflow: hidden;  border-radius:0px 30px 0px 30px; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.product-item li img {  width: 100%; max-width: 100%;  transition: all .35s ease;}
.product-item li:hover img { transform: scale(1.1);  opacity: 1; }
.product-item li:hover figure{ }
.product-item .inner{ width: 100%;  padding: 10px;  position: relative;  } 
.product-item .inner h3{ width: 100%; margin: 10px 0px 0px 0px; font-weight:700; font-size:1.125rem;  color:#000; line-height:1.5rem;overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.product-item .inner h3 a {  color:#263f54; }
.product-item .inner p{  font-size: .9rem; line-height: 1.35rem; font-weight: 500; color:#312927; } 
.product-item .inner-txt{ max-height:70px; margin-top: 10px;  color:#312927; overflow: hidden; word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align: top; }
.product-item li:hover h3 ,.product-item li:hover .inner-txt{color:#9a000b;}
.product-item li:hover p {color:#b78603;}

.inner-title{font-size: .75rem;  line-height: 1.35rem; color:#312927;}
.input-small{ width: 100%;min-height: 36px; padding: 0px 5px; border: solid 1px #dddddd;font-size: .875rem;color:#c1c1c1; border-radius: 5px; }

.product-item li .btn-area { width: 100%; background-color:transparent; display: flex; flex-wrap: wrap;  opacity: 0;  position: absolute; left:1px;top:150px;  z-index: 99; transition: all .35s ease;}
.product-item li:hover .btn-area {  visibility: visible; opacity: 1; }
.product-item li:hover .btn-link {  text-decoration: none;}

.btn-area .btn-link {width: 100%;margin: 0px; text-align: center;  display: flex; flex-wrap: wrap; align-items: center; padding: 5px; font-size:1rem;  font-weight: 500; color: #fff;  }
.btn-area .btn-link .btn-box{ width: calc(100%/2 - 10px); margin: auto;  display: flex; flex-wrap: wrap; align-items: center;}

.product-item li .btn-box i{ width:26px; height:26px;margin:auto 5px;filter: brightness(200%) grayscale(1) }
.product-item li .btn-box i img{ width:100% ; height:auto; margin:auto 5px;filter: brightness(200%) grayscale(1) }



@media only screen and (max-width:1024px){
.product-item li {width: calc(100%/3 - 20px); margin:30px 10px; padding:0px; }
}
@media (max-width: 767.98px) {
.product-item li { width: calc(100%/2 - 10px); margin: 20px 5px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1;   }
 
.product-item .inner h3{  margin: 0px auto; font-size: 1rem; line-height: 1.25rem;  -webkit-line-clamp: 3;  }
.product-item li .inner p{ font-size: 0.75rem;  }
.product-item li .btn-area { top:20px; bottom:auto;  }
}
@media (max-width:380px) {
.product-item li { width: calc(100% - 10px); margin:25px 5px;   }   
}
 
.best-wrap{  width: 100%; margin:0 auto; padding:20px 0px; background: linear-gradient(to bottom, #eeede9 , #f5f6f6);}
.best-wrap .product-item {height: auto;}
.best-wrap .product-item li { width: calc( 100% - 20px); margin:30px 10px; padding:0px;   }
.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next,.best-wrap .news-list .slick-prev,.best-wrap .news-list .slick-next{  top:-88px;  }
.best-wrap .product-item .slick-prev,.best-wrap .news-list .slick-prev{ left:calc(100% - 100px);}   
.best-wrap .product-item .slick-next,.best-wrap .news-list .slick-next{right: 0px;}
@media (max-width:480px) {
.best-wrap .product-item li { margin:20px 10px; padding:0px;}
  
}