@charset "utf-8";
/* CSS Document */

html,body { 
font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
   font-weight:500; font-size: 16px ;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: #EDEDED;
}
#page-wrapper{ position:relative; overflow: hidden}
:root { 
	--main-color:#086cc2; /*深藍1*/
	--main2-color:#f58221; /*深藍2*/
	--main3-color:#feb811; /*橙色*/
	--main4-color:#f5f9ff; /*淺色*/
	
	
}

.editingAdd{ position: absolute;top: -35px; z-index: 1;}
.home-add{ top: 35px !important; }
#add_normal{ position: relative;top: 0; padding:10px; }

.editingAdd a{ background-color: #ffd800; padding:3px 15px ; border-radius:15px; color:#000;}
.editingAdd a:hover{ background-color: #cbff0f;color:#000;}

.view-content{ clear:both}

.tag_index{ margin:30px 0;}

.swiper-slide .editing a{ display:block  !important;}
#banner_editing{ position:absolute; top:6px; left:45px; z-index:2 }
.editing{
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
}
.editing a{ 
  /* Override the .focusable height: auto */
  width: 30px !important; font-size: 0 ;  border-radius: 50%;
  /* Override the .focusable height: auto */
  height: 30px !important;
	background-color: #ffd800;
  text-indent: -9999px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23000000' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23000000' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px ;
}
.editing a:hover{ background-color: #cbff0f;}
li .editing a{ display:none !important;}
li:hover .editing a{ display:block  !important;}
.slick-slide:hover .editing a{ display:block  !important;}

a:link { text-decoration: none;}

#main_content a:link {color: #00266e; text-decoration: none;}
#main_content a:hover {color: #ffa800 ; text-decoration: underline; }

.clear{clear:both}
img {border:0;}
div, ul li{ margin:0px auto; padding:0px;}

.pager { display: inline-block}
#page-wrapper{ max-width:2560px;}
#page img{ max-width:100% }

#page .term-tree-list { position: relative; margin-top:15px; }
#page .term-tree-list .term{ list-style:none; margin: 0; padding: 5px 0 5px 30px;}
#page .term-tree-list .term::before{ content: ""; position: absolute; left: 0; top: 5px; 	
	background-color: var(--main-color);
    -webkit-mask-image: url(../images/tag1.svg) ; 
    mask-image: url(../images/tag1.svg) ; 	
	background-size: cover; width: 20px; height: 26px; } 
#page .term-tree-list .selected { font-weight: normal; text-decoration: underline}


.screen{ position:relative; padding:0px 30px; max-width: 1600px;}
.container{max-width:100%  }
.wide-content { width:auto; margin:0}
.breadcrumb{padding: 5px 0;  background: #fff;}
.block-views-blockslideshow-block-1{ position: relative;margin: 0;} 

h1, h2, h3 { font-weight: 600; margin: 0;}
h4, h5, h6 { font-weight: 400; margin: 0;}

h1{ font-size:38px; line-height:42px;color:var(--main-color); text-transform:uppercase; }
h2{ font-size: 33px;margin-bottom: -50px;
line-height: 36px;
background: var(--main2-color);

padding: 0 0 10px 35px;
position: relative;
border-bottom: 1px solid #ffef00;
color: #fff;
border-radius: 16px;
display: inline-block;
padding: 10px 15px 10px 30px;
clear: both;}
h2::before { background: url(../images/btn_yy.png) no-repeat; position:absolute; left:0; top:3px; content:""; width:35px; height:35px; background-size: cover;}
h2::after { background: url(../images/btn_bb.png) no-repeat; position:absolute; left:32px; bottom:-24px; content:""; width:32px; height:24px; background-size: cover; }

h3{ font-size:38px; line-height:42px;color:#fff; 
	  padding:0px;  margin:0px 0 15px 0; display:inline-table;  }
h4{ font-size:23px; margin:0px; color:var(--main-color); line-height:33px;}
h5{ font-size:23px; margin:0px; color:#ffa800; line-height:33px;}
h6{ font-size:23px; margin:0px; color:#333333; line-height:33px;}

.boxing .title{margin:15px 0; padding:5px 0 ; font-size:34px; line-height:40px; font-weight: 500; letter-spacing:0; position:relative; pointer-events:none ; color:#005bac; }



p{ margin:0px; padding:0px}
.blocktitle  { text-align: center; font-size:1.8em; text-align: center; margin-bottom:1.5em;  color:var(--main-color); line-height:2em;  }
.block__title {}

.region--secondary-menu , .region--secondary-menu{ margin:0;}
.menu--sidebar  .is-active , #block-olivero-main-menu   .is-active{ font-weight:600;color:var(--main-color) !important}

#header_top{ background:#e7fbff; }
#header {border-top: 4px solid;
  border-image: linear-gradient(90deg, #0067b3 0%, #0067b3 33.3%, #feb811 33.3%,#feb811 66.6%, #f58221 66.6%, #f58221 100%) 1;}
#header .screen { padding: 0;align-items: center;max-width: 1600px;}
#header .logo { margin-left:0}

.sticky { z-index:10; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; }

#block-olivero-site-branding , .logo_top { -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }


.header_logo { top: 0px;  position: relative; width: 100% ; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;opacity: 1;display: flex;
  align-items: center; justify-content: space-between;}
.sticky .header_logo { top: -100px; pointer-events:none; position: absolute; opacity: 0;}

.sticky #header{ position:fixed; top:0px; z-index:10; width:100%;  box-shadow:  0 0 5px rgba(0,0,0,.3) ;  min-height: auto; max-width:2560px; background:#fff;   } 


.site-branding { margin-left:0 }
.right_top{display: block; margin-right: 15px; margin-left: auto;width: 100%;
  float: left;background: #1659a0;}

.bg{ }
.bg .bg__item {
    position: absolute; z-index:0; pointer-events:none; width: 40px; height:900px; animation: rise 1s forwards;

} 
.bg .bg__item:nth-of-type(1) {
top: 5%;
left: -1%;
transform: rotate(-121deg);
background-color: #dcff98;
        opacity: 1;
}
.bg .bg__item:nth-of-type(2) {
top: 0%;
right: 44px;
transform: rotate(40deg);
background-color: #f0ebff;
        opacity: 1;
}
.bg .bg__item:nth-of-type(3) {
top: 15%;
right: 15%;
transform: rotate(308deg);
background-color: #98e2ff8a;
        opacity: 1;
}
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0);
    }
}

.power_teen{ width:23.5%; position:relative;  background: url(../images/bg_teens.png) no-repeat ; background-size: contain; min-height:420px;}
.power_teen img{  max-width:100%; } 
.power_teen div { transition: all 0.3s ease-in-out; }
.teens_c{ position: absolute;left: 5%;top: 13%;max-width: 90%;}
.teens_a{ position:absolute; left:0%; top:20%}
.teens_b{ position:absolute; right:0%; right: -30px;top: 100px;}
.teens_e{ position:absolute; right:5%; top:-5% ; z-index:1;}
.teens_f{ position:absolute; right: -8.0%;top: 0%;}
.teens_f {  animation: 20s linear 0s infinite normal none running circle-loop;}

.text_show {left: 0;bottom: 1%; position:absolute }
.text_show ul { list-style:none; margin:0; padding:0; }
.text_show ul li {  margin:1px ;     transition: opacity 0.5s ease, transform 0.5s ease;            transform: translateX(-100%);			opacity: 0; float:none !important}
.text_show ul li span{ background:#333; color:#fff; padding:10px; font-size:17px; line-height:21px; margin: 0; display: inline-block; }

.power_teen:hover .text_show ul li {opacity: 1;transform: translateX(0);}
.power_teen:hover .teens_c{top:11%}
.power_teen:hover .teens_a{top:15%}
.power_teen:hover .teens_b{top:24%}

.power_school{ width:27%;  position:relative;  background: url(../images/school_bg.png) no-repeat ; background-size:  contain; min-height:360px; margin:0 1% 0 1%;}
.power_school img{  max-width:100%; } 
.power_school div { transition: all 0.3s ease-in-out; }
.school_c{ position: absolute;left: 15%;top: 25%;max-width: 55%;}
.school_a{ position:absolute; left:-6%; top:-5%}
.school_b{ position:absolute; right:0%; top:40%}
.school_e{ position:absolute; right:5%; top:-5% ; z-index:1;}
.school_f{ position:absolute; right: -16.5%;top: 0%;}
.school_f {  animation: 20s linear 0s infinite normal none running circle-loop;}
.power_school #power_btn{ right:20% ; bottom:0;}

.power_school:hover .text_show ul li {opacity: 1;transform: translateX(0);}
.power_school:hover .school_c{top:28%}
.power_school:hover .school_a{top:-2.5%}
.power_school:hover .school_b{top:35%}


.power_community{ width:23%;  position:relative;  background: url(../images/bg_community.png) no-repeat ; background-size:  contain; min-height:360px; margin:120px 0% 0 0%;}
.power_community img{  max-width:100%; } 
.power_community div { transition: all 0.3s ease-in-out; }
.community_c{ position: absolute;left: 15%;top: 25%;max-width: 55%;}
.community_a{ position:absolute; left:-6%; top:5%}
.community_b{ position:absolute; right: 25%; top: 33%;}
.community_e{ position:absolute; right:15%; top:-15% ; z-index:1;}
.community_f{ position:absolute; right: -6.5%; top: -7%;}
.community_f {  animation: 20s linear 0s infinite normal none running circle-loop;}
.power_community #power_btn{ right:30% ; bottom:-1%;}
.power_community .text_show { width:50%}


.power_community:hover .text_show ul li {opacity: 1;transform: translateX(0);}
.power_community:hover .community_c{top:28%}
.power_community:hover .community_a{top:0%}
.power_community:hover .community_b{top:30%}


.power_family{ width:46%;  position:relative;  background: url(../images/bg_family.png) no-repeat ; background-size:  contain; min-height:360px; margin:0%;}
.power_family img{  max-width:100%; } 
.power_family div { transition: all 0.3s ease-in-out; }
.family_c{ position: absolute;right: 5%;top: 15%;max-width: 100%;}
.family_e{ position:absolute; right:6%; top:-2% ; z-index:1;}
.family_f{ position:absolute; right: -16.5%;top: 0%;}
.family_f {  animation: 20s linear 0s infinite normal none running circle-loop;}
.power_family #power_btn{ right:5% ; bottom:0;}

.power_family:hover .text_show ul li {opacity: 1;transform: translateX(0);}
.power_family:hover .family_c{top:12%}



@keyframes circle-loop {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes circle-loop2 {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

#lang { margin: 10px 0; padding: 0; float: right }
#lang ul { list-style: none; display:  flex;  margin: 0; padding: 0;}
#lang ul li { margin: auto 5px;} 
#lang ul li a{ background: #ddd; color: #000; padding: 5px 10px; border-radius: 12px; font-size: .9em; }
#lang ul li a:hover{ background: var(--main2-color); color: #fff; }
#lang ul li a.is-active{ background: var(--main-color); color: #fff; }

#page-wrapper{ }
#page img{ max-width:100% }

.home_zoneA{display: flex;background: url(../images/gray_bg.png) }
.home_zoneB{ background: url(../images/tag_bg.png) top center no-repeat;  clear: both;  padding: 150px 0 50px 0;  position: relative;  background-size: cover;}

.home_zoneB .screen { max-width: 1840px}
.home_zoneC{clear: both; padding-top:50px;}

.view-more , .view-more2{ margin: 0 auto; padding: 50px 0 0 0; text-align:  center;}


.more-link { position: relative; }
.more-link a{ font-size: 1.1em; line-height: 1.2em; padding: 10px 20px; }





.view-more2 a {
  position: relative; display: inline-block; padding: 10px 35px;
}

.view-more2 a::before, .view-more2 a::after {
  content: ''; 
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid; border-radius: 8px;
  border-color: var(--main3-color); 
  transition: transform 0.3s ease;
}

.view-more2 a::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.view-more2 a::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.view-more2 a:hover::before, .view-more2 a:hover::after {
  transform: scale(1, 1);
}



.news_tag { position: absolute; left: -5px; top: -5px; background-image: url(../images/icon/i_news.png); width: 90px; height: 44px; background-size: cover; z-index: 1; pointer-events: none;  }
.news_tag2 { position: absolute; left: 0; top: 0; background-image: url(../images/icon/i_news2.png); width: 90px; height: 28px; background-size: cover; z-index: 1; pointer-events: none;  }

#logo{padding: 0; }
#logo img{ max-width: 247px }

.logo_top {}

.hkfws ,.jc{ margin-left: 50px ; float: left}	



.logo_top p { float: left;margin-right: 15px;}
#block-olivero-logo-top { margin-left: 0}
#block-olivero-site-branding { margin: 0; padding: 0;float: left;}




.node__content{ clear:both;}
.node__content time{ display: block !important; margin-bottom:10px;}

#nonbanner_title{ background:#0067b3; padding:60px 0; }
#nonbanner_title h1{ color:#fff; margin:10px 0; } 

#banner_title, .banner_title { background:#0067b3; background-repeat: no-repeat; background-size: cover ; padding:100px 0; position: relative}
#banner_title::before, .banner_title::before { content: ''; position: absolute;background: url(../images/banner_cover.png) center top;  width: 100%;  height: 100%;  top: 0; left: 0;background-size: cover; }
#banner_title h1, .banner_title h1{ color:#000; margin:10px 0; display: inline-block;
  background: #fff;  clip-path: polygon(2.5% 3.33%, 5% 3.33%, 5% 0%, 95% 0%, 95% 3.33%, 97.5% 3.33%, 97.5% 6.67%, 100% 6.67%, 100% 93.33%, 97.5% 93.33%, 97.5% 96.67%, 95% 96.67%, 95% 100%, 5% 100%, 5% 96.67%, 2.5% 96.67%, 2.5% 93.33%, 0% 93.33%, 0% 6.67%, 2.5% 6.67%);
  padding: 10px 20px;  position: relative} 

#banner_title h1::before{clip-path: polygon(0px 0px, 300px 0px, 300px 33.3px, 254.15px 33.3px, 254.15px 66.88px, 185.41px 66.65px, 185.41px 100px, 116.66px 100px, 116.66px 66.88px, 46.96px 66.88px, 46.96px 33.3px, 0px 33.3px); background: #fff; content: ''; position: absolute}

.region--hero { background: #00528f;  text-align: center; margin-bottom: 30px; position:relative; z-index:1}

#block-olivero-views-block-video-block::before { content:""; background:#c6c6c6; width:100%; height:2px; position:absolute; top:-7px; z-index:0}

#block_latest-news{ padding:0}
#block_latest-news .blocktitle { text-align: left;border-bottom:2px solid #c6c6c6; position: relative;padding:40px 0 0 40px;margin-bottom: 0;}
#block_latest-news .blocktitle::before { content: ''; position: absolute; background: url(../images/new_bubble.png) no-repeat;background-size: contain;  width: 217px;  height: 54px;  top: 0;  left: -20px;}
#block_latest-news .blocktitle::after { content: ''; position: absolute;width: 25%;  height: 2px;  background: #00a0e6;  bottom: -2px; left:0px}
 .view-more {position: absolute;  top: 0;  right: 0;padding: 30px 0 0 0;}
.view-more a { background: url(../images/more.png)  no-repeat ;background-size: cover;
  border-radius: 0;  padding: 10px 30px 20px 40px; border: none; }

 .view-more a { background: url(../images/btn_more.png)  no-repeat ; display: block; padding: 15px 40px 25px 45px}
 .view-more a:hover { background: url(../images/btn_more_hover.png)  no-repeat ; padding: 18px 40px 22px 45px; color: #000; text-decoration:  underline}

.home_zoneC .view-more a { background: url(../images/btn_more.png)  no-repeat ; display: block; padding: 15px 40px 25px 45px}
.home_zoneC  .view-more a:hover { background: url(../images/btn_more_hover.png)  no-repeat ; padding: 18px 40px 22px 45px; color: #000; text-decoration:  underline}




.new_content .date time::before{display: none;}
#block_latest-news ul  {overflow-y: auto;  max-height: 580px;}
#block_latest-news ul li {border-bottom: 1px solid #bfbfbf;padding: 10px 0;}
#block_latest-news ul li a:hover { background: #fff6f6; display: block}
#block_latest-news .date { position: relative}
#block_latest-news ul li a:hover .date::before { content: '#'; position: absolute;  left: -15px;}
#block_latest-news ul li:nth-child(5n+1) .new_content .date,#block_latest-news ul li:nth-child(5n+1) a:hover .date::before {  color: #dc0b00}
#block_latest-news ul li:nth-child(5n+2) .new_content .date ,#block_latest-news ul li:nth-child(5n+2) a:hover .date::before{  color: #ff7700}
#block_latest-news ul li:nth-child(5n+3) .new_content .date,#block_latest-news ul li:nth-child(5n+3) a:hover .date::before {  color: #0067b3}
#block_latest-news ul li:nth-child(5n+4) .new_content .date,#block_latest-news ul li:nth-child(5n+4) a:hover .date::before {  color: #feb811}
#block_latest-news ul li:nth-child(5n+5) .new_content .date,#block_latest-news ul li:nth-child(5n+5) a:hover .date::before {  color: #0d927e}
.new_content {padding: 10px 40px 10px 30px; position: relative}
#block_latest-news ul li .new_content::after {content: ''; position: absolute; mask-image: url(../images/SVG/arrow.svg);  width: 20px;  height: 20px;  right: 10px;  top: 0;  bottom: 0;  margin: auto;  mask-size: contain;  mask-repeat: no-repeat;}
#block_latest-news ul li:nth-child(5n+1) .new_content::after {background-color: #dc0b00; }
#block_latest-news ul li:nth-child(5n+2) .new_content::after {background-color: #ff7700; }
#block_latest-news ul li:nth-child(5n+3) .new_content::after {background-color: #0067b3; }
#block_latest-news ul li:nth-child(5n+4) .new_content::after {background-color: #feb811; }
#block_latest-news ul li:nth-child(5n+5) .new_content::after {background-color: #0d927e; }
.new_content  .title { color: #333;}


.tag_index ul { margin: 0; padding: 0; list-style: none}
.tag_index ul li { margin-bottom: 5px; width: 33.3%;  float: left;}


.tag_t_box {margin: 0;position: relative;}
.tag_a_box {margin: 0;position: relative;left: -40px;}
.tag_g_box {margin: 0;position: relative;left: -50px;}

#tag_t {background: #0067b3; overflow:hidden; padding: 35px 0; position:relative;}
#tag_t .tag_index_t {font-size: 200px;  font-weight: bold; color: #8191c4;  line-height: 140px;  margin: 0;  font-family: "Roboto", sans-serif;}
#tag_t .tag_index_t_tc {font-size: 45px;  margin: 0;  color: #fff;  font-weight: bold;  display: flex;
  align-items: flex-end;position: relative;
  left: 0px;}
#tag_t .tag_index_t_small{font-size: 20px;color: #fff;  font-weight: bold;margin: 0;
  left: 0px;  position: relative;}

#tag_t  .circle{ position:absolute; top: -10px;left: 50%;pointer-events: none; animation: 2s linear 0s infinite normal none running circle-loop2;}
#tag_t .circle img {width: 40px;}

#tag_a {background: #feb811;padding: 35px 0; margin: 0; position:relative; overflow:hidden}
#tag_a .tag_index_a {font-size: 200px;  font-weight: bold;   color: #f5d485;  line-height: 140px;  margin: 0;  font-family: "Roboto", sans-serif;}
#tag_a .tag_index_a_tc {font-size: 45px;  margin: 0;  color: #fff;  font-weight: bold;  display: flex;  align-items: flex-end;
  position: relative;  left: 20px;}
#tag_a .tag_index_a_small{font-size: 20px;color: #fff;  font-weight: bold;margin: 0;
  left: 20px;  position: relative;}

#tag_a  .people{ position:absolute; top: -40px;
left: 50%;;pointer-events: none; animation: run 1s linear infinite;
}

#tag_a  .people img {width:35px;}

#tag_g {background:  #f58221; padding: 35px 0; position:relative; overflow:hidden}
#tag_g .tag_index_g {font-size: 220px;  font-weight: bold; color: #eeb377;  line-height: 140px;  margin: 0;  font-family: "Roboto", sans-serif;}
#tag_g .tag_index_g_tc {font-size: 45px;  margin: 0;  color: #fff;  font-weight: bold;  display: flex;
  align-items: flex-end;  position: relative;  left: 20px;}
#tag_g .tag_index_g_small{font-size: 20px;color: #fff;  font-weight: bold;margin: 0;
  left: 20px;  position: relative;}



#tag_g  .heart{ position:absolute;top: -35px;  left: 50%;pointer-events: none; animation: 1s linear 0s infinite normal none running pulse;}

#tag_g .heart img { width: 40px}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes run {
           0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(10px); /* 根據容器高度調整 */
            }
            100% {
                transform: translateY(0);
            }
}

.tag_t_top {display: flex;  justify-content: center;  align-items:flex-end;  line-height: initial;}
.tag_b_top {color: #fff;  text-align: center;   font-size: 20px;  font-weight: bold;margin-top: 20px;}


#block_latest-awards{ padding:3em 0  ; border-top: 1px solid #c7ced3 }
#block_latest-activity{ padding:3em 0 }


.video_theme{ max-width:80%; margin:50px auto ;}

.slider-slogan{ position: absolute; bottom: 15%; }
.slider-slogan .slogan_text{ font-size: 2.5em;
  padding: 0.55em;
  line-height: 1.85em;
  color: #fff; background: #086cc2a1 ; }

.slogan_left{ left:0;}
.slogan_right{ right:0;}
.view-empty{ clear:both}

footer{  }
.hkfws p   ,  .jc p { padding-bottom:10px;}

 .footer_menu ul li   a{ color: #fff; line-height:23px; font-size: 19.5px;} 

.footer_menu ul li { margin-top:10px}

.footer_menu ul li ul li { margin-top:0px}

 .footer_menu ul li  ul li  a{ color: rgba(255,255,255,.5); line-height:17px; font-size: 13.5px;} 
 .footer_bottom { font-size:13px; line-height:19px;}
 .contact_info  a{ text-decoration: underline; color : #feb811}
 
footer .power { float:right;  }
footer .copyright { float:left}
footer .copyright a , footer .power a { color:#000; text-decoration: underline}

#main_content{ float:left; width:100%; min-height: 500px; position:relative; z-index:1; }
#sidebar-nav{float:right; width:21%; display: none}


.useful-links ul{
  display: grid; list-style:none; padding:0; margin:0;
  grid-template-columns: repeat(5, 1fr); column-gap:
  gap: 10px;
} 

.useful-links ul li{ 
  width:calc(100% - 10px) ; position:relative;  padding:5px;
}


#ctd-fliters .form--inline .form-actions { margin:auto }

#ctd-fliters {
margin-block-end: var(--sp1); text-align:  right; float:right;
}

.contextual-region .view-header{
margin-block-end: var(--sp1) !important;
}


/* Table */
#main_content table{border-collapse: inherit; width:100%;  line-height:33px; border:1px solid var(--main-color);   }
#main_content tr:nth-child(even) td { background:#f2f2f2; color:#333; padding:5px; }
#main_content tr:nth-child(odd) td { background:#fff; color:#333; padding:5px; }
#main_content table ul, table ol{ margin:0; }


.location {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.node__content iframe{ width:100%; min-height: 350px;}

/* Template */
.tpl-info time, .block-info time, .node__content time{ position: relative; display: inline-block; padding: 10px 0 10px 30px;}
.block-info time{padding: 5px 0}

.news-card time::before{  background-color: #fff !important }

.index_block { background: none}
.index_block b { display: block}
#page time::before{ content: ""; position: absolute; left: 0; top: 13px; 	
	background-color: var(--main-color);
    -webkit-mask-image: url(../images/date.svg) ; 
    mask-image: url(../images/date.svg) ; 	
	background-size: cover; width: 20px; height: 21px; }

	
.block-info{ list-style: none; margin: 0; padding: 0 ; background:  none}
.block-info li{position: relative; }


.tpl-info{ list-style: none; margin: 0; padding: 0;}
.tpl-info li{position: relative; }
.tpl-info li:hover{ }
.tpl-info li a{ color: #333; display: block; width: 100%}
.tpl-info li a:hover{ color: #333;}
.tpl-info li b, .block-info li b{ display: block}
.tpl-info figure img , .block-info figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:1;
}
.tpl-info  figure:hover img ,.block-info  figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:.8;
}
.tpl-info figure  ,.block-info figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;clip-path: polygon(2.5% 3.33%, 5% 3.33%, 5% 0%, 95% 0%, 95% 3.33%, 97.5% 3.33%, 97.5% 6.67%, 100% 6.67%, 100% 93.33%, 97.5% 93.33%, 97.5% 96.67%, 95% 96.67%, 95% 100%, 5% 100%, 5% 96.67%, 2.5% 96.67%, 2.5% 93.33%, 0% 93.33%, 0% 6.67%, 2.5% 6.67%);
}




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

.template-A ul li{ 
  width:calc(100% - 30px) ; 
  padding:15px;display: flex;
  align-items: center;
	text-align: center;
}

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

.template-B ul li{ 
  width:calc(100% - 30px) ; 
  padding:15px;display: flex;
  align-items: center;
	text-align: center;
}

.template-C ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
} 

.template-C ul li{ 
  width:calc(100% - 30px) ; 
  padding:15px;display: flex;
  align-items: center;
	text-align: center;
}


.Block_A ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5%;
} 
.Block_A ul li{ position:relative; width: 100%;}

.Block_B ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5%;
} 
.Block_B ul li{ position:relative; width: 100%; background: #fff;}

.news-card {
  border: 0px solid aqua;
  margin: 1px;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  flex: 1;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.news-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);;
      z-index: 0;
    }
.news-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
  }

.news-card__text-wrapper {
    position: absolute;
    bottom: 0rem;
    padding: 5px 10px 15px 10px; width:calc(100%);
    color: white;  background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 1.5s ease;
  }
.news-card__title {
    transition: color 1s ease;
    margin-bottom: .5rem;
  }
.news-card__details-wrapper {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
  }
  
  @media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {
      max-height: 20rem;
      opacity: 1;
    }
    .news-card:hover .news-card__text-wrapper {
      background-color: rgba(0, 0, 0, 0.6);
    }
    .news-card:hover .news-card__title {
      color: yellow;
    }

  }


.articles{ padding:1em;}
.articles:hover:before {
  width: 100%;
}
.articles::before {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 0%;
  background: var(--main-color);
  right: 0px;
  transition: width 0.4s; 
}



/* End Template */

/* Category */
.category {
float: left;
 background:#ebeff2;
padding: 8px 10px;
border-radius: 8px;
margin: 9px 0; z-index: 1;
position: relative;}

.category ul {  list-style: none; margin:0; padding:0}
.category ul li {  display: inline-block;}
.category ul li a {
  display: block;
  padding: 5px 20px; font-size:1.3em;
  text-decoration: none;
  color: #333333;
  font-weight: 400;
  margin: 0 10px;
}
.category ul li+li  { border-left:1px dotted #666;}
	
.category ul li a,
.category ul li a:after,
.category ul li a:before {  transition: all .5s;}
.category ul li a:hover {  color: var(--main-color);}



/* stroke */
.category.stroke ul li a,
.category.fill ul li a {  position: relative;}
.category.stroke ul li a:after,
.category.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: var(--main-color);;
  height: 2px;
}
.category.stroke ul li a:hover:after {
  width: 100%;
}

.category.fill ul li a {  transition: all 2s;}
.category.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
.category.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}
.category.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

/* SHIFT */
.category.shift ul li a {
  position:relative;
  z-index: 1;
}
.category.shift ul li a:hover {
  color: #91640F;
}
.category.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: var(--main-color);
  visibility: none;
  opacity: 0;
  z-index: -1;
}
.category.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}


.category .current a , .category .current a:hover {
  color: #fff; 
  background: var(--main-color);
}


/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: var(--main-color);;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: var(--main-color);;
    border-radius: 100%;
  }
  100% {
    background: var(--main-color);;
    height: 1000%;
    width: 1000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}
/* End Category */

.sitemap-item {  margin: 0px auto;  padding: 0 20px;}

.sitemap-item ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
list-style-type: none;    padding: 0;    margin: 0;
}
.sitemap-item ul ul{grid-template-columns: repeat(1, 1fr); gap: 5px; margin:10px; padding:0 25px; list-style-type: initial;  }
.sitemap-item ul li { width:100%; margin:0 ; padding:0 }

.sitemap-item ul li a, .sitemap-item ul li span { font-size:1.3em; font-weight:400 ; 
    padding: 10px 15px ; display:block;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s ease; background:#fff; }

.sitemap-item ul li a {  color: var(--main-color);}
.sitemap-item ul li span{     color: #555; }

.sitemap-item ul li a:hover {
    background: var(--main2-color) ; color:#fff; 
}

.sitemap-item ul li ul li a , .sitemap-item ul li ul li span {
	padding: 5px 0 5px 0px ; display:block; border-bottom:0; font-size:1em; font-weight:300
}
.sitemap-item ul li ul li a:hover { background:none; color:var(--main2-color) }

.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #f5f9ff;
}
.sidebar-nav .metismenu {
    padding: 15px; font-size: 1.15em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-nav .metismenu a.current { color:var(--main-color);  }

.sidebar-nav .metismenu li + li {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:first-child {
  margin-top: 5px;
}
.sidebar-nav .metismenu li:last-child {
  margin-bottom: 5px;
}
.sidebar-nav .metismenu > li {
    /*-webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;*/
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
}
.sidebar-nav .metismenu a {
    position: relative;
    display: block;
    padding: 5px 35px 5px 15px;
    color: #333333;
    outline-width: 0;
    transition: all .3s ease-out;
}

.sidebar-nav .metismenu ul a {
    padding: 5px 35px 5px 30px;
}
.sidebar-nav .metismenu ul ul a {
    padding: 5px 35px 5px 45px;
}
.sidebar-nav .mm-active { color: var(--main-color);  !important; }
.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active,
.sidebar-nav .metismenu .mm-active > a {
    color:var(--main-color); 
    text-decoration: none;
}




.subjectlists {
	position: relative;
	margin: 0 auto;
	padding: 0 !important;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

.subjectlists figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.subjectlists figure figcaption::before,
.subjectlists figure figcaption::after {
	pointer-events: none;
}
.subjectlists figure figcaption,
.subjectlists figure figcaption > a {
	position: absolute; background:#0c335b38;
	top: 0;	left: 0; width: 100%; height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.subjectlists figure figcaption > a {
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}


.subjectlists figure h2,
.subjectlists figure p {
	margin: 0;
}
.subjectlists figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
figure.effect-honey {
	background: #4a3753; min-height: 180px;
}
figure.effect-honey img {
	opacity: 0.9; max-width:125%:
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;	
	transition: all 0.3s ease-in-out; opacity: 1;
}

figure.effect-honey:hover img {
	opacity: 0.5;
}
figure.effect-honey figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: var(--main2-color);
	content: '';
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}
figure.effect-honey h2 {
	position: absolute; font-style: normal;
	bottom: 0;
	left: 0;
	padding: 0.5em 1.5em; color: #fff; text-shadow: 0 0 8px #000000a1;
	width: 100%;
	text-align: left;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}
 

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
	opacity: 1; 
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#block-sidebar-nav { background: var(--main4-color); }
#block-sidebar-nav h2{ padding: 30px 0;
  background: var(--main-color); 
  color: #fff; margin:0;
  text-align: center;}
#block-sidebar-nav ul { list-style:  none; margin: 0; padding: 15px; }
#block-sidebar-nav ul li{ float: none; border-bottom: 1px solid #ddd; position:  relative}
#block-sidebar-nav ul li a{ padding:15px; display:  block; }
	
.subjectlist ul{ list-style:  none; margin: 0; padding: 15px; }
.subjectlist ul li{ float: none;  border-bottom: 1px solid var(--main3-color); position:  relative}
.subjectlist ul li a{ padding:15px 15px 15px 30px; display:  block; font-size: 21px; line-height: 27px;  }

.subjectlist ul li a::before {
  content: "\2022";
  font-family: Arial;
  position: absolute;
  color: var(--main2-color);
  left: 0;
  top: 19px;
  font-size: 50px;
  font-weight: 400;
}
.site-branding { background-image: none;}

.stellarnav a, .stellarnav b, .stellarnav p{
-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; 
}
.stellarnav p { position: relative;width: 52px;  height:52px;    margin: auto;mask-repeat: no-repeat;mask-repeat: no-repeat; mask-size: cover; margin:0px auto ; margin-bottom:5px; }


.about_us  p { mask-image: url(../images/btn_aboutus.png); background-color: #fff; }
.events  p { mask-image: url(../images/btn_pastevents.png);   background-color: #fff;}
.media  p { mask-image: url(../images/btn_events.png);  background-color: #fff;}
.download  p { mask-image: url(../images/btn_download.png);  background-color: #fff;}
.activity_introduction  p { mask-image: url(../images/btn_activities.png);  background-color: #fff;}
.contect_us p { mask-image: url(../images/btn_contactus.png);  background-color: #fff;}
.link p {mask-image: url(../images/btn_links.png);  background-color: #fff;}


.stellarnav  ul li a b { border-bottom: 3px solid #1659a0;position: absolute;  left: 0;	bottom: 0;width: 100%;}
.stellarnav  ul li a:hover b { border-bottom: 3px solid #eeb91b;}

.stellarnav  ul li a:hover b , .stellarnav ul li a.current  b , .stellarnav ul li a.selected b  { opacity:1;  border-bottom: 3px solid #eeb91b;} 
.stellarnav ul li a:hover  p , .stellarnav ul li a.current  p , .stellarnav ul li a.selected p   {background-color: #fff; }


.about_us  a:hover , .events  a:hover , .media  a:hover { color:#fff; }
.about_us ul li a:hover  ,  .events ul li a:hover  , .media ul li a:hover  { background:#0067b3; color:#fff; }




.download ul li a:hover  ,  .activity_introduction ul li a:hover   { background:#feb811; color:#fff; }




.contect_us ul li a:hover  ,  .link ul li a:hover   { background:#f58221; color:#fff; }

.power_tag_m ul{ list-style:none; margin:0; padding:0}
.power_tag_m ul li{ float:left; width:50%}

.power_tag_m ul li:nth-child(2){ margin:50px 0 0 0; }


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

.banner_front{max-width: 100%;}
#block-olivero-views-block-latestnews-block { float: left; width: calc(55% - 40px);  margin: 40px 40px 40px 0;
	position: relative}
#block-olivero-tagblock { float: left; width: 100%;padding: 0 0 0 0px;}

.power_tag_m { display:none;}

.power_tag ul { list-style: none; margin: 0; padding: 0}
.power_tag ul li { float: left;  position: relative}
.power_tag ul li a { position: relative;background: #000;  border-radius: 50%;  padding: 35px 20px 10px 20px; box-shadow:0 0 3px rgba(0,0,0,.3) ;
  color: #fff;position: absolute; transition: all 0.3s ease-in-out;}
  .power_tag ul li a:hover {  background: #fff;   color: #000; 
  }
  .power_tag ul li a:hover::before { mask-image: url(../images/SVG/more.svg);  background-color: #000;  mask-size: contain;mask-repeat: no-repeat;}

.power_tag ul li a::before { content: ''; position: absolute; mask-image: url(../images/SVG/more.svg);  background-color: #fff;  width: 15px;  height: 15px;  left: 0;  top: 10px;  right: 0;  margin: auto;  mask-size: contain;mask-repeat: no-repeat; }


.page_wall{ background: url(../images/bg_wall.jpg) ; padding-bottom:50px; min-height: 80vh;    }


.tab {float: left;  width: 20%; position: relative }

.tab ul { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1}


.latest_album::before {content: '';
  position: absolute;  height: 100%;  width: 123px;left: -59px;  bottom: 0;  top: 0;  margin: auto;  background: url(../images/shadow.png) no-repeat center;    z-index: 0;  background-size: contain;}
.tab .title {font-size: 30px;  color: #f58221; font-weight: bold;padding: 60px 0 50px 15px;z-index: 1;
  position: relative;}
.tablinks  {text-align: center;padding: 15px 10px;  font-size: 20px;  color: #fff;  transition: all 0.3s ease-in-out; margin:5px 0}
.tab ul li { transition: all 0.3s ease-in-out;   cursor: pointer }

.teenager_event { background: #91b73c; }
.family_event { background: #fac8c7;}
.school_event { background: #9bd2dc;}
.community_event { background: #b4b4d0;}

.tablinks  p { display: inline-block; position: relative ; cursor: pointer}
.tablinks  span {width: 35px;  height: 35px;  position: absolute;  z-index: 0;   left: -40px;
  top: 0;  bottom: 0;  margin: auto;}
.teenager_event span {background: url(../images/teenager_event_icon.png) no-repeat center;background-size: contain; }
.family_event span {background: url(../images/family_event_icon.png) no-repeat center;background-size: contain; }
.school_event span {background: url(../images/school_event_icon.png) no-repeat center;background-size: contain; }
.community_event span {background: url(../images/community_event_icon.png) no-repeat center;background-size: contain; }

#block-olivero-video-tab { position:relative;}
#family_event .event_cover {background: #fac8c7;}
#family_event .activity_category {  background: url(../images/event_box_pink.png) no-repeat center;}

#school_event .event_cover {background: #9bd2dc;}
#school_event .activity_category {  background: url(../images/event_box_blue.png) no-repeat center;}


#community_event .event_cover {background:#b4b4d0;}
#community_event .activity_category {  background: url(../images/event_box_purple.png) no-repeat center;}


.latest_album  {float: left;  width:80%;padding: 70px 0 0 30px;position: relative;}
.tab .active {z-index: 3;  position: relative;width: 105%; transition: all 0.3s ease-in-out; }

.latest_album .view-more {position: absolute;  top: -10;  right: 0;padding: 0px 0 0 0; z-index: 1}

.latest_album figure  {clip-path: polygon(2.5% 3.33%, 5% 3.33%, 5% 0%, 95% 0%, 95% 3.33%, 97.5% 3.33%, 97.5% 6.67%, 100% 6.67%, 100% 93.33%, 97.5% 93.33%, 97.5% 96.67%, 95% 96.67%, 95% 100%, 5% 100%, 5% 96.67%, 2.5% 96.67%, 2.5% 93.33%, 0% 93.33%, 0% 6.67%, 2.5% 6.67%);}
.event_cover {clip-path: polygon(2.5% 3.33%, 5% 3.33%, 5% 0%, 95% 0%, 95% 3.33%, 97.5% 3.33%, 97.5% 6.67%, 100% 6.67%, 100% 93.33%, 97.5% 93.33%, 97.5% 96.67%, 95% 96.67%, 95% 100%, 5% 100%, 5% 96.67%, 2.5% 96.67%, 2.5% 93.33%, 0% 93.33%, 0% 6.67%, 2.5% 6.67%);
  background: #bdd48a;
  padding: 5px;}
.event_cover img { width: 100%}

.region > *{ margin-block-end: 0}
.event_content b{font-size: 20px;  padding: 20px 0;  color: #333;}
.activity_category  { background: url(../images/event_box.png) no-repeat center;    background-size: auto;
  display: inline-block;  background-size: contain;  padding: 15px 70px 5px 70px;  color: #fff;}

.footer_top {background: #0067b3;padding: 30px 0; position:relative;
border-top: 4px solid;  border-image: linear-gradient(90deg, #0067b3 0%, #0067b3 33.3%, #feb811 33.3%,#feb811 66.6%, #f58221 66.6%, #f58221 100%) 1;}


.footer_top .screen { position: relative}
.footer_top .screen::before { content: '';  position: absolute;
  width: 1px;  height: 100%;  background: #ffffff38;
  top: 0;  right: 0;  left: 0;  margin: auto;}
.footer_menu {width: calc(50% - var(--sp2));
  float: left;}
.footer_menu a:hover { color: #ffcc00 }
.footer_menu ul { margin: 0; padding: 0; list-style: none}
.footer_menu ul ul ul {margin: 0 0 0 20px;}
.footer_menu ul ul li{ width: 100%}
.footer_menu ul li { float: left; width: 33.3%}
.footer_menu ul li:nth-child(3n+1) { clear: both}
.links {float: left;  clear: both;display: flex;margin: 40px 0 0 0;}
.links  .title {font-size: 25px;  color: #fff;}
.links ul {list-style: none;  margin: 0 0 0 0px;  padding: 0;  display: flex;}
.links ul li {  margin: 0 0 0 20px;}
.region--footer_top__inner { display: block}

.footer_bottom { clear:both ;float: left;  width: 100%;  padding: 30px 0;  background: #fff;}

#block-olivero-contactinformation {float: left;  width: calc(50% - var(--sp2));}
.footer_menu ul li .menu__link--level-1  {font-size: 25px;}


#contacus {padding:5%; width:70%;  background:#0067b3; margin:0 auto; border-radius:18px; margin-top:30px; position:relative; border: 3px solid #fff; }

#contact {color:#fff;padding:5%; width:70%;  background:#feb811; margin:0 auto; border-radius:18px; margin-top:30px; position:relative; border: 3px solid #fff; }

.contactMe  h2{           text-align: center;
  color: #fff;
  font: 26px;
  line-height: 32px;
  margin-bottom: 40px;
  background: #f58221;
  padding: 10px 0;
  border: 1;
  border: 3px dashed #fff;
  border-radius: 10px;}

#contact::before {     content: "";
  background: url(../images/plane.png) no-repeat;
  width: 122px;
  height: 86px;
  position: absolute;
  right: -50px;
  top: 0;
  z-index: 1;
  pointer-events: none;
  background-size: contain; }


form.contactMe {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #3c322c;
  border-radius: 26px;
  border: 2px solid #655b55;
  position: relative;
  font-size:  17.6px;
  gap: 10px;
}

form.contactMe>div {
  display: flex;
  flex-grow: 1;
  flex-basis: 100%;
  margin-bottom: 10px;
  margin: 0;
  gap: 10px;
}

form.contactMe>div>div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

form.contactMe input {
  width: 100%;
  min-height: auto;
  height: 36px;
  border-radius: 8px;
}

form.contactMe textarea {
  min-height: auto;
  border-radius: 8px;
}

form.contactMe button {
  padding:5px 10px;
  cursor: pointer;
  display: inline-block;
  width: 126px; font-size:20px;
  margin: 0 auto;
  background: #fa863e;
  color: #fff;
  border: 0;
  border-radius: 20px;
  position: absolute;
  right: 50%;
  bottom: 0;
  transform: translate(50%, 50%);
  text-transform: uppercase;
  font-weight: bold;
}

form.contactMe button:hover { background:#0067b3; } 

.contact_info {
    padding: 0 0 0 50px;
    color: #fff; font-size: 1.1em
}

.contact_info span { color: #feb811;margin: 0 10px 0 0px; min-width:75px; display: inline-block;}
.contact_info ul { margin: 0; padding: 0; list-style: none }
.contact_info ul li{ color:#fff; }
.contact_info ul li+li { float: left; width: 50%}
.contact_info ul li+li +li +li { width: 100%;display: flex;}
.contact_info ul li a:hover {  color: hsl(42.3, 99.2%, 53.1%);}
.contact_info .title {background: url(../images/contact_us.png) no-repeat center top;    display: inline-block;
  background-size: contain;  padding: 5px 30px 30px 30px;  color: #f58221;  font-size: 20px;}

.menu--level-2 a:hover {text-decoration: underline;}

.contact_info h2{ color:#feb811; font:26px; line-height:32px; margin-bottom:40px; }

 
#contacus table{border-collapse: inherit; width:100%;  line-height:33px; border:0px solid var(--main-color);   }
#contacus  tr:nth-child(even) td { background:rgba(0,0,0,.0)  ; color:#fff; padding:5px; }
#contacus  tr:nth-child(odd) td { background: rgba(0,0,0,.0); color:#fff; padding:5px; }
#contacus  table ul, table ol{ margin:0; }
#contacus  a{ color:#feb811 !important }

/*inner_page*/
.about_us_title { font-size: 30px; line-height:34px; }




.right_desc  ol li::marker {font-size: 50px;} 
.right_desc  ol li::after { content: '';  position: absolute;background: url(../images/one.png) no-repeat center;width: 80px;
  height: 89px;
  left: -180px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;}

#pink_title {color:#0067b3;position: relative;  padding: 0 0 0 90px;  margin: 30px 0}
#pink_title::before { content:'';  position: absolute;background: url(../images/one_yellow.png) no-repeat center; width: 70px;  height: 79px;
  background-size: contain;  left: 0;  top: 0;  bottom: 0;  margin: auto;   }


#orange_title {color:#f58221;position: relative;  padding: 0 0 0 90px;  margin: 30px 0}
#orange_title::before { content:'';  position: absolute;background: url(../images/one_yellow.png) no-repeat center; width: 70px;  height: 79px;
  background-size: contain;  left: 0;  top: 0;  bottom: 0;  margin: auto;   }


#blue_title {color:#f58221;position: relative;  padding: 0 0 0 90px;  margin: 30px 0}
#blue_title::before { content:'';  position: absolute;background: url(../images/one_yellow.png) no-repeat center; width: 70px;  height: 79px;
  background-size: contain;  left: 0;  top: 0;  bottom: 0;  margin: auto;   }
.text-content, .cke_editable , .node__content { font-weight:500;}
.node__content {
    padding-block-end: 0;
}

.boxing { margin:5px 0}

.about_us_box {}
.about_us_box ul {  margin: 0;  padding: 0;  list-style: none;  }
.about_us_box ul li {margin-bottom: 80px;  position: relative;  clear: both;  display: flex;}
.about_us_box  .cover {margin: 0;  padding: 0;  width: 30%;position: relative;
  z-index: 1;}
.about_us_box  .cover img{width: 100%;}
.about_us_box .cover_text {  background: #f8f6f0;  margin: 0; align-items: center;
  display: flex;  justify-content: center;float: right;  width: 75%;  position: absolute;  z-index: 0;
  top: 50%;  right: 0;  transform: translate(0%, -56%); height: 100%; padding:  0 6%}

.about_us_box .cover_text::before { content: ''; position: absolute; width: 100%; height: 20px; border-top-left-radius: 32px;border-top-right-radius: 32px; top: -20px;
  background: #f8f6f0; }
.about_us_box .cover_text::after { content: ''; position: absolute; width: 100%; height: 20px; border-bottom-left-radius: 32px;border-bottom-right-radius: 32px; bottom: -20px;
  background: #f8f6f0; }

.breadcrumb__list {left: 0;  right: 0;  margin: auto;  position: relative;  color: #333; float: left}
.breadcrumb__list  a:hover { color:#ffcc00; text-decoration: underline }

#color_box {background: #f8f6f0;  padding: 20px;  border-radius: 16px;margin-top: 30px;}

.description_grid{float: left;  width: calc(33.3% - 20px);  margin: 0 10px 20px 10px;}
.description_grid  li { border-bottom:2px dashed #d3d3d3;padding: 10px 0;}


 .description_grid ul  li::marker { content: '\2724';  color: #0067b3;            font-size:20px        }
.logo_bottom { display: none}
.menu__item--level-1 { } 

.tabs{
z-index: 1;
position: relative;
}
.region--content{
z-index: 1;
position: relative;
	}
	
.cd-apply {
  display: inline-block;
  position: fixed;
  opacity: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 50px;
  width: 50px;
  bottom: 115px; border-radius:50%;
  right: 50px;
  z-index: 10;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border: 1px solid #fff;
  box-shadow: 0px 0px 5px #999;
  background: #feb811 url(../images/apply.png) no-repeat center center; background-size: auto 75%;

}
.cd-top {
  display: inline-block;
  position: fixed;
  opacity: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  height: 50px;
  width: 50px;
  bottom: 50px; border-radius:50%;
  right: 50px;
  z-index: 10;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border: 1px solid #fff;
  box-shadow: 0px 0px 5px #999;
  background: #f58221 url(../images/cd-top-arrow.svg) no-repeat center center;

}
.cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
  background: #feb811 url(../images/cd-top-arrow.svg) no-repeat center center;
}
.cd-apply:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
  background: #fe9711 url(../images/apply.png) no-repeat center center; background-size: auto 75%;
}
.cd-apply.cd-is-visible2 {  visibility: visible;  opacity: 1;}
.cd-top.cd-is-visible {  visibility: visible;  opacity: 1;}
.cd-apply.cd-fade-out2{  opacity: .9;}
.cd-top.cd-fade-out {  opacity: .9;}



.no-touch .cd-top:hover {
  background-color: #40498a;
  opacity: 1;
}

.registration ul{ list-style: none;  margin: 0;  padding: 0;display: flex;
  align-items: center;
  justify-content: center;}
.registration ul li {margin-left: 20px;}
.registration #ig a{mask-image: url(../images/SVG/ig.svg);  background-color: #1262a1;display: block;
  width: 30px;  height: 30px;mask-repeat: no-repeat; background-size: contain;}

.registration #yt a{mask-image: url(../images/SVG/yt.svg);  background-color: #1262a1;display: block;
  width: 40px;  height: 30px;mask-repeat: no-repeat;background-size: contain;}

.registration  #event a{ display: block; background: #f58221;  color: #fff;  padding: 5px 20px;  border-radius: 50px; white-space: nowrap;}
.registration  #event a:hover { background: #00528f;}
	
.registration a { position: relative; top: 0}
.registration a:hover {top: -5px;transition: all 0.3s ease-in-out;}

#ig { margin-left: 0}	

.btn_m { display:none !important}

#small_text { font-size: 24px;	font-weight: normal;line-height: 46px; }

#block-olivero-views-block-video-block , #block-olivero-views-block-video-block-1, #block-olivero-views-block-video-block-2{ float: right;  width: 45%;}
#block-olivero-video-tab { float: right;  width: 45%; margin: 40px 0px 0px 0; }
.video_tab {}
.video_tab ul { list-style: none;  margin: 0; padding: 0;}
.video_tab ul  li {float: left;  color: #333;  }
.video_tab ul  li p{ padding:0 15px;}
.video_cover figure {clip-path: none;}
.video_cover figure img{width: 100%;}

.video_tab .title {  text-align: left; 
  position: relative;  padding: 40px 0 0 40px;  margin-bottom: 0;}
.video_tab .tablinks { padding: 13px 0 ; border-bottom:2px solid rgba(255,255,255,0); }
.video_tab .title::before {  content: '';  position: absolute;  background: url(../images/video_bubble.png) no-repeat;    background-size: auto;  background-size: contain;  width: 217px;  height: 54px;  top: 0;  left: -20px;}


.tab .title::before {  content: '';  position: absolute;  background: url(../images/activities_bubble.png) no-repeat;    background-size: auto;  background-size: contain;  width: 217px;  height: 54px;  top: 0;  left: -20px;}

.video {
    width: 100%;
    padding: 0;
        padding-bottom: 0px;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.video iframe {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border: 0;
}

.video_tab .active { color:#feb811; border-bottom:2px solid #feb811; position:relative; z-index:1}
.latest_video  .blocktitle { margin: 0 !important;}
.video_box {background: #feb811;  padding: 15px;  margin: 0px 0;  border-radius: 16px;}
.video_cover {border-radius: 16px;overflow: hidden; }


.breadcrumb__content {max-width: 1600px;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;}

.breadcrumb__content ol li:nth-child(1) a{ background: url(../images/icon_home.png) no-repeat left center ; padding-left:25px;   }

.activities_block  {float: left;  width: 100%;position: relative;  z-index: 1;padding: 50px 0;}
.activities_block .Block_A ul , .notice_block .Block_A ul{ display: block;}


.activities_block::before {
    content: '';
    display: block;
    height: 100px; /* The offset you want */
    margin-top: -100px; /* Same value as height */
    visibility: hidden;
}

.activities_tab { position: relative; z-index: 1}
.activities_tab ul { margin: 0;  list-style: none;  padding: 0; }
.activities_tab ul li { float: left;  width: auto;  margin: 0 1%;  padding: 10px 5%;  border-top-left-radius: 16px;
  border-top-right-radius: 16px;}


.teenager_activities ,#teenager_activities { background: #9bbd20;}
.teacher_activities, #teacher_activities { background: #40a8c1;}
.parents_activities ,#parents_activities{ background: #f29590;}
.community_activities , #community_activities{ background: #7169a4;}


.youth_block , .teacher_block, .parents_block, .community_block, .notice_block{ float: left;margin-bottom: 30px;}

.youth_block  .blocktitle ,.teacher_block  .blocktitle ,.parents_block  .blocktitle ,.community_block  .blocktitle, .notice_block  .blocktitle{ color:#fff;text-align: left;  margin: 0 20px; min-height: 60px;}
.youth_block  .Block_A ,.teacher_block  .Block_A ,.parents_block  .Block_A ,.community_block  .Block_A ,.notice_block  .Block_A { background: #fff; border-radius: 16px;padding: 20px;  margin: 0 20px;}
.youth_block  .Block_A ul li ,.teacher_block  .Block_A ul li,.parents_block  .Block_A ul li ,.community_block  .Block_A ul li,.notice_block  .Block_A ul li { float: left ; border-bottom: 2px dashed #6c6c6c;}

.activities_title { font-size: 28px;    padding: 15px 0;  }
.activities_content p{float: left;width: 100%; }
.activities_content { padding: 10px 0}



.activities_box a , #download_btn {
    float: none; margin-top:7px; margin-bottom:7px;
    display: inline-block;
    background: #f3b524;
    color: #fff;
    padding: 5px 40px;
    border-radius: 30px;
    font-size: 21px;
}

.menu__link--nolink{ color:#fff !important; cursor:context-menu}

.activities_box a:hover ,  #download_btn:hover { background:#666}

.activities_area a {
    float: none; margin-top:7px; margin-bottom:7px;
    display: inline-block;
    background: none;
    color: var(--main-color); text-decoration:underline;
    padding: 0px;
    border-radius: 0px;
    font-size: 16px;
}
.activities_area a:hover { color: var(--main2-color); background:none; text-decoration:none;}

.activity_tabs{}
.activities_box .activities_cover a { float: none; display: block;background: none;  padding: 0px ;  border-radius: 0px; margin:0}

.activities_intro_teenager {margin-bottom: 30px;}
.activities_intro_teenager  p {padding: 0 0 0 40px;  color: #fff;  vertical-align: middle;  display: table-cell;}

.notice_block .activities_cover{ float:left; width:28%; margin-right:5%}

.notice_block .activities_content{ float:right; width:100%}

    .area_stop {
            scroll-margin-top: 120px; /* Add 100px spacing above the element */
  
            margin-top: 1000px; /* To simulate scrolling */
        }
    #form , #parents_activities, #teenager_activities, #teacher_activities, #community_activities{
            scroll-margin-top: 230px; /* Add 100px spacing above the element */
        }
#blue_one { float:left}
#white_one::before {  background: url("../images/one_white.png") no-repeat center;}  
#blue_one::before {   background: url("../images/one_yellow.png") no-repeat center;  }
  #white_one  h1 { color:#fff;}
#blue_one  h1 {color: #1659a0;}
#white_one  h1 , #blue_one  h1 { font-size: 48px; line-height:52px;  line-height: normal;}
#white_one   , #blue_one  {   position: relative;  padding: 0 0 0 70px;  vertical-align: middle;  display: table-cell;}
 #white_one::before , #blue_one::before  {   content: '';  position: absolute; width: 70px;  height: 79px;  background-size: contain;  left: 0;  top: 0;  bottom: 0;  margin: auto; }
  
.activities_cover { border-radius: 16px;overflow: hidden;}
.activities_cover img{ width: 100%}
/* 設置 characters 的基本樣式 */
.characters ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 70px 0 50px 0; justify-content: space-between;
}
.newsinfo_title {font-size: 48px;
line-height: 52px;
line-height: normal;}

.characters li {
    position: relative; /* 用來定位 span */
    margin: 0 10px; /* 每個角色之間增加間距 */
}

.characters img {
    height: auto;
    cursor: pointer; /* 當鼠標移動到圖片上時顯示手指圖標 */
}
#bottom-left .info-container_flex{top: 42px;left: -10px;}

/* 隱藏 span 預設為不顯示 */
.characters li span {
    position: absolute;
    top: -100px; /* 將 span 放在角色圖片的上方 */
    left: 50%; width:100%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none; /* 防止 span 本身影響鼠標事件 */
}

.characters li span img {
    width: 100%; /* 設置氣泡圖片的大小 */
    height: auto;
}

/* 當鼠標懸停時顯示 span 並添加動畫效果 */
.characters li:hover span {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px); /* 添加一點彈跳效果 */
}

.ig_links { display: inline-block; font-size:19.5px; line-height:28px; border-left:5px solid #feb811; padding:12px 45px 12px 15px; box-shadow: 0 0 5px rgba(0,0,0,.2); margin:20px 0 50px 0; background: linear-gradient(to left, #ffffff 50%, #feb811 50%); 
background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }

.ig_links:hover { background-position: left bottom; color:#fff !important;}

.node__content time { margin:10px 0 20px 0;}

.btn_back{ margin:0px auto; text-align: center; margin-top:50px; margin-bottom:50px;}
.btn_back a{ display: inline-block; padding:10px 50px; color:#fff !important;  background: linear-gradient(to left, #0067b3 50%, #feb811 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.btn_back a:hover { background-position: left bottom; color:#000 !important;}

#click-count{display:none;}

.user-logged-in #click-count{display:block !important;}

.home-clear{right:35px;    top: 35px;}

#clearButton{cursor: pointer;}

.notice_block .Block_A ul li .activities_box{ display:flex ; align-items: center; padding:10px 0 }

.home-clear{
  top: 35px !important;
  right:0;
}
#clearButton{font-size: 16px;
  font-style: normal;
  font-weight: 500;background-color:#ffd800;padding:3px 15px;border-radius:15px;color:#000; border: 0;}
#clearButton:hover{background-color:#cbff0f;color:#000;}
#click-count{text-align: right;}