@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin), url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff");
  font-weight: 100;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Light), url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Medium), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: "Roboto";
  src: local(Roboto Bold), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff");
  font-weight: 700;
}
body {
  font-family: "Roboto", sans-serif;  
  font-size:15px;
  line-height: 1.5;
  position:relative;
  background:#fff;
  color: #0d0d0d;
  padding: 0;
}
.top {background: url("../images/top_img.jpg") no-repeat left top; width: 100%; height: auto;}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 1.8rem;
    font-weight: bold;
}
.dropdown-hover:hover>.dropdown-menu { display: block;}
.navbar-light .navbar-nav .nav-link { color: inherit;}
.navbar-light .navbar-nav .nav-link:hover { color: #31a536;}
.navbar {padding: 0.5rem 0;}
.nav-item.active {color: #31a536;}
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: #31a536;}
.dropdown-menu {
  background-color: #43a047;
  border: none;
}
.dropdown-menu {font-size: 15px;}
.dropdown-item { color: #fff;}
.dropdown-divider {
    margin: 0.3rem 0;
    border-top: 1px solid #70bb73;
}
.dropdown-divider-white {
    margin: 0.2rem 0;
    border-top: 1px dotted #f1f1f1;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: #fff;
    background-color: #70bb73;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #58ab5b;
}
.navbar-collapse {margin-top:74px;}
.row {
  margin-right: 0!important;
  margin-left: 0!important;
}
.logo-xs {
  color: #43a047;
  font-weight: 500;
  margin-top: 5px;
  font-size: 25px;
}
.hotline {
  position: absolute;
  right: 0;
    top: 35px;
}
.hotline span:first-child {
  color: #7f7f7f;
  font-style: italic;
  margin-right: 10px;
  font-size: 15px;
}
.hotline .phone {
  color: #f44336;
  font-weight: bold;
  font-size: 27px;
}
.intro {
  text-align: center;
  /*display: table;*/
  padding: 100px 0;
}
.intro-txt {
  position: relative;
    /*display: table-cell;*/
    vertical-align: middle;
    overflow: hidden;
    height: 100%;
    line-height: 1.5;
}
.intro-txt div:first-child {
  color: #43a047;
  font-size: 36px;
  font-weight: 300;
}
.slogan {
  color: #43a047;
  font-size: 54px;
  font-weight: bold;
}
.intro-txt div:last-child {
  font-size: 22px;
  font-weight: 400;
  padding: 0 190px;
}
.obj {
  text-align: center;
  height: 320px;
  padding: 0 25px 25px;
  overflow: hidden;
}
.obj:hover {color: #d2d1d1; text-decoration: none;}
.obj span{
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-size: 25px;
  text-align: center;
  line-height: 13;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .3s ease-out;
  background-color: rgba(0,0,0,0.6); 
}
.obj:hover span {opacity: 1;transition: all .3s ease-out;}
.obj-1 { background: url("../images/obj_1.jpg") no-repeat left top;}
.obj-2 { background: url("../images/obj_2.jpg") no-repeat left top;}
.obj-3 { background: url("../images/obj_3.jpg") no-repeat left top;}
.obj img {margin: 50px 0 33px;}
.obj-txt {
  font-size: 19px;
}
.section {
  padding: 55px 0;
  text-align: center;
}
.white-txt {color: #fff;}
.section-title {
  position: relative;
  z-index: 2;
  margin-bottom: 70px;
  font-size: 28px;
}
.section-title a {
  color: #0d0d0d;
}
.section-title a:hover {
  color: #636363;
  text-decoration: none;
}
.section-title:before {
  content: '';
  position: absolute;
  bottom: -20px;
  height: 6px;
  width: 140px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 0;
  border-bottom: 6px solid #43a047;
}
.white-txt .section-title:before {
  border-bottom: 6px solid #fff!important;
}
.teacher-item {
  /*width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #43a047;
  display: table;*/
  overflow: hidden;
  text-align: center;
  position: relative;
}
.teacher-txt {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  padding: 40px 37px 35px 24px;
}
.i-style {
  font-weight: 300;
  font-style: italic;
}
.section-advan {
  height: 460px;
  background:  url("../images/bg1.jpg") no-repeat left top;
  margin-bottom: 55px;
}
.advan-txt {font-size: 19px;line-height: 1.8;}
.section-pupil {
  background: #f7f7f7;
  border: 1px solid #c2c2c2;
  margin-bottom: 55px;
}
.pupil-lst ul {
  margin-left: -1rem; 
  margin-right: 1rem; 
}
.pupil-lst li {
  list-style-type: none;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px dotted #c8c8ca;
}
.pupil-lst li:last-child {border-bottom: none;}
.pupil-lst{
  padding-left: 0!important;
  padding-right: 0!important;
}
.ico-item {
  margin-right: 0!important;
  float: left;
  width: 34px;
  height: 34px;
  vertical-align: middle;
  margin-top: 5px;
  background:  url("../images/ico_gra.png") no-repeat;
}
.pupil-name {
  text-align: left;
  padding-left: 48px;
}
.pupil-name div:first-child, .pupil-name span:first-child {text-transform: uppercase; font-weight: 500;}
.pupil-name div:last-child, .pupil-name span:last-child {color: #7f7f7f; font-style: italic;}
.btn-success {
  color: #fff;
  background-color: #42a047;
  padding: 0.5rem 2.5rem;
  border-radius: 20px;
  margin-top: 0.5rem;
}
.section-branch {
  height: 520px;
  background: #141414 url("../images/bg2.jpg") no-repeat left top;
}
.section-branch a {color: #fff; font-size: 15.5px;}
.green {background: #43a047;}
.yellow{background: #eabe30;}
.orange {background: #e36d4a;}
.branch-box {
  padding: 26px 25px;
  height: 285px;
}
.branch-box:hover {color: #d2d1d1; text-decoration: none;}
.branch-box span{
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-size: 23px;
  text-align: center;
  line-height: 11;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .3s ease-out;
  background-color: rgba(0,0,0,0.6); 
}
.branch-box:hover span {opacity: 1;transition: all .3s ease-out;}
.infras .col-sm-4, .infras a {max-height: 220px; overflow: hidden;}
.infras img {width: 100%;}
.infras .col-sm-4 {margin-bottom: 30px;}
.gutters {
  margin-right: -15px!important;  
  margin-left: -15px!important;
}
.map {
  width: 100%;
  height: 400px;
  border-top: 1px solid #d8d8d8;
}
.footer {
  position: relative;
  background: #181818;
  color: #999;
  font-size: 13px;
  text-align: center;
  padding: 25px 0;
}
.ico-social {margin-top:10px;}
.ico-social a {margin:0 3px;}
/********* for testimonial slider ***********/
.jcarousel-wrapper {
  margin: 5px auto 20px;
  position: relative;
}
.jcarousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0 17px 50px;
}

.jcarousel ul {
  width: 20000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jcarousel li {
  width: 200px;
  float: left;
  padding: 0 7px;
  margin-left: -3px;
  overflow: hidden;
}

.jcarousel img {
  display: block;
  max-width: 100%;
  height: auto;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
  position: absolute;
  top: 34.5%;
  height: 45px;
}
a.fa-chevron-right, a.fa-chevron-left {text-decoration:none;}
.jcarousel-control-prev {
  left: 0;
}
.jcarousel-control-next {
  right: 0;
}

/********* end testimonial slider ***********/
.detail {
  background: #fff;
  padding: 40px 30px;
  border: 1px solid #ebebeb;
  margin-bottom: 40px;
}
.detail span {
  font-family: "Roboto", sans-serif!important;  
}
.cate-name {
  font-size: 28px;
  padding-bottom: 15px;
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}
.cate-name:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 6px;
  width: 150px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 0;
  border-bottom: 6px solid #43a047;
}
.section-detail {
  height: 322px;
  background:  url("../images/bg3.jpg") no-repeat left top;
  margin-bottom: 20px;
  padding-top: 130px!important;
  margin-top: 20px;
}
.detail-nav {
  margin-bottom: 15px;
  padding-left: 0;
}
.greentext-nav a {
  color: #31a536;
}
.greytext-nav {
  color: #151515;
}
.arrow-nav {
  color:#a9adb4;
  padding: 0 10px;
}
.align-mr-t {margin-top: -9px!important;}
.paging {float: right;}
.paging-active {
  background: #43a047!important;
  color: #fff!important;
}
.paging-item {
  float: left;
  display: inline-block;
  height: 26px;
  padding: 0px 9px;
  color: #0d0d0d;
  font: 400 14px/24px arial;
  border-radius: 3px;
  background: #f5f5f5;
  margin: 0 0 0 6px;
  line-height: 27px;
}
.paging-item:hover {
  font-weight: bold;
  text-decoration: none;
  color: #0d0d0d;
}
.dropdown .dropdown-toggle::after {
  color: #42a047; 
  font-size: 18px;
  vertical-align: 0.1em;
}
.school-y-btn {
  float: right;
  background: none;
  font-size: 0.9rem;
}
.grey-combo-menu {
  background: #f5f5f5; 
  padding: 2px; 
  margin-bottom: 1px;
}
.grey-combo-menu .dropdown-menu {
  background: #d5d5d5;
  top: 3px;
}
.grey-combo-menu .dropdown-menu .dropdown-item {
  color: #333;
  font-size: 14px;
}
.grey-combo-menu .dropdown-menu .dropdown-item:hover {background-color: #e6e6e6;}
.infras a:active {text-decoration: none; border: none;}
.close {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 2rem;
  opacity: 1;
  /* text-shadow: 0px 2px 15px #fff; */
  font-weight: 400;
}
.modal-body img {
  width: 100%;
  height: auto;
}
.subject-wr {
  background: #f5f5f5;
  padding: 7px 15px;
  color: #0d0d0d;
  margin-bottom: 15px;
}
a.subject-wr:last-child {margin-bottom: 0px;}
.subject-wr i {
  float: right;
  margin-top:3px;
}
a:hover.subject-wr {
  background: #ededed;
  color: #0d0d0d;
  text-decoration: none;
}
.section-letter {
  background: #eee url('../images/letter_bot.png') bottom center no-repeat;
  border: 1px solid #d4d4d4;
  margin-bottom: 55px;
  padding: 0 0 25px!important;
}
.letter-title {
  width: 100%;
  position: relative;
  display: inline-block;
  background: #d4d4d4;
  padding: 40px 15px 60px;
  font-size: 26px;
  font-weight: 500;
}
.dropdown-menu-right {
  max-height: 400px;
  overflow: hidden;
  overflow-y: scroll;
}
.dropdown-menu-right .dropdown-item {padding: 0.25rem 1rem!important;}
.dropdown-menu-right::-webkit-scrollbar {
    background-color: #e0e0e0;
    width: 8px;
}
.dropdown-menu-right::-webkit-scrollbar-thumb {
    background-color: #949494;
    border-radius: 4px;
}
@media (min-width: 480px) and (max-width: 768px) {
    .navbar-collapse {margin-top: 25px;}
    .navbar-expand-lg .navbar-nav .nav-link {padding-left: 0;}
    .navbar-brand img {width: 80%;}
    .intro {padding: 36px 0;}
    .intro-txt div:first-child {font-size: 24px;}
    .slogan {font-size: 36px;}
    .intro-txt div:last-child {font-size: 16px; padding: 0 97px; line-height: 1.3;}
    .top {background-size: 116%;}
    .obj img {margin: 30px 0 16px;}
    .obj-txt {font-size: 17px;}
    .section-title {margin-bottom: 65px; font-size: 26px;}
    .teacher-txt {font-size: 14px; padding: 20px 15px 15px 15px;}
    .advan-txt {font-size: 17px;line-height: 1.7;}
    .branch-box {padding: 26px 20px; height: 300px;}
    .jcarousel-control-prev, .jcarousel-control-next {top: 30%;}
    /*.jcarousel-control-prev, .jcarousel-control-next {top: 86%;}
    .jcarousel-control-prev {left: 40%;}
    .jcarousel-control-next {right: 40%;}*/
} 

@media (min-width: 780px) and (max-width: 1024px) {
    .intro {padding: 30px 0;}
    .intro-txt div:first-child {font-size: 28px;}
    .slogan {font-size: 40px; line-height: 1.1; margin: 5px 0;}
    .intro-txt div:last-child {font-size: 16px; padding: 0 188px; line-height: 1.3;}
    .infras .col-sm-4, .infras a {max-height: 175px;}
}

@media (min-width: 1050px) and (max-width: 1280px) {
    .intro {padding: 40px 0;}
}

@media (min-width: 770px) and (max-width: 1280px) {
    .top {background-size: 100%;}
}

@media (min-width: 480px) and (max-width: 1024px) {
  .jcarousel li {padding: 0px 14px; margin-left: -6px;}
}

@media (max-width: 768px) {
    .navbar-collapse {margin-top: 5px;}
    .navbar-expand-lg .navbar-nav .nav-link {padding-left: 0;}
    .navbar-toggler {padding: 0.05rem 0.3rem;}
    .logo-xs {font-size: 22px;}
    .section {padding: 45px 0;}
    .detail {padding: 40px 12px;}
}

@media (max-width: 414px) {
    .intro {padding: 50px 0;}
    .intro-txt div:first-child {font-size: 21px;}
    .slogan {font-size: 27px; line-height: 1.1; margin: 5px 0;}
    .intro-txt div:last-child {font-size: 15px; padding: 0 5px; line-height: 1.3;}
    .jcarousel li {padding: 0 12px; margin-left: -10px;}
    .section-branch {height: 1000px;}
    .infras img {margin-bottom: 20px;}
    .jcarousel-control-prev, .jcarousel-control-next {top: 30%;}
    .pupil-lst ul {margin-left: -2.5rem; margin-right: 0;}
    .modal-body {padding: 0.5rem;}
    .infras .col-sm-4, .infras a {max-height: 190px;}
}
@media (max-width: 414px) and (min-width: 351px) {
    .section-title {margin-bottom: 60px; font-size: 22px;}
    .advan-txt {font-size: 16px;line-height: 1.5;}
    .teacher-txt {font-size: 15px; line-height: 1.3; padding: 30px 15px 15px 15px;}
    /*.jcarousel-control-prev, .jcarousel-control-next {top: 86%;}
    .jcarousel-control-prev {left: 30%;}
    .jcarousel-control-next {right: 30%;}*/
    .obj img {margin: 45px 0 28px;}
}

@media (min-width: 320px) and (max-width: 350px) {
  .section-title {margin-bottom: 50px; font-size: 20px;}
  .advan-txt {font-size: 15px;line-height: 1.4;}
  .teacher-txt {font-size: 13px; line-height: 1.3; padding: 25px 12px 12px 10px;}
  /*.jcarousel-control-prev, .jcarousel-control-next {top: 84%;}
  .jcarousel-control-prev {left: 27%;}
  .jcarousel-control-next {right: 27%;}*/
  .jcarousel-control-prev, .jcarousel-control-next {top: 27%;}
  .obj {height: 270px;}
  .obj img {margin: 34px 0 18px;}
  .obj-txt {font-size: 17px;}
}
@media (min-width: 1170px) and (max-width: 1280px) {
  .intro-txt div:first-child {font-size: 32px;}
  .slogan {font-size: 50px;}
  .intro-txt div:last-child {font-size: 20px; padding: 0 215px;}
}
@media (min-width: 576px){
  .modal-dialog {max-width: 800px!important;}
}
@media (min-width: 420px) and (max-width: 768px) {
  .infras .col-sm-4, .infras a {max-height: 130px;}
}