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

.main-area.top { background-color:#fff;}

.product-arera{ padding:50px 0px 0px 0px;  width: 100%; display: flex; flex-wrap: wrap;}

.product-arera .main-content {width:calc(100% - 300px);  padding-left:40px; position: relative;  padding:30px 60px; margin-top: -70px; margin-bottom: 30px; border-radius: 20px; background: #fff;  box-shadow: 0 0 30px hsla(0,0%,46.7%,.2); }

.bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}

@media (min-width: 992px) and (max-width: 1199.98px) { 

.product-arera{  padding:0px;}

.product-arera .main-content {width:calc(100% - 240px);  padding-left:30px; margin-top: -40px; }

}

 @media (max-width: 992px) {

 .product-arera .main-content {width:100%;  padding-left:0px;  padding-right: 0px;  margin-top: 0px;  box-shadow: none;  }

}

@media (max-width: 840px) {

.product-arera{  padding:0px;}

}

@media (max-width: 767.98px) {

.product-arera{  padding:0px;}

.product-arera .main-content {width:100%;  padding:0px;}

}

.bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }

/*--分類new-tag --*/

.product-item .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;    }

 }

 /*----------------------------------------/

產品清單頁  cms-main-.product-item  

----------------------------------------*/

.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }

.product-item li { width: calc( 100%/4 - 20px); margin:40px 10px 40px 10px; padding:0px ; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;   transition: all 0.3s linear 0s; position: relative;    }



.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%;   border:solid 1px #e4e3e3; }

.product-item .inner{  width: 100%; padding:20px;  display: flex; flex-wrap: wrap;  position: relative;   } 

.product-item .inner h3{ min-height:74px; margin:0px 0px 5px 0px; font-weight:500;font-size:1.175rem;font-size: min(max(3.5vw, .9rem), 1.175rem);line-height: 1.5rem; color:#000;  letter-spacing: 0.5px;  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:5px 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 a ,.product-item li:hover a 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%); }



.product-item li:hover .item{  border:solid 1px #004098; }

.product-item .inner .inner-txt{ width:calc(100% - 30px);}

 

@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{ padding:10px; } 

.product-item .inner h3{ min-height:auto;  }

 .product-item .inner p{ line-height: 1.125rem;  } 

}

@media (max-width: 767.98px) {

.product-item { width: calc( 100% + 20px); margin:0px -10px; padding: 0px;  }	 	

.product-item li { width: calc(100%/2 - 20px); margin: 10px 10px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1;   } 

}

@media (max-width:320px) {

.product-item li {width: calc(100%  - 30px);  margin: 10px auto;   }

}



  

@media (max-width:280px) {

.product-item li { width:100%; margin: 10px auto;   }

.product-item .inner h3{ font-size:.9rem; line-height:1.25rem; }      

}





/*compare*/

.compare { width: 20px; height: 20px; margin:5px 10px auto auto;   align-items: flex-start;position: relative }

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

.sendinquiry {text-align: center; padding: 20px; }

.sendinquiry .btn-box.inquiry{ width: 300px; margin: auto}

 @media (max-width:767.98px) {

.compare { font-size:0.875rem;} 

}

@media (max-width:420px) {

.compare { font-size:0.75rem;} 

}













/*---------------------------------

best-wrap

----------------------------------------*/

.best-wrap{  width: 100%; margin:0 auto; padding:20px 0px; background-color: #fff; }

.best-wrap .product-item {height: auto;}

.best-wrap .product-item li { width: calc( 100% - 20px); margin:40px 10px; padding:0px;   }

.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next,.best-wrap .news-list .slick-prev,.best-wrap .news-list .slick-next{  top:-88px;  }

.best-wrap .product-item .slick-prev,.best-wrap .news-list .slick-prev{ left:calc(100% - 100px);}   

.best-wrap .product-item .slick-next,.best-wrap .news-list .slick-next{right: 0px;}

@media (max-width:480px) {

.best-wrap .product-item li { margin:20px 10px; padding:0px;}

  

}



/*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%; height: auto;  margin:auto; padding:0px 0px 30px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}





/*----------------------------------------/

圖片輪播區塊

----------------------------------------*/

.product-right{width:calc(50% - 130px);  padding: 50px 15px;  z-index: 1;background-color:transparent;  order: 2; }

@media (max-width:1024px) {

.product-right{width:calc(50% - 130px);  height: auto;   padding:0px;}   

}

@media (max-width:840px) {

.product-right{width:100%;padding: 5px 0px 0px 0px; position: relative; height: auto;   order: 2;}  

}

.product-right::-webkit-scrollbar { display: none;-webkit-appearance: none;}

.product-right::-webkit-scrollbar:vertical { width: 6px; }

.product-right::-webkit-scrollbar:horizontal {  height: 12px;}

.product-right::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}

.product-right::-webkit-scrollbar-track { border-radius: 0px;  background-color:#fff;}



.product-left{ width:50%;   padding:20px 0px; margin:0px auto;order: 1;   }

.product-nav{ width:100px;  padding:20px 0px; margin:0px auto; order: 3;   }

@media (max-width:840px) {

.product-left{ 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:calc(100% - 20%); }

.box-nav{width:20%; padding:0px 10px;}

@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{ position: relative; 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%; height: auto; margin:-10px 0px 0px 0px; padding:0px;   }

.slider-nav li{ width: 100%; opacity:1; margin:10px;padding: 5px; border-radius:5px;   }

.slider-nav li img{ width:100%; margin:0px; padding:0px; border: solid 1px #eee;border-radius:5px;opacity: .5;  }

.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; border-radius:0px; }

.product-group .btn{ width: 100px; height: 100px; margin: 0px auto 10px auto; display: flex; flex-wrap: wrap;justify-content: center; align-items: center; background-color:#eef2f6;border-radius:15px;  border: solid 1px #fff;overflow: hidden;box-shadow: 0px 0px 13px 0px rgba(26, 141, 226, .5); }

@media (max-width:840px) {

.product-group{ display: flex; flex-wrap: wrap;justify-content: center;}

 }



@media (max-width:420px) {

.product-group .btn{ width: 80px; height:80px; margin:10px; }

}



@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); min-height:50px;margin: auto 20px auto auto; padding: 0px 20px;  display: flex; }

@media (max-width:420px) {

.product-btn .btn{  margin: auto 10px auto 0px;  display: flex; }

}



/*----------------------------------------/

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%; margin: auto 0px; justify-content: flex-start;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;  }

  

.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:#555; 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; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }

.product-info-title { width: 100%;   padding:0px 0px 20px 0px; }

.product-info-title h1{ font-weight: 700; font-size:1.5rem;font-size: min(max(3.5vw, .1.375rem), 1.5rem);line-height: 1.75rem;  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:#727272;  word-spacing: normal; word-break:normal;  }

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

 

 

 

.way-delivery{ width: auto; font-size:1.125rem; font-weight: 700;  padding:2px 10px 2px 0px; color:#7c7d7d; }

.way-txt{ width:auto; font-size:1.125rem; font-weight: 700;  padding:2px 0px 2px 0px;  color:#004198;  }



@media (max-width:767.98px) {

.way-delivery{ width:100%; display:block; padding: 0px; text-align: left;  }

.way-txt{ width:100%; padding: 0px;   }

}



.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%; display: flex; justify-content: center; border-bottom: solid 1px rgba(0,0,0,.1); list-style: none;}

#cms-tabs-product .resp-tabs-list li { width:auto; padding: 10px 20px; margin: 0px 25px; font-size: 1.125rem;  font-size: min(max(3.5vw, 0.9rem),1.125rem);font-weight: 700; }

#cms-tabs-product .resp-tabs-list li a{ color: #000 }

#cms-tabs-product .resp-tabs-list li a:hover{ color:#004098 }



@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 40px; margin: auto;}

@media (max-width:767.98px) {

.edit{ padding:30px 20px; }

}



.group-box { padding:30px;  display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; margin-bottom: 30px; background-color:#eef2f6;border-radius:15px;  border: solid 1px #fff; box-shadow: 0px 0px 13px 0px #dbdee0;} 

.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 p{font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.5rem; font-weight: 400; }



.group-item-pic{  flex: 1 1 31.333%; padding: 10px; }









.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-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.5rem; 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%;}   

}

 



.specbox { width: 100%; margin: 15px auto; padding: 0px;display: -webkit-box; display: -ms-flexbox;  display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  }

.specbox li{ width: calc(100%/3 - 30px); margin: 10px 15px ; padding:10px;  list-style: none; background-image: linear-gradient(125deg, #d6e8f3 0%, #fff 100%);  border: solid 1px #fff; border-radius:10px; box-shadow: -2px 2px 6px rgba(0,0,0,.1) }

.specbox li .item{display: -webkit-box; display: -ms-flexbox;  display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.specbox .name { margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid #c5dae3;  color:#004297; font-weight:700; font-size:1.125rem;  }

.specbox .spec-txt {font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.5rem;  color:#464646;}

@media (max-width:840px) {

.specbox li{ width: calc(100%/2 - 15px); margin: 10px 15px 10px 0px; }

}



@media (max-width:767.98px) {

.specbox { margin: 10px auto auto auto;}	

.specbox li{ width: 100%; margin: 10px auto; }

}





 





/*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:nth-child(even) {background-color:#ededed; }*/

.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);}

}



.product li .photo {  background-image: linear-gradient(to top, #ebf7ff 0%, #fafcfe 100%);}

 

 

 



/* end application list*/

.product { width:80%; margin:30px auto; padding:0px; position: relative; z-index: 99;}

.product li { width:100%; margin:50px auto;padding:0px; list-style: none; transition: all 0.5s ease 0s; border: solid 1px #fff;position: relative; z-index: 9; overflow: hidden; background-image: linear-gradient(to top,  #eaedf0 0%, #fafcfe 100%);   border-radius:0px 80px 0px 80px; box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);}

.product li .item{  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: 50%; border-radius:5px; overflow: hidden  }

.product li .photo figure{ width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; 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:50%; margin: auto ; padding:30px; position: relative;z-index: 9; } 

.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%; min-height:66px; padding:0px 0px 0px 20px; margin:0px 0px 20px 0px; letter-spacing: 3px; font-size:1.75rem; font-size: min(max(3.5vw, 1.15rem), 1.75rem);  line-height:1.875rem;  font-weight:700;  color:#004198; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; position: relative }

.product li h3:before { width:8px;  height:8px;  content: ""; position: absolute; top: 12px; left: 0; background-color:#004198; border-radius: 50%;}

.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:70%; margin:30px auto auto auto}

@media (max-width:1024px) {

.product { width:100%; }

 }



 

@media (max-width:768px) {

.product li .photo figure,.product li .inner{ border-radius:0px 30px 0px 30px  }

.product li .more-icon{ width:100%;}

.product li .more-icon .btn-1 span{font-size: 0.9rem;}

}

@media (max-width:767.98px) {

.product li { width: 100%;  }   

.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}



	

	

	

}



@media (max-width:320px) {

.product li .inner{ padding: 10px;}   

}





/*----------------------------------------/

產品清單頁  cms-main-product-item  

----------------------------------------*/

.application { width:100%; margin:0px auto;  padding:0px;  position: relative; }

.application li { width: 100%; margin:10px auto; padding:0px;  overflow: hidden;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;  }

.application li .item{display: flex;flex-wrap: wrap;}

.application li figure{ width: 60%; padding-bottom:35.5%;  position: relative; height: 0; overflow: hidden; transition: all 0.5s ease 0s; background: #fff; border-radius:30px; }

.application li figure img {  width: 100%; max-height: 100%;  transition: all 0.3s;}

.application li figure:hover img { transform: scale(1.1);  opacity: .85; }

.application li .inner{width:40%; margin: auto  auto auto -10% ; padding:30px; position: relative;z-index: 99;  background-color:#fff; border-radius:30px;   } 

.application li .inner-txt{ width: calc(100% - 100px); margin-left: 20px; }

.application li .inner h3{ font-size:1.275rem;font-size: min(max(3.5vw, 1.125rem), 1.275rem);line-height: 1.5rem;font-weight:700;color:#003399;   }

.application li .inner h3 a{ color:#000; display: flex; flex-wrap: wrap;  }

.application li .inner p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px; font-size: .9rem; line-height: 1.375rem; font-weight: 400;  text-align: left;  } 

 

.application li:hover .inner h3 a,.application li:hover .inner p{color:#000; }

.application li:nth-child(even) .item{ flex-direction: row-reverse}

.application li:nth-child(even) .inner{  margin: auto -10% auto auto ;}

.application li:nth-child(even) .inner-txt{ width: calc(100% - 120px); margin-right: 20px; }



 

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



@media (max-width: 1024px) {

.application li .inner{width:40%; margin: auto  auto auto -5% ; padding:20px; } 

.application li:nth-child(even) .inner{  margin: auto -5% auto auto ;}

.group-item-box {flex: 1 1 100%;}
}

@media (max-width: 840px) {

.application li { width: 100%; margin:30px auto;}

.application li figure{ width: 100%; padding-bottom:57.25%; border-radius: 30px 30px 0px 0px; }

.application li .inner,.application li:nth-child(even) .inner{width:100%; margin:-10% auto auto auto; padding:20px;  } 

.application li .inner-txt{ width: calc(100% - 100px); }

.application li:nth-child(even) .item{ flex-direction: row}

.icon-img{ width: 60px; height: 60px;}	

.icon-img:before {  width: calc(60px + 2px);  height: calc(60px + 2px);  }

.icon-img:after {   width: calc(60px + 2px);  height: calc(60px + 2px); }

.icon-img img { width:50px; height:50px!important;   }

}

 



@media (max-width:767.98px) {

.application li .inner{  min-height:auto; padding: 10px 20px;   } 

 }

@media (max-width:420px) {

.application li .inner-txt,.application li:nth-child(even) .inner-txt{ width: 100%; margin: auto}

.application li .item,.application li:nth-child(even) .item{ flex-direction: column}

 

}







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

}