@charset "utf-8";

/* basic */
body { margin:0; padding:0; word-wrap:break-word; word-break:break-all; -webkit-text-size-adjust:none; font-size:12px; }
div, p, span { margin: 0px; padding: 0px; word-break:keep-all; word-wrap:break-word; }
ul,li { list-style:none; padding:0; margin:0; }
h1,h2,h3,h4,h5 { margin:0; padding:0; }
table, th, td { margin: 0px; padding:0px; border: 0px; border-collapse:collapse; font-family:Dotum; font-size:12px; }
input { border:1px solid #bbb; height:12px; padding:2px 5px; vertical-align:middle; font-size:12px; }
textarea { border:1px solid #bbb; }
select { border:1px solid #bbb; height:20px; vertical-align:middle; font-size:12px; padding-left:5px; behavior:url("###"); }
img { font-size:0; line-height:0; border:none; vertical-align:middle; }
a { text-decoration:none;color:#6c6c6c; }
caption { display:none; }

/* nanum gothic */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.main { background-color:#f5f5f5; }
.mg1 { margin-top:30px !important; }
.mg2 { margin-top:20px !important; }
.mg3 { margin-left:20px !important; }
.mg4 { margin-top:10px !important; }
.mgtop0 { margin-top:0 !important; }

ul.room { overflow:hidden; margin:20px 20px 20px 20px; }
ul.room li { float:left; width:23.5%; margin-left:2%; }
ul.room li.first { margin-left:0; }
ul.room li a { display:block; font-family:"NanumGothic","Nanum Gothic"; font-size:18px; color:#555; line-height:53px; text-align:center; border-radius:10px; background-color:#eee; }
ul.room li a.on, #contents ul.room li a:hover { font-weight:600; color:#fff; background-color:#f47509; }

ul.board { width:100%; }
ul.board li { overflow:hidden; font-family:"NanumGothic","Nanum Gothic"; font-size:16px; padding:0 10px; background:url('../images/common/dotted_line.jpg') repeat-x left bottom; }
ul.board li.talk { color:#222; line-height:27px; padding:10px 10px; }
ul.board li.talk2 { color:#222; line-height:27px; padding:10px 10px; text-align:center; }
ul.board li a { float:left; color:#444; line-height:51px; }
ul.board li a.talk_list { width:90%; }
ul.board li a span.talk_content { display:inline-block; max-width:90%;line-height:21px; vertical-align:middle;  }
ul.board li a span.color1 { color:#0aba2f; }
ul.board li a span.color2 { color:#006db8; }
ul.board li a span.color3 { color:#e31414; }
ul.board li a span.color4 { color:#ff5f01; }
ul.board li em { float:right; font-style:normal; color:#666; line-height:51px; }

div.page { position:relative; margin-top:20px; font-family:"NanumGothic","Nanum Gothic"; font-size:0; line-height:0; text-align:center; }
div.page a { display:inline-block; margin:0 8px; font-size:18px; color:#888; line-height:35px; }
div.page a.on, #contents div.page a:hover { font-weight:600; color:#ff5f01; }
div.page a.btn { position:absolute; top:0; right:20px; margin:0; font-weight:600; color:#fff; padding:0 30px; background:url('../images/common/button_bg.jpg') no-repeat left top; }

div.chat-div-list { width:99%; margin:0 auto; max-height:480px; overflow:auto; border-radius:10px; }
table.chat-list { width:100%; }
table.chat-list th { 
	width:30%;
	vertical-align:middle;
	font-family:"NanumGothic","Nanum Gothic";
	font-size:16px;
	font-weight:600;
	color:#444;
	padding:10px 0;
	text-align:left;
}
table.chat-list th span { color:#ff5f01; } 
table.chat-list td { 
	font-family:"NanumGothic","Nanum Gothic";
	font-size:15px; 
	color:#666; 
	padding:10px 0;
	text-align:left;
	vertical-align:middle;
	width:70%;
}

div.enter { padding:20px; font-size:0; line-height:0; background:url('../images/common/dotted_line.jpg') repeat-x left bottom; }
div.enter input { width:80%; margin-right:2%; height:57px; font-family:"NanumGothic","Nanum Gothic"; font-size:20px; color:#555; border-radius:10px; border:2px solid #ddd; vertical-align:top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
div.enter a { display:inline-block; width:18%; font-family:"NanumGothic","Nanum Gothic"; font-size:20px; font-weight:600; color:#fff; line-height:57px; text-align:center; border-radius:10px; background-color:#666; vertical-align:top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
div.enter button { border:none; display:inline-block; width:18%; font-family:"NanumGothic","Nanum Gothic"; font-size:20px; font-weight:600; color:#fff; line-height:53px; text-align:center; border-radius:10px; background-color:#666; vertical-align:top; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

@media screen and (max-width:1600px) {
	ul.board li a.talk_list { width:90%; }
	ul.board li a span.talk_content { max-width:1424px; }
}
@media screen and (max-width:1024px) {
	ul.board li a.talk_list { width:90%; }
	ul.board li a span.talk_content { max-width:830px; }
}
@media screen and (max-width:960px) {
	ul.board li a.talk_list { width:85%; }
	ul.board li a span.talk_content { max-width:730px; }
}
@media screen and (max-width:640px) {
	ul.board li a.talk_list { width:80%; }
	ul.board li a span.talk_content { max-width:430px; }
}

@media screen and (max-width:480px) {
	ul.board li { font-size:14px; padding:0 10px; }
	ul.board li.talk { line-height:21px; padding:10px; }
	ul.board li a { float:left; color:#444; line-height:40px; }
	ul.board li em { line-height:40px; }

	table.chat-list th { font-size:12px; }
	table.chat-list td { font-size:12px; }

	ul.room { margin:5px 5px 5px 5px; }
	ul.room li a { font-size:13px; line-height:28px; border-radius:5px; }
	
	div.enter { padding:10px; }
	div.enter input { height:39px; font-size:15px; border-radius:5px; border:1px solid #ddd; }
	div.enter a { font-size:15px; line-height:39px; border-radius:5px; }
	div.enter button { font-size:15px; line-height:39px; border-radius:5px; }
}
@media screen and (max-width:414px) {
	ul.board li a.talk_list { width:75%; }
	ul.board li a span.talk_content { max-width:230px; }
}
@media screen and (max-width:320px) {
	ul.board li a.talk_list { width:215px; }
	ul.board li a span.talk_content { max-width:150px; }
}