/*main{ background: linear-gradient(to top, #edeff2, #fff);}      */

.main-area.top { background-color:#fff;}
.product-arera{ max-width: 100%;  padding: 0 5%; width: 100%; display: flex; flex-wrap: wrap; }
.product-arera .main-content { flex:10; padding:40px 0px 0px 0px;   background: #fff;/*  box-shadow: 0 0 30px hsla(0,0%,46.7%,.2);*/position: relative; }
.bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
 
@media (min-width: 992px) and (max-width:1366px) { 
.product-arera{  padding:0px 30px;}
.product-arera .main-content {width:calc(100% - 240px); margin-top: -40px; }
}
 @media (max-width: 992px) {
 .product-arera .main-content {flex: 1 1 100%; }
}
@media (max-width: 840px) {
.product-arera{padding:0px;}
.product-arera .main-content {width:100%; }

}
@media (max-width: 767.98px) {
.product-arera{  padding:0px;}
.product-arera .main-content {width:100%;  padding:0px;}
}
 
 .bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }
 
/*--分類new-tag --*/
.new-tag {  width: auto; padding:0px 5px; font-size: 0.75rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:0px; top:0px; background-image: linear-gradient(135deg, #1c73e8 10%, #215285 100%);border-radius:0px 10px 10px 0px;  }
.new-tag a{color:#fff;}
.new-tag-red {  background: #e60013; }
.new-tag-gray { background: #6e757c; }
@media (max-width:767.98px) {
.new-tag {  padding:2px 4px; font-size: .5rem;    }
 }

/*----------------------------------------/
產品清單頁 application
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:0px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc( 100%/4 - 20px); margin:20px 10px; padding:0px; border-radius:20px; overflow: hidden; list-style: none; transition: all 0.3s linear 0s; position: relative;    }
.product-item li figure{ width: 100%; padding-bottom:66.75%; height: 0; overflow: hidden; position: relative; z-index: 1;  border-radius:20px; transition: all 0.5s ease 0s;   }
.product-item li .item{ width: 100%;  }
.product-item .inner{ width: 100%; padding:20px;  display: flex; flex-wrap: wrap;  position: relative;   } 
.product-item .inner h3{ margin: 0px; font-weight:500;font-size: clamp(0.9rem, 2.3vw, 1.125rem); color:#000; line-height:1.5rem; letter-spacing: 0.2px;  overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.product-item .inner h3 a{  color:#344a4a; }
.product-item .inner p {  margin:0px; font-size: .9rem; line-height: 1.375rem; font-weight: 400; 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 li:hover h3,.product-item li:hover p{color: #157372;}
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li:hover figure{ background-image: linear-gradient(to bottom, #d8e1e9 0%, #fff 100%); }

/*compare*/
.product-item .compare { width: 20px; height: 20px; margin:5px 10px auto auto;   align-items: flex-start;position: relative }
.product-item .compare > input[type='checkbox'],.compare > input[type='radio'] { position: absolute; z-index: 2;  top: 0; left: 0; display: block; width: 100%; height: 100%; margin: 0;  cursor: pointer;}
 
@media only screen and (max-width:1024px){
.product-item li {width: calc(100%/3 - 30px); margin:30px 15px; padding:0px; }
}
@media (max-width:992px) {
.product-item .inner a p{line-height: 1.125rem;  } 
}
@media (max-width: 767.98px) {
.product-item { width: calc( 100% + 20px); margin:0px -10px;   }	 	
.product-item li { width: calc(100%/2 - 20px); margin: 10px 10px; height: auto;   } 
.product-item .inner h3{ line-height: 1.175rem}

.product-item .compare { font-size:0.875rem;} 	
}
@media (max-width:420px) {
.product-item .inner{  padding:10px;  } 
.product-item .compare { font-size:0.75rem;} 
}
@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; border-radius:100px 100px 0px 0px;  background: linear-gradient(to left, #d0d7df, #edeff2);  }
.best-wrap .product-item {height: auto;}
.best-wrap .product-item li { width: calc( 100% - 20px); margin:40px 10px; padding:0px; background-color: #fff;}
.best-wrap .product-item .inner .inner-txt{ width:100%;}
.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{top:-20px;}
.best-wrap .product-item .slick-prev{ left:calc(50% - 70px);}   
.best-wrap .product-item .slick-next{right:calc(50% - 70px);}
 
@media (max-width:480px) {
.best-wrap{   border-radius:0px; }
.best-wrap .product-item li { margin:20px 10px; padding:0px;}
.best-wrap .product-item .inner{padding:10px;}	
.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{  }
.best-wrap .product-item .slick-prev{ left:calc(50% - 50px);}   
.best-wrap .product-item .slick-next{right:calc(50% - 50px);}
}

/*cms-btn-more =================================*/ 
.more-txt { font-size: 16px; font-weight: 400; line-height: 1.5;  color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}
  
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.main-product{ background-image: linear-gradient(to top, #efeeef 0%, #fff 70%, #efeeef 100%); }
.product-wrapper { width: 100%;margin-top: 60px; display: flex;  flex-wrap: wrap; }

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.product-left{width: 65%; padding:40px 0px;  }
 @media (max-width:840px) {
.product-left{width:100%;padding: 5px 0px 0px 0px; position: relative; height: auto;   }  
}

.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; display: flex; flex-wrap: wrap;   align-items: center;  }
 @media (max-width:840px) {
.product-right{ width:100%; margin: auto; padding: 10px 0px; ;}
 }
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px; border:none;  }
}
 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%;  margin:10px 0px; display: flex; flex-wrap: wrap; }
.product-group .btn{ width: 130px; height: auto; margin: 10px; display: flex; flex-wrap: wrap;justify-content: center; align-items: center;   }
@media (max-width:1400px) {
.product-group .btn{width: 100px; }
.product-group .btn.btn-back{width: 130px; } 
}
@media (max-width:767.98px) {
.product-group .btn{ width: 105px; margin:10px auto;}
}
@media (max-width:320px) {
.product-group .btn{ width: 72px; height:72px;}
}


.btn-box {  background-color: transparent; border:none;  display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;  box-shadow: 0px 8px 8px rgba(0,0,0,.3);}
.btn-box  span{ font-size:.95rem;color:#fff; font-weight:700; letter-spacing:-.1px  }
.btn-box:hover { color: #fff; background-color:#000;  }
.btn-box:hover.download,.btn-box:hover.inquiry{ color: #fff; background-color:#1a1a1a; border: solid 2px #555; transform: scale(.95)}

.btn-box.download{ border-radius:5px; border: solid 1px rgba(255,255,255,.15); background-color:#555;}
.btn-box.inquiry{ border-radius:5px;  border: solid 1px rgba(255,255,255,.15);background-color:#157372; }
.btn-box i{ width:36px; height:36px;margin:auto 5px;filter: brightness(200%) grayscale(1) }
@media (max-width:320px) {
.btn-box i{ width:24px; height:24px; }     
}
@media (max-width:280px) {
.btn-box i{ display: block}     
}

.product-btn{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap;  }
.product-btn .btn{width:calc(100%/2 - 20px); height:40px;margin: auto 20px auto auto; padding: 0px 20px;  display: flex; }
@media (max-width:767.98px) {
.product-btn .btn{ width:calc(100%/2 - 10px); margin: auto 10px auto auto;  padding: 0px;  }
.product-btn .btn:last-child{margin-right: 0px; }   
}
@media (max-width:320px) {
.product-btn .btn{ flex-direction: column }
}

/* application-list.html主容器 */
.hero-container {  position: relative; display: flex; justify-content: center;  align-items: center;  }
/* 背景圖片) */
.product-image { width: 80%;  max-width: 800px; margin: auto; opacity: 0;  transform: scale(1.05); animation: imageFadeIn 1.5s ease-out forwards;  }
@media (max-width:767.98px) {
.product-image { width: 100%;   }   
}
/* 文字浮入動畫 */
.text-overlay { position: absolute; top: 10%; text-align: center; z-index: 10; }
.hero-container .title { font-size: 42px; font-weight: 300; letter-spacing: 8px; margin-bottom: 10px;  opacity: 0; transform: translateY(20px); animation: textSlideUp 1s ease-out 0.5s forwards;  }
.hero-container .subtitle {  font-size: 1.125rem; color: #aaa;  max-width: 500px;  line-height: 1.8;  opacity: 0; transform: translateY(20px);  animation: textSlideUp 1s ease-out 0.8s forwards;}

/* 標記點 (Hotspots) 樣式 */
.hotspot { position: absolute; width: 16px; height: 16px;  background-color: #007aff;  border-radius: 50%; cursor: pointer; z-index: 20; box-shadow: 0 0 15px rgba(0, 122, 255, 0.8);}

/* 呼吸燈擴散效果 */
.hotspot::after {  content: ''; position: absolute;  top: -12px; left: -12px; width: 40px;  height: 40px;  border-radius: 50%; border: 2px solid rgba(0, 122, 255, 0.5); animation: pulse 2s infinite;}
.hotspot:hover .tooltip {  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);  }

/* 互動彈窗 (Tooltip) */
.tooltip { width: 100vw; height: 32vw;  position: absolute; left: 50%; bottom:-15%; transform: translateX(-50%) translateY(15%);  background:rgba(255,255,255,.3);  backdrop-filter: blur(10px); /* 毛玻璃效果 */   padding:0px 0px 0px 35vw;  white-space: nowrap; font-size: 14px; opacity: 0;  visibility: hidden; transition: all 0.3s ease; }
.box-for{width:100%;  margin: auto ; text-align: center}
@media (max-width:1300px) {
.box-for{max-width: 540px;  }
}

.box-for .product-item{width:100%; max-width:600px; height: auto;  margin:0px auto; padding: 0px; list-style: none;  }
.box-for .product-item li{border-radius: 0px; overflow: hidden}
.box-for .product-item li figure{border-radius: 0px;  }
.box-for .product-item li figure img{ background-color:#157372;border:solid 6px #157372 }
.box-for .product-item li:hover img { transform: none;  opacity: 1; }
.box-for .product-item .inner {  padding:0px;  margin: 0px 0px 0px 3px } 
.box-for .product-item .inner h3{  padding:10px 30px; background-color:#157372; color: #fff; position: relative  } 
.box-for .product-item .inner::after{ content: ""; display: inline-block; left:340px; botoom:10px;  width:100px; height: 50px;   background:url("../images/index/line.svg") no-repeat left bottom; } 


/* 定位點 (根據圖片構圖調整) */
.p1 { top: 44%; left: 30%; } /* 現在使用這個 */
 
/* Keyframes 動畫定義 */
@keyframes textSlideUp {
to { opacity: 1; transform: translateY(0); }
}

@keyframes imageFadeIn {
to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
 
/*----------------------------------------/
social-icons
----------------------------------------*/
.share-wrap{  width: 100%; color:#555;  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.875rem;   }
.share-wrap span{width:auto;}
.share-wrap .share-icons{ width: 70%;  }
.share-wrap .share-icons{justify-content: flex-start;align-content: center; align-items: center; font-size: 0.875rem;}
.share-wrap .share-icons li{ width: 26px!important; height: 26px;  margin:5px; background-color: #555 }
.share-wrap .share-icons li a{ opacity:1;font-size:0!important;color:#0267a4!important;  }
.share-wrap .share-icons li i { background-size: 12px;  }
.share-wrap .share-icons li:hover{background-color: #004098}
 


.product-info{ width:100%; padding:0px 0px 0px 20px; }
.product-info-title { width: 100%; padding:0px 0px 20px 0px;border-bottom: solid 1px #eee; }
.product-info-title h1{ font-weight: 700; font-size: clamp(1rem, 2.3vw, 1.875rem); color:#000; letter-spacing: 1px;  }
.product-info-title h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#000;  word-spacing: normal; word-break:normal; }
.product-info-title p{  width: 100%; margin: 5px 0px; font-size:1.15rem; font-weight: 700; color:#777;  word-spacing: normal; word-break:normal;  }

.way-delivery{ font-size: clamp(.875rem, 2.3vw, 1rem);font-weight: 500;  padding:2px 10px 2px 0px; color:#b0b0b0; }
.way-txt{ font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;  padding:2px 0px 2px 0px;  color:#444;  }


@media (min-width:1600px) {
.product-info-title h1{  font-size: 1.875rem;  }
}
@media (max-width:767.98px) {
.product-info{  padding:0px;  }    
}
  
.product-description{ width: 100%; padding:10px 0px; color:#888; font-family: 'Poppins', sans-serif; }
.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 {  word-spacing: normal; word-break:normal;}
.product-description p strong{color:#000;}
 
.btmline { border-bottom: 1px solid #e8e8e8; padding-bottom: 1.25rem; margin-bottom: 1.25rem; display: block;}
  
/*----------------------------------------/
tab
----------------------------------------*/
 

.tab-content {padding: 40px 0px; border-top:solid 1px #eee;}
@media (max-width:767.98px) {
.tab-content {padding:0px;}
}

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

/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.edit{width: 100%; max-width: 1160px; padding:30px 15px; margin: auto;}
.edit p strong{  color:#004198; font-weight: 700;   }
.head-box{ padding: 40px 20px; max-width: 240px; width: 100%; text-align: center; border-right: 4px solid #003281; background-color: #f7f7f7; }    
.head-box .title { color: #003281; font-size: 24px; font-weight: 500;}
.head-box .list-box { padding: 35px 64px;}
.group-item{ display: flex; flex-wrap: wrap;  }
.group-item-box{  flex: 1 1 50%;display: flex; flex-wrap: wrap;  align-items: center }
.group-item-txt{  padding: 10px;margin: auto }
.group-item-txt h3{font-size: clamp(1.125rem, 2.3vw,2rem);font-weight: 500;  }	
.group-item-txt p{ margin:1% auto; font-size: clamp(0.9rem, 2.3vw,1rem); line-height: 1.5rem; font-weight: 400; color:#444; }
.group-item-pic{  flex: 1 1 31.333%; padding: 10px; }
 @media (max-width:840px) {
.edit{  padding:30px 0px; }
.group-item-box{  flex: 1 1 100%; }
}



.group-box { padding:30px;  display: -webkit-box; display: -ms-flexbox; display: flex;flex-wrap: wrap;  margin-bottom: 30px; background-color:#eef2f6;border-radius:15px;  border: solid 1px #fff; box-shadow: 0px 0px 13px 0px #dbdee0;} 
.group-box li { margin: auto; padding:10px ;font-size:1rem; line-height: 1.5rem; font-weight:400; text-decoration:none; color:#444; text-align: center; transition: all .4s ease;list-style: none; }
.group-box li figure{width: 100%; max-width:60px; height:60px; margin: auto;}
.group-box li span{width: 100%; font-size:1rem; font-weight: 500; word-break: normal; text-align: center; margin: 10px auto;}
 @media (max-width:840px) {
.group-box { padding:10px; } 	 
.group-box li{ width: calc(100%/3);}	 
}

 @media (max-width:767.98px) {
.group-box li{ width: calc(100%/2);}	 
}


.spec-list{ width: 100%;  display: flex;  flex-wrap: wrap; margin:0px;padding: 0px; position: relative; }
.spec-list li{ width: 100%;  padding: 2px 5px 2px 14px; margin:0px 30px 0px 0px;font-size: 1rem; font-weight: 400; color:#444; position: relative ; list-style: none; }
.spec-list li:before{ content: ''; width:6px; height:6px; background-color:#004098; border-radius: 99rem; position: absolute; top: 14px; left: 0px;  transition: all 0.5s ease 0s;}
.spec-list.half li{ width: calc(100%/2 - 30px);}
@media (max-width:767.98px) {
 .spec-list.half li{ width:100%;}   
}
 
/*table css*/
:root { --stickyBackground: #eee; --borderColor: #c0d1dd;}
.table-wrapper { width: 100%; height: auto;  margin: 30px auto;  overflow: auto; }
@media (max-width:767.98px) {
.table-wrapper { margin:0px auto 30px auto;  overflow: auto; }
}
.datatable { width: 100%; border-spacing: 0; margin: auto;background-color:#fff;  box-shadow: 0px 0px 13px 0px #dbdee0;}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}
.datatable thead {  letter-spacing: 0.05em;  text-transform: uppercase;}
.datatable tbody { font-size: .9rem ;border: 2px solid var(--borderColor); }
.datatable th { font-size:1rem; font-weight: 700; color:#000;  padding:10px; text-align: center; white-space: nowrap; border-right: 1px solid var(--borderColor); border-top: 2px solid var(--borderColor);  border-bottom: 2px solid var(--borderColor); background-color: #eef2f6;}
.datatable td { font-size:1rem; font-weight: 400;padding: 10px; white-space: nowrap; border: 1px solid var(--borderColor);   }
.datatable thead td{ color: #000;  font-weight: 700; }
.datatable tr.sticky {color: #000; font-weight: 700; position: sticky;  top: 0;  z-index: 1;  background: #fff;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,.1) 0%, rgba(0,0,0,0.08) 100%);}
.datatable td .wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center}
.datatable span.txt-r{ display: flex; flex-wrap: wrap;text-align: right}
.datatable span.txt-name{ display: flex; flex-wrap: wrap;flex-direction: column;  }

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

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

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

/*-------application-----------*/
.application { display: flex; flex-wrap: wrap; margin: auto; padding: 0px;}
.application li { flex: 0 0 calc(100%/4 - 20px); margin:20px 10px; transition: all 0.5s ease 0s; list-style: none; position: relative;}
.application li a{ width: 100%; height: 100%;  cursor: pointer}
.application li .photo {width: 100%;  height: 100% ; padding: 0; display: flex; justify-content: center; align-items: center; margin: auto; position: relative;object-fit: cover; background:#137372;      transition: all 0.5s ease 0s; border-radius: 1.25rem; }
.application li .photo img { opacity:1; width: 100%; margin: auto; height: 100%!important; -o-object-fit: cover; object-fit: cover; transition: 1s;  border-radius: 1.25rem;   overflow: hidden }
.application .photo .icon-img{ width: 80px;height: 80px; padding:0px;position: absolute;bottom: -0.375rem;right: -0.375rem; border-top-left-radius: 50%; transition: all 0.5s ease 0s;display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: #fff; opacity:1; z-index: 999 }
.application .photo .icon-img img { width:52px; height:52px!important;  margin: auto; display: block;  filter:invert(100%) brightness(5) grayscale(1);opacity: 1;}
.application .photo .icon-img::before {  position: absolute;  content: "";  bottom: 0.375rem;  left: -1.25rem;  background: transparent; width: 1.25rem;  height: 1.25rem;  border-bottom-right-radius: 1.25rem; box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;}
.application .photo .icon-img::after {  position: absolute;  content: "";  top: -1.25rem; right: 0.375rem;  background: transparent;  width: 1.25rem;  height: 1.25rem;  border-bottom-right-radius: 1.25rem;  box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;}
.application li .photo .icon-img .icon { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; bottom: -0.375rem;  right: -0.375rem;  width: 72px;height: 72px; background:#137372; border-radius: 50%; transition: all 0.5s ease 0s;}
.application .inner { display: flex; align-items: flex-end; position: absolute; top: 0; bottom: 0; left: 0; right: 0;  padding: 2vw 1vw;}
.application .inner h3{ width: calc(100% - 60px); margin-bottom: 0px;  color: #fff;text-shadow: 0px 1px 2px rgba(0,0,0,.5);  font-weight:500; font-size: 1.175rem;  word-break: break-word; transition: all 0.5s ease 0s;/*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;*/}

/*hover*/
.application li:hover .photo img{opacity: .5;} 
.application li:hover .photo .icon-img .icon {  transform: scale(1.05); background-color:#ffc107}
.application li:hover .photo .icon-img .icon img{ opacity: .75;}
.application li:hover h3{color:#ffc107 }

@media (max-width:1180px) {
.application li { flex: 0 0 calc(100%/3 - 20px); }
}
@media (max-width:767.98px) {
.application li { flex: 0 0 calc(100%/2 - 20px); }
.application .photo .icon-img{ width:60px;height:60px; }
.application .photo .icon-img img { width:36px; height:36px!important;}
.application li .photo .icon-img .icon { width: 56px;height: 56px; }  
.application .inner h3{  font-size: 1rem; }    
}
@media (max-width:430px) {
.application li {flex: 0 0 100%; margin:20px auto } 
.application .inner {   padding: 4vw;}    
.application .inner h3{  font-size: 1.275rem; }    
}




 
 

.features { margin-top: 1.25rem; margin-left: .3125rem}
.features > dl.data-sheet { display: -webkit-box; display: -moz-box; display: box;  display: -moz-flex; display: -ms-flexbox; -js-display: flex;  display: flex;  -webkit-box-lines: multiple;  -moz-box-lines: multiple; box-lines: multiple;  -ms-flex-wrap: wrap; flex-wrap: wrap;  -webkit-box-align: start; box-align: start; -moz-align-items: flex-start;  -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start;align-items: stretch;  }
.features > dl.data-sheet dd.value,.features > dl.data-sheet dd.value-2, .features > dl.data-sheet dt.name { -webkit-box-flex: 1;  box-flex: 1; -moz-flex: 1 0 31.3333%; -ms-flex: 1 0 31.3333%; flex: 1 0 31.3333%; font-weight: 400; padding: .625rem;  margin-bottom: 0px; min-height: 2.5rem; word-break: normal}
.features > dl.data-sheet dt.name { font-weight: 700; font-size: 1.125rem;  border-bottom: solid 1px rgba(0, 0, 0, .3); color:#157372; }
.features > dl.data-sheet dd.value,.features > dl.data-sheet dd.value-2 { font-weight: 400; font-size: 1rem;   border-bottom: solid 1px rgba(0, 0, 0,.2) }
.features > dl.data-sheet dd.value-2 {}
.features > dl.data-sheet dd.th, .features > dl.data-sheet dt.th { font-weight: 700; font-size: 1.125rem; color:#157372; border-bottom: solid 1px rgba(0, 0, 0, .5); }
@media (max-width:840px) {
.features > dl.data-sheet dt.name { -webkit-box-flex: 1;  box-flex: 1; -moz-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; }
}
@media (max-width:767.98px) {
.features > dl.data-sheet dd.value,.features > dl.data-sheet dd.value-2, .features > dl.data-sheet dt.name { -webkit-box-flex: 1;  box-flex: 1; -moz-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%;  }
}