@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
address, big, cite, code, del, dfn, em, font, img, ins, 
q, s, samp, small, strike, strong, sub, sup, tt, var, b, 
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:none 0; font-family:'Dotum', 'Noto Sans Korean'; font-weight:normal} /글자 없앰
h1, h2, h3, h4, h5, h6 {font-size:12px}
img, fieldset, iframe {border:0 none}
table, div {border-collapse: collapse; font-size:12px}
textarea {overflow:auto; outline-style:none; font-family:'Dotum', 'Noto Sans Korean'}
select, input, img, li {vertical-align:middle; text-align:left;  font-family:'Dotum', 'Noto Sans Korean'; outline-style:none} /폰트크기12없앰, 글자 순서
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal}
ul, li, ol {list-style-type:none}
legend, caption {display:none}
hr {border-collapse:collapse; display:none}
a { text-decoration:none; cursor:pointer; color:#222}
html, body {width:100%; height:100%}
body {background:#FFF; font-size:12px; color:#222}
.sound_only {display:none}


#um_sub_wrap {overflow:hidden; width:840px; margin:0px}
	
.sub_title_wrap {overflow:hidden; border:1px solid #dadada}
	/* .sub_title_wrap span {display:block; padding:15px 23px; background:#f9f9f9; border-bottom:1px solid #dadada; color:#5f5f5f; font-size:16px; font-family:'Noto Sans Korean'; font-weight:600}*/
	.sub_title_con {overflow:hidden; padding:15px 23px; background:#f9f9f9; border-bottom:1px solid #dadada}
		.sub_title_con div {float:left}
		.sub_title_con div img {margin-right:10px}
	.sub_title_box {overflow:hidden; float:left; padding:16px 23px; line-height:135%}
		.sub_title_box li {float:left; margin-right:10px; font-size:11px; color:#9f9f9f; cursor:pointer}
		.sub_title_box li:hover {color:#222}
		.sub_title_box font {font-size:11px; font-weight:bold; color:#a0a0a0}
		.sub_title_box font b {font-weight:bold; color:#4684e7}
	.sub_title_wrap label {float:right; margin:10px 23px 0 0; padding:6px 15px; color:#4684e7; font-size:11px; border:1px solid #cccccc; border-radius:3px; cursor:pointer}
		.sub_title_wrap label:hover {text-decoration:underline}

	.sub_more {float:right; margin:50px 23px 0 0; font-size:11px; color:#575757; text-decoration:underline; cursor:pointer}
	.sub_more:hover {color:#222}

.sub_con_wrap {margin-top:12px}
	.sub_item_box {overflow:hidden; margin-bottom:11px}
	 	.sub_item_box li {float:left; width:202px; border:1px solid #dadada; margin-left:8px}	
		.sub_item_box li:first-child {margin-left:0px !important}

		.item_img {position:relative; width:202px; height:184px; background:url('./img/item_pattern.gif')}
			.item_img div {position:absolute; bottom:75px; left:50%; margin-left:-35px}
			.item_img span {position:absolute; bottom:39px; width:100%; text-align:center; font-weight:bold; color:#303030}
			.item_img span font {font-size:11px; color:#4684e7; font-weight:bold}
		.item_text {overflow:hidden; padding:16px; border-top:1px solid #ececec; border-bottom:1px solid #dadada}
			.item_text span {float:left; display:block; font-size:11px; color:#7d7d7d}
			.item_text code {float:left; display:block; margin:32px 0 14px 0; font-size:11px; color:#da4a50; font-weight:bold}
			
			.item_add {overflow:hidden; float:right; margin-top:23px; }
				.item_add label {float:left; display:block; padding:5px 3px; border:1px solid #dadada; font-size:16px; color:#9c9c9c; cursor:pointer}
				.item_add label:hover {color:#eb2629}
				.item_add div {float:left; padding:7px 13px 8px 13px; border-top:1px solid #dadada; border-bottom:1px solid #dadada; font-size:11px}

		.item_btn {overflow:hidden; padding:9px 0 9px 88px}
			.item_btn div {float:left; padding:5px 14px; color:#3b3b3b; border:1px solid #a0a0a0; cursor:pointer}
			.item_btn div:hover {text-decoration:underline}




#um_sub_wrap {position:relative; width:840px; margin:0px}
.y_scroll {overflow-y:scroll; height:470px}
/*대기실목록타이틀*/
.chat_wait_people {float:left; width:26%}
	.wait_people_title {overflow:hidden; padding:11px; background:#55babd; border:1px solid #2ea7ab;}
	.wait_people_title div {float:left; margin-top:-1px}
	.wait_people_title span {float:right; display:block; width:28px; height:14px; margin-top:-1px; padding-top:2px; background:#da4a50; border:1px solid #cb2c32; color:#fff; font-size:11px; text-shadow: 1px 1px 1px #c7292f; border-radius:8px; text-align:center}

/*대기실리스트*/
.wait_people_box {}
.wait_people_con {overflow:hidden; padding:10px 12px; border-bottom:1px solid #efefef}
	.wait_people_con div {overflow:hidden; float:left; width:32px; height:32px; margin-right:8px; background:#fff; border-radius:16px; border:1px solid #d2d2d2; cursor:pointer}
	.wait_people_con:hover {background:#fafafa}
	.wait_people_con span {display:block; float:left; margin-top:10px; font-size:11px; color:#666666; font-weight:bold;  cursor:pointer}

.caht_wait_wrap {float:right; width:74%} 
/*채팅방타이틀*/
	.chat_title {width:100%; font-size:11px}
		.chat_title tr td {padding:12px 11px}
		.chat_title tr td:first-child {width:80%; background:#4684e7; color:#fff; border:1px solid #3171d6; border-right:0px none}
		.chat_title tr td:last-child {width:20%; background:#55babd; text-align:center; border:1px solid #2ea7ab; border-left:0px none; cursor:pointer}
		.chat_title tr td:last-child:hover {background:#56b1b4}
		.chat_title span {display:inline-block; margin-right:2px; cursor:pointer} 
		.chat_title span:hover {text-decoration:underline}
		.chat_title font {font-weight:bold}

/*대기실리스트*/
	.chat_wait {width:100%; border-left:1px solid #dadada}
		.chat_wait tr:hover {background:#f6f8fe}
		.chat_wait th,td {border-bottom:1px solid #efefef}
		.chat_wait th {width:50%; padding:14px 5px 14px 17px ; cursor:pointer}
		.chat_wait td {width:50%; padding:14px 17px 14px 0px ; text-align:right}
		.chat_wait th span {display:block; overflow:hidden; float:left; width:48px; height:48px; border:1px solid #d9d9d9; border-radius:24px}

		.chat_wait td span {display:block; float:left; margin:18px 0 0 10px; color:#919090 }
		.chat_wait td font {color:#59b5b8}
		.chat_wait td div {float:right}
		.chat_wait td label {display:block; float:left; margin:7px 0 0 10px}
		.chat_wait td pre {display:block; float:left; margin:16px 0 0 10px; cursor:pointer}
		.chat_wait td pre img {margin-top:-3px}
		.chat_wait td pre b {margin-left:6px; font-weight:bold}
		.chat_wait td code {display:block; float:left; margin-left:10px; padding-top:17px; width:48px; height:31px; border:1px solid #d9d9d9; border-radius:24px; background:#fff; text-align:center; font-size:11px; font-weight:bold; color:#646464; cursor:pointer}
		.chat_wait td code:hover {color:#4684e7; text-decoration:underline; border:1px solid #b1b1b1 !important}

		.chat_wait_title {overflow:hidden; float:left; margin:9px 0 0 17px}
			.chat_wait_title label {display:block; font-weight:bold; color:#4c4c4c}
			.chat_wait_title code {display:block; float:left; font-size:11px; color:#a1a1a1; margin:5px 9px 0 0}
			.chat_wait_title font {font-weight:bold; color:#55babd}

/*채팅방닫기*/	
	.chat_foot {overflow:hidden; width:95.5%; height:12px; padding:5px 2%; border:1px solid #797979; background:#979797}
		.chat_foot:hover {background:#787878}
		.chat_foot div {float:left; font-size:11px; color:#fff; text-shadow: 1px 1px 1px #606060;}
		.chat_foot div img {margin-top:-3px}
		.chat_foot code {float:right; margin-top:-2px; cursor:pointer}

/*대기실사람리스트 닫기*/
.list_foot {background:#474747; border:1px solid #2b2b2b}
	.list_foot:hover {background:#303030}


/*오른쪽 대기실/내정보 버튼*/
	.right_btn {position:absolute; top:380px; right:-60px}
		.right_btn li {overflow:hidden; width:48px; height:31px; margin-bottom:10px; padding-top:17px; border-radius:24px; text-align:center; border:1px solid #c12329; background:#da4a50; color:#fff; font-size:11px; text-shadow: 1px 1px 1px #ae191f; cursor:pointer}
		.right_btn li:hover {background:#c7383e}
		.right_btn li:last-child {background:#535353; border:1px solid #292929; text-shadow: 1px 1px 1px #202020}
		.right_btn li:last-child:hover {background:#3b3b3b}

/*내정보*/
.chat_mypage {overflow:hidden; position:absolute; top:422px; right:0px; width:179px; height:76px; padding:17px 15px; background:url("./img/chat_mypage_bg.png")no-repeat}
	.chat_mypage label {overflow:hidden; float:left; width:44px; height:44px; margin:3px 16px 0 0; background:#fff; border-radius:22px; border:1px solid #d2d2d2; cursor:pointer}
	.chat_mypage div {float:left}
	.chat_mypage_name span {display:block; width:106px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px dotted #cbcbcb; font-weight:bold; color:#535353}
	.chat_mypage_name code {display:block; margin-bottom:1px; color:#535353; font-size:11px}
	.chat_mypage_name font {color:#55babd}
	.chat_mypage pre {position:absolute; top:19px; right:25px; display:block; width:9px; height:8px; background:url('./img/chat_mypage01.gif')no-repeat; z-index:9; cursor:pointer}
	.chat_mypage pre:hover {background:url('./img/chat_mypage02.gif')no-repeat}




/*대화방*/
.caht_room_wrap {float:right; width:74%}

/*채팅방 타이틀*/
.room_title {width:100%; color:#fff;}
	.room_title td {width:50%; font-size:12px; background:#4684e7; border:1px solid #3171d6; border-right:0px none}
		.room_title td span {overflow:hidden; display:block; float:left; width:44px; height:44px; margin:0px 8px 0 0; cursor:pointer}
		.room_title td div {margin-top:15px; font-weight:bold}

	.room_title th {width:50%; padding:12px 11px; font-size:11px; background:#55babd; border:1px solid #2ea7ab; border-left:0px none; }
		.room_title th code {display:block; float:left; margin-left:7px}
		.room_title th code:first-child {margin-left:0}	
		.room_title th font {font-weight:bold}

/*채팅방대화*/

.room_chat {overflow-y:scroll; height:379px; padding:12px; border-left:1px solid #979797; text-align:left}
	.room_chat span{display:block; width:97.7%; padding:7px 0}
	.room_chat span code {font-weight:bold}	
	.room_chat span label {float:left; display:block; margin:-7px 3px 0 0 }

.chat_loin { margin:1% 0%; padding:5px 0; color:#fff; font-weight:bold; background:#979797; border:1px solid #838383; text-align:center}
.chat_result {margin:1% 0%; padding:8px 0; color:#fff; background:#ff8813; border:1px solid #ff6000; text-align:center}
.chat_star { margin:0.5% 0%; padding:8px 0; text-align:center}
	.chat_star img {margin:-7px 2px 0 0}
	.chat_star font {font-weight:bold}
	.chat_star b {color:#da4a50; font-weight:bold}

/*채팅방 아이템*/
.room_item {width:100%; border-top:1px solid #dadada; border-bottom:1px solid #979797; border-right:1px solid #979797; border-left:1px solid #979797;font-size:11px}
	.room_item thead th {padding:5px 1%; width:27%; text-align:left; background:#f1f6fe; border-bottom:1px solid #979797 }
		.room_item thead th div {font-size:11px; font-weight:bold; color:#6a6a6a}
		.room_item thead th code {display:block; float:left; margin:6px 9px 0 0; font-weight:bold}
		.room_item thead th font {float:left; color:#4684e7; font-weight:bold; }
		.room_item thead th label {float:left; display:block; width:24px; height:19px; padding-top:5px; color:#da4a50; font-weight:bold; border-radius:12px; border:1px solid #a8a8a8; background:#fff; text-align:center}
		.room_item thead th b {float:left; display:block; margin:6px 0 0 8px; font-weight:bold}

	.room_item thead td {padding:10px 0.5%; border-left:1px solid #dadada; text-align:center; color:#898989; cursor:pointer; border-bottom:1px solid #979797}
	.room_item thead td:hover {text-decoration:underline; color:#5b5b5b}
	.room_item thead td img {margin:-3px 5px 0 0}
	.room_item thead td:last-child {font-weight:bold; color:#4684e7}

/*대화입력*/
.room_send {overflow:hidden; padding:1%; background:#f2f2f2; text-align:center; border-right:1px solid #979797; border-left:1px solid #979797}
	.room_send_block {float:left; display:block; width:90%; padding:6px 1%; border:1px solid #c7c7c7;}
	.room_send div {float:left; width:3%; padding:6px 2%; background:#404040; border:1px solid #292929; cursor:pointer}
	.room_send div:hover {background:#151515} 
	

/*방장픽 통계*/
.room_pick_wrap {float:left; width:26%}

.room_pick_title {overflow:hidden; padding:11px 11px 10px 11px; background:#535353; color:#fff; border:1px solid #434343;}

.room_pick_box {height:498px; border-left:1px solid #dedede}


/*감옥*/
.prison {width:100%}
.prison tbody tr td {padding:15px 20px}
.prison tbody tr td {background:#566273; color:#fff; border:1px solid #566273}
	.prison tbody tr td code {display:inline-block; margin-right:5px; cursor:pointer}
	.prison tbody tr td code:nth-child(2n) {color:#7f8794}
	.prison tbody tr td code:hover {text-decoration:underline}

	.prison tbody tr {width:100%; border:1px solid #d8d8d8}
	.prison tbody tr th {padding:15px 20px; background:#f7f7f7; font-weight:bold; color:#575757}
	.prison tbody tr th:last-child {border-right:1px solid #d8d8d8}

	.prison tfoot tr {border:1px solid #d8d8d8} 
	.prison tfoot tr td {padding:15px 20px}


/*출석체크*/
.attend_title {overflow:hidden; padding:25px 0 0 342px; }
	.attend_title span {float:left; display:block; width:14px; height:14px; margin:8px 15px 0 0; background:url('./img/attend_left.gif'); cursor:pointer}
	.attend_title span:hover {background:url('./img/attend_left_1.gif')}
	.attend_title div {float:left; font-size:20px; font-family:'Noto Sans Korean'; color:#4684e7; letter-spacing:-1px}
	.attend_title label {float:left; display:block; width:14px; height:14px; margin:8px 0 0 15px; background:url('./img/attend_right.gif'); cursor:pointer}
	.attend_title label:hover {background:url('./img/attend_right_1.gif')}

.attend_con {width:100%; margin:30px 0; padding:11px 0; text-align:center; border-left:1px solid #cfcfcf; border-right:1px solid #cfcfcf;}
	.attend_con tr th {padding:11px 0; color:#828282; font-family:'Noto Sans Korean'; background:#ededed; border-bottom:1px solid #cfcfcf; border-top:2px solid #cfcfcf}
	.attend_con tr td {position:relative; width:110px; height:100px; border:1px solid #cfcfcf;}
	.attend_con tr td div {position:absolute; top:11px; left:15px; font-family:'Noto Sans Korean'; font-weight:11px; font-weight:300; color:#777777} 
	.attend_con tr td code {position:absolute; bottom:11px; right:15px; width:62px; height:61px; background:url('./img/attend_o.jpg')}
	.attend_con tr td span {position:absolute; bottom:11px; right:17px; width:62px; height:61px; background:url('./img/attend_x.jpg')}

.attend_memo {width:838px}
	.attend_memo thead th {border:1px solid #1b2b44; padding:10px 20px; background:#21324c}
	.attend_memo thead th div {float:left; margin:7px 20px 0 0; color:#fff}
	.attend_memo thead th span {float:right; display:block; padding:7px 20px 8px 20px; color:#fff; text-align:center; font-weight:bold; background:#0d77ec; cursor:pointer}
	.attend_memo thead th span:hover {text-decoration:underline}

	.attend_input {width:615px; padding:5px 10px; border:2px solid #bcbcbc}
	.attend_memo tbody {border:1px solid #cfcfcf; text-align:center}
	.attend_memo tbody th {padding:15px 0; border-bottom:1px solid #cfcfcf; background:#f7f7f7; font-weight:bold; color:#464646}
	.attend_memo tbody th img {float:right}
	.attend_memo tbody td {padding:15px 0; color:#878787; border-bottom:1px solid #cfcfcf;}