#teachers { padding-top: 100px; padding-bottom: 50px; }
#teachers .ctr { max-width: 1280px; }
#teachers .crs { display: block; position: relative; width: 100%; height: auto; }
#teachers .crs .slick-prev { background: url(../images/fucicprev.png) no-repeat center; position: absolute; width: 40px; height: 40px; left: -30px; top: 300px; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#teachers .crs .slick-prev, #teachers .crs .slick-prev:link, #teachers .crs .slick-prev:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#teachers .crs .slick-prev:hover, #teachers .crs .slick-prev:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#teachers .crs .slick-next { background: url(../images/fucicnext.png) no-repeat center; position: absolute; width: 40px; height: 40px; right: -30px; top: 300px; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#teachers .crs .slick-next, #teachers .crs .slick-next:link, #teachers .crs .slick-next:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#teachers .crs .slick-next:hover, #teachers .crs .slick-next:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#teachers .crs .slick-dots { position: relative; bottom: auto; width: 80vw; height: auto; margin-top: 10px; margin-left: calc(50% - 40vw); }
#teachers .crs .slick-dots li button:before { color: #14213d !important; }
#teachers .crs .bk { display: block; position: relative; width: 100%; height: auto; max-width: 270px; margin: 0 auto; }
#teachers .crs .bk .img { display: block; position: relative; width: 220px; height: 220px; overflow: hidden; margin: 0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
#teachers .crs .bk .img img { display: block; position: relative; width: 100%; height: auto; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#teachers .crs .bk .name { display: block; position: relative; width: 100%; height: auto; font-size: 26px; line-height: 34px; font-weight: bold; text-align: center; color: black; margin: 0 auto; padding-top: 15px; }
#teachers .crs .bk .pos { display: block; position: relative; width: 100%; height: auto; font-size: 16px; line-height: 22px; font-weight: bold; text-align: center; color: #434d64; margin: 0 auto; padding: 5px 0 10px 0; }
#teachers .crs .bk .ito { display: block; position: relative; width: 100%; height: auto; font-size: 16px; line-height: 22px; text-align: left; text-align: justify; padding-bottom: 20px; margin: 0 auto 20px auto; border-bottom: 1px solid #e5e5e5; }
#teachers .crs .bk .ls { display: block; position: relative; width: 100%; height: auto; font-size: 16px; line-height: 22px; text-align: left; text-align: justify; margin: 0 auto; padding: 0 0 10px 75px; }
#teachers .crs .bk .ls:before { content: ""; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; display: block; position: absolute; width: 70px; height: 25px; left: 0px; top: -1px; }
#teachers .crs .bk .ls1:before { background-image: url("../images/teacheric_tw1.png"); }
#teachers .crs .bk .ls2:before { background-image: url("../images/teacheric_tw2.png"); }
#teachers .crs .bk:hover .img img, #teachers .crs .bk:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }

@media (max-width: 1400px) { #teachers .ctr { max-width: 960px; } }
@media (max-width: 1080px) { #teachers .ctr { max-width: 640px; } }
@media (max-width: 1000px) { #teachers .crs .bk:hover .img img, #teachers .crs .bk:active .img img { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } }
@media (max-width: 760px) { #teachers .ctr { max-width: 320px; } }
@media (max-width: 768px) { #teachers { padding-top: 90px; } }
@media (max-width: 640px) { #teachers { padding-top: 80px; } }
@media (max-width: 420px) { #teachers .crs .slick-prev { left: -15px; }
  #teachers .crs .slick-next { right: -15px; } }
@media (max-width: 360px) { #teachers .ctr { max-width: 290px; }
  #teachers .crs .bk { max-width: 240px; } }
.grade { padding-top: 50px; padding-bottom: 40px; }
.grade .ctr { max-width: 1200px; }
.grade .bks { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
.grade .bks .bk { display: inline-block; position: relative; width: 30%; height: auto; text-align: left; vertical-align: top; padding: 0 0 30px 30px; margin-left: 2%; }
.grade .bks .bk .name { display: block; position: relative; width: 100%; height: auto; font-size: 22px; line-height: 30px; font-weight: bold; margin: 0 auto; padding-bottom: 10px; }
.grade .bks .bk .name:before { content: ""; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; background-image: url("../images/gradeic1.png"); display: block; position: absolute; width: 25px; height: 20px; left: -27px; top: 5px; }
.grade .bks .bk .ito { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: justify; }

#tograde1 { position: absolute; width: 0; height: 0; left: 0; top: -50px; }

#tograde2 { position: absolute; width: 0; height: 0; left: 0; top: -50px; }

#grade1 { background: #f2f2f2; }
#grade1 .sbt { color: black; }
#grade1 .sbt:after { background: black; }
#grade1 .bks .bk .name { color: #7f7f7f; }
#grade1 .bks .bk .name:before { background-image: url("../images/gradeic1.png"); }

#grade2 { background: #e7e8eb; }
#grade2 .bks .bk .name { color: #727a8b; }
#grade2 .bks .bk .name:before { background-image: url("../images/gradeic2.png"); }

@media (max-width: 1080px) { .grade .ctr { max-width: 84%; }
  .grade .bks .bk { width: 45%; } }
@media (max-width: 900px) { .grade .ctr { max-width: 96%; } }
@media (max-width: 768px) { .grade .ctr { max-width: 80%; }
  .grade .bks .bk { display: block; width: 100%; padding: 0 30px 30px 30px; } }
@media (max-width: 768px) { #tograde1 { top: -40px; }
  #tograde2 { top: -40px; } }
@media (max-width: 640px) { #tograde1 { top: -30px; }
  #tograde2 { top: -30px; } }
@media (max-width: 500px) { .grade .ctr { max-width: 86%; } }
@media (max-width: 420px) { .grade .ctr { max-width: 90%; }
  .grade .bks .bk .name { font-size: 20px; line-height: 28px; padding-bottom: 5px; }
  .grade .bks .bk .ito { font-size: 16px; line-height: 22px; } }
#other { padding-top: 100px; padding-bottom: 30px; }
#other .ctr { text-align: center; }
#other .card { width: 350px; margin-left: 60px; }
#other .card .img { height: 320px; }
#other .card .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
#other .card:first-child { margin-left: 0; }
#other .card:hover .img img, #other .card:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

@media (max-width: 1380px) { #other .card { width: 290px; }
  #other .card .img { height: 260px; } }
@media (max-width: 1180px) { #other .card { margin-left: 30px; } }
@media (max-width: 1080px) { #other .card { width: 350px; margin: 0 15px 30px 15px; }
  #other .card:first-child { margin-left: 15px; }
  #other .card:last-child { margin-bottom: 0; }
  #other .card .img { height: 320px; } }
@media (max-width: 860px) { #other .card { width: 290px; }
  #other .card .img { height: 260px; } }
@media (max-width: 768px) { #other { padding-top: 90px; } }
@media (max-width: 720px) { #other .card { display: block; width: 350px; margin: 50px auto 0 auto; }
  #other .card:first-child { margin-left: auto; margin-top: 0px; }
  #other .card .img { height: 320px; } }
@media (max-width: 640px) { #other { padding-top: 80px; }
  #other .card { width: 290px; }
  #other .card .img { height: 260px; } }
@media (max-width: 420px) { #other .card { width: 260px; }
  #other .card .img { height: 230px; } }
#wrap { padding-top: 30px; }