@charset "utf-8";
/*
Template Name: Nekmit
Author: <a href="https://www.os-templates.com/">OS Templates</a>
Author URI: https://www.os-templates.com/
Copyright: OS-Templates.com
Licence: Free to use under our free template licence terms
Licence URI: https://www.os-templates.com/template-terms
File: Layout CSS
*/

@import url("fontawesome-free/css/all.css");
@import url("framework.css");
@import url("https://fonts.googleapis.com/css?family=Mukta:300,400,700");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}
.row6, .row6 a{}

/* Header
--------------------------------------------------------------------------------------------------------------- */
.padtop{padding:80px 0 0 0;}
 
#header{padding:0 30px;}

#header #logo{margin:22px 0 0 0;}
#header #logo h1{font-family: 'Noto Serif TC', serif; margin:0; padding:0; font-size:2rem; font-variant:small-caps;}


/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:200px 0;}

#pageintro article{display:block; max-width:60%; text-transform:capitalize; font-family: 'Noto Serif TC', serif}
#pageintro .heading{font-size:5rem; font-family: 'Noto Serif TC', serif}
#pageintro footer{margin-top:50px;}
#pageintro p{font-size: 15px;}

/* Contact Details
--------------------------------------------------------------------------------------------------------------- */
#ctdetails{padding:50px 0;}

#ctdetails ul{}
#ctdetails ul li{}
#ctdetails ul li div{position:relative; min-height:45px; padding:0 0 0 60px; line-height:1; word-wrap:break-word;}
#ctdetails ul li div i{position:absolute; top:0; left:0; width:45px; height:45px; line-height:45px; font-size:16px; text-align:center; border-radius:50%;}
#ctdetails ul li div span{display:block; padding:4px 0 0 0;}
#ctdetails ul li div strong{display:block; margin:0 0 8px 0;}
#ctdetails div:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
#ctdetails span{line-height: 1.5em}

/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 0;}

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:55%; margin:0 auto 50px; text-align:center;}
.sectiontitle *{margin:0;}

.grid-3 > li{margin-bottom:50px;}
.grid-3 > li:nth-last-child(-n+3){margin-bottom:0;}/* Removes bottom margin from the last line of items - margin is restored in the media queries when items stack */
.grid-3 > li:nth-child(3n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */

.grid-2 > li{margin-bottom:50px;}
.grid-2 > li:nth-last-child(-n+2){margin-bottom:0;}/* Removes bottom margin from the last line of items - margin is restored in the media queries when items stack */
.grid-2 > li:nth-child(2n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */

.tab-content{display: none;}
.tab-btn{border-radius:14px;}
.tab-btn.active{display: block;}
.tab-content.active{display: block;}

/* Tab Content */
#tab-demo{ width:100%; margin: 10px auto}
#tab-demo > ul{ display:block; margin:0;list-style:none; padding:0px;}
.tab-title{list-style:none;}
#tab-demo > ul > li{width:33.33%; display:inline-block; vertical-align:middle; text-align:center; margin:0 -5px -1px 0 ; border:0px #01546B solid; height:30px; line-height:25px; background-color:rgba(10,140 ,180,1);padding:0 15px;list-style:none; box-sizing:border-box;}
#tab-demo > ul > li:first-child {border-radius: 10px 0 0 0;}
#tab-demo > ul > li:last-child {border-radius: 0 10px 0 0}
#tab-demo > ul > li a{color:#FFFFFF; text-decoration:none; pointer-events:none; text-align: center; vertical-align: middle;}
#tab-demo > ul > li.active{border-bottom:1px solid #01546B; background:#01546B;}
#tab-demo > .tab-inner{clear:both;color:#EEEEEE; border:1px #01546B solid; background-color: rgba(255, 255 , 255,1); border-radius: 0 0 6px 6px;}
.tab-inner{ padding:5px; height:100px;}
.tab-inner p{margin:5px}

/* FAQ */
#faq-demo{ width:100%;}
#faq-demo > ul{ list-style:none; padding:30px 0; margin:0 auto}
.faq-title{ font-weight:bold; background:#b6a88e; color:#fff; padding:10px 15px; border-radius:6px; margin-bottom:10px; cursor:pointer; vertical-align: bottom;}
.faq-title > span{ color:rgb(150,50,50);}
#faq-demo > ul > li.active > .faq-title{ background:#9d8c6d; }
.faq-content{ display:none; background:#fff; padding:10px; border-radius:6px; margin:8px 0; color:#000}
.faq-content > span{color:rgb(150,50,50);}

/* Image container - Cover*/
.image-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 72%;
  grid-gap: 0.5rem;
}
.image-container .image {
  position: relative;
  padding-bottom: 100%;
  
}
.image-container .image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  left: 0;
  position: absolute;
  top: 0;
  
}
.image-container .image:nth-of-type(1) img{
  border-top-left-radius: 0px;
}
.image-container .image:nth-of-type(4) img{
  border-top-right-radius: 0px;
}
.image-container .image:nth-of-type(5) img{
  border-bottom-left-radius: 0px;
}
.image-container .image:nth-of-type(8) img{
  border-bottom-right-radius: 0ㄋpx;
}
.image-container .image img:nth-of-type(1) {
  filter: grayscale(0) brightness(70%);
}
.image-container .image img:nth-of-type(2) {
  -webkit-clip-path: var(--clip-start);
          clip-path: var(--clip-start);
  transition: -webkit-clip-path 0.5s;
  transition: clip-path 0.5s;
  transition: clip-path 0.5s, -webkit-clip-path 0.5s;

}
.image-container .image:hover img:nth-of-type(2) {
  -webkit-clip-path: var(--clip-end);
          clip-path: var(--clip-end);
         
}

/* Image Container -- Shrink */
.image-container-shrink {
  display: flex;
  width: 72%;
  height: 50vh;
  padding: 4% 2%;
  box-sizing: border-box;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2px;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
  line-height: 0;
}

.box > img {
  width: 200%;
  height: calc(100% - 5vh);
  object-fit: cover; 
  transition: .5s;
}

.box > span {
  display: block;
  text-align: center;
  vertical-align: middle;
  height: 5vh;
  line-height: normal;
  font-family: 'Noto Serif TC', serif;
}

.box:hover { flex: 1 1 50%; }
.box:hover > img {
  width: 100%;
  height: 100%;
}

/* Foreground */
.foreground {
  margin: 5vh 2.5vw;
  padding: 15vh 4vh;
  background: rgba(255,255,255,0.9);
  border-radius: 5px;
  align-items: center;
  text-align: center;
  border: 2px solid #b6a88e;
}
.foreground > h2{
	font-size:26px; font-weight:700;  letter-spacing:3px; text-transform:uppercase; width:160px; text-align:center; margin:auto; white-space:nowrap; padding-bottom:13px; color: #000
}


.foreground > h2:before {
    background-color: #c50000;
    content: '';
    display: block;
    height: 3px;
    width: 75px;
    margin-bottom: 5px;
}
.foreground > h2:after {
    background-color: #c50000;
    content: '';
    display: block;
    position:relative; left: 92px; bottom:-3px;
    height: 3px;
    width: 75px;
    margin-bottom: 0.25em;
}

.foreground > h3 {
	text-align: center;
    font-size:26px; font-weight:400; color:#222; letter-spacing:1px;
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.foreground > h3:after,.foreground h3:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #c50000;
    border-top: 1px solid #c50000;
    height: 5px;
  background-color:#f8f8f8;
}

/* Flow Chart */
.tooltip,
.container__required:before,
.container__requiredG:before,
.container__general:before,
.block__unit:before {
  position: absolute;
  right: 0;
  bottom: 100%;
  color: #fff;
  background: #ffb238;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 2.5px;
}


.card,
.container__required div,
.container__requiredG div {
  line-height: 2;
  background: #fff;
  padding: 1.2rem 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 10px #e6e6e6;

}

.container__requiredG div {min-width: 12em;}

.container__requiredG div.space-1{
  background: transparent;
  border: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height:0px;
}
.container__requiredG div.space-2{
	background: transparent;
	border: transparent;
	box-shadow: none;
	height:180px;
}


.flow_chart {
  margin: 5vh 2.5vw;
  padding: 10vh 4vh;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  font-family: 'Mukta', sans-serif;
  border: 0px solid #b6a88e;
  
}
.flow_chart svg {
  height: 5rem;
}
.flow_chart svg line {
  stroke: #5f39dd;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 2px 20px;
  animation: animateline 5s linear both infinite;
}
.flow_chart h5 {
  font-size: 1.1rem;
  color: #411fb2;
  font-weight: bolder;
  font-family: 'Mukta', sans-serif;
}
.flow_chart p {
  font-size: 1rem;
  font-weight: 300;
  color: #000;
}

.flow_chart i {
  display: inline-block;
  color: rgb(150,150,160);
}

.flow_chart ol{
  list-style-type: none; font-family: Verdana, Geneva, san-serif; line-height: 1.8rem;
}

.flow_chart .ep-detail ol{
  margin-left: 3em;
  list-style-position: outside;
}

.flow_chart ol > li{
  text-indent: -3.1em;
}

.flow_chart ol > li > i{
  width: .1em; 
  margin: 0px 0px;
  color: #01445B;
  text-align: center;

}
.flow_chart ol > li > .co-title{
  font-weight: bolder;
  color: #01445B;
}

.container__required {
  display: flex;
  border-radius: 8px;
  padding: 1.5rem;
  background: #f9f9f9;
  position: relative;
}
.container__required:before {
  content: '系訂必修';
}
#A_required .block__unit:before{
	content: '天氣氣候組必修'
}
#B_required .block__unit:before{
	content: '大氣環境化學組必修'
}
#A_elective .block__unit:before{
	content: '天氣氣候組必選修'
}
#B_elective .block__unit:before{
	content: '大氣環境化學組必選修'
}
#line_24:before{
  content: '24';
  position: absolute;
  right: 0;
  bottom: 100%;
  color: #fff;
  background: #ffb238;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 2.5px;
}

.container__required div {
  text-align: left;
  margin: 0 1rem;
}

.container__twogroup {
  display: flex;
}
/* ******* */
.container__twogroup div{
  flex-grow: 1;
  flex-basis: max-content;
}
.container__requiredG {
  padding: 5vh 5vw;
  border-radius: 8px;
  background: #f9f9f9;
  margin: 0 20px;
  position: relative;
}

.container__requiredG div {
  margin: 0 0 1rem;
}
.container__requiredG div svg {
  width: 4rem;
  height: auto;
  fill: #5f39dd;
}
.container__general, .container__elective,.container__graduate {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  position: relative;
}
.container__general:before {
  content: '共同必修與通識';
}
.container__elective:before {
  content: '選修';
}
.container__graduate:before {
  content: '終於完成';
}

/*
.block__unit{
  opacity: 1;
}
*/

.block__unit h5 , .block__unit p{
	text-align: left;
}
.block__unit:hover{
	cursor: pointer;
	transform: translateY(-3px);
  filter: brightness(0.97);
  transition: all 0.3s ease-in-out;
}
@media (max-width: 700px) {
  .container__required {
    flex-direction: column;
  }
  .container__required div {
    margin: 1rem 0;
  }
}
@-moz-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-webkit-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@-o-keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}
@keyframes animateline {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -5rem;
  }
}

.ep-detail-wrap {	/* Gray Background While opening detail */
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  z-index: 5;
}

#pop-details-close { /* Gray Background While opening detail */
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  bottom: 0px;
  left: 0;
  right: 0;
  z-index: 10;
}


.ep-detail-wrap .ep-detail {	/* Detail Windows*/
  /*position: relative;*/
  position: sticky;
  top:40vh;
  left: 20%;
  font-size: 1em;
  background-color: #F5F5F0;
  color: #586075;
  /*transform: translateY(-50%);*/
  /*margin: 50% auto;*/
  width: 60%;
  height: auto;
  padding: 1em 2em;
  border-radius: 15px;
  border: 5px solid #01546B;
  text-align: left;
  /*box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);*/
  z-index: 15;
}
/* "x" close buttom
.ep-detail-wrap .ep-detail::after {	
  content: "✖";
  color: #01546B;
  position: absolute;
  top: -30px;
  right: -30px;
  display: inline-block;
  font-size: 10px;
  line-height: 20px;
  height: 30px;
  width: 30px;
  padding: 0px;
  text-align: center;
  background-color: #F5F5F0;
  border-radius: 50%;
  border: 5px solid;
  cursor: pointer;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
*/

.pop-details-enter-active, .pop-details-leave-active {
  transition: all 0.3s ease-in-out;
}

.pop-details-enter {
  opacity: 0;
}

.pop-details-leave-to {
  opacity: 0;
}

/* Fade-in effect */
.fade {
  opacity: 0;
  transition: opacity 0.3s linear;
}

.before_enter{
  opacity: 0;
  transition: opacity 1s linear;
}

.animation{
  opacity: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}



/* Services */
#services{}
#services li{margin-bottom:30px; padding:25px 0 0 0;}
#services li article{display:block; position:relative; padding:40px 25px 30px; border:1px solid;}
#services li article *{margin:0; padding:0;}
#services li article > a > i{display:block; position:absolute; top:-25px; right:10px; width:50px; height:50px; line-height:48px; border:1px solid; font-size:1.8rem; text-align:center; z-index:1;}
#services li article .heading{margin-bottom:15px; font-weight:700;}
#services li article footer{margin-top:20px;}



/* SummerPoster */
#SummerPoster{margin-top: 2vh; text-align: center;}
#SummerPoster p{color: #404040; margin: 0 20%;line-height: 1.8rem;}
#SummerPoster figure{margin:2vh 10vw}
#SummerPoster img{border-radius: 3px; border:0px solid rgba(200,0,0,0.9);}

.c-box {
  background: #587b7f;
  font-size: 150%;
  text-align: center;
  color: #fff;
  flex-basis: 30%;
  padding: 5vmin;
  margin: 5vmin;
}
.c-box--arrow-right {
  position: relative;
  z-index: 10;
}
.c-box--arrow-right::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-top: -10px;
  top: 50%;
  border-left: 10px solid #587b7f;
  left: auto;
  right: -10px;
}
/* Students*/
#students{padding:50px; margin-bottom:50px}
#students h6 {
  text-transform: capitalize;
  text-align:center;
  position: relative;
  font-weight: bold;
}
#students h6::before {
  position: absolute;
  margin-left:-150px;
  left:50%; 
  top: 2em;
  width: 300px;
  height: 2px;
  content: "";
  background-color: #c50000;
}

#students h6 span {
  display: block;
  margin: 2rem 10% 0px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 2em;
  padding-left: 0.25em;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;

}


/* Sports */
#sports{padding:50px; margin-bottom:50px}
#sports ul{margin-top:30px;}
#sports li{display:block; position:relative; float:left; min-height:25px; width:47.89473%; margin:0 0 20px 4.21052%; padding-left:33px;}/* Here we use the 50% grid */
#sports li:nth-child(odd){margin-left:0; clear:left;}
#sports li:nth-last-child(2), #sports li:last-child{margin-bottom:0;}
#sports li span{display:block; position:absolute; top:0; left:0; width:25px; height:25px; line-height:25px; border-radius:50%; text-align:center;}

#activities h6, #sports h6 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
}
#activities h6:before, #sports h6:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 4.5em;
  background-color: rgb(100, 100, 120);
}
#activities h6:after, #sports h6:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 1px;
  width: 95%;
  max-width: 255px;
  background-color: rgb(100, 100, 120);
}



/* Activities */
#activities{padding:50px; margin-bottom:50px}
#activities ul{margin-top:30px;}
#activities li{display:block; position:relative; float:left; min-height:25px; width:47.89473%; margin:0 0 20px 4.21052%; padding-left:33px;}/* Here we use the 50% grid */
#activities li:nth-child(odd){margin-left:0; clear:left;}
#activities li:nth-last-child(2), #activities li:last-child{margin-bottom:0;}
#activities li span{display:block; position:absolute; top:0; left:0; width:25px; height:25px; line-height:25px; border-radius:50%; text-align:center;}



/* Latest */
#latest{}
#latest > li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
#latest article{}
#latest article figure{}
#latest article figure > a{margin-bottom:20px;}
#latest article figure figcaption *{margin:0;}
#latest article figure figcaption .meta{display:block; margin:0 0 5px 0;}
#latest article figure figcaption .meta li{display:inline-block; margin-right:5px; padding-right:10px; border-right:1px solid; font-size:.8rem;}
#latest article figure figcaption .meta li:last-child{margin-right:0; padding-right:0; border-right:none;}
#latest article figure figcaption .meta li i{margin-right:5px;}
#latest article figure figcaption .heading{}

/* Comments */
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
#comments li{margin:0 0 10px 0; padding:15px;}
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
#comments address{font-weight:bold;}
#comments time{font-size:smaller;}
#comments .comcont{display:block; margin:0; padding:0;}
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}

#comments form{display:block; width:100%;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments textarea{overflow:auto;}
#comments div{margin-bottom:15px;}
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}

/* Sidebar */
.container .sidebar{}

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 0;}

#footer .heading{margin-bottom:50px; font-size:1.2rem;}
#footer p + .faico{margin-top:30px;}

#footer input, #footer button{border:1px solid;}
#footer input{display:block; width:100%; padding:12px 15px;}
#footer button{padding:10px 15px 12px; font-size:1rem;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:30px 0;}
#copyright *{margin:0; padding:0;}


/* Add roundness to certain items
Settings are all different due to the optical similarity needed for different sized elements
Delete this section if roundness is not wanted / required
--------------------------------------------------------------------------------------------------------------- */
.btn{border-radius:14px;}
#footer input, #footer button{border-radius:12px;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav{font-family: 'Noto Serif TC', serif}
#mainav ul{text-transform:uppercase; }
#mainav ul ul{position:absolute; width:180px; text-transform:none; z-index:9999;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; width:100%; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:1px solid;}
#mainav form select option{margin:5px; padding:0; border:none;}


/* Breadcrumb */
#breadcrumb{padding:150px 0 30px; text-align:right;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:4px; right:0; content:"\f0da";}
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}
#breadcrumb .heading{margin:0; font-size:2rem;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:10px; left:5px; content:"\f0da";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none; display: inline-block; text-align: center; width: 50%}
.faico li{display:inline-block; margin:0px 15px 0 15px; padding:0; line-height:normal;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:inherit; background-color:rgba(255,255,255,.2);}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}
.faicon-instagram:hover{background-color:#00ACEE;}





/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Colours
--------------------------------------------------------------------------------------------------------------- */
/* body{color:#FFFFFF; background-color:#026B8A;} */
body{color:#FFFFFF; background-color:transparent;} 
a{color:#0AC6FC;}
a:active, a:focus{background:transparent !important;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#0AC6FC !important;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#0AC6FC; border-color:#0AC6FC; font-family: 'Noto Serif TC', serif;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit; font-family: 'Noto Serif TC', serif;}

.imgover:hover::before{background-color:rgba(10,198,252,.3);/* #0AC6FC */}
.imgover, .imgover:hover::after{color:#FFFFFF;}


/* Rows */
.row0, .row0 a{color:#FFFFFF; background-color:#0AC6FC;}
.row1{color:#FFFFFF; background-color:#026B8A;}
.row2{color:#474747; background-color:#FFFFFF;}
.row3{color:#474747; background-color:#F4F4F4;}
.row4{color:#FFFFFF; background-color:#01546B;}
.row5, .row5 a{color:#FFFFFF; background-color:#026B8A;}
.row6{color:#474747; background-color:#EEEEEE;}

/* Header */
#header{color:#FFFFFF; background-color:#01546B;}
#header #logo a{color:inherit;}


/* Contact Details */
#ctdetails ul li div i{color:inherit; background-color:rgba(255,255,255,.2);}
#ctdetails ul li div:hover i{color:#FFFFFF; background-color:#0AC6FC;}


/* Content */
#services li article{border-color:#0AC6FC;}
#services li article a{color:inherit; line-height: 2rem;}
#services li article:hover{color:#FFFFFF; background-color:#026B8A;}
#services li article:hover a{color:#0AC6FC;}
#services li article > a > i{color:#FFFFFF; background-color:#01546B; border-color:rgba(0,0,0,.1);}
#services li article:hover > a > i{background-color:#0AC6FC;}
#services li article:hover > a:hover{font-size: 15px; color: rgb(230, 255, 255);}
#services li article:hover > footer > a:hover{font-size: 15px; color: rgb(230, 255, 255);}

#services li article:hover > footer > .faico-ascamp .faicon-facebook:hover{font-size: 22px; color:#002266; background-color: transparent; transition: all 0.2s}
#services li article:hover > footer > .faico-ascamp .faicon-instagram:hover{font-size: 22px; color:#bc2a8d; background-color: transparent; transition: all 0.2s}

#services li article .faico-ascamp{list-style: none; display: inline-block; text-align: center;}
#services li article .faico-ascamp li{display:inline-block; padding:5px; margin: 1px 5px; line-height: normal; background: transparent;}
#services li article .faico-ascamp a{font-size: 18px}

#sports{color:#474747; background-color:#FFFFFF;}
#sports li span{color:#FFFFFF; background-color:rgba(10,198,252,.7)/* #0AC6FC */;}
#sports li:hover span{background-color:#01546B;}

#activities{color:#474747; background-color:#FFFFFF;}
#activities li span{color:#FFFFFF; background-color:rgba(10,198,252,.7)/* #0AC6FC */;}
#activities li:hover span{background-color:#01546B;}

#latest article figure figcaption .meta li{border-color:rgba(0,0,0,.1);}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#FFFFFF; background-color:rgba(255,255,255,.2);}
#footer input:focus{background-color:#0AC6FC;}
#footer button{color:#FFFFFF; background-color:#0AC6FC;}
#footer button:hover{color:inherit; background-color:transparent; border-color:inherit;}


/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#0AC6FC; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(10,198,252,.5); border-color:rgba(10,198,252,.5);/* #0AC6FC */}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#0AC6FC;}
#mainav form select{color:#474747; background-color:#FFFFFF; border-color:#D7D7D7;}
/*HERE*/
#mainav form select{color:#474747; background-color:#FFFFFF; border-color:#D7D7D7; border-radius: 2px;}


#breadcrumb *{color:#FFFFFF; background-color:inherit;}
#breadcrumb li:last-child a{color:#0AC6FC;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#0AC6FC;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#0AC6FC;}

#backtotop{color:#FFFFFF; background-color:#0AC6FC;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){ /* > 1140*/
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){ /* 978 ~ 1140*/
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){ /* < 978*/
	.hoc{max-width:90%;}

	#header{padding:30px;}
	#header #logo{margin-top:0;}

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block; margin-top:2px;}


	#breadcrumb{}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
	.image-container {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); width: 70%; grid-gap: 0.2rem;}
  .ep-detail-wrap .ep-detail {position: sticky;top:20vh;left: 10vw;width: 80vw;font-size: 1em;  background-color: #F5F5F0;  color: #586075;  padding: 1em 2em;  border-radius: 15px;  border: 5px solid #01546B;  text-align: left; z-index: 10;}

  #sports li, #activities li{display:block; float:none; width:100%; margin-left:0;}
  #sports li:nth-last-child(2), #activities li:nth-last-child(2){margin-bottom:20px;}

}

@media screen and (max-width:750px){ /* < 750*/
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0;}
	.last, .group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}

	#pageintro article{max-width:none;}
	#pageintro .heading{margin-bottom:20px; font-size:2.5rem; font-family: 'Noto Serif TC', serif}

	.sectiontitle{max-width:none;}
	.sd-third > li, .grid-3{max-width:348px;}/* Restrict the width to the one_third grid element in smaller devices */
	.grid-3{margin:0 auto;}
	.grid-3 > li:nth-last-child(-n+3){margin-bottom:50px;}
	.grid-3 > li:last-child{margin-bottom:0;}

	.sd-half > li, .grid-2{max-width:348px;}/* Restrict the width to the one_third grid element in smaller devices */
	.grid-2{margin:0 auto;}
	.grid-2 > li:nth-last-child(-n+2){margin-bottom:50px;}
	.grid-2 > li:last-child{margin-bottom:0;}

	#latest > li{margin:0 auto 50px;}

  #sports li, #activities li{display:block; float:none; width:50%; margin-left:0;}
  #sports li:nth-last-child(2), #activities li:nth-last-child(2){margin-bottom:20px;}

	.image-container {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); width: 100%; grid-gap: 0.2rem;}
	.image-container-shrink { display: flex;  width: 100%;  height: 50vh;  padding: 4% 2%;  box-sizing: border-box;}

  .ep-detail-wrap .ep-detail {position: sticky;top:20vh;left: 10vw;width: 80vw;font-size: 1em;  background-color: #F5F5F0;  color: #586075;  padding: 1em 2em;  border-radius: 15px;  border: 5px solid #01546B;  text-align: left; z-index: 10;}
  .container__requiredG {padding: 5vh 2vw; margin: 0 10px;}
  #SummerPoster figure{margin:2vh 5vw}
}

@media screen and (max-width:450px){ /* < 450*/
	#sports, #activities{padding:30px;}
  #sports li, #activities li{display:block; float:none; width:100%; margin-left:0;}
  #sports li:nth-last-child(2), #activities li:nth-last-child(2){margin-bottom:20px;}

  .ep-detail-wrap .ep-detail {position: sticky;top:10vh;left: 10vw;width: 80vw;font-size: 1em;  background-color: #F5F5F0;  color: #586075;  padding: 1em 2em;  border-radius: 15px;  border: 5px solid #01546B;  text-align: left; z-index: 10;}
  .container__requiredG {padding: 5vh 1vw; margin: 0 5px;}
  .container__required div,.container__requiredG div {font-size: 0.8em;}
  .container__requiredG div.space-1{height:70px;}
  .container__requiredG div.space-2{height:240px;}
  #SummerPoster figure{margin:2vh -1vw}
  #SummerPoster p{color: #404040; margin: 0 2vw;line-height: 1.8rem;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){ /* < 650*/
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.6rem;}
	.font-x3{font-size:1.8rem;}
  .ep-detail-wrap .ep-detail {position: sticky;top:10vh;left: 10vw;width: 80vw;font-size: 1em;  background-color: #F5F5F0;  color: #586075;  padding: 1em 2em;  border-radius: 15px;  border: 5px solid #01546B;  text-align: left; z-index: 10;}
}