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


/* 
.video { width:480px;margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  position: relative; transition: all 0.3s linear 0s; 
border: 1px solid #fff3eb;background: #fffaee;  box-shadow: 0px 2px 4px rgba(172, 184 ,204 ,.25), 0px 4px 4px rgba(172, 184 ,204 ,.2), 0px 8px 8px rgba(172, 184 ,204 ,.15), 0px 16px 16px rgba(172, 184 ,204 ,.1), 0px 24px 24px rgba(172, 184 ,204 ,.25);mix-blend-mode: multiply; border-radius:15px;  overflow: hidden;  }
.video figure{ position: relative; width:100%;  height: 0; padding:75% 0px 0px 0px; overflow: hidden;object-fit: contain;background-color: #fff; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.video figure img { max-width: 100%; height: auto; transition: all .35s ease;  }
.video:hover figure{  transform: scale(1.05)}
.video-title { width: 100%; max-height: 56.7px; margin: auto; padding:10px 0px; color:#565656; font-size:1rem; line-height: 1.375rem;  font-weight:400; overflow: hidden; word-break:normal;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.video .btn-play {   margin: auto; z-index:99; } 
@media (max-width: 1024px) {
.video { width:100%; padding:0px; }   
}
@media (max-width: 768px) {
.video li{ width: calc(100%/2 - 50px); margin: 50px 25px;  }
}

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

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