@charset "utf-8";
@import url(/css/assem/fonts.css); 
@import url(reset.css);
@import url(xeicon.css);


/********************
 * common
 ********************/
 body {font-family: 'Noto Sans KR';width:100%;height:100%;}
.wd1200 {max-width: 1200px;width:100%;height:100%;margin: 0 auto;}

.lh{line-height: 0px;}
.tal{text-align: left;}

.fll{float:left;}
.flr{float:right;}
.fln{float:none;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.pt10{padding-top: 10px;}

.pb10{padding-bottom: 10px;}

.pr10{padding-right: 10px;}

.pl15{padding-left: 15px;}

.mt5{margin-top:5px; !important}

.mb7{margin-bottom:7px !important;}

.ml0{margin-left:0px !important;}
.ml10{margin-left:10px !important;}

.mr0{margin-right:0px !important;}
.mr10{margin-right:10px !important;}

.fs11 {font-size:11px !important;}

.clear{clear:both;}
.none {display:none;}
.after:after {content:''; display:block; clear:both;}
select::-ms-expand {display: none;}

/********************
 * viewer header start
 ********************/
.vodviewer .header
{
	width:100%;height:88px;position:relative;z-index:100;border-bottom:1px solid #cccccc;
	background-image:url("/images/onair/header_bg.png");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.vodviewer .header .wd1200{max-width:1200px; margin:0 auto; width:100%;}
.vodviewer .header .wd1200 .logo{float:left;line-height:80px;}
.vodviewer .header .wd1200 .logo a img{vertical-align:middle;}
.vodviewer .header .wd1200 .qmenu{float:right;margin:45px 0 0 0;padding:0 0 0 29px;}
.vodviewer .header .wd1200 .qmenu li{float:left;margin:0 13px 0 0;}
.vodviewer .header .wd1200 .qmenu li.last{margin-right:0px !important;}
.vodviewer .header .wd1200 .qmenu li span{font-size:16px;color:#ffffff;}
.vodviewer .header .wd1200 .qmenu li:after
{
	position:relative;content:"";display:inline-block;background-size:100% 100%;margin-left:13px;
	background-image: url("/images/onair/header_bar.png");width:1px;height:14px;
}
.vodviewer .header .wd1200 .qmenu li.last:after{display:none;}

.vodviewer .header .wd1200 .right{text-align: right; color: #fff; padding-top: 30px;}
.vodviewer .header .wd1200 .right a {color: #fff; font-size: 16px; margin: auto 10px;}
.vodviewer .header .wd1200 .right span {width: 1px; height: 14px; background-color: #ced1d6; display: inline-block;}
/********************		
 * header end
 ********************/		

/********************
 * content left start
 ********************/
.vodviewer .content{height:100%;} 
.vodviewer .content .wd1200 .left_wrap
{
	position:absolute;width:265px;border-left:1px solid #dde2e3;border-right:1px solid #dde2e3;height:calc(100% - 88px);background-color:#EBECEE;    z-index: 99999;
}

.vodviewer .content .wd1200 .left_wrap .top{font-size:18px;color:#000000;padding:30px 0 20px 22px;border-bottom:1px solid #dde2e3;background-color:#ffffff;}
.vodviewer .content .wd1200 .left_wrap .top:before
{
	position:relative;content:"";display:inline-block;background-size:100% 100%;margin-right:6px;
	background-image: url("/images/onair/left_top.png");width:24px;height:24px;top:4px;
}
.vodviewer .content .wd1200 .left_wrap:after{content:''; display:block; clear:both;}
.vodviewer .content .wd1200 .left_wrap .committee{background-color:#ffffff;}
.vodviewer .content .wd1200 .left_wrap .committee .llist{font-size:16px;color:#69757e;padding:18px 0 18px 30px;border-bottom:1px solid #dde2e3;}
.vodviewer .content .wd1200 .left_wrap .committee .llist:before
{
	position:relative;content:"-";display:inline-block;width:10px;top:4px;
}
.vodviewer .content .wd1200 .left_wrap .committee .mlist{font-size:16px;color:#69757e;padding:20px;border-bottom:1px solid #dde2e3;}
.vodviewer .content .wd1200 .left_wrap .committee .mlist a{background:url("/images/onair/mlist_dot.png") left 7px no-repeat;padding-left: 20px;}
.vodviewer .content .wd1200 .left_wrap .committee .mlist a:hover{background:url("/images/onair/mlist_dot_on.png") left 7px no-repeat;padding-left: 20px;}

.vodviewer .content .wd1200 .left_wrap .committee .mlist2{font-size:16px;color:#69757e;padding:20px;border-bottom:1px solid #dde2e3;}
.vodviewer .content .wd1200 .left_wrap .committee .mlist2 a{background:url("/images/onair/con_arrow.png") left 7px no-repeat;padding-left: 20px;}

.vodviewer .content .wd1200 .left_wrap .committee .llist:hover{color:#080890;border:1px solid #080890;}
.vodviewer .content .wd1200 .left_wrap .committee .mlist:hover{color:#080890;border:1px solid #080890;}
.vodviewer .content .wd1200 .left_wrap .committee .mlist2:hover{color:#080890;border:1px solid #080890;}

.vodviewer .content .wd1200 .right_wrap{float:right;width:calc(100% - 290px);padding:20px 0 0 0;}
.vodviewer .content .wd1200 .right_wrap .video_wrap .video{background-color:#000000;}
.vodviewer .content .wd1200 .right_wrap .video_wrap .title{font-size:18px;color:#3b3a3d;padding:20px 0 0 8px;}
.vodviewer .content .wd1200 .right_wrap .video_wrap .date{font-size:14px;color:#3b3a3d;padding:10px 0 0 8px;}
.vodviewer .content .wd1200 .right_wrap .video_wrap .date:before
{
	position:relative;content:"";display:inline-block;background-size:100% 100%;margin-right:6px;
	background-image: url("/images/onair/on_air.png");width:53px;height:18px;top:4px;
}
.vodviewer .content .wd1200 .right_wrap .con_wrap{border-top:1px solid #dde2e3;margin-top:20px;}
.vodviewer .content .wd1200 .right_wrap .con_wrap .con{font-size:14px;color:#1c4799;padding:20px 0 0 8px;}
.vodviewer .content .wd1200 .right_wrap .con_wrap .con:before
{
	position:relative;content:"";display:inline-block;background-size:100% 100%;margin-right:6px;
	background-image: url("/images/onair/con_arrow.png");width:13px;height:14px;top:2px;
}
.vodviewer .content .wd1200 .right_wrap .con_wrap .con_list{}
.vodviewer .content .wd1200 .right_wrap .con_wrap .con_list li{font-size:16px;color:#3b3a3d;padding:5px 0 5px 8px;}
/********************
 * content left end
 ********************/

@media screen and (max-width: 1000px) {
	.vodviewer .header{border-bottom:0px;}
	.vodviewer .header .wd1200 .logo{margin:0 0 0 15px;width:50%;}
	.vodviewer .header .wd1200 .qmenu{margin:45px 15px 0 0;}
	.vodviewer .content .wd1200 .left_wrap{width:100%;border-left:0px;border-right:0px;border-top:1px solid #dde2e3;position:relative;}
	.vodviewer .content .wd1200 .left_wrap .top{padding:20px 0 20px 15px;}
	.vodviewer .content .wd1200 .left_wrap .committee .llist{font-size:16px;color:#69757e;padding:18px 0 18px 15px;}
	.vodviewer .content .wd1200 .left_wrap .committee .mlist{font-size:16px;color:#69757e;padding:18px 0 18px 15px;}
	.vodviewer .content .wd1200 .right_wrap{float:none;display:block;width:100%;padding:0;}
	.vodviewer .content .wd1200 .right_wrap .video_wrap .title{padding:20px 0 0 15px;}
	.vodviewer .content .wd1200 .right_wrap .video_wrap .date{padding:10px 0 0 15px;}
	.vodviewer .content .wd1200 .right_wrap .con_wrap .con{padding:20px 0 0 15px;}
	.vodviewer .content .wd1200 .right_wrap .con_wrap .con_list li{padding:5px 0 5px 15px;}
	.vodviewer .header .wd1200 .right {display: none;}
}

@media screen and (max-width: 760px) {
	.mhidden{display:none;}
	#html5player{height: 210px;}
	#iframe {height:427px !important;}
}
@media screen and (max-width: 560px) {
	#iframe {height:300px !important;}
	
}
@media screen and (max-width: 420px){
	#iframe {height: 230px !important;}
}


.player_btn{position:relative; display:flex;  background-color:#222; color:rgba(255,255,255,0.8); font-size:13px; padding:10px 20px; text-align:center; justify-content: space-between;}
.player_btn > div {display:flex; align-items: center;}
.player_btn button, .player_btn select {display:inline-block; line-height:30px; height:30px;border:0; padding:0 10px; border-radius:7px;color:rgba(255,255,255,0.8); background-color:rgba(255,255,255,0.1); transition: all 0.3s; margin:0 3px;}
.player_btn button:hover, .player_btn select:hover {background-color:rgba(255,255,255,0.2); color:#fff;}
.player_btn button > i {padding:0 5px;}
.play_speed option{color:#666}



@media (max-width: 768px) {	
.player_btn{font-size:12px; padding:5px 10px;  }
.player_btn button, .player_btn select { padding:0 7px; border-radius:3px; margin:0 2px;}
}