@media screen and (max-width: 1366px) {
	.slider-slogan .slogan_text {
		font-size: 18px;
		padding: 30px 15px 15px 15px;
		line-height: 27px;
		width: 320px;
		height: 145px;
	}

	.slider-slogan .text-huge {
		font-size: 23px !important;
		padding: 5px 0px 5px 20px !important;
	}

	.bubble .slick-list .slick-slide .icon {
		height: 70px;
		top: -40px;
	}

	.bubble .slick-list .slick-slide .icon img {
		max-height: 70px;
	}

	.bubble .slick-list .slick-slide #bubble_green .icon {
		bottom: -45px;
	}

	.bubble .slick-list .slick-slide #bubble_red .icon {
		bottom: -37px;
	}

	.bubble .slick-list .slick-slide #bubble_green .icon img,
	.bubble .slick-list .slick-slide #bubble_yellow .icon img {
		max-height: 60px;
	}

	.activities_tab ul {
		gap: 10px;
	}

	.home_zoneA {
		padding: 60px 10px;
	}

	.home_zoneA::after {
		width: 240px;
		height: 200px;
		bottom: -200px;
	}
}

@media screen and (max-width: 1200px) {
	.template-C ul {
		grid-template-columns: repeat(3, 1fr);
		gap: 2%;
	}

	.more-link a {
		padding: 10px 40px 10px 40px;
	}

	.more-link a:hover {
		padding: 10px 30px 10px 30px;
	}

	.activities_tab ul li {
		font-size: 28px;
	}

	.activities_tab ul .news_tab span {
		width: 60px;
		height: 60px;
	}

	.activities_tab ul li p {
		padding: 0px 10px 10px 70px;
	}

	.activities_tab ul li::before {
		top: -23px;
		-moz-transform: skew(0deg, -4deg);
		-webkit-transform: skew(0deg, -4deg);
		-o-transform: skew(0deg, -4deg);
		-ms-transform: skew(0deg, -4deg);
		transform: skew(0deg, -4deg);
	}

	.activities_tab ul .event_tab span {
		width: 60px;
		height: 60px;
	}

	.activities_tab ul .awards_tab span {
		width: 60px;
		height: 50px;
	}

	.useful-links ul {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.contact_area .bottom_logo img {
		max-height: 180px;
	}

	.slider-slogan {
		bottom: 0 !important
	}




}

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

	html,
	body {
		font-size: 16px;
		line-height: 28px;
	}

	.screen {
		padding: 0 15px;
	}

	#header {
		position: relative;
		min-height: 50px;
		z-index: 10;
	}

	.menu_arrow ul::before {
		display: none;
	}

	.right_top {
		margin-right: auto;
		width: auto;
		margin: 10px 0;
		order: 2;
	}

.slider-slogan .slogan_text {
    font-size: 15px;
    padding: 20px 10px 10px 10px;
    line-height: 21px;
    width: 260px;
    height: 105px;
  }

	#main-menu {
		position: fixed !important;
		top: 0;
		background: #82d9ff;
		padding: 30px 10px;
		bottom: 0;
		width: 100%;
		transition: all 0.5s ease-in-out;
		max-width: 280px;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 12;
		transform: translateX(-100%);
	}

	#menu-mask {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	.site-branding {
		min-height: auto;
		padding: 0;
		position: relative;
		margin: 60px 10px 10px 10px;
	}

	.title,
	.blocktitle,
	.sch_highlights b,
	#banner_title h1,
	.banner_title h1 {
		font-weight: 350;
		margin: 15px 0;
		font-size: 26px;
		line-height: 32px;
	}

	.sch_highlights .title::before {
		top: 23px;
	}

	.sch_highlights {
		padding: 20px 0;
	}

	.sch_highlights ul {
		padding: 15px 0;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.bg_god_msg {
		padding: 0;
	}

	.bg_god_msg .contents {
		width: calc(100% - 0px);
		margin: 30px 0%;
		padding: 15px;
	}

	ul#main-menu li a {
		color: #333;
	}

	#main-menu.open {
		transform: translateX(0);
	}

	#block_latest-news,
	#block_activity {
		padding:25px 0;
	}

	#lang {
		margin: 0;
		/* padding-bottom: 12px; */
	}

	#lang ul {
		margin: 0px 0px 0px 0;
		background: none;
	}

	#lang ul li {
		margin: 0 0;
		background: none;
	}

	#lang ul li+li {
		margin: 0 0 0 10px;
	}

	.more-link a {
		font-size: 16px;
		line-height: 24px;
		padding: 10px 40px;
	}

	.more-link a:hover {
		padding: 10px 30px;
	}

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

	.slider-slogan {
		bottom: 10%;
	}

	
	.breadcrumb__content {
		margin: 0;
	}

	.breadcrumb::after {
		display: none;
	}

	.Block_A ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 2%;
	}

	.template-A ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 2%;
	}

	.template-B ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 2%;
	}

	.template-C ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 2%;
	}

	h1 {
		font-size: 30px;
		line-height: 38px;
	}

	h2 {
		font-size: 26px;
		line-height: 34px;
	}

	h3 {
		font-size: 21px;
		line-height: 30px;
	}

	h4 {
		font-size: 21px;
		line-height: 30px;
	}

	h5 {
		font-size: 21px;
		line-height: 30px;
	}

	h6 {
		font-size: 21px;
		line-height: 30px;
	}

	#block-sidebar-nav h2 {
		padding: 15px 0;
	}

	#main_content {
		width: 100%;
	}

	#sidebar-nav {
		width: 100%;
	}

	.view-more,
	.view-more2 {
		padding: 40px 0 0 0;
	}

	.useful-links ul {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 10px;
	}

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

	footer {
		padding: 30px 0;
	}

	.list-item .content {
		flex-direction: column;
	}

	.list-item .content b {
		text-align: center;
	}

	.contact_info ul li {
		margin: 0;
	}

	.contact_info ul li+li {
		width: 100%;
	}

	.contact_info ul ul li+li {
		width: auto;
	}

	.contact_area::before {
		display: none
	}

	.Block_A ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 2%;
	}

	.slider-slogan {
		bottom: 10%;
	}


	#block-olivero-breadcrumbs {
		margin-bottom: 0;
	}

	.sitemap-item ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 15px;
	}

	.template-A ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 2%;
		display: list-item;
		padding-bottom: 50px;
	}

	.template-B ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 2%;
		display: list-item;
		padding-bottom: 50px;
	}

	.template-C ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 2%;
		display: list-item;
		padding-bottom: 50px;
	}

	.news-card a {
		overflow: hidden;
		display: block;
	}

	.region--breadcrumb {
		margin: 0;
		padding: 0;
	}

	.breadcrumb__list {
		padding: 0px;
		margin: 0;
	}

	.breadcrumb {
		margin: 0 0 0px 0;
		padding: 0px;
	}

	.category ul li a {
		padding: 5px 10px;
		font-size: 1.1em;
		margin: 0 10px;
	}

	.category {
		float: none;
		text-align: center;
	}

	.banner_title h1 {
		padding: 110px 0 20px 5%;
		margin: 0;
		z-index: 1;
	}

	.banner_title h1::before {
		left: -46%;
		width: 50%;
		height: 1px;
		bottom: 30px;
	}

	#nonbanner_title {
		background: url(../images/web/bg_news.png) no-repeat bottom center;
	}

	#nonbanner_title h1 {
		padding: 120px 0 30px 5%;
		color: var(--main-color);
		text-shadow: 0 0 0;
	}

	#nonbanner_title h1::before {
		background: var(--main2-color);
		bottom: 43px;
	}

	.sch_highlights b {
		font-size: 17px;
		line-height: 21px;
		margin: 0;
	}

	.sch_highlights ul li span,
	.sch_highlights .boxing {
		font-size: 15px;
		padding: 10px 0;
	}

	#block_latest-news::before {
		display: none;
	}

	.bg_whystcc .contents {
		width: 100%;
	}

	.bg_whystcc {
		padding: 20px 0;
	}

	ul#main-menu li a {
		border-right: none;
	}

	ul#main-menu li a::before,
	ul#main-menu li a::after {
		display: none;
	}

	.top_social {
		width: calc(100%);
	}

	.social_media {
		padding: 12px 20px;
	}

	#lang ul li a,
	#lang ul li a:hover {
		background-size: auto 22px;
	}

	.home_zoneA {
		padding: 80px 0;
	}

	.region--secondary-menu {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

#main_content {
  min-height: 300px;
}

	.region--secondary-menu #lang {
		margin: 0;
	}

	.bubble ul {
		flex-wrap: wrap;
	}

	.bubble ul li {
		width: 41%;
	}

	.latest_album .view-more {
		top: auto;
		bottom: -10px;
	}

	.slider {
		min-height: auto;
	}

	#awards_tab .slick-list .slick-slide {
		margin: 35px 15px;
	}

	.latest_album {
		border-radius: 30px;
	}

	.contact_area .screen {
		flex-wrap: wrap;
		gap: 10px;
	}

	#header .screen {
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.site-branding {
		margin: 10px 10px 10px 10px !important;
		width: 70%;
		order: 2;
	}

	.top_social {
		position: relative;
		order: 1;
	}

	#logo {
		margin: 0;
	}

	.activities_tab ul li span {
		display: none;
	}

	.activities_tab ul li p {
		padding: 0px 10px 10px 10px;
	}

	.home_zoneA::after {
		width: 160px;
	}
#socialmedia{ width:50%}
	.contact_info ul li {
		flex-wrap: wrap; width:100%
	}

	.contact_info ul li span {
		padding: 5px 10px 5px 0px;
		min-width: auto;
	}

	.home_zoneB {
		padding: 70px 0 60px 0;
	}

	.bubble .slider {
		width: 100%;
	}

	.sticky #header {
		filter: none;
	}

	ul#main-menu ul {
		box-shadow: none;
		border: none;
		background: #ffffff82;
	}

	ul#main-menu ul ul {
		background: #1397d06b;
	}

	ul#main-menu li ul li a {
		background: none;
	}

	

	#ctd-fliters {
		margin: 10px 0 10px 0;
	}

	#sidebar-nav {
		margin-top: 20px;
	}

	#main_content {
		margin-bottom: 5px;
	}

	.sidebar-nav ul {
		border-top-left-radius: 46px;
		border-top-right-radius: 46px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.awards_title b {
		flex: auto !important;
		text-align: left !important; padding: 0 !important
	}

	.awards-list li+li .awards_date::before,
	.awards-list li+li .awards_title::before,
	.awards-list li+li .awards_students::before,
	.awards-list li+li .awards::before {
		display: block;
	}

	#awards_page_title {
	align-items: center;
    justify-content: center;
	}

	.awards_date,
	.awards_title,
	.awards_students,
	.awards {
		text-align: left;
		justify-content: flex-start;
		margin: 0;
		width: 100%;
	}

	.page_banner::after {
		width: 170px;
		height: 140px;
		bottom: -140px;
	}

	.region--breadcrumb {
		/* right: 0;
		max-width: 320px; */

		left: 0;
    right: 0;
    bottom: -40px;
	}

	#block-olivero-breadcrumbs .breadcrumb__content {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	#block-olivero-breadcrumbs .breadcrumb__content::-webkit-scrollbar {
		display: none;
	}

	.contact_area .bottom_logo img {
		max-height: 110px;
	}

	.slider-slogan {
		bottom: 0;
	}
		#tab_list #awards_page_title {flex-wrap: wrap;}
		#tab_list #awards_page_title .box_day {  width: 100%;}
.award_index{ display: none !important}
		#tab_list .awards_date,	#tab_list  .awards_title,	#tab_list  .awards_students, 	#tab_list .awards { flex: auto; position: relative;padding: 0 15px 15px;}

		#tab_list #awards_page_title .awards_title b::before  { content: "參加項目";width: 100px;color: #ff8f00;
  font-size: 21px;} 
		#tab_list #awards_page_title .awards_students p ,		#tab_list #awards_page_title .awards_title b , 		#tab_list #awards_page_title .awards p{width: 100%;  display: flex;
  align-items: center;  gap: 10px;}
 		#tab_list #awards_page_title .awards_students p::before  { content: "獲獎學生";width: 100px;color: #ff8f00;
  font-size: 21px;} 
 		#tab_list #awards_page_title .awards p::before  { content: "所得獎項";width: 100px;color: #ff8f00;
  font-size: 21px;} 
	#tab_list {overflow-y: auto;  max-height: 360px;}
	.template_txt {		display: block}
	
		
	.subjectlists {width: calc(33.3% - 10px) !important;
    float: left;
    margin: 5px;;}
	
	
	
	
		.awards_date, .awards_title, .awards_students, .awards {    justify-content: flex-start; gap:0 }	
	.awards-list li:first-child .awards_date::before, .awards-list li:first-child .awards_title::before, .awards-list li:first-child .awards_students::before, .awards-list li:first-child .awards::before {text-align: left;}
	
	
	.awards-list li  .awards_date::before,.awards-list li  .awards_title::before,.awards-list li  .awards_students::before,.awards-list li  .awards::before{ content: "日期"; width: 100%;text-align: left;
  color: #0068b7;
  font-size: 18px;}

.awards-list li  .awards_title::before{ content: "參加項目"; }
.awards-list li  .awards_students::before{ content: "獲獎學生"; }
.awards-list li  .awards::before{ content: "所得獎項"; }

	
}

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

	.region--secondary-menu {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.region--secondary-menu #block-olivero-socialmediatop {
		flex: 1 1 auto;
		min-width: 0;
	}

	.region--secondary-menu #block-olivero-languageswitcher {
		flex: 0 0 auto;
	}

	.region--secondary-menu #top_contact {
		display: none;
	}

	.region--secondary-menu #lang ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.region--secondary-menu #lang ul li {
		flex: 0 0 auto;
		width: auto;
	}

	.region--secondary-menu #lang ul li a {
		white-space: nowrap;
	}

	.bubble ul li {
		width: 100%;
	}

	.home_zoneA::after {
		width: 100px;
		height: 120px;
		bottom: -120px;
	}

	.home_zoneB {
		padding: 50px 0 60px 0;
	}

	.activities_tab {
		left: 0;
		width: 100%;
		margin-bottom: 10px;
	}

	.activities_tab ul {
		gap: 10px;
		display: flex;

	}

	.activities_tab ul li {
		font-size: 16px;
		width: 100%;
		border-radius: 16px;
	}

	.activities_tab ul li p {
		padding: 10px;
		text-align: center;
	}

	.top_social {
		width: 100%
	}

	.activities_tab ul li::before {
		display: none
	}

	.useful-links ul {
		grid-template-columns: repeat(1, 1fr);
	}

	.social_media {
		float: none;        max-width: 400px;
	}



	.social_media ul {
		flex-wrap: wrap;
		gap: 8px;
		justify-content: left;
	}

	#top_contact {
		margin: 0
	}

	.social_media ul li img {
		height: 20px;
	}

	#awards_tab .slick-list .slick-slide {
		margin: 95px 15px;
	}

	.site-branding {
		margin: 90px 10px 10px 10px;
	}

	.slider-slogan .text-huge {
		padding: 5px 0px 5px 10px !important;
		font-size: 1.05em !important;
	}

	.slider-slogan .slogan_text {
		box-sizing: border-box;
		overflow: hidden;
		height: 75px;
		padding: 1.1em 0.8em 0em 0.8em;
		background-size: cover;
		font-size: 0.9em;
		line-height: 1.35em;
		width: 230px;
	}

	.slider-slogan .slogan_text p {
		margin: 0;
	}

	#bubble3::before {
		height: 55px;
		top: -35px;
	}

	#bubble4::before {
		bottom: -37px;
		height: 70px;
	}

	.activities_tab ul li {
		margin-right: auto;
		margin-bottom: 10px;
	}
	
	.bubble .slick-list .slick-slide .icon {
    height: 70px;
    top: -10px;
  }
	.bubble .slick-list .slick-slide .icon img {
    max-height: 45px
  }
		.bubble .slick-list .slick-slide #bubble_green .icon img,
	.bubble .slick-list .slick-slide #bubble_yellow .icon img {
		max-height: 45px;
	}
.bubble .slick-slide {
  padding:20px 15px;
}
.home_zoneC{ padding:25px 0}
#main_content{ padding:0}
#full_pages .node__content{ padding:0px;}
	

}