/************************************************* Web Version *****************************************/

body{
	
	padding: 0px;
	margin: 0px;
}

ul{
	margin: 0px;
	padding: 0px;
}


.clearfix::after{
	clear:both;
	display: block;
	content: '';
}

.clear{
	
	clear:both;
}

.fl{
	
	float: left;
}

.fr{
	
	float: right;
}

.web .wrapper{
	
	width: 1036px;
	margin: 0 auto;
	position: relative;
}

#mainwrappercover{
	
	background-repeat: repeat-y;
	background-image: url('../../images/web/bg_right_shadow.jpg');
	background-position: top right;
	background-color: #CECECE;
}

.web .menubarList{
	
	
}


.web .episode_name h5{
	display: inline;
	margin: 0px;
	font-size: 13px;
	line-height: 28px;
	font-weight: normal;
	vertical-align: bottom;
	margin-right:10px;
}

.web .episode_name a{
	
	background: url(../../images/web/btn_play_bg.png);
	width: 72px;
	height: 28px;
	display: inline-block;
	vertical-align: bottom;
	
}

#mainwrapper.web{
	
	
}

#mainwrapper {
	content: "";
	background-image: url('../../images/web/bg_left_shadow.jpg');
	background-repeat: repeat-y;
	padding-left: 28px;
}



#mainwrapper.web>#headerWrapper{
	background-image: url('../../images/web/keyart_hkjc.jpg');
	width: 980px;
	padding-top: 385px;
	height: 195px;	
	position: relative;
}


.web .sm2-bar-ui{
	
	height: 84px;
	float: right;
	margin-right: 67px;
}

.web .detail{
	
	width: 460px;
	max-height: 157px;
	overflow: auto;
}


#mainwrapper.web>#headerWrapper>#fbShare{
	position: absolute;
	background-image: url('../../images/web/btn_share_fb.gif');
	width: 38px;
	height: 38px;
	top: 0;
	right: 0;
	z-index: 10;
}

#mainwrapper.web>#menubarWrapper>#menuDescription{position: relative;height: auto;top: -100px;}

#mainwrapper.web>#menubarWrapper>#menuDescription>.description{
	width: 665px;
	margin-left: 183px;
	text-align: justify;
}

#mainwrapper.web>#menubarWrapper>#menubarList>#menubarcover{
	/* overflow-x: hidden !important; 
	
	top: -109px;
	*/
	overflow: hidden !important;
	position: relative;
	
	}

#mainwrapper.web>#menubarWrapper>#menubarList>#btn_left,#btn_right{
	cursor: pointer;
}

.web .menubarWrapper::after{
	
	clear: both;
	content: '';
	display:block;
}

.web #menubarcover{
	/*width: 490px;*/
	width: 568px;
	margin-left:10px;
	display: inline-block;
	overflow: hidden;
	/*margin-left:50px;*/
	position: relative;
	height: 85px;
	
}

.categories p{
	
	text-align: center;

}

.web #mainwrapper #btn_left{
	background-image: url('../../images/web/btn_left.png');
	/*left: 0;
	top: -109px;*/
	width: 196px;
	height: 85px;
	float: left;
	cursor:pointer;
}

.web #contentWrapper{
	
	margin: 0px auto;
	margin-top: 20px;
	padding: 20px;
	width: 847px;
	
}

.web .detail{
	
	line-height: 25px;
	color: #5E5E5E;
	font-size: 13px;
	padding-right:10px;
	margin-left: 20px;
	float: left;
}

.web .detail a{
	
	color: #195791;
	
}

.web #mainwrapper #btn_right{
	background-image: url('../../images/web/btn_right.png');
	/*right: 0;
	top: -109px;*/
	width: 196px;
	height: 85px;
	float:right;
}

#playlist_details li{
	
	list-style: none;
	border-top: 1px solid #dbdbdb;
	padding: 22px 0px;
}

#playlist_details .item1{
	
	padding-top: 30px;
}

#playlist_details li::after{
	clear: both;
	display:block;
	content:'';
}

#playlist_details li img{
	
	width: 254px; 
	height: 158px;
	
}

#mainwrapper.web>#contentWrapper>#playlist_details>.playlistItem>.content{
	overflow-y: auto;
	width: 420px;
	height: 150px;
	color: #5E5E5E;
	line-height: 25px;
	padding-left: 20px;
	padding-right: 10px;
}
#mainwrapper.web>#contentWrapper>#playlist_details>.playlistItem>.content>a:link,
#mainwrapper.web>#contentWrapper>#playlist_details>.playlistItem>.content>a:visited{
	color: #195791;
}

.detail::-webkit-scrollbar {
    width: 13px;
}
/* Track */
.detail::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
    background: #b8b8b8;
}
 
/* Handle */
.detail::-webkit-scrollbar-thumb {
    background: #7D9CBA;
}
.detail::-webkit-scrollbar-thumb:window-inactive {
	background: #7D9CB9; 
}

#mainwrapper.web>#footerWrapper>#bannerWrapper{
	width: 728px;
	height:90px;
}
/**************************************************** Common ********************************************/

body{
	font-family: Arial;
	font-size: 13px;
	overflow-x: hidden;
	color: #2c2c2c;
}

#headerWrapper,#contentWrapper,#footerWrapper{
	display: block;
	background-color: #CECECE;
}


#headerBar{
	
	background-size: 100%;	
	background-repeat: no-repeat;
	margin: 0;
	background-color: #CECECE;
}

.description{
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	line-height: 23px;
}

.playlistItem{
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
}


.web .sm2-bar-ui.compact{
	
	max-width: initial;
	min-width: auto;
	width: 425px;
	margin-bottom: 17px;
}

#menubarList{
	position: relative;
}

#menubarList::after{
	content:'';
	display: block;
	clear: both;
}


#menubarList ul{
	padding:0px;
	white-space: nowrap;
	position: absolute;
	padding-top: 10px;
}

#menubarList ul li{
	
	color: #FFF;
	display: inline-block;
	text-align:center;
	vertical-align: middle;
	width:98px;
	font-size: 14px;
	position: relative;
	font-family: "Noto Sans TC";
} 

#menubarList ul .sperator{
	background-image: url(../../images/web/menu_line.png);
    background-repeat: no-repeat;
    background-position: center;
	width: 7px;
	height: 38px; 
	margin: 0px 6px;   
}

#menubarList ul .sperator:nth-child(5n){
	
	display: none;
}




.web #menubarList ul li .title{
	text-shadow: 0px 3px 2px rgba(0,0,0,0.35);
	font-size: 15px;
}

.web #menubarList ul li a{
	width:98px;
	display:block;
	z-index:1;
	height: 64px;
	position:absolute;
}


#menubarList ul li .update_date{
	
	background-image:url(../../images/web/btn_menu_bg.png);
	width: 89px;
	height: 28px;
	padding-bottom:4px;
	padding-top: 7px;
	margin: 0px auto;
	position: relative;
	background-repeat: no-repeat;
	line-height: 14px;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.18);
	font-size: 12px;
}
/*
#menubarList ul li div::before{
	content:'';
	display:block;
	position: absolute;
	border-bottom:5px solid #a58803;
	border-left: 5px solid transparent;
	border-right:5px solid transparent;
	left:50%;
	top: -5px;
	margin-left: -5px;
}
*/



#menubarList ul li .update_date{
	color:#e1c95a;
}

.web #menubarList ul li .update_date{
	font-size: 12px;
}

#menubar{
	display: inline-block
	/*
	position: relative;
    display: inline-flex;
	/*width: 2500px;*/
}

#menubar>a.selected{
	
}

.line{
	margin: 0 auto;
	position: relative;
	background-image: url('../../images/web/line_02.gif');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 847px;
	height: 17px;
	padding-bottom: 20px;
}

#bannerWrapper{
	background-color: #000;
    display: block;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-bottom: 20px;
	padding-top: 20px;
}
#goTop{
	display: block;
	background-image: url('../../images/web/btn_gotop.png');
	background-size: 100%;
	background-repeat: no-repeat;
	width: 63px;
	height: 63px;
	bottom: 10px;
	position: absolute;
	right: 30px;
	cursor: pointer;
}

#playlist_details{
	padding-bottom: 50px;
}

#rightWrapper {
    position: absolute;
    display: block;
    top: 0;
    right: -100%;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 9;
}
#leftWrapper {
    position: absolute;
    display: block;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 9;
}
#hkjcLink {
    width: 260px;
    height: 60px;
    position: absolute;
    z-index: 10;
    top: 415px;
    left: 65px;
}
#cr1Link{
	width: 130px;
    height: 60px;
    position: absolute;
    /* background-color: brown; */
    z-index: 10;
    top: 410px;
    left: 340px;
}
.available{
	cursor: pointer;
}
.disable{
	cursor: default;
}


 .sm2-bar-ui .buttons{
	
	position: absolute; 
	right: 10px;
	top: 10px;
	
}



.sm2-playlist-target {
	width: 200px;
	position: absolute;
	left: 10px;
	top: 10px;
	height: 25px;
}

.sm2-inline-element sm2-inline-status{
	width: 100%;	

}

.sm2-playlist{
	
	width: 100%;
	height: 25px;
}

.sm2-inline-elment

.ep1, .ep2{
	
	display: inline-block;
}

#mainwrapper .sm2-button-volume-element{
	
	position: absolute; 
	right: 25px;
	bottom: 0px;
	top:auto;
	left:auto;
}

.sm2-main-controls{
	
	height: 84px;
}


#mainwrapper .sm2-play-pause{
	
	position: absolute;
	left: 10px;
	bottom: 7px;
	top:auto;
	margin: 0px;
	padding: 0px;
}

#mainwrapper .sm2-progress{
	
	position: absolute;
	bottom: 20px; 
	left: 50px;
}

#mainwrapper .sm2-bar-ui{
	
	position: relative;
}


#mainwrapper .sm2-bar-ui .sm2-inline-status{
	
	position: absolute; 
	top: 5px;
	left: 30px;
}


/*Player css*/

.player{
	
	color: #5E5E5E;
}

.player .progress_bar{
	/*width: 200px;*/
	width: 260px;
	height: 5px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 10px;
	position: relative;
	margin-right: 20px;
	margin-left:10px;
}

.player .play_time{
	width: 80px;
	display: inline-block;
	line-height: 20px;
	font-size: 13px;
	vertical-align: middle;
	text-align: center;
	color:#525254;
}

.button{
	border-radius: 90px;
	width: 30px;
	height:30px;
	line-height: 30px;
	text-align: center;
	display: inline-block;
}



.player .progress_bar > .progress{
	height: inherit; 
	width: 0px;
	border-radius: 10px 0px 0px 10px;
}

.player .progress_bar > .control{
	border-radius:  90px;
	cursor:  -webkit-grab;
	width: 10px;
	height: 10px;
	left: 0px;
	top:-2px;
	position:absolute;
	
}

.player .progress_bar > .control:active{
	cursor: -webkit-grabbing;
}


 .playing .play_button{
	display:none!important;
}

.pause_button{
	
	display: none;
}

.playing .pause_button{
	display: inline-block!important;
}

.button i {
	line-height: 30px;
}


marquee{
	margin-bottom: 5px;	
}


.volume{
	display:inline-block;
	width:30px;
	position: relative;
	border-radius: 90px;
	vertical-align: middle;
}

.volume > .control{
	width: 10px;
	height: 10px;
	border-radius: 90px;
	position:absolute;
	left:95%;
	top:-2px;
}

.volume .level{
	height: 0.25em;
	width: 100%;
	border-radius: 90px 0px 0px 90px;
}



.web #mainwrapper .player .top .episode_title,
.web #mainwrapper .player .top .buttons,
.web #mainwrapper .player .play_button,
.web #mainwrapper .player .pause_button,
.web #mainwrapper .player .progress_bar,
.web #mainwrapper .player .play_time,
.web #mainwrapper .player .volume_logo,
.web #mainwrapper .player .volume
{
	
	display: inline-block;
	vertical-align: middle;
}

.web #mainwrapper .player .buttons{
	text-align:right;
	width: 115px;
}

.web #mainwrapper .player .top .episode_title{
	
	width:265px;
	margin-right:0px;
}

.web #mainwrapper .player{
	
	width: 389px;
	height:45px;
	margin-right: 67px;
	margin-bottom: 18px;
	padding: 18px;
	padding-bottom: 20px;
	float:right;
}

.web #mainwrapper .player .top{
	
	height: 25px;
	margin-bottom: 7px;
}

#mainwrapper .player .play_button{
	
	background-image: url(../../images/web/btn_play.png);
    background-size: 100%;
    background-position: 0 center;
    width: 16px;
    height: 16px;
}

#mainwrapper .player .pause_button{
	
	background-image: url(../../images/web/btn_pause.png);
    background-size: 100%;
    width: 16px;
    height: 16px;
}

#mainwrapper .player .progress_bar,
#mainwrapper .player .volume{
	background-color: #b7bfc2;
	height: 0.25em;
	position: relative;
}

.volume_logo{
	background: url(../../images/web/btn_sound_off.png);
	width: 16px;
	height: 16px;
}

#mainwrapper .player .progress_bar .progress,
#mainwrapper .player .volume .level{
	
	background-color: #bb9a04;
}

#mainwrapper .player .control{
	
	background-image: url(../../images/web/btn_player_handle.png);
	width: 16px;
	height: 16px;
	top: 50%;
	margin-top: -8px;
	
}


.player .buttons a
{
	background-color: #979ea1;
	color: #FFF;
	text-align: center;
	padding: 4px 8px;
	text-decoration:none;
	font-size: 13px;
	display:inline-block;
}

.player .buttons .ep2{
	margin-left: 5px;	
}


.player .buttons .selected{
	
	background-color: #bf9e07;
}

.player .playlist{
	
	display: none;
}




 
/*end of player css*/