/*font-size*/
.title { font-size: 1.125rem; font-weight: 700;width: 90%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 740px) {
.title {font-size: 1.5rem; }
}
@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}
 
.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.main-wrap{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
      
 /*----------------------------------------/
 詳細內容區塊寬度
----------------------------------------*/
.product-wrapper { width: 100%; max-width: 80%; margin:auto; padding: 50px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  }
 @media (max-width: 1024px) {
.product-wrapper {max-width: 100%; padding: 10px 20px;}    
}
@media (max-width: 767.98px) {
.product-wrapper {max-width: 100%; padding: 10px 0px;}    
}
/*----------------------------------------/
application.html
----------------------------------------*/
.article-info{ width: 100%; margin: 0 auto; padding:30px 20px; background: #fff; position: relative; z-index: 9;}
.article-info .cms-title-3{margin-top: 50px;}
 
.product-cate { width:100%; margin:0px auto;  padding:0px 0px 100px 0px;   display: block;  position: relative;z-index: 0;}
.product-cate li {margin:50px auto ;  padding-bottom:70px; position: relative;   list-style: none;}
.product-cate li .item{ width:100%; display: flex;flex-wrap: wrap;align-items: flex-start;    transition: all 0.3s linear 0s; position: relative; z-index: 1; }
.product-cate li .item:after{ content: ""; width: calc(100% - 10%); height: 100%;position: absolute; z-index: -1; right:0px; top:40px;   background: #F5F5F5;}
.product-cate li figure{ display: flex;flex-wrap: wrap;width: 35%; height: auto; margin: 0px;}
.product-cate li figure img{max-width: 100%; height: auto; display: block;}
.item-wrap{width:65%;  display: flex;flex-wrap: wrap; }

.inner-box{ width:50%; display: flex;flex-wrap: wrap; align-content: flex-start; padding:0px 30px;  }
.inner-box h3{ margin-bottom: 15px; font-size:1.5rem;font-weight: 500;   color: #FF4D4D;}
.desc{ margin:0px; padding: 0px;  color: #565656;}
.inner-box ul{margin: 0; padding: 0;}
.inner-box ul li{ width: 100%;margin: 0!important; padding: 0!important;  color: #565656;}
 @media (max-width: 767.98px) {
 .product-cate li figure{  width: 100%; margin:auto;}
 .product-cate li figure img{max-width: 100%; margin:10px auto; }
 .inner-box{ width:100%; padding:10px 30px;  }
 .product-cate li .item:after{ content: ""; width: 110%; height: 100%;left:-5%; right:0px; top:40px;  }
  
}
 
.spec-edit{ width: 100%; max-width: 80%; margin: auto; }
@media (max-width: 767.98px) {
.spec-edit{  max-width: 100%;  }    
}

.spec-edit p {margin-bottom: 15px; font-size:1rem; color:#7d7d7d;}
.spec-edit ul{width: 100%; margin:0; padding: 0px; }

.dot{ width: 100%;display: flex;flex-wrap: wrap; margin:0px;padding: 0px; position: relative;}
.dot li{ width: 100%;display: flex; padding: 2px 0px 2px 15px!important; margin:4px 0px!important; font-size:1rem; line-height:1.75rem; font-weight:400; color:#7d7d7d; position: relative;  }
.dot li.three{ width: calc(100%/4);display: flex; padding: 2px 0px 2px 15px!important; margin:4px 0px!important; font-size:1rem; line-height:1.75rem; font-weight:400; color:#7d7d7d; position: relative;  }
.dot li:before{ content: ''; width:6px; height:6px; background-color:#7d7d7d; border-radius: 99rem; position: absolute; top: 10px; left: 0px;  transition: all 0.5s ease 0s;}
  
@media (max-width: 767.98px) {
.dot li.three{ width: calc(100%/3);  }
}

 /*----------------------------------------/
產品清單頁  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%/3 - 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-4 li{
    width: calc( 100%/4 - 20px);
}
.product-item li figure{padding-bottom: 55px;  position: relative; width:100%; height: auto; margin-bottom:5px; overflow: hidden;  transition: all 0.5s ease 0s; outline: 1px solid #0000005e; }
.product-item li img { width: 100%; max-width: 100%;  transition: all .35s ease;}
.product-item li:hover .inner{ transform: translateX(-10px);} 

.product-item li:hover img { transform: translateY(-10px);  }
.product-item li:hover figure{border:solid 1px #cbcbcb; box-shadow: 15px 15px  #cbcbcb }
.product-item .inner{  width: 100%; padding: 10px 0px; text-align: center; position: absolute; bottom:5px;transition: all 0.5s ease 0s;  } 
.product-item .inner h3{ margin: 10px 0px; font-weight:400; font-size:1.125rem; letter-spacing: 2px; color:#7D7D7D; text-align: center; line-height:1.5rem;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 a h3 {  color:#7D7D7D; }
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color:#7D7D7D;  overflow: hidden; white-space:pre-wrap;
word-break: normal;word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;} 
.product-item .inner-txt{min-height: 68px;  font-size: .875rem;  line-height: 1.35rem;color:#312927; 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 li:hover a h3,.product-item li:hover .inner-txt{color: #7D7D7D;}
@media (max-width: 767.98px) {
.product-item li { width: calc( 100% - 20px); margin:40px 10px 40px 10px; padding:0px;    }
.product-item li .inner{width: 100%;margin: 0px; padding: 5px; bottom: auto;  position: relative;  } 
.product-item .inner h3{  margin: 0px auto;  line-height: 1.25rem;    }
.product-item li .inner p{ font-size: 0.9rem;  }
}

 
/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; margin:0 -15px; padding:20px 0px; display: block;  position: relative; }
.best-wrap.product-item { width:100%; margin:0px auto; padding-left: -40px;  }   
.best-wrap.product-item li { width:80%; margin:40px -20px; padding:0px;  position: relative;  }
.best-wrap .product-item .inner{   position: relative;   } 
/* add btn */
.best-wrap .slick-next{right:-30px; top:35%;  }
.best-wrap .slick-prev{left:-30px;  top:35%; z-index: 99;  }
 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 =================================*/ 
.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) {
.more { width: auto; height: 24px }
}
.more:hover .more-circle, .more:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.more:hover .more-txt, .more:hover i { -webkit-transform: translateX(5px); transform: translateX(5px)}
.more:hover{background:#afd9d3; }
.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) {
.more-circle { width: 24px; height: 24px; margin-right: 15px}
}
.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}
.more i.icon-check { font-size: 1.35rem; margin: 10px auto auto 86px;  }
.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;}
}



 /*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
 .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

.main-product-left{width:calc(50% - 15px);  padding:0px 0px 50px 15px;  display: flex; flex-wrap: wrap; z-index: 1;   order: 1; }
.main-product-right{ width:50%;  padding:0px; margin:0px auto;  position: relative; z-index: 0;  }
.slider-for{  width: 100%; margin: 0px ; padding: 0px; list-style: none;}
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px;}
.slider-for li img{width: 100%;  }


.slider-nav{ width:100%;   height: auto; margin: 0px; padding:0px;  position: relative;  }
.slider-nav li{ width: 100px; opacity:.3; margin:10px 10px;padding: 0px; background: #fff;   }
.slider-nav li img{ width:100%; margin:0px; padding:0px;  }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav .slick-dots {bottom:-20px;}
 @media (max-width:820px) {
.main-product-left{width:100%;padding: 5px 0px 0px 0px; order: 2;}  
.main-product-right{ width:100%; margin: auto; padding: 10px 50px; order: 1;}
}
 @media (max-width:767.98px) {
.main-product-right{  padding:0px;}
.slider-for li{ padding:0px;}
}
 

.button-panel{ width: calc(100% - 20px); margin: 10px; display: flex; flex-wrap: wrap;   justify-content: flex-end;  }
.button-panel button { max-width:220px; color:white; background-color:transparent;  border-radius:0px;}
.button-panel button:disabled { color:gray; background-color:lightgray; }
 
/*----------------------------------------/
btn區塊
----------------------------------------*/
.product-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.product-group .btn{ width: calc(100%/3 - 20px); margin: auto 10px auto 0px;  border-radius:5px;  }
.product-info button {  border-radius:0px; }
.btn-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.btn-group a{width:auto; margin:10px 0px; padding:0px 20px; }
.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
.product-info h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#776b62;  word-spacing: normal; word-break:normal; }
.product-info p{  width: 100%; margin: 5px 0px; font-size:0.875rem; font-weight: 700; color:#7a7a7a;  word-spacing: normal; word-break:normal;  }
.product-description{ width: 100%; padding:25px 0px 10px 0px;   color:#888;  }
.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 {width: 100%; margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
.product-description ul li .item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#98979d;  font-size:0.85rem;}
.product-description p strong{color:#000;}
.badge-tag{ padding: 5px; width: 100%;  display: flex; flex-wrap: wrap; transition: all .3s; cursor: pointer;}

.product-info-title{ width: calc(100%  - 20px);padding: 0px 10px; align-self: center; margin-bottom: 20px; position: relative;  }
.a-tag { width:100%; max-width: 200px; height:auto; margin: 0px 0px 15px 0px; padding: 10px;  display: flex;  flex-wrap: wrap;justify-content: center;  align-items: center; color: #fff; background:#FF6D00; font-size:1.5rem; font-weight: 700; line-height: 1.57; }
.product-info-title h3{ color: #333; font-size:1.875rem; letter-spacing: 1px; }
.product-info-title .btn{ width: 50%;  }
 @media (max-width:767.98px) {
 .a-tag { width:100%; max-width:150px;padding: 10px; font-size:1rem;  }
 .product-info-title h3{font-size:1.25rem;}    
}



.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: auto;}
.item-title { width: 100%;padding: 0px 10px; margin-bottom: 10px;}
 @media (max-width:767.98px) {
 .item-title { width: 100%; }    
}

.item-title p{ font-size: .875rem; color: #666;}

.item-title-full { width: 100%;padding: 0px 10px; margin-bottom:30px;}
 
.specbox .name { margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#000; 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:.9rem; 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:#cc2621 }
.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;}

 
.spec-item { display: flex;flex-wrap: wrap; }
.spec-item span {  padding: 1em 0 }
@media (min-width: 1700px) {
.spec-item span { font-size: 1.125em }
}
.spec-item .fz-D { font-weight: 400;  line-height: 1.625}
@media (min-width: 740px) {
.spec-item .fz-D { font-size: 1.5em; font-weight: 700; }
}
@media (min-width: 980px) {
.spec-item .fz-D { padding-top: 1em  }
}
@media (min-width: 1700px) {
.spec-item .fz-D { font-size: 1.125em }
}



.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 li {display: flex; background: #fff;}
.spec-item ul li.bg-gray { background-color: #efefef }
@media (min-width: 0) and (max-width: 979px) {
.spec-item {padding: 24px }
.spec-item span {font-size: .875em }
.spec-item .field {width: 45%}
.spec-item .value { width: 55%}
}
@media (min-width: 740px) and (max-width: 979px) {
.spec-item { padding: 0 100px }
}
@media (min-width: 980px) {

.spec-item .fz-D { width: 18%; display: block; flex-shrink: 0 }
.spec-item ul {  width: 82%;  display: block; flex-shrink: 0 }
.spec-item ul li { display: flex;  width: 100% }
.spec-item .field { width: 30%  }
.spec-item .value { width: 70%  }
}


.spec-table { display: block; margin:20px 0; border-collapse: separate; background:#fff; /* -webkit-border-vertical-spacing: 10px; -webkit-border-horizontal-spacing: 10px; */}
.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;}

@media (max-width: 991.98px) {
.product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
.product-info{  padding:0px; border:none; }    
}


/*----------------------------------------/
spec tab
----------------------------------------*/
.product-info {display: flex; flex-wrap: wrap;  width:100%; margin: auto;}
.attribute { line-height: 2}
.product-attribute-group { box-sizing: border-box; line-height: 1.6}
.product-attribute-group:not(:last-child) {  margin: 0 0 2rem}
.product-attribute-group h3 { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.2142857143; color: #222; margin-bottom: .5rem}
.product-attribute-group ul > li {  font-size: .875rem}
.product-attribute-group .attribute { color: #222; letter-spacing: .2px}
.product-attribute-group ul > li::marker {color:#abaaaa}

.product-attribute-group .attribute .label {padding-right:5px; color:#abaaaa;}
.attribute-values-wrapper {  -moz-columns: 1;  columns: 1 }

.product-info-content { width: 100%;  padding:0px 20px;}
.product-details-container{ width: 100%;  padding:20px;}


.box-wrap{width: 100%; margin: 0px; padding:30px 0px; display: flex; flex-wrap: wrap; position: relative; background-color: transparent;}
.box-wrap h3{ margin: 40px 0px 20px 0px; font-size: 2.25rem; font-weight: 700; position: relative; z-index: 2;}
.box-wrap p{ margin: 0px 5px!important; font-size: 1.125rem;  line-height: 2.25rem;  position: relative; z-index: 2;}

.box-left{ width: 60%; position: relative; z-index: 0;}
.box-right{width: 40%; position: relative; left: 0px; top:0px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content:center;  z-index: 3; margin: 0px;padding: 20px 40px;   -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;  }



.main-txt{width: 100%; max-width: 800px; margin:0 auto; padding: 30px;}
.main-txt p { width: 100%; font-size:0.9rem; line-height: 2rem; font-weight: 400;  padding:5px 0px; margin: 20px 0px; color: #333;}
.main-txt p strong{  width: 100%; font-size: 1rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:700;  padding:5px; margin-bottom: 10px;   }
 @media (max-width: 767.98px) {
 .main-txt{width: 100%; max-width: 100%; margin:0 auto; padding: 30px 0px;}
}

.box-card { width:100%;  margin:0px;   padding:0px; display: flex; flex-wrap: wrap;  position: relative; }
.box-item{ width: 50%; max-width: 100%; margin:0px; padding:0px;  display: flex;  }
.box-item img{ height: auto; margin: 0px; padding:10px; }
 @media (max-width: 767.98px) {
.box-item{ width: 80%; max-width: 100%; margin:0px auto; padding:0px;  display: flex;  }
}

/*----------------------------------------/
tab
----------------------------------------*/
#tabs-product { padding:0px 0px 100px 0px ;}
.resp-tab-content h4{ margin:2% 0;  font-size: 1.15rem; font-weight: 700; }
.resp-tab-content p{ margin:1% auto; font-size: 1rem; font-weight: 400;  }
.edit{width: 100%; padding:15px 5px; margin: auto;   }
.edit h4 img{display: block; width: 100%; max-width:600px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.imgEditor { width:80%; height: auto; margin: auto; display: block;} 
.main-item-title{ width: 50%; margin:0px 0px 60px 0px; padding:5px 0px; background:#016f89;  -ms-flex-align: center; align-items: center; }
.main-item-title h2{ margin-left: 15%; /*-webkit-transform: skewY(5deg); -ms-transform: skewY(5deg); transform: skewY(5deg);*/ font-size: 1.5rem;  font-weight: 700; color: #fff;}
#tabs-product a.btn-01{margin:80px auto 30px auto;}

@media (max-width: 991.98px) {
.main-item-title{ width: 100%;}  
.resp-tabs-list li { width: calc(100%/4 ); padding: 0px;  margin: 0px auto;   }
.resp-tabs-list li a{ padding:5px;  }
}

.item-title{ color:#000;  font-size:1.188rem;}
.item-title strong{color:#e60013; margin-right: 10px;}
.datatable{ width: 100%;}
.datatable tr{ width: 100%; border-bottom: solid 1px #f5f5f5;}
.datatable th{font-size: 0.9rem;  color: #000;text-align: center; }
.datatable td{font-size: .875rem; font-weight: 300; line-height: 1.125rem; color: #333;text-align: center; }
 /*aside*/
 
 
/*search-box 
.search-box{width: 100%; margin: 0px auto; padding: 10px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
 .search-box-type{width: 80%; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-content: center;  }
.search-box .btn-btnbox{width: 20%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .btn-btnbox .btn{width: calc(100% - 10px)!important;margin: 5px!important; }
 

.search-box .filter-inner{width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }

.filter-title{ font-size:1rem; font-weight: 700; }

 
.search-box .filter-column{width: 12%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }
.search-box .filter-box{width: 88%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; }


.search-box .filter-inner .column-box{width: calc(100%/3 - 20px); margin:5px 10px;}
.search-box .filter-inner .column-full{width: calc(100%  - 10px); margin:5px;}
 
 /*--------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;   }
 
*:focus { outline: none; }
.search-box input{ width: 100%!important; padding:9px 8px; margin: 0px 10px; border: none; border-bottom: solid 1px #000;}
/* placeholder --- 
.search-box input::placeholder {  font-size:0.875rem;  }
.search-box input:focus,.search-box textarea:focus { outline: none; box-shadow:0px 5px 1px rgba(243,152,0,.1);border-bottom: solid 1px rgba(243,152,0,1);}
.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; font-size:0.875rem; line-height:2rem; color: #333; background-color: transparent!important; border-radius:0px; border: none; border-bottom: solid 1px #000;   }
/*IE --*  
.search-box select::-ms-expand {display: none; }
.search-box select:focus{ box-shadow:0px 0px 5px 2px rgba(243,152,0,.1);   }
.search-box input, .search-box button, .search-box select, .search-box textarea { outline: none; }
.search-box option{ font-size:0.875rem;    background-color:#c5d4e3!important; border-radius:0px!important; box-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3; }
.search-box option:focus{  box-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3; }

 /*--------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;   }
.table { overflow-x: auto;}
.table label:nth-child(odd) ul { background: #f4f4f4;}
.table-thead { display: flex;background:#dce8f0; padding: 15px 10px 15px 50px; font-weight: 700;}
.table-thead li{color:#026ebb;  font-weight: 700; }
.table-tbody { display: flex; 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;}