.navbar-toggle {
  position: relative;
  float: right;
  padding: 10px;
  margin-top: 18px;
  margin-right: 0;
  background-color: #502960;
  background-image: none;
  border-radius: 8px;
  border:0px;
}

.navbar-material-blue .navbar-toggle:hover,
.navbar-material-blue .navbar-toggle:focus {
  background-color: #ffd200;
}
.navbar-material-blue .navbar-collapse,
.navbar-material-blue .navbar-form {
  background: rgba(255,255,255,.8); box-shadow: 0 0 3px rgba(0,0,0,.2)
}

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  width: calc(100% - 30px);
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.navbar-material-blue .navbar-nav > .active > a,
.navbar-material-blue .navbar-nav > .active > a:hover,
.navbar-material-blue .navbar-nav > .active > a:focus {
  color: #333333;
  background-color: #a8bbd2;
}
.navbar-material-blue .navbar-nav > .disabled > a,
.navbar-material-blue .navbar-nav > .disabled > a:hover,
.navbar-material-blue .navbar-nav > .disabled > a:focus {
  color: #502960;
  background-color: transparent;
}
.navbar-material-blue .navbar-toggle .icon-bar {
  background-color: #fff;
}



@media screen and (max-width: 1530px) {
.link_button ul li span::after {background-size: 90%;}
.link_button ul li span::before {background-size: 70%; }
.link_button ul li+li span::after {background-size: 90%;}
.link_button ul li+li span::before {background-size: 70%; }
.link_button ul li a { padding:30px 5px 30px 5px}
.link_button2 ul li span::after {background-size: 90%;}
.link_button2 ul li span::before {background-size: 70%; }
.link_button2 ul li+li span::after {background-size: 90%;}
.link_button2 ul li+li span::before {background-size: 70%; }
.link_button2 ul li+li+li span::after {background-size: 90%;}
.link_button2 ul li+li+li span::before {background-size: 70%; }
.link_button2 ul li a { padding:30px 5px 30px 5px}
.logo img {    max-height: 109px;}
html, body { font-size:16.5px}
.latest_new .title span, .latest_video .title span, .latest_awards .title span, .Userful_link_inside .title span { background-size:80%}	
.latest_new .title, .latest_video .title, .latest_awards .title, .Userful_link_inside .title { padding: 30px 0 20px 80px;}
.latest_video .title { padding:10px 0 70px 70px}

.stellarnav::before { right:250px; background-size:80%;}

#sub_act .content {width: 100%;}
	}
@media screen and (max-width: 1120px) {
.motto p {font-size: 30px;}	
	}	
	
@media screen and (max-width: 1360px) {

.link_button ul li span::before {  background-size: 50%;}
.link_button ul li span::after {  background-size: 60%;transform: translate(0%, 0%);}
.link_button ul li+li span::before {background-size: 50%;}
.link_button ul li+li span::after {background-size: 60%;transform: translate(20%, 0%); }
.link_button ul li span::before {transform: translate(-30%, -40%);}
.link_button ul li + li span::before {transform: translate(-30%, -35%);}
.link_button ul li a:hover span::after { transform: translate(20%, 0%);}
.link_button2 ul li span::before {  background-size: 50%;}
.link_button2 ul li span::after {  background-size: 60%;transform: translate(0%, 0%);}
.link_button2 ul li+li span::before {background-size: 50%;}
.link_button2 ul li+li span::after {background-size: 60%;transform: translate(20%, 0%); }
.link_button2 ul li span::before {transform: translate(-30%, -40%);}
.link_button2 ul li + li span::before {transform: translate(-30%, -35%);}
.link_button2 ul li a:hover span::after { transform: translate(20%, 0%);}
.sch_info { padding:30px 15px}
.footer .screen {    padding: 30px 15px;}
.latest_video .title font { float:left; padding: 0 0 0 20px}
	}
	
@media screen and (max-width: 1180px) {
.logo_area { max-width:38%; }

.logo_tc { font-size:26px; }
.logo_en { font-size:12px;letter-spacing:-0.55px}

.school_footer .screen{ background: none}
.stellarnav::before { background-size:70%; right:70px}
}



@media screen and (max-width: 960px) {
	
html,body {	font-size:15.5px; line-height:23px; } 
h1{ font-size:28px; line-height:32px;  }
h2{ font-size:22px; line-height:28px; }
h3{ font-size:18px;  line-height:22px;  }
h4{ font-size:16px;  line-height:22px;  }
h5{ font-size:16px;  line-height:22px;  }
h6{ font-size:16px;  line-height:22px;  }


.logo{ float:left; padding: 60px 0 30px 0;}
.logo img{ max-height:95px; }
.footer .screen { padding:0 10px;}
.header .links_top {right: auto;margin: 0;top: 0;position: relative;left: 0;float: left;border-radius: 0px; width:100%; z-index:1;}
.header .links_top ul li { width:33.3%}
.header .links_top ul li a { border-radius:0 }
.header .links_top ul li + li + li a {border-radius:0 }
#jssor_1 { border-radius:0}
.header { background: url(../images/web/header_m.png) #fff no-repeat  bottom right;  position:relative; background-position-x: 60%; background-position-y: -50px; background-size: cover}
.banner_area::before { display:none}

.logo_img img{ width: auto; height:50px; max-width:100%; }
.logo_txt { margin:0px 0 0 3px; max-width:calc(100% - 58px); }
.logo_tc { font-size:19px; line-height:23px; }
.logo_en { font-size:12.5px; line-height:17px; letter-spacing:-0.15px }

.btn_Login { display:none}
.school_footer{ padding:20px 0;}
.screen{ min-width:300px; padding:0px 10px ;}
.container .screen {}
#template_B .information ul li .cover{ width:100%}
.latest_new , .latest_awards , .latest_notices , .latest_gallery , .latest_video , .main_calenadr, .media_press { width:100% ; margin:15px 0; } 

#template_C .information ul, #template_B .information ul, #template_A .information ul { margin:0}
#template_C .information ul li { width:100%; margin:0 0 10px 0}
#template_B .information ul li { width:100%; margin:0 0 10px 0}
#template_A .information ul li { width:100%; margin:0 0 10px 0}

.Userful_link_inside{  }
.Userful_link_inside ul{  padding:0px }
.Userful_link_inside ul li {
    width: calc(33.3% - 2%);
    margin: 0 1% 10px 1%;
}

  .caption-text h5 { 
  position: absolute; font-size:17px; font-weight:300; line-height:24px;
 margin:0; padding:0; text-align:center; display:inline-block;
  left: 50%; top:auto; bottom:23px;
  }
   .Userful_link_inside ul li:hover h5 { font-size:17px; }
   
#template_B .information ul li .content{ float:right; width:100%}
#footer_area{ float: left; width:100%; padding: 0;}

.sch_info table { width:100%}

.sch_info{ padding:10px 10px ;}
.sch_info ul li { width:100%; margin:5px 0}
.sch_info ul li span{ background-size:20px 20px; padding:5px 0 5px 25px; }
.sch_info ul li+li span{background-size:20px 20px;   }
.sch_info ul li+li+li span{  background-size:20px 20px; }
.sch_info ul li+li+li+li span{background-size:20px 20px;   }

.footer{ padding:15px 0;}
.footer .copyright , .footer .power{ text-align: center; width:100%; }

.main_1{ padding:0;}
.main_2{ padding:0;}
.main_3{ padding:0;}


.top_area{ float:left; width:100%; position:absolute; top:0; left:0 }
.logo_area { float: left; max-width:80%; margin:15px 0 15px 0; text-align: left;}

#bs-example-navbar-collapse-animations ul.navbar-nav{ float: none; margin-top:0px; }

.navbar-collapse{ float: none; }
  
.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a { color: #502960;  }

.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffd200;
background-color: transparent;
}
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #502960;
background-color: #a8bbd2;
}
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #502960;
background-color: transparent;
}

.inner_banner {  padding:15px 0;  }
.inner_banner h1{ padding:10px 10px ; font-size:18px;  line-height:24px;  }

.inner_banner h1{ text-align: center; letter-spacing:0px;  text-shadow: 0 0 6px rgba(0,0,0,.2); background: rgba(255,205,51,1);  }


.site-map ul{ margin:0 0 ; padding:0;}
.site-map ul li{  width: 100%; margin:0 0 15px 0%;  }
.site-map ul li:nth-child(2n+1){ clear: both; }

.boxing .title{  padding:5px 15px 5px 15px; margin:15px 0; font-size:21px; }
#Inner_Type_A li, #Inner_Type_A2 li { width:100%; margin:0 0 10px 0;}
#Inner_Type_H li, #Inner_Type_H2 li { width:100%; margin:0 0 10px 0;}
#Inner_Type_F ul li iframe{ width:100%; height:450px; border:0;}

.inner_content .main_content { width:calc(100% - 40px); margin-bottom:30px}
.sidebar-nav{ width:100%;}



.more_area{ right:0; }
.more_area a{ letter-spacing:1px; color:#fff; font-size:15px;  padding:5px 20px 5px 20px; text-transform:uppercase;  }
#Inner_Type_A ul, #Inner_Type_A2 ul { margin:0;}



#popup_this {  width:90%;   }
#popup_this .content  {
min-width:300px;
min-height:240px;
max-height:420px; padding:30px 5px ; }

#Inner_Type_C li .title_des{ float: left; width:100%}
#Inner_Type_C li .right_desc{ float: right; width:100%; text-align: left}
#Inner_Type_C2 li .title_des{ float: right; width:100%}
#Inner_Type_C2 li .right_desc{ float: left; width:100%; text-align: left}

#template_notice .information .date, #template_notice .information .title, #template_notice .information .download{  width:100%; }
  
.video_theme{ max-width:100%; }

#tpl .dropdown{ position:relative;  margin:0 0 10px 0;}

.mobile_only { top:10%; transform: translateY(-10%);width:100%; z-index:10; background: #053368; z-index:9999; display:block !important }
.mobile_only a { display:none !important;}
.mobile_only  ul{ list-style:none; margin:0; padding:0; display:block !important; background:none !important; opacity: 1!important;
visibility: visible!important; }
.mobile_only  ul li{ float:none; border-bottom:0px !important  }
.mobile_only  ul li a{ color:#fff!important; font-size:13px !important; padding:5px 15px !important;display:block !important; background:none !important; border-bottom:0px !important  }
.mobile_only  ul li a:hover{ color:#d5f3fe !important; background:none !important  }

#template_A .information ul li .cover{ width:100%}

.jssor_1{filter: drop-shadow(0px 0px 0px #fdd528); }
.motto { width:calc(100% - 30px - 6px);margin-top: 60px; padding:15px;

border-top: 3px solid #fdd528;border-left: 3px solid #fdd528;border-right: 3px solid #fdd528;

}
.latest_new .more_area a ,.latest_awards .more_area a{ padding:8px 30px}
.latest_new ul li .datebox { width:40px; height:40px}
.latest_new ul li .box_day .year { line-height:20px}
.latest_video .title font {    float: none;    padding: 0;}

.link_button { width:100%}
.link_button ul li{width: calc(50% - 6px - 1%);margin-top: 30px;margin-right: 1%; margin-top:10px}
.link_button ul li + li { margin-right: 0; margin-left:1%}
.link_button ul li + li + li {width: calc(25% - 2% - 6px); margin: 10px 1% 0 0;}
.link_button ul li + li + li + li { float:left; margin: 10px 0 0 1%;}
.power b{ display:none}

.link_button ul li a { font-size:25px}
.link_button ul li span::after {transform: translate(0%, -10%);}
.link_button ul li a:hover span::after { transform: translate(20%, -10%);}
.link_button ul li+li span::after {transform: translate(20%, -10%);}
.link_button ul li+li a:hover span::after { transform: translate(40%, -10%);}
.link_button ul li + li span::before {    transform: translate(-30%, -40%);}

.link_button2 { width:100%}
.link_button2 ul li{ margin-right: 0; margin-left:1%}
.link_button2 ul li + li { margin-right: 0; margin-left:1%}
.link_button2 ul li + li + li { margin-right: 0; margin-left:1%}

.link_button2 ul li a { font-size:25px}
.link_button2 ul li span::after {transform: translate(0%, -10%);}
.link_button2 ul li a:hover span::after { transform: translate(20%, -10%);}
.link_button2 ul li+li span::after {transform: translate(20%, -10%);}
.link_button2 ul li+li a:hover span::after { transform: translate(40%, -10%);}
.link_button2 ul li + li span::before {    transform: translate(-30%, -40%);}
.link_button2 ul li+li+li span::after {transform: translate(20%, -10%);}
.link_button2 ul li+li+li a:hover span::after { transform: translate(40%, -10%);}
.link_button2 ul li + li+li span::before {    transform: translate(-30%, -40%);}

.motto p { font-size:35px}
.header .links_top ul li p { top:5px}
.header .links_top ul li a:hover {padding: 10px 20px 10px 20px; border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
.header .links_top ul li p { display:none}
.header .links_top ul li a { text-align:center; padding:10px 20px}

.container #full { padding:0; width:calc(100% - 20px);  padding:10px;  }

.sub_category ul li{ margin-right:5px;}
.sub_category ul li a{ padding:10px;}
#template_notice .information .number{ width:100%}
#template_notice .information .date{ padding:0}

#sub_act .content {width: 100%;}

.subject_category ul li {
  width: 48%;
  margin: 0 0 15px 2%;
}

}

@media screen and (max-width: 690px) {
.motto .gril , .motto .boy{ background-size:70%}	
.motto p {    font-size: 18px;}
.link_button ul li {    width: calc(100% - 6px);    margin-right: 0;}

.logo img {    max-height: 65px;} 
.logo { padding:40px 0}
.link_button ul li + li { margin-left:0}

.link_button ul li + li + li {    width: calc(50% - 2% - 6px);}
.link_button ul li + li + li + li {    float: right;}

}

@media screen and (max-width: 500px) {
.header .links_top ul li a { font-size:12px}	

.motto font { top:0}
.motto .gril , .motto .boy{ display:none}	

.motto { margin-top:20px}
.latest_new ul li .cover { width:100%}
.latest_new .content { width:100%; padding:0;margin-top: 10px;}
.latest_new .news_title {line-height: 45px;
font-size: 19px;}
.latest_new .news_body { display:none}
.link_button ul li a { font-size:20px}
.link_button2 ul li a { font-size:20px}
.link_button2 ul li+li a { font-size:20px}
.link_button2 ul li+li+li a { font-size:20px}

.latest_new .title span, .latest_video .title span, .latest_awards .title span, .Userful_link_inside .title span { background-size: 70%;}
.latest_new .more_area a, .latest_awards .more_area a { padding:8px 20px}
.latest_new .title, .latest_video .title, .latest_awards .title, .Userful_link_inside .title {    padding: 30px 0 20px 60px;
}
.latest_video .title {    padding: 30px 0 40px 50px;}

.Userful_link_inside ul { margin:10px 0 0 0}
.Userful_link_inside ul li { width:calc(50% - 2%)}
	}

@media screen and (max-width: 350px) {
.motto p { font-size:19px}	
	}