@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

div.jw-icon-hd{display:none}
div.jw-icon-rewind{display:none}

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time {
	margin: 0; 
	padding: 0;
	font-family: 'Microsoft JhengHei', 'Open Sans','微軟正黑體', sans-serif;
}

html, body { 
	color: #666;
	font-size: 16px;
	line-height: 1.8em;
    background: url(../images/bg.png);
    background-position: center center;
    background-size: cover;
	/*width: 100%;
	height: 100%;*/
	margin:0;
	padding:0;
	}

h1,h2,h3,h4,h5,h6,h7 {
	font-weight: normal;
	color: #134155;
	margin-top: .7em;
	margin-bottom: .7em;
}
div,span  { box-sizing: border-box; }
a { color: #fff; transition: color 0.2s ease; }
a:hover,
a:focus,
a:active { text-decoration: none; color: #eee; }
p { padding-bottom: 10px }

::-webkit-scrollbar {
    width: 0.5em;
	height: 0.5em;
}
::-webkit-scrollbar-track-piece {
    background: #eee;
}
::-webkit-scrollbar-thumb {
    background: #15b5be;
	border-radius: 50px;
}


#wrapper {
	width: inherit;
	height: inherit;
}
#rthklogo {
	width: 90px;
	position:absolute;
	top: 20px;
	left:25px;
	z-index:99;
}

#logo {
	position: absolute;
	margin: 0 auto;
	width: 45%;
	max-width: 800px;
	min-width: 200px;
	top: 50%;
	left: 50%;
	z-index: 20;
	display:none;
}
#banner {
	position: relative;
	width: 100%;
	height: auto;
}
#banner img {
	width: 130%;
    height: auto;
    margin-left: -15%;
    margin-bottom: 1em;
}
header {
	/* background-image: linear-gradient(#036ca099, #0092af78); */
	 background-image: linear-gradient(to bottom, #036ca0e3, #0092af00);
}
footer {
	font-size: 15px;
    color: #fff;
	text-align: center; 
	padding: 15px;
	/* margin-bottom: 20px; */
	letter-spacing: .05em;
}

td {
	border-bottom:1px #ccc dotted;
	padding: 8px 0;
	font-weight:400;
	font-size: 14px;
}

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

/* OVERRIDE BOOTSTRAP ---------------------------------------------------------------------------------------------------------------------- -*/
.affix { top: 0; width: 100%; background: linear-gradient(to bottom, #def1f1, #fff);}
.affix .navbar-brand { /* display: block; */}
.container { 
	padding-left: 2%;
	padding-right: 2%;
}

#highlights {
	padding-top: 15px;
}



/* CUSTOM STYLES -----------------------------------------------------------------------------------------------------------------------*/
.clear { clear: both; }
.main { width: inherit; min-height: 600px; }

#highlights .icon-video, #highlights .icon-audio { width: 25px;  }





/*----------------Sharing Function Block-----------------*/
#shareBlock{
	 position:fixed;
	 top:50%;
	 left: 0;
	 width: 40px;
	 height:auto;
	 z-index: 1300;
	 margin-top: -60px;
 }
 #shareBlock a { cursor: pointer; }
 #shadowBlock{ display: none; }
 .shareIcon{
	 float: left;
	 width: 40px;
	 height: 40px;
	 background:#f3f5f7;
	 text-align:center;
 }
 .shareIcon.dark{ background: #34598b; }
 .version{ float: left; }


#songplayer {
	width: 100%;
	/* height: 478px; */
	border-radius: 10px;
    overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#fullplayer {
	width: 100%;
	background: #fff;
	border-radius: 10px 0px 10px 10px;
}

#fullplayer .s_title {
	background-color: #0a8989;
	color: #fff;
	padding: 15px 20px;
	font-size: 25px;
    /* border: 1px solid #43f1ed; */
	letter-spacing: .03em;
}

.player {
	position: relative;
	width: 100%;
	height: auto;
	background: #000;
}
#player {
	position: relative;
	width: 100%;
	height: auto;
	background: #000;
	/* border: 1px solid #ccc; */
}

.player .videoimg {
	width: 100%;
}
.player .video {
	position: absolute;
    left: 45%;
    top: 38%;
    width: 80px;
    z-index: 99;
}
#epilist {
	position: relative;
    float: left;
	width: 100%;
	height: 400px;
	background: #dcecec;
	overflow: auto;
	overflow-x: hidden;
	/* border: 1px solid #eee; */
}
.epi {
	padding: 15px;
	width: 100%;
	height: auto;
	border-bottom: 1px dotted #fff;
	position: relative;
	float: left;
}
.epi .title {
	padding: 0px;
	position: relative;
	line-height: 24px;
	font-size: 20px;
    font-weight: bold;
	color: #45625e;
	letter-spacing: .03em;
}
.epi .date {
	padding: 0px;
	position: relative;
	line-height: 24px;
	font-size: 14px;
	/* color: #333; */
	letter-spacing: .05em;
}
.epi.active {
	background: #fff;
	border-left: 5px solid #0a8989;
}
.epi.active .title {
	color: #0a8989;
}
.epi:hover {
	background: #e9f5f3;
}


/* CUSTOM RESPONSIVE STYLES */


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

	
	 #banner { background: url('../images/header_20210903.png') center center; background-size: cover; height: 150px; }
    
	 .img-responsive { display: none; }
    
	#playercontainer {
    	width: 720px;
    	height: auto;
	}
	#songplayer {
    	width: 720px;
	}
	#fullplayer {
   		width: 720px;
	}
	#epilist {
    	width: 720px;
		overflow: auto;
	}
		
}


@media screen and (max-width: 800px) { 
	 /*----------------Sharing Function Block-----------------*/
	 #shareBlock{ bottom:0; left:2%; top:auto; width: 100%; }
	 #shadowBlock{
		 position:absolute;
		 top: -30px;
		 display: block;
		 width: 100%; 
		 height: 30px; 
		 /* background: url(../img/diviShd_Up.png) no-repeat; */
		 background-position: center top;
		 background-size: cover;
		 pointer-events: none;
	 }
	 .shareIcon { width: 32%; height: 40px; margin: 0; }
	 .share { height:inherit; }
	 .version { float: none; width:auto; }
	 footer { /* padding-bottom: 50px;*/ margin-top: 0px; }
	 
	 .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    
	#songplayer {
    	width: 720px;
    	height: auto;
	}
	
}
	
@media screen and (max-width: 767px) {
	#rthklogo { left: 3vw; top: 3vw; width: 12%; min-width: 80px; }
	
	#playercontainer, #songplayer {
    	width: 100%;
		height: auto;
	}
	#fullplayer {
    	width: 100%;
	}
	#epilist {
    	width: 100%;
        height: auto;
	}
	
}