.main-area.top { background-color:#fff;}
.product-arera{ padding: 0px;  margin-top: -70px; width: 100%; display: flex; flex-wrap: wrap;}
.product-arera .main-content {width:calc(100% - 300px);  position: relative;  padding:30px; 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%);}


.bg-product { padding: 50px 30px 60px 30px; background: url(../images/index/bg-line.png) repeat-x left bottom; background-size: 150% auto;}
@media (min-width: 1920px) {
.product-arera{  margin-top: -160px; }
}
@media (min-width: 2520px) {
.product-arera{  margin-top: -380px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) { 
.product-arera{ margin-top: -50px;  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;}

}

/*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{width: 100%; padding: 50px 0px; display: flex; flex-wrap: wrap; justify-content: flex-start; position: relative; z-index: 1;}
@media (max-width: 992px) {
.product{  width: calc(100% + 40px); margin: auto -20px;  padding:0px 0px 30px 0px;  }    
}
 
@media (min-width: 1600px) {
.product{width: 100%; padding: 50px ;  margin: auto; }
}
 
.product li { width: calc(100%/2 - 40px);   margin:0px 20px 50px 20px;  transition: all 0.3s linear 0s; list-style: none;position: relative; z-index: 1; }
.product li .item{width: 100%;  display: flex; flex-wrap: wrap; border-radius:0px 50px 0px 50px;  overflow: hidden;box-shadow: rgba(0, 0, 0, .18) 0 5px 13px 0;background-image: linear-gradient(to top, #e5f4ff 0%, #e9f6ff 30%,#fff 100%);    }
/*font-size*/
.product li h3 { min-height:66px; margin-bottom: 10px;  color:#0e73bb;  font-size:1.75rem;  line-height:1.875rem;overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  -webkit-line-clamp: 3;   overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
.product li .photo { width: 55%; height: auto; padding:10px; margin: auto;  overflow: hidden; position: relative;   }
.product li .photo figure{ width: 100%;  padding-top:100%;height: 0;border-radius: 0px 50px 0px 50px;   object-fit: cover; overflow: hidden; position: relative; transition: all 0.5s ease 0s;  background-image: linear-gradient(to top, rgba(255,255,255,0) 0%, #fff 100%); } 
.product li figure::before { content: ""; position: absolute;  top: -50%; width: 100%; height: 100%; background:#b2bcc8; transform: skewY(345deg); transition: 0.5s;}
.product li figure:hover::before { top: -70%; transform: skewY(390deg);}
.product li figure::after { content: attr(data-content); position: absolute;  bottom: 0; left: 0; font-weight: 600; font-size: 3em; color: rgba(0, 0, 0, 0.1);}
.product li .inner-box {width:45%;margin:0 ; padding: 25px;    position: relative; z-index: 9; transition: all .4s ease;  }
.product li .inner-box .inner-txt{ margin: auto 0px 40px auto;   }
.product li .inner-box .desc { font-size:1rem; line-height: 1.5rem;font-weight:400; color: #6a6563;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 (max-width: 1440px) {
 .product li .inner-box .desc { font-size: 1.125rem; line-height: 1.5rem;  }   
}
@media (max-width:1024px) {
.product li { margin:30px 20px;}  
.product li .item{padding:10px 0px;}
.product li .photo{  width:100%; padding: 0px 10px; }
 .product li .inner-box{  width: 100%;  padding: 20px;   }  
.product li h3 {font-size:1.875rem;line-height: 2rem; letter-spacing: 0px; }   	
 }
@media (max-width:767.98px) {
.product li { width: calc(100%/2 - 10px); margin:0px 5px 50px 5px;}
.product li .item,.product li .photo figure{  border-radius: 0px 30px 0px 30px;} 
.product li .inner-box{ padding:15px;}   
.product li .inner-box .inner-txt{ margin: auto 0px 20px auto;   }
.product li h3 { min-height:auto; font-size:1.25rem; line-height: 1.375rem; }  
.product li .inner-box .desc { font-size: 1rem; line-height: 1.375rem;  }   
.product .btn-1 span{font-size:0.9rem; }
 }
	
@media (max-width:320px) {
.product li { width: calc(100% - 30px); margin:0px auto 50px auto;}
}

 /*----------------------------------------/
hover style
----------------------------------------*/
.hover01 { position: relative; overflow: hidden; }
.hover01:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; border: solid #fff 0;  -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s;  -o-transition: 0.2s; transition: 0.2s;  border-radius:0px 50px 0px 50px; }
.hover01:hover:before { border-width: 15px; opacity: .5; }
@media (max-width:767.98px) {
.hover01:before,.hover02:before,.hover02:hover:before {  border-radius:0px 30px 0px 30px!important; }
}

.hover02 { position: relative; overflow: hidden; }
.hover02:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4; border: solid #f3c10d 0;  -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s;  -o-transition: 0.2s; transition: 0.2s;  border-radius:0px 50px 0px 50px; }
.hover02:hover:before { border-width: 15px; opacity: .5; }

/*--分類new-tag --*/
.new-tag {  width: auto; padding:5px 14px; font-size: 1rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:0px; top:0px;background-color: #1c73e8;  border-radius:0px 0px 30px 0px; box-shadow: 0px 2px 3px rgba(0,0,0,.2) }
.new-tag a{color:#fff;}
.new-tag-red {  background-image: linear-gradient(135deg, #E91E63 10%, #e91e1e 100%); }
@media (max-width:992px) {
.new-tag {  width: auto; padding:5px 14px; font-size: .75rem; left:auto; right:0px; top: 0px; border-radius:0px 20px 0px 20px;   }
 }
 /*----------------------------------------/
產品清單頁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%/3 - 40px); margin:40px 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 .item{ width:100%;    border-radius:0px 50px 0px 50px;background-color: #fff; border: solid #CCE1F9 1px; overflow: hidden}
.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:0px 50px 0px 50px; } 
.product-item .inner{  width: 100%;  padding: 10px 30px 20px 30px; position: relative;} 
.product-item .inner h3{ width: 100%; min-height:66px;  margin: 10px 0px; font-weight:700; font-size:1.5rem;  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:#0e74bb; }
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: 1.25rem; line-height: 1.375rem; font-weight: 700; color:#6a6563;  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 li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li:hover a h3,.product-item li:hover a p{color: #F4C102;}

.product-item .inner-desc{  width: 100%; min-height:190px; padding: 10px 0px; } 
.product-item .inner-desc span{ margin-bottom: 5px; display: block;color:#6a6563; } 
.product-item .inner-desc span.inner-desc-title{ font-weight:500; margin-bottom: 5px; color:#0e74bb }

@media only screen and (max-width:1180px){
.product-item .inner h3{  font-size:1rem; line-height:1.5rem; }
}
@media (max-width:992px) {
.product-item li { width: calc( 100%/2 - 40px); margin:40px 20px;  }
	
.product-item li figure{ border-radius:20px;  }	 
.product-item .inner a p{ line-height: 1.125rem;  } 
}
@media (max-width:767.98px) {
.product-item { width: calc( 100% + 40px); margin:0px -20px;   }	 
.product-item li {width: calc(100% - 20px); margin: 10px auto;}
.product-item li .item{ border-radius:0px 30px 0px 30px;}	
.product-item li figure{ border-radius:20px;  }
.product-item .inner{  width: 100%;  padding: 10px 20px 20px 20px;  } 
.product-item .inner h3{ min-height:auto;}
.product-item .inner-desc span{  font-size: .9rem; } 
	
}
@media (max-width:320px) {
.product-item li {width: calc(100%  - 30px);  margin: 10px auto;   }
}

/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%;  margin:0 auto; padding:20px 0px;  background-image: linear-gradient(to bottom, #fff 0%, #eaf1f8 100%);}
.best-wrap .product-item {width: 100%;  height: auto;  margin:0 auto;}
.best-wrap .product-item li{  width: calc(100% - 20px); margin: 10px; } 
.best-wrap .product-item .inner h3{font-size: 115%;}
.best-wrap .product-item .slick-dots li {width: 8px; height: 8px;}
@media only screen and (max-width:1180px){
.best-wrap .product-item .inner h3{  font-size:1rem; line-height:1.5rem; }
}
@media (max-width: 767.98px) {
.best-wrap .product-item{ width: calc(100% + 40px); margin:0px -20px;}	
}

@media (max-width:320px) {
.best-wrap .product-item{ width: 100%; margin:0px;}	
.best-wrap .product-item li {width: 100%; margin:0px auto;   }
}
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
 .product-wrapper { width: 100%; margin:auto; padding:50px 0px 30px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}
 @media (max-width:840px) {
 .product-wrapper {  padding:0px 0px 30px 0px;}	 
}
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.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(50% - 30px);  padding: 0px 15px;  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:50%;  padding: 0px;  margin:0px auto;  position: relative; z-index: 0;  }
@media (max-width:840px) {
.product-left{width:100%;padding: 5px 0px 0px 0px; order: 2; }  
.product-right{ width:100%; margin: auto; padding: 10px 0px;order: 1;  }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px;}
}


.box-for{width: 100%; position: relative; }
.slider-for{  width:100%; margin: 0px ; padding: 0px; list-style: none;  }
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px;}
/*.slider-for li img{width: 100%;  }*/
.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-prev,.slider-for .slick-next{  top:35%;}
@media (max-width:840px) {
.box-for{ display: flex; flex-direction: column}
.slider-for{  order: 2 }  
.slider-for li{  padding:0px;}    
}
@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:0px 0px 20px 0px; margin: auto;   -webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.product-info-title h1 {margin: 0px; font-size:2rem;line-height: 3.125rem;font-weight: 400;  letter-spacing:2px;  color:#0e73bb;position: relative }
.product-info-title h1:after {position: absolute; left: -20px; top: -4px; content: "";  width:46px; height:46px; border-radius:50%;  background: #d3ecff;  z-index: -1;  opacity: 1 }
.product-info-title h2{margin-bottom: 30px; font-size:1.15rem; font-weight: 700;   word-spacing: normal; word-break:normal; }
.product-info-title p{ font-size:1.15rem;line-height: 1.75rem; font-weight:400; color: #6a6563; margin-bottom: 20px; } 
 
@media (max-width:1024px) {
.product-info-title { width:100%;  padding: 40px 0px 0px 0px;  }
}
@media (max-width:840px) {
.product-info-title {padding: 20px 0px;   }    
.product-info-title h1 {font-size:2.375rem;line-height:2.75rem;  }
.product-info-title p{ font-size:1.125rem;line-height: 1.5rem;   }   
}
@media (max-width:640px) {
.product-info-title h1 {font-size:2rem;line-height:2.5rem;  }
}
@media (max-width:320px) {
.product-info-title h1::before { width:36px;height:36px;}
.product-info-title h1 { 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;justify-content: space-between;  }
.pdd-toggle-area .btn{ width: calc(100%/2 - 40px); margin-right: 40px; }
@media (max-width:767.98px) {
.pdd-toggle-area .btn{  width:calc(100%/2 - 6px); ;margin:0px auto; } 
.item-title { 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}
.tab-content {padding: 40px 0px;}
@media (max-width:767.98px) {
.tab-content {padding:0px;}
}

.product-description{ width: 100%; padding:30px 0px 10px 0px; color:#6a6563;  }
.product-description p {width: 100%; margin: 5px 0px; font-size:1.125rem; line-height: 2rem;  font-weight: 400; letter-spacing: 1px; color:#6a6563;}
.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:0px;  margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#1073bb; font-weight:700; font-size:1.375rem;  }
.item-title p{ font-size: .875rem; color: #666;}
.item-title-full { width: 100%;padding: 0px 10px; margin-bottom:30px;}

.icon-list{width: 100%; margin:0px auto; padding:20px 0px; display: flex; flex-wrap: wrap;  }
.icon-list li{width: auto; margin:0px 40px 0px 0px; display:flex; flex-wrap: wrap;   transition: all 0s ease 0s;position: relative; } 
.icon-list li .item{ width: 100%; margin:0px; padding: 10px; }
.icon-list li h3 { width: 100%; font-size:1.5rem; line-height: 2.75rem; font-weight:400; color:#1073bb; margin-bottom:20px; position: relative; }  
.icon-list li h3 span{ padding-right: 10px; font-size:3.15rem;  font-weight:700;  color:#70bff6;  }
.icon-list li p {  width: 100%; font-size: 1rem; line-height: 1.15rem; font-weight:700; color:#1073bb;   }  

@media (max-width:1280px) {
.icon-list li{ margin:0px 20px 0px 0px;  } 
}
@media (max-width:767.98px) {
.icon-list li{ width: 100%; } 
.icon-list li h3 {  font-size:1.125rem;   }  
.icon-list li h3 span{ font-size:2.75rem;   }	
}
 
/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.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{ width: 100%; max-width:680px;  margin: 15px auto!important;}
.edit p{ font-size: 18px;line-height: 1.6;}
 
.spec-pic{width: 20%;}
.spec-txt{width: 80%;}

.spec{ width: 100%;  margin: auto; list-style: none; padding:0px 0px 50px 0px; counter-reset: index; }
.spec li { width: calc(100% - 56px); padding:3px 0px 3px 56px; margin-bottom: 15px; display: block; counter-increment: index; position: relative;  font-size: 1rem;  line-height: 1.875rem;  }
.spec li::before { content: counters(index, ".", decimal-leading-zero);    position: absolute; left:0px; top:0px; font-size: 1.375rem; 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: #0e73bb;    }
.spec li:hover{ background:#f8f7f7;}
.spec li p{font-size: 16px;}
.spec li .item{}
.spec li .item-txt{  }
.spec li .m-tag{ margin: 10px 0px;  padding: 5px;   background-color:#d3ecff; border-radius:10px; color:#1073bb; text-align: center;  }
@media (max-width:768px) {
.spec{  padding:0px 0px 20px 0px; }	
.spec li::before {display: block; margin: 0px; width:40px; height: 40px;}
.spec li { width:100%; }
.spec-pic{width: 100%;}
.spec-txt{width: 100%;}
}

.award-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); gap: 30px; padding: 15px 0px; position: relative;z-index:99 }
.award-card > .award-w50 {  aspect-ratio: 16 / 9;  width: 100%; display: flex;  align-items: center }
.award-w50 img {width: 100%; height: auto;   object-position: center; border-radius: 0px 100px 0px 100px}
.award-card .award-w50 .inner{ margin: auto; }
.award-card .award-w50 .inner .inner-txt{  margin: auto;font-size:1.75rem; font-size: min(max(3.5vw, 1.15rem),1.75rem);font-weight: 400; line-height: 1.23; letter-spacing: normal;  color:#0e74bb;   }
.award-card .award-w50 .item{ flex: 0 0 100%; padding: 20px 30px;}
.award-card .award-w50 .item h3{   margin-bottom: 20px;}

.panel-content{padding: 15px 0px;}
.panel-content .panel-card{display: flex;flex-wrap: wrap;gap:30px;}
.panel-content .panel-card > .panel-w50 {  aspect-ratio: 16 / 9;  width: calc(50% - 15px); display: flex; align-items: center;}
.panel-content .panel-title{text-align: center;width: 100%;padding: 0 30px;}
.panel-content .panel-card img {width: 100%; height: auto;   object-position: center; border-radius: 0px 100px 0px 100px}
.panel-content .panel-card .item{ flex: 0 0 100%; padding: 20px 30px;}

@media (max-width:1024px) {
.award-card {  gap: 10px; padding: 15px 0px;}
.award-w50 img {border-radius: 0px 30px 0px 30px}
.award-card .award-w50 .item{padding: 20px;}	 
}

@media (max-width:767.98px) {
.award-card { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));  gap: 15px; padding: 10px 0px; display: flex; flex-flow: wrap;}
.award-card > div {justify-content: flex-start!important;}
.award-card > div > .inner, .award-card > div > .inner > p {text-align: left!important;}
.award-card > div:nth-child(1) {order: 2; padding: 0 0 20px 0;}
.award-card > div:nth-child(2) {order: 1;}
.award-card > div:nth-child(3) {order: 3;}
.award-card > div:nth-child(4) {order: 4; padding: 0 0 20px 0;}
.award-card > div:nth-child(5) {order: 6; padding: 0 0 20px 0;}
.award-card > div:nth-child(6) {order: 5;}
.award-card > div:nth-child(7) {order: 7;}
.award-card > div:nth-child(8) {order: 8; padding: 0 0 20px 0;}
.award-card > div:nth-child(9) {order: 10; padding: 0 0 20px 0;}
.award-card > div:nth-child(10) {order: 9;}
.award-card .award-w50.m-h{height: auto;  max-height:50px; }
.award-w50 img {border-radius: 0px 20px 0px 20px}
.award-card .award-w50 .item{padding:0px;}	
.award-card .award-w50 .item h3{ font-size:1.125rem; }
.award-card .award-w50 .inner{ margin:0px; }
	
.panel-content .panel-card{gap:15px;}
.panel-content .panel-card > .panel-w50{width: 100%;}
.panel-content .panel-w50 img {border-radius: 0px 20px 0px 20px}
.panel-content .panel-card .panel-w50 .item{padding:0px;}	
.panel-content .panel-title {font-size:1.125rem;text-align: left;margin-bottom: 20px;padding: 0;}
}


/*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%;}
}
@media (max-width: 640px) {
.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: 1rem;}
.datatable th { font-size:1rem; padding: 15px; word-break: normal;white-space: nowrap;   border-bottom: 1px solid var(--borderColor);  border-right: 1px solid var(--borderColor);}
.datatable td { font-size:1rem; padding: 15px; word-break: normal;white-space: wrap;   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; }
.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);}
.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 #F4C102; border-right: 4px solid #F4C102; -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; overflow: hidden;   padding:0px;  }
.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; }


/*table layout photo*/

.spec-pic-title{  width: auto; margin: 0; padding: 10px 0px 10px 20px;font-size: 1.125rem;font-weight: 700;  color:#0e73bb;  cursor: pointer; position: relative;  }
.spec-pic-title::before {position: absolute; margin-top:15px;  left:0px; top:0px; content: ""; display: inline-block; vertical-align: middle; width:12px; height:12px; background-color:transparent;  border-top: 4px solid #0e73bb; border-right: 4px solid #0e73bb; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }
.spec-photo.active .spec-pic-title::before { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }


.spec-photo.active .layout {  height: auto;max-height: 100%;   }
.spec-photo .layout{ max-height: 0; overflow: hidden; padding:0px;  }
 
 @media (max-width:767.98px) {
.spec-photo.active .layout {  max-height: 100%;   }
.spec-photo .layout{  max-height: 100%;   }


}
.video { width:800px;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:56.25% 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; }  

.video-r2 { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
.video-r2 div.video{ width:48%;margin: 30px auto; 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;  }

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

@media (max-width: 767.98px) {
.video { width: 100%; margin: 30px auto;}
.video-r2 div.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 list============*/
.title-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 50px; }
.title-wrap .sub-pic {  margin-right: 9vw; }
.title-wrap .sub-txt { -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; border-bottom: 5px solid #6eb7f1;  }
@media (max-width: 767.98px) {
.title-wrap { flex-direction: column }
.title-wrap .sub-pic { width: 30%;margin: auto; }
}

.cms-block { width: 100%; min-width: 1366px;  margin: auto; padding-left: 80px; padding-right: 80px; position: relative;    }
.sttl-wrap { width: 100%; color: #fff;  }
.cms-block h2 {  margin: 0; padding:10px;font-size: 1.75rem; font-weight: 500;white-space-collapse: preserve-spaces;  }
@media (max-width: 767.98px) {
.cms-block {  padding: 0px;}
.cms-block h2 {  font-size: 1.275rem;}
}

.cms-block.name01 { background-color: #528fdf; color: #fff;}
.cms-block.name02 { background-color: #d8a800; color: #fff;}
/*-------------.pic----------------------*/
.pick { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.pick li { width: calc( 100%/4 - 40px); margin:40px 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;   }
.pick li .item{ width:100%; border-radius:0px 50px 0px 50px; overflow: hidden}
.pick li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index:1; transition: all 0.5s ease 0s;background-color: #fff; border-radius:0px 50px 0px 50px; border: solid #CCE1F9 1px; box-shadow: 0px 2px 5px rgba(0,0,0,.2)  } 
.pick li figure img{  width: 100%; padding:3px; border-radius:0px 50px 0px 50px; } 
.pick .inner{ width: 100%;  padding: 10px 30px 20px 30px; position: relative;} 
.pick .inner h3{ width: 100%;margin: 10px 0px; font-weight:400; font-size:1.375rem;  color:#6a6563; 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; }
.pick .inner a h3 { color:#000; }
.pick .inner a p{ width: 100%; margin:5px 0px; font-size: .9rem; line-height: 1.375rem; font-weight: 400; color:#6a6563;  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;} 
.pick li:hover img { transform: scale(1.05);  opacity: 1; }
.pick li:hover a h3,.pick li:hover a p{color: #F4C102;}
.pick li figure:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index:4; border: solid #f3c10d 0;  -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s;  -o-transition: 0.2s; transition: 0.2s;  border-radius:0px 50px 0px 50px;}
.pick li:hover figure:before { border-width: 15px; opacity: .5; }
@media (max-width:840px) {
.pick li { width: calc( 100%/3 - 40px); margin:40px 20px;  }
.pick .inner h3{  font-size:1.375rem;  }
.pick li .item,.pick li figure,.pick li figure img{  border-radius:0px 30px 0px 30px; } 
}
@media (max-width:767.98px) {
.pick li { width: calc( 100%/2 - 20px); margin:10px;  }
.pick .inner{padding: 10px;} 	
}
@media (max-width:320px) {
.pick li { width: calc( 100% - 20px); margin:10px auto;  }
.pick .inner{padding: 10px;} 	
}

/* end application list*/
.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; background-image: linear-gradient(to top, #ebf7ff 0%, #fafcfe 100%);  border-radius:0px 100px 0px 100px }
.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-pic{ width: 45%; display: flex; flex-wrap: wrap; justify-content: center; align-items:center;}
.application-item li .item-pic figure{ width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  border-radius:0px 100px 0px 100px  }
.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 .item-inner{width:55%; margin: auto -10% auto auto; padding:30px; position: relative;z-index: 9;  background-color:#fff;  border-radius:0px 50px 0px 50px; box-shadow: 0px 10px 10px rgba(14, 115, 187, .25); } 
.application-item li .item-inner .item-box{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between }
.application-item li .item-inner-txt{ width:100%;  display: flex;  flex-wrap: wrap;  padding:0px;margin:0px;  position: relative;} 
.application-item li .nav-img {  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:20px 10px 10px 15%;width:120px;height: 120px;border-radius:0px 20px 0px 20px; background-color:#e9f6ff; border: solid 1px  #cfe1f9; position: relative;}
.application-item li .nav-img img {  margin: auto;display: block;   opacity: 0.7;  }
.application-item li .nav-item p{ font-size:0.875rem; color: #fff; font-weight: 700; line-height: 1rem; }
.application-item li h3{ width:100%; min-height:66px; padding:0px 0px 0px 20px; margin:0px 0px 20px 0px; letter-spacing: 3px; font-size:1.75rem; font-size: min(max(3.5vw, 1.15rem), 1.75rem);  line-height:1.875rem;  font-weight:500;  color:#bd9402; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; position: relative }
.application-item li h3:before { width:8px;  height:8px;  content: ""; position: absolute; top: 12px; left: 0; background-color:#bd9402; border-radius: 50%;}
.application-item li p{ margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400;color: #6a6563;  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 .more-icon{ width:70%; margin:20px 15% auto 15%}
@media (max-width:1024px) {
.application-item li { width:100%; margin:50px auto; }
.application-item li:nth-child(even) .item-inner{   }
.application-item li .item-inner{ width:55%;    } 	
.application-item li .item-pic{ width: 50%; }
}

@media (max-width:840px) {
.application-item li { width: calc(100% - 50px); margin:0px auto;  }   
.application-item li .item{ margin:30px auto 50px auto;padding:0px; flex-direction: column-reverse}
.application-item li .item-inner,.application-item li:nth-child(even) .item-inner{width:100%; margin:-20% 0px 0px 0px; padding:40px;   } 
.application-item li .item-pic{ width:100%; }   
.application-item li:nth-child(even) .item{ flex-direction:column-reverse}
}
@media (max-width:768px) {
.application-item li .item-pic figure,.application-item li .item-inner{ border-radius:0px 30px 0px 30px  }
.application-item li .more-icon{ width:100%;}
.application-item li .more-icon .btn-1 span{font-size: 0.9rem;}
}
@media (max-width:767.98px) {
.application-item li { width: 100%;  }   
.application-item li .item-inner,.application-item li:nth-child(even) .item-inner{  padding:20px;   } 
.application-item li h3{ min-height:auto;  font-size:1.125rem; line-height: 1.5rem; }
.application-item li p{ font-size:.875rem;line-height: 1.15rem; } 
.application-item li .nav-img {  width:80px;height: 80px; }
.application-item li .item-inner .item-box{ flex-direction: column-reverse}	
}

@media (max-width:320px) {
.application-item li .item-inner{ padding: 10px;}   
}
#dialog-content.contact-form{ padding:10px;max-width:640px  }