@media screen and (max-width:970px) {

	







.screen{ min-width:300px; max-width:950px; padding:0px 10px;}



.logo_txt,  { display:none; }

.header .logo_img img { max-height:84px; width:auto;}

.banner_area {padding: 0 0 10px 0; }



}



@media screen and (max-width:960px) {

	.cd-top { right:0; bottom:0; }

	.latest_new ul { max-height:100% !important; overflow-y: unset}

	.latest_new ul li .cover { padding-top:10px;}

	.logo_footer .logo_img img { width: auto;}

.header .logo_area { padding:15px 0;}

.header .logo_img img { max-height:84px; width:auto;}



.logo_footer .logo_txt { margin:5px 0 0 10px; float: left; display: inline-block; clear:none}

.esda a , .facebook a{ background-size:30px 30px;}

.latest_awards .title , .latest_new .title{ font-size:23px;}

.container .screen { padding:0 15px;}

.latest_awards ul { padding:50px 0 0 0;}

.latest_new #more_area { top:5px;}

.footer .screen, #contact_info .screen { padding:0 15px;}

.inner_area , .inner_area_b, .inner_area_c { padding:20px 0;}

.inner_area { padding:0}

.latest_new { width:100%;}

html,body {    font-size:15px; line-height:23px;}

.container{  line-height:23px; font-size:15px;  }

.main_calenadr { width:100%; margin:30px 0;}

#login_area{ width:98%; margin-top:20px;}

#contact_info .logo_footer { width:100%  }

#contact_info .contactinforamtion { width:100%;  }

#contact_info .socialmedia { width:100% ; }

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

.latest_awards .area { padding:10px;}

.latest_new ul li .news_title { font-size:19px; line-height:23px;}

#login_area .login_icon { font-size:15px;}

#sumbit { font-size:12px;}

.latest_awards .news_title { font-size:19px;}

.latest_awards ul li a { padding:5px;}


.newsletter ul li {
    width: calc(100% - 4%);
}




.non_banner{  padding:50px 0 50px 0;  }

.media_banner{  padding:50px 0 50px 0;  }

.subj_banner{  padding:50px 0 50px 0;  }

.non_banner h1, .media_banner h1, .inner_banner h1, .subj_banner h1 { font-size:23px; line-height:28px ;  }



.information .date span { padding:5px 0 5px 22px; margin:0; }

#info_type_B .information ul li .news_title{ font-size:19px; margin-bottom:5px; line-height:21px;} 

#info_type_B .information ul li .description { font-size:15px; line-height:19px;}

.latest_awards ul li .date { position:relative; right:0; margin:0;}

.inner_banner{  padding:50px 0; }



#Media_Album .information ul li { width:48%; margin:0 0 15px 2%;}

.Userful_link_inside ul li { width:48%; margin:0 0 10px 2% }

.Userful_link_inside ul  { margin:0 0 0 -2% }



#Media_Video .information ul li { width:48%; margin:0 0 15px 2%}



#Media_Video .information ul li:nth-child(2n+1) { clear:both; }



.inner_content .main_content{ margin:0 0 10px 0; padding:0 10px; overflow-x: auto; line-height:28px;} 



.inner_content{ padding:20px 2%; margin:0; width:96%} 

.Album .title{ font-size:19px; line-height:23px; }



h1{ font-size:28px; line-height:33px;  }

h2{ font-size:23px; line-height:38px; }

h3{ font-size:21px; margin:5px 0;  }

h4{ font-size:21px; margin:5px 0;  }

h5{ font-size:19px; margin:0px; }

h6{ font-size:17px; line-height:23px; }

#inside_full { padding:45px 0 0 0;}

.nevigation{ padding:5px 0;}

.latest_awards ul { margin:10px 0;}

.latest_awards ul li { width:100% !important; float: none !important; margin:0 0 15px 0 !important;}

#Inner_Type_A ul{ margin:20px 0 0 0%;  }

#Inner_Type_A li{ float:left; width:100%; margin:0 0 15px 0%; }

#Inner_Type_C li .title_des{ width:100%; }

#Inner_Type_C li .right_desc{ width:100%;}



.download_area ul{ margin:0px 0 0 0%; padding:0px;}

.download_area ul li{ width: auto; float:none; margin:0 0 15px 20px }

.inner_content_full .main_content{ padding:5px 10px 20px 10px; min-height:200px; }

.year_box{ right:0 ;top:0; position: relative;}

.year_box select{ width:100%}



#info_type_A .information .date{ float:left; width:35%;  }

#info_type_A .information p{ float:left; width:63%; }



#info_type_B .information ul{  margin:0 0 0 0%; }

#info_type_B .information ul li{ width:100%; margin:0 0 15px 0;}



#info_type_C .information ul{  margin:0 0 0 0%;  }

#info_type_C .information ul li{ width:100%; margin:0 0 15px 0; }



#MediaA .information ul{  margin:0 0 0 0%;  }

#MediaA .information ul li{ width:100%; margin:0 0 15px 0%; }



#MediaB .information ul{  margin:0 0 0 0%;  }

#MediaB .information ul li{  width:100%; margin:0 0 15px 0; }



.btn_back a{font-size: 15px;  line-height: 21px;}



#notice .information ul .title_area { display:none;}

#notice .information .date{ float:left; width:75%;  padding:5px 5px 5px 0px; }

#notice .information .date span{ padding:0 0 0px 25px; background:url(../images/icon/icon_date.png) no-repeat; background-size:21px 21px; background-position:0px 50%;}

#notice .information .number{ float:left; width:75%;  }

#notice .information .title{ float:left; width:75%;   }



.youtube_video{ width:100%; box-shadow:0 5px 10px rgba(0,0,0,.5); background:#000; padding:0px; border:0px solid #fff; margin-top:30px;}

.youtube_video iframe{ width:100%; height:320px;}

.youtube_video video{ width:100%; height:320px;}



.latest_new_box span { font-size:14px;}



.footer_info ul li{ font-size:13px; line-height:16px;}



h5 a { background-size: 30px 30px }



#Information_detail { padding:45px 0 20px 0 ;}

#Information_detail iframe { width:100%; height:auto; min-height:350px; margin:0; }



.contactus .info, .contactus .location{ width:100%;}

#Information_detail #Inner_Type_A li{ width:100%; margin:0 0 15px 0%; }

#Information_detail #Inner_Type_A li img{ max-width:100%; max-height:1080px;}

#info_type_A .information ul .title_area { display:none}

.arrowlistmenu{ width:100%; }

.latest_new_box .content p { font-size:17px; line-height:21px;}

#latest_new_inside .latest_new_box { width:100%; margin:0 0 15px 0;}





.facility .facility_box1,.facility_box2,.facility_box3,.facility_box4 { display:none}



.facility .facility_box1_m {float:left;width:100%; display:block;}

.facility .facility_box1_m ul { list-style:none; margin:0; padding:0}

.facility .facility_box1_m ul li{ width:50%; float:left; display: grid;}

.facility .facility_box1_m ul li+li+li{ width:100%; float:left; }

.facility .facility_box1_m ul li+li+li+li+li+li+li+li{ width:50%; float:left; }

.facility .facility_box1_m ul li+li+li+li+li+li+li+li+li+li+li+li{ width:100%; float:left; }

.facility .facility_box1_m ul li+li+li+li+li+li+li+li+li+li+li+li+li{ width:50%; float:left; }

.facility .facility_box1_m ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li{ width:100%; float:left; }

.facility .facility_box1_m ul li a img{width: 100%;    max-width: 100%;    max-height: 100%;}



.feature ul li { width:100%}

.school_videos .title { width:37% !important}

.latest_notices { width:100%; margin:0}

.contact_info { width:100%}

.contact_us { width:100%}



.school_videos ul li { width:calc(100% - 2%); margin:20px 1%}

.school_videos ul li iframe {max-height: 437px !important ;min-height: 437px !important;}

.multi-button ul li { width: calc(50% - 1%); margin:1% 0.5%; padding:0}

.multi-button ul li:nth-child(2n+1){ clear:both} 

.button { width:100%}



.header .logo_area img { height:30px}

.top_right { display:none}

.top_right_m { display:block; width:100%; position:relative}

.top_right_m ul{ list-style:none; padding:0; margin:0}

.top_right_m ul li{ float:left; width:25%}

.top_right_m ul li a{ background: #053368;display: block;text-align: center;padding: 10px 0;color: #fff;}

.top_right_m ul li+li a{ background: #adbac9}

.top_right_m ul li+li+li a{ background: #053368}

.top_right_m ul li+li+li+li a{ background: #adbac9}

.more_area { right:10px}

.latest_notices ul li .box_day { width:90px !important}

.feature ul li { margin:0}

.slogan_area{ display:none}

.contact_info ul li span { top:-9px}

.sticky .header { min-height:60px; max-height:60px}

.feature .title ,.facility .title,.story .title,.school_videos .title,.latest_notices .title,.main_calenadr .title{ font-size:20px}

#calendar { min-height:auto; max-height: none}



.row { display:none}

}





@media screen and (max-width:500px) {

.latest_notices ul li .box_day {width: 70px !important;}

.latest_notices .content { width:74% !important}

	}



@media screen and (max-width:440px) {

	.feature ul li p { font-size:12px !important}

	.feature ul li a {        font-size: 12px !important;}

	.feature #cover3 { width:27.3% !important}

	

	}