.main-area.top { background-color:#f2f2f2;  }
.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;}
}
 
 
 /*font-size*/
.title { font-size: 1.25rem; font-weight: 700; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 768px) {
.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; }
}
 

.product-cate{width: 100%; padding: 50px 0px;  position: relative; z-index: 1;}
 @media (max-width: 992px) {
.product-cate{ padding:0px 0px 50px 0px;  }    
     
}

 @media (min-width: 1600px) {
.product-cate{width: 100%; padding: 50px ;  margin: auto; }
}

.product-cate li { margin: 100px auto;  display: block; transition: all 0.3s linear 0s; list-style: none; position: relative; z-index: 1; }
.product-cate li .item{width: 100%;  display: flex; flex-wrap: wrap; }
.product-cate li:nth-child(even) .item{flex-direction: row-reverse; }

  /*font-size*/
.product-cate li h3 {margin-bottom: 10px; font-size:2rem;  font-weight: 500; color: #000; letter-spacing: 1px;overflow: hidden; text-overflow: ellipsis;  -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
.product-cate li .photo { width: 55%;  padding: 0px; border-radius: 0.75rem;overflow: hidden  }
.product-cate li .photo figure{ width: 100%;  padding-top:66.5%;height: 0; border-radius: 0.75rem;  object-fit: cover; overflow: hidden; position: relative;  }
.product-cate li .photo figure img{   border-radius: 0.75rem;}
.product-cate li .inner-box {width: 45%;margin:auto; padding: 25px 30px;   }
 

.product-cate li .inner-box .inner-txt{ margin: auto 0px 30px auto;   }
.product-cate li .inner-box .desc { font-size:1rem; line-height: 1.75rem;font-weight:400; color: #747373;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); font-family: "Noto Sans TC", sans-serif; }
.product-cate li .inner-box .btn-1{ margin: 15px 0px; padding: 4px 10px 6px 15px;}
@media (max-width: 1440px) {
.product-cate li { margin: 50px auto;  }
 }
@media (max-width: 1280px) {
.product-cate li { margin: 30px auto;  }
 }


@media (max-width:992px) {
.product-cate li { margin:50px auto;}   
.product-cate li .photo{  width:100%; padding: 0px 20px;   border-radius: 30px 30px 0px 0px;  }
.product-cate li .inner-box,.product-cate li:nth-child(even) .inner-box  { width: 100%; margin: 0px auto;padding:30px 20px;border-radius: 0px 0px 30px 30px;   }   
.product-cate li .inner-box .inner-txt{  width: 100%; align-items: flex-start;  }  
.product-cate li h3 {font-size:1.875rem;line-height: 2rem; letter-spacing: 0px; }   
 }
@media (max-width:767.98px) {
.product-cate li { margin:20px -20px;}   
	
}
@media (max-width:320px) {
.product-cate li h3 {font-size:1.5rem; }   
.product-cate li h3 span{font-size: .9rem;}
}

/*--分類new-tag --*/
  
.new-tag { font-size:0.875rem; color:#fff;padding:2px 10px; margin:2px;  border: solid 1px #444; background-color:#444;  position: absolute; z-index: 99;left:10px; top: 10px;    }
.new-tag:hover {color:#fff; background:#a48b79; border-color:#a48b79}
.new-tag a{color:#fff;}
@media (max-width:992px) {
.new-tag { font-size: .75rem; left:0px; top: 0px;  }
    
 }
 /*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
.product-item { width:calc(100% + 30px); margin:0px -15px;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc( 100%/4 - 40px); margin:30px 20px; padding:0px ; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative;   }
.product-item li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;   }
 
.product-item li:hover img {opacity: 0.5;}
.product-item .inner{width: 100%;  padding: 10px 0px; position: relative;} 
.product-item .inner h3{ width: 100%;margin:0px; font-weight:500; font-size:1.175rem;  color:#000; line-height:1.875rem;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 a h3 {  color:#263f54; }
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: .9rem; line-height: 1.5rem; font-weight: 600; color:#312927;  overflow: hidden; white-space:pre-wrap;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;} 

.product-item .inner-txt{min-height: 68px;  font-size: .875rem;  line-height: 1.35rem;color:#312927; 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 li:hover a h3,.product-item li:hover .inner-txt{color: #a48b79;}
/* 
.note-wrap { position: relative;  padding:0px 5px; width:100%;; height:30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:0.75rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.note  { width: 30px; height: 30px; margin: -20px 10px 0px 5px; }
.note img { width: 100%; height: auto; display: block; }
*/
.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:hover .btn-area { visibility: visible; display: flex;   opacity: 1; transform: translateY(-110px) }
.btn-area {  display: none;  display: flex;width: 100%; background-color:transparent; position: relative;  visibility: hidden;  opacity: 0; transform: translateY(-120px);   transition: all .35s ease;}
.btn-area .btn-link {  width: calc(100%/2);margin: 0px; text-align: center;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding:10px 5px;font-size:0.75rem;  font-weight: 500; color: #fff;  }
.btn-area .btn-link i { width: 20px;  height: 20px;  margin: 0px 5px;  display: inline-block;}
.btn-area .btn-link.more {background-color:#0067a4; }
.btn-area .btn-link.inquiry{ background-color:#51bbfa; }
.btn-area .btn-link:hover{   box-shadow: 0 2px 10px rgba(0,0,0,.3); }
*/
@media only screen and (max-width:1180px){
.product-item .inner h3{  font-size:1rem; line-height:1.5rem; }

}
@media only screen and (max-width:1024px){
.product-item li {width: calc(100% /3 - 30px); margin:30px 15px; padding:0px; }
}
@media (max-width: 767.98px) {
.product-item li { width: calc(100% / 2 - 30px); margin: 10px 15px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1;   }
.product-item li:nth-child(3n){margin-right: auto;}
.product-item li:nth-child(2n){margin-right: auto;}
.btn-area .btn-link {line-height: 1.15rem;   }
.btn-area .btn-link i {  margin: 0px auto;  display: block;}   
.input-small{ width: 100%; height: 44px; background: #fff; }
.product-item li:hover .btn-area {   transform: translateY(-190px) }
}
@media (max-width:320px) {
.product-item li { width:100%; margin: 10px auto;   }
}



/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; margin:0 auto; padding:20px 0px;  background-image: linear-gradient(to bottom, #fff 0%, #ebeff2 50%, #fff 100%);}
.best-wrap .product-item {height: auto;}
.best-wrap .product-item li { width: calc( 100% - 20px); margin:40px 10px 40px 10px; padding:0px;   }
i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("../images/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}
 
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
 .product-wrapper { width: 100%; margin:auto; padding:0px 0px 30px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  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(100% - 30px);  margin:0px auto;  padding: 0px;  position: relative;  z-index: 1;  }
.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:100%;  padding: 0px;  margin:0px auto;  position: relative; z-index: 0;  }
@media (max-width:1024px) {
.product-left{width:100%;  }	
}



@media (max-width:840px) {
.product-wrapper { flex-direction: column-reverse }
.product-left{width:100%;padding: 5px 0px 0px 0px;  }  
.product-right{ width:100%; margin: auto; padding: 10px 0px;  }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px;}
}


.slider-for{  width:85%; margin: 0px ; padding: 0px; list-style: none;  }
.slider-for li{ margin:0px;padding:0px;}
.slider-for li figure{  width: 100%; padding-bottom:53.375%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.slider-for .slick-prev,.slider-for .slick-next{  top:35%;}
@media (max-width:840px) {
 .slider-for li{  padding:0px;}    
}
@media (max-width:767.98px) {
.slider-for{  width:100%; }
.slider-for li{  padding:0px;}
.slider-for .slick-prev{ left:-15px;}
.slider-for .slick-next{ right:-15px;}   
}

.slider-nav{ width:15%;margin:auto 0px; padding:0px;  align-items: center }
.slider-nav li{ opacity:.5; margin:10px auto ;padding: 5px; background: #fff;   }
.slider-nav li img{ width:100%; margin:auto; padding:0px;  }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav .slick-prev{  top:-36px; left:35%; right: auto; transform: rotate(90deg)}
.slider-nav .slick-next{ top:auto;bottom:-36px; left:35%; right: auto;transform: rotate(90deg)}
.slider-nav .slick-prev,.slider-nav .slick-next{  width: 36px; height: 36px;}
.slider-nav .slick-prev:before,.slider-nav .slick-next:before{ width: 26px; height: 26px;}
@media (max-width:767.98px) {
.slider-nav{ width:100%;}
}
 /*----------------------------------------/
btn區塊
----------------------------------------*/
.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;   align-items:center;  }
@media (max-width:1024px) {
.product-info{ padding:0px; }
}
.product-info-title { width:70%;  padding: 40px 0px 0px 0px; margin: auto;-webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.product-info-title h1 {font-size: clamp(1.125rem, 2.3vw, 1.875rem); letter-spacing:2px;color:#684915; margin: 10px 0px;  }
.product-info-title h2{margin-bottom: 30px; font-size:1.15rem;   word-spacing: normal; word-break:normal; }
.product-info-title p{font-size: clamp(.875rem, 2.3vw,1rem);line-height: 1.75rem; font-weight: 400; color: #A48B76;  margin-bottom: 20px; } 
@media (max-width:1024px) {
.product-info-title { width:100%;  padding: 40px 0px 0px 0px;  }
}


@media (max-width:767.98px) {
.product-info-title {padding: 0px 20px 40px 20px;   }    
}
@media (max-width:640px) {
.product-info-title {padding: 0px 0px 20px 0px;   }      
}
@media (max-width:320px) {
.product-info-title p{ font-size:1rem; line-height: 1.375rem;}      
}
 
.pdd-toggle-area{  width: 30%;margin:20px 0px 0px 0px; display: flex; flex-wrap: nowrap; align-items: center;  }
.pdd-toggle-area .btn{ width:calc(50% - 10px);  margin: auto 5px;}
@media (max-width:1024px) {
.pdd-toggle-area{ width: 60%; margin:20px 0px; }    
}
@media (max-width:840px) {
.pdd-toggle-area{ width:100%; margin:20px 0px; }    
.pdd-toggle-area .btn{ max-width: 100%;;margin:0px 10px 0px 0px; flex-direction: column } 
}
@media (max-width:767.98px) {
.pdd-toggle-area{ width: 100%;  }        
}

@media (max-width:320px) {
.pdd-toggle-area{ flex-direction: column;}   
.pdd-toggle-area .btn{ width: 100%;;margin:10px auto; }  
}

.note-group{width: 100%; margin:10px 0px; border-top:solid 1px #eee}
.note-group .note-wrap {margin:10px 0px;  justify-content: flex-start; }
.note-group .note{ margin: 15px}


.product-description{ width: 100%; padding:25px 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;}
.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 p strong{color:#000;}

.item-title { width: 100%;padding:20px 0px; margin-bottom: 10px;}
.item-title p{ font-size: .875rem; color: #666;}
.item-title-full { width: 100%;padding: 0px 10px; margin-bottom:30px;}
 
.specbox { margin:0px auto 50px auto; }
.specbox p { font-size:1rem;  }
/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.edit{width: 100%; max-width: 1160px; padding:15px 5px; 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;}
.w5{ width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
.spec{ width: 100%;  margin: auto; list-style: none; padding:50px 0px; counter-reset: index; }
.spec li { width: calc(100% - 56px); padding: 0px; margin-bottom: 15px; display: block;   counter-increment: index; position: relative;}
.spec li::before { margin-right: 20px; padding:5px; z-index: 3; content: counters(index, ".", decimal-leading-zero); font-size: 1.125rem; text-align: center;  font-weight: 700; font-variant-numeric: tabular-nums; align-self:center; ; background-attachment: fixed;  -webkit-background-clip: text; -webkit-text-fill-color: #fff;  background:#215284; border-radius:99rem;}
.spec li:hover{ background:#f8f7f7;}
.spec li .m-tag{ margin: 2px 5px; height: 26px; padding:0px 5px 2px 5px; background-color: #f66a2c; border-radius:10px; color: #fff; text-align: center;  position: relative;}
@media (max-width:768px) {
.spec li::before {display: block; margin: 0px; width:40px; height: 40px;}
.spec li { width:100%; }
}



.tab-content {padding: 40px 0px;}
.tab-content .editor { max-width: 515px; color: #4a4a4a; line-height: 1.6; letter-spacing: 1px}
.tab-content>.main-wrap img {  display: block; max-width: 100%}
.tab-content .left-box { width: 28.5%}
@media (max-width: 767px) {
.tab-content .left-box { display:none  }
}

.tab-content .right-box { padding-left: 100px;  width: 71.5%;  -webkit-box-sizing: border-box; box-sizing: border-box}
@media (max-width: 1180px) {
.tab-content .right-box { padding-left:30px }
}

@media (max-width: 767px) {
.tab-content .right-box { padding-left:0; width: 100% }
}
.tab-content .pic-box { position: relative; margin-top: 70px; padding-left: 35px; display: flex}
@media (max-width: 1180px) {
.tab-content .pic-box { padding-left:0 }
}

@media (max-width: 480px) {
.tab-content .pic-box { margin:40px -20px 0 }
}
.tab-content .pic-box:before { content: ""; position: absolute; top: 0; left: 185px; width: 450px; height: 325px; background-color:#f7f6f6;}
@media (max-width: 960px) {
.tab-content .picBox:before { left:auto; right: 40px  }
}

@media (max-width: 640px) {
.tab-content .pic-box:before { width:75%; height: 50vw }
}

.tab-content .pic-01 { position: relative}
.tab-content .pic-01 img { position: relative; margin-left: auto; z-index: 1}
.tab-content .pic-01:before { content: ""; position: absolute; bottom: -60px; left: -30px; width: 95%; height: 50%; background-color:#fcf8f9}

.tab-content .pic-02 { position: relative; margin-top: 150px}
@media (max-width: 1180px) {
.tab-content .pic-02 { margin-top:80px }
}

.tab-content .pic-03 { position: relative; margin-top: 25px;  margin-left: 105px; margin-right: -55px}
@media (max-width: 1530px) {
.tab-content .pic-03 { margin-right:0 }
}

@media (max-width: 1180px) {
.tab-content .pic-03 { margin-left:30px}
}

@media (max-width: 480px) {
.tab-content .pic-03 { margin-left:10px  }
}

/*
.inner-box {  margin: auto; padding:0px;   }
.inner-box h3 { margin-bottom: 30px; font-size:clamp(1rem, 2.3vw, 1.75rem); font-weight:600; color: #000  }
.inner-txt{ margin: auto 0px 20px 20px;   }
.main-name { margin-bottom: 10px; font-size:clamp(1rem, 2.3vw, 1.375rem); font-weight:600; line-height: 1.5; letter-spacing: normal; color:#684914;}
.main-name:before { width: 1px; height:20px; content: ""; display: inline-block; margin-right: 8px;  margin-top: 4px; background-color:#684914; }
.main-summary { margin-left: 10px; }  
.main-summary p{  font-size:clamp(.9rem, 2.3vw, 1rem);line-height: 1.7rem; font-weight: 600; color: #54703e;}  
.item-container {  display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding:  50px;}
.item-container >.item-column {  width: calc(100% - 20px);  margin-left: 20px;}
.item-main-row { position: relative; margin-bottom: 63px;  }
.item-main-summary { padding-left: 20px;  font-size: 1.125rem; font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 400;  line-height:1.75rem;  line-height: 1.875rem;  letter-spacing: 1px;margin-top: 11px;}  
.item-main-summary p{font-size:clamp(.9rem, 2.3vw, 1rem);line-height: 1.7rem; font-weight: 600;  }
.item-main-name { margin-bottom: 20px;padding-left: 20px; font-size: clamp(1rem, 2.3vw, 1.5rem);font-weight: 400;  line-height:1.75rem; letter-spacing: 2px; color:#684918;}
.item-main-name:before { width: 10px; height:10px; content: "";  position: absolute; left:0px; top:10px; margin-right: 8px;  margin-bottom: 4px; background-color:#684918; border-radius: 3px; transform: rotate(45deg);}
.item-image{position: relative;}
.item-main-row:before {content: ""; display: block; top: 0px;left:4px; width: 1px;height: calc(100% + 80px);  background-color:#684918;  position: absolute; transition: all 1.05s 0.85s ease-in-out;  pointer-events: none;}
@media (max-width:840px) {
.item-container{padding: 0px 40px;}
.item-container .wrapper{padding: 0px;}    
.item-main-name {font-size: 120%;}   
}
@media (max-width:768px) {
.item-container {padding: 0px 0px 30px 0px;}   
.item-container .wrapper{padding: 0px 30px;}   
.item-container >.item-column:nth-child(odd),.item-container >.item-column:nth-child(2n) { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-left: 0px;padding:  20px; }
}

@media (max-width:767.98px) {
.item-main-name { font-size: 125%; }   
}
@media (max-width:320px) {
.item-main-name { font-size: 100%; }   
.item-container .wrapper{padding: 0px 20px;}   
.item-container >.item-column:nth-child(odd),.item-container >.item-column:nth-child(2n) {padding: 20px 10px; }
}
.item { position: relative;  display: block;  padding:40px 0px; }
@media (max-width: 1280px) {
.item { margin-bottom: 0px;}   
}

*/

.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style: none}
.w-list li{ display: block; padding-left: 20px;  margin-bottom: 10px;font-size: clamp(.9rem, 2.3vw, 1rem);  font-weight:400; line-height: 1.5; letter-spacing: normal; color: #54703e;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:5px;position: absolute; background-color:#54703e; border-radius: 2px;}
.w-list li p{font-size: clamp(.875rem, 2.3vw, 1.5rem);}
@media (max-width:767.98px) {
.w-list{  padding: 0px; }    
}


/*table css*/
:root { --stickyBackground: #eee; --borderColor: #C9D1DC;}
.table-wrapper { width: 100%;  height: auto;  margin: 0px auto 30px 0px;  overflow: auto; }
@media (max-width: 991.98px) {
.table-wrapper { width: 100%; height: 320px; border: 1px solid var(--borderColor); overflow: auto;}
}
.datatable { width: 100%; border-spacing: 0; margin: auto; border: 1px solid var(--borderColor);}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}

.datatable thead { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;}
.datatable tbody { font-size: .9rem;}
.datatable th, .datatable td { font-size:.9rem; padding: 15px; white-space: nowrap; border-bottom: 1px solid var(--borderColor);  border-right: 1px solid var(--borderColor);}
.datatable thead td{ color: #000;  font-weight: 700; }
/*.datatable tr:last-child td { border-bottom: none; border-right:none;}
*/
.datatable tr:nth-child(even) {background-color:#f5f9ff; }



/*STICKY ROW Normal css box-shadow works for the header as it is a single html element*/
.datatable tr.sticky {color: #fff; font-weight: 700; position: sticky;  top: 0;  z-index: 1;  background-image: linear-gradient( 135deg, #1D528B 10%, #3C8CE7 100%);box-shadow: 0 0 6px rgba(0,0,0,0.25);}
/*STICKY COLUMN Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.*/
.datatable th.sticky,.datatable td.sticky {  color: #000;  font-weight: 700;  position: sticky; left: 0; background: var(--stickyBackground);}
.datatable th.sticky::after,.datatable td.sticky::after {  content: ""; position: absolute; right: -6px; top: 0; bottom: -1px;  width: 5px; border-left: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);}
.datatable th.sticky::before,.datatable td.sticky::before { content: ""; position: absolute; left: -6px; top: 0; bottom: -1px;  width: 5px; border-right: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);}

 @media (max-width:320px) {
.datatable tr.sticky {   position: relative;  }
.datatable th.sticky,.datatable td.sticky {  position: relative; }
}

.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 #ed6d34; border-right: 4px solid #ed6d34; -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; }

 
.video { width:480px;margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  position: relative; transition: all 0.3s linear 0s; 
border: 1px solid #fff3eb;background: #fffaee;  box-shadow: 0px 2px 4px rgba(172, 184 ,204 ,.25), 0px 4px 4px rgba(172, 184 ,204 ,.2), 0px 8px 8px rgba(172, 184 ,204 ,.15), 0px 16px 16px rgba(172, 184 ,204 ,.1), 0px 24px 24px rgba(172, 184 ,204 ,.25);mix-blend-mode: multiply; border-radius:15px;  overflow: hidden;  }

.video figure{ position: relative; width:100%;  height: 0; padding:75% 0px 0px 0px; overflow: hidden;object-fit: contain;background-color: #fff; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.video figure img { max-width: 100%; height: auto; transition: all .35s ease;  }
.video:hover figure{  transform: scale(1.05)}


.video-title { width: 100%; max-height: 56.7px; margin: auto; padding:10px 0px; color:#565656; font-size:1rem; line-height: 1.375rem;  font-weight:400; overflow: hidden; word-break:normal;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.video .btn-play {   margin: auto; z-index:99; } 


@media (max-width: 1024px) {
.video { width:100%; padding:0px; }   
}

@media (max-width: 768px) {
.video li{ width: calc(100%/2 - 50px); margin: 50px 25px;  }
}

@media (max-width: 767.98px) {
.video { width: 100%; margin: 30px auto;}
.fancybox-slide--iframe .fancybox-content { padding: 0px;  width: 100%!important; height: 80%; max-width: calc(100% - 10px); max-height: calc(100% - 100px);}
}

.application-item { width:100%; margin:30px auto; padding:0px; position: relative; z-index: 99;}
.application-item li { width:calc(100%  - 30px); margin:50px 15px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.application-item li .item{width: 100%; display: flex; flex-wrap: wrap;  align-items: flex-start;}
.application-item li:nth-child(even) .item{ flex-direction: row-reverse}
.application-item li:nth-child(even) .item-inner{  margin: auto auto auto -10%;}
.application-item li .item-inner{width:40%; margin: auto -10% auto auto; padding:30px 40px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start;position: relative;z-index: 9;    background-color: #f6f6f6; box-shadow: 0px 5px 5px rgba(0,0,0,.1) } 
.application-item li .item-pic{ width: 60%; display: flex; flex-wrap: wrap; justify-content: center; align-items:center; }
.application-item li .item-pic figure{ width: 100%; padding-bottom: 62.25%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  }
.application-item li .item-pic figure img { max-width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s;   }
.application-item li .item-pic figure:hover img { transform: scale(1.1);  opacity: 1; }
.application-item li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-size:2rem;  font-size: min(max(3.5vw, 1.15rem), 2rem);font-weight:700; line-height:2.25rem;color: #2f6392;    word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; }

.application-item li  h3:first-letter{ color:#225383;}
.application-item li p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.75rem;  font-weight: 500;  overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;} 

.application-item li .item-inner-txt{ width: 100%;  padding:0px;margin:0px 0px 40px 0px;  position: relative;} 
.application-item li .item-inner-txt:after{ content: "";  width: 10%; height: 4px; position: absolute; left:0px; bottom:0px;  background: #225383;} 


@media (max-width:1024px) {
.application-item li {margin:0px 15px;}   
}

@media (max-width:840px) {
.application-item li { width: 100%; margin:30px auto 50px auto;padding:0px; }
.application-item li .item-inner{width:100%; margin: 0px; padding:20px 40px;   } 
.application-item li .item-pic{ width:100%; }   
.application-item li:nth-child(even) .item-inner{  margin: auto;}    
}
@media (max-width:767.98px) {
.application-item li .item-inner{ padding:30px;}   
.application-item li h3{  font-size:1.125rem; line-height: 1.5rem;  }
.application-item li p{   font-size:.875rem;  } 
}

@media (max-width:320px) {
.application-item li .item-inner{ padding:30px 10px;}   
}