@charset "UTF-8";
/* @import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css); */

/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');

/* OVERRIDING -------------------------------------------------------------------------------------------*/
html, body { 
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}
body { 
	font-family: 'Kumbh Sans','Open Sans','微軟正黑體', sans serif;
	color: #121212;
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 0.05em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
}
header {
	color: #121212;
	/*font-family: 'cwtexming';*/
	position: fixed;
	width: 100%;
	top:0;
	left:0;
	z-index:10;
	/* height: 54px; */
}
nav { /* position: absolute; */ }
main {
	background-color: white;
	overflow: hidden;
	position: relative;
}
body.home, body.home main {
	/* background-color: #fafafa; */
	background-color: #fff;
}
footer {
	text-align: center; 
	padding: 1em;
	font-size: 0.9em;
	color: #121212;
}
h1,h2,h3,h4,h5,h6,h7 {

}
a { 
	color: #121212;
	transition: color 0.2s ease;
	transition: background-color 0.2s ease;
	text-decoration: none;
}
a:link { color: #121212; text-decoration: none; }
a:visited { color: #999999; text-decoration: none; }
a:hover { color: #fd5132; text-decoration: none; }
.cc-message a { text-decoration: underline; }
div, ul, li, a, span { box-sizing: border-box; }
button { cursor: pointer; }
/* BACK TO TOP */
.back-to-top {
	position: fixed;
	bottom: 0px;
	right: 0px;
	display: none;
	background-color: rgba(255,102,51,0.6);
	/* background-color: rgba(135, 135, 135, 0.60); */
	background-image: url('../images/back-to-top.svg');
	background-size: 100%; 
	width: 50px;
	height: 0px;
	padding-top: 50px;
	overflow: hidden;
	z-index: 9;
}
.back-to-top:hover {	
	/* background-color: rgba(135, 135, 135, 0.50); */
	background-color: rgba(255,102,51,0.6);
}
.clear { clear: both; }
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; /* IE < 8 */ }

/* SOLVE jwplayer cropped when extreme narrow screen ratio 
.jwplayer { max-height: 100%; max-width: 100%; }*/

/* OVERWRITE JWPLAYER */
/* Target all Firefox */ 
@-moz-document url-prefix() { .jw-display-icon-container .jw-icon { line-height: 100px !important; }}

.ellipsis {
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
/* COMMON ------------------------------------------------------------------------------------ */
.container { padding-left: 10px; padding-right: 10px; }
.slider-container div {
	/* required to remove extra space below div */
	vertical-align: bottom;
}
.icon-video { position: absolute; z-index: 2; visibility: hidden; right: 0; top: 0; margin: 4%; width: 1vw; height: 1vw; min-width: 20px; min-height: 20px; background-size: contain; background: url('../images/icon_video.svg') 0 0 no-repeat; }
.icon-audio { position: absolute; z-index: 2; visibility: hidden; right: 0; top: 0; margin: 4%; width: 1vw; height: 1vw; min-width: 20px; min-height: 20px; background-size: contain; background: url('../images/icon_audio.svg') 0 0 no-repeat; }
.icon-search { 
	margin-top: -5px;
	display: inline-block;
	width: 25px;
	height: 25px; 
	background: url('../images/icon_dark_search.svg') center center no-repeat;
	background-size: 60% 60%;
	vertical-align: middle;
	text-indent: -9999px;
	white-space: nowrap;
}
nav .icon-search { background-image: url('../images/icon_search.svg'); }
.offset { margin-top: 53px; }
.isTouch .icon-video,
.isTouch .icon-audio,
.isTouch .item-duration { visibility: visible; }
.rightArrow:after {
	content: ">";
	opacity: 0.5;
	display: inline-block;
	margin-left: .3em;
	transform: scaleX(.5);
	font-size: 1.2em;
}

a.rectBtn {
	display: inline-block;
	padding: .65em 2em;
	background-color: transparent;
	transition: all 0.2s ease;
	font-size: 1.1em;
	margin: .5em;
	color: #121212;
	border: solid 1px #ccc;
	border-radius: 4px;
	min-width: 220px;
}

a.rectBtn:hover {
	border-color: #fa6732;
	color: #fa6732;
}
.clearAllBtn { color: #999; cursor: pointer; position: absolute; top: 0px; right: 3%; margin-right: 5px; font-size: .9em; }

.icon-toggle { cursor: pointer; margin-bottom: 0; }
.icon-toggle:after { 
	content: " ";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-position: center right;
	background-repeat: no-repeat;
	transition: transform 0.1s ease;
	vertical-align: middle;
	opacity: .5;
	margin-left: .5em;
}
.icon-toggle.collapsed:after {
	transform: rotate(180deg);
}
.icon-toggle.dark:after { background-image: url('../images/icon_dark_up_arrow.svg'); }
.icon-toggle.light:after { background-image: url('../images/icon_light_up_arrow.svg'); }

.icon-download, .icon-info {
     padding-left: 20px;
}
.icon-info:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     margin-right: .5em;
     vertical-align: middle;
     width: 1em;
     height: 1em;
     background: url('../images/icon_info.svg') center center no-repeat;
     background-size: cover;
	 font-size: 14px;
}
.icon-info-dark:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     margin-right: .5em;
     vertical-align: middle;
     width: 1em;
     height: 1em;
     background: url('../images/icon_info_dark.svg') center center no-repeat;
     background-size: cover;
	 font-size: 14px;
}
.icon-download:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     margin-right: .5em;
     vertical-align: middle;
     width: 1em;
     height: 1em;
     background: url('../images/icon_download.svg') center center no-repeat;
     background-size: cover;
	 font-size: 14px;
}
 .icon-filter:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     margin-right: .3em;
     vertical-align: middle;
     width: 1em;
     height: 1em;
     background: url('../images/icon_dark_filter.svg') center center no-repeat;
     background-size: cover;
	 font-size: 14px;
}
 .icon-share:before {
     content:'';
     display: inline-block;
     margin-top: -.3em;
     vertical-align: middle;
     width: 1em;
     height: 1em;
     background: url('../images/icon_dark_share.svg') center center no-repeat;
     background-size: 1em 1em;
	 font-size: 14px;
}
 .icon-detail:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     vertical-align: middle;
     width: 1em;
     height: 1em;
	 margin-right: .5em;
     background: url('../images/icon_light_detail.svg') center center no-repeat;
     background-size: 1em 1em;
	 font-size: 14px;
}
 .icon-light-share:before {
     content:'';
     display: inline-block;
     margin-top: -3px;
     vertical-align: middle;
     width: 1em;
     height: 1em;
	 margin-right: .5em;
     background: url('../images/icon_light_share.svg') center center no-repeat;
     background-size: 1em 1em;
	 font-size: 14px;
}
 .icon-subscribe:before {
     content:'+';
     display: inline-block;
	 line-height: 1em;
	 vertical-align: middle;
	 margin-right: 5px;
     vertical-align: middle;
	 font-size: 14px;
}
#whatsapp-share { opacity: .3; pointer-events: none; /* display: none; */ }
#facebook-share {}
#twitter-share {}
#email-share {}

/* LAYOUT ------------------------------------------------------------------------------------ */
#wrapper {
	width: inherit;
	height: inherit;
}
#rthk-logo {
     position: absolute;
     width: 60px;
     margin-left: 1rem;
     left: 0;
     top: 0;
     z-index: 10;
}
 #rthk-logo img {
     width: 100%;
     height: auto;
}
 #project-logo {
     position: fixed;
     left: 90px;
     top:0px;
     z-index: 10;
     color: white;
     font-size: 1.2em;
     font-weight: bold;
     line-height: 50px;
     margin: 0;
}
 #project-logo a {
     display: block;
     color: white;
     text-decoration: none;
}
#search { position: relative; }
#search-btn-mobile { position: absolute; z-index: 0; display: none; top: 15px; right: 55px; border: none; }
#highlights,
#recent-play,
#latest-videos, 
#latest-audios, 
#hot-progs, 
#cat-affairs,
#cat-finance,
#cat-culture,
#cat-lifestyle,
#cat-family,
#cat-entertainment,
#cat-music,
#cat-drama,
#cat-sports {
	position: relative;
}
#highlights {
	/* margin-bottom: 9vw; */
}
/* HOME TOP SLIDER */
.top-nav-shadow {
	position: absolute;
	top:0;
	left:0;
	height: 4em;
	width: 100%;
	z-index: 2;
	background: linear-gradient(0deg, transparent 0%, rgba(52,58,64,0.6) 100%);
}
.top-slider-item {
	position: relative;
	background-size: cover;
	background-position: center center;
}
.top-slider-item a {
	display: block;
	position: relative;
	height: inherit;
	text-decoration: none;
	background-color: #000;
	z-index: 0; /* required on desktop mode */
}
.top-slider-item a .banner-img { 
	overflow: hidden;
	transition: opacity 0.2s ease;
	opacity: 1;
}
.top-slider-item a:hover .banner-img {
	opacity: 0.9;
}
.top-slider-item .title {
	color: white;
	padding-top: 5%;
	padding-bottom: 5%;
	z-index: 5;
	position: absolute;
	bottom: 0;
	display: block;
	text-align: center;
	width: 100%;
	background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.4) 80%);
	text-shadow: 1px 1px 10px #000;
}
.top-slider-item .title h2 {
	font-size: 2.2vw;
	margin: 0;
}

.top-slider-item .banner-img img { width: 100%; height: auto; }
.top-slider-item .gradient {
	background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,1) 100%);
	width: 100%;
	height: 75%;
	position: absolute;
	bottom: 0;
	z-index: 0;
}
.episode-container {
	width: 100%;
	margin-top: -4vw;
	z-index: 8;
}
.episode-subgrp {
	width: 75vw;
	margin: 0 auto;
	max-width: 1700px; 
}
.highlight-episode a:hover .icon-video, .highlight-episode a:hover .icon-audio { visibility: visible; }
.highlight-episode {
	width: 33.3%;
	float: left;
	padding: 0.6%;
}
.highlight-episode a {
	display: block;
	position: relative;
	box-shadow: 3px 3px 12px 0px rgba(51,51,51,0.2);
	overflow: hidden;
	background-color: white;
	border-radius: 4px;
	/* top: 0; */
}
.highlight-episode a .item-pic img {
     opacity: 1;
     transition: opacity 0.3s ease;
	 transform: scale(1.03);
}
 .highlight-episode a .item-pic {
     background-color: black;
}
 .highlight-episode a:hover .item-pic img {
     opacity: 0.7;
}
 .highlight-episode.radio a {
     background-color: white;
}

.top-slider-container {  /* height: 30vw; */}

.top-slider-item .item-title, .top-slider-item .item-desc {
	position: absolute;
	left: 0px;
	padding: 1vw;
	z-index: 20;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: white;
}
.top-slider-item .item-title {
	top: 0em;
	font-size: 0.85em;
	font-weight: normal;
	line-height: 1.2em;
	text-shadow: 1px 1px 2px #000;
	padding-top: 0.7vw;

}
.top-slider-item .item-desc {
	font-weight: bold;
	bottom: 0;
	padding-top: 2em;
	overflow: hidden;
	max-height: 5.2em;
	overflow: hidden;
	width: 100%;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 75%);
	padding-bottom: 10px;
}
.top-slider-item .item-pic {
	border-radius: 0px;
	overflow: hidden;
	background: black;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.top-slider-item .item-pic img {
	width: 100%;
}
.item-date { letter-spacing: 0.03em; }
.highlight-episode .item-date { display: none; }

.highlight-episode.audio .item-date {
	display: block;
	position: absolute;
	padding: 1vw;
	color: #999999;
	line-height: 1em;
	bottom: 0;
	font-size: .9em;
}
.highlight-episode.audio .item-pic {
	/*visibility: hidden;*/
	background: none;
}
.highlight-episode.audio .item-bg {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}
.highlight-episode.audio .blurBg {
	filter: blur(15px);
	transform: scale(1.2);
	opacity: .15;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.highlight-episode.audio .item-title {
	color: #999999;
	text-shadow: none;
}
.highlight-episode.audio .item-desc {
	position: absolute;
	color: #121212;
	top: 1em;
	line-height: 1.4em;
	font-size: 1.8vw;
	font-weight: normal;
	background: transparent;
	padding: 1vw;
	letter-spacing: 0;
	max-height: 4.8em;
}

.top-slider-banner {}
.top-slider-banner img { width: 100%; }

/* HOME HORZONTIAL SLIDER */
.section-title { 
	color: #121212;
	margin-left: 3%;
	line-height: 3.5em;
}
.section-title h3 { font-size: 1.4em; font-weight: 400; }
.section-title a {
	color: #121212;
	display: inline-block;
	line-height: 1em;
	padding-right: 22px; 
	text-decoration: none;
}
.section-title a h3:after {
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
	background: url('../images/icon_dark_right_arrow.svg') center center no-repeat;
	margin-left: 5px;
	transition: all 0.2s ease;
}
.section-title a:hover h3 { color: #fd5132; }
.section-title a:hover h3:after { margin-left: 10px; }
.section-title a h3 { margin: 0; }

#recent-play .content { padding: 0; width: 100%; /* overflow: hidden; */ }

.slick-track { margin-left: 0; /* alignment fix */ }

/* Detail page */
.epi-item-list {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.epi-item-list .epi-item {
	width: 25%;
	padding: 0 0.5vw;
	margin-bottom: 1em;
}
.epi-item-list .epi-item .item-desc,
.epi-item-list .epi-item .item-date {
	position: relative;
	padding-top: 0;
	line-height: 1.6em;
}
.epi-item { 
	line-height: 1.5em;
	position: relative;	
}
.epi-item:nth-child(n+6) { /* opacity: 0.5; */ }
.epi-item a {
	display: block;
	top: 0;
	transition: top 0.2s ease;
	position: relative;
	
}
.epi-item a img {
	opacity: 1;
	max-height: 100%;
	transition: opacity 0.3s ease;
	transform: scale(1.03);
	width: 100%;
}
.epi-item a:hover { text-decoration: none; }
.epi-item a:hover .item-pic { }
.epi-item a:hover .item-desc { color: #fd5132; }
.epi-item a:hover .icon-video,
.epi-item a:hover .icon-audio,
.epi-item a:hover .item-duration { visibility: visible; }
.epi-item .epi-thumbnails { 
	position: relative;
	background-color: #EEE;
	border-radius: 4px;
	
}
.epi-item .item-title { 
	position: absolute; 
	left: 0px; 
	bottom: 0px; 
	width: 100%; 
	padding: 2em 8px 8px 8px; 
	font-size: .8em; 
	z-index:5; 
	line-height: 1.3em; 
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 75%);
	color: white;
	border-radius: 0 0 4px 4px;
}
.epi-item .item-pic {
	color: #121212;
	text-align: center;
	overflow: hidden;
	opacity: 1;
	border-radius: 4px;
}
.epi-item .item-desc {
	/* color: #121212; */
	padding: 5px 5px 0px 5px;
	font-size: .95em;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	width: 100%;
}
.epi-item .item-date { 
	color: #999;
	padding: 2em 5px 5px 5px;
	font-size: .9em;
	position: absolute;
	/* bottom: 0; */
	width: 100%;
}
/* HOME CATEGORY --------------------------------------------------------------------------------------------------------------- */
.prog-item { 
	line-height: 1.5em;
	position: relative;
	top: 0;
}
.prog-item:nth-child(n+8) { /* opacity: 0.5; */ }
.prog-item a {
	display: flex;
	top: 0;
	transition: top 0.2s ease;
	position: relative;
	flex-direction: column;
}
.prog-item a img {
	opacity: 0.9;
	width: 100%;
	height: auto;
	border-radius: 4px;
	/* transition: opacity 0.3s ease; */
}

.prog-item .item-title { order: 1; font-size: .9em; text-align: center; padding: 8px 0; display: none; }
.prog-item .item-pic { order: 0; background-color: #EEE; width: 100%; height: 100%; border-radius: 4px; }
.prog-item a:hover .icon-audio, .prog-item a:hover .icon-video { visibility: visible; }

#result-prog-grp .prog-item .item-title { display: block; }

/* SUBPAGE CATEGORY -----------------------------------------------------------------------------------*/
#category-tab { background-color: #f5f5f5;  }
.cate-container { position: relative; max-width: 1140px; margin: 0 auto; }
.float-divs { position: absolute; top: 0; right: 0; background: white; display: none; padding-left: .2em; box-shadow: -2px -4px 8px rgba(0,0,0,0.1); }
ul.list-cate { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; justify-content: space-between; }
ul.list-cate li { flex: 1 0 auto; }
ul.list-cate li a { color: #a1a1a1; display: block; font-weight: normal; padding: 15px 15px; font-size: 1.2em; text-align: center; white-space: nowrap; }
ul.list-cate li a:hover { text-decoration: none; color: #f77141; }
ul.list-cate li.active a { color: white; background-color: #f77141; }

.isTouch ul.list-cate { -webkit-overflow-scrolling: touch; overflow-y: hidden; overflow-x: scroll; }
.engver { letter-spacing: 0.01em; }
.engver ul.list-cate li a { font-size: 1em; }

#cate-prog-list {}
.option-divs { display: flex; justify-content: space-between; width: 100%; }
.option-divs button.toggleSettingBtn { display: none; }
.option-divs div { /* border: solid 1px #000; */ line-height: 1em;  white-space: nowrap; }
.option-divs label { display: none; width: 65px; opacity: 0.5; font-size: .9em; padding: 0; padding-right: 10px; margin-bottom:0; vertical-align: middle; }

#prog-detail .option-divs { margin-top: -3.5em; padding: 20px 0px 20px 0px; }
#topic-detail .option-divs { padding: 20px 0px 20px 0px; }
#cate-prog-list .option-divs { padding: 15px 15px 15px 15px; }
.cate-container .prog-item-list { padding-top: 0px; }

button.viewBtn { 
	display: inline-block;
	outline: none;
	border: 0;
	width: 30px;
	height: 35px;
	text-indent: -9999px;
	background-size: 18px 18px;
	background-position: left center;
	background-repeat: no-repeat;
	background-color: transparent;
}
button.viewBtn:hover { }

.viewBtn.iconThumb { background-image: url('../images/icon_view_off.svg'); }
.viewBtn.iconThumb.active { background-image: url('../images/icon_view_on.svg'); }
.viewBtn.iconThumb:hover { background-image: url('../images/icon_view_on.svg'); }
.viewBtn.iconList { background-image: url('../images/list_view_off.svg');}
.viewBtn.iconList.active { background-image: url('../images/list_view_on.svg'); } 
.viewBtn.iconList:hover { background-image: url('../images/list_view_on.svg'); } 

button.optBtn { background: transparent; outline: none; border: 0; color: #333; line-height: inherit; padding: 10px .8em; margin-right: .2em; }
button:hover { color: #f77141; }
button.optBtn.active { border: solid 2px #f77141; color:#f77141; border-radius: 4px; }

.prog-item-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-top: -0.6%; padding: 10px; }
.prog-item-list .prog-item { padding: 0.4em; width: 16.6%; }
.prog-item-list .prog-item img { width: 100%; height: auto; }

button.rectBtn { border: solid 1px #ccc; font-weight: normal; color: #666666; background: transparent; border-radius: 4px; padding: .5em 1em; min-width: 220px; transition: all 0.3s ease; }
button.rectBtn:hover { border-color: #fa6732; color: #fa6732; }
button.disabled { opacity: .5; pointer-events: none; }

button.rectBtn+button.rectBtn { margin-left: .5em; }

/* Thumbnails Mode (program) */
.thumb-mode .prog-item .item-title { display: none; }
.thumb-mode .prog-item .item-pic { display: block; }

/* Thumbnails Mode (episode) */
.epi-item-list.thumb-mode .epi-item .item-title { display: none; }
#result-epi-grp .epi-item-list.thumb-mode .epi-item .item-title { display: block; }
.epi-item-list.thumb-mode .epi-item .item-desc { padding-top: 5px; }
.epi-item-list.thumb-mode .epi-item .item-pic { z-index: 0; display: block; height: inherit; }
.epi-item-list.thumb-mode .epi-item .item-pic:before { position: absolute; z-index: 1; top:0; left:0; content: ''; display: block; height: 100%; width: 100%; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%); }
.epi-item-list.thumb-mode .epi-item .item-date { }
.epi-item-list.thumb-mode .epi-item .epi-thumbnails { border-radius: 4px; overflow: hidden; /* Height is calculated by javascript */ z-index: 0; }
.thumb-mode .item-duration {
	position: absolute;
	z-index: 2;
    right: 5px;
    bottom: 5px;
    background-color: #2a251f;
    display: inline-block;
    padding: 0 5px;
    color: #fff;
    font-size: .8em;
    border-radius: 4px;
	opacity: .9;
	/* visibility: hidden; */
	line-height: 1.6em;
}

/* Thumbnails Hover Transition */
.highlight-episode a{ display: block; transition: all 0.2s ease; }
.highlight-episode a:hover  { transform:translate(-3px,-3px); box-shadow: 4px 4px 10px rgba(0,0,0,0.3); }

/* Programme Icon Hover Transition */
.prog-item .item-pic { display: block; transition: all 0.2s ease; }
.prog-item a:hover .item-pic { transform:translate(-3px,-3px); box-shadow: 4px 4px 10px rgba(0,0,0,0.3); }

/* Episode Thumbnails Hover Transition */
.epi-item .epi-thumbnails  { display: block; transition: all 0.2s ease; }
.epi-item  a:hover .epi-thumbnails { transform:translate(-3px,-3px); box-shadow: 4px 4px 10px rgba(0,0,0,0.3); }

/* Disable Episode Item Transition on list-mode */
.list-mode .epi-item .epi-thumbnails { transition: none; }
.list-mode .epi-item  a:hover .epi-thumbnails { transform: none; box-shadow: none; }

/* Topic Thumbnails Hover Transition */
.topic-item  a { display: block; transition: all 0.2s ease; }
.topic-item  a:hover { transform:translate(-3px,-3px); box-shadow: 4px 4px 10px rgba(0,0,0,0.3); }

/* List mode (prog) */
.list-mode .prog-item { width: 100% !important; padding: 0; }
.list-mode .prog-item .item-title { display: block; border-bottom: solid 1px #eee; padding: 10px; margin-left: 35px; font-size: 1em; text-align: left; }
.list-mode .prog-item .item-pic { display: none; }
.list-mode .prog-item a:hover { /* background-color: #f5f5f5; */ background-color: rgba(52,58,64,0.05); }

/* List mode (episode) */
.epi-item-list.list-mode { margin-bottom: 2em; font-size: .9em; }
.epi-item-list.list-mode .epi-item { width: 100% !important; padding: 0; max-width: initial; margin-bottom: 0; transition: background-color 0.3s ease; }
.epi-item-list.list-mode .epi-item .item-date { width: initial; right: 0; top: 0; padding: 0px 10px 6px 10px; }
.epi-item-list.list-mode .epi-item .item-desc { font-size: 1.2em; width: calc(100% - 80px); margin-right: auto; padding: 6px 10px 0px 10px; background: transparent; }
.epi-item-list.list-mode .epi-item .item-title { display: none; }
.epi-item-list.list-mode .epi-item .epi-thumbnails { position: absolute; height: 100%; width: 100%; background: transparent; left: -35px; }
.epi-item-list.list-mode .epi-item .item-duration { position: absolute; top: 50%; right: -25px; margin-top: -.8em; font-size: 1em; }
.epi-item-list.list-mode .epi-item .item-pic { display: none; height: inherit; }
.epi-item-list.list-mode .epi-item:hover { background-color: #f5f5f5; }
.epi-item-list.list-mode .epi-item a { position: relative; border-bottom: solid 1px #eee; margin-left: 35px; }
.epi-item-list.list-mode .epi-item:last-child a { border-bottom: none; }

.list-mode .icon-audio { z-index: 2; visibility: visible; /* top: 0; left: 0; margin: 18px 10px; */ top: 50%; left: 10px; margin: -10px 0 0 0; }
.list-mode .icon-video { z-index: 2; visibility: visible; /* top: 0; left: 0; margin: 18px 10px; */ top: 50%; left: 10px; margin: -10px 0 0 0; }

#recommendation { padding: 2em 0; }
#recommendation h3 { opacity: .8; }
.recommend-prog-list { display: flex; flex-direction: row; justify-content: center; width: 100%; max-width: 900px; margin: 2em auto; }
.recommend-prog-list .prog-item { padding: 0.6%; width: 16.6%; }
.recommend-prog-list .prog-item img { width: 100%; height: auto; }
/* SUBPAGE DETAIL -------------------------------------------------------------------------------------*/
#epi-detail, #topic-epi-detail  {
	position: relative;
	background-color: #343a40;
	/* margin-top: 50px;  height of nav bar */
}
#topic-epi-detail { margin-top: 0; }
#epi-detail { padding-top: 4em; }
#topic-epi-detail .container { padding-top: 1.5em; }
.player-cover-bg {
	position: absolute;
	z-index:0;
	left: 0;
	top: 0;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.background-img {
	opacity: .4;
	height: 100%;
	width: 100%;
	/* background-color: #1f1f1f; */
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(30px);
}
.epi-player { position: relative; background-color: black; margin: 0 auto; text-align: center; color: white;  }
.epi-player img { width: 100%; height: auto; }
.epi-player span { position: absolute; top: 50%; margin-top: -.75em; font-size: 1em; width: 100%; display: block; }
.player-container { position: relative; width: 100%; z-index: 1; margin: 0 auto; max-width: 1024px; }
.player-container .player-info { display: flex; justify-content: flex-start; width: calc(100% - 280px); }
.player-container .player-info-group { display: flex; padding: 1em 0; flex-wrap: nowrap; }
.player-container .epi-title { display: inline-block; width: calc(100% - 110px); }
.player-container .epi-title h2 { font-size: 1.8em; color: white; width: 100%; padding:0; margin: 0; line-height: 40px; vertical-align: middle; }
.player-container .epi-date { color: #FFF; opacity: .7; line-height: 40px; vertical-align: middle; width: 90px; padding: 0 10px; /* margin-left: .5em; margin-right: .5em; */ white-space: nowrap; }
.player-container .epi-desc { padding: 0; color: white; font-size: 1.1em; }
.player-container .epi-btns { white-space: nowrap; width: 280px; }
.player-container .synopsis-container { position: relative; padding: 1.5em 0; }
.player-container .synopsis-container .epi-date { font-size: 1.1em; padding-left: 0; }
.player-container .synopsis-container .epi-title { width: calc(100% - 40px); }
.engver .player-container .epi-btns { width: 360px; }

.player-container .epi-btns span { /* width: 50%; */ display: inline-block; padding: 0 3px; }
.player-container .darkBtn {
	position: relative;
	display: inline-block;
	background-color: rgba(255,255,255,0.15);
	padding: 0px 10px;
	border-radius: 4px;
	line-height: 40px;
	color: white;
	font-size: .95em;
	width: 100%;
	text-align: center;
}
.player-container .darkBtn:visited { color: white; }
.player-container .darkBtn:hover { color: white; background-color: rgba(0,0,0,0.2); }
#video-container { /* max-width: 1024px; margin: 0 auto; */ }
#audio-container { /* max-width: 1024px; margin: 0 auto;  max-width: 400px; max-height: 400px; width: 50vw; height: 50vw; */ }

#prog-detail { }
.prog-box { width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 2em 0; }
.prog-box .prog-id { /* width: 15%; min-width: 80px; max-width: 100px; */ flex: 0 0 100px; }
.prog-box .prog-box-title { margin-top: 0; padding-left: 25px; flex: 1 1 auto; flex-basis: calc(45% - 125px); display: flex; flex-direction: column; justify-content: center; }
.prog-box .prog-box-title h2 { font-size: 1.6em; margin-bottom: 0; font-weight: normal; display: inline-block; line-height: 1.4em; }
.prog-box .prog-id img { width: 100%; height: auto; border-radius: 4px; }
.prog-box .prog-box-info { flex: 1 1 400px; /* flex-basis: calc(55% - 180px); */ display: flex; }
.prog-box ul.prog-info { display: flex; width: 100%; list-style: none; align-items: center; line-height: 1.2em; margin: .7rem; padding-left: 0;}
.prog-box ul.prog-info li { flex: 1 1 25%; padding: 0 .5vw; text-align: center; }
.prog-box ul.prog-info label { color: #999; width: 100%; font-size: .8em; font-weight: normal; display: block; opacity: .9; margin-bottom: .25rem; }
.prog-box ul.prog-info a { color: #666; font-size: .9em; display: inline-block; white-space: nowrap; margin-top: 5px; margin-left: 8px; padding: 3px 13px; border-radius: 99px; background-color: #efefef; }
.prog-box ul.prog-info a:hover { color: white; background-color: #fa6732; }
.prog-box ul.prog-info li:first-child a { margin-left: 0; }
.prog-box ul.prog-info li:first-child { padding-left: 0; }
.prog-box ul.prog-info span { color: #666; font-size: .9em; display:inline-block; margin-top: 5px; padding: 3px 0; white-space: nowrap;  }
.prog-box .subscribe-divs { flex: 1 1 180px; margin-left: auto; align-self: center; font-weight: bold; white-space: nowrap; margin: 1rem 0; }
.prog-box .subscribe-divs button { width: 100%; }
.prog-box .social-tools { display: flex; height: 30px; margin-top: .6rem; }
.prog-box .social-tools div { margin-right: .5em; }

ul.prog-tabs { list-style: none; margin:0; padding:0; border-top: solid 1px #eee; text-align: center; }
ul.prog-tabs li { padding: 0; margin: 0; display: inline-block; margin-top: -1px; }
ul.prog-tabs li a { display: block; padding: 1em 2vw .1em 2vw; font-size: 1.4em; white-space: nowrap; }
ul.prog-tabs li.active { border-top: solid 4px #fa6732; }
ul.prog-tabs li a:visited { color: #121212; }

.tab-box-about { display: none; }
ul.share-options { display: none; }
.content { padding: 1em; }
/* TOPIC LIST ---------------------------------------------------------------------------------------- */
section#topic-list {
	
}
main.isNavBg {
	margin-top: 44px;
}
#topic-list .topic-container {
	padding: 1.5em 15px;
	max-width: 1140px;
	margin: 0 auto;
}
.topic-grp-title {
	margin-top: 1.5em;
}
.topic-grp-title:first-child {
	margin-top: 0;
}
.topic-grp-title h3 {
	font-size: 1.5em;
}
.topic-item-list {
	position: relative;
}
.topic-item-list .last-btn-more {}
.topic-item-list button.btn-more {
	background-color: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	display: block;
	outline: none;
	border: none;
	color: white;
	font-size: 1.8em;
	/* flex: 0 0 20%; */
}
.topic-item { 
	position: relative; 
	/* width: 16.6%;height: 10vw; min-height: 8em; */
	padding: 0.5vw;
	flex: 0 0 25%;
	width: 25%;
	height: 240px;
	float: left;
}
.topic-item.large {
	/* flex: 0 0 40%;*/
	width: 50%; 
	height: 240px;
	font-size: 1.5em;
}
.topic-item button {
	width: 100%;
	height: 100%;
}
.topic-item a {
	display: block;
	background-color: #EEE;
	height: 100%;
	/* min-height: 8em; */
	position: relative;
	opacity: .9;
	transition: all .2s ease;
	border-radius: 4px;
	overflow:hidden;
}
.topic-item a:hover {
	opacity: 1;
}
.topic-title { 
	color: white;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 1em;
	width: 100%;
	line-height: 1.5em;
	padding-top: 2em;
	padding-bottom: .5em;
	text-align: center;
	font-weight: bold;
	padding: 20px 10px 10px 10px; 
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
.topic-pic {
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 4px;
	overflow: hidden;
}

/* TOPIC DETAIL -------------------------------------------------------------------------------------- */
#topic-header { }
#topic-detail .option-divs .option-type { flex-grow: 1; }
.topic-header-container {
	position: relative;
	min-height: calc(20vw + 54px);
	width: 100%;
	background-color: black;
	padding: 2em 0;
	padding-top: calc(2em + 54px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.topic-bg-cover {
	position: absolute;
	opacity: .7;
	z-index: 0;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	text-align: center;
}
.topic-header-title { text-align: center; color: white; z-index: 5; }
.topic-header-title h1 { font-size: 2.5em; font-weight: bold; margin-bottom: 0; }
.topic-epi-count { font-size: 1.2em; color: white; text-align: center; z-index: 5; }
.topic-desc { color: white; z-index: 1; width: 94%; max-width: 940px; margin: 0 auto; margin-top: 1em; text-align: center; }
.topic-desc-btn a { color: white; /* border: solid 1px #fff; border-radius: 4px; padding: 2px 10px; */ }

.topic-btns { margin-top: .5em; text-align: center; z-index: 5; }
.topic-btns .dropdown { margin: 2px; display: inline-block; }

#topic-epi-detail .player-container .epi-btns { width: 320px; }
.engver #topic-epi-detail .player-container .epi-btns { width: 400px; }
#topic-epi-detail .player-container .player-info { width: calc(100% - 320px); }
.engver #topic-epi-detail .player-container .player-info { width: calc(100% - 400px); }

.option-autoplay { margin-left: 10px; margin-right: 10px; }
.option-autoplay label { display: inline-block; opacity: 1; line-height: 35px; padding-right: 0px; width: auto; }

.player-btns {
	position: absolute;
	border: none;
	outline: none;
	padding: 0;
	background: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	z-index: 5;
	width: 40px;
	height: 40px;
	font-size: 0;
    line-height: 0;
	margin-top: -20px;
	opacity: .75;
	transition: all 0.2s ease;
}
button.player-btns:hover { opacity: 1; }
button.player-btns.disabled { opacity: .1; /* visibility: hidden; */ }

.btn-prev { top: 50%; left: -40px; cursor: pointer; background-image: url('../images/icon_white_left_arrow.svg'); }
.btn-next { top: 50%; right: -40px; cursor: pointer; background-image: url('../images/icon_white_right_arrow.svg'); }

.active-label {
	position: absolute;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	border: solid 2px #f77141;
	color: white;
	text-align: center;
	line-height: inherit;
	height: 100%;
	line-height: 100%;
	z-index: 2;
}
.active-label span {
	position: absolute;
	top: 50%;
	display: block;
	margin-top: -.5em;
	width: 100%;
	text-align: center;
}
.active-label span:before {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	border-radius: 99px;
	background-color: #f77141;
	margin-right: .4em;
}
.list-mode .active-label {
	background-color: #f77141;
	width: 60px;
	border: none;
	z-index: 5;
	left: -10px;
	font-size: .9em;
}
.list-mode .epi-item.active .item-date,
.list-mode .epi-item.active .item-desc { margin-left: 15px; }
.list-mode .active-label span:before {
	display: none;
}
.epi-item.active { /* order: -1; */ }
.epi-item.active a { pointer-events: none; }
.epi-item.active .item-desc { color: #f77141; }

.thumb-mode .epi-item a:hover .epi-thumbnails:before {
	content: "";
	display: block;
	background: url('../images/icon_play.svg') center center no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -1.5em;
	margin-top: -1.5em;
	width: 3em;
	height: 3em;
}
/* Mobile Toggle Switch */
.inactiveMixin {
  content: "";
  position: absolute;
  display: block;
}
.beforeAnimation {
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
}
.afterAnimation {
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}
.toggleWrapper {
  border-radius: 5px;
  background: white;
  display: inline-block;
  vertical-align: middle;
}
.toggleWrapper input.mobileToggle {
  opacity: 0;
  position: absolute;
}
.toggleWrapper input.mobileToggle + label {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: 0.4s ease;
  height: 25px;
  width: 47px;
  border: 1px solid #e4e4e4;
  border-radius: 99px;
  opacity: 1;
  cursor: pointer;
}
.toggleWrapper input.mobileToggle + label:before {
  content: "";
  position: absolute;
  display: block;
  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
  height: 25px;
  width: 46px;
  top: 0;
  left: 0;
  border-radius: 30px;
}
.toggleWrapper input.mobileToggle + label:after {
  content: "";
  position: absolute;
  display: block;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
  /*background: whitesmoke;*/
  background: white;
  height: 23px;
  width: 23px;
  top: 1px;
  left: 0px;
  border-radius: 60px;
}
.toggleWrapper input.mobileToggle:checked + label:before {
  background: #f77141;
  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
}
.toggleWrapper input.mobileToggle:checked + label:after {
  left: 22px;
}
/* SEARCH RESULT ------------------------------------------------------------------------------------- */
ul.result-tabs { display: flex; flex-direction: row; justify-content: center; list-style: none; /* border-top: solid .5px #ddd; */ text-align: center; width: 80%; max-width: 300px; padding:0; margin: 0 auto; }
ul.result-tabs li { border-top: solid 3px #fff; padding: 0; margin: 0; display: block; /* width: 33.3%; */ }
ul.result-tabs li a { display: block; padding: 1em  1em .3em 1em; font-size: 1.4em; white-space: nowrap; }
ul.result-tabs li.active { border-top: solid 3px #fa6732; }
ul.result-tabs li a:visited { color: #121212; }
.noresult { text-align: center; width: 100%; padding: 1em; }

#result-epi-grp .epi-item-list,
#result-topic-grp .topic-item-list,
#result-prog-grp .prog-item-list { margin-top: .5em; margin-bottom: 1em; }
.epi-item-list.column5 .epi-item { width: 20%; }
#result-prog-grp .section-title,
#result-topic-grp .section-title,
#result-epi-grp .section-title { margin-left: .5vw; margin-bottom: .7em; }
#result-prog-grp .prog-item-list { padding: 0; }
#result-epi-grp .epi-item a:hover .epi-thumbnails:before { display: none; }

#search-box-grp { }
.search-box-form { position: relative; }
.input-search-box { 
	position: relative;
	color: #666666;
	outline: none;
	border: 0;
	width: 100%;
	height: 11vw;
	max-height: 4.5em;
	min-height: 3em;
	background-color: #f6f6f6;
	font-size: 2.5em;
	padding: 1.75rem 5rem .25rem 5rem;
	text-align: center;
}
.search-box-form label {
/* This styles the label before interaction */
	display: block;
	font-size: 2em;                      
	font-weight:normal;
	top: 50%;
	width: 100%;
	text-align: center;
	position: absolute;
	margin-top: -1em;
	line-height:2em;
	color: #333;
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
	color: #ccc;
	margin-bottom: 0;
	z-index: 5;
	pointer-events: none;
}
input:focus ~ label,
input:valid ~ label,
form:focus ~ label {
	/* This styles the label after interaction */
	top: 15%;
	font-size: 1.1em;
	margin-top: -0.25em;
	color: #999;
}
.search-btn,
.clear-btn {
	position: absolute; 
    top: 50%;
    vertical-align: middle;
	text-indent: -9999px;
	outline: none;
	border: 0;
    width: 3em;
    height: 3em;
	padding: 1em;
	margin-top: -1.5em;
	display: inline-block;
	opacity: .5;
	transition: all .2s ease;
}
.search-btn {
	background: url('../images/icon_dark_search.svg') center center no-repeat;
	display: block; /* Show on desktop only */
	background-size: 90% 90%;
	right: 2rem;
}
.clear-btn { 
	background: url('../images/icon_dark_clear.svg') center center no-repeat;
	display: none; /* Show on mobile only */
	background-size: 1.5rem 1.5rem;
	right: 1rem;
}
.search-box-form .search-btn:hover,
.search-box-form .clear-btn:hover { opacity: 1; }
.search-overlay-grp input:invalid ~ .clear-btn { display: none; }
.search-overlay-grp input:valid ~ .clear-btn { display: block; }
/* SEARCH OVERLAY ----------------------------------------------------------------------------- */
#search-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(230,230,230, 0.95);
    
    -webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

    -webkit-transform: translate(0px, -100%) scale(1, 0);
	-moz-transform: translate(0px, -100%) scale(1, 0);
	-o-transform: translate(0px, -100%) scale(1, 0);
	-ms-transform: translate(0px, -100%) scale(1, 0);
	transform: translate(0px, -100%) scale(1, 0);
	z-index: 99;
    opacity: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3vw;
}

#search-overlay.open {
    -webkit-transform: translate(0px, 0px) scale(1,1);
    -moz-transform: translate(0px, 0px) scale(1,1);
	-o-transform: translate(0px, 0px) scale(1,1);
	-ms-transform: translate(0px, 0px) scale(1,1);
	transform: translate(0px, 0px) scale(1,1);
    opacity: 1;
}
#search-overlay input[type="search"] {
	font-size: 2em;
    text-align: center;
    border: 0px;
    outline: none;
	width: 100%;
	padding: .3em 2.5em;
	color: #666;
	line-height: 100%;
	border-radius: 4px;
}
#search-overlay input[type="search"]::placeholder {
	line-height: normal;
}
#search-overlay .search-box-form {
	margin-bottom: 1.5em;
	margin-right: 4em;
}
#search-overlay .search-btn {
	right: -4em;
}
#search-overlay .search-overlay-grp {
    width: 100%;
	max-width: 1000px;
}
#search-overlay h3 { color: #666; font-size: 1.8em; text-align: center; line-height: 2em; }
#search-overlay .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100px;
    max-width: 200px;
    margin-top: 61px;
    margin-left: -45px;
}
#search-overlay .prog-item-list {
	padding: 0;
	max-width: 800px; 
	margin: 0 auto;
}
#search-overlay .prog-item-list .prog-item { width: 16.6%; padding: 0.4vw; }
#search-overlay .prog-item-list .prog-item:nth-child(n+13) { display: none; }
/*---------------*/
.close-lg {
    position: fixed;
    right: 0px;
    top: 15px;
    color: #000;
	/*border-color: #333;*/
	background: transparent;
	border: 0;
}
.close-lg {
	position: absolute;
	width: 50px;
	height: 50px;
	opacity: 0.5;
	text-indent: -9999px;
	transition: opacity .2s ease;
}
.close-lg:hover {
	opacity: 1;
}
#search-overlay .close-lg { right: 10px; }
.close-lg:before, .close-lg:after {
	position: absolute;
	top:0;
	left: 24px;
	content: ' ';
	height: 50px;
	width: 2px;
	background-color: #333;
}
.close-lg:before {
	transform: rotate(45deg);
}
.close-lg:after {
	transform: rotate(-45deg);
}
.close-lg.light:before, .close-lg.light:after {
	background-color: #FFF;
}
/* FAQ ----------------------------------------------------------------------------------------------- */
#accordion { /* border-bottom: 1px solid rgba(0,0,0,.125); */ }
.card { border-radius: 0; border-top: none; border-left: none; border-right: none; }
.card-header { position: relative; border-bottom: none; border-radius: none; padding:0; }
.card-header:hover { background-color: rgba(0,0,0,.06); }
.card-header a { display: block; line-height: 1.6em; padding: 1rem 1.5rem; padding-right: 1.9rem; font-size: 1.15em; }
.card .card-link:before { content: ""; transition: all 0.3s ease; top: 50%; right: 15px; border-right: solid 1px #999; border-bottom: solid 1px #999; width: 10px; height: 10px; display: inline-block; position: absolute; }
.card .card-link[aria-expanded="true"]:before { transform: rotate(225deg); margin-top: 0px; }
.card .card-link[aria-expanded="false"]:before{ transform: rotate(45deg); margin-top: -5px; }
.card-body ol { display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
.card-body ol li { width: calc(100%/3 - 3em); padding: 0; margin: 1.5em; }
.card-body .col2 li { width: calc(100%/2 - 3em); }
.card-body ol li a { margin-top: 1em; display: block;  }
.card-body ol li img { width: 100%; height: auto;  }
.card-body img { border: solid 1px #eee; max-width: 100%; }
.card-body ol li a { /*max-height: 600px; */overflow: hidden; }
.card-body ol li a.half { /*height: calc((100% - 2.5em)/3 - 5em);*/ height: 275px; overflow: hidden; }
.card-body ol li a.half img {  margin-top: -120px; }
.card-caption { display: block;  /* min-height: 6em;*/ }
.doubleline .card-caption { min-height: 3em; }
.tripleline .card-caption { min-height: 5em; }
.multiline .card-caption { min-height: 6em; }
.fancybox-overlay { background: rgba(230,230,230, 0.95); }
.fancybox-title-float-wrap .child { color: #333; background: transparent; text-shadow: none; padding: 2px; }
#faq-box-grp .container { padding-left: 0; padding-right: 0; }
#faq-box-grp h3 { margin: 0em; padding: .5em; line-height: 1.5em; }

/* OVERRIDE BOOTSTAP STYLES -------------------------------------------------------------------------- */
.gradientBg { position: relative; }

.navbar {
	line-height: 50px;
	padding: 0px;
	/* position: sticky;*/
	background-color: #343a40;
}
.navbar:after {
	content: '';
	position: fixed;
	z-index: -1;
	top: 0;
	display: block;
	width: 100%;
	height: 54px;
	/* background-color: #343a40; */
}
@media (min-width: 768px) {
	.home .navbar.sps--abv { background: transparent; }
	.gradientBg { position: fixed; height: 54px; }
	.gradientBg .navbar.sps--abv:after {  background: none; }
}
.navbar-brand {
	top: 0;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 5.5rem;
	color: white !important;
	background: url('../images/podcastone3.svg') center center no-repeat;
	width: 8em;
	height: 100%;
	text-indent: 9999px;
	z-index: 1;
}
.navbar-nav .nav-link {
	padding: 0 1rem !important;
}
.navbar-nav {
	width: 100%;
	justify-content: center;
	
}
.navbar-toggler-icon { width: 1em; height: 1em; }
.navbar-toggler { border: none; z-index: 2; margin-right: .75rem; padding: .25rem .55rem; }

/* Animated Cross Toggle Icon */
.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}
.nav-item.active {
  border-top: solid 3px #f77141;
}
.nav-item {
  border-top: solid 3px transparent;
}
.dropdown-menu.show {
	z-index: 1;
}
.navbar-dark .dropdown-menu {
	background-color: rgba(52,58,64,0.8);
}
.navbar-dark .dropdown-menu a.dropdown-item {
	color: white;
}
.navbar-dark .dropdown-menu a.dropdown-item:hover {
	background-color: rgb(52,58,64);
}
.navbar-dark .navbar-nav .nav-link {
	color: white;
}
@media (max-width: 767px) {
	#lang .dropdown-menu {
		border: 0;
		text-align: center;
		background-color: rgba(255,255,255,0.1);
	}
	#lang .dropdown-menu a.dropdown-item {
		display: inline-block;
		width: auto;
	}
}

#myModal .modal-dialog {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}

/* sticky MENU ------------------------------------------------------------------------------------------ */
.sps {
  /* padding: 1em .5em; */
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.25s ease;
  width: 100%;
}
.sps--abv {
  color: #fff;
}
.sps--abv.bg-dark { }
.sps--blw { /*
  background-color: #121212;
  color: #fff;*/
}
.navbar-collapse { }
/* CUSTOM NAV STYLES ----------------------------------------------------------------------------------- */
.subscribe-divs .dropdown:first-child { /* margin-bottom: .75em; */ }
.dropdown a:visited { color: #121212; }
.dropdown a:hover { color: #fa6732; }
.dropdown-item { 
	display: block;
	padding: 5px 1em;
	white-space: nowrap;
	font-size: 1em;
	line-height: 1.6em;
}
.dropdown-item.active,
.dropdown-item:active {
	background: transparent;
}	
a.dropdown-item:hover {
	background-color: #eee;
}
.dropdown-item.active, .dropdown-item:active {
	color: #121212;
}
button.primary {
	min-width: 160px;
	background-color: #fa6732;
	color: white;
	transition: background-color 0.3s ease;
	border: solid 1px #fa6732;
	line-height: 1.7em;
}
button.primary:hover {
	background-color: #ec6433;
	border: solid 1px #fa6732;
}
button.secondary {
	min-width: 160px;
	background-color: rgba(255,255,255,0.9);
	color: #121212;
	transition: all 0.3s ease;
	border: solid 1px #ccc;
	line-height: 1.7em;
}
button.secondary:hover {
	border-color: #fa6732;
	background-color: rgba(255,255,255,0.9);
	color: #fa6732;
}
.about-txt { font-size: 1.1em; padding: 2em; letter-spacing: 0.05rem; }
.section-grp {
	 border-top: solid 1px #eee;
	 text-align: center;
	 padding: 1.5em 0;
}
#recommendation {
	/* background-color: #eceeef; */
	background-color: rgba(52,58,64,0.07);
	border:none;
}
/* CUSTOM JW7 PLAYER STYLES ---------------------------------------------------------------------------- */
/* Color of the display icon */
.jw-display .jw-icon:before {
  color: #fa6732;
}
/* CUSTOM RESPONSIVE STYLES ---------------------------------------------------------------------------- */
/* MIN (SMALL TO LARGE)--------------------------------------------------------------------------------- */ 
@media (min-width: 768px) {
	/* GLOBAL */
	.navbar-brand { position: absolute; }
	#faq { position: absolute; right: 80px; font-size: .9em; /* top: 50%; margin-top: -1em; */ }
	#lang { position: absolute; right: 10px; font-size: .9em; /* top: 50%; margin-top: -15px; */ }
	.gradientBg .navbar.sps--abv { background: none; }
	.navbar.sps--blw:after {
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		display: block;
		width: 100%;
		height: 54px;
		background-color: #343a40;
	}
}
@media (min-width: 1200px){
	.epi-item-list.list-mode .epi-item .epi-thumbnails { /* height: calc((100vw - 1200px)/4/16*9);*/ }
}
@media (min-width: 1600px) {
	.top-slider-item { font-size: 1.3em; }
	.prog-item, .epi-item { font-size: 1.1em; }
	.section-title h3 { font-size: 1.6em; }
}
@media (min-width: 2000px) {
	.top-slider-item { font-size: 1.5em; }
	.prog-item, .epi-item { font-size: 1.3em; }
	.section-title h3 { font-size: 1.7em; }
}
/* MAX (LARGE TO SMALL) -----------------------------------------------------------------------------------*/
@media (max-width: 1300px) {
	/* TOPIC LIST */
	.topic-item.large { width: 50%; height: 240px; }

	.topic-item { width: 25%; height: 240px; }
}
@media (max-width: 991px) {
	.nav > li > a { margin: 0 10px; }
	/* .prog-item { width: 50%; } */
	
	.prog-box .prog-box-title  { flex: 1 1 auto; flex-basis: calc(100% - 125px); }
	.prog-box .prog-box-info { flex: 1 1 400px; }
	
	/* category prog list */
	.prog-item-list .prog-item { width: 20%; }
	/* detail epi list */
	.epi-item-list .epi-item { width: 33.3%; }
	
	/* SEARCH */
	.epi-item-list.column5 .epi-item { width: 33.33%; }
}

@media (max-width: 825px) {
	/* .back-to-top { bottom: 50px; } */
	.player-container { padding-top: 1em; }
	
	/* Home */
	#highlights { margin-bottom: 0; }
	
	/* Highlight */
	.top-slider-container .title h2 {  font-size: 1.4em;  }

	/* Detail */
	.recommend-prog-list { margin: 1.5em 0 0 0; width: 100%; flex-wrap: wrap; }
	.recommend-prog-list .prog-item { width: 33.3%; }
	button.rectBtn { width: 100%; }
	.tab-box-epi button:not(:first-child) { margin-top: 1em; }
	a.rectBtn { width: 100%; margin:0; margin-bottom: 1em; }
	a.rectBtn:last-child { margin-bottom: 0; }
	.epi-item-list .epi-item { margin-bottom: .5em; }
}
@media (max-width: 767px) {
	/* GLOBAL */
	header { position: relative; height: 44px; }
	#project-logo { display: none; }
	#rthk-logo { width: 40px; top: -2px; }
	#search-btn-mobile { display: block; }
	#search { display: none; }
	.navbar-brand { margin-left: 60px; font-size: 1em; margin-right: auto; /* required for fix justify-content:space-between on parent div in IE11*/ }
	.navbar-nav > li a { text-align: center; }
	.navbar-nav { /* position: absolute; top: 0; margin-top: 44px; */ z-index: 10; height: calc(100vh); font-size: 1.3em; background-color: rgba(52,58,64,0.95); }
	.navbar { line-height: 45px; }
	.offset { margin-top: 0px; }
	.nav-item.active { border: none; }
	.navbar-dark .navbar-nav .active>.nav-link { color: #f77141; }
	.navbar-collapse .navbar-nav { margin-top: -44px; }
	.navbar:after { height: 44px; }	
	
	/* HOME */
	main { font-size: .9em; }
	main.isNavBg { padding-top:0; }
	
	/* HIGHLIGHTS */
	.top-nav-shadow { display: none; }

	.top-slider-container .banner-img img { height: 200%; width: auto; }
	.top-slider-container .item-title {  padding: 10px; }
	.top-slider-container .title h2 { font-size: 1.2em; }
	.top-slider-container .title { padding-bottom: 1em; }
	.top-slider-container .episode-container { position: relative; margin-top: 0; bottom: initial; padding: 4px; }
	.top-slider-container .episode-subgrp { width: 100%; vertical-align: middle; }
	.top-slider-container .highlight-episode { padding: 4px; border: solid 1px #fff; font-size: .8em; border-radius: 4px; }
	.top-slider-container .highlight-episode .item-title { display: none; top: 0px; }
	.top-slider-container .slick-dots { padding-top: 0; }
	.top-slider-container .item-desc {
		position: relative;
		padding: 6px;
		z-index: 20;
		line-height: 1.5em;
		color: #121212;
		background: white;
		height: 2.8rem;
		overflow: hidden;
		letter-spacing: 0; 
		margin-bottom: 0.5rem;
		font-size: 1.1em;
		font-weight: normal;
		top: 0;
	}
	.highlight-episode.audio .item-title { position: absolute; /* padding: 2vw 2vw 0 2vw; */ padding: 1em 2vw; color: #999999; }
	.highlight-episode.audio .item-desc { position: absolute; top: 0; font-size: 3vw; width: calc(100% - 18px); /* top: 25px; font-size: 1.3em; padding: 2vw 2vw 0 2vw; margin-top: -1em; */ padding: .6em 2vw; height: 6em; }
	.highlight-episode.audio .item-date { padding: 2vw; }
	.highlight-episode.audio .item-pic { padding-bottom: 2.8rem; margin-bottom: .5rem; }
	
	
	/* CATEGORY PROG LIST*/
	.prog-item-list .prog-item { width: 25%; }

	/* CATEGORY */
	#category-tab { padding: 0px; }
	#category-tab .container { margin: 0; padding: 0; }
	.cate-container .option-divs { 
		display: none;
		position: absolute;
		z-index: 5;
		background-color: white;
		padding: 10px 10px;
		flex-direction: column; 
		border-bottom: solid 1px #eee; 
		box-shadow: 1px 6px 10px rgba(0,0,0,0.2);
	}
	.cate-container .option-divs button.viewBtn { width: auto; padding-left: 30px; text-indent: initial; }
	.cate-container .float-divs { display: block; }
	.cate-container .option-divs label { display: inline-block;  }
	.cate-container .option-divs div { margin-bottom: 0.5em; padding-bottom: .5em; border-bottom: solid 1px #eee; }
	.cate-container .option-divs div:last-child { margin:0; padding: 0; border:0; }
	.cate-container .prog-item-list { padding: 5px; }
	ul.list-cate { margin-right: 80px; }
	ul.list-cate li a { padding: 10px 12px; font-size: 1.1em; }
	
	/* DETAIL PLAYER */
	#epi-detail, #topic-epi-detail { margin-top: 0; }
	#epi-detail, #topic-epi-detail .container { padding-top: 0; }

	#epi-detail .player-container .epi-btns { display: flex; width: 100% !important; margin-top: 5px; /* width: 128px;*/ }
	#epi-detail .player-container .epi-btns span { flex: 1 1 33.3% !important; }
	#epi-detail .player-container .player-info { width: 100% !important; max-width: 100%; }
	
	#topic-epi-detail .player-container .epi-btns { display: flex; width: 100% !important; margin-top: 5px;/* width: 85px !important; */ }
	#topic-epi-detail .player-container .epi-btns span { flex: 1 1 33.3%; }
	#topic-epi-detail .player-container .player-info { width: 100% !important; /* width: calc(100% - 130px) !important; */ }
	.player-container .player-info-group { padding: 10px; flex-wrap: wrap; }
	/*.player-container .darkBtn { width: 35px; text-indent: -9999px;  margin: 0 3px; }
	.player-container .darkBtn:before { position: absolute; top: 50%; left: 50%; margin-left: -.5em; margin-top: -.5em; } */
	.player-container .epi-title h2 { /* font-size: 1.4em; */ }
	
	.player-container .epi-date { padding: 0 5px; font-size: .9em; }
	.player-container .epi-title { width: calc(100% - 85px); }
	.player-container .synopsis { padding: 0 20px; }
	.player-container .synopsis-container { margin: 0em; }
	
	.prog-box { padding: 1.5em 0; }
	.prog-box .prog-id { flex: 0 0 80px; }
	.prog-box .prog-title .ellipsis { white-space: initial; line-height: 1.5em; }
	/*.prog-box .prog-box-info a, .prog-box .prog-box-info span { margin-right: 5px; }*/
	.prog-box .prog-box-info { width: 100%; }
	.prog-box ul.prog-box-info li { padding: 0; flex: 0 1 25%; }
	.prog-box .prog-box-title { padding-left: 15px; flex: initial; width: calc(100% - 95px); }
	.prog-box .epi-item-list .epi-item { margin-bottom: .5em; }
	.prog-box ul.prog-info { padding: .7rem 0; margin: .5rem 0; }
	.prog-box ul.prog-info li { padding: 0px; }
	.prog-box .subscribe-divs { width: 100%; flex: initial; margin-top: 0; display: flex; justify-content: space-between; }
	.prog-box .subscribe-divs .dropdown { width: 100%; display: block; margin: 0; }
	ul.prog-tabs li { width: 40%; }
	/* #prog-detail .option-divs { margin-top: 0; } */
	.about-txt { padding: 2em 10px;}
	.btn-lg { font-size: 1.2em; }
	
	/* DETAIL EPISODE LIST */
	.epi-item-list .epi-item { width: 50%; }
	#prog-detail .option-divs { margin-top: -.5em; }
	
	
	/* TOPIC LIST */
	#topic-list .topic-container { padding: 1.5em 3%; }
	
	.topic-item.large { width: 66.67%; height:180px; }
	.topic-item { width: 33.33%; height:180px; }
	
	/* TOPIC DETAIL */
	#topic-header .topic-header-title, #topic-header .topic-epi-count { font-size: .8em; }
	#topic-detail .option-divs { padding: 12px 0 12px 0px; }
	#topic-detail .toggleWrapper { transform: scale(.8); }
	.topic-header-container { padding-top: 2em; }
	.player-btns { top: calc(50% - 30px); visibility: hidden; width: 30px; height: 30px; margin-top: -15px; }
	.player-btns.btn-next { right: 3%; }
	.player-btns.btn-prev { left: 3%; }
	
	/* COMMON */
	.icon-info:before,
	.icon-light-share:before,
	.icon-download:before { width: 1.2em; height: 1.2em; }
	
	/* SEARCH */
	.epi-item-list.column5 .epi-item { width: 50%; }
	ul.result-tabs { font-size: .9em; }
	.search-box-form { font-size:.8em; }
	.search-overlay-grp { margin-top: 1.5em; }
	.search-overlay-grp .search-btn { right: -4em; }
	
	/* SEARCH OVERLAY */
	#search-overlay { font-size: .9em; }
	#search-overlay h3 { font-size: 1em; margin-bottom: 0; }
	#search-overlay .prog-item-list .prog-item { width: 100%;  }
	#search-overlay .prog-item-list .prog-item:nth-child(n+13) { display: none; }
	#search-overlay .prog-item-list .item-pic { display: none; }
	#search-overlay .prog-item-list .item-title { display: block; text-align: center; line-height: 1.2em; font-size: 1.2em; }
	#search-overlay .prog-item-list .icon-audio, #search-overlay .prog-item-list .icon-video { display: none; }
	#search-overlay .close-lg { transform: scale(.7); top: 5px; right: 5px; }
	
	/* FAQ */
	.card-body ol li a.half { height: auto; }
	.card-body ol li a.half img { margin:0; }
	.card-body ol li { width: calc(100% - 2em); }
	.card-caption { min-height: auto; }
}
@media (max-width: 600px) {
	/* DETAIL PROG LIST */
	#whatsapp-share { opacity: 1; pointer-events: initial; display: block; }
	.prog-item-list .prog-item { width: 33.3%; padding: 0.3em; }
	.prog-box .prog-box-info label { display: none; }
	.prog-box .prog-box-info a, .prog-box .prog-box-info span { padding: 3px 8px;  margin-left: 0; }
	
	
	/* TOPIC LIST */
	.topic-item.large { width: 100%; height: 180px; }
	.topic-item { width: 50%; height: 120px; }
	#epi-detail .container , #topic-epi-detail .container { padding: 0; }
}
@media (max-width: 580px) {
	.player-container { padding-top: 0em; }
}
@media (max-width: 400px) {
	/* TOPIC */
	#topic-detail button.optBtn { padding: .6em .8em; margin: 0; }
	.highlight-episode.audio .item-desc { padding: .6em 2vw; }
}


div.jw-icon-hd{display:none}
div.jw-icon-rewind{display:none}
div.ajax-loader { width: 100%; text-align: center; }

.cc-window.cc-floating { max-width: initial !important; }
.cc-bottom { bottom: 0 !important; box-shadow: 0 0 30px rgba(0,0,0,0.25); }
.cc-compliance a { border-radius: 4px; }