@charset "UTF-8";

html,body{
	width:100%; /*keat 0309*/height:auto;/*keat 0309*/ margin:0;
	font-size:18px; /*jessica 0308*/
	color:#424242; 
	background:#fff;
	
	font-family:'KarlaRegular','KarlaBold','KarlaMedium','LatoBlack','Noto Sans TC', sans-serif;
	font-weight:500; 
	
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
} 

img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
body, html, div, select, input, textarea, img, span{  font-family:'KarlaMedium','KarlaBold','KarlaRegular','KarlaBold','LatoBlack','Noto Sans TC', sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0);  scrollbar-width:thin; scrollbar-color: var(thumbBG) var(scrollbarBG); }

h1,h2,h3{ font-weight:inherit; font-size:inherit;line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0; }

input{ background-color:transparent; border:none; color:#fff;  }
input:focus, textarea:focus{ outline:none; color:#fff;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#111; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#ffffff; -webkit-text-fill-color:#ffffff !important;}

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }
 
.clear{ clear:both; }

/* keat 0307 */
.mobileonly{ display:none; }
/* keat 0307 */
/* keat 0308 */
.desktoponly{ display:block; }
/* keat 0308 */

#yt-player{ width:90%; 
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
#video-player{ width:90%; max-width:1024px;   }
#video-player > video{ width:100%; height:auto; }

#vimeo-player{ position: absolute;  transform: translate(-50%, -50%); left: 50%; top: 50%;
  height:calc(100% - 6em);
  overflow:hidden; width:90%; }

#vimeo-player iframe,
#vimeo-player object,
#vimeo-player embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* common */

/*color*/
.txt-white{ color:#ffffff;}
.txt-blue{ color:#006eb7; }
.txt-purple { color:#3c2d5e; }
.txt-green { color:#00a092; }
.txt-lightgrey { color:#aeaeae; }
.txt-darkgrey{color:#424242; }/*jessica*/
.txt-lightpurple{ color:#593594 }
/*color*/

/*font-weight*/
.txt-bold{ font-weight:800;} 
.txt-bolder{ font-weight:900;} 
.txt-mid{ font-weight:400;}
.txt-kmid{ font-weight:500;} /*jessica 0308*/
.txt-kbold{font-weight:700;}/*jessica 0308*/
/*font-weight*/

/*size*/
.txt-mega{ font-size:3em;}

.txt-huge {font-size:2.22em} /*jessica 40pt*/
.txt-large{font-size:1.66em} /*jessica 30pt*/
.txt-big {font-size:1.38em} /*jessica 25pt*/
.txt-medium {font-size:1.2em} /*jessica 20pt*/
.txt-small{ font-size:0.9em;} /*jessica 16pt*/
.txt-tiny{ font-size:0.77em;} /*jessica 14pt*/
/*size*/

.txt-title{ font-family:'LatoBlack', sans-serif;} 
.txt-subhead{ font-family:'KarlaBold', sans-serif;} /*jessica 0308*/
.txt-paragraph{ line-height:1.6; }
.txt-spacing { letter-spacing:1.2px}

/*bg-color*/
.bg-green{ background-color:#00a092; }
.bg-blue{ background-color:#006eb7; }
.bg-babyblue{ background-color:#bbd6f0 }
.bg-lightblue { background-color:#E2EBF1 }
.bg-purple{ background-color:#3c2d5e; }
.bg-lightpurple{ background-color:#593594}

/*bg-color*/

.line-height { line-height:1.7 }

/*button*/
.rnd-button-container{ line-height:1; padding:1em 1.5em; text-align:center; border-radius:2em; color:#3c2d5e; display:inline-block; cursor:pointer; background: #fff; white-space:nowrap;   }/*jessica 0309*/

.structure-inner-content-group .rnd-button-container{ /*border:solid 1px #3c2d5e;*/ color:#3c2d5e; position:absolute; right:0; bottom:0;  }

.about-button { display:inline-block; position:relative; width:100% }
.about-button .rnd-button-container{ /* border:solid 1px #3c2d5e; color:#3c2d5e;*/ left:50%; position:absolute; transform:translateX(-50%); }

.rnd-button-container.green, .rnd-button-container.blue{color:#fff; background: transparent; border:solid 1px #fff; }/*jessica 0309*/
.rnd-button-container.blue.hover{ color:#006eb7; background: #fff;}
.rnd-button-container.green.hover{ color:#00a092;background: #fff; }

.rnd-button-container.hover{ color:#fff; background:#6C529D; transition: background-color 200ms linear} /*jessica 0309*/
.rnd-button-container.blue.hover{ color:#006eb7; }
.rnd-button-container.green.hover{ color:#00a092; }

.rnd-button-container.color{  color:#3c2d5e; border:solid 1px #3c2d5e; left:50%; position:absolute; transform:translateX(-50%);}
.rnd-button-container.color.hover{  color:#fff; background:#6C529D; border:solid 1px #6C529D; }

.news-button-style-container { position:absolute; right:0; bottom:0; height:1em; cursor:pointer; }
.news-button-style-container.hover > div:last-child { opacity:0.5 }
.news-button-style-container.hover .news-button-plus-symbol {transform:translateY(-50%) scale(1.5, 1.5) }

.news-button-plus-symbol {display:inline-block; width:0.8em; height:0.8em; background:linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), #6c529d; background-size:60% 1.5px,1.5px 60%; background-repeat:no-repeat; background-position:center; border:1.5px solid #6c529d; border-radius:50%; top:50%; transform:translateY(-50%) scale(1, 1); margin-right:.5em; position:relative;  float:left; transition: transform .2s; } 

.news-button-style-container > div:nth-last-child(1) {line-height:1; float:left; }
.news-structure-container.news { padding:2em 0 10em 0; /* keat 0311min-height:40vh keat 0311*/ }

/*button*/

/* common */
.placeholder { background:#d653c6; position:absolute; height:1em; width:30%; }




/*share*/
.big-container { position:relative; width:100%; /* keat 0311 */min-height:calc(100vh - 25.34em);/* keat 0311 */  }/* jessica 0309*/  
.header-big-container { width:100%; position:fixed; /* keat 0304*/height:5.5em;/* keat 0304*/ top:0; background:#fff;  z-index:99;   }
/* keat 0304*/
.header-big-container.home{ background:rgba(0,0,0,0); }
/* keat 0304*/

.big-container-inner { position:relative; width:90%; max-width:1024px; margin:8em auto 0 auto; }
.page-title{ position:relative; width:80%; max-width:800px; margin:0 auto 3em auto; text-align:center; }
.page-title .txt-title{width:100%; text-align:center  } /*jessica 0308*/
.page-body { margin-top:1em }
.no-result{ position:relative; height:10em; width:100%; text-align:center; display:none }
.no-result-inner { position:absolute; top:50%; transform:translate(-50%,-50%); left:50%; width:80%; height:auto  } 
/* keat 0304*/
.no-result.active{ display:block; }
/* keat 0304*/


/*filter*/
.filter-all-group-container { margin-bottom:1em; }
.filter-all-group-container > div:first-child {margin-right:1em; width:20%  }
.filter-inner-container.calendar { float:right; width:30% }

.filter-inner-container { position:relative; float:left; border:1px solid #3c2d5e; border-radius:10px; width:35%; cursor:auto; z-index:10;}
.filter-inner-container.blue { border-color:#006eb7;  }
.filter-inner-container.green { border-color:#00a092 }

.filter-content { position:relative; width:100%; margin:auto; }
.filter-txt {position:relative; padding:0.8em 0 0.8em 1em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:calc( 100% - 3em );  } 

.filter-arrow{ position:absolute; border:solid #000; border-width: 0 1px 1px 0; display:inline-block; padding:3px; transform:rotate(45deg) translateY(-50%); right:1em; top:43%; transition:transform 400ms cubic-bezier(0,.8,.5,.99); transform-origin:center; }

.filter-dropdown-container{ position:absolute; padding-top:0em; width:calc( 100% + 2px ); left:50%; transform:translateX(-50%); display:none; text-align:left; background:#006eb7; border-radius:0 0 10px 10px; max-height:12em; overflow:auto; border-top:1px solid rgba(255,255,255,0.3); }

.filter-inner-container.green .filter-dropdown-container { max-height:none;  overflow:none   }
.filter-dropdown-ele{ border-bottom:1px solid rgba(255,255,255,0.3); padding:0.8em 0em; line-height:1; margin:auto; align-items:left; text-align:left; /* keat 0304 */cursor:pointer; width:90%;  }
/*0314*/
.filter-dropdown-ele.sector { width:81% }
/*0314*/

.filter-dropdown-ele > div { margin:auto; }
.filter-dropdown-ele.hover{ color:#f7a600   }
.filter-dropdown-ele.active{ color:#F99402; cursor:auto; }
.filter-dropdown-ele:nth-last-child(1){ border-bottom:none; }

/* keat 0304 */
.filter-dropdown-ele.selected{ display: none; }
.filter-dropdown-ele.inactive{ pointer-events:none; opacity:0.5; cursor:default}
/* keat 0304 */

/* keat 0308 */
.filter-inner-container.calendar .filter-close { display:none; position:absolute; background:#fff; width:1.2em; padding-bottom:1.2em; top:50%; /* keat 0315 */right:1.25em;/* keat 0315 */  border-radius:100px; transform:translate(50%, -50%);  cursor:pointer; }
 
.filter-close-line { box-sizing: border-box; position:absolute; display:block; width:1em; height:1em; left:0.1em; top:0.1em; border:2px solid transparent;  }
.filter-close-line::after,
.filter-close-line::before {content: ""; display:block; box-sizing: border-box; position:absolute; width:0.8em; height:.1em; background:#424242; transform:translateX(-50%) rotate(45deg); border-radius:5px; top:45%; left:50%;
}
.filter-close-line::after {transform:translateX(-50%) rotate(-45deg) }

 
.filter-inner-container.calendar.needclear .filter-close { display:block; }
/* keat 0308 */

.filter-dropdown-ele-time { width:calc(100% - 2em ); padding:1em 0em; margin:auto;  }
.selection-container { position:relative; width:100%;   }

.time-button-inner { position:relative; width:50%; float:left; }
.time-button { position:relative; margin:auto;  width:70%; border:1px solid #fff; padding:0.5em; border-radius:100px; text-align:center; cursor:pointer;  }
.time-button-inner.right { float:right }


.time-button.hover, .time-button-inner.active .time-button{ background:#fff; color:#424242}
.apply-period-button { position:relative; margin:0 auto 2em auto; width:7em; border:1px solid #fff; padding:0.8em; border-radius:100px; text-align:center; line-height:1; opacity:0.5; cursor:pointer }

.apply-period-button.hover { background:#fff; color:#424242 }

.month-date-container { position:relative; width:100%; padding-top:1em; }
.month-container { width:calc( 50% - 1px ); text-align:center; line-height:1.8; float:left ; /* keat 0308 */ overflow:auto; height:9em; /* keat 0308*/} 
.month-date-container > div:nth-child(1) { border-right:1px solid rgba(255,255,255,0.3) }
.gradient-cover { position:absolute; bottom:0; height:1em; width:50%; background: linear-gradient(180deg, rgba(0,160,146,0) 0%, rgba(0,160,146,1) 100%); pointer-events:none}

/* keat 0304 */
.time-button-inner{  }
.time-button-inner.inactive{ opacity:0.5; pointer-events:none; cursor:default}


.month-container > div > div:nth-child(2){ margin-top:0.5em; }
.month-container > div > div:nth-last-child(2){ margin-bottom:0.5em; }
.date-ele{ cursor:pointer; }

.apply-period-button { pointer-events:none }
.apply-period-button.active {  opacity:1; pointer-events:all; cursor:pointer; } 
/* keat 0304 */


/* keat 0315 */
.time-button {  cursor:pointer;  }
.time-button.inactive{ opacity: 0.5; pointer-events:none; cursor:default!important}
.time-button-inner{  cursor:default; }


.date-ele.inactive{ cursor:default; opacity:0.5; pointer-events:none }

/* keat 0315 */



.gradient-cover.top { bottom:none; top:1em; background: linear-gradient(0deg, rgba(0,160,146,0) 0%, rgba(0,160,146,1) 100%); }

.arrow-inner { width:50%; position:relative; margin:1em auto 1.5em auto; float:left; z-index:20 }
.arrow-period-date { position:absolute; left:50%; border:solid #fff; border-width: 0 1px 1px 0; display:inline-block; padding:10px 0 0 10px; transform:translateX(-50%) rotate(45deg)  }

/*mia0307*/
.filter-mobile-ele { display:none; }
.filter-mobile-ele .filter-inner-circle { display:none; }
.filter-button {display:none }
.mobile-filter {display:none }
/*mia0307*/


/* keat 0307 */
.month-date-container .arrow-inner{ cursor:pointer }
/* keat 0307 */

.filter-inner-container.active .filter-arrow { transform:rotate(-135deg); top:1.4em; border:solid #fff; border-width:0 2px 2px 0; }
.filter-inner-container.active .filter-txt.dropdown { color:#fff; border-top:1px solid rgba(255,255,255,0.3); }
.filter-inner-container.active .filter-txt { color:#fff;  }

.filter-radio-container { position:relative; width:calc(100%); height:1.5em;   } 
.filter-radio-container.notfull { width:calc(100% - 20em);  } 
.filter-radio-inner { position:relative; float:left; top:50%; transform:translateY(-50%); margin-right: 2em; cursor:pointer}
.filter-radio-ele { height:calc( 1.5em - 1px) ; margin-bottom:0.5em }
.filter-circle { position:relative; width:0.7em; height:0.7em; border:1px solid #3c2d5e; border-radius:100px; cursor:pointer; float:left; top:50%; transform:translateY(-50%); margin-right:0.5em }
.filter-radio-txt { position:relative; top:50%; transform:translateY(-50%); float:left; line-height:1 }

.filter-radio-inner.active .filter-circle{ background-color:#3c2d5e }
.filter-radio-inner.hover .filter-circle{ background-color:#3c2d5e }



.filter-inner-container.active .filter-dropdown-container{ display:block; box-shadow: 0 3px 5px 0 rgba(66, 66, 66, 0.5); }
.filter-inner-container.active {  border-radius:10px 10px 0 0; height:auto; background:#3c2d5e }
.filter-inner-container.active .filter-txt.dropdown.hover { opacity:1 }

.filter-inner-container.blue.active  { background:#006eb7; }
.filter-inner-container.green.active { background: #00a092 }
.filter-inner-container.active .filter-dropdown-container{  background:#3c2d5e }
.filter-inner-container.blue.active .filter-dropdown-container { background:#006eb7; }
.filter-inner-container.green.active .filter-dropdown-container { background:#00a092 ; }


.filter-container {display:none }

/*filter*/

/*banner*/




.banner-top-container {  
	height:35vh;
	position:relative;
	display:flex;
	overflow:hidden; 
	align-items:center;
	justify-content:center; margin:5.5em 0 0 0;
}

.banner-background { 
	position:absolute;
	background:url("../img/centre/centre-banner.jpg") center/100% auto no-repeat;
	width:100%;
	height:35vh;
	} 

.banner-text{ 
position:absolute; 
font-family:'LatoBlack', sans-serif;
font-size:10em;  min-width:100vw; left:50vw;  
	transform:translateX(-50vw);
/*transform-origin:center;
	left:50%; 
transform:translateX(-50vw); */	
text-align:center; 
white-space:nowrap; 
text-transform:uppercase;
background:url("../img/centre/centre-banner.jpg") center/100% auto no-repeat;
color:transparent; 
background-clip:text;
-webkit-background-clip: text;	
animation: animate-banner-txt 5000ms linear 1;	
/* 	translateX(-50vw);  background-position:calc(50% - 0vw) 50%;	
translateX(100vw);  background-position:calc(50% - 150vw) 50%;		*/	
}

.banner-top-container.about .banner-background { background:url("../img/about-banner.jpg") center/100% auto no-repeat; }
.banner-top-container.about .banner-text { background:url("../img/about-banner.jpg") center/100% auto no-repeat; color:transparent; 
background-clip:text; -webkit-background-clip: text;	}


.banner-cover { width:100%; height:100%; background:linear-gradient(90deg, rgba(0,160,146,1) 0%, rgba(0,110,183,1) 100%); opacity:0.9;}

/* keat 0301  */
@keyframes animate-banner-txt {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}
@keyframes animate-banner-txt {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}
@keyframes animate-banner-txt {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}

/* @keyframes animate-banner-txt-l {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}
@keyframes animate-banner-txt-m {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}
@keyframes animate-banner-txt-s {
	from { transform:translateX(50vw); background-position:calc(50% - 100vw) 50%;  }
	to { transform:translateX(-50vw); background-position:calc(50% + 0vw) 50%  }
}



/*banner*/



/*link jessica*/
.link-container:after {display: table; clear: both;}
.link-container-ele{float:left; width:29%; padding-bottom:2em; margin-right:3.2em}
.link-container-ele:nth-child(3n){margin-right:0em}
.link-img{width: 100%; padding-bottom: 70%; background-position: center; background-repeat:no-repeat;  background-size:60%; border-radius:0.5em; background-color:#fff; cursor:pointer;  } 
.link-container-ele .link-title{padding: 1em 0; line-height: 1.1}/*jessica 0325*/

.link-container-ele.hover .link-title {color: #3c2d5e;}
.overlap-cover { position:absolute; border-radius:0.5em; width:29%; padding-bottom: 20.3%; background-color:rgba(108,82,157,0.6); opacity:0; cursor:pointer }/*jessica 0325*/
.link-container-ele.no-hover .overlap-cover.hover { display:none }
.link-container-ele.no-hover .link-title { color:#424242 }
.overlap-cover.hover { opacity:1; transition: opacity 200ms ease-in} 

/* keat 0304 */
.link-container-ele{ display:none;  }
.link-container-ele.active{ display:block }
/* keat 0304 */
/*link jessica*/
 
/*sector*/
.mobile-sector-container { display:none }

.sectors-all-container { position:relative; width:100%; display:flex; justify-content:space-between; margin-bottom:3em;  }
.sector-single-txt{ width:90%; font-size:1.2em; padding:1em 0; margin:auto; cursor:pointer  }
.sectors { position:relative; width:30%; }

.sectors-single-container { background-color:#fff; color:#333; border-radius:100px; cursor:pointer; text-align:center;} 

.sectors-single-bottom-arrow { position:absolute; top:90%; left:50%; transform:translate(-50%,0%); border-left:20px solid transparent; border-right:20px solid transparent; border-top:18px solid #fff;  } 

.sectors.all.hover > div:first-child { background-color:#3c2d5e; color:#fff; transition: background-color 200ms linear}
.sectors.all.hover .sectors-single-bottom-arrow { border-top:18px solid #3c2d5e; transition: border-color 200ms linear }

.sectors.blue.hover > div:first-child {background-color:#006EB7; color:#fff;transition: background-color 200ms linear }
.sectors.blue.hover .sectors-single-bottom-arrow {border-top:18px solid #006EB7; transition: border-color 200ms linear   }

.sectors.green.hover > div:first-child {background-color:#00A092;  color:#fff;transition: background-color 200ms linear }
.sectors.green.hover .sectors-single-bottom-arrow { border-top:18px solid #00A092; transition: border-color 200ms linear    }

.sectors.all.active > div:first-child { background-color:#3c2d5e; color:#fff;transition: background-color 200ms linear }
.sectors.all.active .sectors-single-bottom-arrow { border-top:18px solid #3c2d5e; transition: border-color 200ms linear  }

.sectors.blue.active > div:first-child { background-color:#006EB7; color:#fff;transition: background-color 200ms linear }
.sectors.blue.active .sectors-single-bottom-arrow { border-top:18px solid #006EB7; transition: border-color 200ms linear  } 

.sectors.green.active > div:first-child { background-color:#00A092;  color:#fff;transition: background-color 200ms linear }
.sectors.green.active .sectors-single-bottom-arrow { border-top:18px solid #00A092; transition: border-color 200ms linear  }
/*sector*/


/*news*/
.news-structure-container { position:relative; width:100%; }
.news-structure-single-container { position:relative; width:100%; padding:2em 0; border-bottom:1px solid #fff; }
.news-structure-single-inner { position:relative; width:100%; height:12em }
.structure-inner-image { width:30%; padding-bottom:20%;  background-size:cover; background-repeat:no-repeat; background-position:center center; float:left; margin-right:3em }
.structure-inner-content-group { position:relative; width:calc(70% - 3em ); float:left; height:100% }
.content-inner-title { margin-bottom:0.5em;}

.content-inner-body {  width:100%; white-space:pre-wrap; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;  }
.content-inner-title > h2{  width:100%; white-space:pre-wrap; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;  }

.news-structure-container > div:last-child { border-bottom:0px solid transparent; }

.news-info-container { position:absolute; width:80%; bottom:0; left:0;}
.news-info-container > div:first-child {  display:block; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis; }


.info-group-content { margin-top:0.3em }
.news-structure-container.news .news-structure-single-container { border-bottom:1px solid #424242; }
/* keat 0304 */
.news-structure-single-container{ display:none; }
.news-structure-single-container.active{ display:block; }
.news-structure-single-container.noshow{ display:none!important; }
/* keat 0304 */

.news-info-container.mobile { margin-bottom: 5em; display:none }
/*news*/


/*share*/


.all-container{ position:fixed; top:0; left:0; width:100%; height:100vh; overflow:auto; background:radial-gradient(circle, rgba(230,239,245,1) 0%, rgba(220,229,235,1) 100%); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.all-container-inner{ position:absolute; top:0; left:0; width:100%; height:100vh; min-height:36vw; overflow:hidden;  }

.scrollarea-container, .sections-container{ position:relative; width:1px; background:rgba(0,0,0,0); pointer-events:none; display:none;  }
.scrollarea-container.active, .sections-container.active{ display:block; }
 
.animation-container{ position:absolute; width:100%; height:100%; top:0; left:0;  }
.animation-ele-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#333 } 
 
.intro-container{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:90%; max-width:1280px; }
.intro-container-inner{ opacity:0; transform:translateY(33%); transition:opacity 400ms linear, transform 600ms ease-out; width:45%; }
.init .intro-container-inner{ opacity:1; transform:translateY(0%); transition-delay:2400ms }

.intro-container h1{ line-height:1; }
.intro-container > div > div:nth-child(2){ margin-top:1.5em }

#dotmap-title-container{ position:absolute; bottom:1em; left:3em; width:18em; opacity:0; transition:opacity 400ms linear; }
#dotmap-title-container.active{ opacity:1; }

canvas{ width:100%; height:100%; position:absolute; top:0; left:0; }
#dotmap-canvas{ opacity:0.4; }


.dotmap-container{ position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%) scale(1); opacity:1; transition:transform 400ms ease-out, opacity 400ms linear; } 

.dotmap-pin{ position:absolute; background-position:bottom center; background-size:contain; background-repeat:no-repeat; 
transform:translate(-50%,-150%); opacity:0; transition:transform 400ms ease-out, opacity 400ms; background-image:url("../img/dot-pin.svg")  }
.dotmap-pin.active{ transform:translate(-50%,-100%); opacity:1; }
.dotmap-pin.hover{ /* keat 0311 */ background-image:url("../img/dotpin-active.svg") /* keat 0311 */ }

.sections-container{ pointer-events:all; width:100%; height:100vh;   } 
.section-intro-inner-container { position:relative; width:90%; max-width:1280px; margin:auto    }
.section-container{ position:relative; width:100%; min-height:100vh; display:flex; align-items:center;   }
.section-container-inner{ float:left; position:relative; width:50%; max-width:1024px }

.section-container.home .section-container-inner{ padding:5em 0 }
.section-container.ahome .section-container-inner{ padding:5em 0 } 

.section-container-column{ position:relative; width:100%; padding:1em 0; }
.section-container.bg-blue .section-container-inner{ float:right; }

/*intro-mia-0215*/
.green-section-title { margin-bottom:0.5em }
.green-section-image { position:relative; background-position:center center; background-size:cover; background-repeat:no-repeat; width:100%; padding-bottom:58.09%; }
.intro-txt { margin-bottom:1.5em  }
/*intro-mia-0215*/



/* gallery */
.gallery-container{ position:relative; top:0; left:0%;  width:100%; /*min-height:60vw;*/ height:100vh;  overflow:hidden; /* 1.5x */  }
.gallery-container.active{ left:0; }
.gallery-container.fixed{ position:fixed; }

.gallery-container.bg-babyblue .gallery-block{ opacity:0; }

.gallery-block{ float:left; width:25%; height:33.3%; position:relative; overflow:hidden}
.gallery-block:nth-child(n+9){ height:calc(33.4% + 2px); transform:translateY(-1px)}
.gallery-block:nth-child(even){  }

.gallery-block-cover, .gallery-block-color, .gallery-block-bg{ position:absolute; width:calc(100% + 2px); height:calc(100% + 2px);  top:-1px; left:-1px;  }
.gallery-block-cover{ transition:transform 400ms ease-out; transform-origin:right center; }

.gallery-block-bg{   }


.gallery-block-cover{
	width:calc(100% + 0px); height:calc(100% + 0px); top:0px; left:0px;
}


.gallery-block-bg{ background-position:center; background-repeat:no-repeat; background-size:cover;  }
.gallery-block-cnt{  position:absolute; width:90%; left:5%; bottom:.5em  }
.gallery-block.button-c .gallery-block-cnt{ bottom:auto; top:1em; }


.gallery-block:nth-child(1) .gallery-block-color{ background:#e6eee7; }
.gallery-block:nth-child(2) .gallery-block-color{ background:#b1cbb4; }
.gallery-block:nth-child(3) .gallery-block-color{ background:#00a092; }
.gallery-block:nth-child(4) .gallery-block-color{ background:#6c529d; }

.gallery-block:nth-child(5) .gallery-block-color{ background:#006eb7; }
.gallery-block:nth-child(6) .gallery-block-color{ background:#94c2e8; }
.gallery-block:nth-child(7) .gallery-block-color{ background:#fcd999; }
.gallery-block:nth-child(8) .gallery-block-color{ background:#b1cbb4; }

.gallery-block:nth-child(9) .gallery-block-color{ background:#f7a600; }
.gallery-block:nth-child(10) .gallery-block-color{ background:#00a092; }
.gallery-block:nth-child(11) .gallery-block-color{ background:#c7bdde; }
.gallery-block:nth-child(12) .gallery-block-color{ background:#f7a600; }


.gallery-container.active .gallery-block-color{ animation:ani-gallery-block 5s ease-out infinite; animation-direction:alternate;  animation-fill-mode:forwards; transform-origin:left center; }
.gallery-container.active .gallery-block:nth-child(2) .gallery-block-color, .gallery-container.active .gallery-block:nth-child(4) .gallery-block-color, .gallery-container.active .gallery-block:nth-child(7) .gallery-block-color, .gallery-container.active .gallery-block:nth-child(10) .gallery-block-color, .gallery-container.active .gallery-block:nth-child(12) .gallery-block-color{ animation-name:ani-gallery-block-b; }

.gallery-block:nth-child(1) .gallery-block-color, .gallery-block:nth-child(5) .gallery-block-color{ animation-name:none; }

@keyframes ani-gallery-block-b{
	0% {  transform:scale(1,1.1)  }
	20% { transform:scale(1,1.1);  } 
	40% { transform:scale(1,1.1);  } 
	
	45% { transform:scale(1,1.1);  } 
	55% { transform:scale(0,1.1) translateX(-1%);  } 
	
	60% { transform:scale(0,1.1) translateX(-1%);  } 
	80% { transform:scale(0,1.1) translateX(-1%);  } 
	100% { transform:scale(0,1.1) translateX(-1%);  } 
}
@keyframes ani-gallery-block{
	0% {  transform:scale(0,1.1) translateX(-1%)  }
	20% { transform:scale(0,1.1) translateX(-1%);  } 
	40% { transform:scale(0,1.1) translateX(-1%);  } 
	
	45% { transform:scale(0,1.1) translateX(-1%);  } 
	55% { transform:scale(1,1.1);  } 
	
	60% { transform:scale(1,1.1);  } 
	80% { transform:scale(1,1.1);  } 
	100% { transform:scale(1,1.1);  } 
}
 
.gallery-block-cover.active { transform:scale(0,1); }
.gallery-scrollarea-container{ width:100%; height:100vh; display:none; }
.gallery-news-scrollarea-container{ width:100%; height:100vh; }
.gallery-news-container{ position:fixed; width:100%; height:100vh; left:0; top:0; display:none; pointer-events:none}
.gallery-news-container.active{ display:block;}
.gallery-news-container-inner{ position:absolute; width:100%; height:100vh; left:0; top:0; transform-origin:right center; }

.gallery-scrollarea-container.active{ display:block; }
/* gallery */



/* news */
.news-scrollarea-container{ position:relative; width:100%; height:300%; }
.news-container{ overflow:hidden; width:100%; height:100vh; position:fixed; top:0; left:0; display:none; background-color:#bbd6f0 }
.news-container.active{ display:block }

.news-container-inner{ position:absolute; top:50%; transform:translate(50%,-50%); width:200%; left:0; height:25vw; max-width:400vh  }
.news-block{ float:left; width:12.5%; max-width:50vh;  }
.news-block-inner{ width:100%; padding-bottom:calc(100% - 0.5em); background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; position:relative; }
.news-block-inner > div{ width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; transition:transform 400ms}
.news-block.hover .news-block-inner > div{ transform:scale(1.1); }

.news-block-ele { width:100%; padding:1.25em 0em; transform:translateY(-1px)}
.news-block-caption { position:relative; width:calc( 100% - 2em ); margin:auto;    }

.news-block-caption > div:first-child{ display:-webkit-box; height:calc(1.2*2); line-height:1.2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;  }

.home-caption-date { margin-top:0.2em }
.news-block:nth-child(even) .news-block-ele{ background:#006eb7; }
.news-block:nth-child(odd) .news-block-ele{  background:#00a192; } 

.news-block:nth-child(even){ transform:translateY(4vw)}
.news-block:nth-child(odd){ transform:translateY(-3vw)}
.news-block:nth-child(1){ transform:translateY(0vw)}

.news-block:first-child .news-block-inner{ background:#00a192; }
.news-block:nth-last-child(2) .news-block-inner{ background:#006eb7; }

.news-block:nth-last-child(2) .news-block-inner .rnd-button-container {  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.news-title { position:absolute; width:70%; left:50%; top:50%; transform:translate(-50%,-50%); }

.news-block:nth-child(even){transform:translateY(4vw) }
.news-block:nth-child(odd){  transform:translateY(-3vw)}
.news-block:nth-child(1){  transform:translateY(0vw)}
/* news */


/* header & footer */
/* min-height:calc(100vh - 4em);  padding:2em 0;  */

.footer-container{ /* keat 0311 position:-webkit-sticky; position:sticky; bottom:0;keat 0311 */ width:100%; padding:2.5em 0;  }/*jessica 0309*/

.footer-container-inner{ margin:auto; position:relative; width:90%; max-width:1600px; }
.copyright-txt { position:relative; float:right}

.header-container{ position:fixed; width:100%; padding:1.5em 0; top:0; left:0; /*keat 0304*/ /*z-index:99;*/ /*keat 0304*/}
/*keat 0304*/
.menu-container > .header-container-inner{   z-index:99!important; height:5.5em; position:absolute; left:50%;  transform:translateX(-50%); top:0; }
.menu-container > .header-container-inner > .menu-icon-container{ position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0;}
/*keat 0304*/

.header-container-inner{ margin:auto; position:relative; width:90%; max-width:1600px;}
.header-logo { position:relative; width:6em; height:2.5em; background-image:url("../img/hkuinno-logo.png"); background-position:center; background-repeat:no-repeat; background-size:6em 2.5em; float: left; }
.menu-icon-container{ position: relative; width:2em; height:25px; cursor:pointer; float:right; margin: 0.5em 0}
.menu-rectangle{ position: absolute; width:100%;  background-color:#3c2d5e; border-radius:4px; height:0.2rem;  transform:translate(0,0%); opacity:0.99 }
.menu-rectangle:nth-child(1){ top:0; transition:transform 200ms;}
.menu-rectangle:nth-child(2){  transition:transform 200ms;    }
.menu-rectangle:nth-child(3){ top:22px; transition:transform 200ms; }
.menu-rectangle:nth-child(4){   opacity:1;  transition:transform 200ms, opacity 0ms 200ms }

.menu-icon-container.active .menu-rectangle { background-color:#fff}
.menu-icon-container.active .menu-rectangle:nth-child(1){ opacity:0; }
.menu-icon-container.active .menu-rectangle:nth-child(2){ transform:translate(0,0%) rotate(45deg); }
.menu-icon-container.active .menu-rectangle:nth-child(3){ opacity:0;  }
.menu-icon-container.active .menu-rectangle:nth-child(4){ opacity:1; transform:translate(0,0%) rotate(-45deg); transition:transform 200ms, opacity 0ms }

.menu-rectangle:nth-child(2), .menu-rectangle:nth-child(4){ top:11px; transform:translate(0,0%)}
 
.menu-container-navig{ z-index:99}

.menu-container{ position:fixed; top:-14000%; right:0; width:100%; height:100%;background:rgba(0, 0, 0, 0.7); transition:top 0ms 400ms linear}
.menu-container-inner{ position:relative; display:flex; align-items:center; justify-content:flex-end; min-height:100%;  }
.menu-container-navig{ position:relative; float: right; width:35%; margin-right:2em;  }
.menu-circle{ position:absolute; left:42%; width:100vw; height:100vw; border-radius:100vw; background-color:#006eb7; transform:translate(50%, -100%); box-shadow: 0 1em 2em 0 rgba(0, 0, 0, 0.5); } /*menu 0308*/

 



.menu-container-ele{position:relative; /*display:flex; justify-content:space-between; align-items:center;*/  padding:0.7em 0; margin:0;  }
.menu-text{ margin-right:2em;align-items:center; opacity:0; transform:translate(0, 0.75em); font-family:'KarlaBold'; }
.menu-img-container{ width:30%; opacity:0; transition:opacity 300ms ease-in; position:absolute; right:5%; top:50%; transform:translateY(-50%)}
.menu-img{position:relative;width:100%; padding-bottom:80%;background-position:center; background-repeat:no-repeat; background-size:cover; }

.menu-img-container.hover{ opacity:1; transition: opacity 400ms ease-in}

.menu-container-ele:nth-child(1){ padding-top:0}
.menu-container-ele:last-child{ padding-bottom:0}
/*.menu-container-ele.hover .menu-text.inactive{opacity: 0.5; transition: opacity 200ms ease-out}*/





/* when menu close */
.menu-container .menu-text{ transition:transform 200ms 0ms ease-in, opacity 200ms 0ms ease-in; }
.menu-container .menu-circle{ transition:transform 400ms 200ms cubic-bezier(0,.25,.32,.99);  }
/* when menu close */


/* when menu open */
.menu-container.active{ top:0; transition:top 0ms 0s linear; }
.menu-container.active .menu-circle{ transform:translate(0,0); transition:transform 500ms 0ms cubic-bezier(0,.25,.32,.99); }
.menu-container.active .menu-text{ transform:translate(0,0); opacity:1; transition:transform 500ms 300ms ease-in, opacity 500ms 300ms ease-in; }
/* when menu open */

/* header & footer */


/*news-media-mia0308*/


.news-media-area-container .slideshow-ele{ background-size:contain; }
.news-media-area-container .slideshow-container-mask{ padding-bottom:66%!important}

.news-media-area-inner{ position:absolute ; height:100%; width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }

.news-media-ele { position:relative; width:100%; height:auto; margin-bottom:3em; }
.news-inner-ele { position:relative; width:100%; height:30vh; margin-top:3em }
.news-media-area-container { position:relative;  width:60%;  float:left; margin-right:4%;  }
.video-play-container {position:absolute; width:4em; height:4em; top:50%; left:50%; transform:translate(-50%,-50%); border: solid 1px #fff; border-radius: 1000px; cursor:pointer }
.video-play-container.hover .play-button-circle { width:4em; height:4em; box-shadow:0px 0px 30px rgba(60, 60, 60, 0.5); }
.video-play-container.hover { width:5em; height:5em; transition: width 200ms, height 200ms, transform 200ms;}
.play-button-circle { position:absolute; width:3.3em; height:3.3em; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:1000px; background:#fff}
.play-button-triangle { position:absolute; width:1em; padding-bottom:1.6em; top:50%; left:50%; transform:translate(-40%,-50%); background-image:url("../img/button-triangle.svg"); background-repeat:no-repeat; background-position:center center; background-size:cover;}

.news-media-info { position:relative; width:calc( 100% - 64% );  padding-bottom:39%; float:left; margin-right:0 }
.news-info-group { position:absolute; bottom:0; }
.news-media-title { margin-bottom:0.5em }

.news-media-heading { margin:auto; width:100%}
.news-media-body { margin-bottom:5em; }
.news-media-body > div { margin-bottom:1em }
.news-media-body li{ margin-bottom:1em;}

.bottom-site-container{ position:relative; width:100%; height:5em;}
.bottom-site-arrow { position:absolute; left:0; top:52%; border: solid #aeaeae; border-width: 0 2px 2px 0; display:inline-block; padding:3.5px; transform:translateY(-50%) rotate(135deg);}

.bottom-site-prev { position:relative; margin-left:1.5em;  }
.bottom-site.next-cont .bottom-site-prev { float:right; margin-left:0em; margin-right:1.5em; }
.bottom-site.next-cont .bottom-site-arrow.next{transform:translateY(-50%) rotate(-45deg); left:auto; right:0 }

.bottom-pre-page { float:left }

.bottom-pre-page .bottom-site-prev .pre-site {margin-right:5px }
.bottom-site.next-cont .bottom-site-prev .pre-site {margin-right:0px }

.bottom-site.next-cont .bottom-pre-page { float:right}


.bottom-pre-page.hover .bottom-site-prev .pre-site { opacity:1; color:#3c2d5e;}
.bottom-pre-page.hover .bottom-site-arrow { border: solid #3c2d5e; border-width: 0 2px 2px 0; display:inline-block; padding:3.5px;  }
.current-site { position:relative; float:left; cursor:auto  }

.bottom-site{  position:relative; display:inline-block; float:left; top:50%; transform:translateY(-50%);}
.bottom-site.next-cont{ position:relative; float:right; width:15%; }


/*news-media-mia0308*/

/*all*/


.slideshow-container{ position:relative; width:100%;   }

.slideshow-container-mask{ width:100%; padding-bottom:66%;  position:relative; }
.slideshow-container-inner{ width:100%; height:100%; position:absolute; overflow:hidden;   }
.slideshow-container-inner-inner{ width:100%; height:100%; position:relative; transition:transform 400ms ease-out;  }

.slideshow-indicator-container{ position:absolute; display:flex; bottom:2em; left:50%; transform:translateX(-50%); justify-content:center; }
.slideshow-indicator-container.outer{ position:relative; margin:1em auto; bottom:auto; left:auto; transform:translateX(0%); }
.slideshow-indicator-ele{ border-radius:1000px; width:0.5em; height:0.5em; background:#C2B0F4; margin:0 0.5em; cursor:pointer;}
.slideshow-indicator-ele.about{ background:#C2B0F4; }

.slideshow-indicator-ele.hover, .slideshow-indicator-ele.active{ background-color:#3C2D5E; }

.slideshow-counter-container{ text-align:center; color:#000; margin:1em auto; line-height:1; }

.slideshow-desc-container{ text-align:center;  margin:1em auto 0 auto; overflow-x:hidden; height:2.5em; position:relative; width:75%; }
.slideshow-desc-container .slideshow-ele{ display:flex; align-items:flex-start; justify-content:center; }

.slideshow-thumbnail-container{ max-width:85%; height:4em; margin:auto; position:relative; overflow:hidden;} /*jessica 0308*/
.slideshow-thumbnail-container-inner{transition:transform 300ms ease-out; margin:auto }
.slideshow-thumbnail-ele{width:4em; height:4em; margin:0 0.5em; float:left; cursor:pointer; background-size:cover; background-position: center; background-repeat: no-repeat }/*jessica 0308*/

/*jessica 0307*/
.slideshow-arrow-container{position:absolute; border-radius:1000px; width:3em; height:3em; background:#00a092; top:50%; cursor:pointer; opacity:0.5; transition: opacity 200ms linear; }
.slideshow-arrow{ position: absolute; border: solid #fff; border-radius: 2px; border-width: 0 2px 2px 0;display: inline-block; padding: 0.5em; transform: rotate(-45deg); left: calc(50% - 0.8em); top:calc(50% - 0.6em); }
.slideshow-arrow.prev{transform: rotate(45deg) scaleX(-1); left: calc(50% - 0.4em); }
.slideshow-arrow-container.prev{ transform:translate(-100%,-50%); left:50%;}
.slideshow-arrow-container.next{ transform:translate(50%,-100%); right:0%;}
.slideshow-arrow-container.hover{ opacity:1; transition: opacity 200ms linear }
.slideshow-arrow-container.inactive{ opacity:0; cursor:default; }
/*jessica 0307*/

.slideshow-ele{ width:100%; height:100%; position:absolute; top:0%; left:0; transform:translateX(-100%); animation-duration:600ms; animation-fill-mode:forwards; animation-iteration-count:1; background-size:cover; background-repeat:no-repeat; background-position:center;   }

.news-media-area-container .slideshow-ele{ opacity:0; transition:opacity 0ms 600ms linear; height:calc(100% - 1px);}
.news-media-area-container .slideshow-ele.active{ opacity:1; transition-delay:0ms }

.overlay-container .slideshow-ele{ opacity:0; transition:opacity 0ms 600ms linear; height:calc(100% - 1px);}
.overlay-container .slideshow-ele.active{ opacity:1; transition-delay:0ms }

 
.slideshow-ele.slideshow-right-center{ animation-name:slideshow-right-center;  }
.slideshow-ele.slideshow-center-left{ animation-name:slideshow-center-left; }
.slideshow-ele.slideshow-left-center{ animation-name:slideshow-left-center; }
.slideshow-ele.slideshow-center-right{ animation-name:slideshow-center-right; }

/* keat 0311 */
.overlay-container .slideshow-ele{ animation-duration:0ms; } 
/* keat 0311 */

@keyframes slideshow-fade{
	0%   { opacity:0.4; }
	100% { opacity:1;   }
}
@keyframes slideshow-right-center{
	0%   { transform:translateX(100%);  }
	100% { transform:translateX(0%);   }
}
@keyframes slideshow-center-left{
	0%   { transform:translateX(0%);  }
	100% { transform:translateX(-100%);  }
}
@keyframes slideshow-left-center{
	0%   { transform:translateX(-100%);  }
	100% { transform:translateX(0%);   }
}
@keyframes slideshow-center-right{
	0%   { transform:translateX(0%);  }
	100% { transform:translateX(100%);  }
}


 /*jessica 0308*/
.slideshow-container.profile{ width:90%; margin:auto; }
.slideshow-container.profile .slideshow-arrow-container{ display:none; }/*jessica 0309*/
.slideshow-container.thumbnails{ width:100%; margin:2em auto; } 
.slideshow-container.thumbnails .slideshow-container-mask{  padding-bottom:30%; }/*jessica 0308*/

.slideshow-container.thumbnails .slideshow-container-inner-inner{ width:500%; display:flex; justify-content:flex-start; }
.slideshow-container.thumbnails .slideshow-ele{ width:5.99%; margin-right:1%; position:relative; animation-name:none!important; transform:translateX(0); }



.slideshow-container.gallery{ width:calc(90% - 10em); max-width:calc(100vh); margin:1em auto;} 
.slideshow-container.gallery .slideshow-container-mask{ padding-bottom:45%; } 
.slideshow-container.gallery .slideshow-arrow-container.prev{ transform:translate(-100%,-50%); left:5%;   }
.slideshow-container.gallery .slideshow-arrow-container.next{ transform:translate(100%,-50%); right:5%; }

.big-container-inner.gallery .slideshow-arrow-container.prev{ transform:translate(-85%,-50%); }
.big-container-inner.gallery .slideshow-arrow-container.next{ transform:translate(85%,-50%);  }



.overlay-container{ position:fixed; width:100%; height:calc(100vh - 0em); top:0; left:0; background:rgba(0,0,0,0.85);  overflow:auto; display:none; z-index:99; opacity:0} /*jessica 0308*/
.overlay-container.active{ display:block; opacity:1; transition:transform 200ms, opacity 300ms }/*jessica 0308*/
.overlay-container-inner{ width:100%; position:relative; display:flex; align-items:center; justify-content:center; min-height:100%;  min-height:calc(100vh - 2em);  padding:1em 0;   } 

/*jessica 0308*/
.gallery-close-button{ position:absolute; width:2em; height:1.32em; cursor:pointer; margin:0.59em 0; top:0; right:0;background:transparent; }
.gallery-close-button .menu-rectangle{background-color:#fff; opacity:1;top:50%!important;  transition:transform 200ms , opacity 0ms;}/*jessica*/
.gallery-close-button .menu-rectangle:nth-child(1){transform:translate(0,-50%) rotate(45deg); }
.gallery-close-button .menu-rectangle:nth-child(2){  transform:translate(0,-50%) rotate(-45deg); }
/*jessica 0308*/


/*20220408*/
.menu-container-navig::-webkit-scrollbar, .all-container::-webkit-scrollbar, .filter-dropdown-container::-webkit-scrollbar, .month-container::-webkit-scrollbar, .overlay-container::-webkit-scrollbar, .slideshow-desc-container::-webkit-scrollbar{ display:none; }
.menu-container-navig, .all-container, .filter-dropdown-container, .month-container, .overlay-container, .slideshow-desc-container{ -ms-overflow-style:none; scrollbar-width:none; }
/*20220408*/

/*20220411*/
.overlap-cover .overlap-info-text { display:block; display: -webkit-box; height:calc(1.2*2); line-height:1.2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;}

.gallery-all-container .overlap-cover .overlap-info-text:first-child{ -webkit-line-clamp:3; }

.overlap-mobile .overlap-info-mobile { display:block; display: -webkit-box; height:calc(1.2*2); line-height:1.2; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow: ellipsis;}

/*20220411*/

.sns-icon{ width:1.5em; height:1.5em; margin-top:0.5em;  transform:translateY(0.6em); background-position:left center; background-size:200% auto; background-repeat:no-repeat  }
.sns-icon.hover{ background-position:right center; }


.sns-icon.linkedin{ background-image:url(../img/sns-linkedin.svg) }

@media only screen and (min-width:0px) and (max-width:1023px){
	/*menu 0308*/
	.menu-circle{  left:30%;   }
	.menu-container-navig{width:55%;}
	.menu-circle{left:20%;  width:135vh; height:135vh; border-radius:135vw;  }
	/*menu 0308*/
	.dotmap-title-container .txt-mega {  font-size:2em }
	
	.sns-icon{ idth:2em; height:2em;  margin:1em auto 0 auto; transform:translateY(0em); }
}


@media only screen and (min-width:936px) and (max-width:1280px){
	/*menu*/
	.menu-circle{  left:30%;   }
	.menu-container-navig{width:45%;}
	/*menu*/
	
	.banner-text{ font-size:8.5em; }
}

@media only screen and (min-width:769px) and (max-width:935px){
	/*menu*/
	.menu-circle{  left:30%;   }
	.menu-container-navig{width:48%;}
	/*menu*/
	
	.banner-text{ font-size:7.5em; }
}

@media only screen and (min-width:0px) and (max-width:768px){
	
	.line-height { line-height:1.5 }
	.gallery-block-color{ left:-1px; width:calc(100% + 1px); top:-1px; height:calc(100% + 1px);}
	
	/*.slideshow-indicator-container.outer{ position:relative; margin:-5em auto 1em auto; bottom:auto; left:auto; transform:translateX(0%); }*/
	/*mia0309*/
	.page-title{ width:100%; max-width:auto; margin:0 auto 1.5em auto;}
	.news-media-ele {  margin-bottom:2em; }
	.news-media-area-container {  width:100%; float:none;  }
	.news-media-info { display:none }
	
	.news-media-body { margin-bottom:2em; }
	.news-media-body > div { margin-bottom:0em }
	.news-inner-ele { height:auto;  margin-top:2em   }
	/*0310*/
	.filter-dropdown-ele-time { width:100%;  }
	.time-button {width:80% }
	.bottom-site{ width:100%}

	.bottom-site.next-cont{ width:100%}
	/*0310*/
	

/*	.menu-circle{ width:100vh; height:100vh;   } */
	.txt-mega{ font-size:2.5em;}
	
	.all-container-inner{  min-height:110vw;  }	

	.intro-container{ top:52%; transform:translate(-50%,0); max-width:none;  }  
 	.intro-container > div > div:nth-child(2){  margin-top:1.25em }
	.intro-container-inner{ width:100%; }

	.section-container{ display:block;   }
	
	.gallery-news-container-inner{ transform-origin:bottom center; position:relative;}
	.album-all-container .placeholder { background:#d653c6; position:absolute; top:0; height:1em; width:30%; }
	
	.news-scrollarea-container{ height:auto; }
	.news-container{ overflow:visible; height:auto; position:relative; top:auto; left:auto; padding-bottom:0em;   padding-top:100vh; }
	.gallery-news-scrollarea-container{ height: 0 }
	.news-container-inner{ position:relative; top:auto; transform:translate(0%,-0%); width:100%; left:auto; height:auto; }
	.news-block{ width:50%; margin-bottom:0vw; margin:0; transition:transform 400ms ease-out  }
	
	.news-block:nth-child(even){ transform:translateY(0vw); margin-top:10vw}
	.news-block:nth-child(odd){ transform:translateY(-40%)}
	.news-block:nth-child(1){ transform:translateY(-0%)}
	.news-block:nth-child(2){margin-top:35vw}
	
	
	.news-block:nth-child(even){transform:translateY(5%) }
	.news-block:nth-child(odd){  transform:translateY(-15%)}
	.news-block:nth-child(1){  transform:translateY(20%); }
	
	.news-block.active:nth-child(even){transform:translateY(-18%) }
	.news-block.active:nth-child(odd){  transform:translateY(-35%)}
	.news-block.active:nth-child(1){  transform:translateY(0%); }
	
	.news-block-inner{ padding-bottom:100%; }
	 
	.news-block-caption{ bottom:0 }
	/*.news-container-inner > div:last-child .news-block-ele { width:100%; padding:1.5em 0 0 0; } */
	.section-container.home .section-container-inner{ padding:100vw 0 5em 0; }
	.section-container.ahome .section-container-inner{padding:100vw 0 5em 0; } 	
	.section-container-inner{ float:none; width:100%; margin:auto; max-width:none; padding:100vw 0 5em 0; }
	.section-container.bg-blue .section-container-inner{ float:none; }
	#dotmap-title-container{ bottom:2em; left:1em; }
	.news-block:nth-last-child(2) .news-block-inner .rnd-button-container { padding:1em 1.5em;  }
	.news-block .news-block-inner {width: 100%}
	.footer-container-inner { text-align:center  }

	.copyright-txt { float:none; margin-top: 5em; }
	
	/*menu 0308*/
	.menu-container-inner{justify-content:center;}
	.menu-circle{left:-50%; width:200vw; height:200vw; border-radius:200vw;}
	.menu-container-navig{width:80%!important; /*margin: calc(100% -55%)*/ margin:0 auto; }
	.menu-container-ele{padding: 1.2em 0;}
	.menu-img-container{display: none}
	/*menu 0308*/
	
	/*banner*/
	.banner-top-container { height:30vh; overflow:hidden }
	.banner-background {  height:30vh }
	
	
	.banner-text{ font-size:5.2em; animation:animate-banner-txt 5s linear;}
	/*banner*/
	
	/*sector*/
	.sectors-all-container { display:none }
	.sectors { position:relative; width:100%; }
	.mobile-sector-container { display:block; width:90%; max-width:375px; margin: 1.5em auto ;  }
	.big-container-inner.centre .mobile-sector-container { margin: 0 auto 3em auto; }

	.sector-single-txt{ display:inline-block; padding:1em 0; }
	.sector-single-txt.hide {display:none; border-top:0.8px solid #fff }
	
	.sectors-mobile-arrow { position:absolute; right:1.5em; top:50%; transform:translateY(-50%) rotate(45deg); border:solid #fff; border-width: 0 2px 2px 0; display:inline-block; padding:1.5px 5px 5px 1.5px }
	
	.sectors.hover .sectors-mobile-arrow { border:solid #fff; border-width: 0 2px 2px 0;padding:1.5px 5px 5px 1.5px;}
	.sectors.active .sectors-mobile-arrow { border:solid #fff; border-width: 0 2px 2px 0; padding:1.5px 5px 5px 1.5px; top:1.8em; transform:rotate(-135deg);}
	
	.mobile-sector-container .sectors.active .sectors-single-container { background-color:#3c2d5e; color:#fff; border-radius:1em; cursor:pointer; text-align:center; box-shadow:2px 2px 10px rgba(60, 60, 60, 0.7); } 

	
	
	
	/* keat 0301 */
	.sectors.all .sectors-single-container { background-color:#3c2d5e; color:#fff }
	.sectors.air .sectors-single-container { background-color:#006EB7; color:#fff }
	.sectors.health .sectors-single-container { background-color:#00A092; color:#fff }
	.sectors.active.air .sectors-single-container { background-color:#006EB7; color:#fff } 
	.sectors.active.health .sectors-single-container { background-color:#00A092; color:#fff } 
	 
	/* keat 0301 */
	.sectors.active .sector-single-txt.hide { display:block; opacity:0.5 }
	
	.section-intro-inner-container .slideshow-container-mask{ padding-bottom:70%; }
	/* keat 0308 */
	.slideshow-container-mask{ padding-bottom:100%; height:auto }

	.big-container-inner.smaller{ width:100% }
	.slideshow-container.mobileslide{ margin-bottom:8em; width:100%!important;   } 
	.slideshow-container.mobileslide .slideshow-arrow-container.prev{ transform:translate(0%,0%);  }
	.slideshow-container.mobileslide .slideshow-arrow-container.next{ transform:translate(0%,0%);  }
	/* keat 0308 */
	
	
	/*sector*/
	
	
	/*all*/
	.about-mission-container{ width:100%; }
	.dotmap-pin.hover .dotmap-pin-label{ opacity:0; }
	.dotmap-pin-label{ display:none }
	/*all*/
	
	/*news*/
	.structure-inner-image { width:100%; padding-bottom:66%;  margin-right:0em;  }

	
	.news-structure-container.news .structure-inner-content-group { width:100%; margin-top:1.5em; height:auto }
	.news-structure-container.news  { padding:1em 0 10em 0 }
	.news-structure-container.news > div:first-child { padding:0 0 2.5em 0}

	.news-structure-container.news .content-inner-title { margin-bottom:0.3em }
	.big-container.news .mobile-sector-container .sectors.active .sectors-single-container { box-shadow:none; border-radius:1000px }
	.big-container.news .sectors-mobile-arrow {top:2.2em; transform:rotate(-45deg);}
	
	.news-structure-single-container  .content-inner-body{ display:none; }

	
	/*0309*/
	
	.news-structure-single-inner { position:relative; width:100%; height:auto;   }
	.news-info-container { position:relative; margin-top:2em; width:100% }

	.news-info-container.mobile { display:block;  width:100% }
	/*0309*/
	
	.big-container-inner.centre .structure-inner-image { padding-bottom:25%;  }
	
	
	/*filter*/
	
	.filter-all-group-container { display:none }
	.filter-radio-container { display:none }
	
	.filter-container { position:relative; height:100%; display:block  }
	.filter-ele-container { width:100%; margin:auto; position:relative; height:auto; }
	.filter-main-inner { position:relative; padding:1.5em 0; width:100%; margin-bottom:0.3em; cursor:pointer; text-align:center; }
	
	.filter-ele-inner { position:relative; width:90%;  margin:auto;  text-align:left; }
	.filter-main-inner .filter-ele-inner { text-align:center; margin-bottom: 0;  }
	.filter-main-arrow {  position:absolute; border:solid #fff; border-width: 0 2px 2px 0; display:inline-block; padding:3px; transform:rotate(45deg) translateY(-50%); right:5px; top:0.5em;}

	.filter-ele-container.purple { background:#3c2d5e; }
	.filter-ele-container.blue { background:#006eb7; }
	.filter-ele-container.green { background:#00A092; }
	.filter-ele-container.main .filter-main-arrow { position:absolute; border:solid #3c2d5e; border-width: 0 2px 2px 0; display:inline-block; padding:3px; transform:rotate(135deg) translateY(-50%); left:0; right:auto; top:30%; }
	
	.filter-ele-items { position:relative; margin:2em auto 0 auto; width:100%; height:auto }
	.filter-element { margin:0em auto; }
	.filter-ele-inner-container{ position:relative; margin:1.15em auto;  }
	.filter-name { position:relative; top:0%; transform:translateY(0%); width:90%; height:100%; }
	
	.filter-ele-items.space { margin:1.8em 0 0 0 }

	.filter-main-dropdown.active .filter-main-arrow { transform:rotate(-135deg); }
	.button-bottom { margin:5em auto; position:relative; width:10em; cursor:pointer}
	.period-button{ position:relative; text-align:center; margin:auto; padding:1em 1.4em; background:#fff; border-radius:5em; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);  }
	
	.selected-bar { position:relative; float:left; width:45%; margin-left:2.5%;  height:2em; background:rgba(225,225,225,0.5);  }
	.selected-bar-container  { position:absolute; width:100%; height:2em; top:60%; left:50%; transform:translate(-50%,-50%); display:none }
	.selected-bar-container  > div:last-child {width:45%; margin-left:5%; }
	
	.clear-button { position:relative; margin:1em auto 0 auto; text-decoration:underline; display:inline-block; left:50%; transform:translateX(-50%) }
	/*filter*/
	
	/*mia0307*/
	.mobile-filter { position:relative; margin:auto; background-color:#3c2d5e; color:#fff; border-radius:1000px; text-align:center; box-shadow:2px 2px 10px rgba(60, 60, 60, 0.3); max-width:375px;  display:block }
	.mobile-filter-txt { padding:1.5em 0; text-align:center}
	.filter-txt {width: 100%}

	/*mia0307*/
	/* keat 0308 */
	.desktoponly{ display:none; }
	/* keat 0308 */
	
	/* keat 0307 */
	.mobileonly{ display:block; }
	.filter-all-group-container{ display:none; width:100vw; position:fixed; z-index:10; left:0; top:5.5em; height:calc(100vh - 5.5em); overflow:scroll;  background:#E2EBF1 }
	.filter-all-group-container.active{ display:block;}
	.filter-all-group-container { margin-bottom:0em; margin-top:0em;   }
	.filter-all-group-container.news .filter-inner-container:nth-child(1){ display:none }
	.filter-inner-container{ float:none; margin:0 auto 0 auto; border:none; width:100vw!important; border-radius:0;  }
	
	.filter-inner-container.blue .filter-content{ background:#006eb7}
	.filter-inner-container.purple, .filter-inner-container.purple .filter-content{ background:#3c2d5e}
	
	.filter-dropdown-container{ position:relative; top:auto; left:auto; transform:translate(0,0); border-radius:0; max-height:none; background:#00ff00; padding:1em 0 2em 0; width:90%; margin:0 auto 0.2em auto;   }
	.filter-inner-circle { display:block;  }
	.filter-dropdown-ele.selected{ display:block }
	.filter-dropdown-ele:nth-child(1){ display:none}
	/* keat 0307 */
	
	/*mia0307*/
	.filter-txt { color:#fff; padding:1.5em 0em;    }
	.filter-inner-container.green {background:#00a092 }
	.filter-inner-container.active { border-radius:0  }
	.filter-area { width:90%; margin:auto; height:5em; }
	.filter-area .filter-txt { font-size:1.2em; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:calc( 100% - 1.5em ); float:left }
	.filter-arrow { position:relative; float:right; margin-right:3px; border:solid #fff; border-width:0 2.5px 2.5px 0; top:50%; transform:rotate(45deg) translateY(-50%); transform-origin:center center; right:auto; }

	.filter-inner-container.active .filter-arrow { top:50%; transform:rotate(-135deg);  }
	.filter-inner-container.active .filter-dropdown-container{ box-shadow:none; }

	.filter-dropdown-ele.subtitle-mobile { padding-top:1.8em; border-top:1px solid rgba(255,255,255,0.3); margin:1em 0 0 0; }
	

	.filter-dropdown-ele { border-bottom:none; width:100%;   }
	.filter-dropdown-ele > div:first-child { width:100%; float:left   }
	.filter-dropdown-ele > div:first-child > div:first-child { width:calc(100% - 1.5em); float:left   }

	.filter-inner-circle { position:relative; float:right; width:1em; height:1em; top:-1px;  border:1px solid #fff; border-radius:100px; cursor:pointer }
	
	/* keat 0308 */
	.filter-dropdown-ele.inactive{ pointer-events:all; opacity:1; cursor:pointer; }
	.filter-dropdown-ele.selected .filter-inner-circle { background: #fff }
	/* keat 0308 */
	.time-button {padding:0.5em 0 }
	.apply-period-button {  border:none; text-decoration: underline}
	.selected-bar-container { display:block }
	.time-button-inner .txt-small { font-size:1em}
	
	.filter-inner-container.calendar { float:none; width:auto; }
	.filter-button { position:relative; width:100%; display:block; margin:3em auto 5em auto; text-align:center }
	.filter-button .rnd-button-container { padding:1.5em 4em; background:#fff; color:#878787; box-shadow: 0 3px 3px 0 rgba(66, 66, 66, 0.1); }
	.filter-button.active .rnd-button-container { color:#424242;  }
	
	/*mia0307*/
	
	/* keat 0308 */
	.filter-tags-container{ margin:1em 0; width:100%; }
	.filter-tag-container{ margin-right:1em; margin-bottom:0.5em; padding:0.5em 2.5em 0.5em 1.5em; border-radius:100px; background:#000; line-height:1; display:inline-block; position:relative; }
	.filter-tag-container .close-btn{ position:absolute; right:0.75em; width:1em; height:1em; top:50%; transform:translateY(-50%); cursor:pointer; }
	.filter-tag-container.sector{ background-color:#006eb7; }
	.filter-tag-container.center{ background-color:#006eb7; }
	.filter-tag-container.type{ background-color:#3c2d5e; }
	.filter-tag-container.period{ background-color:#00a092; }
	
	.filter-tag-container .filter-close-line { top:50%; left:50%; right:auto; transform:translate(-50%, -50%); }
	.filter-tag-container .filter-close-line::after, .filter-tag-container .filter-close-line::before { background:#fff; }
	
	.date-ele.selected{ background:rgba(225,225,225,0.5);  }
	.filter-inner-container.calendar.needclear .filter-close { display:none; }
	/* keat 0308 */
	
	.slideshow-thumbnail-container{max-width:45%; margin:auto}
	.slideshow-desc-container{ overflow:hidden;   }

	
	/* keat 0309 */
	.filter-tag-container > div:nth-child(1){ text-overflow:ellipsis; width:auto; max-width:calc(90vw - 4em - 5em);  height:1em; white-space:nowrap; overflow:hidden;   }
	.slideshow-container.thumbnails .slideshow-container-mask{  padding-bottom:40%; } 
	.slideshow-container.thumbnails .slideshow-ele{ width:8.5%; margin-right:0.5%; }
	
	/* keat 0309 */
	
	.filter-all-group-container .rnd-button-container { font-size:10pt }
	
	.big-container-inner.gallery .slideshow-arrow-container.prev{ transform:translate(50%,-50%); left:0%; }
	.big-container-inner.gallery .slideshow-arrow-container.next{ transform:translate(-50%,-50%); right:0%; }

}
	


@media only screen and (min-width:668px) and (max-width:768px){	
	/*menu*/
	.menu-circle{  left:-20%;   }
	.menu-container-navig{ width:55% }
	.menu-circle{ width:240vh; height:240vh }
	.menu-container-ele{padding: 1em 0;}
	.menu-container-ele .menu-text {font-size: 32px}
	/*menu*/
	
}

@media only screen and (min-width:569px) and (max-width:667px){
	/*menu*/
	.menu-circle{  left:-20%;   }
	.menu-container-navig{width:55%;}
	.menu-circle{ width:240vh; height:240vh;   }
	.menu-container-ele{padding: 1em 0;}
	.menu-container-ele .menu-text {font-size: 28px}
	/*menu*/
}

@media only screen and (min-width:0px) and (max-width:568px){
	.structure-inner-image { padding-bottom:66%;  }
	.news-block-inner .rnd-button-container { padding:1em 0; width:40%}
	/*menu*/
	.menu-circle{  left:-20%;   }
	.menu-container-navig{width:75%;}
	.menu-circle{ width:240vh; height:240vh;   }
	.menu-container-ele{padding:1em 0;}
	/*menu*/
	
	.big-container-inner.centre .structure-inner-image { padding-bottom:10%;  }
	
}

@media only screen and (min-width:480px) and (max-width:639px) {
	html,body{ font-size:13px; }
	
	.menu-icon-container{ height:20px; }
	.menu-rectangle:nth-child(2), .menu-rectangle:nth-child(4){ top:8px;  }
	.menu-rectangle:nth-child(3){ top:16px;  }
}


@media only screen and (min-width:0px) and (max-width:479px) {
	html,body{ font-size:13px; }
	
	.rnd-button-container{font-size:1em}
	.txt-mega{ font-size:2em;}
	#dotmap-title-container{ bottom:2em; left:1em; width:90% }
	
	/*menu 0308*/
	.menu-container-inner{justify-content:flex-start;}
	.menu-circle{left:-40%; width:150vh; height:150vh; border-radius:150vw;}
	.menu-container-ele{padding: 1.2em 0;}
	.menu-container-navig{width:80%; float: left; margin-left: 1em;}
	/*menu 0308*/
	 
	.banner-text{ font-size:4.2em; animation:animate-banner-txt 4s linear 1;  }	
	/*jessica 0308*/
	/*
	.slideshow-container.gallery .slideshow-arrow-container.prev{ transform:translate(0%,-50%); left:1.7em; }
	.slideshow-container.gallery .slideshow-arrow-container.next{ transform:translate(0%,-50%); right:1.7em; }*/
	.slideshow-thumbnail-container{max-width:63%; margin:auto}
	.slideshow-desc-container{margin:1em auto; height:7em;}
	/*jessica 0308*/
	
	.menu-icon-container{ height:20px; }
	.menu-rectangle:nth-child(2), .menu-rectangle:nth-child(4){ top:8px;  }
	.menu-rectangle:nth-child(3){ top:16px;  }
	
	.banner-top-container { height:25vh; overflow:hidden }
	.banner-background {  height:25vh }
	
}
	
@media only screen and (min-width:0px) and (max-width:375px) {
	html,body{ font-size:13px; }
	/*menu 0308*/
	.menu-container-navig{margin-left: 0.5em;}
	.menu-container-ele{padding: 1em 0;}
	/*menu 0308*/
	/*news landing*/
	/*news landing*/
	
	.banner-text{  font-size:3.5em; animation:animate-banner-txt 4s linear 1;} 
	
	/*jessica 0308*/
	/*
	.slideshow-container.gallery .slideshow-arrow-container.prev{ transform:translate(0%,-50%); left:1.5em; }
	.slideshow-container.gallery .slideshow-arrow-container.next{ transform:translate(0%,-50%); right:1.5em; }*/
	.slideshow-thumbnail-container{max-width:70%; margin:auto}
	/*jessica 0308*/
}
	
@media only screen and (min-width:0px) and (max-width:320px) {
	html,body{ font-size:13px; }
	/*menu 0308*/
	.menu-container-navig{margin-left: 0.5em;}
	.menu-container-ele{padding:0.8em 0;}
	/*menu 0308*/
	
	
	.structure-inner-content-group{ height:50%  }
	.content-inner-title { line-height:1 }
	.content-inner-title.txt-medium { font-size:1em; }
	/*jessica 0308*/
	/*
	.slideshow-container.gallery .slideshow-arrow-container.prev{ transform:translate(0%,-50%); left:1.3em; }
	.slideshow-container.gallery .slideshow-arrow-container.next{ transform:translate(0%,-50%); right:1.3em; }*/
	.slideshow-desc-container{width:95%}
	.slideshow-thumbnail-container{max-width:81%;; margin:auto}
	/*jessica 0308*/
	
}



@media only screen and (min-width:640px)  and (max-width:1023px) {
	html,body{ font-size:14px; }
	
	/*news landing*/
	/*news landing*/
	
	.menu-icon-container{ height:21px; }
	.menu-rectangle:nth-child(2), .menu-rectangle:nth-child(4){ top:9px;  }
	.menu-rectangle:nth-child(3){ top:18px;  }
}


/* keat 0308 */
@media only screen and (min-width:769px) {
	.big-container-inner.smaller{ max-width:1024px; }
	

	.slideshow-container.mobileslide .slideshow-ele{ height:auto; position:relative; transform:translate(0)!important; animation-name:none!important}
	.slideshow-container.mobileslide .slideshow-container-inner{  height:auto; position:relative; overflow:visible;  }
	.slideshow-container.mobileslide .slideshow-container-mask{ padding-bottom:0%; height:auto; }
}
/* keat 0308 */

@media only screen and (min-width:1024px) and (max-width:1279px) {

	/*menu 0308*/
	.menu-container-navig{width:40%;}
	.menu-circle{left:32%; width:140vh; height:140vh; border-radius:140vw;  }
	/*menu 0308*/
	
	/*news landing*/
	/*news landing*/
	.section-container.home{ padding:5em 0; }
	.section-container.ahome{ padding:3em 0; }
	
	.menu-icon-container{ height:23px; }
	.menu-rectangle:nth-child(2), .menu-rectangle:nth-child(4){ top:10px;  }
	.menu-rectangle:nth-child(3){ top:20px;  }
}

@media only screen and (min-width:1161px) and (max-width:1279px) {

	/*menu 0308*/
	.menu-container-navig{width:42%;}
	.menu-circle{left:35%; width:145vh; height:145vh; border-radius:145vw;  }
	/*menu 0308*/
	.section-container.home{ padding:5em 0; }
	.section-container.ahome{ padding:3em 0; }
	
}

@media only screen and (min-width:1024px) and (max-width:1161px) {

	
	/*menu 0308*/
	.menu-container-navig{width:45%;}
	.menu-circle{left:32%;  width:150vh; height:150vh; border-radius:150vw;  }
	/*menu 0308*/
	.section-container.home{ padding:5em 0; }
	.section-container.ahome{ padding:3em 0; }

}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	/*menu 0308*/
	.menu-container-navig{width:36%;}
	.menu-circle{left:40%;  width:170vh; height:170vh; border-radius:170vw;  }
	/*menu 0308*/
	
	
	
}

@media (max-width:767px) and (min-aspect-ratio:3/4){
	.gallery-block{ width:50%; }
	.gallery-block:nth-child(2){  }
	.gallery-block:nth-child(3){ display:none; }
	.gallery-block:nth-child(4){ }

	.gallery-block:nth-child(6){ display:none }
	.gallery-block:nth-child(7){   }
	.gallery-block:nth-child(8){ display:none }

	.gallery-block:nth-child(9){ }
	.gallery-block:nth-child(10){ } 
	.gallery-block:nth-child(11){display:none}
	.gallery-block:nth-child(12){ }
}

@media  (max-width:767px) and (max-aspect-ratio:3/4){
	.gallery-block{ width:50%; height:25%!important; } 
	
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){ display:none}
	.gallery-block:nth-child(4){ display:none;}

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){ display:none }
	.gallery-block:nth-child(8){ }

	.gallery-block:nth-child(9){ }
	.gallery-container.active .gallery-block:nth-child(9) .gallery-block-color{  animation-name:ani-gallery-block-b;}
	
	.gallery-block:nth-child(10){ }
	.gallery-block:nth-child(11){ display:none }
	.gallery-block:nth-child(12){  display:none  }
	
}



@media (min-width:768px)  and (max-width:1023px) and (min-aspect-ratio:3/4){
	.gallery-block{ width:33.3%; }
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){ }
	.gallery-block:nth-child(4){ display:none; }

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){  }
	.gallery-block:nth-child(8){ display:none; }

	.gallery-block:nth-child(9){   }
	.gallery-block:nth-child(10){ }
	.gallery-block:nth-child(11){ }
	.gallery-block:nth-child(12){ display:none; }
	 
}

@media (min-width:768px)  and (max-width:1023px) and (max-aspect-ratio:3/4){
	.gallery-block{ width:50%;  }
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){  display:none;}
	.gallery-block:nth-child(4){ display:none; }

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){  }
	.gallery-block:nth-child(8){ display:none; }

	.gallery-block:nth-child(9){ display:none; }
	.gallery-block:nth-child(10){ display:none;}
	.gallery-block:nth-child(11){ display:none;}
	.gallery-block:nth-child(12){ display:none; }
}

@media (min-width:1024px) and (max-width:1599px) and (min-aspect-ratio:2/1){
	.gallery-block{ width:33.33%; height:50%!important; }
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){ }
	.gallery-block:nth-child(4){ display:none; }

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){  }
	.gallery-block:nth-child(8){ display:none; }

	.gallery-block:nth-child(9){ display:none; }
	.gallery-block:nth-child(10){ display:none;}
	.gallery-block:nth-child(11){ display:none;}
	.gallery-block:nth-child(12){ display:none; }
	
}
@media (min-width:1024px)  and (max-width:1599px) and (max-aspect-ratio:3/3){
	.gallery-block{ width:33.3%; }
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){ }
	.gallery-block:nth-child(4){ display:none; }

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){  }
	.gallery-block:nth-child(8){ display:none; }

	.gallery-block:nth-child(9){   }
	.gallery-block:nth-child(10){ }
	.gallery-block:nth-child(11){ }
	.gallery-block:nth-child(12){ display:none; }
}

@media (min-width:1600px) and (min-aspect-ratio:2/1){
	.gallery-block{ width:25%; height:50%!important; }
	.gallery-block:nth-child(2){ }
	.gallery-block:nth-child(3){ }
	.gallery-block:nth-child(4){  }

	.gallery-block:nth-child(6){ }
	.gallery-block:nth-child(7){  }
	.gallery-block:nth-child(8){   }

	.gallery-block:nth-child(9){ display:none; }
	.gallery-block:nth-child(10){ display:none;}
	.gallery-block:nth-child(11){ display:none;}
	.gallery-block:nth-child(12){ display:none; }
}

@media (min-width:1024px) and (max-height:1600px){
	.gallery-block{ width:25%!important; height:33.3%!important; display:block!important;}
	.gallery-block:nth-child(n+9){ height:calc(33.4% + 2px)!important; transform:translateY(-1px)!important;} 
}

.fadeinele{ opacity:0; transform:translateY(2em); transition:opacity 400ms linear, transform 500ms ease-out!important }
.fadeinele.offsethalf{ transform:translateY(1em);  }
.fadeinele.scrolled{ opacity:1; transform:translateY(0em); }



.fadeinele.delayA.active{ transition-delay:100ms; }
.fadeinele.delayB.active{ transition-delay:200ms; }
.fadeinele.delayC.active{ transition-delay:200ms; }


/* keat 0315 */ 
@media (orientation: landscape) {
	.menu-circle{ border-radius:100vw; min-width:60vw; width:60vw; min-height:60vw; height:60vw;  }
}

@media (orientation: portrait) {
	.menu-circle{ border-radius:100vh; min-width:100vh; width:100vh; min-height:100vh; height:100vh;  }
	
	.menu-container{  transition:top 0ms 500ms linear}
	.menu-container .menu-circle{ transition:transform 400ms 0ms cubic-bezier(0,.25,.32,.99), border-radius 400ms 0ms cubic-bezier(0,.25,.32,.99);  } 
	.menu-container.active .menu-circle{ transform:translate(0,0); transition:transform 500ms 0ms cubic-bezier(0,.25,.32,.99), border-radius 500ms 0ms cubic-bezier(0,.25,.32,.99); }
}



.menu-container-inner{ position:absolute; display:block; width:100%; height:100%; }

.menu-circle{ top:50%; border-top-right-radius:0; border-bottom-right-radius:0;  transform:translate(50%, -100%);  }


.menu-container .menu-circle{  transform:translate(100%,-100%); }
.menu-container.active .menu-circle{ top:50%;  transform:translate(0,-50%); }
.menu-container-inner .header-container-inner{ height:100%; display:flex; align-items:center; justify-content:flex-end;  }

.menu-container-navig{  overflow:auto;  height:auto; max-height:calc(100vh - 3em); padding:0.8em 0;    }
@media only screen and (min-width:1023px) and (max-width:1280px){
	.menu-container-navig{   padding:1.1em 0;    }
}

@media only screen and (min-width:0px) and (max-width:768px) {
	.menu-container-inner{   }
	.menu-container .menu-circle{   left:0;  transition:transform 400ms 0ms cubic-bezier(0,.25,.32,.99), border-radius 400ms 0ms cubic-bezier(0,.25,.32,.99);  }
	.menu-container.active .menu-circle{ border-radius:0; left:0; transition:transform 500ms 0ms cubic-bezier(0,.25,.32,.99), border-radius 500ms 0ms cubic-bezier(0,.25,.32,.99);  }
	.menu-container-inner .header-container-inner{  justify-content:flex-start; width:80%;}
	
	/* when menu close */
	.menu-container .menu-text{ transition:transform 20ms 0ms ease-in, opacity 20ms 0ms ease-in; }
	.menu-container .menu-circle{ transition:transform 400ms 50ms cubic-bezier(0,.25,.32,.99);  }
	.menu-container{ transition:top 0ms 300ms linear}
	/* when menu close */
	
	.menu-container-navig{  overflow:auto;   }
	
	.gallery-container.hide{ opacity:0; }
}
/* keat 0315 */ 
.news-media-body{ letter-spacing:0!important; line-height:1.6!important}
.news-media-body a{ text-decoration:underline; }
.news-media-body p{ margin-top:1.5em; }

.news-link-container{ width:calc(33.3% - 1.33em); float:left; margin-left:2em; margin-bottom:5em;  }
.news-link-container.inactive{ display:none}
.news-link-container:nth-child(3n+1){ clear:both; margin-left:0; }

.news-link-container.hover .news-link-image{ transform:scale(1.2); }

.news-link-container-ele{ width:100%;  position:relative; }
.news-link-img{  width:100%; padding-bottom:100%; position:relative; overflow:hidden}
.news-link-image{  width:100%; height:100%; background-size:cover ; background-repeat:no-repeat; background-position:center;  position:absolute ;top:0; left:0; transition:transform 400ms}
.news-link-title{ margin-top:1em}


@media only screen and (min-width:0px) and (max-width:768px) {
	.news-link-container{ width:calc(50% - 0.75em); float:left; margin-left:1.5em;  }
	.news-link-container:nth-child(3n+1){ clear:none; margin-left:0.75em; }
	.news-link-container:nth-child(2n+1){clear:both; margin-left:0; }
}