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

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

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

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

#teacher .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;}
#teacher .nbs-flexisel-ul a:hover img {transform:scale(1); transition:all 0.3s}
#teacher .nbs-flexisel-ul a div.imgs div {position: absolute;  z-index: 9; top:20px; left:18px;}
#teacher .nbs-flexisel-ul a div.imgs span {display:block; background:#333; color:#fff; font-size:15px; margin:7px 0;
border-radius:50px; padding:5px 10px; min-width:60px;  z-index: 9; font-weight:500}
#teacher .nbs-flexisel-ul a div.imgs span.area1 {background:#C22228;}
#teacher .nbs-flexisel-ul a div.imgs span.area2 {background:#30346D;}
#teacher .nbs-flexisel-ul a div.imgs span.area3 {background:#AE03FF;}
#teacher .nbs-flexisel-ul a div.imgs span.area4 {background:#306D53;}
  
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#teacher {}
#teacher .tHead { font-size:18px; }
#teacher .tHead span.cate {font-size:14px; padding:2px 20px; margin-right:20px;  }
#teacher .tList {overflow:hidden; margin-top:30px;}
#teacher .nbs-flexisel-ul { display:flex; flex-wrap: wrap;   gap: 0%; }
#teacher .nbs-flexisel-ul a{margin: 20px  18px;}
#teacher .nbs-flexisel-ul li {float:left; display:inline-block; width:100%; }	

#teacher .nbs-flexisel-ul li a .cont {padding:20px 15px 25px 15px; min-height:auto}
#teacher .nbs-flexisel-ul li a span.class { padding:2px 15px; font-size:16px;margin-right:5px; }
#teacher .nbs-flexisel-ul li a span.name { padding:15px 0 10px 0; font-size:16px;}
#teacher .nbs-flexisel-ul li a span.txt { font-size:13px; line-height:18px;}
#teacher .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) {
}