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

html,
body {
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
font-weight: 400;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}



#page-wrapper {}

:root {
  --main-color: #2c3362;
  --main2-color: #d69253;
  --main3-color: #3b3286;
  --main4-color: #f5f9ff;
}

.region>* {
  margin: 0;
}

.editingAdd {
  position: absolute;
  top: -35px;
}

.home-add {
  top: 35px !important;
}

#add_normal {
  position: relative;
  top: 0;
  padding: 10px;
}

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

.editingAdd a:hover {
  background-color: #cbff0f !important;
  color: #000 !important;
}

.view-content {
  clear: both
}

/* .swiper-slide .editing a {
  display: block !important;
} */

#banner_editing {
  position: absolute;
  left: 45px;
  z-index: 2
}

.topBanner_editing {
  bottom: 50px !important;
  top: auto !important
}

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

#main_content a,
#main_content a:visited {
  color: #00266e;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#main_content a:hover {
  color: #ffa800;
  text-decoration: underline;
}

.view-header {
  position: relative;
}

.clear {
  clear: both;  
}

img {
  border: 0;
}

div,
ul li {
  margin: 0px auto;
  padding: 0px;
}

.pager {
  display: inline-block
}

#page-wrapper {}

#page img {
  max-width:none; width: auto
}

#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
}

#block_publication {
  margin: 0 0;
}

#header .screen {    max-width: 100%; }
.screen {
  position: relative;
  padding: 0px 30px;
  max-width: 1380px;
  margin: 0 auto;
  width: 100%;
}

footer .screen{
max-width: 1600px !important;
}

.container {
  max-width: 100%
}

.wide-content {
  width: auto;
  margin: 0
}

.breadcrumb {
  font-size: 15px;
  padding: 0 0;
}

.breadcrumb a {
  color: var(--main-color);
}

.block-views-blockslideshow-block-1 {
  position: relative;
}

#news1,
#news2,
#news3 {
  max-width: 80% !important
}

h1,
h2 {
  font-weight: 600;
  margin: 0;
}

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

h1 {
  font-size: 38px;
  line-height: 42px;
  color: #19110c;
  text-transform: uppercase;
  padding-bottom: 30px;
}

h2 {
  font-size: 34px;
  line-height: 38px;
  color: var(--main2-color);
  padding-bottom: 20px;
}

h3 {
font-size: 26px;
  line-height: 32px;
  color: #23acf9;
  margin-bottom: 20px;
  padding: 5px 0;
  display: flex;
  align-items: center;
  align-content: center;
  gap: 8px;
}

/* h3::before {
content: "";
  display: inline;
  width: 22px;
  height: 22px;
  border: 4px solid #a5d8f3;
  border-radius: 50%;
} */

h4 {
  font-size: 19px;
  margin: 0px;
  color: #c9a835;
  line-height: 33px;
  padding: 5px 0;
}

h5 {
  font-size: 19px;
  margin: 0px;
  color: var(--main2-color);
  line-height: 33px;
  padding: 5px 0;
}

h6 {
  font-size: 19px;
  margin: 0px;
  color: var(--main3-color);
  line-height: 33px;
  padding: 5px 0;
}

.title,
.blocktitle,
.sch_highlights b,
#banner_title h1,
.banner_title h1 {
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
  margin: 5px 0;
  padding: 5px 0;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0;
  position: relative;
  color: #333;margin-bottom: 20px;
}



p {
  margin: 0px;
  padding: 0px;
}

.blocktitle {
  text-align: center;
  font-size: 36px;
  text-align: center;
  margin-bottom: 60px;
  color: var(--main-color);
  line-height: 42px;
}

.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 {
  background: linear-gradient(to bottom, #fff, #fffffff0, #ffffff94, #fff0);
  min-height: 150px;
  z-index: 3;
  width: 100%;
  position: absolute;
}

#header_top {}



#header .screen {
  display: flex;
  align-items: flex-start;
}

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

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


.site-branding {
  margin-left: 0;
  /* padding: 40px 10px 10px 0px; */
      padding: 25px 10px;
}


.right_top {
  display: flex;
  margin-right: 0;
  padding: 0 24px;
  border-radius: 100px;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  background: rgba(255, 255, 255, 0.7);
  align-items: center;
  box-shadow: 0px 5px 10px rgba(50, 76, 99, 0.3);
  z-index: 1; margin-top:40px;
}

.sticky .right_top {
  box-shadow: none;
}

#lang {
  margin: 10px 0;
  padding: 0;
  float: right;
  font-size: 14px;
  white-space: nowrap;
}

#lang ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

#lang ul li {
  margin: auto 5px;
}

#lang ul li.is-active {
  display: none;
}

#lang ul li a {
  background: #6AA2D3;
  color: #fff;
  display: flex;
  justify-content: center;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  text-decoration: none;
}

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

#lang ul li a.is-active {
  background: var(--main-color);
  color: #fff;
}

#page img {
  max-width: 100%;  width: 100%;
}
/* 
.home_zoneA {
  overflow: hidden;
} */

.home_zoneB {}

.home_zoneC {
  position: relative;
}

.bg_wave {
  position: relative;
  background: url(../images/web/bg_top3.png) no-repeat;
  background-size: cover;
  left: 0%;
  top: 0;
  width: 100%;
  aspect-ratio: 640 / 149;
  margin-top: 0;
  margin-bottom: -150px;
}


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


.more-link {
  position: relative;
}

.more-link a {
  font-size: 17px;
  line-height: 32px;
  padding: 5px 68px 5px 50px;
  border: 2px solid #16589A;
  color: 16589A;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
}

.more-link a:hover {
  padding: 5px 80px 5px 62px;
  background-color: #16589A !important;
  color: #fff;
  border-color: #16589A;
}


.view-more a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.view-more a::after {
  position: absolute;
  content: "";
  background: url(../images/web/arrow.png) no-repeat;
  background-size: contain;
  width: 26px;
  aspect-ratio: 1 / 1;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

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

.region--breadcrumb {
  margin: 0 0 50px 0;
  padding: 10px 0 0 0;
}

@media screen and (min-width:577px) {
  #page:not(.node) .region--hero {
 /* height: 100vh;
    max-height: 100vh; */
    margin-bottom: 200px;
  }
}

.region--hero {

  padding: 250px 0 0;
  overflow: hidden;
}


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

#logo img { 
  max-height: 80px;
  height: auto; max-width:330px; min-width:330px;
}

.sch_highlights {
  background: url(../images/ctcampus/bg_main.png) no-repeat center top;
  padding: 50px 0;
  background-size: cover;
}

.sch_highlights .title {
  padding: 5px 0 5px 5%;
}

/* .sch_highlights .title::before {
  z-index: 0;
  position: absolute;
  pointer-events: none;
  content: "";
  left: -46%;
  width: 50%;
  height: 3px;
  background: #313cae;
  top: 28px;
} */

[data-aos="sch_highlights_animate"].aos-animate .title::before {
  content: "";
  z-index: 0;
  position: absolute;
  pointer-events: none;
  left: -46%;
  width: 50%;
  height: 3px;
  background: #313cae;
  top: 28px;
  opacity: 0;
  animation: rightAnimate 0.25s linear;
  animation-fill-mode: forwards;
}

@keyframes rightAnimate {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scaleX(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
    transition: 1s ease-in-out 3s;
  }
}


.sch_highlights b {
  color: #fff;
  font-size: 28px;
  line-height: 34px;
  padding: 0;
  margin: 0;
}


.sch_highlights ul {
  display: grid;
  padding: 50px 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
}

.sch_highlights ul li {
  width: calc(100% - 2px);
  padding: 1px;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.sch_highlights ul li span,
.sch_highlights .boxing {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  color: #fff;
  font-size: 21.5px;
  padding: 30px 0;
  background: linear-gradient(0deg, rgba(44, 51, 98, 1) 20%, rgba(44, 51, 98, 0) 100%);
  margin: 0
}

.bg_god_msg {
  background: url(../images/ctcampus/students.png) no-repeat left center #2f3563;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}

.bg_god_msg .screen {
  background: url(../images/ctcampus/sch_logo.png) no-repeat right center;
  background-size: auto 75%
}

.bg_god_msg .title {
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, .2)
}

.bg_god_msg .contents {
  float: right;
  width: 45%;
  color: #fff;
  background: rgba(47, 53, 99, .7);
  margin: 90px 0;
  padding: 15px;
}

.bg_whystcc {
  background: url(../images/ctcampus/stcc_intro.png) no-repeat #222a5b;
  background-position: 100% 0%;
  background-size: auto 100%;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}

.bg_whystcc .title {
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, .2)
}

.bg_whystcc ul {
  list-style: none;
  margin: 0 0 0 -3.3%;
  padding: 20px 0;
}

.bg_whystcc ul li {
  float: left;
  width: calc(50% - 3.3%);
  margin: 0 0 30px 3.3%;
  background: rgba(0, 0, 0, .2);
  text-align: center;
  padding: 0px 0;
  color: #fff;
  font-size: 42px;
  line-height: 50px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: #222a5b6b;
}

.bg_whystcc ul li .box_why {

  margin: 0px 0;
  position: relative
}


.bg_whystcc .contents {
  width: 65%;
  float: left;
}

.node__content {
  clear: both;width: 100%;
}

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


#banner_title,
.banner_title,
#nonbanner_title {
  background-image: url(../images/ctcampus/inner_banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  pointer-events: none;
  background-position: center center;
}

#banner_title h1,
.banner_title h1,
#nonbanner_title h1 {
  color: #fff;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  padding: 300px 0 50px 5%;
  margin: 0;
  z-index: 1
}

#banner_title h1::before,
.banner_title h1::before,
#nonbanner_title h1::before {
  z-index: 0;
  position: absolute;
  pointer-events: none;
  content: "";
  left: -46%;
  width: 50%;
  height: 1px;
  background: #fff;
  bottom: 67px;
}

#banner_title::after,
.banner_title::after,
#nonbanner_title::after {
  pointer-events: none;
  content: "";
  background: url(../images/ctcampus/sub_title.png) no-repeat left bottom;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0
}

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

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

#nonbanner_title::after {
  display: none
}

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

#block_latest-news {
  float: left;
  width: 48%;
}

.main_calenadr {
  float: right;
  width: 48%;
}


#block_latest-news .blocktitle {
  position: relative;
  z-index: 1;
}

#block_latest-news .blocktitle p {
  padding: 10px 0px;
  display: inline;
}


.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, #6aa2d3 50%, #d5be7a 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;
}




[data-aos="block_latest-new_animation"].aos-animate#block_latest-news::before {
  content: "";
  position: absolute;
  width: 80%;
  height: calc(100% - 140px - 17vh);
  top: 140px;
  z-index: 0;
  left: 10%;
  background: linear-gradient(to right, #313cae 0%, #313cae 100%), linear-gradient(to top, #313cae 50%, transparent 50%), linear-gradient(to top, #313cae 50%, transparent 50%), linear-gradient(to right, #313cae 0%, #313cae 100%), linear-gradient(to left, #313cae 0%, #313cae 100%);
  background-position-x: 0%, 0%, 0%, 0%, 0%;
  background-position-y: 0%, 0%, 0%, 0%, 0%;
  background-repeat: repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, auto;
  background-size: 100% 4px, 4px 200%, 4px 200%, 0% 4px, 0% 4px;
  background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
  background-repeat: no-repeat, no-repeat;
  transform: scaleX(0) rotate(180deg);
  animation: transformAnimation 0.5s ease-in-out 0.5s forwards,
    positionAnimation 0.5s ease-in-out 1s forwards,
    sizeAnimation 0.5s ease-in-out 1.5s forwards;
}




@keyframes transformAnimation {
  0% {
    transform: scaleX(0) rotate(180deg);
  }

  100% {
    transform: scaleX(1) rotate(180deg);
  }
}

@keyframes positionAnimation {
  0% {
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
  }

  100% {
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
  }
}

@keyframes sizeAnimation {
  0% {
    background-size: 100% 4px, 4px 200%, 4px 200%, 0% 4px, 0% 4px;
  }

  100% {
    background-size: 200% 4px, 4px 400%, 4px 400%, 55% 4px, 55% 4px;
  }
}



.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 {
  background: url('../images/web/footer_office.jpg') no-repeat;
  background-size: cover;
  color: #333;
  font-size: 14px;
}

footer .text-content,
footer a {
  color: #333;
  font-size: 14px
}


footer .power {
  float: right;
}

footer .copyright_container {
  padding: 30px 0;
  background: #B6D4F0;
  overflow: hidden;

}

footer .copyright {
  float: left
}

footer .copyright a,
footer .power a {
  color: #2f3563;
  text-decoration: underline
}

#main_content {
  float: right;
  width: 77%;
  min-height: 500px;
}

#sidebar-nav {
  float: left;
  width: 21%;
}


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

.history_timeline .blocktitle {
  margin: 0;
  padding: 50px 0;
  color: #fff;
}

#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);
  margin: 0;
}

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

#main_content tr th {
  background: var(--main-color);
  color: #fff;
  padding: 5px;
}

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

iframe {
  width: 100%;
  min-height: 350px;
}

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


.index_block {
  background: none
}

.index_block b {
  display: block
}

#page time::before {
content: "";
  position: relative;
  background-color: var(--main-color);
  -webkit-mask-image: url(../images/date.svg);
  mask-image: url(../images/date.svg);
  background-size: cover;
  width: 20px;
  height: 20px;
}

#page time {
  text-align: left;
  display: flex;
  gap: 5px;
  align-items: center;justify-content: center;
  padding: 0;
}


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

.block-info li {
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


.tpl-info {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tpl-info li {
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  background: #fff;
}

.tpl-info li:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
}

.tpl-info li a {
  color: #333;
  display: block;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;text-decoration: none;
}

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

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

.template-A ul li {
  width: calc(100% - 30px);
  background: #fff;
  padding: 15px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  text-align: center;
  border-radius: 20px;
}

.template-A ul li .content{
      display: flex;
    flex-direction: column;
    gap: 10px;
}


.template-A ul li .content > div{
      display: flex;
    align-items: center;
    width: 100%;
}

.template-A ul li .content .date{
  margin-left: 0;
}

.template-A ul li .content .source{
  margin-right: 0;
}

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

.template-B ul li {
  width: calc(100% - 30px);
  background: #fff;
  padding: 15px;
  display: flex;
  margin-bottom: 20px;
  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;
}

/* template-D */

.template-D ul {
  margin: 0 0 0 0%;
  border-top: 2px solid #F00;

}

.template-D ul li {
  display: flex;
  background: #fff;
  padding: 10px 0;
}

.template-D ul li .date span {
  padding: 0px 0 0px 28px;
  background-size: 16px 15px;
  font-weight: bold;
  color: #666;
  font-weight: 400;
  font-family: "Oswald", "微軟正黑體", sans-serif;
}

.template-D ul li .number {
  flex-basis: 10%;
  padding: 5px 10px;
  font-size: 16px;
  margin: 0;
  text-align: left;
  font-weight: bold;
  color: #666;
  font-weight: 400;
  font-family: "Oswald", "微軟正黑體", sans-serif;
}

.template-D ul li .title {
  flex-basis: 50%;
  padding: 5px 10px;
  font-size: 16px;
  line-height: 21px;
  text-shadow: 0 0 0;
  margin: 0;
  text-align: left;
  font-weight: 400;
  color: #333;
  margin: 0 5%;
  font-family: "Oswald", "微軟正黑體", sans-serif;
}

.template-D ul li .download {
  flex-basis: 24%;
  font-size: 16px;
  padding: 0;
  margin: 0;
  text-align: right;
  padding: 5px 20px;
}

.template-D ul li .download a {
  background: url(../images/icon/icon_download.png) no-repeat left;
  background-position: 3px 5px;
  padding: 6px 0 6px 30px;
  line-height: 19px;
  background-size: 23px 23px;
  display: inline;
  font-weight: bold;
  color: #666;
  font-family: "Oswald", "微軟正黑體", sans-serif;
  transition: all 0.3s ease;
}

.template-D ul li .download a:hover {
  background: url(../images/icon/icon_download.png) no-repeat left;
  background-position: 3px 8px;
  color: #666;
  background-size: 23px 23px
}

.template-D ul li .date {
  flex-basis: 16%;
  font-size: 16px;
  padding: 5px 5px 5px 10px;
  margin: 0;
  text-align: left;
  font-weight: bold;
  color: #666;
}

.template-D ul li p {
  width: auto;
  font-size: 15px;
  font-weight: bold;
  color: #666;
}

.template-D ul li .date time {
  padding: 0px 0 0px 28px;
  background-size: 16px 15px;
  color: #666;
  font-weight: 400;
  font-family: "Oswald", "微軟正黑體", sans-serif;
}

/* new template */

.template-E ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.template-E ul li {
width: 100%;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  text-align: center;
  background: none;
  box-shadow: none !important;
}

.template-E ul li a {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;aspect-ratio: 1 / 1;
}

.template-E ul li a img {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.template-E ul li a:hover img {
  transform: scale(1.05);
}

.template-E ul li > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.template-E ul li a:hover::before {
  opacity: 1;
}

.template-E ul li a .content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 15px; /* Restored your original padding */
  box-sizing: border-box;
  z-index: 2;
  opacity: 0;
  transform: translateY(15px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.6);
}

.template-E ul li a:hover .content {
  opacity: 1;
  transform: translateY(0);
}

.template-E ul li a .content b {
  display: block;
  font-size: 1.15rem;
  line-height: 1.25;
  color: #f6e0b1;
  margin-bottom: 4px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.template-E ul li a .content .role {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.template-E ul li a .content .role p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.template-E ul:has(a:hover) li a:not(:hover) {
    scale: 0.8;
    opacity: 0.7;
}

.template-E ul li a {
    transition: scale 350ms ease, opacity 350ms linear;
}

/*  - end - */

.date time {
  background: url(../images/icon/icon_calendar.png) no-repeat;
  padding: 8px 20px 8px 25px;
  font-size: 16px;
  line-height: 15px;
  display: inline-block;
  background-size: 18px 20px;
  background-position: 0px 25%;
}

@media screen and (max-width:567px) {
  .template-D ul li {
    flex-direction: column;
  }

  .template-D ul li>div {
    width: 100%;
    padding: 5px 10px !important;
    box-sizing: border-box;
  }

  .template-D ul li .date {
    padding: 5px 10px !important;
  }

  .template-D ul li .date span {
    font-size: 16px;
    background-size: 20px !important;
    background-position: 0 50%;
    background-size: 20px;
    padding: 5px 5px 5px 30px;
    display: block;
    color: #fc2130;
    font-size: 16px;
    line-height: 19px;
    display: block;
  }



  .template-D ul li a {
    display: inline-block;
    padding: 0px 0;
    width: 100%;
  }

  .template-D ul li a:hover {
    color: #333;
    text-decoration: none
  }



  .template-D ul li .date span {
    padding: 0px 0 0px 28px;
    background-size: 16px 15px;
  }



  .template-D ul li .number {
    flex-basis: 24%;
    padding: 5px 10px;
    font-size: 16px;
    margin: 0;
    text-align: left;
  }

  .template-D ul li .title {
    flex-basis: 50%;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 19px;
    text-shadow: 0 0 0;
    margin: 0;
    text-align: left;
  }


  .template-D ul li .download {
    flex-basis: 20%;
    font-size: 16px;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .template-D ul li .download a {
    background: url(../images/icon/icon_download.png) no-repeat left;
    background-position: 3px 5px;
    padding: 6px 0 6px 30px;
    line-height: 19px;
    color: #555;
    background-size: 23px 23px;
    display: block;
  }

  .template-D ul li .download a:hover {
    background: url(../images/icon/icon_download.png) no-repeat left;
    background-position: 3px 8px;
    color: #666;
    background-size: 23px 23px
  }

  .template-D ul li .date {
    flex-basis: 16%;
    font-size: 16px;
    padding: 5px 5px 5px 10px;
    margin: 0;
    text-align: left;
  }


  .template-D ul li p {
    width: auto;
    font-size: 15px;
  }
}




#block_gallery {
  margin: -90px 0 50px 0
}

#block_gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.Block_A ul li {
  position: relative;
  width: 100%;
}

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

.Block_B ul li {
  position: relative;
  width: 100%;
  background: #fff;
}

.Block_C ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: scroll;
  max-height: 500px
}

.Block_C ul li {
  position: relative;
  width: 100%;
  background: #fff;
  margin: 0 0;
}

.Block_C ul li a {
  display: flex;
  align-content: center;
}

.Block_C ul li .cover {
  float: left;
  width: 38%
}

.Block_C ul li .content {
  float: right;
  width: 60%;
  padding: 15px 0;
}

.Block_C ul li b {
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color);
}

.public_add {
  top: -98px;
}

.flip_btn,
.pdf_btn {
  display: inline-block;
  margin-top: 15px;
}

.pdf_btn {
  margin-left: 15px;
}

.flip_btn a {
  background: var(--main-color);
  color: #fff !important;
  padding: 10px 20px;
}

.pdf_btn a {
  background: var(--main2-color);
  color: #fff !important;
  padding: 10px 20px;
}


/* .news-card {
  border: 0px solid aqua;
  margin: 1px;
  position: relative;
  overflow: hidden;
  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: relative;
  padding: 5px 10px 15px 10px;
  width: calc(100%);
  color: #333;
  background-color: #fff;
  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: #eae0f0
  }

  .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: #6aa2d3;
}

#ctd-fliters .button {
  background:#6aa2d3;
}

.button--primary {border-color: #467dae;}

#ctd-fliters select {
  color: var(--main-color);
}

#ctd-fliters .button,
#ctd-fliters select {
  font-size: 16px;
  line-height: 24px;
  height: 50px;
}


/* 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:#6aa2d3;
  ;
  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: #6aa2d3;
}


/* 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;
}

.sitemap-item ul {
  display: grid;
  grid-template-columns: repeat(4, 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 {
  padding: 10px 15px; font-weight:650;
  display: block;
  border-bottom: 1px solid #ddd;
  transition: background 0.3s ease;
}

.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: 0;
  display: block;
  border-bottom: 0;
  font-size: 1em;
  font-weight: 500
}

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

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

.sidebar-nav ul a.is-active {
  color: var(--main2-color) !important;
}

.sidebar-nav ul ul {
  background: #eee;
  font-size: 17px;
  line-height: 27px;
}

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

.view-subjects {
  padding: 0;
  margin: 0;
  clear: both;
}

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

.contact_area {
  padding: 30px 0;
  overflow: hidden;
  position: relative;
  z-index: 3
}

.contact_info {
  color: #000;
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.eclass {
  vertical-align: bottom;
  display: table-cell;
  z-index: 1;
  position: relative;

}

.eclass a {
  background: #fc4;
  color: #2f3563;
  padding: 5px 20px;
  border-radius: 8px;
}

.eclass a:hover {
  background: #313cae;
  color: #fc4;
}

.contact_info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  flex: 1;    gap: 100px;
}
.contact_info ul.contact_info_left li{
  margin-left: 0;
}

.contact_info ul.contact_info_left li a,.contact_info ul.contact_info_left li  {
  margin-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-right: 0;
}

.contact_info ul.contact_info_left li span {
  text-wrap: nowrap;
}



.contact_info ul.contact_info_right {
  gap: 50px;
  justify-content: flex-end;
}

.contact_info ul.contact_info_right li {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0;
  text-wrap: nowrap;
}

.contact_info ul.contact_info_left span:first-child {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.contact_info ul.contact_info_left li:nth-child(1) span:first-child {
  background-image: url(../images/web/i_address.png);
}


.contact_info ul.contact_info_left li:nth-child(2) span:first-child {
  background-image: url(../images/web/i_fax.png);
}


.contact_info ul.contact_info_left li:nth-child(3) span:first-child {
  background-image: url(../images/web/i_mail.png);
}


/* 
.contact_info ul.contact_info_right li+li+li span {
  background: url(../images/web/i_fax.png) no-repeat left center;
  background-size: contain;  display: inline-block;
  width: 26px;
  height: 26px;

}

.contact_info ul.contact_info_right li+li span {
  background: url(../images/web/i_mail.png) no-repeat left center;
  background-size: contain;
} */






/* 
.contact_info ul ul li {
  width: auto;
  margin: 5px 5px 0px 5px;
} */



.menu_arrow ul::before {
  /* background-color: white;
  -webkit-mask: url(../images/triangle-up.svg) no-repeat center;
  mask: url(../images/triangle-up.svg) no-repeat center;
  mask-size: cover;
  background-size: cover;
  content: "";
  position: absolute;
  pointer-events: none;
  width: 50px;
  height: 15px;
  top: -15px;
  z-index: 111;
  left: 15px; */
  content: "";
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 15px;
  top: -15px;
  z-index: 111;
  left: 0;
}

@media screen and (max-width: 1400px) {
  .menu_center ul::before {
    left: auto;
    right: 15px;
  }
}

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


.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: 0;
  right: 0;
  z-index: 10;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border: 1px solid #fff;
  box-shadow: 0px 0px 5px #999;
  background: #037CE6 url(../images/ctcampus/cd-top-arrow.svg) no-repeat center center;
  border-radius: 50%;

}

.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: #eb9d4f url(../images/ctcampus/cd-top-arrow.svg) no-repeat center center;
}

.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1;
}

.cd-top.cd-fade-out {
  opacity: .9;
}

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


.cover_bg {
  display: flex;
  justify-content: center;
  align-items: normal;
  padding: 50px 0px;
  width: 100%;
  position: relative;
  min-height: 350px;
  background: url(../images/school.png) no-repeat left top;
  background-position-y: top;
  background-attachment: scroll;
  background-size: auto;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-size: 100%;
  background-position-y: 30%;
}

.index_info {
  position: relative;
  z-index: 1;
  top: 50%;
  left: 0%;
  transform: translateY(-56%);
  text-shadow: #010101a1 1px 0 10px;
  color: #fff;
  font-size: 27px;
  text-align: center;
  line-height: 38px;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 550;
}



.list-item {
  padding: 15px;
}

.list-item ul {
  display: block;
}

.list-item .content {
  display: flex;
  margin: 0;
  width: 100%;
}

.list-item .content time {
  flex: 0 0 20%;
  white-space: nowrap
}

.list-item .content .notice_no {
  flex: 0 0 10%;
}

.list-item .content b {
  flex: 0 0 50%;
}

.list-item .content .download {
  flex: 0 0 20%;
}

.list-item ul li {
  background: none;
  box-shadow: none;
  padding: 15px;
  text-align: left;
  background: #fff;
  margin-bottom: 5px;
  width: 100%
}


.list-item .content .download a {
  background: url(../images/icon/icon_download.png) no-repeat left;
  background-position: 3px 5px;
  padding: 8px 0 3px 30px;
  line-height: 19px;
  color: #555;
  background-size: 23px 23px;
  display: block;
  transition: all 0.3s ease 0s;
}

.list-item .content .download a:hover {
  background: url(../images/icon/icon_download.png) no-repeat left;
  background-position: 3px 8px;
  color: #666;
  background-size: 23px 23px
}

.subjectmenu ul {
  list-style: none;
  margin: 0 0 30px 0;
  background: #fff3d6;
  border-radius: 16px;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-start;
  /* 項目靠左對齊 */

  flex-wrap: wrap;
  /* 允許換行 */
}

.subjectmenu ul li {
  margin: 0 10px;
  position: relative
}

.sub_heading {
  text-align: center;
  padding: 5px 0;
}

.subjectmenu ul li a {
  padding: 5px 15px;
  background: #fff;
  display: block;
  color: var(--main-color) !important;
  border-radius: 6px;
  font-size: 16px;
  line-height: 24px;
}

.subjectmenu ul li a:hover {
  background: var(--main4-color);
}

.subjectmenu ul li a.current {
  background: var(--main-color);
  color: #fff !important;
}

#block-sidebar-nav h2 {}


/* new */
/* latest-new block */
.mySlick button {
  display: none !important;
}

.mySlick .slick-list {
  overflow: visible;
}

.mySlick .slick-track {
  display: flex;
  align-items: flex-end;
}

.mySlick .slick-list {
  position: relative;
  z-index: 1;
}

.mySlick .slick-slide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: all 0.5s ease;
  transform: scale(0.9);
  border-radius: 30px;
}

.mySlick .slick-center img {
  transform: scale(1.05);
  aspect-ratio: 16 / 10;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


/* slideshow title */

.kwmadc__title {
  text-align: center;
  position: relative;

  line-height: 1.5;
  margin-bottom: 50px;
}

.kwmadc__title>p {
  font-weight: 500;
  display: inline;
  position: relative;
}

.kwmadc__title>p::before {
  content: "";
  position: absolute;
  background: url(../images/web/music_a.png) no-repeat;
  background-size: auto;
  background-size: contain;
  right: -50px;
  top: 50px;
  width: 70px;
  aspect-ratio: 64 / 87;
  z-index: -1;
  transform: translateY(-140%);
}

.kwmadc__title>p>.highlight {
  color: #D2BD64;
  font-weight: 700;
}


@media screen and (min-width: 768px) {
  .kwmadc__title>p {
    font-size: clamp(38px, 3vw, 55px);
  }
  .kwmadc__title>p>.highlight {
    font-size: clamp(48px, 4vw, 70px);
  }

  .kwmadc__title.en>p {
    font-size: clamp(18px, 1.5vw, 26px);
  }
  .kwmadc__title.en>p>.highlight {
    font-size: clamp(22px, 1.8vw, 32px);
  }
}


@media screen and (max-width: 767px) {
  .kwmadc__title>p {
    font-size: 28px;
    font-size: 1.5rem;
  }
  .kwmadc__title>p>.highlight {
    font-size: 40px;
    font-size: 2rem;
  }

  .kwmadc__title.en>p {
    font-size: 16px;
    font-size: 1rem;
  }
  .kwmadc__title.en>p>.highlight {
    font-size: 20px;
    font-size: 1.25rem;
  }
}


/* title animation */
.kwmadc__title .highlight {
  display: inline-block;
}

.kwmadc__title .highlight:nth-child(1) {
  background: linear-gradient(120deg, #ffed4a61 0%, #ffed4a3d 100%);
  background-repeat: no-repeat;
  background-size: 0% 40%;
  background-position: left 85%;
  animation: bgDraw 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.kwmadc__title .highlight:nth-child(2) {
  animation: jump 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bgDraw {
  0% {
    background-size: 0% 40%;
    background-position: left 85%;
  }

  15% {
    background-size: 100% 40%;
    background-position: left 85%;
  }

  30% {
    background-size: 100% 40%;
    background-position: right 85%;
  }

  45%,
  100% {
    background-size: 0% 40%;
    background-position: right 85%;
  }
}

@keyframes jump {

  0%,
  50% {
    transform: translateY(0);
  }

  65% {
    transform: translateY(-15px);
  }

  80%,
  100% {
    transform: translateY(0);
  }
}


/* BG */

.kwmadc__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kwmadc__bg::before,
.kwmadc__bg::after {
  content: "";
  opacity: 0;
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;z-index: -1;
}

@media screen and (min-width: 768px) {

  .kwmadc__bg::before,
  .kwmadc__bg::after {
    padding: 41.8% 0 0;
  }
}

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

  .kwmadc__bg::before,
  .kwmadc__bg::after {
    padding: 150% 0 0;
  }
}

.kwmadc__bg::before {
  max-width: 0;
}

@media screen and (min-width: 768px) {
  .kwmadc__bg::before {
    background-image: url("../images/web/bg_top2.png");
  }
}

@media screen and (max-width: 767px) {
  .kwmadc__bg::before {
    background-image: url("../images/web/bg_top2.png");
  }
}

.kwmadc__bg::after {
  max-width: 100%;
  padding: 0;
  left: 150px;
  top: 120px;
}

@media screen and (min-width: 768px) {
  .kwmadc__bg::after {
    background-image: url("../images/web/bg_top5.png");
  }
}

@media screen and (max-width: 767px) {
  .kwmadc__bg::after {
    top: 15%;
    background-image: url("../images/web/bg_top5.png");
  }
}

.kwmadc__bg__last {
  opacity: 0;
  width: 100%;
  max-width: 0;
  position: absolute;
  top: 120px;
  left: 150px;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .kwmadc__bg__last {
    padding: 41.1% 0 0;
    background-image: url("../images/web/bg_top4.png");
  }
}

@media screen and (max-width: 767px) {
  .kwmadc__bg__last {
    top: 15%;
    padding: 140% 0 0;
    background-image: url("../images/web/bg_top4.png");
  }
}

.kwmadc__bg::before {
  animation: bgWave 1.6s forwards;
}

@media screen and (min-width: 768px) {
  .kwmadc__bg::after {
    animation: bgWaveR 1.6s forwards;
    animation-delay: .2s;
  }
}

@media screen and (max-width: 767px) {
  .kwmadc__bg::after {
    animation: bgWaveRSp 1.6s forwards;
    animation-delay: .2s;
  }
}

@media screen and (min-width: 768px) {
  .kwmadc__bg__last {
    animation: bgWave 1.2s forwards;
    animation-delay: .85s;
  }
}

@media screen and (max-width: 767px) {
  .kwmadc__bg__last {
    animation: bgWave 1.5s forwards;
    animation-delay: .55s;
  }
}

@keyframes bgWave {
  40% {
    opacity: 0;
    max-width: 0;
  }

  100% {
    opacity: 1;
    max-width: 100%;
  }
}

@keyframes bgWaveR {
  40% {
    opacity: 0;
    padding: 0;
  }

  100% {
    opacity: 1;
    padding: 40.7% 0 0;
  }
}

@keyframes bgWaveRSp {
  40% {
    opacity: 0;
    padding: 0;
  }

  100% {
    opacity: 1;
    padding: 140% 0 0;
  }
}

/* 香港中小學合唱團普查 */

.kwmadc__data {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 0;
  gap: 30px;
  position: relative;
  margin-top: 20px;
}



.kwmadc__data .header {
    flex-basis: 40%; /* 寬度固定為40% */
    max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  text-wrap: nowrap; z-index:1
}

.kwmadc__data.en .header{
  text-wrap: wrap;
}

.kwmadc__data .header .title {
  position: relative;
  line-height: 1.2;    font-size: 38px;
}

.kwmadc__data .header .title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../images/web/music_b.png) no-repeat;
  background-size: contain;
  width: 250px;
  aspect-ratio: 107 / 88;
 transform: translateY(78%) translateX(-90%);

}

.kwmadc__data .header .title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -70px;
  background: url(../images/web/music_c.png) no-repeat;
  background-size: auto;
  background-size: contain;
  width: 280px;
  aspect-ratio: 837 / 367;
  transform: translateY(-100%);
  z-index: 1;
}

.kwmadc__data .title {
  color: #1a1a1a;
  
  letter-spacing: 1px;


  font-weight: 550;
}

.kwmadc__data.en .title {
  text-align: right;
  font-size: clamp(24px, 2vw, 36px);
  line-height: 1.3;
  padding-right: 0;
  display: inline-block;
}

.kwmadc__data .subtitle {
  font-size: 20px;
  color:#333;
  margin: 0;
  text-align: right;
  font-weight: 500;
}
.kwmadc__data .content {
 flex-basis: 60%; /* 寬度固定為60% */
    max-width: 60%;
  flex-direction: column;
  align-items: flex-start;
}



.kwmadc__data .data-display {
  margin: 0
}



.kwmadc__data.en .label {
  font-size: clamp(14px, 1.1vw, 17px);
}


.kwmadc__data .percentage {
  font-size: clamp(25px, 8vw, 100px);
  font-weight: bold;
  background: linear-gradient(to right, #d2b551, #c2b794, #a18627);
  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  line-height: 1;
}

.kwmadc__data.en .percentage {
  font-size: clamp(32px, 4.5vw, 68px);
  word-break: keep-all;
}

.kwmadc__data .nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 30px;
  width: 100%;
  position: relative;
  flex-wrap: wrap;
}

.kwmadc__data .nav-item {
  font-size: 15px;
  color: #666;
  cursor: pointer;
  padding: 12px 15px;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.kwmadc__data.en .nav-item {
  font-size: 13px;
padding: 8px 10px;
  white-space: nowrap;
}


.kwmadc__data .nav .nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #EEEEEE;
  border-radius: 10px;
  z-index: 1;
}

.kwmadc__data .nav-item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid #a5d8f3;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.kwmadc__data .nav-item:hover,
.kwmadc__data .nav-item.active {
  color: #29aae1;
}

.kwmadc__data .nav-item:hover::before,
.kwmadc__data .nav-item.active::before {
  border-color: #29aae1;
  background-color: #29aae1;
}

.kwmadc__data .nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: transparent;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  z-index: 3;
}

.kwmadc__data .nav-item:hover::after,
.kwmadc__data .nav-item.active::after {
  background-color: #29aae1;
}


.kwmadc__data .nav-item {
  color: #666;
  cursor: pointer;
  padding: 12px 15px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}


.kwmadc__data .nav-item::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 3.5px solid #a5d8f3;
  border-radius: 50%;
}


.kwmadc__data .nav-item.active {
  color: #29aae1;
}

.kwmadc__data .nav-item.active::before {
  border-color: #29aae1;
  background-color: #fff;
}




/* block_activity */
#block_activity .block_activity_container {
  margin-bottom: 80px;
}

#block_activity .block_activity_container .screen {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}

#block_activity .blocktitle {
  color: #005baa;
  font-weight: 400;
  position: relative;
  letter-spacing: 3px;
}

#block_activity .blocktitle::before {
  position: absolute;
  content: "";
  background: url(../images/web/title_bg.png) no-repeat;
  background-size: contain;
  left: -40px;
  top: 20px;
  width: 200px;
  aspect-ratio: 509 / 281;
  transform: translateY(-50%);
  z-index: -1;
}

#block_activity .blocktitle,
#block_activity .view-more {
  margin: 0;
  padding: 0;
  margin-left: 40px;
}

#block_activity .slick-list {
  max-width: 95%;
  margin: 0 auto;
  padding: 50px 0;
}

#block_activity .slick-slide figure {
  border-radius: 25px;
  border: 5px solid #cebd86;
}

#block_activity .slick-slide .news-card a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}

#block_activity b {

  text-align: center;
}



#block_activity .news-card__text-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 10px;
  padding: 10px 25px 10px 15px;
  border-radius: 30px;
  color: #ad9130;
  max-width: 100%;
}


/* #block_activity .slick-slide .news-card__text-wrapper::before {
  content: "";
  position: relative;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
} */

#block_activity .slick-slide .news-card__text-wrapper span{
    position: relative;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

/* 
#block_activity .slick-slide:nth-child(4n+1) .news-card__text-wrapper::before {
  background-image: url('../images/web/icon1.png');
}

#block_activity .slick-slide:nth-child(4n+2) .news-card__text-wrapper::before {
  background-image: url('../images/web/icon2.png');
}

#block_activity .slick-slide:nth-child(4n+3) .news-card__text-wrapper::before {
  background-image: url('../images/web/icon3.png');
}

#block_activity .slick-slide:nth-child(4n+4) .news-card__text-wrapper::before {
  background-image: url('../images/web/icon4.png');
} */

#block_activity .slick-slide[data-slick-index]:nth-of-type(odd) .news-card__text-wrapper {
  border: 3px solid #ffc300;
}

#block_activity .slick-slide[data-slick-index]:nth-of-type(even) .news-card__text-wrapper {
  border: 3px solid #fbdeaa;
}


  #block_activity .slick-slide[data-slick-index]:nth-of-type(even) {
    transform: translateY(-50px);
  }


/* page bg */
#page {
  position: relative;
}

#page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/web/bg.jpg);
  opacity: 0.5;
  z-index: -1;
}

/* toolbar */
.toolbar-tray {
  margin: 0 !important;
}

/* node */
.node{
 display: flex;
  flex-direction: column;
  margin: 0;
}

.node .main_content{
  width:100%;
  flex-grow: 1;
  position: relative;
  /* overflow: hidden; */
}

.node .main_content::before{
content: "";
  position: absolute;
  top: 65%;
  width: 100%;
  background: url(../images/web/bg_top3.png) no-repeat; position:fixed; opacity: .35 !important;
    background-size: auto;
  background-size: auto;
  background-size: auto;
  background-size: cover;
  left: 0;
  z-index: -1;
  padding: 26% 0 0;
}

.node .main_content.animate-wave::before {
  animation: bgWave 1.6s forwards;
}

@media screen and (min-width:961px){
.node .main_content .screen{
    padding: 0 80px;
}

}

.node .main_content img{
  border-radius: 20px;
}

.node .main_content h1 {
  display: inline-block;
}


.node .main_content ul li::marker {
  color: #c6a52d; 
}

.node .boxing:not(.text-content){
  margin-bottom: 30px;
}

.node .boxing:not(.text-content) .title{
  margin-bottom: 20px;
  font-size: 26px;
  line-height: 32px;
  color: #23acf9;
  margin-bottom: 20px;
  padding: 5px 0;
  display: flex;
  align-items: center;
  align-content: center;
  gap: 8px;
}

/* .node .boxing:not(.text-content) .title::before {
content: "";
  display: inline;
  width: 22px;
  height: 22px;
  border: 4px solid #a5d8f3;
  border-radius: 50%;
} */

.node .boxing:not(.text-content) .Album{
  background: #f5f5f3;
padding: 20px;
    border-radius: 30px;
     display: flex;
    flex-direction: column;
    gap: 15px;
}

.node .boxing:not(.text-content) .Album > *{
  width:100%;
  margin: 0;
  padding: 0;
}

.node #content{
  position: relative;
}

.node #content::before{
content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/web/music_b.png) no-repeat;
    background-size: auto;
  background-size: auto;
  background-size: contain;
  width: 250px;
  aspect-ratio: 107 / 88;
  top: 22%;
  left: 0;
  z-index: -1;
  opacity: 0;
}

.node #content::after{
content: "";
  position: fixed;
  right: 5%; top:20%;
  background: url(../images/web/music_c.png) no-repeat;
    background-size: auto;
  background-size: auto;
  background-size: auto;
  background-size: contain;
  width: 320px;
  aspect-ratio: 837 / 367;
z-index: -1;  opacity: 0.7;
}


/* node bg */
.node .kwmadc__bg__last{
  display:none;
}

.node  .kwmadc__bg::after{
  background-image: url("../images/web/node_bg_top2.png");
  background-size: contain;
  background-repeat: no-repeat;top: 0;
  background-position: right;
  animation: bgWave1 1.6s forwards;
    animation-delay: 0s;
    animation-delay: .2s;
     padding: 40.7% 0 0;
     left: 0;
}

@keyframes bgWave1 {
  40% {
    opacity: 0;

  }

  100% {
    opacity: 1;
  }
}


/* awards cat */
.awards_cat .awards_cat__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}

.awards_cat .awards_cat__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
 margin-left: -20px; margin-right: 0;
 transition: all 0.3s ease;text-decoration: none;
}


.awards_cat:hover .awards_cat__item {


}

.awards_cat .awards_cat__item:first-child {
  margin-left: 0;
}


.awards_cat .awards_cat__img-wrapper {
  position: relative;
  width: clamp(120px, 18vw, 240px);
  height: clamp(120px, 18vw, 240px);
  border-radius: 50%;
 background: rgba(255, 255, 255, 0.7);
  border: 2px solid #D9E5F0; 
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.4s ease;
  flex-direction: column;
  gap: 30px;
}



.awards_cat .awards_cat__item:hover .awards_cat__img-wrapper,
.awards_cat .awards_cat__item.active .awards_cat__img-wrapper {
  border-color: #D2BD64; 
}

.awards_cat .awards_cat__img {
  position: relative;
  z-index: 2;
  width: 50%;  
  height: 50%; 
  object-fit: contain;
  transition: transform 0.3s ease;
}

.awards_cat .awards_cat__item:hover .awards_cat__img {
  transform: scale(1.05);
}


.awards_cat .awards_cat__title {
  position: relative;
bottom: 25px;
  left: 0;
 
  font-size: 16px;
  color: #444444;
  font-weight: 500;
  transition: color 0.3s;
  right: 0;
  text-align: center;
  padding: 0 10px;
  line-height: 1.2;
}

.awards_cat .awards_cat__item:hover .awards_cat__title,
.awards_cat .awards_cat__item.active .awards_cat__title {
  color: #D2BD64;
}


/* hover animation */
.awards_cat .awards_cat__item:hover .awards_cat__draw-circle {
  stroke-dashoffset: 0;
}

.awards_cat .awards_cat__item:hover .awards_cat__bg-circle {
  fill: #FCFAF5;
}

.awards_cat .awards_cat__item:hover .awards_cat__img {
  transform: scale(1.05); 
}

.awards_cat  .awards_cat__img-wrapper lord-icon {

  width: 10vw !important;
  max-width: 150px !important;
height: 70% !important;min-width: 80px;
}

.awards_cat .awards_cat__item:hover .awards_cat__title {
  color: #B09A4D;
}


.awards_cat .awards_cat__item.active .awards_cat__draw-circle {
  stroke-dashoffset: 0;
}
.awards_cat .awards_cat__item.active .awards_cat__title {
  color: #B09A4D;
}

.about_area_1 ul{list-style: none;  margin: 0;  padding: 0;  display: flex;justify-content: center;

flex-wrap: wrap;
}
.about_area_1 ul li { margin: 0 0 0 -30px;
 width: 250px;
  height: 250px;
  background: #ffffffd6;
  border: 10px solid #86c0e8;
  border-radius: 50%;display: flex;
  justify-content: center;
  align-items: center; }
.about_area_1 ul li::after { content:"" }

.about_title { text-align: center;display: flex;    align-items: baseline;
    justify-content: center;}
.counter, 	.about_title  span {font-size: 42px; line-height:55px;
  font-weight: bold;
  color: #1ba9fa;
margin: 0;}
	.about_box p {margin: 0;line-height: 30px;}
	.about_box {text-align: center;width: 70%;font-size: 26px;line-height: 36px; }


.audio-section img {  max-height: 570px;}

.field-cover { float: left; width: 30%}
.instructors_content {float: left; width: 70%;
  padding: 0 0 0 40px;}
.instructors_content h1 { color:#23acf9}

/* #block-olivero-h1title h1 {margin: 0 0 0 70px;} */
#challengeChart  { --label-width: 245px;margin: 0 auto; }
 .challenge-chart { width: min(900px, 100%); }
#challengeChart div { margin:0}

  #challengeChart  .chart-grid {
      display: grid;
      grid-template-columns: var(--label-width) minmax(0, 1fr);
      row-gap: 13px;
      align-items: center;
    }

     #challengeChart  .y-label {
      padding-right: 14px;
      color: #333;
      font-size: 15px;
      line-height: 1.45;
      text-align: right;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    #challengeChart   .bar-area {
      position: relative;
      height: 27px;
      min-width: 0;
      overflow: visible;
      border-left: 1px solid #969696;
      background-image: linear-gradient(to right, #e1e1e1 1px, transparent 1px);
      background-size: 12.5% 100%;
    }

    #challengeChart   .bar {
      position: relative;
      width: 0;
      height: 100%;
      border-radius: 0 2px 2px 0;
      transition: width 900ms cubic-bezier(.22, 1.30, .38, 1);
    }

  #challengeChart     .bar-value {
      position: absolute;
      top: 50%;
      left: calc(100% + 12px);
      transform: translate(-7px, -50%);
      color: #202020;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 240ms ease 620ms, transform 240ms ease 620ms;
    }

   #challengeChart    .bar.is-animated .bar-value {
      opacity: 1;
      transform: translate(0, -50%);
    }

    #challengeChart   .orange { background: #ff7c43; }
    #challengeChart   .blue { background: #55b6d0; }
    #challengeChart   .pink { background: #cf6ca8; }
   #challengeChart    .green { background: #77d18e; }
    #challengeChart   .coral { background: #ff7a6e; }
     #challengeChart  .purple { background: #8b93e9; }
     #challengeChart  .yellow { background: #f3cc61; }

    #challengeChart   .x-axis {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin-left: var(--label-width);
      padding-top: 9px;
      border-top: 1px solid #777;
      color: #555;
      font-size: 13px;
    }

    #challengeChart   .x-axis span:nth-child(1) { text-align: left; }
     #challengeChart  .x-axis span:nth-child(2),
    #challengeChart   .x-axis span:nth-child(3),
    #challengeChart   .x-axis span:nth-child(4) { text-align: center; }
     #challengeChart  .x-axis span:nth-child(5) { text-align: right; }

  

    @media (max-width: 680px) {
        #challengeChart { --label-width: 155px; }
        #challengeChart    .chart-grid { row-gap: 11px; }
        #challengeChart    .y-label { padding-right: 10px; font-size: 13px; }
        #challengeChart    .bar-area { height: 24px; }
        #challengeChart   .bar-value { left: calc(100% + 7px); font-size: 12px; }
         #challengeChart   .x-axis { font-size: 12px; }
    }

    @media (max-width: 390px) {
        #challengeChart  { --label-width: 125px; }
        #challengeChart    .y-label { font-size: 12px; }
        #challengeChart    .bar-value { font-size: 11px; }
    }

    @media (max-width: 390px) {
 
        #challengeChart    .y-label { font-size: 12px; }
         #challengeChart   .bar-value { font-size: 11px; }
    }
 
 
     #impactChart { --label-width: 170px; }
  #impactChart {width: 100%;
  padding: 0px 60px 0 0px; }

        #impactChart  .legend {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      margin: 0 0 16px;
      color: #333;
      font-size: 14px;
    }
        #impactChart div { margin:0}
        #impactChart  .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

        #impactChart  .legend-colour {
      width: 11px;
      height: 11px;
      border-radius: 2px;
    }

        #impactChart  .c5 { background: #ff7b72; }
        #impactChart  .c4 { background: #ffa64f; }
        #impactChart  .c3 { background: #ffda68; }
       #impactChart   .c2 { background: #70c9df; }
       #impactChart   .c1 { background: #9ca4ee; }

        #impactChart  .chart-grid {
      display: grid;
      grid-template-columns: var(--label-width) minmax(0, 1fr);
      row-gap: 14px;
      align-items: center;
    }

        #impactChart  .y-label {
      padding-right: 13px;
      color: #333;
      font-size: 14px;
      line-height: 1.35;
      text-align: right;
      white-space: normal;
      overflow-wrap: anywhere;
    }

       #impactChart  .stack-track {
      position: relative;
      display: flex;
      height: 39px;
      min-width: 0;
      overflow: visible;
      border-left: 1px solid #aaa;
      background-image: linear-gradient(to right, #e5e5e5 1px, transparent 1px);
      background-size: 5% 100%;
    }


.segment:last-child span {right: -60px !important;
 
  left: auto !important;}


       #impactChart  .segment {
      position: relative;
      flex: 0 0 0;
      height: 100%;
      overflow: visible;
      transition: flex-basis 820ms cubic-bezier(.22, 1.20, .38, 1);
    }

       #impactChart  .segment-label {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      color: #161616;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.92);
      transition: opacity 220ms ease 570ms, transform 220ms ease 570ms;
      pointer-events: none;
    }

     #impactChart    .segment.show-label .segment-label {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

      #impactChart   .segment.tiny .segment-label {
      left:0;right: 0;
      transform: translate(0, -50%) scale(.92);
      font-size: 11px; text-align: center
    }

     #impactChart    .segment.tiny.show-label .segment-label {
      transform: translate(0, -50%) scale(1);
    }

      #impactChart   .s5 { background: #ff7b72; }
      #impactChart   .s4 { background: #ffa64f; }
      #impactChart   .s3 { background: #ffda68; }
       #impactChart  .s2 { background: #70c9df; }
      #impactChart   .s1 { background: #9ca4ee; }

       #impactChart  .x-axis {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin-left: var(--label-width);
      padding-top: 9px;
      border-top: 1px solid #777;
      color: #555;
      font-size: 13px;
    }

       #impactChart  .x-axis span:nth-child(1) { text-align: left; }
      #impactChart   .x-axis span:nth-child(2),
      #impactChart   .x-axis span:nth-child(3),
      #impactChart   .x-axis span:nth-child(4) { text-align: center; }
      #impactChart   .x-axis span:nth-child(5) { text-align: right; }

  

    @media (max-width: 700px) {

       #impactChart { --label-width: 130px; }
        #impactChart   .legend { gap: 7px 10px; font-size: 12px; }
       #impactChart    .y-label { padding-right: 9px; font-size: 13px; }
        #impactChart   .stack-track { height: 34px; }
       #impactChart    .segment-label { font-size: 10px; }
        #impactChart   .segment.tiny .segment-label { font-size: 9px; }
       #impactChart    .x-axis { font-size: 12px; }
    }

    @media (max-width: 430px) {
       #impactChart { --label-width: 103px; }
      #impactChart     .stack-track { height: 30px; }
       #impactChart    .segment-label { font-size: 9px; }
       #impactChart    .segment.tiny .segment-label { font-size: 8px; }
    }
	
	<!-- -->
	#participationChart {
      --label-width: 142px;
    }
	    .participation-chart {
         width: min(860px, 100%);
    margin: 0 auto;
    }

   #participationChart  div { margin:0}
   #participationChart .chart-grid {
      display: grid;
      grid-template-columns: var(--label-width) 1fr;
      row-gap: 13px;
      align-items: center;
    }

     #participationChart  .y-label {
      padding-right: 12px;
      color: #333;
      font-size: 14px;
      text-align: right;
       white-space: normal;
    }

     #participationChart  .bar-area {
      position: relative;
      height: 27px;
      background-image: linear-gradient(
        to right,
        #dedede 1px,
        transparent 1px
      );
      background-size: 25% 100%;
      border-left: 1px solid #9d9d9d;
      overflow: visible;
    }

     #participationChart  .bar {
      position: relative;
      width: 0;
      height: 100%;
      border-radius: 0 2px 2px 0;
      transition: width 900ms cubic-bezier(.22, 1.30, .38, 1);
    }

     #participationChart  .bar-value {
      position: absolute;
      top: 50%;
      left: calc(100% + 12px);
      transform: translate(-7px, -50%);
      color: #202020;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 240ms ease 620ms, transform 240ms ease 620ms;
    }

    #participationChart   .bar.is-animated .bar-value {
      opacity: 1;
      transform: translate(0, -50%);
    }

     #participationChart  .orange { background: #ff7c43; }
     #participationChart  .blue { background: #55b6d0; }
     #participationChart  .pink { background: #cf6ca8; }
     #participationChart  .green { background: #77d18e; }
     #participationChart  .coral { background: #ff7a6e; }
     #participationChart  .purple { background: #8b93e9; }
     #participationChart  .yellow { background: #f3cc61; }
     #participationChart  .dark-blue { background: #6598e3; }

      #participationChart .x-axis {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin-left: var(--label-width);
      padding-top: 9px;
      border-top: 1px solid #777;
      color: #555;
      font-size: 13px;
    }

     #participationChart  .x-axis span:nth-child(1) { text-align: left; }
     #participationChart  .x-axis span:nth-child(2),
     #participationChart  .x-axis span:nth-child(3),
     #participationChart  .x-axis span:nth-child(4) { text-align: center; }
    #participationChart   .x-axis span:nth-child(5) { text-align: right; }

  

    @media (max-width: 560px) {
 	#participationChart {
      --label-width: 106px;
    }
       #participationChart  .chart-grid { row-gap: 11px; }
       #participationChart  .y-label { padding-right: 9px; font-size: 13px; }
      #participationChart   .bar-area { height: 24px; }
      #participationChart   .bar-value { left: calc(100% + 7px); font-size: 12px; }
    #participationChart     .x-axis { font-size: 12px; }
    }
	
	#participationChart, #impactChart , #challengeChart, .y-label { line-height:19px !important;}

  /* videos */
  #latest-videos ul li .date{
    display:flex;
    gap:10px;
  }

  #latest-videos ul li .date time:nth-child(2)::before{
  display:none;
  }

  .mobile-break {
  display: inline;
}

@media (max-width: 560px) {
  .mobile-break {
    display: block;
  }

  .mySlick .slick-slide img{
    box-shadow: none;
  }
}

.text-align-justify{
  text-align: justify !important;
}