@media screen and (max-width: 1410px){	
.logo_top p {	float: none;}
}

@media screen and (max-width: 1200px){	
.template-C ul{   grid-template-columns: repeat(3, 1fr); gap: 2%; }
.power_tag ul li a::before {width: 15px;  height: 15px;}
.power_tag ul li a {padding: 25px 15px 10px 15px;}	

.power_teen{ width:40%;  min-height:450px; margin:0 5%;}
.power_school{ width:40%;  min-height:450px; margin:0 5%;}
.power_community{ width:40%;  min-height:450px; margin:0 5%;}
.power_family{ width:40%;  min-height:450px; margin:0 5%;}
.hkfws ,.jc{ margin-left: 35px}	
.registration ul {display: block;}	
.registration ul li { margin-left: 0}	
#ig, #yt {width: 50%;  margin: 0;float: left;display: flex;  align-items: center;  justify-content: center;  margin-bottom: 10px;}	
#event { clear: both}	
#tag_t .tag_index_t {font-size: 150px;}	
#tag_a .tag_index_a {	font-size: 150px;}	
#tag_g .tag_index_g {	font-size: 170px;}	
.tag_b_top {font-size: 17px;}
#tag_g .tag_index_g_tc ,#tag_a .tag_index_a_tc,#tag_t .tag_index_t_tc{	font-size: 35px;}
#small_text {font-size: 19px;line-height: 36px;margin: 0;}	
#tag_t .tag_index_t_small,#tag_a .tag_index_a_small,#tag_g .tag_index_g_small {	font-size: 17px;}	
#tag_t .tag_index_t,#tag_a .tag_index_a,#tag_g .tag_index_g{line-height: 110px;}	
}

@media screen and (max-width: 960px){
	.site-branding__logo { margin:0 0 0 10px;}
.header_logo { position:relative; }	
#block_latest-news ul { overflow-y: none; background: rgba(255,255,255,.9) }
.characters ul { display:block}
#block_latest-news ul li+li+li+li{ display:none }
.tag_index{ margin:0 0  30px 0;} 

.category ul { display: flex;  justify-content: space-between;}

.power_teen , .power_school , .power_community , .power_family{ width:100%; margin:5px 0; min-height:auto;}

#contacus::before , #contact::before { display:none}
.power_tag_m { display:block;}

.power_tag { display:none;}

.sticky .header_logo { top: auto; pointer-events:auto ; position: relative; opacity: 1;}

.plan_intro_l  ,  .plan_goals .content{ width:100% !important;}


.activities_box a {
 margin-top:5px; margin-bottom:5px;
    padding: 5px 30px;
    border-radius: 24px;
    font-size: 17px;
}


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

#contacus,#contact{ width:100%}
#banner_title{ padding:90px 0; }

    .area_stop {
            scroll-margin-top: 180px;         }
 #form , #parents_activities, #teenager_activities, #teacher_activities, #community_activities{
            scroll-margin-top: 180px; /* Add 100px spacing above the element */
        }

.right_top{ margin-right: 0; position: absolute;    top: 25px;    margin: 0;}
.screen { padding: 0 10px}

#lang ul{ margin:15px -15px 0 0; background:none}
#lang ul li{ margin: 0 0; background: none; } 
#lang ul li+li{ margin:0 0 0 10px}
	
iframe{ width:100%; min-height: 120px;}
.slider-slogan{  bottom: 10%; }
.slider-slogan .slogan_text{ font-size: 1.45em;
  padding: 0.45em;
  line-height: 1.6em;
}
.breadcrumb__content{ margin:0}
.breadcrumb::after{ display:none}

#pink_title {   padding: 0 0 0 70px;  margin: 20px 0 40px 0; }
.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%; }
	
.hkfws img {max-width: 135px !important;}	
.jc img {max-width: 230px !important;}	
	.jc { margin-left: 50px}	
.logo_top {  display: none;}	
	
#power_teen,#power_school,#power_community,#power_family {width: 50%;}	
.home_zoneB { background: url(../images/tag.png) top center no-repeat #fbf8f4; background-size: contain;background-position-y: 30px;padding: 170px 0 50px 0;}	
#power_school { top:-30px}	
	.breadcrumb{ padding:0;}
	.page_wall{ padding-bottom:0}
#block-olivero-views-block-latestnews-block { width: 100%; margin: 30px 0 }	
#block-olivero-tagblock { width: 100%;margin: 0;}	
#power_family { top:0}
#power_community { clear: both;top: 0px}
#power_school {   top: 50px; }
.tab { width: 100%}	
.tab ul li { width: 25%;float: left;text-align: right;}	
.tab .active { width: 25%; }	
.latest_album { width: 100%;padding: 0px 0 50px 0px}	
.latest_album .view-more { top:-135px;}

.latest_album::before { display: none}	
.footer_top .screen::before {	 display: none}	
.footer_menu {width: calc(100% - var(--sp2));}	
#block-olivero-contactinformation {width: 100%;}	
.contact_info span { white-space: nowrap}
.contact_info { padding: 0} 	
#block_latest-news .blocktitle::before { left: 0}	
.description_grid {width: calc(50% - 20px);}	
#main_content	.description_grid:nth-child(3n+1) { clear: both}	
	.region--footer_top__inner > *, .region--footer_bottom__inner > * { margin-block-end: 0;}
	.swiper-slide {border-radius: 0 !important;}	
.logo_bottom { display: block; float: left;       margin: 0 0 20px 0;}	
.hkfws { margin-left: 0; }	
	.cd-top { right:10px; bottom:10px;}
	.cd-apply { right:10px; bottom:70px;}
	.event_content b { padding:5px 0;}
	.home_zoneC .Block_A ul li {
    position: relative;
    width: 100%;
    border-bottom: 2px dotted #DDD;
    padding: 10px 0 20px 0;
}
#block_latest-news .view-more{ padding-top:10px;}
.footer_menu ul li+li+li+li+li+li { display:none}
	.home_zoneC .view-more a { display: inline}
	
	.contact_info span { display:block}
#block-olivero-footer { float: left}	
.footer_menu ul li .menu__link--level-1 {font-size: 20px;}	
.footer_top { padding: 30px 0;}	
.tab .title {padding: 60px 0 20px 40px;}	

.tab .title::before { left:0}

	.registration { display: none}	
.btn_m { display:block !important}	
	
.ig_logo a{mask-image: url(../images/SVG/ig.svg);  background-color: #fff;  display: block;  width: 30px;  height: 30px;  mask-repeat: no-repeat;  background-size: contain;}	
.yt_logo a{mask-image: url(../images/SVG/yt.svg);  background-color: #fff;  display: block;  width: 40px;
  height: 30px;  mask-repeat: no-repeat;  background-size: contain;}	
.ig_logo, .yt_logo {float: left;  clear: none !important;  width: auto !important;  margin: 15px !important;}
.ig_logo a, .yt_logo a{display: block;  padding: 0 !important;  }
	
#contact { margin:30px 0 50px 0;}
	.contactMe h2 { margin-bottom:10px;}
#tag_t,#tag_a,#tag_g {padding: 15px 0;margin: 0;}	
#tag_t .tag_index_t, #tag_a .tag_index_a, #tag_g .tag_index_g {    line-height: 70px;  }	
 #tag_t .tag_index_t ,#tag_a .tag_index_a{    font-size: 100px;  }	
 #tag_g .tag_index_g {    font-size: 110px;}	
#tag_t .circle img {  width: 26px;}	
 #tag_g .tag_index_g_tc, #tag_a .tag_index_a_tc, #tag_t .tag_index_t_tc {    font-size: 25px;  }
  #small_text {    font-size: 15px;	  line-height: 26px;}	
  #tag_t .tag_index_t_small, #tag_a .tag_index_a_small, #tag_g .tag_index_g_small {    font-size: 12px;  }
  .tag_b_top {    font-size: 15px;    line-height: 19px;  }	
#tag_a .people {top: -28px;}	
#tag_a .people img {  width: 20px;}	
#tag_g .heart {top: -19px;}	
#tag_g .heart img {  width: 20px;}
#block-olivero-views-block-video-block, #block-olivero-views-block-video-block-1, #block-olivero-views-block-video-block-2 { width: 100%}	
#block-olivero-video-tab { width: 100%}	
.video_tab .title::before {left: 0;}	
.family_event span,.school_event span,.community_event span {left: -50px;}
#white_one , #blue_one {display:block}	
.activities_intro_teenager p {display:block; clear: both;padding: 0 0 0 0px;}	
.youth_block .blocktitle, .teacher_block .blocktitle, .parents_block .blocktitle, .community_block .blocktitle, .notice_block .blocktitle { margin:0;}
.youth_block .Block_A, .teacher_block .Block_A, .parents_block .Block_A, .community_block .Block_A, .notice_block .Block_A { margin:0}
}
@media screen and (max-width: 576px){
	
h1{ font-size:30px; line-height:38px;}
h2{ font-size:26px; line-height:34px; margin-bottom:15px;}
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;}
.blocktitle  { text-font-size:1.4em; margin-bottom:1.2em;  line-height:1.6em;  }
#block-sidebar-nav h2{ padding:	15px 0}
	#block-olivero-video-tab .view-more { top:-15px}
#main_content{width:100%}
#sidebar-nav{width:100%}
.view-more , .view-more2{ padding:0px 0 0 0;}
.useful-links ul{
  grid-template-columns: repeat(2, 1fr); column-gap:
  gap: 10px;
} 
.home_zoneC { padding-top:50px;}
footer .copyright , footer .power{
  text-align: center;
  width: 100%; float: none;
}
.activities_tab ul li { width:24%; margin:0 0.5%; white-space:nowrap; padding:10px 0;}
	
#nonbanner_title{ padding:60px 0; }
#nonbanner_title h1{ margin:5px 0; } 
#banner_title{ padding:60px 0; }
#banner_title h1{ margin:5px 0; } 
	
.Block_A ul {
  grid-template-columns: repeat(1, 1fr);
  gap: 2%;
}	
.slider-slogan{  bottom: 10%; }
.slider-slogan .slogan_text{ font-size: 1.4em;
  padding: 0.25em;
  line-height: 1.6em;
}
#block-olivero-breadcrumbs{ margin-bottom:0}
.home_zoneC .view-more {
    position: relative;
    top:auto;
    right: auto;
    padding: 0;
    display: inline-block;margin: 50px 0 0 0;
float: right;
}
#ctd-fliters {
    text-align: center;
    width: 100%;
}

.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; }

.breadcrumb__list{ padding:0 10px;}
.category{ width:100%;}
.category ul li a {
  padding: 5px 0px; font-size:1.0em; white-space:nowrap;
  margin: 0 5px;
}
.category ul li { width:100%; text-align: center }

	.footer_menu ul li { width: 50%}
	#block-olivero-tagblock { width: 100%; margin: auto 0}	
	.tablinks span { left: 0;right: 0;  top: -70px;}		
	.tablinks { padding: 55px 1px 15px 1px;  font-size: 14px;  color: #fdfdfd;}

	.activities_block { padding:30px 0;}

.home_zoneB {padding: 100px 0 40px 0;}	
.tab ul li { width: 25%}	
.tab .active{ width: 25%}	

.region--hero { margin-bottom: 20px}	
.about_us_box ul li {float: left;display: block;margin-bottom: 20px;}	
.about_us_box .cover { width: 70%;left: 0;  right: 0;  margin: auto;  top: 0px;}	
.about_us_box .cover_text {width: 100%;  position: relative;top: 0; transform: none;padding: 50px 10px 30px 10px;
    border-radius: 16px;    margin: -30px 0 0 0;}	
	
	.characters li { margin:0 auto; width:85%; margin-bottom:85px;}
	
	.characters li+li+li+li+li { margin:0 auto; width:85%; margin-bottom:15px;}
	.characters li span {

    top: -60px; /* 將 span 放在角色圖片的上方 */

    opacity: 1;
transform: translateX(-50%) translateY(-10px); /* 添加一點彈跳效果 */
}
	
.about_us_box .cover_text::before,.about_us_box .cover_text::after { display: none}	
.description_grid {width: calc(100% - 20px);}	
#main_content	.description_grid:nth-child(3n+1) { clear: none}
#block_latest-news .blocktitle::before {width: 177px;  height: 44px;}	
.power_tag ul li a::before {    width: 10px;    height: 10px;  }
.power_tag ul li a {    padding: 15px 10px 5px 10px;    font-size: 13px;  }
.logo_bottom { display: block}
.jc {  float:left; clear:both; margin:10px 0 0;  }
.tag_index ul li {width: 100%;}	
.tab ul li {text-align: center;}	


#white_one  h1 , #blue_one  h1 { font-size: 32px; line-height:40px; }
 
#white_one   , #blue_one  {    padding: 0 0 0 40px;  }
 #white_one::before , #blue_one::before  {   width: 35px;  height: 39px; margin:5px 0  }

#white_one h1 ,   #blue_one h1 {font-size: 38px; margin-bottom:30px}	

	
}