@charset "euc-kr";

.after:after {display:block; content:''; clear:both;}
#contents h2{clear:both; width:100%; font:bold 116% "NanumGothicBold"; padding:0 0 5px 0;}
#wrap{width:100%; background:#ebecee;}
#head{overflow:hidden; /*width:910px;*/ padding:0 20px 0 20px; box-sizing: border-box; position: relative;}
.assembly{background:#0098dd;}
.record{background:#65b400;}
.live{background:#fc8001;}
#head h1{/*float:left; width:865px;*/ margin:0 auto; text-align:center; font:bold 175%/60px "NanumGothicBold"; color:#fff; letter-spacing:-1px;}
#head h1 span{display:inline-block; padding:0 15px 0 0; vertical-align:middle; font:bold 140%/60px arial; vertical-align:top;}
#head .close{/*float:right; padding:19px 0 0 0;*/ position: absolute; right: 20px; top: 18px; z-index: 2;}
#contents{overflow:hidden; width:910px; padding:30px 20px 30px 20px;}
#contents .left{float:left;width:419px;min-height:350px;padding: 11px 9px 11px 9px;background:#fff;border:1px solid #d1d3d6;}
#contents .right{float:left;  width:440px; padding:0 0 0 20px;}
#contents .bottom{clear:both; width:100%; padding:10px 0 0 0;}

#vodplayer{width:419px; height:231px; background:#000; position:relative;}
#vodplayer #mediaplayer{width:419px; height:231px; background:#000;}
#vodplayer .control{overflow:hidden; width:414px; padding:5px 0 5px 5px; background:#000;text-align:center;}
#vodplayer .control .slider{width:96%;display:inline-block;height:2px;margin:10px 0 10px 0;}
#vodplayer .control .slider .ui-slider-handle { height:8px }
#vodplayer .control li{float:left;}
#vodplayer .control li.format{float:right;}
#vodplayer .logo{float:left; padding:15px 0 0 0;}
#vodplayer .logo em{float:left;}
#vodplayer .logo .faq{float:right; padding:14px 0 0 0;}
#vodplayer .logo_new{overflow:hidden; width:100%; padding:7px 0 0 0;}
#vodplayer .logo_new em{float:left;}
#vodplayer .logo_new .faq{float:right; padding:4px 0 0 0;}
.vjs-audio-button { display:none; }

#caption_area .info {float: left;padding: 5px 10px 0;font-family: 'Noto Sans KR';font-size: 14px;}

#vodplayer{margin:0 0 10px;}
.SNS{position:static; float:right;}
.logo{float:left;}
#caption_area{float:left;width:100%;margin:10px 0 0;position: relative;background:url(/images/common/ico_util.png) no-repeat -105px 0;}
#caption_area #caption_control {z-index:55;position:absolute;top: 5px;right: 22px;width: 22px;}
#caption_area #caption_control a {background:url(/images/common/ico_util.png) no-repeat -105px 0;}
#caption_area #caption_control .btn_plus { background-position: -5px -4px;}
#caption_area #caption_control .btn_minus { background-position:-77px -3px;}
#caption_area #caption_control a{position:relative; display:block; width:100%;height: 25px; font-size:0; text-indent:-9999px; border:1px solid #ccc; box-sizing:border-box;}
#caption_area #caption_control .btn_add{margin:-1px 0 0 0; background-position:5px -68px;}
#caption_area #caption_control .btn_stop.on{background-position:7px -102px;}
#caption_area #caption_control a:hover,
#caption_area #caption_control a:active,
#caption_area #caption_control a:focus{z-index:1; border-color:#555; background-color:#f7f7f7;}

.util > ul{position:relative; float:right;}
.util > ul > li{float:left;}
.util > ul > li + li{margin:0 0 0 7px;}
.util .bt_print,
.util > ul > li > button{display:block; width:49px; height:49px; background:#394051 url(/images/common/ico_print2.png) no-repeat center; font-size:0; text-indent:-999px;}
.util .bt_print:hover,
.util > ul > li.on > button,
.util > ul > li > button:hover{background-color:#00a77e;}
.util .bt_font{background-image:url(/images/common/ico_font.png);}
.util .bt_size{background-image:url(/images/common/ico_size.png);}
.util .bt_between{background-image:url(/images/common/ico_between.png);}

.util .list{opacity:0; visibility:hidden; position:absolute; top:42px; right:0; width:104px; height:210px; box-sizing:border-box; padding:0 0 35px; transition:.5s;}
.util .on .list{opacity:1; visibility:visible; top:52px;}
.util > ul > li:not(:nth-child(2)) .list ul{overflow-y:scroll; height:100%;}
.util .list ul::-webkit-scrollbar{width:5px;}
.util .list ul::-webkit-scrollbar-thumb{background-color:#9f9f9f; border-radius:8px;}
.util .list ul::-webkit-scrollbar-track{background-color:#d2d2d2; border-radius:8px;}

.util .list button{display:block; width:100%; height:35px; line-height:35px; box-sizing:border-box; padding:0 0 0 10px; background:#00a77e; color:#fff; text-align:left; font-size:14px;}
.util .list ul li + li button, 
.util .list .bt_origin{border-top:1px solid rgba(255,255,255,0.2);}
.util .list button:hover{background:#006c51;}

.util .list .bt_origin{position:absolute; bottom:1px; left:0; padding:0; text-align:center;}

.util .bt_font + .list{width:160px;}
.util .list .gl{font-family:'GulimChe', '±¼¸²Ã¼';}
.util .list .du{font-family:'DotumChe', 'µ¸¿òü';}
.util .list .gs{font-family:'GungsuhChe','±Ã¼­Ã¼';}
.util .list .ng{font-family:'Nanum Gothic', '³ª´®°íµñ';}
.util .list .nm{font-family:'Nanum Myeongjo', '³ª´®¸íÁ¶';}

#member{margin:0 0 17px 0;}
#member .profile{overflow:hidden; width:439px; padding:6px 19px 6px 10px; border:1px solid #d1d3d6; background:#fff; font:bold 105% "NanumGothicBold";}
#member .info{float:left; width:340px;height:102px;}
#member .info dt{float:left;}
#member .info dt img{width:81px; height:102px;}
#member .info dd{float:left; width:169px; padding:10px 0 0 18px;}
#member .info dd ul li{padding:0 0 4px 8px; background:url(/images/view/bul_dotGray.gif) no-repeat 0 5px;}
#member .info dd ul li.end{border-bottom:1px solid #d1d3d6; margin:0 0 5px 0;}
#member .info dd ul li.btn{padding:0; background:none;}

#member .qr{float:right;}
#member .qr dt{padding:10px 0 9px 0;}

#angun .list{width:468px; height:213px; border:1px solid #d1d3d6; background:#fff; overflow-y:auto;}
#angun .list ul{width:435px; padding:7px 8px 0 8px;}
#angun .list ul li{overflow:hidden; width:435px; line-height:24px; border-bottom:1px solid #ededed;}
#angun .list ul li a{float:left; width:340px;}
#angun .list ul li span{float:right;}
/*#angun .list ul li .on{font:bold 100% "NanumGothicBold"; color:#9c3fd4;}*/
#angun .list ul li .on{font-family:"NanumGothicBold";font-size:105%;font-weight:bold; color:#9c3fd4;}


#assembly .con{width:888px; height:180px; padding:5px 0 5px 20px; border:1px solid #d1d3d6; background:#fff; font:normal 120%/150% "NanumGothic"; overflow-y:auto;}

#live .list{width:478px;height:340px;border:1px solid #d1d3d6;background:#fff;overflow-y:auto;}
#live .list ul{width:435px; padding:7px 8px 0 8px;}
#live .list ul li{overflow:hidden; width:435px; line-height:24px; border-bottom:1px solid #ededed;}
#live .list ul li a{float:left;}
#live .list ul li span{float:right;}
#live .list ul li .on{font:bold 100% "NanumGothicBold"; color:#9c3fd4;}

#noinfo {display:block;line-height:6.5em;font-size:130%;}
#officialinfo {display:none;line-height:6.5em;font-size:130%;}
#profileinfo {display:none;}
#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9,#b10,#b11,#b12,#b13,#b14,#b15,#b16,#b17,#b18,#b19,#b20,#b21,#b22,#b23,#b24,#b25,#b26,#b27,#b28,#b29,#b30,#b31,#b32,#b33,#b34,#b35,#b36,#b37,#b38,#b39,
#b40,#b41,#b42,#b43,#b44,#b45,#b46,#b47,#b48,#b49,#b50{color:#afafaf;font-weight:normal;}

#vodplayer button, input, select {
	outline: none;
	background:none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: 0;
	margin: 0;
	padding: 0;
	display: inline-block;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	font-family:Dotum, sans-serif;
	letter-spacing:-0.3px;
	vertical-align:middle;
	cursor:pointer;
	color:#fff;
}

#captionoptioninit{float: right;border: 1px solid #fff!important;padding: 5px!important;border-radius: 5px!important;    margin: -5px 25px 0 0!important;}


#vodplayer p.sns_tit{font-size:17px;  font-weight:700; color:#fff; margin:0px 0px 5px 10px;}
#vodplayer .SNS{position:static; float:right; padding:17px 5px 0 0;}

#caption_area #caption {padding: 9px 12px; padding-right:30px; background: #272822; color: #fff; box-sizing: border-box;}

#captionbuttonarea {float: left;margin: 15px 0 0 4%;}
#captionbuttonarea button {font-family: 'Noto Sans KR';width: 64px;background: #6d6d6d;color: #fff;border-radius: 5px;font-size: 12px;height: 30px;line-height: 30px;box-sizing: border-box;}
#captionbuttonarea #captionoptioncontrol {text-indent: -999px;background: #fff url(/images/cast/ico_setting2.png)no-repeat center center;width: 30px;height: 30px;padding: 0;}
#captionbuttonarea .displayNone {display:none;}

#captionoption_area {position: absolute;width: 96%;top: 1vh;left: 2%;background: rgba(0,0,0,0.4);z-index: 10;padding: 10px;box-sizing: border-box;}
#captionoption_area .list {clear: both;margin: 0 0 5px 0;}
#captionoption_area .list p {margin: 6px 0;color:#fff;font-size:14px;}
#captionoption_area .list ul li {float: left; border-radius:5px;}
#captionoption_area .list button:hover,
#captionoption_area .list button:active,
#captionoption_area .list button:focus{border-color: #2CF5ED;color: #2CF5ED;font-weight:600;}

#captionoption_area .list button {background:none;color:#fff;width: 100%;font-size: 12px;padding: 6px 0;margin: 0 5px 0 0;box-sizing: border-box;border: 1px solid #fff;border-radius: 5px;}
#font-dropdown-menu li {width: 19%;margin: 0 1% 0 0;box-sizing: border-box;}
#captionoption_area .list #line-height-dropdown-menu li {border-radius: 30px;margin: 0 2% 0 0;width: 30px;height: 30px;/* border: none; */}
#captionoption_area .list #line-height-dropdown-menu button {text-indent: -999px;width: 100%;border: none;}

#font-size-dropdown-menu li {width: 15%; margin: 0 1% 0 0;}
#font-size-dropdown-menu li button {font-size: 13px !important;}

#vodplayer #captionoptionclose {color: #fff;position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;display: block;text-indent: -999px;background: url(/images/cast/ico_close.png) no-repeat; font-size: 0;}

.redBg {background: red;}
.orangeBg {background: orange;}
.yellowBg {background: yellow;}
.greenBg {background: green;}
.blueBg {background: blue;}
.grayBg {background: gray;}
.blackBg {background: black;}
.whiteBg {background: white;}

a.sns_l {width: 28px; height: 28px; background-size: contain;}

@media screen and (max-width:1024px){
	/*#contents .right  {display:none;}
	#contents .right {
		display: block;
		float: none;
		width: 100%;
		padding: 0px;
		margin-top: 10px;
	}
	#live .list {
		width: 100%;
		box-sizing: border-box;
	}*/

	#head h1 {/*padding:15px 10px;*/ font-size:18px; box-sizing:border-box;}
}
@media screen and (max-width:797px) {
     #wrap {width:100%; min-width:320px;}
     #head {position:relative; width:100%; padding:0 40px; box-sizing:border-box;} 
     #head h1 {width:100%; float:none;line-height:30px; padding:15px 10px;}
     #head h1 span {line-height:30px; padding-right:0; margin-right:3px;}
     /*#head .close {float:none; position:absolute; top:50%; margin-top:-12px; right:10px; padding:0;}*/

     #contents {width:98%; padding:5px; margin:0 auto; box-sizing:border-box;}
     #contents .left {overflow:hidden; width:100%; height:auto; padding-bottom:20px; margin:0 0 20px; box-sizing:border-box;}
     #vodplayer {float:none; height:auto; width:100%;}
     #vodplayer .control {width:100%; box-sizing:border-box;}
	 #vodplayer .logo,
	 #vodplayer .SNS{padding:10px 0 0 0;}
	 #vodplayer .logo img{height:32px;}
     #vodplayer #mediaplayer {width:100%;}

     #contents .right {float:none; width:100%; padding:0; margin-top:0px;}
     #live .list {width:100%; box-sizing:border-box;}	 

	 #captionbuttonarea {margin-top:10px;}
}

@media all and (max-width:400px){
	#vodplayer .logo img{height:28px;}
    #captionbuttonarea {float: right;}
    #vodplayer .SNS {}

	#captionoption_area .list p {line-height:1;}
	#font-dropdown-menu li {width:32%;margin: 1% 1% 0 0;}
	#font-size-dropdown-menu li {width:14%}
}