/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, ul,
dd, dt, li, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0; box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
html {-webkit-text-size-adjust: none; height:100%;}
img, fieldset { border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
div,section,nav,header,footer,ul,li,ol { box-sizing: border-box; }
/*************************************************************************************/
::selection {
  background: #999999; /* WebKit/Blink Browsers */
  color: white;
}
::-moz-selection {
  background: #999999; /* Gecko Browsers */
  color: white;
}
option::selection {
	background: #2a7b8c;
}
/*************************************************************************************/
:root {
	--primary-color: #C1AD56;
	--primary-dark-color: #665D39;
	--secondary-color: #1ACFC6;
	--secondary-dark-color: #08535C;
	--hyperlink-color: #eb4e97;
	--hyperlink-dark-color: #b6125e;
}
/*************************************************************************************/
div,a,li,ol,ul { box-sizing: border-box; }

a { color: var(--hyperlink-color); text-decoration: none; transition: color 0.3s ease; }
a:link { text-decoration: none; }
a:hover { text-decoration: underline; color: #293c69; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }

p { margin: 1.5em 0; }

h1, h2, h3, h4, h5, h6, h7, button { letter-spacing: 0.07em; line-height: 1.3em; font-family: 'MiSans','Roboto', 'Noto Sans TC', sans-serif; font-weight: 600; }

* { font-family: 'MiSans','Roboto', 'Noto Sans TC', sans-serif; }

.eng { font-family: 'MiSans','Roboto', sans-serif;  }

.serif { font-family: 'Noto Serif TC', serif; letter-spacing: 0.2em; }

body {
	height: 100%;
    width: 100%;
	margin:0;
	padding:0;
	letter-spacing: 0.05em;
	line-height: 2em;
	font-size: 1.05em;
	color: #394655;
	background-color: #f1f1f1;
}

header { background-color: white; }
footer {
	padding: 1em;
	text-align: center;
/*	background: url('../images/bg_footer.png') bottom center repeat-x; */
	background-size: auto 100%;
}
#home-sect-logo {
	position: relative; z-index: 0;
	background: url('../images/header_bg.jpg?2024') center center;
	background-size: cover;
	/* require to show correct dropdown-menu */
}
.cover-box {
	position: relative;
	padding: 2.5em 2.5em 4em 2.5em;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
@media only screen and (max-width: 767px) {
	#home-sect-logo { 
		background-image: url('../images/header_bg_m.jpg');
	}
}
.project-logo {
	position: relative;
	z-index: 10;
	margin: 0 auto;
	/* transform: translateY(.75em); */
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	/*
	max-width: 950px;
	min-width: 600px;*/
}
.project-logo a {
	display: block;
	width: 45%
}
#composite-logo { 
	top: 0;
	left: 20px;
	position: absolute;
	z-index: 30;
	max-width: 220px;
	width: 15%;
}
#two-games {
	position: absolute;
    left: 7%;
    top: calc(50% - 25px);
    max-width: 350px;
	padding: 1.5em 0;
	width: 20%;
}
@media only screen and (max-width: 992px) {
	#two-games {
		position: relative; left: initial; bottom: initial; margin: 0 auto; width: 300px;
	}
}
/* COUNTDOWN ---------------------------------------------------------- */
#op-counter {
	z-index: 10;
	position: absolute;
	top: calc(50% - 75px);
	right: 4%;
	width: 220px;
	height: 150px;
	border: solid 1px transparent;
}
.counter-box {
	position: relative;
	width: 100%;
	padding: 8px;
	text-align: center;
	margin: 0 auto;
	max-width: 400px;
	color: #606060;
	background-color: #f9f9f9;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: auto;
	border-radius: 15px 15px;
	box-shadow: 2px 2px 12px rgba(0,0,0,0.15);
}
.c-countGrp {
	flex-wrap:nowrap;
	transform: translateX(10px);
}
.c-tagline {
	position: absolute;
	margin-top: -90px;
}
.c-label {
	position: relative;
	letter-spacing: .15em;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #606060;
	width: 95%;
	white-space: nowrap;
	padding: 0px 15px;
	margin-top: 5px;
}
.c-label:before {
	content: '';
	width: 6px;
	height: 1.4em;
	border-radius: 5px;
	background: linear-gradient(to bottom, #f9a460 0%, #ff74d6 50%, #ff5c19 100%);
	position: absolute;
	left: 0;
	top: 0px;
}
.c-label:after {
	content: '';
	width: 6px;
	height: 1.4em;
	border-radius: 5px;
	background: linear-gradient(to bottom, #f9a460 0%, #ff74d6 50%, #ff5c19 100%);
	position: absolute;
	right: 0;
	top: 0px;
}
.c-day {
	display: inline-block;
	color: #3824a0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 56px;
	font-weight: 500;
	letter-spacing: 0em;
	text-align: center;
	width: 110px;
	border-radius: 5px;
	height: 70px;
	line-height: 70px;
	background: url('../images/bg_counter2.png') center center repeat-y;
	background-size:  cover;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	margin: 15px 10px;
}
.c-date {
	display: inline-block;
	font-size: 20px;
	font-weight: 400;
	line-height: 70px;
	height: 70px;
	margin: 10px 0px 10px 0px;
	color: #394655;
	vertical-align: bottom;
}
.c-period {
	text-align: center;
	font-weight: 600;
	font-size: 18px;
	color: #C1AD56;
	letter-spacing: 0.1em;
	margin-top: 5px;
}

@media only screen and (min-width: 993px) {
	#op-counter { transform: scale(1); }
}
@media only screen and (max-width: 992px) {
	#op-counter { position: relative; right: initial; margin: 0 auto; }
	/* .counter-box { flex-direction: row; flex-wrap: nowrap; margin: 1em auto;  border-radius: 15px; }
	.c-label { margin: 10px; }
	*/
}
/* COMMON ---------------------------------------------------------------- */
p + p { margin-top: 0; }

.remarks { font-size: .9em; }

.ellipsis {
	display:block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 auto;
}
.ellipsis-multi {
	position: relative;
}
.ellipsis-multi > div {
	overflow: hidden;
	height: inherit;
	line-height: 30px;
}	
.ellipsis-multi:after {
	content: "...";  
	box-sizing: content-box;
	float: right;
	position: absolute;
	bottom: 0;
	padding-left: 1.2em;
	right: 0;
	text-align: right;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 100%) 50%);
	line-height: 1.6em;
	letter-spacing: 1px;
}

/* SPACING STYLES */
.nopadding {
	padding-left:0px;
	padding-right:0px;
}
.nounderline a { text-decoration: none; }

/* SIZING STYLE */

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

/* CUSTOM TEXT STYLE */

.text-warning { color: #cc4e4e; }
.text-primary { color: #C1AD56 !important; }
.text-secondary { color: #d62e4c; }
.text-orange-dark { color: #993300; } 
.text-light { color: #FFFFFF; }
.text-dark { color: #173e77 !important; }
.text-dark2 { color: #003954; }
.text-purple { color: #381d9e; }

.bg-light { background-color: #fff !important; }
.bg-transparent { background-color: transparent; }

/* CUSTOM FORM STYLE -------------------------------------------------------------- */
.clean-style-select select {
	/* A reset of styles including removing the default dropdown arrow */
	appearance: none;
	border: solid 1px #e9e9e9;
	padding: .35em 1em;
	padding-right: 50px;
	margin: 0;
	cursor: inherit;
	letter-spacing: .1em;
	border-radius: 5px;
	background: white url('../images/bg_select_arrow.png') no-repeat right center;
	background-size: auto 100%;
}

.img-responsive {
	width: 100%;
	height: auto;
	display: block;
}

/* CUSTOM LAYOUT STYLES ------------------------------------------------------ */
.sect-title { /* padding-left: 3%; */ z-index: 1; }
.sect-title h2 { font-size: clamp(1.8em, 2.2vw, 4em); font-weight: 700; letter-spacing: .1em; line-height: 1.6em; }
.sect-title-shadow { position: absolute; z-index: 0; left: 0; top: -.5vw; font-weight: 200; font-size: 7vw; line-height: 7.5vw; color: white; opacity: 0.25; }
.sect-title-shadow.txt-dark { color: #06205b; opacity: .15; }
.sect-title-shadow.txt-purple { color: #8988a5 !important; opacity: .2; }

.sect-desc-small { font-size: .9em; line-height: 1.8em; font-weight: 300; }
	
@media only screen and (max-width: 992px) {
	.sect-title br { display: none; }
}
@media only screen and (max-width: 767px) {
	.sect-head { align-items: center; }
	.sect-title-shadow br { display: none; }
	.sect-title-shadow { font-size: 12vw; line-height: 14vw; width: 100%; }
}
.section-box {
	position: relative;
	padding: 5% 5vw;
	scroll-margin-top: 60px;
}
.sect-subhead, .sect-subhead-wide { margin: 1em; }

.overlay-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;	
}
.light-shadow { box-shadow: 8px 8px 6px rgba(160,160,160,0.3); }
.dark-shadow { box-shadow: 0px 5px 10px rgb(0 0 0 / 5%), 0px 10px 20px rgb(0 0 0 / 5%); }

/* For show/hide more div content */
.overlay-div {
	position: relative;
	bottom:0;
	text-align: center;
	padding-top: 8em;
	padding-bottom: 2em;
	margin-top: calc(-56px - 9em);
	background: linear-gradient(360deg, rgba(247, 247, 247, 1) 50%, rgba(247, 247, 247, 0) 100%);
}

/* Article -------------------------------------------------------------------------------------------- */
.subpage-head {
	background: #15B5AE url('../images/bg_subpage_header.jpg') center center;
	background-size: cover;
	padding: 4em 5% 2em 5%;
}
.subpage-head2 {
	background: #15B5AE url('../images/bg_related_header.jpg') bottom center;
	background-size: cover;
	padding: 6em 5%0 5%;
}
@media only screen and (max-width: 767px) {
	.subpage-head {
		padding: 2em 5% 2em 5%;
	}
	.subpage-head2 {
		background-size: 1300px auto;
		padding: 3em 5% 0 5%;
	}
}
.cate-btn-list {
	margin: 2em 0;
}
.cate-btn {
	display: inline-block;
	border: solid 1px #381d9e;
	color: #381d9e;
	font-size: 1.1em;
	font-weight: 500;
	margin: 6px 5px 6px 0;
	padding: 7px 17px;
	line-height: 1.6em;
	border-radius: 99px;
}
.cate-btn:hover {
	background-color: #381d9e;
	color: white;
	text-decoration: none;
}
.cate-btn.selected {
	background-color: #381d9e;
	color: white;
	pointer-events: none;
}
.content-head {
	background: #15B5AE url('../images/bg_subpage_header.jpg') center center;
	background-size: cover;
}
.content-body { 
	margin-top: 2em;
	padding: 0 50px;
}
.story-cover {
	max-width: 950px;
	margin: 0 auto;
}
.story-text {
	max-width: 800px;
	margin: 2em auto;
	font-size: clamp(16px, 1.8vw, 19px);
}
.story-text .img-responsive {
	border-radius: 8px;
}
.story-text h2,
.story-text h3,
.story-text h4,
.story-text h5 { color: #173e77; scroll-margin-top: 60px; }
.common-text h3 { color: #173e77; }
.story-text a {
	color: #e84690;
	text-decoration: none;
}
.story-text a:hover {
	text-decoration: underline;
}
.story-text .summary {
	position: relative;
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1.8em;
	/* color: #515151; */
	background-color: white;
	border-radius: 20px;
	padding: 1.5em 2em;
	margin-left: -3%;
	margin-right: -3%;
	margin-bottom: 2.8em;
	/* box-shadow: 0 8px 16px rgba(0,0,0,0.02); */
}
.story-text .summary:before {
	content: '';
	background: url('../images/summary_quote.png') no-repeat;
	background-size: cover;
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 2;
	top: -10px;
	left: -20px;
}
.story-text .player {
	margin-left: -5%;
	margin-right: -5%;
}
@media only screen and (max-width: 992px) {
	.story-text .summary {
		font-size: 1em;
	}
}
.story-cover .player {
	margin: 2em 0;
}
.story-cover .thumbnail, 
.gallery .thumbnail {
	margin: .5em 0;
}
.story-cover .thumbnail a:hover img {
	transform: scale(1.02);
}
.gallery .thumbnail a:hover img {
	transform: scale(1.04);
}
.thumbnail a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 2px 2px 15px rgba(0,0,0,0.1);
}
.thumbnail a img {
	transition: all .2s ease;
}
.toc {
	margin-left: 2em;
	font-weight: 500;
}
.toc li {
	font-size: 1.1em;
	padding-left: 7px;
}
.story-cover .caption {
	padding: .7em 0;
	color: #868686;
	font-size: .9em;
	line-height: 1.5em;
}
.story-header {
	position: relative;
	padding: 5em 0 6em 0;
	min-height: 6em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
	/* transform: translateX(15%); */
}
.story-header .sect-title {
	position: absolute;
	left: -30%;
	top: calc(50% - 1em);
	color: rgba(255,255,255,0.5);
	letter-spacing: .2em;
	font-size: 2em;
	font-weight: 900;
	text-align: center;
	line-height: 2em;
	width: 30%;
	display: none;
}
.story-item-list {
	margin: 0 auto;
	/* max-width: 1200px; */
}
.more-content .story-item-list {
	/* max-width: 1200px; */
	margin: 0 auto;
}
.story-item {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0);
	transition: all .2s ease;
}
.story-item:hover {
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
.story-item.large {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0);
	transition: all .2s ease;
}
@media only screen and (min-width: 992px) {
	.story-item.large .story-title {
		font-size: 1.3rem;
		font-weight: 500;
	}
}
.story-item a { display: block; text-decoration: none; }
.story-item-pic {
	position: relative;
	overflow: hidden;
}
.story-item-pic img {
	background-size: cover;
	transition: all .2s ease;
	transform: scale(1.02);
}
.story-item-pic:hover img {
	transform: scale(1.05);
}
.story-item-pic:before {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 50%;
	background:
  linear-gradient(
    to top,
    hsla(0, 0%, 15%, 0.55) 0%,
    hsla(0, 0%, 15%, 0.543) 8.1%,
    hsla(0, 0%, 15%, 0.523) 15.5%,
    hsla(0, 0%, 15%, 0.493) 22.5%,
    hsla(0, 0%, 15%, 0.454) 29%,
    hsla(0, 0%, 15%, 0.407) 35.3%,
    hsla(0, 0%, 15%, 0.356) 41.2%,
    hsla(0, 0%, 15%, 0.302) 47.1%,
    hsla(0, 0%, 15%, 0.248) 52.9%,
    hsla(0, 0%, 15%, 0.194) 58.8%,
    hsla(0, 0%, 15%, 0.143) 64.7%,
    hsla(0, 0%, 15%, 0.096) 71%,
    hsla(0, 0%, 15%, 0.057) 77.5%,
    hsla(0, 0%, 15%, 0.027) 84.5%,
    hsla(0, 0%, 15%, 0.007) 91.9%,
    hsla(0, 0%, 15%, 0) 100%
  );
}
.story-item-info {
	background-color: white;
	padding: 1.2em max(18px, 4%);
}
.large .story-item-info {
	padding: 1.2em max(18px, 3%);
}
.more-content .story-item-info,
.more-content .video-item-info {
	padding-top: 6px;
	padding-bottom: 6px;
}
.story-cate {
	position: relative;
	z-index: 2;
	font-size: 1.2em;
	font-weight: 600;
	color: var(----hyperlink-color);
	letter-spacing: 1px;
	line-height: 1.4em;
	margin-bottom: .5em;
}
.story-cate {
	font-size: 1em;
}
.story-timestamp {
	color: rgb(0,0,0,0.4);
	font-size: .9em;
	font-weight: 600;
	z-index: 2;
	position: relative;
	line-height: 1.6em;
	margin-bottom: 5px;
	margin-top: 5px;
	display: none;
}
.story-header .story-timestamp {
	color: rgb(255,255,255,0.6);
}
.story-header .story-cate {
	color: #f2b5a5;
	font-size: 1.2em;
	letter-spacing: .15em;
}
.story-title {
	font-weight: 600;
	letter-spacing: .15em;
	line-height: 1.4em;
	color: white;
	z-index: 2;
}
.story-item-info .story-title {
	color: #535353;
	/* font-size: 16px; */
	font-weight: 400;
	letter-spacing: .05em;
	height: 2.8em;
	overflow: hidden;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.story-overlay-info {
	position: absolute;
	bottom: 5%;
	width: 97%;
	padding-left: 20px;
	z-index: 3;
	pointer-events: none;
}
.story-overlay-info .story-cate {
	position: relative;
	z-index: 2;
	font-size: 1.2em;
	font-weight: 600;
	color: #f1e9c7;
	letter-spacing: 3px;
}
.story-item-list .story-cate {
	/* font-size: .9em; */
}
.story-overlay-info .story-timestamp {
	color: rgb(255,255,255,0.6);
	font-size: 1.1em;
	font-weight: 600;
	z-index: 2;
	position: relative;
	line-height: 1.6em;
	margin-bottom: .3em;
}
.story-item-list .story-timestamp {
	font-size: .9em;
	font-weight: 400;
}
.story-overlay-info .story-title {
	font-size: 2em;
	font-weight: 600;
	line-height: 1.4em;
	color: white;
	z-index: 2;
	letter-spacing: .15em;
}
.story-video-icon {
	position: absolute;
	left: max(8px, 3%);
	bottom: max(8px, 3%);
	width: max(40px, 15%);
	height: max(40px, 15%);
	z-index: 4;
	background: url('../images/icon_play_btn.svg') no-repeat;
	background-size: contain;
}
.more-content {
	margin-top: 5em;
	padding-left: 8%;
}
.more-content.sticky {
	position: sticky;
    top: 4em;
}
.more-content .sect-subtitle * {
	color: #17B7B0;
	display: inline-block;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(to right, #4f2fc4 0%, #f15494 100%);
	background-clip: text;
    -webkit-text-fill-color: transparent;
	border-left: solid 1px #d9d9d9;
	border-right: solid 1px #d9d9d9;
	padding: 0 1em;
}
.more-content .sect-subtitle {
	position: relative;
	padding-top: 2em;
	margin-bottom: 2em;
}
@media only screen and (max-width: 1400px) {
	.more-content {
		margin-top: 0;
		padding-left: 0;
	}
}
@media only screen and (max-width: 1200px) {
	.more-content {
		margin: 0 !important;
		position: relative;
		border-top: solid 1px #ddd;
		padding: 5%;
	}
	.more-content .sect-subtitle * {
		font-size: 26px;
	}
	.more-content.sticky {
		top: 0;
	}
}
@media only screen and (max-width: 767px) {
	.more-content {
		padding: 0;
	}
}
.story-item-type2-list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin-bottom: 1em;
}
.story-item-type2 {
	position: relative;
	display: block;
	transition: all .2s ease;
	cursor: pointer;
	margin-bottom: .5em;
}
.story-item-type2 a:after {
	content:'';
	opacity: 0;
	display: block;
	width: calc(100% + 10px);
	height: calc(100% + 20px);
	border-radius: 15px;
	z-index: -1;
	left: -10px;
	top: -10px;
	position: absolute;
	background-color: white;
	box-shadow: 0 4px 12px rgba(0,0,0,0.07);
	transition: all .1s ease;
}
.story-item-type2 a:hover:after {
	opacity: 1;
}
.story-item-type2 a:hover .story-item-pic img {
	transform: scale(1.07);
}
.story-item-type2 a {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	align-items: center;
	text-decoration: none;
}
.story-item-type2 .story-item-pic {
    width: 40%;
	border-radius: 6px;
	overflow: hidden;
}
.story-item-type2 .story-item-info {
    width: 60%;
}
.story-item-type2 .story-item-pic {
	position: relative;
	background-size: cover;
	transition: all .2s ease;
	width: 40%;
	border-radius: 6px;
	overflow: hidden;
}
.story-item-type2 .story-item-pic:after {
	height: 70%;
	opacity: .3;
}
/*
.story-item-type2 .story-item-pic:before {
	content: '';
	display: block;
	position: absolute;
	left: 4%;
	bottom: 4%;
	width: 40px;
	height: 40px;
	z-index: 99;
	background: url('../images/icon_play_btn.svg') no-repeat;
}
*/
.story-item-type2 .story-item-pic .video-duration {
	position: absolute;
	top: 3%;
	right: 3%;
	background-color: rgba(0,0,0,0.8);
	padding: 6px;
	line-height: .8em;
	color: #a2a2a2;
	font-size: .8em;
}
.story-item-type2 .story-item-pic:after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 50%;
	background:
  linear-gradient(
    to top,
    hsla(0, 0%, 15%, 0.55) 0%,
    hsla(0, 0%, 15%, 0.543) 8.1%,
    hsla(0, 0%, 15%, 0.523) 15.5%,
    hsla(0, 0%, 15%, 0.493) 22.5%,
    hsla(0, 0%, 15%, 0.454) 29%,
    hsla(0, 0%, 15%, 0.407) 35.3%,
    hsla(0, 0%, 15%, 0.356) 41.2%,
    hsla(0, 0%, 15%, 0.302) 47.1%,
    hsla(0, 0%, 15%, 0.248) 52.9%,
    hsla(0, 0%, 15%, 0.194) 58.8%,
    hsla(0, 0%, 15%, 0.143) 64.7%,
    hsla(0, 0%, 15%, 0.096) 71%,
    hsla(0, 0%, 15%, 0.057) 77.5%,
    hsla(0, 0%, 15%, 0.027) 84.5%,
    hsla(0, 0%, 15%, 0.007) 91.9%,
    hsla(0, 0%, 15%, 0) 100%
  );
}
.story-item-type2 .story-item-pic img {
	width: 100%;
	height: auto;
}
.story-item-type2 .story-item-info {
	width: 60%;
	text-align: left;
	font-weight: 300;
	line-height: 1.5em;
	text-decoration: none;
	background: transparent;
	padding-right: 15px;
}
.story-item-type2 .story-item-info .story-cate {
	font-weight: 500;
	color: #eb4e97;
	/* letter-spacing: .1em; */
}
.story-item-type2 .story-item-info .story-title {
	color: #535353;
	font-weight: 500;
	/* font-size: .9em; */
	max-height: 5em;
	overflow: hidden;
}
.story-item-type2 .story-item-info .story-timestamp {
	display: none;
}
/*
@media only screen and (max-width: 1400px) {
	.story-item-type2 { width: 50%; }
}
@media only screen and (max-width: 992px) {
	.story-item-type2 { width: 100%; }
}
*/
/* CHANNEL LIST ----------------------------------------------------- */
.prev-next-btns {
	padding-top: 1em;
	margin-top: 2em;
	margin-bottom: 2em;
	border-top: solid 1px #ddd;
}
.prev-next-btns a:hover {
	text-decoration: none;
}
.prev-next-btns .btn-label {
	color: #394655;
	font-size: .85em;
	line-height: 1.6em;
}
.btn-article-title {
	color: #eb4e97;
	font-size: .95em;
	font-weight: 500;
	line-height: 1.6em;
}
.pageBtn {
	border-radius: 10px;
	background: white;
	display: block;
	padding: 15px 18px;
	transition: all .2s ease;
	height: 100%;
	position:relative;
}
.pageBtn:hover {
	box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}
.pageBtn:hover.btn-prev:before {
	left: 15px;
}
.pageBtn:hover.btn-next:before {
	right: 15px;
}
.btn-prev {
	text-align: left;
	padding-left: 45px;
}
.btn-prev:before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 20px;
	top: calc(50% - 5px);
	border: solid #173e77;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 5px;
	transform: rotate(135deg);
	transition: all .2s ease;
}
.btn-next {
	text-align: right;
	padding-right: 45px;
}
.btn-next:before {
	content: '';
	position: absolute;
	z-index: 1;
	right: 20px;
	top: calc(50% - 5px);
	border: solid #173e77;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 5px;
	transform: rotate(-45deg);
	transition: all .2s ease;
}
/* ARTICLE COMMON TEXT --------------------------------------------------------- */
.common-text {
	padding: .5em 0;
	margin: 2em 0;
	border-top: solid 1px #ddd;
}
.channel-list {
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 1em;
	margin-bottom: 1em;
}
a.channel-item {
	display: block;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	transition: all .1s ease;
	transform: translate(0,0);
	height: 100%;
	margin: 5px 0;
}
a.channel-item:hover {
	transform: translate(0px, -5px);
	text-decoration: none;
}
a.channel-item:hover  .channel-label {
	display: block;
	box-shadow: 2px 2px 8px rgb(0 0 0 / 15%);
}
.channel-item img {
	margin: 0 auto;
	height: 45px;
	width: auto;
	margin-bottom: -1em;
	display: block;
}
.channel-label {
	text-align: center;
	background-color: white;
	border-radius: 8px;
	padding: 1.75em .75em .75em .75em;
	color: #666666;
	font-size: .8em;
	font-weight: 500;
	background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 40%);
	line-height: 1.4em;
	/* letter-spacing: .1em; */
}
.show-on-mobile { display: block; }
@media only screen and (max-width: 767px) {
	.channel-item img { height: 40px; }
}
@media only screen and (max-width: 767px) {
	/* .content-head { padding: 2em 0 4em; }*/
	.content-body { padding-left: 5%; padding-right: 5%; }
	/*
	.story-title {  font-size: 1.6em; letter-spacing: .1em; }
	.story-item-list { padding-left: 5%; padding-right: 5%; }
	*/ 
	.story-header .sect-title {
		position: relative;
		width: 100%;
		left: 0;
	}
	.story-cover { margin-left: -4%; margin-right: -4%; }
	.story-timestamp { font-size: 1em; }
	.story-header {
		transform: none;
		padding: 3em 0 4em 5%;
		margin-left: 0px;
		margin-bottom: 1.5em;
	}
	.story-header:before {
		display: none;
	}
	.sect-title { position: relative; /* padding-bottom: .5em; */}
	.sect-subtitle * {
		text-align: center;
	}
	.sect-subtitle.center-hr h3 {
		text-align: left;
	}
	.article-text-title {
		width: calc(100% - 100px);
	}
	.article-text-timestamp {
		font-size: .95em;
		width: 100px;
		line-height: 2.4em;
	}
	.latest-article-box {
		width: 100%;
	}
}
/* VIDEO DETAIL PAGE ------------------------------------------------------------------------------- */
.sect-player {
	background: linear-gradient(to right, #0f1e3d 0%, #005385 55%, #004169 100%);
	padding: 3em 5% 0 5%;
}
.video-box {
	margin: 0 auto;
	max-width: 1000px;
}
.video-box .player {
	transform: translateY(2em);
	margin: 2%;
}
.video-cover .caption {
	padding: .3em 0;
	color: #A5A5A5;
	font-size: .9em;
	line-height: 1.5em;
}
.video-header {
	position: relative;
	margin: 0 auto;
	margin-top: 3em;
	padding: 0 3%;
	/* transform: translateX(15%); */
}
.video-header .sect-title {
	position: absolute;
	left: -30%;
	top: calc(50% - 1em);
	color: rgba(255,255,255,0.5);
	letter-spacing: .2em;
	font-size: 2em;
	font-weight: 900;
	text-align: center;
	line-height: 2em;
	width: 30%;
	/* visibility: hidden; */
	display: none;
}
.video-header .video-cate {
	font-size: 1.05em;
	font-weight: 500;
	padding: 5px .5em;
	line-height: 1.4em;
	border-radius: 7px;
	display: inline-block;
	color: white;
	letter-spacing: 2px;
	background-color: #e84690;
	margin-bottom: .75em;
}
.video-header .video-timestamp {
	color: rgb(0,0,0,0.4);
	font-size: clamp(14px, 1.8vw, 1.1em);
	font-weight: 600;
	z-index: 2;
	position: relative;
	line-height: 1.6em;
	margin-bottom: 5px;
	margin-top: 5px;
}
.video-header .video-title {
	z-index: 2;
	letter-spacing: .15em;
}
.video-header .video-title * {
	color: #173e77;
	font-size: clamp(16px, 6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.4em;
}
.video-text {
	padding: 0 3%;
	margin-bottom: 1em;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.8em;
}
.side-column-label {
	letter-spacing: .1em;
	text-align: center;
	font-size: 1.2em;
	/* padding: .5em 0; */
	color: #275D82;
}
@media only screen and (max-width: 992px) {
	.sect-player {
		padding-top: 0;
	}
	.video-header .video-title { 
		font-size: 1.5em;
	}
	.video-header {
		margin-left: -3%;
		margin-right: -3%;
		margin-top: 2em;
	}
	.video-box {
		margin-left: -5%;
		margin-right: -5%;
	}
	.video-text {
		padding: 0;
	}
}
.video-item-type2-list {
	position: relative;
	margin-bottom: 1em;
}
.video-item-type2 {
	position: relative;
	display: block;
	margin-bottom: .5em;
	transition: all .2s ease;
	cursor: pointer;
}
.video-item-type2:hover {
	transform: scale(1.03);
}
.video-item-type2 a {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	align-items: center;
    justify-content: center;
}
.video-item-type2 .video-item-pic {
	position: relative;
	background-size: cover;
	transition: all .2s ease;
	width: 40%;
	border-radius: 10px;
	overflow: hidden;
}
/*
.video-item-type2 .video-item-pic:before {
	content: '';
	display: block;
	position: absolute;
	left: 4%;
	bottom: 4%;
	width: 40px;
	height: 40px;
	z-index: 99;
	background: url('../images/icon_play_btn.svg') no-repeat;
}*/
.video-item-type2 .video-item-pic .video-duration {
	position: absolute;
	top: 3%;
	right: 3%;
	background-color: rgba(0,0,0,0.8);
	padding: 6px;
	line-height: .8em;
	color: #a2a2a2;
	font-size: .8em;
}
.video-item-type2 .video-item-pic img {
	width: 100%;
	height: auto;
}
.video-item-type2 .video-item-info {
	width: 60%;
	text-align: left;
	font-size: 1.05em;
	font-weight: 300;
	line-height: 1.5em;
	text-decoration: none;
	background: none;
	padding: 6px 18px;
    min-height: initial;
}
/*
.video-item-type2 .video-item-info .video-cate {
	font-size: .8em;
	font-weight: 500;
	color: var(--hyperlink-color);
	letter-spacing: .1em;
}
.video-item-type2 .video-item-info .video-title {
	color: #535353;
	font-weight: 500;
	font-size: .9em;
	max-height: 4em;
	overflow: hidden;
	letter-spacing: .05em;
}
*/
.video-item .video-item-info .video-timestamp,
.video-item-type2 .video-item-info .video-timestamp {
	display: none;
}
/* TAGS LIST ---------------------------------------------------------------------------------------- */
.tags-item-list {
	text-align: left;
}
a.tag-item {
	padding: .35em 0.75em;
	background-color: white;
	border-radius: 8px;
	margin: 0 2px;
	margin-bottom: .7em;
	display: inline-block;
	font-size: .95em;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 1px 1px 4px rgba(0,0,0,0);
	transition: all .2s ease;
}
a.tag-item:hover {
	text-decoration: none;
	color: var(--hyperlink-color);
	box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
.tags-result-msg { display: inline-block; color: white; line-height: 2em; vertical-align: text-bottom; padding-left: .5em; }

/* PROMO ------------------------------------------------------------------------------------- */
#video-container {
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}
#video-container-caption {
	font-size: 1.1em;
}
/*
.sideBtn {
	position: absolute;
	top: -2em;
	right: 15px;
}
*/
/* Section Main ----------------------------------------------------------------  
.main {
	position: relative;
	padding-top: 10em;
	padding-bottom: 2em;
}
.main .container { position: relative; }
*/
.container.no-padding { padding: 0; }

/* Customized Style ---------------------------------------------------------------- 
@media only screen and (min-width: 768px) {
	.sect-subhead {
		height: auto;
		width: 52px;
	}
	.sect-subhead-wide {
		height: auto;
		width: 52px;
	}
}
@media only screen and (max-width: 767px) {
	.sect-subhead {
		height: auto;
		width: 120px;
	}
	.sect-subhead-wide {
		height: auto;
		width: 220px;
	}
	.stroke-red-center:before {
		width: calc(100% - 150px);
	}
	.stroke-white-center:before {
		width: calc(100% - 150px);
	}
} */
.form-option-selection {
	position: relative;
	background-color: #fadcbb;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
	z-index: 10;
	max-width: 920px;
	width: 100%;
	margin: 0 auto;
	line-height: 1.6em;
}
.divider-stroke:after {
	content: '';
	display: block;
	background-color: white;
	opacity: .3;
	width: 1px;
	height: 30%;
	position: absolute;
	right: 5%;
	top: 20%;
}
.horizontial-stroke:after {
	content: '';
	display: block;
	background-color: white;
	opacity: .3;
	width: 1px;
	height: 60%;
	position: absolute;
	right: 5%;
	top: 20%;
}

.remarks { font-size: .9em; }
.copyright { padding: 1em; color: #808080; }

.valign-center {
	display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
}

.project-logo img {
	height: auto;
	width: 100%;
}

@media (max-width: 992px) {
	#rthklogo {
		width: 70px;
	}
}
/* Program List  ------------------------------------------------------------------ 
.prog-item-list {
	padding: 1em 0;
}
.prog-item {
	position: relative;
	margin-bottom: 1.5em;
}
.prog-item:not(:last-child) {
	margin-top: 2em;
	margin-bottom: 3em;
}
.prog-item-pic {
	position: absolute;
	top:0;
	left:0;
	width: 170px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.2); 
}
.prog-item-pic img {
	width: 100%;
	height: auto;
}
.prog-item-content {
	margin-left: 170px;
	width: calc(100% - 170px);
	border-radius: 0 5px 5px 5px;
	overflow: hidden;
}
.prog-item-title h3 {
	letter-spacing: 0.15em;
}
.prog-item-desc {
	margin-top: .5em;
	color: #666666;
	letter-spacing: 0.2em;
	line-height: 1.8em;
	max-height: 3.6em;
	overflow: hidden;
}
.prog-item-info {
	padding:0 2.25em 1.75em 2.25em;
	
}
.prog-item-link {
	padding-top: .5em;
}

.btn-link {
	background-color: #8855a0;
	display: inline-block;
	color: white;
	padding: .5em 1em;
	letter-spacing: 0.15em;
	transition: all .3s ease;
	font-size: 1.1em;
	margin-right: .5em;
	margin-top: .75em;
	border-radius: 3px;
}
.btn-link:hover {
	background-color: #9965b1;
	color: white;
	text-decoration: none;
}
.btn-link:last-child {
	margin-right: 0;
}

.prog-item-latest-epi {
	position: relative;
	padding: .5em 2.25em .5em 2em;
	background-color: #efebf2;
	letter-spacing: 0.2em;
	margin: 0 1.5em;
	border-radius: 6px;
}
.prog-item-latest-epi a.icon-arrow:after {
	position: absolute;
	right: 0px;
	top: 50%;
	padding: 10px;
	opacity: .6;
	margin-top: -26px;
}
*/
/* VIDEO PAGE --------------------------------------------------------- */
.overlay-dropdown {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 8px;
	border-radius: 15px;
	background-color: white;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
	margin-top: -3em;
}
.dropdown-btn {
	position: relative;
	display: inline-block;
	border: solid 2px transparent;
	color: #A8943E;
	text-align: center;
	padding: 2px;
	line-height: 1.6em;
	border-radius: 5px;
	width: 19%;
	background-color: rgba(255,255,255,0.5);
	border-right: solid 1px #ddd;
}
.dropdown-btn:last-child {
	border-right: none;
}
.dropdown-btn select:after {
	content: '';
	display: block;
	height: 100%;
	width: 1px;
	background-color: #ddd;
	position: absolute;
	top: 0;
	right: 0;
}
.dropdown-btn:hover,
.dropdown-btn:active {
	background-color: #FFF;
	text-decoration: none;
	border: solid 2px #eb4c99;
}
@media only screen and (max-width: 767px) {
	.dropdown-btn { width: calc(33% - 4px); }
	.dropdown-btn:nth-child(even) { border-right: none; }
}
@media only screen and (max-width: 640px) {
	.dropdown-btn { width: calc(50% - 4px); }
}
/* CUSTOM SELECT ----------------------------------------------------------------- */

.custom-select {
  /* min-width: 90px; */
  position: relative;
}

.custom-select select {
  appearance: none;
  /*  safari  */
  -webkit-appearance: none;
  /*  other styles for aesthetics */
   width: 100%;
  background-color: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  text-indent:10px;
  color: #381d9e;
  font-weight: 500;
  padding: 5px;
  padding-right: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.05em;
}
.custom-select option:first { 
  padding-right: 45px;
  color: grey;
}
.custom-select::before,
.custom-select::after {
  --size: 0.3rem;
  --color: #333;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
  color: var(--color);
}
/* CUSTOM ARROW */

.custom-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid var(--color);
  top: 40%;
}

.custom-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid var(--color);
  top: 55%;
}

/* VIDEO ITEM ----------------------------------------------------------------- */
.video-item-list {
	position: relative;
	margin-bottom: .5em;
	position: relative;
}
.video-item {
	position: relative;
	display: block;
	/* margin: 6px 10px; */
	transition: all .2s ease;
	cursor: pointer;
	overflow: hidden;
	border-radius: 10px;
}
.video-item:hover {
	transform: scale(1.03);
	box-shadow: 0 7px 15px rgba(0,0,0,0.1);
}
.theme-purple .video-item-info {
	background-color: #381d9e;
	color: white;
}
.theme-purple .video-item-info .video-cate { color: white; }
.theme-purple .video-item-info .video-title { color: white; opacity: .8; }
.video-item-pic {
	position: relative;
	background-size: cover;
	transition: all .2s ease;
	aspect-ratio: 16 / 9;
}
.video-item-pic .video-icon {
	content: '';
	display: block;
	position: absolute;
	left: 3%;
	bottom: 5%;
	width: max(40px, 2.5vw);
	height: max(40px, 2.5vw);
	z-index: 99;
	background: url('../images/icon_play_btn.svg') no-repeat;
}
.video-item-pic:after {
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 50%;
	background:
  linear-gradient(
    to top,
    hsla(0, 0%, 15%, 0.55) 0%,
    hsla(0, 0%, 15%, 0.543) 8.1%,
    hsla(0, 0%, 15%, 0.523) 15.5%,
    hsla(0, 0%, 15%, 0.493) 22.5%,
    hsla(0, 0%, 15%, 0.454) 29%,
    hsla(0, 0%, 15%, 0.407) 35.3%,
    hsla(0, 0%, 15%, 0.356) 41.2%,
    hsla(0, 0%, 15%, 0.302) 47.1%,
    hsla(0, 0%, 15%, 0.248) 52.9%,
    hsla(0, 0%, 15%, 0.194) 58.8%,
    hsla(0, 0%, 15%, 0.143) 64.7%,
    hsla(0, 0%, 15%, 0.096) 71%,
    hsla(0, 0%, 15%, 0.057) 77.5%,
    hsla(0, 0%, 15%, 0.027) 84.5%,
    hsla(0, 0%, 15%, 0.007) 91.9%,
    hsla(0, 0%, 15%, 0) 100%
  );
}
.video-duration {
	position: absolute;
	top: 6px;
	right: 6px;
	background-color: rgba(0,0,0,0.8);
	padding: 7px;
	border-radius: 7px;
	line-height: .8em;
	color: #cdcccc;
	font-size: .8em;
	letter-spacing: 1px;
}
.more-content .video-timestamp {
	display: none;
}
.video-item-pic a {
	display: block;
}
.video-item-pic img {
	width: 100%;
	height: auto;
	background-size: cover;
	transform: scale(1.02);
}
.video-item-info {
	text-align: left;
	font-size: 1em;
	line-height: 1.5em;
	text-decoration: none;
	background-color: white;
	padding: 5% 7%;
	min-height: 6em;
}
.video-item-info .video-cate {
	font-size: .9em;
    color: var(----hyperlink-color);
    font-weight: 600;
	margin-bottom: .25em;
}
.video-item-info .video-title {
	font-size: 16px;
	font-weight: 400;
	color: #535353;
	max-height: 3em;
    overflow: hidden;
	line-height: 1.4em;
	/*letter-spacing: 2px;*/
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
a:hover.video-item  {
	text-decoration: none;
}
.video-overlay-title {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	display: flex;
	background: linear-gradient(0deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0) 60%);
	color: white;
	padding: 2%;
	align-items: flex-end;
	justify-content: center;
	line-height: 1.5em;
	letter-spacing: .15em;
	overflow: hidden;
	border-radius: 5px;
	font-size: 1em;
	z-index: 12;
	padding-left: 70px;
}
@media only screen and (max-width: 992px) {
	.video-item-info .video-title { font-size: .9em; }
}
/* VERTICAL VIDEO LIST ----------------------------------------------------------------- */
#sect-video-home { background-color: #f7f7f7; overflow: hidden; }

.vertical-video-item-list {
	position: relative;
	margin-bottom: .5em;
	/* width: 90%; */
	position: relative;
}
.vertical-video-item {
	position: relative;
	display: block;
	cursor: pointer;
	border-radius: 15px;
	transition: all .2s ease;
	overflow: hidden;
}
.vertical-video-item-pic .video-icon {
	content: '';
	display: block;
	position: absolute;
	left: 6%;
	top: 4%;
	width: max(40px, 2.5vw);
	height: max(40px, 2.5vw);
	z-index: 99;
	background: url('../images/icon_play_btn.svg') no-repeat;
}
.vertical-video-item:hover {
	transform: scale(1.03);
	box-shadow: 0 7px 15px rgba(0,0,0,0.1);
}
.vertical-video-item-pic {
	position: relative;
	background-size: cover;
	background-color: #000;
}
.vertical-video-item-pic a {
	display: block;
	border-radius: 10px;
}
.vertical-video-item-pic img {
	width: 100%;
	height: auto;
}
.vertical-video-item-info {
	text-align: left;
	font-size: 1.05em;
	font-weight: 300;
	line-height: 1.6em;
	text-decoration: none;
	background-color: white;
	padding: 12px 18px;
}
.vertical-video-item .video-duration {
	display: none;
}
.vertical-video-overlay-info .vertical-video-cate {
	font-size: 1em;
	font-weight: 600;
	color: #f2b5a5;
	display: block;
	position: relative;
	margin-bottom: 5px;
}
.vertical-video-overlay-info .vertical-video-title {
	color: #FFF;
	display: block;
	line-height: 1.4em;
	max-height: 4em;
    overflow: hidden;
}
a:hover.vertical-video-item  {
	text-decoration: none;
}
.vertical-video-overlay-info {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0) 80%);
	display: flex;
	flex-direction: column;
	color: white;
	padding: 18px;
	align-items: flex-start;
	justify-content: flex-end;
	line-height: 1.5em;
	overflow: hidden;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 400;
	z-index: 12;
}
@media only screen and (max-width: 576px) {
	.vertical-video-overlay-info { padding: 15px; }
}
/* UTITLTY STYLES ----------------------------------------------------------------- */
.text-purple { color: #381d9e; }
.text-primary { color: var(--primary-color); }
.text-secondary {  color: var(--secondary-color); }
.text-gradient {
	display: inline-block;
	background: linear-gradient(to right, #4f2fc4 0%, #f15494 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.icon-arrow-l:before { content: "＜"; display: inline-block; transform: scale(0.7, 1); padding-right: .25em; margin-left: -.5em;  }
.icon-arrow-r:after { content: "＞"; display: inline-block; transform: scale(0.7, 1); padding-left: .25em; margin-right: -.5em; }

.max-w1000 { max-width: 1000px; }
.max-w1100 { max-width: 1100px; }
.max-w1200 { max-width: 1200px; }

.eng { letter-spacing: 0.05em; }

.btn {
	border: none;
	min-width: 200px;
	padding: .75em 1em;
	transition: all 0.2s ease;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.6em;
	vertical-align: middle;
	background-color: #381d9e;
	cursor: pointer;
	border-radius: 3px;
	color: white;
	/*background: url('../images/bg_btn_shadow.png') right center no-repeat;*/
	background-size: auto 120%;
	text-align: center;
}
.btn:hover {
	color: white;
	background-color: #2b1777;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
.btn.show-all-btn {
	display: inline-block;
	letter-spacing: 0.1em;
	font-size: 1.05em;
	text-decoration: none;
	background-color: transparent;
	color: #C1AD56;
	border: solid 1px #C1AD56;
}
.btn.show-all-btn:hover { 
	background-color: #C1AD56;
	color: white;
}
.btn-light {
	background-color: white;
	color: #333;
}
.btn-light:hover {
	background-color: #efefef;
	color: #333;
}
.no-min-width { min-width: initial; }
.outline {
	border: solid 1px white;
}
.btn-orange {
	background-color: #f7941d;
}
.btn-orange:hover {
	background-color: #de851a;
}
.btn-red {
	background-color: #b11e33;
}
.btn-red:hover {
	background-color: #8e1829;
}
.btn-blue {
	background-color: #186e93;
}
.btn-blue:hover {
	background-color: #293c69;
}
.btn-blue2 {
	background-color: #0054a6;
}
.btn-blue2:hover {
	background-color: #004385;
}
.btn-pink {
	background-color: #c60581;
}
.btn-pink:hover {
	background-color: #b51d71;
}
.btn-transparent {
	background-color: rgba(0,0,0,0);
}
.btn-transparent:hover {
	background-color: rgba(0,0,0,0.1);
}
.btn-news {
	background: linear-gradient(to right, #06205b 0, #0a529e 100%);
	width: 40%;
	text-align: left;
	position: relative;
}
.btn-news:hover {
	transform: scale(1.03);
}
.btn-news.icon-arrow-r:after {
	position:absolute;
	right: 20px;
}
.btn-secondary { color: #f2f2f2; background-color: #a0946a !important; border: none; }
.btn-secondary:hover { background-color: #70674a !important; }

.btn.keyBtn:hover {
	background-color: #2f974c;
}
.btn.bg-transparent {
	background-color: transparent;
	color:#8855a0;
	border: solid 1px #8855a0;
}

a.btn {
	text-decoration: none;
}

.btn.btn-golden {
	border-color: #70674a;
	color: #a0946a;
}

.btn.btn-more {
	display: inline-block;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	padding: .25em 1.5em;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	font-weight: normal;
	line-height: 1.7em;
	vertical-align: middle;
	border: solid 1px #FFF;
	width: auto;
	min-width: 80px;
}
.btn.btn-more:hover {
	background: rgba(0,0,0,0.3);
}
@media only screen and (max-width: 767px) {
	.btn { margin-top: 0; }
}
@media only screen and (min-width: 576px) {
	.btn+.btn { margin: 0;  margin-left: .5em; }
}
@media only screen and (max-width: 575px) {
	.btn+.btn { margin: 0; margin-top: .75em;  }
	.btn { width: 90%; }
}

.related-item {
	display: block;
	padding-top: 1px;
	padding-bottom: 6px;
	/* margin-left: -4px;
	width: calc(100% + 8px);*/
	border-radius: 15px;
	transition: all .2s ease;
}
.related-item:hover {
	transform: scale(1.03);
	background: linear-gradient(to bottom, rgba(224,54,148,0.5) 50%, rgba(224,54,148,0) 100%);
}
.no-hover .related-item:hover {
	background: none;
	
}
.no-hover .related-item:hover .related-info-box {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.related-item-pic {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	overflow: hidden;
	background-color: #000;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
	margin: 10%;
}
.related-item-pic:before {
	content: '';
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
	height: 100%;
	width: 100%;
	display: block;
	z-index: 10;
	position: absolute;
}
.related-item-pic img { 
	z-index: 0;
	width: 100%;
	height: auto;
	opacity: 1;
	transition: all .3s ease;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 2px;
}
.related-info-box {
	position: relative;
	text-align: center;
	padding: 10px;
	line-height: 1.6em;
	z-index: 11;
	border-radius: 8px;
}
.related-info-box.bg-light {
	background-color: white;
	/* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */
}
.related-item-ch {
	display: inline-block;
	padding: 0px 10px;
	font-size: .85em;
	font-weight: 300;
	line-height: 1.4em;
	text-align: center;
	border-radius: 99px;
	background-color: #c60581;
	color: white;
	margin: 0 auto;
	margin-top: 8px;
	letter-spacing: .1em;
}
.related-item a:hover {
	text-decoration: none;
}
.related-item-pic.video:before {
	display: block;
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: url('../images/icon_play.svg') center center no-repeat;
	background-size: 20% auto;
	z-index: 10;
	transition: all .3s ease;
}
.related-item-title {
	color: white;
	font-size: max(1em, 1vw);
	font-weight: 500;
}
.related-item-epi-date {
	color: #000;
	letter-spacing: .1em;
	font-size: max(.9em, .6vw);
	line-height: 1.4em;
	margin-top: .5em;
}
.related-item-list {
	padding-bottom: 2em;
	position: relative;
}
.related-item-box-bg {
	padding: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	/* Hide the 4th item on tablet mode only at homepage */
	.home .related-item:nth-child(3) { display: none; }
}
/* FANCYBOX ------------------------------------------------ */
.fancybox-slide--html.fancybox-slide {
	padding: max(10px, 3%);
}
.fancybox-slide--iframe .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
	margin: 0;
}
.fancybox-caption {
	font-size: 1.1em;
}
.medal-table {
	width: 100%;
	margin: 0 auto;
	background-color: white;
	padding: 1em 1em;
	border-radius: 15px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
	/* margin-top: -5vw; */
	overflow: hidden;
}
.medal-table  td.icon-medal { position: relative; padding-top: 10px; width: 15%; }
.medal-table .table .thead td { color: #999999; border-top: none; position: relative; }
.medal-table tr { border: 0; }
.medal-table .num { position: relative; border: 0; color: white; width: 10%; text-align: center; z-index: 1; font-weight: 300; }
.medal-table tr:hover .num { color: white; }
.medal-table .num:after { content:''; display: block; width: 30px; height: 30px; border-radius: 99px; position: absolute; z-index: -1; top: calc(50% - 15px); left: calc(50% - 15px); background: linear-gradient(to bottom, #D09CC8 0%, #7D84C2 100%); }
.medal-table .r { text-align: left; width: 30%; padding-left: 15px; }
.medal-table .remarks { font-size: .85em; margin-top: 1em; opacity: 0.6; line-height: 1.2em; }
.medal-table .total { width: 10%; }
.medal-table thead td.icon-medal:before { content: ''; display: block; background: top center no-repeat; width: 100%; height: 25px; background-size: auto 100%; position: absolute; left: 0; top: -1em; z-index: 1; }
.medal-table thead td.icon-medal.gold:before { background-image: url('../images/bg_medal_gold.png'); }
.medal-table thead td.icon-medal.silver:before { background-image: url('../images/bg_medal_silver.png'); }
.medal-table thead td.icon-medal.bronze:before { background-image: url('../images/bg_medal_bronze.png'); }
.medal-table thead td.icon-medal.total:before { background-image: url('../images/bg_medal_all.png'); width: 75px; }

@media only screen and (max-width: 991px) {
	.medal-table { font-size: .9em; margin: 0 -10px 0 -10px; width: calc(100% + 20px); }
}
/* TABLE STYLE */
.table {
	margin-bottom: 0;
}
.table td {
	padding: 3px;
	border-bottom: 1px solid rgba(50,50,50,0.1);
	border-top: none;
}
/* Override Bootstrap -------------------------------------------------------------------------------------------- */
@media (min-width: 1800px) {
/* Extra Extra Extra Large (xxxl) */
	.col-xxxl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-xxxl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xxxl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-xxxl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-xxxl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-xxxl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-xxxl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-xxxl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-xxxl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-xxxl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-xxxl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-xxxl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}
/* Navigation */
.navbar { position: relative; z-index: 10; padding: .3rem 0; width: 90%; margin: 0 5%; border-radius: 10px; /* overflow: hidden; */ background-color: white; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); }

.nav-item { position: relative; flex: 1 0 auto; }
.nav-link { position: relative; min-width: 80px; color: #394655; font-size: clamp(1em, 1.2vw, 1.2em); font-weight: 600; letter-spacing: .1em; text-align: center; z-index: 30; }
/*
.nav-item:hover:after { text-decoration: none; background: linear-gradient(to bottom, #CCBC71 0%, #9E8F4C 100%); opacity: .5s; }
*/
.nav-link:hover { color: #381d9e; text-decoration: none; }

/* Change active button position on desktop mode */
@media only screen and (min-width: 992px) {
	.active.nav-item:after { top: calc(-1rem + 1px); }
	#nav-home.active.nav-item:after { border-radius: 10px 0 0 10px; }
	/* Insert space inbetween nav-item 
	.affix-top #nav-home.nav-item { margin-left: 10px; }
	.affix-top #nav-cheerup.nav-item { margin-right: 180px; }*/
	/* .affix-top #nav-related-radio.nav-item { margin-right: 100px; } */
}
@media only screen and (max-width: 991px) {
	.active.nav-item:after { top: 0; }
	.nav-link { text-align: left; }
	.navbar { width: 100%; border-radius: 0; margin: 0; }
	#nav-home.active.nav-item:after { border-radius: 5px; }
}
.active.nav-item:after { content: ''; display: block; position: absolute; z-index: -1; top: -0.3rem; left: 0; background-color: #381d9e; width: 100%; height: calc(100% + .6rem); }


.active .nav-link { 
	position: relative; z-index: 10; /* required to put at top */
	color: #FFF !important;
	min-width: 80px;
	padding-left: 1rem !important;
	padding-right: 1rem !important; 
}
.active .nav-link:link,
.active .nav-link:visited,
.active .nav-link:active,
.active .nav-link:hover {
	color: #FFF !important;
}

@media only screen and (max-width: 991px) {
	/*
	.nav-item:after { height: calc(100% - 6px) !important; margin: 4px 0; top: 0; width: 4px;  }
	.nav-item:hover:after { width: 10px; }
	.active.nav-item:after { height: 2em; color: #fff; width: 100%; color: #FFF; border-radius: 5px; }
	.nav-item:hover .nav-link {  }
	*/
	.active.nav-item:after { top: 0; height: 100%; }
	.navbar-nav { padding: 10px; }
}
@media only screen and (max-width: 991px) {
	.active.nav-item:after { background: linear-gradient(to right, #39228c 0%, #583bc4 100%); border-radius: 4px; }
}

@media only screen and (max-width: 991px) {
	.navbar.affix .bg-navbar-grp { display: none; }
	.navbar.affix-top .bg-navbar-grp { display: none; }
}
/* CUSTOM NAV BAR BG */
@media only screen and (min-width: 992px) {
	.navbar.affix-top { position: absolute; transform: translateY(-28px); }
	.navbar.affix-top .bg-navbar-grp { position: absolute; background: url('../images/bg_navbar.png') top center no-repeat; background-size: 100% 80px; width: 100%; height: 80px; top: -21px; z-index: -1; }
	
}
.navbar .navbar-brand { position: relative; visibility: visible; color: #3d1d88; font-size: 1.2em; font-weight: bold; padding-left: 1em; }
.navbar .navbar-nav .nav-link.active:after { bottom: -9px; }
.navbar-nav { letter-spacing: .1em; width: 100%; justify-content: space-between; }

.navbar-toggler { border: none !important; background: transparent; margin-right: 10px; }
.navbar-toggler[aria-expanded="true"] { background-color: rgba(179,193,194,0.3); }

.collapsing .nav-link,
.collapse.show .nav-link { padding: .35rem 1rem; }
.collapse { position: relative; z-index: 2; }

.navbar-expand-lg .navbar-nav .nav-link { padding-right: .75rem; padding-left: .75rem; }

.dropdown-menu { border: none; box-shadow: 2px 2px 12px rgba(0,0,0,0.1); }
.dropdown-menu .dropdown-item { color: #373737; text-decoration: none; font-size: 1.1em; font-weight: 500; }
.dropdown-menu .dropdown-item:hover { background-color: rgba(16,30,86,0.1); }
.dropdown-menu .dropdown-item.disabled { /* color: rgba(164152,109,.5); */ pointer-events: none; }

@media only screen and (max-width: 991px) {
	.dropdown-toggle { width: 100%;  transition: none; }
}
@media only screen and (min-width: 992px) {	
	.dropdown-toggle { position: relative; overflow: hidden; }
	#sport-dropdown,
	#emoji-dropdown { width: 180px !important; min-width: initial; }
	#message-dropdown { width: 300px !important; min-width: initial;  }
}
.icon-emoji { background-size: auto 100%; background-repeat: no-repeat; background-position: 10px center; padding-left: 50px; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	/* .navbar .nav-item .dropdown-menu{ display: none; } */
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}	
/* ============ desktop view .end// ============ */

/* Pagination ------------------------------------------------------------------------------------------------------ */

.page-link {
	color: #334b83;
	background: none;
	border: none;
	border-radius: 3px;
	transition: all .2s ease;
}
.page-item.active .page-link {
	border-radius: 3px;
	color: #fff;
    background-color: #334b83;
    border:0;
}
/* Add scrollbale Menu ----------------------------------------------------------------------------------------------------- */
.scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
}
/* Sticky Menu */
.affix {
	position: fixed;
	top: 0;
	z-index: 1020;
	/* background-color: white; 
	border-bottom: solid 1px #FFF;*/
    width: 100%;
	margin: 0;
	border-radius: 0;
	opacity: 1;
     -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
@media only screen and (min-width: 992px) {
	.affix + .container-fluid {
		padding-top: 70px;
	}
	.affix-top .navbar-brand { display: none; }
}
@media only screen and (max-width: 991px){
	.affix + .container-fluid {
		padding-top: 60px;
	}
}

/* Responsive Styles ----------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1681px) and (max-width: 1920px){
	#carouselIndicators { max-width: 1400px; margin: 0 auto; }
}
@media only screen and (min-width: 1441px) and (max-width: 1680px){
	#carouselIndicators { max-width: 1300px; margin: 0 auto; }
}
@media only screen and (min-width: 1281px) and (max-width: 1440px){
	#carouselIndicators { max-width: 1100px; margin: 0 auto; }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px){
	
	#carouselIndicators { max-width: 950px; margin: 0 auto; }
}
@media only screen and (max-width: 991px) {
	.cover-box { padding: 1.5em 3em; max-width: 400px; }
	.sect-head { align-items: center; padding-left: 0%; }
	.home-subhead {
		background-size: auto 260px;
	}
	/* Hidden the third item on mobile */
	#sect-cheerup-sample .row div:nth-child(2) { display: none; }
}
@media only screen and (max-width: 825px) {
	.back-to-top { bottom: 0px; height: 40px; right: 10px; }
}
@media only screen and (max-width: 767px) {
	
	/* header */
	.project-logo { width: 100%; }
	.project-logo a { width: 100%; }
	
	#two-games { width: 350px; }
	
	#composite-logo { position: relative; width: 180px; left: 0; margin: 0 auto; }
	#composite-logo a { display: block;}
	.counter-box { border-radius: 15px; }
	.subhead {  transform: scale(0.8); top: -8em; }
	.section-box { padding: 4em 2% 2em 2%; }
	.match-item { margin: 5px; }
	.text-md-small { font-size: 1.2em; }
	.hide-in-mobile { display: none; }
	
	footer { padding-bottom: calc(1em + 40px) !important; }
}
@media only screen and (max-width: 480px) {
	.text-sm-small { font-size: .9em; line-height: 1.8em; }
}