#style47 {width:100%; margin:0px auto 0 auto; overflow:hidden;}
#style47 .tHead {width:100%; text-align:center; font-size:25px; font-weight:600}
#style47 .tHead span.cate {border:1px solid #4564F0; border-radius:50px; font-size:20px; text-align:center; 
padding:2px 20px; margin-right:20px;  }

#style47 .tList {overflow:hidden; margin-top:0px;}
#style47 .nbs-flexisel-ul { display:flex; flex-wrap: wrap;   justify-content: space-between;   position:relative; overflow:hidden; }
#style47 .nbs-flexisel-ul a{overflow: hidden; display:block; margin: 10px  12px; border:0px solid #4564F0; padding:0px;
 border-radius:0px; transition:all 0.3s; text-align:left; box-shadow:0 2px 8px rgba(0,0,0,0.2); background:#f1f1f1; }
#style47 .nbs-flexisel-ul a:hover{color:#fff;background:#4564F0;  border:0px solid #4564F0; transition:all 0.3s; }
#style47 .nbs-flexisel-ul a:hover .class{color:#fff; border:1px solid #fff;  }
#style47 .nbs-flexisel-ul a:hover .name,.nbs-flexisel-ul a:hover .tit {color:#fff;  }
#style47 .nbs-flexisel-ul img { max-width: 100%; cursor: pointer; position: relative; margin:  0px; }

#style47 .nbs-flexisel-ul li {float:left; display:inline-block; width:25%; }
#style47 .nbs-flexisel-ul li a .cont {padding:35px 25px 45px 25px;  }
#style47 .nbs-flexisel-ul li a span.class { padding:3px 20px; font-size:18px; font-weight:600; color:#333;
border:1px solid #333; border-radius:5px;  text-align:center; margin-right:5px; }
#style47 .nbs-flexisel-ul li a span.name {display:block; padding:20px 0 10px 0; font-size:18px; font-weight:500;}
#style47 .nbs-flexisel-ul li a span.txt {display:block; padding:0px; font-size:14px; line-height:20px; font-weight:500;}
#style47 .nbs-flexisel-ul li a img {max-width:100%;  vertical-align:bottom; transform:scale(0.95); margin-bottom:0px;
 filter: grayscale(100%); background:#fff; transition:all 0.3s;}
 #style47 .nbs-flexisel-ul li a:hover img { filter: grayscale(0%); transition:all 0.5s; transform:scale(1)}

#style47 .nbs-flexisel-ul li a:hover{ transition: all 0.3s;  }
#style47 .nbs-flexisel-ul li a:hover .mask { mask-size:200%; transition: all 0.6s; }

#style47 .nbs-flexisel-ul a div.imgs {max-width: 100%;  width:100%; overflow:hidden; cursor: pointer; 
position: relative;margin:  0px; vertical-align: top; text-align:center; background:#fff;}
#style47 .nbs-flexisel-ul a:hover img {transform:scale(1); transition:all 0.3s}
#style47 .nbs-flexisel-ul a div.imgs div {position: absolute;  z-index: 9; top:20px; left:18px;}
#style47 .nbs-flexisel-ul a div.imgs span {display:block; background:#333; color:#fff; font-size:14px; margin:7px 0;
border-radius:50px; padding:5px 15px; min-width:60px;  z-index: 9; font-weight:500}
#style47 .nbs-flexisel-ul a div.imgs span.area2 {background:#18a1df;}
#style47 .nbs-flexisel-ul a div.imgs span.area1 {background:#aa2d9c;}
#style47 .nbs-flexisel-ul a div.imgs span.area3 {background:#ea8235;}
#style47 .nbs-flexisel-ul a div.imgs span.area4 {background:#306D53;}
  
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#style47 {}
#style47 .tHead { font-size:18px; }
#style47 .tHead span.cate {font-size:14px; padding:2px 20px; margin-right:20px;  }
#style47 .tList {overflow:hidden; margin-top:30px;}
#style47 .nbs-flexisel-ul { display:flex; flex-wrap: wrap;   gap: 0%; }
#style47 .nbs-flexisel-ul a{margin: 20px  18px;}
#style47 .nbs-flexisel-ul li {float:left; display:inline-block; width:100%; }	

#style47 .nbs-flexisel-ul li a .cont {padding:20px 15px 25px 15px; min-height:auto}
#style47 .nbs-flexisel-ul li a span.class { padding:2px 15px; font-size:16px;margin-right:5px; }
#style47 .nbs-flexisel-ul li a span.name { padding:15px 0 10px 0; font-size:16px;}
#style47 .nbs-flexisel-ul li a span.txt { font-size:13px; line-height:18px;}
#style47 .nbs-flexisel-item a div.imgs span { font-size:4; margin:5px 0; padding:3px 10px; min-width:50px;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}