/*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;    }
 }
.product { width:100%;max-width: 80%; margin:30px auto; padding:0px;display: flex; flex-wrap: wrap;  position: relative; z-index: 99;}
.product li {width:100%; margin:50px auto;padding:0px; list-style: none; transition: all 0.5s ease 0s;  }
.product li .item{ padding:20px;  display: flex; flex-wrap: wrap;  align-items: flex-start;}
.product li:nth-child(even) .item{ flex-direction: row-reverse}
.product li:nth-child(even) .inner{  margin: auto ;}
.product li .photo{ width: 40%;  padding:0px; overflow: hidden;clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%); }
.product li .photo figure{ width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 9; transition: all 0.5s ease 0s;   }
.product li .photo figure img { max-width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s;   }
.product li .photo figure:hover img { transform: scale(1.1);  opacity: 1; }
.product li .inner{width:60%; margin: auto ; padding:0px 30px; position: relative;z-index:1; /*background-image: linear-gradient(to top,  #eaedf0 0%, #fafcfe 100%); */  } 

.product li .inner:before { content: ""; width:calc(100% + 20px); height:calc(100% + 40px); background: #f7f6f2; position: absolute; left: 50%; top: 50%;  transform: translate(-50%, -50%) skew(-10deg, 0deg);  z-index: -1; transition: .3s ease-in-out; box-shadow: 0px 5px 10px rgba(0, 0, 0, .1); }
.product li .inner .item-box{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between }
.product li .inner-txt{ width:100%;  display: flex;  flex-wrap: wrap;  padding:0px;margin:0px;  position: relative;} 
.product li .nav-item p{ font-size:0.875rem; color: #fff; font-weight: 700; line-height: 1rem; }
.product li h3{ width:100%;  padding:0px 0px 0px 20px; margin:0px 0px 20px 0px; letter-spacing: 2px; font-size:1.5rem; font-size: min(max(3.5vw, 1.15rem), 1.5rem);  line-height:1.875rem;  font-weight:700;  color:#004198; word-break: normal; word-wrap: break-word;  position: relative }
.product li h3:before { width:8px;  height:8px; content: ""; position: absolute; top: 12px; left: 0; background-color:#004198; }
.product li p{ margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400;color: #555;  overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;} 
.product li .more-icon{ width:100%; margin:30px auto auto auto}
@media (max-width:1024px) {
.product { max-width: 100%; padding:0px 20px;}
}
 
@media (max-width:767.98px) {
.product li {  margin:30px auto;  }   
.product li .inner,.product li:nth-child(even) .inner{  padding:20px;   } 
.product li h3{ min-height:auto;  font-size:1.125rem; line-height: 1.5rem; }
.product li p{ font-size:.875rem;line-height: 1.15rem; } 
.product li .nav-img {  width:80px;height: 80px; }
.product li .inner .item-box{ flex-direction: column-reverse}	
.product li .item{ margin:30px auto;padding:0px; flex-direction: column-reverse}
.product li .inner,.product li:nth-child(even) .inner{width:100%; margin: 0px; padding:20px;   } 
.product li .photo{ width:100%;}   
.product li:nth-child(even) .item{ flex-direction:column-reverse}
.product li .inner:before {  width:calc(100% + 10px); height:calc(100% + 20px);  }
	
}

@media (max-width:320px) {
.product li .inner,.product li:nth-child(even) .inner{ padding: 10px;}   
}
@media (max-width:280px) {
.product { padding:0px 0px;}  
.product li { margin:10px auto;} 
.product li .inner:before {  transform: translate(-50%, -50%) skew(-5deg, 0deg);   }	
}
/*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
.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:solid 1px #e4e3e3; list-style: none;   transition: all 0.3s linear 0s; position: relative;    }
 .product-item li figure{ width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.product-item li .item{ width: 100%;  }
.product-item .inner{ width: 100%; padding:20px;  display: flex; flex-wrap: wrap;  position: relative;   } 
.product-item .inner .inner-txt{ width:calc(100% - 30px);}
.product-item .inner h3{ min-height: 76px; margin:0px 0px 5px 0px; font-weight:700;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:#000; }
.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 {  border:solid 1px #004098; }
.product-item li:hover h3 a ,.product-item li:hover p{color: #004098;}
.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;   }
}

 /*----------------------------------------/
application清單頁    
----------------------------------------*/
.product-item.app-list{ padding:80px 60px;}
.product-item.app-list  .inner .inner-txt{ width:100%;}
@media only screen and (max-width:1024px){
.product-item.app-list{ padding:80px 0px;}
}
.sendinquiry {text-align: center; padding: 20px; }
.sendinquiry .btn-box.inquiry{ width: 300px; margin: 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: 50%; padding: 0px; order: 2; }
 
@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: 50%; padding: 0px; margin:0px;order: 1;   }
.product-nav{ width:100px;  padding:20px 0px; margin:0px auto; order: 3;   }
@media (max-width:840px) {
.product-right{ width:100%; margin: auto; padding: 10px 0px; order: 1;}
.product-nav{ width:100%;  padding:20px 0px; margin:0px auto; order: 3;   }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px; border:none;  }
}
 
.box-for{width:100%;   }
.box-nav{width:100%; padding:0px 30px;}
@media (max-width:1024px) {
.box-nav{ padding:0px;}
}
@media (max-width:767.98px) {
.box-nav{width:100%; order: 3; margin: 0px; padding: 10px 0px;  }
.box-for{width:100%; order: 2; }
}

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

.slider-nav{ width:100%;  max-width: 320px;height: auto; margin: 0px auto; padding:0px;   }
.slider-nav li{ width: 100%; opacity:1; margin:10px 5px;padding:0px; border-radius:5px;   }
.slider-nav li img{ width:100%; height: auto; margin:0px; padding:0px; border: solid 1px #eee;border-radius:5px;opacity: .75;  }
.slider-nav li.slick-current img,.slider-nav li:focus img{opacity: 1;  border: solid 2px #004198}
 
@media (max-width:1024px) {
.slider-nav li{  margin:5px;padding:0px;  }
}

@media (max-width:767.98px) {
.slider-nav li{ margin:10px 5px;padding: 0px; display: flex;  }
.slider-for li{  padding:0px;}
.btn-box.download,.btn-box.inquiry{transform: scale(.85)}
}
 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%;  margin:10px 0px; display: flex; flex-wrap: wrap; }
.product-group .btn{ width: 150px; height: auto; margin: 10px; display: flex; flex-wrap: wrap;justify-content: center; align-items: center;   }
@media (max-width:1024px) {
 .product-group .btn{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;}
}

.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); margin: auto; padding: 0px;  }
}

/*----------------------------------------/
social-icons
----------------------------------------*/
.share-wrap{  width: 100%; color:#555;  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.875rem;   }
.share-wrap span{width:auto;}
.share-wrap .share-icons{ width: 70%;  }
.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}
 
.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 2px rgba(255,255,255,.15); background-color:#1a8de2;}
.btn-box.inquiry{ border-radius:5px;  border: solid 2px rgba(255,255,255,.15);background-color: #004098; }
.btn-box i{ width:36px; height:36px;margin:auto 5px;filter: brightness(200%) grayscale(1) }
 

.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
----------------------------------------*/
#cms-tabs-product .resp-tabs-list{ width: 100%; margin-top: 50px;  border-bottom: solid 1px rgba(0,0,0,.1);}
#cms-tabs-product .resp-tabs-list li { width:auto; margin: 0px 25px;  font-size: 1.125rem;  font-size: min(max(2vw, 0.75rem),1.125rem);font-weight: 700; }
#cms-tabs-product .resp-tabs-list li a{ color: #000 }
@media (max-width: 767.98px) {
#cms-tabs-product .resp-tabs-list{ margin-top: 0px!important;}
#cms-tabs-product .resp-tabs-list li { margin: 0px 25px 0px 0px;}
}
@media (max-width: 320px) {
#cms-tabs-product .resp-tabs-list li { margin: 0px 5px 0px 0px;}
}
#cms-tabs-product .resp-tab-active { color:#004198;  position: relative; }
#cms-tabs-product .resp-tab-active:after { content: ""; position: absolute;left:0px;bottom:0px; width: 100%; height: 2px; background:#004198; }
#cms-tabs-product .resp-tab-active a { color:#004198!important;    }
#cms-tabs-product .resp-tab-content { padding:30px 0px ;}
 

.tab-content {padding: 40px 0px;}
@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:#004198;  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; }

 
.icon-img{ width: 80px; height: 80px; padding:  0px; position: relative;   transition: all 0.5s ease 0s;display: flex; flex-wrap: wrap; justify-content: center; align-items: center;   }
.icon-img:before { left:-1px; top:-1px;content: ""; width: calc(80px + 2px);  height: calc(80px + 2px); display: block;  border: dotted 4px #003399; border-radius:99rem; position: absolute;   animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.icon-img:after { opacity:.75;  right:0px; top:0px;content: ""; width: calc(80px + 2px);  height: calc(80px + 2px); display: block;  border: dotted 2px #dbeaff; border-radius:99rem; position: absolute;   animation: rotate2 36s infinite linear; transform-origin: 50% 50%;}
.icon-img img { width:60px; height:60px!important;  margin: auto; display: block; position: relative  }
  
 
@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(359deg) scale(1)  }
}

@keyframes rotateIt {
  to { transform: rotate(-360deg); }
}

.application{ width: 100%; margin: auto; padding: 0px; display: flex;  flex-wrap: wrap;justify-content: flex-start;}
.application li{ flex: 0 0 auto; width: 33.33333333%; text-align: center; max-width: 100%;  margin: 30px 0; padding-right: 15px; padding-left: 15px; list-style: none;}
.application li .item { width: 100%; margin: auto; position: relative; transition: .3s ease-in-out;}
.application li .item:before { content: ""; width: 190px; height: 380px; background: #f7f6f2; position: absolute; left: 50%; top: 50%;  transform: translate(-50%, -50%) skew(-20deg, 0deg);  z-index: -1; transition: .3s ease-in-out;}
.application li .item h3{  margin-bottom: 15px; margin-top: 50px; font-weight: 700; font-size: 1.75rem; line-height: 1.2;}
.application li .item a h3 { color: #000; text-decoration: none;}
.application li .item p{ margin-bottom: 30px;padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400;color: #555;  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 .read-more-btn { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid; border-radius: 100%; margin: auto; background: #fff; transform: translateX(-10px);  opacity: 0; visibility: hidden;  border-color:rgba(0,65,152,1); transition: .3s ease-in-out; text-decoration: none;}
.application li .read-more-btn i{ width: 17px; height: 17px; color: #000;  font-size: 12px;}
.application li figure{width: 200px;  height: 200px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; }
.application li figure img {  width: 50%; max-height: 50%;  position: relative;  }
.application li figure:before {  content: ""; position: absolute; top: 0; left: 0;  border: 1px solid;  width: 100%; height: 100%;  transform: skew(-20deg, 0deg); background: #fff; border-color: rgba(0,65,152,.25); transition: .3s ease-in-out;}
/* hover */
.application li .item:hover:before{ background-color: rgba(0,65,152,.2); }
.application li .item:hover figure:before{ background-color: rgba(0,65,152,1); }
.application li .item:hover .read-more-btn{ transform: translateX(0);  opacity: 1; visibility: visible;}
.application li .item:hover figure img { filter:invert(100%) brightness(5) grayscale(1)  }
.application li .item:hover a h3{ color:#004198;}
/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.application  li { flex: 0 0 auto;  width: 50%; margin-bottom: 40px;}
}
/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.application li { flex: 0 0 auto; width: 100%; margin-bottom: 20px;  }
.application li .item{  width: 100%;}
.read-more-btn{ transform: translateX(0px); opacity: 1; visibility: visible;}
 }




/*-------contact-location-----------*/
.fullwidth-map { padding: 40px 0; position: relative; }
.map-wrapper-row { max-width:1100px; margin: 0 auto; padding: 60px 0px;}
.map-pins-component { margin-top: 60px; position: relative; }
.map-pins-component .map-image {  max-width: 100%; opacity: 1;  }
.map-pins-component .pin-icon { width: 40px;}
.map-pins-component .pin { position: absolute;  display: inline-block; text-align: center;  z-index: 10; transition: 0.5s; transform: scale(1) translateY(0); cursor: pointer; perspective: 300px; transform-origin: 50% 100%;}
.map-pins-component .pin:hover, .map-pins-component .pin.is-opened {  transition: 0.5s; transform: scale(1.3) translateY(0); z-index: 30;}
.map-pins-component .pin:hover .pin-label span { background: #FFF1C6; color: #000; transition: 0.5s;}
.map-pins-component .pin:active { transform: rotateX(25deg) scale(1.1); transition: 0.2s;}
.map-pins-component .pin-popup {  position: absolute;  left: calc(100% + 20px); transition: 0.5s; top: 0; width: 200px; max-height: 300px; padding:5px; text-align: left;  transform: scaleY(0); transform-origin: 0 0; overflow-y: auto;  border-radius:5px; background-color:#eef2f6;  border: solid 1px #fff;overflow: hidden;box-shadow: 0px 0px 13px 0px rgba(26, 141, 226, .5);  }
.map-pins-component .pin.is-opened .pin-popup { transform: scaleY(1); transition: 0.5s; opacity: 1;}

.map-pins-component .pin-popup h3{margin:2px 0px; font-size:12px; font-weight: 700; color:#003567 }
.map-pins-component .pin-popup p{margin:2px 0px; font-size:10px; font-weight: 600;line-height: 1rem;color:#1894ac }
.map-pins-component .pin-popup .txt{font-size:10px; font-weight: 400;line-height:0.75rem;color:#3b3b3b }

/*座標*/
.map-pins-component .pin-location-1 {left:55%; top:42%;}
.map-pins-component .pin-location-2 {left:26%; top:40%;}
.map-pins-component .pin-location-3 {left:72%; top:52%;}
.map-pins-component .pin-location-4 {left:45%; top:14%;}
.map-pins-component .pin-location-5{left:84%; top:48%;}
.map-pins-component .pin-location-6{left:34%; top:24%;} 
.map-pins-component .pin-location-7{left:80%; top:52%;} 
.map-pins-component .pin-location-8{left:77%; top:50%;} 
.map-pins-component .pin-location-9{left:36%; top:40%;} 
.map-pins-component .pin-location-10{left:46%; top:70%;} 
.map-pins-component .pin-location-11{left:38%; top:72%;} 
.map-pins-component .pin-location-12{left:42%; top:72%;} 
.map-pins-component .pin-location-13{left:52%; top:82%;} 
.map-pins-component .pin-location-14{left:68%; top:32%;} 


/*auto*/
#auto.map-pins-component .pin-location-1 {left:55%; top:32%;}
#auto.map-pins-component .pin-location-2 {left:28%; top:50%;}
#auto.map-pins-component .pin-location-3 {left:55%; top:62%;}
#auto.map-pins-component .pin-location-4 {left:45%; top:24%;}
#auto.map-pins-component .pin-location-5{left:90%; top:38%;}
#auto.map-pins-component .pin-location-6{left:34%; top:28%;} 
#auto.map-pins-component .pin-location-7{left:80%; top:52%;} 
#auto.map-pins-component .pin-location-8{left:67%; top:50%;} 
#auto.map-pins-component .pin-location-9{left:36%; top:45%;} 
#auto.map-pins-component .pin-location-10{left:46%; top:60%;} 
#auto.map-pins-component .pin-location-11{left:38%; top:72%;} 
#auto.map-pins-component .pin-location-12{left:42%; top:62%;} 
#auto.map-pins-component .pin-location-13{left:72%; top:42%;} 
#auto.map-pins-component .pin-location-14{left:62%; top:28%;} 


/*aerospace*/
#aerospace.map-pins-component .pin-location-1 {left:55%; top:32%;}
#aerospace.map-pins-component .pin-location-2 {left:42%; top:45%;}
#aerospace.map-pins-component .pin-location-3 {left:60%; top:32%;}
#aerospace.map-pins-component .pin-location-4 {left:38%; top:24%;}
#aerospace.map-pins-component .pin-location-5{left:48%; top:39%;}
#aerospace.map-pins-component .pin-location-6{left:34%; top:18%;} 
#aerospace.map-pins-component .pin-location-7{left:40%; top:15%;} 
#aerospace.map-pins-component .pin-location-8{left:37%; top:50%;} 
 

/*communication*/
#communication.map-pins-component .pin-location-1 {left:55%; top:32%;}
#communication.map-pins-component .pin-location-2 {left:42%; top:45%;}
#communication.map-pins-component .pin-location-3 {left:60%; top:32%;}
#communication.map-pins-component .pin-location-4 {left:38%; top:24%;}
#communication.map-pins-component .pin-location-5{left:48%; top:39%;}
#communication.map-pins-component .pin-location-6{left:34%; top:18%;} 
#communication.map-pins-component .pin-location-7{left:40%; top:15%;} 
#communication.map-pins-component .pin-location-8{left:37%; top:50%;} 

/*industrial*/
#industrial.map-pins-component .pin-location-1 {left:56%; top:36%;}
#industrial.map-pins-component .pin-location-2 {left:42%; top:45%;}
#industrial.map-pins-component .pin-location-3 {left:60%; top:32%;}
#industrial.map-pins-component .pin-location-4 {left:36%; top:24%;}
#industrial.map-pins-component .pin-location-5{left:48%; top:39%;}
#industrial.map-pins-component .pin-location-6{left:29%; top:23%;} 
#industrial.map-pins-component .pin-location-7{left:70%; top:25%;} 
#industrial.map-pins-component .pin-location-8{left:37%; top:50%;} 
#industrial.map-pins-component .pin-location-9{left:36%; top:45%;} 

@media (max-width:840px) {
.fullwidth-map { padding: 0px;  } 
.map-pins-component .pin-popup { left:-100px; top: -150px;    }
 }

@media (max-width:767.98px) {
.map-pins-component .pin:hover, .map-pins-component .pin.is-opened { transform: scale(0.8) translateY(0);  }
.map-pins-component .pin:active { transform: rotateX(25deg) scale(1); transition: 0.2s;}

}

.pin-dot { width: 16px; height: 16px;color: #fff; font-size: 1rem; font-weight: 700;  border-radius: 50%; background-image: linear-gradient(to right, #ff7c93 0%, #cf0004 100%);position: absolute;z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.pulse { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px;}
.pulse:before { content: ""; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%;  margin-top: -100%; border-radius: 45px; background-color: #cf0004; -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
.pulse:after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: white; border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;}

@media (max-width:767.98px) {
.pin-dot{ width:8px; height: 8px;}
.pulse { width: 12px; height: 12px;}

}

@-webkit-keyframes pulse-ring {
  0% { transform: scale(0.33); }
  80%, 100% { opacity: 0;  }
}
@keyframes pulse-ring {
  0% { transform: scale(0.33); }
  80%, 100% { opacity: 0;  }
}
@-webkit-keyframes pulse-dot {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
@keyframes pulse-dot {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}

 

.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(26, 141, 226, 1); color:rgba(0, 65, 152, 1); }
.features > dl.data-sheet dd.value,.features > dl.data-sheet dd.value-2 { font-weight: 400; font-size: 1rem;   border-bottom: solid 1px rgba(26, 141, 226, .5) }
.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:#fff; border-bottom: solid 1px rgba(26, 141, 226, .5);  background-color:rgba(0, 65, 152, 1);     }
@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%;  }
}