.main-area.top { background-color:#f2f2f2; /*background-color: #eff5f9;*/}
.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; }
}
.bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }

.product {  margin:auto -15px ; padding: 0px; display: flex;flex-wrap: wrap; align-items: flex-start; position: relative;z-index: 1;}
.product li {width: calc(100%/4 - 30px); margin:0px 15px 50px 15px; border: solid 1px #eee;position: relative;  transition: all 0.3s linear 0s; list-style: none; }
.product li .item{width: 100%; background: #fff;  }
.product li .inner-body {  width:100%; height: auto; padding:10px 20px; }
.product li h3 { position: relative; z-index: 5; margin:20px auto 10px auto; min-height:48px; font-size:1rem; font-weight: 600; line-height: 1.65rem; color: #000;  text-align: center; letter-spacing: 1px;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); }
.product li h3 a{color:#0197dc;}
.product li p { min-height:86px; font-size:1rem;font-size: min(max(3.5vw, .9rem), 14px);font-weight: 400;  line-height: 1.75rem; color: #000;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word;   }
.product li .photo { width: 90%; height: auto; padding: 0px; margin: auto; overflow: hidden; position: relative; z-index: 0;  }
.product li .photo figure{ width: 100%; padding-top:100%; height: 0; object-fit: cover;overflow: hidden;  position: relative; transition: all 0.5s ease 0s;}
.product li .photo figure img { max-width: none;  transition: all 2s ease-in-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
/*hover*/
.product li:hover{box-shadow: 0px 9px 9px rgba(1,151,220,.1); border-color:rgba(1,151,220,.1); }
.product li:hover .photo figure img {transform: scale(1.1);}
.product li:hover h3::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.product li:hover h3 a{color:#004297;}
.product li:hover p{color:#0197dc;}
.product .slick-prev{ top:auto; bottom:-10px; left:calc(50% - 65px) }
.product .slick-next{ top:auto; bottom:-10px; right:calc(50% - 65px)   }
@media (max-width:992px) {
.product li {width: calc(100%/3 - 30px); margin:0px 15px 50px 15px;  }
.product li h3 { font-size:1.275rem; line-height: 1.75rem; margin-bottom: 10px; }
}
@media (max-width:767.98px) {
.product { margin:0px -10px;}   
.product li {width: calc(100%/2 - 10px); margin: 10px 5px;}    
.product li h3 { font-size:1.275rem; margin-bottom: 10px; }   
.product .slick-prev,.product .slick-next{  top:0; bottom:auto;  width: 36px;  height: 36px;}
.product .slick-prev{ left:calc(100% - 80px);}
.product .slick-next{ right:0px;}
}
 @media (max-width:320px) {
.product li {width: calc(100% - 10px); margin: 10px 5px;}    
.product li h3 { font-size:1.15rem; margin-bottom: 10px; }   
}
 @media (max-width:280px) {
 .product li {width: 100%;}    
}
 /*--分類new-tag --*/
.new-tag {  width: auto; padding:5px ; font-size: .75rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:20px; top: 20px; background-color: #012c53;border-radius:10px;  }
.new-tag a{color:#fff;}
@media (max-width:992px) {
.new-tag {  width: auto;   left:auto; right:0px; top: 0px; border-radius:0px 20px 0px 20px;   }
}
 /*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
 @media (max-width:840px) {
.product-item { padding:0px; }
}
.product-item li { width: calc( 100%/3 - 20px); margin:40px 10px 40px 10px; 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;  border-radius:30px;  background-image: linear-gradient(to top, #d6e8f3 0%, #fff 100%);}
 @media (max-width:992px) {
 .product-item li figure{ border-radius:20px;  }
}
/*--橫式樣式--*/
.product-item li.photo-v figure{  width: 100%; padding-bottom:50%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li:hover figure{ background-image: linear-gradient(to bottom, #d6e8f3 0%, #fff 100%); }
.product-item .inner{  width: 100%;  padding: 10px 0px; text-align: center; position: relative;} 
.product-item .inner h3{ width: 100%;margin: 10px auto; font-weight:700; font-size:1.875rem;  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;} 
 @media (max-width:992px) {
.product-item .inner a p{   line-height: 1.125rem;  } 
}
.product-item li:hover a h3,.product-item li:hover a p{color:#0197dc;}
@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 - 20px); margin: 10px 10px; 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;}
 }
@media (max-width:320px) {
.product-item li { width:100%; margin: 10px auto;   }
}


.application-list .product-item  .slick-prev{ top:40%; bottom:auto; left:-25px }
.application-list .product-item  .slick-next{ top:40%; bottom:auto; right:-25px }
/*---------------------------------
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}

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

/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
 .product-wrapper { width: 100%; margin:auto; padding:50px 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:65%;  padding: 0px;  position: relative; display: flex; flex-wrap: wrap; z-index: 1;background-color:transparent;  }
.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:35%;  padding: 0px;  margin:0px auto;  position: relative; z-index: 0;  }

@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;}
}


.box-for{width: 100%; position: relative; }
.slider-for{  width:100%;max-width: 80%; margin: 0px auto; padding: 0px; list-style: none;  }
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px;}
.slider-for li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.slider-for .slick-next{  top:35%; right:60px;}
.slider-for .slick-prev{  top:35%; left:60px; }

@media (max-width:1024px) {
.product-left { width: 55%;}
.product-right { width: 45%;}
}
@media (max-width:840px) {
.box-for{ display: flex; flex-direction: column}
.slider-for{max-width: 100%;  order: 2 }  
.slider-for li{  padding:0px; max-width: 100%;}    
}
@media (max-width:767.98px) {
.slider-for li{  padding:0px;}
.slider-for .slick-prev{ left:-15px;}
.slider-for .slick-next{ right:-15px;}   
}

 /*----------------------------------------/
btn區塊
----------------------------------------*/

.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;   align-items:center;  }
@media (max-width:767.98px) {
.product-info{ padding:0px; }

}
.product-info-title { width:100%;padding: 40px 0px 0px 0px; margin: auto;-webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.product-info-title h1 {margin:10px 0px 20px 0px;  font-weight: 700; font-size: 1.6rem;line-height: 2.5rem; letter-spacing:2px;  color: #316594;position: relative }
span.pro-title {margin:10px 0px 20px 0px;  font-weight: 700; font-size:3.49rem;line-height: 3.75rem; color: #316594;position: relative }
.product-info-title h2{   margin-bottom: 30px; font-size:1.15rem; font-weight: 600;   word-spacing: normal; word-break:normal; }
.product-info-title p{ font-size:1rem;line-height: 1.75rem; font-weight: 400;  margin-bottom: 20px; } 
@media (max-width:1400px) {
 span.pro-title  {font-size:3.14rem;}
}
@media (max-width:1200px) {
 span.pro-title  {font-size:2.6rem;}
}
@media (max-width:1024px) {
.product-info-title { width:100%;  padding: 40px 0px 0px 0px;  }
.product-info-title h1 {font-size:1.2rem;line-height:2.75rem;  }
 span.pro-title  {font-size:2.79rem;line-height:2.75rem;  }

}
@media (max-width:767.98px) {
.product-info-title {padding: 0px 20px 40px 20px;   }    
.product-info-title h1 {font-size:1.1rem;line-height:2.75rem;  }
span.pro-title  {font-size:2.5rem;line-height:2.75rem;  }
.product-info-title p{ font-size:1rem;line-height: 1.5rem;   }   
}
@media (max-width:640px) {
.product-info-title {padding: 0px 0px 20px 0px;   }      
}
@media (max-width:320px) {
.product-info-title h1 { font-size:1rem;line-height:2rem;  }
span.pro-title  { font-size:1.75rem;line-height:2rem;  }  
.product-info-title p{ font-size:1rem; line-height: 1.375rem;}      
}
 
.pdd-toggle-area{  width: 100%;margin:20px 0px 0px 0px; display: flex; flex-wrap: nowrap; align-items: center;  }
.pdd-toggle-area .btn{ width: 50%;  }
@media (max-width:1024px) {
.pdd-toggle-area{ width: 100%; margin:20px 0px 0px 0px; }    
}
@media (max-width:840px) {
.pdd-toggle-area .btn{ max-width: 100%;;margin:0px 10px 0px 0px;  } 
}
@media (max-width:767.98px) {
.pdd-toggle-area{ width: 100%;  }        
.item-title { width: 100%; }    
}

@media (max-width:320px) {
.pdd-toggle-area .btn{ margin:10px; }  
}

.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}
.tab-content {padding: 40px 0px;}
@media (max-width:767.98px) {
.tab-content {padding: 0px;}	
}
.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;}

.specbox { width: 100%; margin: 15px auto; padding:20px 0px;display: -webkit-box; display: -ms-flexbox;  display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  justify-content: space-between;  }
.specbox li{ width: calc(100%/3 - 10px); margin: 10px 10px 10px 0px; padding:10px;  list-style: none; background-image: linear-gradient(125deg, #d6e8f3 0%, #fff 100%);  border: solid 1px #dbedf8; border-radius:0px 30px 0px 30px; box-shadow: -2px 2px 6px rgba(0,0,0,.1) }
.specbox li .item{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; }
.specbox li .item .inner-pic{width:30%; border-radius:0px 30px 0px 30px; overflow: hidden}
.specbox li .item .inner-pic img{  border-radius:0px 30px 0px 30px; overflow: hidden}
.specbox li .item .inner-txt{width:70%;padding: 0px 20px; }
 
.specbox .name { margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid #58afd9;  color:#004297; font-weight:700; font-size:1.125rem;  }
.specbox .spec-txt {font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.5rem;  color:#464646;}
.specbox.box2 li{ width: calc(100%/2 - 40px); margin: 10px 40px 10px 0px ; padding:20px; border-radius:0px 30px 0px 30px; border-color:#d0ebff; background-image: linear-gradient(135deg, rgb(255, 255, 255) 10%, rgb(230, 245, 255) 100%);box-shadow:none }
@media (max-width:992px) {
.specbox.box2 li{ width: calc(100%/2 - 20px); margin: 10px auto;  }
}
 @media (max-width:840px) {
.specbox li{ width: calc(100%/2 - 15px); margin: 10px 15px 10px 0px; }
}


 @media (max-width:767.98px) {
.specbox { margin: 10px auto auto auto;}	
.specbox li{ width: 100%; margin: 10px auto; }
.specbox.box2 li{ width: 100%; margin: 10px auto;}
.specbox li .item .inner-pic{width:40%; border-radius:0px 30px 0px 30px; }	
.specbox li .item .inner-txt{width:60%;padding: 0px 20px; }
}

 @media (max-width:280px) {
.specbox li .item .inner-pic{width:100%;  }	
.specbox li .item .inner-txt{width:100%;  }
	 
}

/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.edit{width: 100%; max-width: 1160px; 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;}
.w5{ width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
.img-radius{ border-radius:30px;}
.spec{ width: 100%;  margin: auto; list-style: none; padding:0px; counter-reset: index; }
.spec li { width: calc(100% - 56px); padding: 0px 0px 0px 56px;  margin-bottom: 15px;  display: block;   counter-increment: index; position: relative;}
.spec li::before { margin-right: 20px; padding:5px; margin-left: -56px; 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 { width: 100%; }
}



.img-list{ width: 100%;  margin: auto; list-style: none; padding:50px 0px; display: flex; flex-wrap: wrap;}
.img-list li { width: calc(100%/5 - 30px); padding: 10px; margin: 15px; border: solid 1px #84b4d8;}
.img-list li .item{ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
.img-list li figure{ max-width: 100%; height: auto}
.img-list li h3{ margin: auto; font-size:1rem; font-size: min(max(3.5vw, 0.875rem), 1rem); font-weight: 400; text-align: center; color: #84b4d8 }

@media (max-width:768px) {
 .img-list li { width: calc(100%/3 - 30px); }
}
@media (max-width:767.98px) {
 .img-list li { width: calc(100%/2 - 30px); }
}


.bg-color-blue{ padding: 20px 0px; background: #012c53}

/*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: auto; 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;border-bottom: 1px solid var(--borderColor);  border-right: 1px solid var(--borderColor);}
.datatable thead td{ color: #000;  font-weight: 700; }
.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, #00368c 10%, #21cff3 100%);box-shadow: 0 0 6px rgba(0,0,0,0.25);}
.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; }
}

/*.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; }    
}
*//*.ux-name { margin-bottom: 20px; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: normal; color: #000;}
.ux-name:before { width: 10px; height:10px; content: ""; display: inline-block;  margin-right: 8px;  margin-bottom: 4px; background-color:#49b232; border-radius: 2px;}
.ux-row { position: relative; margin-bottom: 63px;  }
.ux-summary {  font-size: 1.125rem; line-height: 1.7rem; font-weight: 400; letter-spacing: 1px;margin-top: 11px;}  
*/
.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; }
  
.bg-color-light{background-color: #f5f5f5}
 .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:52.5% 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 { width:100%; margin:30px auto; padding:0px; position: relative; z-index: 99;  display: flex; flex-wrap: wrap;}
.application li { width:calc(100%/2  - 30px); margin:50px 15px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.application li .item{width: 100%; display: flex; flex-wrap: wrap;  align-items: flex-start;}
.application li .inner-body{width:45%; margin: auto -5% auto auto; padding:30px; position: relative;z-index: 9; background-color: #f6f6f6; box-shadow: 0px 5px 5px rgba(0,0,0,.1) } 
.application li .photo{ width: 60%; position: relative }
.application li .photo figure{ width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  }
.application li .photo figure img {  width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s;   }
.application li .photo figure:hover img { transform: scale(1.1);  opacity: 1; }
.application li .circle-icon{width: 80px; height: 80px; border-radius:99rem; background-color: #fff; display: flex; flex-wrap: wrap;  justify-content: center; align-items: center; position: absolute; right:10px; top:10px;z-index: 9; }
.application li .circle-icon img{ width: 80%; height: auto; margin: auto; }
.application li h3{  position: relative;padding-bottom: 10px; margin:0px 0px 20px 0px; font-size:1.75rem;  font-size: min(max(3.5vw, 1.15rem), 1.5rem);font-weight:400; line-height:2.25rem;color:#0197dc; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; }
.application li h3:after{ content: "";  width: 10%; height: 2px; position: absolute; left:0px; bottom:0px;  background: #225383;} 
.application li p{ margin:5px 0px; padding: 0px;  font-size:.775rem; 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;} 
.application li .item-inner-txt{ width: 100%;  padding:0px;margin:0px 0px 40px 0px;  position: relative;} 
.application li .photo:after,.application li .photo:before {pointer-events: none; content: ''; ; width:calc(100% - 20px); height:calc(100% - 20px);  box-sizing: border-box;  position: absolute; top: 10px;  left: 10px;  transform: scale(0); transition: 0.5s;z-index:2; }
.application li .photo:after { border-top: 2px solid #fff;  border-right:2px solid #fff;  transform-origin: 100% 0%;}
.application li .photo:before { border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform-origin: 0 100%;}
.application li:hover .photo:after,.application li:hover .photo:before { transform: scale(1);}
.application li .photo figure:before { content: ""; display: block; width: 100%;background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 20%, rgba(3,151,219,1) 100%); opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.application li:hover figure img{opacity: .35;background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 20%, rgba(3,151,219,1) 100%);  }
@media (max-width:1024px) {
.application li {margin:20px 15px;}   
}
@media (max-width:840px) {
.application li { width: 100%; margin:30px auto 50px auto;padding:0px; }
.application li .item-inner{width:100%; margin: 0px; padding:20px 40px;   } 
.application li .item-pic{ width:100%; }   
.application li:nth-child(even) .item-inner{  margin: auto;}    
}
@media (max-width:767.98px) {
.application li .item{ flex-direction: column-reverse}
.application li .inner-body{width:100%; padding:15px; margin: auto;} 
.application li .photo{ width: 100%; position: relative }	
.application li h3{  font-size:1.125rem; line-height: 1.5rem;  }
.application li p{   font-size:.875rem;  } 
}
@media (max-width:320px) {
.application li .item-inner{ padding:30px 10px;}   
}
.application-list{ margin:40px auto;}
.application-list .product-item li { width: calc( 100%/4 - 20px); margin:40px 10px 40px 10px; 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;   }