.cms-main-area{  position: relative;z-index: 0; }

.choose-block{width:100%; margin: auto;   padding:100px 50px; background: url("../images/index/s-line.svg") no-repeat left center; background-size: 100% auto;}
.choose{ width: 100%; margin: 0px auto; padding:40px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-content: flex-start; align-items: flex-start; list-style:none;   }
.choose li{width:calc(100%/6 - 30px);   margin: 10px 15px; padding:0px;  position: relative;}
.choose li a{display: flex; flex-wrap: wrap;justify-content: center; position: relative; color: #264054; transition: all 0.3s linear 0s; }
.choose li a:hover{ transform: scale(1.1)}

.choose li figure { position: relative; z-index: 0; margin: 0px auto; width:80%; overflow: hidden; border: solid 5px #cad4db; border-radius:99rem; text-align: center; cursor: pointer;  box-shadow: 0px 5px 5px rgba(0,0,0,.1)}
.choose li figure:before { content: ""; width: calc(100% - 10px);  height: calc(100% - 10px); top:5px; left:5px; display: block;  border: dashed 2px #fff; border-radius:99rem; position: absolute;z-index: 5; animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.choose li figcaption{ padding: 10px 0px;  display: flex; flex-wrap: wrap;justify-content: center; flex-direction: column; }
.choose li figcaption h3{ font-size:1rem; line-height: 1.35rem;  font-weight: 700; text-align: center; }
.circle-number{width:60px; height: 60px; margin:0px; position: absolute; left:0px; top:0px;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;font-size: 1.313rem; font-weight: 700; color:#264054; background-color:#cad4db; border-radius: 99rem; box-shadow: 0px 5px 5px rgba(0,0,0,.1)}


.cms-top.cms-main-area{margin-top:0px;}
.cms-top.cms-main-breads { padding:10px 0px;}

.cms-product-arera{ position: relative; padding: 20px;  width: 100%; display: flex; flex-wrap: wrap;align-self: flex-start;  background: #fff;   }
.cms-product-arera .cms-main-content {width:calc(100% - 300px);  padding-left:30px;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;}
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
@media (min-width: 768px) and (max-width: 1199.98px) { 
.cms-product-arera{  padding:0px;}
.cms-product-arera .cms-main-content {width:calc(100% - 300px);  padding-left:20px;   align-content: flex-start; align-items: flex-start;}
    
}
 @media (max-width: 768px) {
 .cms-product-arera .cms-main-content {width:100%;  padding-left:0px;  }
}
@media (max-width: 767.98px) {
.cms-product-arera{  padding:0px;}
.cms-product-arera .cms-main-content {width:100%;  padding:0px 15px;}
}

.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.cms-main-wrap{width: 100%;padding:0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
 @media (max-width:767.98px) {
 .cms-main-wrap{ padding:30px 0px; }
}

 

.nav-img{ display: inline-flex; margin:20px 10px 0px 0px;  padding: 0px; width:80px; height: 80px;}
.nav-txt{ display: inline-flex; width:calc(100% - 100px);  padding-top: 20px; padding-left:20px;font-size: 2.5rem; font-weight:700!important; color:#fff  }
.cms-product-cate { width:100%; max-width: 1160px; margin:30px auto;  padding:0px; }
.cms-product-cate li { width: 100%; margin:50px 0px;padding:50px 0px; position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; align-items: center; border-bottom: solid 1px #e1e9ef;transition: all 0.5s ease 0s; }
.cms-product-cate li:hover figure {-webkit-filter:grayscale(0); -webkit-filter:blur(0);  } 
.cms-product-cate li:hover figure img {-webkit-filter:grayscale(0); -webkit-filter:blur(0);  } 
.cms-product-cate li figure{  width:30%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;border-radius:20px;  }

.cms-production-list li{border: solid 1.5px #d8e3eb; padding: 0;}
.cms-production-list li figure{width: 40%;border-radius: 0;}

.cms-product-cate li figure img {  width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s; /*clip-path: polygon(0 9%, 100% 0, 100% 90%, 0% 100%); -webkit-filter:grayscale(1); -webkit-filter:blur(3px);  */}
.cms-product-cate li figure:hover img { transform: scale(1.1);  opacity: 1; }
.cms-product-cate li .cms-product-inner{width:50%; margin: 0px; padding:5px 30px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content:center; align-items: center;  } 
#cms-main .cms-product-cate li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-weight:700; font-size:2rem;  line-height:2.5rem; color:#264054;  word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#cms-main .cms-product-cate li p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.more-icon{width: 10%; }
.more-icon a{ display: flex; flex-wrap: wrap; align-items: center; color:#cf0004; }
.more-icon i{width:36px; height: 36px; display: inline-block; margin-right: 5px; }
.cms-product-cate .nav-item { text-align: center; width:100px;height: auto; padding-bottom: 34px; position: absolute;left: 0px;bottom :0px;  z-index: 9;}
.cms-product-cate .nav-item:hover .nav-img {background-color: #264054}
.cms-product-cate .nav-item:hover .nav-img img {  filter: invert(1);  opacity: 1}
.cms-product-cate .nav-item:hover .nav-img:before { border: dashed 1px #fff; filter: grayscale(1) brightness(1) opacity(1);}
.nav-item:hover p { color: #264054}
.cms-product-cate .nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px;width: 88px;height: 88px;border-radius:15px;background-color: #d8e3eb;position: relative;}
.cms-product-cate .nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #000; border-radius:99rem; position: absolute; filter: grayscale(1) brightness(0) opacity(0.3); animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.cms-product-cate .nav-img img {  margin: auto;display: block;  width: 52px; height: 52px; opacity: 0.7;  }
.cms-product-cate .nav-item p{ font-size:0.875rem; color: #000; font-weight: 700; line-height: 1rem; }

 @media (max-width: 767.98px) {
.cms-product-cate li {   margin:20px 0px;padding:20px 0px; }
	 .cms-production-list li{padding:0 0 20px 0;}
.cms-product-cate li figure{  width:100%; }   
.cms-product-cate li .cms-product-inner{width:100%; margin: 0px; padding:5px 0px; }
.nav-item { position: absolute;left: 0px;bottom :auto; top:26%;  }
.more-icon{width: 100%; }    
}
@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); }
} 
/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
 /* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;margin-top: 2.1875rem;  padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}

/*--分類new-tag --*/
.new-tag { display: flex; flex-wrap: wrap; align-items: center; width: auto; padding:2px 4px; font-size: 0.75rem; color: #fff; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all; z-index: 9; position: absolute; right:0px; top: 0px;  }
.new-tag a{color:#fff;}
.new-tag-01{ background:#db0632;}

 i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("../images/icon/arrow-right-f.svg") no-repeat right top;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
/*cms-btn-more =================================*/ 
.cms-more { width: auto;   height: 35px; padding: 20px 2px 20px 15px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer;  border-radius:30px;  background-image: linear-gradient(120deg, #22559e 0%, #6fcccb 55%);  }
@media (max-width:767px) {
.cms-more { width: auto; height: 24px }
}
.cms-more:hover .cms-more-circle, .cms-more:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.cms-more:hover .cms-more-txt, .cms-more:hover i { -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-more:hover{background:#afd9d3; }
.cms-more-circle { width: 30px; height: 30px;  position: relative; display: block; margin-left: 20px; border:2px solid #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-circle { width: 24px; height: 24px; margin-right: 15px}
}
.cms-more i { font-size: 1.875rem; color: #fff;  position: absolute; top: 0; bottom: 0; left: auto; margin: 5px auto auto 100px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-more i.icon-check { font-size: 1.35rem; margin: 10px auto auto 86px;  }
.cms-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) {
.cms-more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.cms-main-product-wrapper {  display: flex;  flex-wrap: wrap;  justify-content: center; width: 100%; margin:auto; padding: 0px; position: relative;}
 @media (min-width: 1200px) {
.cms-main-product-wrapper {  padding-right: 15px; padding-left: 15px; max-width: 1200px; margin: auto; }
 }
@media (min-width: 1400px) {
.cms-main-product-wrapper { max-width: 1440px;  }
 }
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.section {width: 100%;  padding:40px 0px; }
.section1 {width: 100%;  padding:60px 0px; 
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #d8e3eb 84%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(84%,#d8e3eb));
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#d8e3eb 84%);
    background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#d8e3eb 84%);
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#d8e3eb 84%);
    background: radial-gradient(ellipse at center, #ffffff 50%, #d8e3eb 85%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8e3eb',GradientType=1 );}

 
.cms-main-product-left{width:calc(50% - 50px); margin-left: 10%; padding: 5px 0px 60px 50px; display: flex;  flex-wrap: wrap; position: relative; order: 2; }
.cms-main-product-right{ width:40%; height: 100%; padding: 0px; margin-left: 50px; display: flex;flex-wrap: wrap; justify-content:flex-end; align-content: flex-start; position: relative;  order: 1; }
.cms-main-product-left .cms-social-icons{justify-content: center;align-content: center; align-items: center; font-size: 0.875rem;}
.cms-slider-for { width:100%;  margin: 0px auto; padding:0px!important; display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap;  }
.slider-for { width: 100%; max-width: 80%;  margin: 0px auto!important; padding:0px!important;   display: flex; justify-content: center; align-content: center; align-items:center;  order: 1; }
.slider-for li,.slider-nav li { width: 100%; display: block;margin: auto; padding: 0px; cursor: pointer; }
.slider-for li img{ display: block; width: 100%; height: auto;margin: auto; padding: 0px;}  
.slider-for .slick-dots{bottom:-150px; background-size: 999;}
.slider-nav{ width: 100%; height: auto; margin:10px auto; padding:10px; display: flex; flex-wrap: wrap; justify-content:space-between; order: 2; }
.slider-nav li{  opacity:.5; margin:10px; }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav li img{ width:100%; margin:0px; padding:0px;  }
.slider-nav .slick-dots {bottom:-20px;}
@media (max-width:1180px) {
.cms-main-product-left{ padding: 5px 0px 60px 0px;  }
.cms-main-product-right{    margin-left: 0px;   }
}

@media (max-width:991px) {
.cms-main-product-left{width:100%;  margin-left: 0;padding: 5px 20px 0px 20px; }  
.cms-main-product-right{ width:100%;  margin-left: 0;}
}
@media (max-width:767.98px) {
.cms-main-product-left{  padding: 5px 0px 0px 0px; }  

}

 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.cms-product-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
 #cms-main .cms-product-group .btn{ width: calc(100%/3 - 20px); margin: auto 10px auto 0px;  border-radius:5px;  }
.cms-product-info button {  border-radius:0px; }
.cms-btn-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.cms-btn-group a{width:auto; margin:10px 0px; padding:0px 20px; }
  
.cms-product-info{ width:100%; padding:0px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
#cms-main .cms-product-info h1{ width: 100%; margin-bottom: 10px; display: flex; justify-content: flex-start; font-weight: 700; font-size: 26px; color:#264054; letter-spacing: 1px;   }
#cms-main .cms-product-info h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#776b62;  word-spacing: normal; word-break:normal; }
#cms-main .cms-product-info p{  width: 100%; margin: 5px 0px; font-size:0.875rem; font-weight: 700; color:#7a7a7a;  word-spacing: normal; word-break:normal;  }
 
.cms-product-description{ width: 100%; padding:5px 0px 10px 0px;   color:#888;  }
#cms-main .cms-product-description p {width: 100%; margin: 5px 0px; font-size:0.9rem; font-weight: 400; color:#333;  word-spacing: normal; word-break:normal;}
#cms-main .cms-product-description span {width: 100%; margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
#cms-main .cms-product-description ul li .cms-item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#98979d;  font-size:0.85rem;}
#cms-main .cms-product-description p strong{color:#000;}
.cms-badge-tag{ padding: 5px; width: 100%;  display: flex; flex-wrap: wrap; transition: all .3s; cursor: pointer;}

a.a-tag { width: auto; height: 36px; margin-right: 5px; font-size: 14px;  font-weight: 700; line-height: 1.57; letter-spacing: normal; position: relative;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px 8px 5px 9px;  max-width: 100%; color: #224058;  border: 1px solid #224058;  border-radius:0px;  -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s; -ms-flex-wrap: wrap; flex-wrap: wrap;}
a.a-tag:hover{color: #fff; background: #224058;}


.cms-product-info-title{ width: calc(100%  - 20px);padding: 0px 10px; align-self: center; margin-bottom: 20px;}
#cms-main .cms-product-info-title .btn{ width: 50%;  }
 

.specbox {  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;width: 100%;}
.specbox{ margin-bottom: 25px; height: 240px; padding-right: 10px;  overflow-y: hidden;}
.specbox::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1);}
.specbox::-webkit-scrollbar { width: 4px;}
.specbox::-webkit-scrollbar-thumb { background-color: #ff0000;}
 @media (max-width:991px) {
 .specbox{ margin-bottom: 25px; height: auto; padding-right: 0px;  overflow-y: hidden;}    
     
     
}


.item-title { width: calc(100% / 2);padding: 0px 10px; margin-bottom: 10px;}
.item-title-full { width: 100%;padding: 0px 10px; margin-bottom:10px;}
@media (max-width: 767.98px) {
.item-title { width: calc(100% - 20px);padding: 0px 10px; margin-bottom: 10px;}   
#cms-main .cms-product-info-title .btn{ width:100%; display: flex; flex-wrap: wrap; }  
#cms-main .cms-product-info-title .btn i.icon-shop{display: inline-block!important; margin: 0px;}  
}  
.specbox .name { margin-bottom: 14px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#224058; font-weight:700; font-size: 1rem; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.specbox p {width: calc(100% - 20px);font-size: 14px; color: #575757;}
 
.pdd-toggle-area{ position: relative;width: 100%;margin: 30px 0px 0px 0px; border: 1px solid #f2f2f2; display: flex;  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);z-index: 3 }
.pdd-toggle-area:before { content: ""; display: block; width: 1px; height: 100%; border-left: 1px solid #e5e5e5; position: absolute; left: 50%; pointer-events: none; z-index: 6; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) }
.pdd-toggle-area a { width: 50%;height:3vw; display: flex; align-items: center; text-align: center; justify-content: center; position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a:after { content: ""; position: absolute;  width: 100%; height: 100%; background: linear-gradient(to right, #3676be, #292487); transform-origin: center bottom; transform: scaleY(0); left: 0;  top: 0;  z-index: 1; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a .fz-C, .pdd-toggle-area a .icon { display: inline-block; margin-left: 10px; transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);  position: relative; z-index: 3;font-weight: 600; color: #000}

.pdd-toggle-area a:nth-child(1){background-color:#f2f2f2; }
.pdd-toggle-area a:nth-child(2){background-color:#e5e5e5; }
.pdd-toggle-area a .icon:before { width: 1rem; height: 1rem }
.pdd-toggle-area a:hover { color: #fff; background-color:#026ebb }
.pdd-toggle-area a:hover span { color: #fff;  }
@media (min-width: 0) and (max-width: 979px) {
.pdd-toggle-area a { height: 52px }
.pdd-toggle-area a .fz-C { font-size: .875rem }
 }
 

.icon-down{width: 12px; height: 12px; background: url("../images/icon/slick-down.svg") no-repeat left top;}
.sec1 { position: relative; display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  margin-bottom: 100%;  width: 100%;  min-height: 800px; height: calc(100vh - 130px); background-color: #fff;}

.spec-item .table_scroll{margin: 0px auto 20px auto;width: 100%;}
.spec-item .table_scroll > table {min-width: 800px;}
.spec-item .datatable{width: 100%;border: solid 1px #d0d9df;}
.spec-item .datatable tr:nth-child(2n+2){background: #e6eef4;}
.spec-item .datatable th, .datatable td{font-size: .875em;padding: 5px 0;}
.spec-item .datatable th{width: 40%;position: relative;color: #264054;font-weight: 700;flex-shrink: 0;padding-left: 1em;}
.spec-item .datatable th::after{content: "";width: 1px;height: 72%;right: 0px;top: 5px;position: absolute;display: block;background: #d0d9df;}
.spec-item .datatable td{width: 60%;font-weight: 400;flex-shrink: 0;padding-right: 1em;padding-left: 0.5em;}

.spec-item-pool{ width: 100%; margin: auto; display: block;}
.spec-item {width: 100%; margin: auto; padding: 0px;  display: flex; flex-wrap: wrap; justify-content: center;  }
.spec-item .field { font-weight: 700; flex-shrink: 0; padding-left: 1em}
.spec-item .value { font-weight: 400; flex-shrink: 0;  padding-right: 1em;  padding-left: 0.5em}
.spec-item ul {  width: 100%;  margin:0px auto 20px auto; padding: 0px;  border: solid 1px #d0d9df;}
.spec-item ul li { display: flex;  flex-wrap: wrap;   width: 100%; padding: 5px 0px; }
.spec-item ul li:nth-child(even){background:#e6eef4;}
.spec-item ul li.bg-gray { background-color: #efefef }
.spec-item span {font-size: .875em }
.spec-item .field {width: 45%}
.spec-item .value { width: 55%}

 
@media (max-width: 991.98px) {
.spec-item ul {  margin: auto; padding: 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  }
.spec-item .field {width: 100%}
.spec-item .value { width: 100%}
}
@media (min-width: 992px) {
.spec-item .fz-D { width: 18%; display: block; flex-shrink: 0 }
.spec-item .field { width: 40%; position: relative; color:#264054; }
.spec-item .field:after{content: ""; width: 1px; height: 100%; right: 0px;  top:0px;position: absolute;  display: block; background:#d0d9df;  }
.spec-item .value { width: 60%  }
}
.spec-table { display: block; width: 100%;  width: 1200px; margin:20px auto; border-collapse: separate; background:#fff; /* -webkit-border-vertical-spacing: 10px; -webkit-border-horizontal-spacing: 10px; */}
.spec-table tr{  width: 1200px; }
.spec-table th { padding:10px 5px; font-size: 1rem; background:#066CB7; color: #fff; }
.spec-table td { padding:10px 5px; font-size: 0.9rem; border-right:solid 1px #eee; border-bottom: solid 1px #eee;}
.spec-table td:last-child { border-right:none;}
/*----------------------------------------/
spec tab
----------------------------------------*/
 .product-info {display: flex; flex-wrap: wrap;  width:100%; margin: auto;}
@media (max-width: 991.98px) {
.cms-product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
.cms-product-info{  padding:0px; border:none; }    
}

/*----------------------------------------/
social-icons
----------------------------------------*/
#cms-main .cms-product-info .cms-social-icons{color:#675952;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.75rem;   }
#cms-main .cms-product-info .cms-social-icons li{ width: auto!important; margin:5px; padding-top: 8px;  }
#cms-main .cms-product-info .cms-social-icons li a{ opacity:1;font-size:0!important;color:#675952!important;  }

/*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{  width: 100%; margin:0 auto; padding:20px 0px 0px 0px;  display: flex; flex-wrap: wrap; background: #f5f5f5 ;}
.cms-best-wrap .cms-title-2 {  margin:15px auto!important; }
.cms-best-wrap .cms-title-2:after{content: "";position: absolute; left: 50%; bottom: -20px; width: 20px;height: 2px;background:#d00003;  } 
.cms-best-wrap .cms-title-2 h2:after{display: none; }
.cms-best-wrap .cms-title-2 h2 strong{color: #000;}

.cms-best-wrap .cms-main-product-item li { width:100%; margin: 10px; height: auto;  }
.cms-best-wrap .cms-main-product-item li:nth-child(3n){margin-right: 10px;}
.cms-best-wrap .cms-main-product-item li:nth-child(2n){margin-right: 10px;}
.cms-best-wrap .cms-main-product-item h3 a{ font-weight: 400; }
 .cms-best-wrap .slick-dots li button:before{ color: #fff; }
.cms-best-wrap .slick-dots li.slick-active button:before { opacity: .75; color: #fff; }
.cms-best-wrap .slick-dots {bottom:-30px;}
.cms-best-wrap .slick-dots li{margin: 15px 2px;}
.cms-best-wrap .slick-next,.cms-best-wrap .slick-prev{top:40%;transform: scale(0.8)}
.cms-best-wrap .slick-next{right:-20px;}
.cms-best-wrap .slick-next:before,.cms-best-wrap .slick-prev:before { transform: scale(0.8)  }
.cms-best-wrap .slick-prev{left:-20px;}
  



.edit {display: block; width: 100%; max-width:960px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
  
  /*--------table form style------------*/
.table {width: 100%;  overflow-x: auto;}
.table label:nth-child(odd) ul { background: #f4f4f4;}
.table-thead { display: flex; flex-wrap: wrap;  background:#dce8f0; padding: 15px 10px 15px 50px; font-weight: 700;}
.table-thead li{color:#026ebb;  font-weight: 700; }
.table-tbody { display: flex; flex-wrap: wrap;  padding: 10px 10px 10px 50px; margin: 0px; border: solid 1px #f4f4f4;}
.table ul { list-style: none;}
.table ul:nth-child(odd) { }
.table ul:nth-child(even) { background: #fff;}
.table ul:hover{background:#ffefda;}
.table-tr{font-size: 0.875rem;}
.table-tr { width: calc(56%/7); padding: 0 5px;}
.table-tr.w20 {  width: 20%;}
.table-tr.w12 {  width: 12%;}
.table label { position: relative; cursor: pointer; display: block;}
.table label input[type=checkbox] { width:18px; height: 18px;   position: absolute;  top: 15px; left: 15px;color:#006fbc!important;   border-color: #006fbc!important;}
 
a.downloadPDF img{ width:30%; margin:auto; }
a.downloadPDF:hover img{  opacity: .5;}

 @media(max-width:768px) {
.table-thead {display: none;}
.table {width: 100%; max-width: 420px; display: flex; flex-wrap: wrap; overflow-x: auto;}
.table-tr { width: calc(100%/2); }
.table-tr.w20 {  width: 100%;}
.table-tr.w12 {  width: 100%;}
.table-tr::before{ content: attr(data-content); padding-right: 10px; color:#026ebb;  font-weight: 700;  }     
.table label input[type=checkbox] {  top: 22px!important;  }
}


/*search-box*/
.search-box{width: 100%; margin:-30px auto 0px auto; padding:20px 10px 10px 10px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; background:#cad4db; }
.search-box-type{width: 100%; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-content: center;  }
.search-box .cms-btn-btnbox{width: 50%; display: flex; flex-wrap: wrap;  align-self: center; }
.search-box .cms-btn-btnbox .btn{width: calc(100%/2 - 10px)!important;margin: 5px!important; }
.search-box .filter-column{width: 25%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .filter-box{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .filter-inner{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; border-bottom: solid 1px rgba(28,76,111,.1);}
.filter-title{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; align-items: center;}
.filter-title figure{ width: 30%; padding: 10px;  }
.filter-title h3{ width: 70%;padding: 10px; font-weight: 700; color:#006fbc;  }
.search-box .filter-inner .column-box{width: calc(100%/3 - 10px); margin:5px; }
.search-box .filter-inner .column-full{width: calc(100%  - 10px); margin:5px; }
 
@media(max-width:1024px) {
.search-box .filter-column{width: 100%;}
.search-box .filter-box{width: 100%;}
.filter-title{ width: 100%;} 
.filter-title figure{ width:8%;  }
.filter-title h3{ width: 90%;padding: 0px; }
}
@media(max-width:768px) {
.search-box-type{width: 100%;  }
.search-box .cms-btn-btnbox{width: 100%;  }
.filter-title figure{ width:20%;  }
.filter-title h3{ width: 80%;padding: 0px; }

}

 /*--------form style------------*/
.search-box input,.search-box option, .search-box textarea, .search-box input[type="radio"]{  color: #000;background-color:#fff; border-radius:0px!important;   }
.search-box input[type="radio"]+label, .search-box input[type="checkbox"]+label { width:auto; box-sizing: border-box;   }
*:focus { outline: none; }
/* placeholder ---*/
.search-box input::placeholder {  font-size:0.875rem;  }
.search-box input:focus,.search-box textarea:focus { outline: none;  }
.search-box input:focus:placeholder { color: transparent;  }
.search-box input:focus::-webkit-input-placeholder { color: transparent; }
.search-box input:focus:-moz-placeholder { color: transparent; }
.search-box input:focus::-moz-placeholder { color: transparent; }
.search-box input:focus:-ms-input-placeholder { color: transparent; }
.search-box select{ width: 100%; padding:9px 8px; line-height:2rem; color: #333;  border-radius:0px; border: none;}
/*IE --*/ 
.search-box select::-ms-expand {display: none; }
.search-box select:focus{ box-shadow: 0 0 5px 2px #467BF4;    }
.search-box input, .search-box button, .search-box select, .search-box textarea { outline: none; }
.search-box option{ background:#cad4db; border-radius:0px!important;  }
@media(max-width:768px) {
.search-box select{ font-size: 0.9rem;}
}
 /*--------form style------------*/
.search-content{  position: relative; z-index: 1; padding: 5% 0;}
.search-inner {width: 100%;;margin: auto; display:flex; flex-wrap: wrap; justify-content: flex-end;  }
.search-btn {width:40%;;margin:5px 0; display:flex; flex-wrap: wrap; justify-content: flex-end; }
.search-btn button {width:calc(100%/3 - 10px)!important; margin: 5px 0px 5px 10px ;display:flex;justify-content: flex-end; }
@media(max-width:1024px) {
.search-content{padding: 1% 0;}  
.search-btn {width:100%;}   
}

 
 
.search2-box { display: block;  width:auto; max-width: 96%;  margin: auto; position: relative; /*  border-bottom:solid 1px #d8e3eb; background:#f6f9fa;  border-radius:30px 0px 0px 30px;  -webkit-box-shadow: 5px 0px 10px 0px rgba(0,0,0,.1);  box-shadow: 5px 0px 10px 0px rgba(0,0,0,.1); */ }
.search2 {position: relative; z-index:99;  display: flex; flex-wrap: wrap;align-items: center;   width:240px; padding:5px 10px; cursor: pointer; color:#d8e3eb ; font-weight: bold; background:#061520;   border-radius: 30px ; }
.search2-bg {  background: linear-gradient(-180deg, #cad4db 0%, #ebf1f5 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);background-blend-mode: screen; padding: 15px; border-radius: 10px; -webkit-box-shadow: 5px 0px 20px 0px rgba(0,0,0,.2);  box-shadow: 5px 0px 20px 0px rgba(0,0,0,.2);}



.search2-open { display: none;position: absolute;left: 0px; margin-top: -4px; z-index:98; width: 100%;background: linear-gradient(-180deg, #cad4db 0%, #ebf1f5 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);background-blend-mode: screen; padding: 15px; border-radius: 10px; -webkit-box-shadow: 5px 0px 20px 0px rgba(0,0,0,.2);  box-shadow: 5px 0px 20px 0px rgba(0,0,0,.2);}
.search-list-s { padding: 8px; width: 100%; display: flex; flex-wrap: wrap;align-items: center;  color:#fff; font-size: 14px; line-height: 26px; border-bottom: solid 1px  rgba(255,255,255,0.5);  }
.search-list-s .filter-title { width: 12%; display: flex;  font-size: 1rem; font-weight: 700; margin:5px 0px; color:#052948;   }
.search-list-s .filter-inner{width: 88%; display: flex; flex-wrap: wrap; position: relative;} 
.search-list-s .filter-inner:before{ content: ""; position: absolute; left:-4px; top:0px; width: 1px;height: 100%; background:#fff;   } 

.search-list-s label {  display: flex;  width: calc(100%/4 - 10px); vertical-align: top; margin:5px;  position: relative;padding-left: 23px;font-size: 0.9rem; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.search-list-s label.label-list{color:#597990;}

@media(max-width:991px) {
.search2-box {   max-width: 100%;}  
.search-list-s .filter-title { width: 100%;   }
.search-list-s .filter-inner{width:100%; } 
}
@media(max-width:767.98px) {
.search-list-s label { width: calc(100%/2 - 10px);}    
}

/* Hide the browser's default checkbox */
.search-list-s label input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */
.checkmark {position: absolute;top: 5px;left: 0;height: 16px;width: 16px;background-color: #fff;border-radius: 2px;border: solid 1px #263f54}
/* On mouse-over, add a grey background color */
.search-list-s label:hover input ~ .checkmark {background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.search-list-s label input:checked ~ .checkmark {background-color: #cf0004;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: "";position: absolute;display: none;}
/* Show the checkmark when checked */
.search-list-s label input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */
.search-list-s label .checkmark:after {left: 5px;top: 0px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
 
 
.icon-filter{ display: block; width: 22px; height: 22px; margin: auto 10px;background:url("../images/icon/icon-filter.svg") no-repeat left top;  }
.circle-icon{width: 44px; height: 44px; margin-right: 10px; display: flex; flex-wrap: wrap; justify-content: center;  align-items: center;background:#d00003; border-radius:99rem; position: relative; }
.circle-icon:hover{background:#263f54}
.circle-icon:before { content: ""; width: calc(100% - 10px);  height: calc(100% - 10px); top:5px; left:5px; display: block;  border: dashed 1px #fff; border-radius:99rem; position: absolute;z-index: 5; animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;} 
 @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); }
}


@-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); }
}
/*--------------------/
產品清單頁  cms-main-product-item  
--------------------  */
.cms-product-item { width:100%; display: flex; flex-wrap: wrap; margin:0px auto;  padding:0px; }
.cms-product-item li { width: calc(100%/2 - 20px);  height: auto; margin:10px;padding: 0px; position: relative; z-index: 1; list-style: none; background: #b8c8d5;  transition: all 0.3s linear 0s;  }
.cms-product-item li a{ width: 100%; display: flex; flex-wrap: wrap; position: relative;}
.cms-product-item li figure{  width:70%; overflow: hidden; position: relative; z-index: 0; order: 2; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }
.cms-product-item li figure img {  width: 100%;   height: auto;transition: all 0.5s ease 0s;  }

.cms-product-item li:hover figure img { transform: scale(1.1)}

.cms-product-item li .cms-product-inner{width:30%; height: auto; padding:5px 30px; display: flex; flex-wrap: wrap; align-content: center;  z-index: 9; order: 1; } 
#cms-main .cms-product-item li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-weight:700; font-size:1.188rem;  line-height:1.5rem; color:#000;  word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#cms-main .cms-product-item li p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.cms-product-item .slick-prev{left:-20px;}
.cms-product-item .slick-next{right:-20px;}
@media (max-width: 767.98px) {
.cms-product-item li figure{  width:100%;   }
.cms-product-item li .cms-product-inner{width: 100%; margin: 0px; padding:5px;  } 
}

.video-list { width: 100%; max-width: 1440px; margin: 0 auto; padding:20px 0px; display: flex; flex-wrap: wrap;justify-content:center;  }
.video-list li { width:calc(100%/2); height: auto;margin: 10px auto; display: flex; flex-wrap: wrap;justify-content:center; padding:20px; transition: all 0.4s ease-in-out; }
.video-list li:hover{ transform: scale(0.8);  }
.video-list li a div {padding: 20px 5px;}
.video-list li a div h3 { font-size:1.125rem; font-weight:700; line-height: 1.6; color:#000; }
.video-list li img{ max-width: 100%; padding: 10px; border-radius:  10px; border: solid 1px rgba(255,255,255,.2);transition: all 0.4s ease-in-out; box-shadow: 0 2px 16px 0 rgba(0,0,0,0.4);}
@media (max-width:767.98px) {
.video-list {padding:0px;}
.video-list li {  padding:10px;  }
.video-list li img{ padding: 5px; }
.video-list li a div h3 { font-size:.9rem;line-height: 1.5;  font-weight:400; }
}

.cms-slider-nav { width: 100%;  height: auto; margin:20px auto; padding:0px;order:1; position: relative;  }
.cms-slider-nav:after{ content: ""; width: 80%; height: 4px;  background: #cf0004; position: absolute; z-index: 0; left:10%; top:35%; transform: translate(0,-35%);}
.applaction-nav{margin: auto;padding: 0; position: relative; z-index: 9;display: flex;flex-wrap: wrap; justify-content: center; list-style: none; }
.applaction-nav li { width: calc(100%/5 - 20px); padding:10px; margin: 0 10px;  }

@media (max-width:767.98px) {
 .applaction-nav li { width: calc(100%/3 - 20px); padding:10px;  }
 .cms-slider-nav:after{ display: none; }  
}


 .applaction-nav .nav-item { text-align: center; width: 100%; padding-bottom: 34px; position: relative}
.nav-item:hover .nav-img {background-color: #cf0004}
.nav-item:hover .nav-img img {  filter: invert(1);  opacity: 1}
.nav-item:hover .nav-img:before { border: dashed 1px #fff; filter: grayscale(1) brightness(1) opacity(1);}
.nav-item:hover p { color: #cf0004}
.nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px auto;width: 88px;height: 88px;border-radius: 15px;background-color: #d8e3eb;position: relative;}
.nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #000; border-radius:15px; position: absolute; filter: grayscale(1) brightness(0) opacity(0.3);   transform-origin: 50% 50%;}
.nav-img img {  margin: auto;display: block;  width: 52px; height: 52px; opacity: 0.7;  }
.nav-item p{ font-size:0.875rem; color: #000; font-weight: 700; line-height: 1rem;  word-wrap: normal;    }
 



.feature{ width: 100%; padding:10px 0px; margin: auto -10px;  display: flex; flex-wrap: wrap;}
.feature li{ width:calc(100%/2 - 20px); padding:30px 10px; margin: 10px;   background: #ebeff2; min-height: 180px; list-style: none;}
.feature-box{ width: 100%; /*display: flex; flex-wrap: wrap; align-content: flex-start;*/} 
.feature-circle{  width: 50px; height: 50px; font-size: 24px;color: #fff; text-align: center; line-height: 50px; background: #c7161e; font-weight: bold; margin: 0 auto 15px auto;  border-radius: 100%;}
.feature-box p{margin-top: 10px;font-size: 20px; line-height: 1.5; font-weight: 600;}
@media (max-width:1280px) {
.feature li{ width:calc(100%/2 - 20px); min-height: auto; font-size: .9rem;  line-height: 1.3rem;  }    
.feature-box p{ font-size: .9rem;  }
}
    
@media (max-width:767.98px) {
.feature {margin: auto;}
.feature li{ width:calc(100% - 0px); padding: 10px;min-height: auto;  }    
}