/* iPhone 6 plus width */



@media (min-width: 1200px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}

@media screen and (max-width: 736px) {
	.footer_schoolname .zh,
    .footer_schoolname .en {
        display: block;
    }
	
	.footer_schoolname .en {
		margin-left: 0px;
	}

	button.tagBtn,
	.tabBtn {
		font-size: 4vw;
	}
}

@media screen and (max-width: 1839px){
	.fourbtn-section-container{
		max-width: 1520px;
	}

	.achievements_section_container {
		max-width: 1520px;
	}

	.school_activities_section_container {
		max-width: 1520px;
	}
}

@media screen and (max-width: 1025px) {
	.useful_links_row{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		margin: auto;
	}

	.useful_links_section {
		padding: 62px 15px;
	}

	.useful_links_item_details p{
		font-size: 14px;
	}

	.useful_links_item_details img {
        width: 16px;
    }

}

@media screen and (min-width: 991px) and (max-width: 1200px){
   

    #main-menu li {
        margin: 6px 0px; /* Reduce margin for smaller screens */
        padding: 6px 3px !important;
    }

    #menu-main-menu-chi {
        padding: 0px 15px;
    }

    #main-menu .navbar-nav .menu-item a {
        font-size: 18px;
    }
}

@media screen and (min-width: 1091px) and (max-width: 1190px){
	.navbar-container{
		gap: 25px;
	}

	.topbar-menu-search {
        flex-direction: row; /* Keep items in a row on smaller screens */
        align-items: baseline; /* Center vertically */
        gap: 10px; /* Adjust gap as needed */
    }

   
    #main-menu li {
        margin: 6px 0px; /* Reduce margin for smaller screens */
    }

}

@media screen and (min-width: 991px) and (max-width: 1440px){
    /* .news-section{
		padding: 58px 10px 45px 25px;
        gap: 25px;
    } */

	.navbar-container {
		max-width: 100%;
	}
	
}

@media screen and (max-width: 1270px) {
	.school-logo {
		width: 100%;
		height: auto;
		max-width: 279px;
	}

	.special-school-logo {
		width: 100%;
		height: auto;
		max-width: 80px;
	}

	.navbar-container {
        margin-top: 9px;
    }


}

@media screen and (max-width: 1385px) {
	.non-Mobile{
		display: none;
	}

	.mobile-only {
		display: block;	
		position: relative;
	}
	
	.menu_btn {
		background: url(../images/icon_menu.svg) no-repeat;
		background-size: 100% auto;
		width: 35px;
		cursor: pointer;
		background-position: center;
	}

	.menubtn-bar {
		/* background: #07224F; */
		position: relative;
		width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 8px;
        background-color: #004C45;
    	height: 95px;
        /* height: 70px; */
	}
	
	.m_menu_main {
		width: 100%;
		display:none;
		/* height: 100%; */
		overflow-x: hidden;
		/* position: absolute; */
	}

	.catBrowser-label{
		color:white;
	}

	.m_menu {
		-webkit-transition: transform 0.4s;
		transition: transform 0.4s;
		width: 100%;
		height: fit-content;
		position: absolute;
		right: 0px;
		z-index: 300;
		top: 116px;
		margin-top: -16px;
		background: #07214f;
	}

	.sub{
		position: relative;
	}
	
	

    .sub_arrow_area .arrow-icon{
        content: url(../images/new/arrow.svg);
    }
	
	.subsub{
		padding: 10px 0 10px 130px !important;
	}

	.sub_arrow_area {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-200%);
        display: flex;
    }

	.sliding-menu{
		position: fixed;
        top: 0;
        left: -87%;
        width: 87%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.93);
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        transition: left 0.4s ease;
        z-index: 1000;
	}

	.sliding-menu.open {
		left: 0; /* Slide in the menu */
		max-height: 100vh;
        overflow: auto;
	}

	

    .swiper-special-announcement .swiper-slide{
        flex-direction: column;
        margin-top: -35px;
        /* gap: 20px; */
    }

    .swiper-special-announcement .slide-image {
        /* width: 100%;
        position: relative;
        top: 55px;
        left: 0; */

		position: relative;
		width: 100%;
		padding-top: 56.25%;
		overflow: hidden;
		left: 0px;
		height: auto;
		border-radius: 0px;
    }

	.swiper-special-announcement .slide-image.visible {
		bottom: -60px;
		/* top: 20px; */
		opacity: 1;
		transform: translateY(0);
		transition: all 1s ease-out;
	}

	.swiper-special-announcement .slide-image img {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		height: 110%;
		object-fit: cover;
		transform: translate(-50%, -50%) scale(1);
		transition: all .5s;
		border-radius: 0px;
	}

    .swiper-special-announcement .slide-text {
        height: 330px;
        width: 100%;
		margin: 0px 0px;
		background-color: transparent;
    }

	.close-btn_mobile_menu {
		font-size: 50px;
		cursor: pointer;
		position: absolute;
		top: 30px;
		right: 26px;
		color: #004C45;
	}

	.sliding-menu nav ul {
		list-style: none;
		padding: 80px 0px 30px 0px; /* Padding for the menu items */
	}

	.sliding-menu nav ul ul{
		list-style: none;
		padding: 0px 0px; /* Padding for the menu items */
	}

	.sliding-menu nav ul ul ul {
        list-style: none;
        padding: 0px 0px;
    }

	.sliding-menu nav ul ul li a{
		color: #5E5E5E;
		margin: 0px 40px;
	}

	.sliding-menu .catBrowser-item{
		cursor: pointer;
	}

	.sliding-menu .catBrowser-label{
		color:#004C45;
		font-weight: bold !important;
		font-size: 20px !important;
		margin: 20px 15px;
	}
	
	.sliding-menu ul ul li{
		color: #5E5E5E;
		padding: 14px 14px;
		font-weight: normal;
		font-size: 20px;
	}

    /* .sub_arrow_area .arrow-icon{
        content: url(../images/new/arrow.svg);
    } */

	.sliding-menu ul ul li.sub .sub_arrow_area .arrow-icon{
		transition: transform 0.3s ease;
	} 

	.sliding-menu ul ul li.sub .sub_arrow_area .arrow-icon:hover{
		content: url(../images/new/arrow_blue.svg);
	}

	.sliding-menu ul ul ul li.subsub {
       	color: #5E5E5E;
		padding: 14px 14px !important;
		font-weight: normal;
		font-size: 20px;
    }

	.sliding-menu ul ul ul li.curr_subsub {
        background: none !important;
    }

	.sliding-menu ul ul ul li.subsub a {
        color: #5E5E5E !important;
        margin: 0px 0px !important;
    }

	.sliding-menu ul ul ul li.subsub a > div{
        margin: 0px 60px !important;
    }

	.sliding-menu .catTitle{
		display: flex;
		align-items: center;
        justify-content: space-between;
		margin: 0px 30px;
	}

	.sliding-menu .arrow {
		display: inline-block;
		border-right:3px solid #004C45;
		border-bottom:3px solid #004C45;
		width: 14px;
		height: 14px;
		transition: transform 0.3s ease;
		border-radius: 2px;
		margin: 5px 5px;
	}

	.sliding-menu .arrow.down {
		transform: rotate(45deg);
	}

	.sliding-menu .arrow.up {
		transform: rotate(-135deg);
	}

	.sliding-menu .sliding-menu-buttons{
		margin: 0px 40px;
	}
	
	.school-logo{
		margin: 8px 0px;
        width: 100%;
        max-width: 210px;
	}

	.special-school-logo{
		margin: 8px 0px;
        width: 100%;
      	max-width: 80px;
	}

	.mobile-header {
		z-index: 5;
		position: relative;
		background: #ffffff;
		padding: 10px 0;
		height: 96px;	
	}

	.langArea{
		font-size: 18px;
	}

	.lang-line {
		height: 18px;
	}

	.btns-area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 75px 25px;
    }
}

@media screen and (max-width: 990px) {
.list_container {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0px;
}

.news-section, .achievements-section, .school-activities-section {
	padding: 45px 20px;
}

.fourbtn-section {
	padding: 30px 0px;
}

.icon-section {
	padding: 45px 45px;
}

.fourbtn-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-area {
	padding: 0px;
	margin: 30px 0px;
	grid-template-columns: 98%;
	grid-template-rows: max-content;
	gap: 17px 46px;
}

.news-section>.news-area>.news-item:nth-child(even) {
    top: 0px;
}

.news-section>.news-area>.news-item>.thumbnail {
	width: 100%;
	height: auto;
	aspect-ratio: 474/263;
}

.news-section>.news-area>.news-item>.news-item-details-even>.title, .news-section>.news-area>.news-item>.news-item-details-odd>.title {
	font-size: 20px;
	margin: 15px 0px;
	width: 87%;
}

.news-section>.news-area>.news-item>.news-item-details-odd>.date-area, .news-section>.news-area>.news-item>.news-item-details-even>.date-area{
    width: 69px;
    height: 69px;
}

.news-section>.news-area>.news-item>.news-item-details-odd>.date-area>.day-text, .news-section>.news-area>.news-item>.news-item-details-even>.date-area>.day-text {
    font-size: 25px;
}

.news-section>.news-area>.news-item>.news-item-details-odd>.date-area>.month-text, .news-section>.news-area>.news-item>.news-item-details-even>.date-area>.month-text {
	right: 50%;
    bottom: 63%;
    transform: translate(50%, 150%);
}

.news-section>.news-area>.news-item>.news-item-details-even>.title, .news-section>.news-area>.news-item>.news-item-details-odd>.title {
	font-size: 16px;
}

.see_more_btn_news{
	margin-top: 15px;
}


.line-brown, .circle{
	display: none;
}

.bible-message-title{
    margin: 25px auto;
}

.bible-message-tagline {
    font-size: 16px;
    max-width: 300px;
}

.bible-message-quote-icon-img{
    width: 80%;
}

.footer-grid{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 0;
}

.footer-left {
    padding-left: 0;
}

.footer_schoolname{
    margin: 10px 10px 30px 0px;
    width: 100%;
    height: 1.5em;
    font-size: 18px;
}
.footer-left>.telfax{
    flex-direction: column;
}

.footer-right{
    padding-left: 0;
}

.footer-right>.btns{
    margin-bottom: 0px;
}


.section-copyright{
    height: 70px;
}

.section-copyright .footer-top{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.section-copyright .footer-top>.right{
    position: relative;
    right: 0;
    bottom: 0;
    transform: none;
    display: block;
    height: auto;
}

.section-copyright .footer-top>.right>.sitemap>a {
    font-size: 12px !important;
}

.section-copyright .footer-top>.left{
    position: relative;
    width: 100%;
    height: auto;
}

.section-copyright .footer-top>.left>.copyright-footer-text {
    font-size: 12px;
    position: relative;
    right: 0;
    bottom: 0;
    text-align: center;
    transform: none;
}

.sch-activities-icon {
	aspect-ratio: 4 / 3;
}

.marquee-content {
    animation: scroll 5s linear infinite;
}

#main_area {
    max-height: fit-content;
    margin-top: 0px;
}

.video-slider-1 {
    height: 100%;
}

.youtube-desc{
    position: relative;
    top:12%;
	display:none;
}

#item_mobile{

	border-top: 1px solid #dbdbdb;
    height: 100%;
    display: flex;
	width: 100%
}

.news mobile-only {
	display: block;
}

.news non-Mobile {
	display: none;
}

.youtube-desc-mobile {
	display: block;
}

.n_news-icon {
	width: 100%;
	height: 100%;
	top: 25px;
}

.news-info {
	font-size: 16px;
	display: inline-block;
}

.news-day {
	margin:0 10px 0 20px;
	font-size: 16px;
	display: inline-block;
	}

.news-view-label {
	display: inline-block;
	font-size: 18px;
}

.n_news_upper{
	display: grid;
	grid-template-columns: 10% 90%;
}

.n_news_lower{
	display: grid;
	grid-template-columns: 10% 30% 60%;
}

#news-content-album
{
	margin: 0px !important;
	width: 100% !important;
}

.sa_news_content-c > p > img{
	width: 96%;
	margin-bottom: 15px;
}

#container {
    margin-top: 0;
	/* margin-bottom: 200px; */
}
	.cat_1 .subPage-content, .cat_1 button.tagBtn { border-color: transparent; }
	.cat_2 .subPage-content, .cat_2 button.tagBtn { border-color: transparent; }
	.cat_3 .subPage-content, .cat_3 button.tagBtn { border-color: transparent; }
	.cat_4 .subPage-content, .cat_4 button.tagBtn { border-color: transparent; }
	.cat_5 .subPage-content, .cat_5 button.tagBtn { border-color: transparent; }
	.cat_6 .subPage-content, .cat_6 button.tagBtn { border-color: transparent; }
	.cat_6 .subPage-content, .cat_7 button.tagBtn { border-color: transparent; }

	.sub{
		position: relative;
	}
	

	.subsub{
		padding: 10px 0 10px 130px !important;
	}

	.buttons-area{
		display: flex;
		padding: 8px;
		margin: 0 auto;
	}

	.last-contain-btns1 {
		background-color: transparent;
		height: 100%;
		padding: 0% 0% 1% 0%;
		margin: 0 0 0 auto;
		display: grid;
		grid-template-rows: 33.3% 33.3% 33.3%;
		grid-template-columns: max-content max-content max-content;
	}

	.last-contain-btns2 {
		background-color: transparent;
		height: 100%;
		padding: 0% 0% 1% 0%;
		display: grid;
		grid-template-rows: 50% 50%;
		grid-template-columns: max-content max-content max-content;
		margin: 0 auto 0 0;
	}

	.last-contain-outranet-login{
		grid-row: 2;
		position: relative;

	}

	.login-form{
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	.last-contain-outranet-content {
		grid-template-rows: 50% auto;
	}

	.last-contain {
		grid-template-rows: 50% 50%;
		grid-template-columns: none;
		display: grid;
		height: 100%;
		width: 100%;
	}
	.last-contain-outranet-img {
		width: 140px;
    	bottom: 0;
	}

	.outranet-login-input-container {
		width: 40%;
		margin: 4px auto;
		height: 32px;
	}

	.outranet-login-button-container{   
		width: 40%;
		margin: 34px auto;
		height: 32px;
	}

	.outranet-login-icon {
		position: relative;
		left: 8px;
		top: 30px;
	}

	input {
		border: 3px solid #e5e5e5;
		padding: 2px 10px;
		font-size: 19px;
		border-radius: 0;
		color: #404040;
		margin: 8px 0px;
		display: block;
		outline: none;
		width: 100%;
		height: 100%;
	}

	.folder {
		margin:0;
		box-shadow: 0px 0px 3px #C3C3C3;
	}
	
	.folder_grid_news{
		/* grid-template-rows: 50% 50%;
		grid-template-columns: 49% 49%;
		display: grid;
		grid-column-gap: 8px;
		grid-row-gap: 8px; */
		width: 100%;
		overflow: hidden;
	}

	.subPage-breadcrumb {
		padding: 0px !important;
		margin: 20px 20px 30px 20px;
		background-color: transparent;
	}
.topbg{

	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translate(0, -10%);
	object-fit: cover;
	object-position: 66%;
}


.main-contain{
	width:100%;
	height:95%;
	margin: 140px 0;
}

.main-bg{
	object-fit: cover;
    object-position: 76%;
    height: 100%;
    /* bottom: 0; */
	margin-bottom: 150%;
	position: absolute;
}

.main-bg-mobile{
	/* background: url(../images/new/bg.png) repeat; */
    width: 100%;
    /* background-size: 117% 100%; */
	overflow: hidden;
	background-size:cover;
	background-position:center;
	position:relative;
}

.main-contain-inner{
	text-align: -webkit-center;
	height: 100%;
	margin:58px 0;
	display:block;
}
.main-contain-inner-item{
	margin-top:48px;
	height: 80%;
	display:block;

    position: relative;
}

.main-contain-inner-item-b{
    margin-top: 30px;
    height: 92%;
    grid-template-columns: 45% 55%;
    display: grid;
    position: relative;
}

.main-contain-inner-item-bg{
	background-color: #3AD36E;
	margin: 60px 0;
}

.main-contain-color-bg{
	width: 100%;
    height: 400px;
    position: relative;
    bottom: 0;
    top: 0;
    margin-top: auto;
    margin-bottom: auto;
    background: #3AD36E;
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);


}

.main-contain-frame-a{
	background: url(../images/new/frame_a.png);
	height: 23%;
    background-size: 100% 100%;
    width: 85%;
    margin: 20px 0 1px 0;
	position: initial;
}

.main-contain-frame-b{
	height: 21%;
    background-size: 100% 100%;
    width: 85%;
    margin: 20px 0 1px 0;
    position: relative;
	
}

.frame_a_more{
	position: absolute;
    background-color: #2E9380;
    border-radius: 8px;
    box-shadow: 2px 2px 2px -1.5px rgb(0 0 0 / 20%);
    padding: 18px 26px;
    bottom: -24px;
    border: 0;
    margin: 0 auto;
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
}
.main-contain-frame-a-mob{
	background: url(../images/new/frame_a.png);
	height: 120%;
    background-size: 100% 100%;
    width: 80%;
    position: relative;
    margin: 0 auto 0 auto;
}

.main-contain-frame-a-mob:after {
	content: "";
	display: block;
	padding-bottom: 100%;
  }

.main-contain-frame-a-img-mob {
	width: 85%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 90%;
    top: 0;
    bottom: 0;

  }
  
  .main-contain-frame-a-img-mob:after {
	content: "";
	display: block;
	padding-bottom: 100%;
  }

  .main-contain-frame-a-mobile{
	  position: relative;
	  margin: 20px 0;
  }

.main-contain-frame-a-img-mobile{    
	width: 70%;
    border-radius: 50%;
    position: relative;
	aspect-ratio: 1/1;
    object-fit: cover;
    object-position: 0%;
}

.main-contain-frame-a2-img-mobile{
    width: 81%;
    position: absolute;
    aspect-ratio: 100/95;
    transform: translate(-7%,-4%);
}

.main-contain-frame-a-img:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.main-contain-frame-b-mobile{
	position: relative;
	top: 40px;
	
	margin: 20px 0;
}

.main-contain-frame-b-img-mobile{    
    width: 73%;
    border-radius: 50%;
    position: relative;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: 0%;
}

.main-contain-frame-b2-img-mobile{
    width: 81%;
    position: absolute;
    aspect-ratio: 100/100;
    transform: translate(-95%,-4%);
}

.frame_b_more{
	position: absolute;
	background-color: #2E9380;
	border-radius: 8px;
	box-shadow: 2px 2px 2px -1.5px rgb(0 0 0 / 20%);
	padding: 14px 26px;
    bottom: 0px;
    border: 0;
    left: 20%;
}

.main-contain-frame-b-frameimg{
	width: 93%;
    height: 106%;
    border-radius: 50%;
    position: absolute;
    bottom: -7%;
    left: 15px;
    object-position: 50%;

}


.subPage-main .left{
	display:none;
}

.slideshow-container{
	
    max-width: 320px;
    position: absolute;
    margin: auto;
    width: 60%;
    height: 72%;
    left: 0;
    right: 0;
    top: 10%;
    bottom: 0;

}

.news-bg{
	width: 100%;
	height: 300px;
	position: absolute;
	object-fit: cover;
}

	.detail-block-update-news{
		grid-column: 1/3;
	}

.detail-block-section-animation {
	animation-name: down-to-up-animation;
	animation-duration: 0s;
	animation-fill-mode: forwards;
}

	.sub-header-div-block {
	  text-align: center;
	  margin-top: 5px;
	  margin-bottom: 5px;
		margin-right: 10px;
		float: right;
		width: 70%;
	}

	
	.slm-btn{
		padding: 15px;
		font-size: 16px;
		color: white;
		background: #07224F;
		margin: 15px 0px;
		border-radius: 35px;
		text-align: center;
		font-weight: bold !important;
	}

	.slm-btn a{
		color: white;
	}

	.sliding-menu .topbar-search {
		position: relative;
		margin: 5px 48px;
	}

	.sliding-menu .topbar-search .search-form .search-field {
		height: 45px;
		font-size: 16px;
	}

	.sliding-menu .topbar-search .search-form.active .search-field {
		width: 280px;
		opacity: 1;
	}

	.sliding-menu .topbar-search .fa.toggle-search {
		height: 30px;
		width: 30px;
		top: 9px;
		text-align: center;
		line-height: 22px;
		right: 8px;
		font-size: 30px;
		position: absolute;
		color: #07224F;
		cursor: pointer;
	}

	.sliding-menu .topbar-search .fa-search:before {
		content: "\f002";
		color: #07224F;
	}

	.no-scroll {
		overflow: hidden; /* Prevents scrolling */
	}

	.subpageBanner {
        height: 335px !important;
        aspect-ratio: initial;
    }

	.photo_display_area .contentNameSubPageSec {
        bottom: 15px;
		font-size: 35px;
    }

	.m_menu.hide{
		transform: translateX(50vw);
		-webkit-transform: translateX(50vw);
	}

	.m_menu ul {
		margin-top: 50px;
		list-style: none;
		margin-left: -60px;
	}
	.m_menu ul>ul{
		/*margin: 0px;*/
		margin-top: -1px;
		font-weight: 100;
		background: #07214f  !important;
	}
	.m_menu ul>ul>li{
		color: #000;
		padding: 10px 0;
		padding-left: 100px;
		font-weight: normal;
		font-size: 20px;
		margin-top: 2px 0;
	}
	.m_menu ul>ul>li:hover{
		/* background: red; */
	}

	.m_menu ul>ul>li>a{
		white-space: nowrap;
		display:flex;
		color:white;
	}

	.nav-item {
    display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
	}

	.admission-menu {
		position: relative;
		padding-top: 10px;
	}

	.admission-menu:before {
		content: "";
		background-color: white;
		position: absolute;
		display: block;
		width: 80%;
		height: 2px;
		position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
	}

		
	.display-only-padding{
		padding: 10px 0px 10px 50px !important;
	}

	.m_menu .catBrowser-item {
		width: 100%;
		/* background: #07224F; */
	}
	.m_menu .catBrowser-item div {
		width: 100%;
	}

	.m_menu .catBrowser-item > div {
		display: flex;
		display: -ms-flexbox;
		display: -webkit-flex;
	}

	.m_menu .catBrowser-item div > span {
		/* font-size: 4vw;
		line-height: 2.5; */
		font-size: 20px;
		margin-left: 40px;
		/* margin-left: 5vw; */
		font-weight: normal;
	}

	.slogan{
		padding-top: 4.4vw;
		padding-bottom: 1.4vw;
		font-size: 3.5vw;
		background-size: 100% 108%;
	}

	.catBrowser-label:before{
		height: auto;
		width: 20px;
		margin-right: 10px;
	}

	.m_menu .catBrowser-item{
		-webkit-transform: translateX(0);
		transform: translateX(0);
		margin-top: -1px;
	}

	.m_menu .catBrowser-item:hover{
		/* background: red; */
	}

	.m_menu.hide .catBrowser-item {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	.school-news-right{
		padding: 20px 20px 20px 20px;
	}

	.photo-container-section{
		height:420px;
	}

	.catBrowser-item span {
		font-size: 16px;
		display: inline-flex;
		display: -ms-inline-flexbox;
		display: -webkit-inline-flex;
		font-weight: 600;
	}

	.header {
		/* background: url("../images/heading_bk_m.png") no-repeat;
		background-size: 100% 100%;
		background-position: right bottom; */
		position: relative;
	}

	.header img {
		width: 80vw;
	}

	.catBrowser-items .btnGp{
		z-index: 300;
		position: absolute;
		/* background-color: #0180d3; */
		box-shadow: 1px 5px 4px RGBA(42, 42, 42, 0.56);
		width: 350px;
	}

	#main{
		min-width: 100%;
		padding: 0px;
	}

	/* #container .home_page_section:nth-child(2){
		max-height: 696px;
	  height: 200px;
	  min-height: 308px;
	  width: 100%;
	  top: 60px;
	} */

	.empty-section {
		height: 368px;
	}
	.tabContentContainer{
		/* overflow-x: scroll; */
	}
	
	.mobile-header-image {
		width: 40%;
		min-width: 250px;
		max-width: 300px;
		height: auto;
		display:block;
	}
	

	
.popup-header {
	background: #1F9860;
	z-index: 3;
	width: 100%;
	top:65px;
}

	.popup-div {
		width: 90%;
		margin: 0 auto 0 20px;
		display: flex;
	}

	.popup-text {
		width: 80%;
		text-align: left;
		color: white;
		line-height: 20px;
		height: 20px;
		font-size: 16px;
	}

	.popup-read-more-button {
		font-size: 14px;
		margin-left: 10px;
		margin-bottom: 10px;
		margin-right: 28px;
	}

	.popup-close-button {
		width: 20px;
		display: inline-block;
		float: right;
		margin-top: 10px;
		margin-right: 15px;
	}

	.sect_1_2 {
		width: 100%;
		float: none;
	}

	.subPage-main{
		display:block !important;
		padding: 0px;
	}

	.subPage-title-slogan {
		color: #FFF;
		font-size: 3.5vw;
		margin: 1.3vw 4.2vw;
		max-width: 100%;
	}
	.subPage-main .breadc{
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 13px;
	}

	.subPage-title:before {
		display: none;
	}
/* 
	.cat_1 .subPage-Sect-title, .cat_1 .subPage-title   { background-color: #B70202;}
	.cat_2 .subPage-Sect-title, .cat_2 .subPage-title   { background-color: #ffa300;}
	.cat_3 .subPage-Sect-title, .cat_3 .subPage-title   { background-color: #a2c31e;}
	.cat_4 .subPage-Sect-title, .cat_4 .subPage-title   { background-color: #11c2e2;}
	.cat_5 .subPage-Sect-title, .cat_5 .subPage-title   { background-color: #eb1c79;}
	.cat_6 .subPage-Sect-title, .cat_6 .subPage-title   { background-color: #ea6a00;} */

	#container .subPage-Sect-title,
	#container .subPage-title {
		width: 100%;
		padding: 10px 30px;
	}

	#container .subPage-Sect-title {
		padding: 12px 15px;
		background-color: #337ab7;
	}

	#container .subPage-title {
		z-index: 0;
		padding-left: unset;
	}

	.subPage-Sect-title h1{
		font-size: 22px;
		color: white;
		margin: unset;	
	} 
	.subPage-title h1 {
		font-size: 20px;
		margin: unset;
	}

	.subPage-right-panel{
		padding: 0px;
		margin-right: unset;
		margin: 15px;
	}

	.subPage-content {
		padding: 11px 4px;
		padding-left: 0;
		padding-right: 40px;
		line-height: 120%;
		width: 100%;
	}
	
	.tabContentContainer{
		color: #000;
		font-size: 18px;
	}

	.grouping {
		width:50%;
		margin:5px;
	}

	.grouping select {
		width:100%;
		margin:5px;
	}

	#container .home_page_section:nth-child(1){
		/* height: 63vw;
		overflow: hidden; */
	}
	.tabContent table td{
		padding: 5px 5px;
	}

	.tabContent span{
		/* font-size: unset !important; */
	}

	.tabContent auto{
		width: 200px;
		height:40px;
	}

	.tabContent img {
		max-width: 100%;
		max-height: 100%;
	}

	.home_page_list {
		width: 100%;
	}

	.home_page_section .sub_sect:first-child{
		padding-right: 0px;
	}

	.home_page_section .sub_sect:last-child{
		padding-left: 0px;
		margin-top: 7px;
	}

	.home_page_section .sect_1_2.sub_sect{
		margin-top: 0px;
	}

	
	/* .news-section {
		padding: 30px;
		display: block;
		height: auto;
	} */

	.news_word{
		font-size: 32px;
	}	

	.news_more_word{
		margin:20px;
	}

	.word_container {
		height: 70px;	
	}

	.wordings {
		font-size: 16px;
		padding: 24px;
	}

	.news_swiper_group {
		display: flex;
		flex-wrap: wrap;
	}

	.icon-image {
		width: 100%;
		padding-right: 8px;
		padding-left: 8px;
		padding-bottom: 10px;
		padding-top: 10px;
	}

    .icon-area .swiper-button-next {
		display: block;
	}

	.icon-area .swiper-button-prev {
		display: block;
	}

	.swiper-button-next {
		display: none;
	}

	.swiper-button-prev {
		display: none;
	}

	.news_right{
		width: 100%;
		margin-top: 30px;
	}

	.apply_area_mobile {
		position: relative;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		overflow: hidden;
		display: block;
	}

	.apply_area_mobile img{
		width: 100%;
		height: 200px;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.apply_area_mobile:hover img {
		transform: scale(1.1); /* Zoom effect */
	}

	.apply_area_mobile_content{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
    	text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.apply_area_mobile_content_bg-overlay{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.7;
		z-index: 1;
	}

	.apply_area_mobile-desc{
		font-size: 26px;
		font-weight:700;
    	color: white;
		margin-bottom: 0;
		position: relative; /* Ensure these elements are on top of the background */
		z-index: 2; /* Bring the child elements in front */
	}

	.apply_area_word{
		position: relative;
		top: -80px;
	}
	.details-section{
		padding: 55px 20px 55px 20px;
        display: block;
	}

	.useful_links_section{
		padding: 20px 20px 35px 20px;
        display: block;
	}

	.userful_links_header{
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.useful_links_row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		max-width: none;
	}

	.useful_links_item {
		height: 100%;
		min-height: 350px;
	}

	.useful_links_item_details{
		padding: 20px 14px;
	}

	.photos-only-section {
		margin-top: 30px !important;
		margin-bottom: 30px !important;
	}

	.down-detail-block div {
		height: -webkit-fill-available;
	}

	.footer_schoolname {
		line-height: 1.5em;
		height: 3em;
		width: 100%;
	}

	/* .empty-section {
    height: 385px;
    width: 100%;
	} */

	.first-message {
		font-size: 16px;
		position: relative;
		width: 320px;
		margin: 0 auto;
	}

	.first-message:before {
		content: "";
    background-color: #6dadb7;
    position: absolute;
    width: 75px;
    height: 2px;
    left: -10px;
    top: 8px;
    display: block;
	}

	.first-message:after {
		content: "";
    background-color: #6dadb7;
    position: absolute;
    width: 75px;
    height: 2px;
    right: -11px;
    bottom: 10px;
    display: block;
	}

	.second-message {
		font-size: 18px;
		width: 320px;
		margin: 0 auto;
		position: relative;
		padding-bottom: 10px;
	}

	.second-message:before {
		transform: rotate(-90deg);
    content: "";
    background-color: #6dadb7;
    position: absolute;
	width: 70px;
    height: 2px;
    left: -45px;
    top: 20px;
    display: block;
	}

	.second-message:after {
		transform: rotate(-90deg);
    content: "";
    background-color: #6dadb7;
    position: absolute;
	width: 70px;
    height: 2px;
    right: -45px;
    bottom: 36px;
    display: block;
	}

	.end-message-border {
		position: relative;
		width: 320px;
		margin: 0 auto;
	}

	.end-message-border:after {
		content: "";
		background-color: #6dadb7;
		position: absolute;
		width: 340px;
		height: 2px;
		right: -10px;
		bottom: 2px;
		display: block;
	}

	.external_link {
			width: 100%;
			display: inline-block;
			padding: 5px 5px;
	}

	.external_link .is-link {
		width: 33.3%;
	}

	.fb_link{
		width: 100%;
		display: inline-block;
		text-align: left;
		padding: 0px 10px;
		margin-top: 20px;
	}

	.fb_iframe_widget {
		float: none;
		float: initial;
		padding: 0 auto;
	}

	.footer {
		height: auto;
		/* position: absolute;
        bottom: 0px;
        width: 100%; */
	}

	.footer_img {
		width: 100%;
		height: 280px;
		position: absolute;
		object-fit: cover;
	}

	.footer_schoolname_chi{
		display: block;
		margin: 20px 0px;
	}

	.footer_schoolname_chi_mobile{
		display: none;
	}

	.footer .content > div.copyright{
		white-space: normal;
	}

	.footer .footer2 .copyright {
		word-break: keep-all;
	}

	.subPage-content h2 {
		font-size: 6vw;
		margin-bottom: 2vw;
	}
	.selectForm_btn, .selectClass_btn {
		font-size: 27px;
		max-width: 100%;
		max-height: 100%;
		padding: 5vw 0px;
	}

	.selectForm_btn {
		width: 24.8vw;
	}

	.selectClass_btn {
		width: 18.5vw;
	}

	.selectSchDay_btn {
		width: 82vw;
		padding: 3vw;
		max-width: 100%;
		max-height: 100%;
		margin: 1.7vw 0px;
		font-size: 5vw;
	}

	.hw_detail img{
		width: 100%;
	}

	.contact_us {
		width: 100%;
	}

	.subPage-content input{
		margin-bottom: 5vw;
	}

	.submit_btn{
		height: 10vw;
		padding: 0px 27px;
		font-size: 5vw;
	}

	.detail-block-section {
    padding-left: 0;
	padding-right: 0;
	margin-top: 0;
	opacity: 1;
	}

	.information-block {
		width: 31%;
		display: inline-block;
		position: relative;
	}

	.mobile-display-grid{
		display: grid;
		grid-template-columns: 50% 50%;
		margin-top:	20px;
	}

	.mobile-update-n-news{
		grid-column: 1 / 3;
		height: 25%;
	}

	.mobile-admission{
		grid-column: 1 / 3;
	}

	.mobile-admission .down-detail-block{
		height: auto;
	}

	.mobile-intro{
		grid-column: 1 / 3;
	}

	.news-updates-title{
		padding-left: 15px
	}

	.mobile-update-n-news .heading_event_photo .news-read-more-button{
		margin-left: auto;
		margin-right: auto;
		position: relative;
		left: 68px;
		/* float: right; */
		padding: 0.375rem 1.75rem;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.red-hr{
		border: 3px solid #dc3545;
		margin: 0 10px;
	}
	.school-information-first-row {
		text-align: center;
		margin-bottom: 5px;
	}

	.school-information-second-row {
		text-align: center;
		margin-bottom: 5px;
	}

	.school-information-third-row {
		text-align: center;
		margin-bottom: 5px;
	}

	.down-detail-block {
		margin: 10px 0;
		height: auto;
	}

	.background-detail-block {
    background: #07224F;
    width: 100%;
    height: 35px;
    line-height: 35px;
    color: white;
    text-align: center;
    font-size: 12px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.background-detail-block-admission-text {
		background: #07224F;
		width: 100%;
		height: 50px;
		padding: 10px 0;
		text-align: center;
		font-size: 20px;
		display: block;
		position: relative;
		top: 5px;
		color: white;
	}

	.background-detail-block-admission-image{
		height: auto;
	}

	.background-detail-block-intro{
			   height: 150px;
			   line-height: 40px;
			   font-size: 22px;
			   top: -2%;
	}

	.background-detail-block-events{
		height: 205px;
		font-size: 18px;
		line-height: 40px;
		padding: 56px 0;
	}

	.background-detail-block-achievements{
		height: 205px;
		font-size: 18px;
		line-height: 40px;
		padding: 56px 0;
	}


	.background-detail-block-publication{
		height: 205px;
		font-size: 18px;
		line-height: 25px;
		padding: 56px 0;
	}

	.background-detail-block-album{
		height: 205px;
		font-size: 18px;
		line-height: 40px;
		padding: 56px 0;
	}


	.intro-read-more-button {
		padding: 0.375rem 3rem;
		font-size: 18px;
		margin-top:15px;
	}

	.information-detail-block {
		background: #059C57;
    opacity: 0.9;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    color: white;
    text-align: center;
    font-size: 16px;
	}

	.students-work-detail-block {
		background: #EF7819;
		opacity: 0.9;
		width: 100%;
		height: 50%;
		position: absolute;
		bottom: 0;
		color: white;
		text-align: center;
		font-size: 16px;
	}

	.block-text-margin {
		margin-top: 25%;
	}

	.news_block_container{
		max-width:320px;
		position:absolute;
		margin:auto;
		width:60%;
		height:60%;
	}

	.background_news_block_album {
		height:inherit;
	}


	.news-section-mobile {
		padding: 20px 20px 20px 20px;
		display: block;
		/* height: 1080px; */
	}
	

	.folder {
		width: 100%;
		height: 340px;
	}

	.folder .album_thumbnail::before {
		font-size: 4.5vw;
		right: 1.4vw;
		top: 0.5vw;
	}
	.staffGroup .album_thumbnail:before {
		top: initial;
	}
	.folder .album_thumbnail {
		margin-bottom: 1.8vw;
	}
	.folder .album_title p {
		font-size: 14px;
	}
	
	.news-section .album_title {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* height: 100%; */
		overflow: hidden;
		text-align: left;
	}
	.swiper-slide {
		/* box-shadow: 1px 2px 5px #00000029; */
	}

	.swiper-container-2 {
		width: 100%; /* Ensure it takes full width */
		padding: 10px 0; /* Add some padding */
		height: auto; /* Allows height to adjust based on content */
	}

	.news-section-mobile .folder{
		background: #FFFFFF 0% 0% no-repeat padding-box;
		transition: 0.3s;
		opacity: 1;
		height: auto;
		width: 100% !important;
	}

	.news-section-mobile .album_thumbnail {
		position: relative;
		width: 100%;
		padding-top: 65.25%;
		margin-bottom: 0px;
    	display: block;
		overflow: hidden;
	}

	.news-section-mobile .album_thumbnail img {
		/* max-height: 100%; */
		/* max-width: 100%; */
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		height: 100%;
		object-fit: cover;
		transform: translate(-50%, -50%);
    	transition: transform 1s ease;
	}

	.news-section-mobile .folder:hover .album_thumbnail img{
		transform: scale(1.1) translate(-50%, -50%); /* Zoom effect */
	}

	.news-section-mobile .album_title {
		display: flex;        
		flex-direction: column;
        justify-content: space-between;
        padding: 9px 9px;
		height: 115px;
    }

	.news-section-mobile .album_title .news_title{
		letter-spacing: 0px;
		color: #000000;
		font-size: 14px;
		font-weight: 700;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-align: center !important;
		overflow: hidden;
	}

	.news-section-mobile .album_title .news_date{
		display: flex;
		text-align: center !important;
		color: #000000;
		font-size: 12px;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: -4px;
	}

	.news_date_clock{
		margin-right: 5px;
	}

	.news_date_clock img{
		width: 12px;
	}

	.news_date_text{
		margin-top: 3px;
	}

	.staff_title {
		padding: 5px 1.2vw;
	}
	.folder .staff_title p {
		font-size: 2.7vw;
	}
	.photoGroup .item{
		width: 46.3%;
		max-width: 100%;
		max-width: initial;
		height: 30vw;
		margin:4px;
	}
	.width_33_100,.width_66_100{
		width: 100% !important;
	}

	.width_25_50 {
		width: 49% !important;
	}

	.width_33_33 {
		width: 32% !important;
	}

	.width_33_50 {
		width: 49% !important;
	}

	.width_33_50 img{
		width: 100% !important;
		max-height: 100%;
		max-height: initial !important;
	}

	.width_50_50 img{
		width: 100% !important;
		max-height: 100%;
		max-height: initial !important;
	}

	.yrrecordphoto {
		margin: -20px -6vw;
	}

	.tabMenu {
		height:fit-content;
	}

	.tabMenuContainer {
		padding-bottom: 30px; 
		overflow-x: auto; 
	}

	.tagBtnGroup .hscroll_btn,
	.tabMenu .hscroll_btn{
		top: 0.8vw;
		height: 78%;
		width: 7vw;
		position: absolute;
		cursor: pointer;
		background-color: RGBA(0, 0, 0, 0);
		opacity: 0;
		margin: 0px 11px;
	}

	.tagBtnGroup .hscroll_btn.scrollL,
	.tabMenu .hscroll_btn.scrollL{
		left: -6px;
		background: url("../images/arrow_left.gif") no-repeat;
		background-size: 50% 90%;
		background-position: center left;
	}

	.tagBtnGroup .hscroll_btn.scrollR,
	.tabMenu .hscroll_btn.scrollR{
		right: -6px;
		background: url("../images/arrow_right.gif") no-repeat;
		background-size: 50% 90%;
		background-position: center right;
	}

	.tagBtnGroup .hscroll_btn:hover,
	.tabMenu .hscroll_btn:hover {
		opacity: 0.5;
	}

	.tagBtnGroup .hscroll_btn,
	.tabMenu .hscroll_btn{
		display: block;
	}

	.yrrecordphoto .tagBtnGroup,
	.tagBtnGroup {
    overflow-x: auto;
    overflow-y: hidden;
    height: 13vw;
    position: relative;
  }

	.tagBtnContainer {
			overflow-x: auto;
			overflow-y: hidden;
			padding-bottom: 30px;
			white-space: nowrap;
	}

	button.tagBtn,
	.tabBtn {
		margin: 3px 3px;
		padding: 5px 17px;
		cursor: pointer;
		white-space: nowrap;
		color: white;
		font-weight: 800;
		font-size: 18px;
		display: inline-block;
		line-height: initial;
		background-color: #07224F;
		height: 35px;
	}

	button.tagBtn {
	 margin-top: 1.6vw;
	}

	.popup-inner .playSlideShowBtn{
		height: 7vw;
		width: 7vw;
	}

	.yrrecordphoto .folder {
		height: 58vw;
	}

	#links_an_calendar{
		width: 100%;
	}

	#news_list{
		width: 100%;
		margin-bottom: 15px;
		margin-top: 150px;
	}

	#video{
		width: 100%;
	}

	.students_section {
		height: 100%;
		margin-bottom: -10%;
	}

	.students_bar {
		display: block;
		text-align: center;
		margin-top: 60px;
	}

	#students .icon {
		width: 40vw;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#students .students_campus_tv {
		width: 40vw;
		height: 30vw;
		/* background: #3FC6BE; */
		display: inline-block;
		position: relative;
		margin-right: 1vw;
	}

	#students .students_campus_album {
		width: 40vw;
		height: 30vw;
		/* background: #F6BB6D; */
		display: inline-block;
		position: relative;
		margin-right: 1vw;
	}

	#students .students_scouts {
		width: 40vw;
		height: 30vw;
		/* background: #FB807C; */
		display: inline-block;
		position: relative;
		margin-right: 1vw;
	}

	#students .students_chinese_history {
		width: 40vw;
		height: 30vw;
		/* background: #907CA1; */
		display: inline-block;
		position: relative;
		margin-right: 1vw;
	}

	#students .students_stem {
		width: 40vw;
		height: 30vw;
		/* background: #3C6787; */
		display: inline-block;
		position: relative;
		margin-right: 1vw;
	}

	#students .students_reading {
		width: 40vw;
		height: 30vw;
		/* background: #3C6787; */
		display: inline-block;
		position: relative;
	}

	#students .students_section_title {
		width: 100%;
		height: 30%;
		/* background: #44A49D; */
		position: absolute;
		bottom: -10px;
		text-align: center;
		color: white;
		font-weight: 700;
		line-height: 280%;
		word-wrap: break-word;
		font-size: 15px;
	}

	.classIcon {
		height: 4.5vw;
		width: 10vw;
		vertical-align: -2px;
	}

	.hw_detail p {
		font-size: 3.5vw;
		margin-bottom: 5vw;
  	}
  	.selectClass_btn:hover{
		background-color: #39b54a;
	}

	.temporary-hide {
		display: none;
	}

	.event_photo_slider {
		overflow-x: unset;
	}

	.n_news_upper {
		grid-template-columns: max-content auto;
	}

	.n_news_lower {
		grid-template-columns: auto max-content;
	}

	.news-updates-section {
		padding-left: 5%;
	  padding-right: 5%;
	}

	.news-title-text {
		height: 60px;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	font-size: 14px;
	}

	.news-read-more-button {
		margin-top: 10px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
    	float: inherit;
	}

	.title2{
		width: 80%;
		position: relative;
		top: 60px;
		z-index: 1;
	}

	.topmenu-img-mobile{
		
		width: 20%;
		margin: auto 0 auto 24px;
		padding: 4px;
	}

	.event_photo_container ul {
		margin: 0px;
		overflow-x: hidden;	
		transform: translateY(0%);
	}

	.event_photo_container li {
	/* width: 50%; */
	display: inline-block;
	padding: 2px 2px;
    vertical-align: top;
    white-space: normal;
    text-align: left;
    height: 100%;
    margin-right: 4px;
	}

	#event_photo .hscroll_btn.scrollL.mobile-only{
		left: -6px;
	}

	#event_photo .hscroll_btn.scrollL.mobile-only .arrow-icon{
		margin-top: 20px;
	}

	#event_photo .hscroll_btn.scrollR.mobile-only{
		right: -13px;
	}

	#event_photo .hscroll_btn.scrollR.mobile-only .arrow-icon{
		margin-top: 20px;
	}

	.date-text {
		font-size: 12px;
	}

	.arrow-icon {
		/*margin-bottom: -4px;*/
		height: 33%;
		margin: 16px;
	}

	.news1 {
		padding: 32px 2px;
	}

	.footer .footer1 {
		/* width: 100%;
		height: 17vh;
		background: #C8DAC6;
		color: black;
		text-align: center;
		position: relative;
		font-size: 13px; */
		text-align: left;
		font-size: 14px;
		grid-template-rows: 20% 20% 60%;
		grid-template-columns: auto;
	}


	.footer .footer1 .footer1_info {
		width: 100%;
		line-height: 40px;
		padding-top: 20px;
		margin-left:0;
		padding-left:30px;
	}

	.school_name {
		font-size: 16px;
		margin-bottom: 15px;
		display: flex;
	}

	.footer .footer1 .school_english_name{
		display: inherit;
		font-size: 16px;
	}

	.footer .footer1 .school_chinese_name{
		display:inherit;
		padding-left: 20px;
		font-size: 20px;
	}

	.school_tel {
		display: block !important;
		margin-right: 0 !important;
	}

	.school_fax {
		display: block !important;
		margin-right: 0 !important;
	}
	.school_tel img{
		width:18px;
	}

	.school_fax img{
		width:18px;
	} 

	.school_chinese_address img{
		width:18px;
	}

	.footer1-display-inline-block {
		display: block;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.mobile-footer-text {
		display: block;
		margin-top: 10px;
	}


	.footer .footer1 .footer-map{
		right:0px;
		/* padding-left: 10%; */
		position: initial;
		margin: 10px;
	}

	.footer .footer1 .footer-map iframe{
		width: 100%;
		height: 183px;
	}

	.footer-useful-link{
		top: 140px;
		padding-left: 30px;
		left:0;
	}

	.footer-useful-link .title{
		padding-left:0;
		font-size: 20px;

	}

	.footer-useful-link .content{
		grid-template-columns: 150px 150px;
	}

	.footer-useful-link .content .img{
		width: 150px;
	}

	.footer-eclass{
		top: 160px;
		padding-left: 30px;
		left:0;
		width: 150px;
	}

	.footer-eclass img{
		width: 150px;
	}

	.copyright-footer-line{
		top:50px;
		padding: 0 8%;
	}
	.controlBtnGtp {
		z-index: 5;
		bottom: 15px;
		padding: 0px;
		display: none;
	}

	.video-section {
		height: auto;
	}

	.news-list-div {
		/* margin-top: 27vh;  */
	}
	.banner-text-background{
		height: 60px;
	}
	
	.curr{
		/* background: #FF0000; */
	}

	.curr a{
		color: red !important;
	}


	.curr_subsub{
		background:#FFEC9B !important;
		padding-left:30px
	}

	.banner_read_more{
		display:none;
		width: fit-content;
		color: white;
		background: #1CBC3B;
		font-size: 18px;
		padding: 5px 10px;
		margin-top: 5px;
		position: absolute;
		bottom: 40px;
		right: 30px;
		white-space: nowrap;
		z-index: 4;
	}
	.contentNameTag{
		background-color: rgba(255, 255, 255, 0.8);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
		margin: auto;
		height: 15%;
		/* min-width: 96%;
		max-width: 500px;
		min-height: 20%;
		max-height: 89px; */
	}

	.contentNameTag .name-tag-contents{
		background: #6DC3C1;
		width: 22%;
		height: 100%;
		/* width: 155px;
		height: 89px; */
	}

	.name-tag-contents .name-tag-img{
		padding: 12%;
		padding-top: 7%;
		width: 100%;
		/* width: 90px;
		float: left;
		padding: 21px 15px; */
	}

	.name-tag-contents .name-tag-title{
		float: left;
		width: 55px;
		color: white;
		padding: 14px 0px;
		font-size: 20px;
		font-weight: bold;
		display: none;
	}

	.photo-container .contentName{
        bottom: 70px;
        width: 100%;
        font: normal normal bold 27px/47px "Raleway_bold" !important;
	}

	.content-name{
		text-align: center;
		height: 100%;
		color: white;
		font-weight: 700;
        width: 300px !important;
		line-height: 1.5;
	}

    .main_page_title{
        font-size: 28px;
    }

    .title_tag_line{
        font-size: 12px;
    }

	.link-div-teacher-title {
		position: absolute;
		left: 58%;
		top: 30%;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	.clickedSubMenu {
		background-color:transparent;
	}

	.clickedSubSubMenu {
		background-color:transparent;
	}

	.link-div-intranet-title {
		position: absolute;
		left: 57%;
		top: 30%;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	#news_list .list_detail{
		height: 90%;
		overflow-y: auto;
	}

	.last-contain-btns1-mobile{
		display:grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
	}

	.last-contain-btns2-mobile{
		display:grid;
		grid-template-columns: 25% 25% 25% 25%;
	}

	.last-contain-btns3-mobile{
		display:grid;
		grid-template-columns: 20% 20% 20% 20% 20%;

	}

	#container .home_page_section:nth-child(2){
		height: 300px;
	}

	.album-page-full__content p, .videos-content p{
		font-size: 16px;
	}
}
.btns-items-mobile{
	width: -webkit-fill-available;
	border-radius: 12%;
	margin: 2px;
}

@media screen and (max-width: 750px){
    .list_container {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 55px 0px;
    }

    .bible-message-container{
        flex-direction: column;
    }

    .bible-message-text-area{
        width: 100%;
    }

    .bible-message-title{
        margin: 30px auto;
    }

    .bible-message-tagline {
        font-size: 16px;
        max-width: 300px;
    }

    .bible-message-icon {
        width: 100%;
    }

    .bible-message-quote-icon-img{
        width: 80%;
    }

	.details-section_row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 12px;
        grid-row-gap: 20px;
		margin: auto;
		width: 100%;
		max-width: none;
	}

	.details_item:hover {
		transform: scale(1.03); /* Zoom effect */
	}

	.last-contain-outranet-content {
		grid-template-rows: 40% auto;
		display: grid;
		height: 320px;
	}

	.apply_area_word{
		position: relative;
		top: 0px;
	}

	.news-section-mobile .folder{
		height: auto;
	}
	
	.folder{
		height: 320px;
		width: 100%;
	}

	.news-section-mobile {
		padding: 20px 20px 20px 20px;
		display: block;
		/* height: 920px; */
	}

	.last-contain-outranet {
		
		background: url("../images/new/class_bg.png");
		background-size: 300%;
		background-position-x: 50%;
		height: 320px;
	}

	.last-contain-outranet-img {
		width: 140px;
   		bottom: -30px;
	}
	
	.sa_news_content{
		margin: 10% 2.5%;
		width:95%;
		height: 86%;
	}

	.sa_news_content-c > p > img{
		width: 94%;
		margin-bottom: 15px;
	}

	#container .home_page_section:nth-child(2){
		height: 300px;
	}
	
	.event_photo_slider{
		height: 180px;
	}

	.event_photo_container ul{
		height: 180px;
	}

	.topmenu-img-mobile {
		width: 30%;
		margin: auto 0 auto 24px;
		padding: 4px;
	}

	.non-Mobile {
		display: none;
	}
/* 
	.news-section-mobile {
		padding: 30px;
		display: block;
		height: 755px;
		width: 100%;
		position: relative;
		bottom: 0;
		top: 0;
		margin-top: auto;
		margin-bottom: auto;
	} */


	.news-day {
		font-size: 16px;
	}

	.news-view-label {
		font-size: 16px;
		
	}

	.news-info {
		font-size: 16px;
		/* word-break: keep-all; */
	}

	.tv {
		grid-template-columns: 40% 40%;
		left: 5px;
	}

	.subPage-content{
		padding-left: 0px;
		padding-right: 0px;
	}

	.word_container {
		height: 70px;
	}

	.wordings {
		font-size: 16px;
		padding: 18px;
		word-break: break-all;
	}

	.news_swiper_group {
		display: flex;
	}

	.swiper-button-next {
		display: none;
	}

	.swiper-button-prev {
		display: none;
	}

	.apply_area_word {
		line-height: 7;
	}

	.details-section {
		padding: 55px 20px 55px 20px;
        display: block;
	}

	.down-detail-block div {
		height: -webkit-fill-available;
	}

	.mobile-footer-text {
		display: block;
		margin-top: 10px;
	}


	.footer .footer1 .footer-map {
		right: 0px;
		padding-left: 10%;
	}

	.footer .footer1 .footer-map iframe {
		width: 120px;
		height: 120px;
	}

	.footer .footer1 {
		/* width: 100%;
		height: 17vh;
		background: #C8DAC6;
		color: black;
		text-align: center;
		position: relative;
		font-size: 13px; */
		text-align: left;
		font-size: 14px;
		grid-template-rows: 20% 20% 60%;
		grid-template-columns: auto;
	}

	.footer-map-link-btn {
		color: #FFF;
		background-color: #D93131;
        font-size: 14px;
        border-radius: 20px;
        padding: 5px 20px;
        margin-left: 10px;
	}

	.background-detail-block-intro {
		font-size: 18px;
		top: -2%;
	}

	.width_100_100, .width_50_100, .width_66_100, .width_33_100, .width_50_50
	, .width_33_50, .width_25_50, .width_33_33{
		width:90% !important;
	}

	iframe {
		width: 100% !important;
	}

	.btns-area>.item>a>.label p {
		font-size: 3.2vw;
	}
}

@media screen and (max-width: 560px){
	.swiper-button-prev-menu, .swiper-button-next-menu {
		width: 25px;
    	height: 25px;
	}
	.sliding-menu .topbar-search .search-form.active .search-field {
		width: 185px;
		opacity: 1;
	}
	
	.last-contain-outranet-content {
		grid-template-rows: 42% 50%;
	}
	
	.last-contain-outranet-img {
		width: 140px;
    	bottom: -20px;
	}

	.login-form{
		bottom: -20px;
	}

	/* .year_select {
		width: 150px;
	} */

	.details_item_thumbnail {
		width: 100%;
		height: 42px;
		margin-bottom: 7px;
	}

	.tabContent_title {
		font-size: 24px;
		margin-top: 0;
	}

	#container .home_page_section:nth-child(2){
	}

	.event_photo_slider{
		height: 120px;
	}

	.event_photo_container ul{
		height: 120px;
	}

	.n_news_upper {
		grid-template-columns: max-content auto;
	}

	.n_news_lower {
		grid-template-columns: auto max-content;
	}

	.outranet-login-input-container {
		width: 80%;
	}

	.outranet-login-button-container{   
		width: 80%;
	}

	.topbg{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		transform: translate(0, -10%);
		object-fit: cover;
		object-position: 66%;
	}

	.topmenu-img-mobile {
		width: 40%;
		margin: auto 0 auto 24px;
		padding: 4px;
	}

	.non-Mobile {
		display: none;
	}

	.news-section-mobile {
		padding: 20px 20px 20px 20px;
		display: block;
		/* height: 720px; */
	}

	.news-section-mobile .folder{
		height: auto;
	}

	.folder {
		width:100%;
		height: 240px;

	}

	.word_container {
		height: 50px;
	}

	.wordings {
		font-size: 14px;
		padding: 10px;
	}

	.news_swiper_group {
		display: flex;
	}

	.swiper-button-next {
		display: none;
	}

	.swiper-button-prev {
		display: none;
	}

	.details-section {
		padding: 55px 20px 55px 20px;
        display: block;
	}

	.details-section .left{
		min-height: 360px;
		grid-template-rows: 43.5% 43.5%;
		grid-template-columns: 48% 48%;
	}

	.detail-block-icon{
		top: 20%;
	}
	.apply_area_word {
		line-height: 6;
	}

	.details-desc{
		font-size: 16px;
		font-weight: 700;
	}

	.apply_area_mobile img{
		height: 120px; 
	}

	.down-detail-block div {
		height: -webkit-fill-available;
	}

	.tv_background_album_title {
		font-size: 12px;		
	}

	.mobile-footer-text {
		display: block;
		margin-top: 10px;
	}

	.footer {
		height:auto;	
	}

	.footer-map{
		position:initial;
	}

	.footer .footer1 .footer-map {
		left: 210px;
		top: 95px;
		padding-left: 0%;
	}

	.footer .footer1 .footer-map iframe {
		width: 100%;
    	height: 200px;
	}

	.footer .footer1 {
		/* width: 100%;
		height: 17vh;
		background: #C8DAC6;
		color: black;
		text-align: center;
		position: relative;
		font-size: 13px; */
		text-align: left;
		font-size: 14px;
		grid-template-rows: 20% 20% 60%;
		grid-template-columns: auto;
	}

	.background-detail-block-intro {
		font-size: 13.5px;
		top: -2%;
	}
	.swiper-special-announcement .slide-text h3{
		font-size: 20px;
	}

	.swiper-special-announcement .slide-text p{
		font-size: 14px;
	}

	.swiper-special-announcement .slide-text-inner{
		padding: 20px 12px;
	}	

	.subpageBanner {
        height: 265px !important;
        aspect-ratio: initial;
    }
}

@media screen and (max-width: 384px){
	.swiper-special-announcement .slide-text p{
		display: none;
	}	

	.school-logo{
		margin: 15px 0px;
		width: 100%;
		height: auto;
	}

	.special-school-logo{
		margin: 15px 0px;
		width: 100%;
		height: auto;
	}

	.tv_background_album_title {
		font-size: 12px;
		
	}

	.wordings {
		font-size: 12px;
		padding: 4px;
	}

	/* .year_select {
		width: 120px;
		font-size: 12px;
	} */

	.details_item_thumbnail {
		width: 100%;
		height: 30px;
		margin-bottom: 7px;
	}

	.details-desc {
		font-size: 12px;
		font-weight: 700;
	}

	.subPage-content {
		padding-left: 10px;
		padding-right: 10px;
	}
}