@charset "utf-8";
/*reset*/
* {margin:0;padding:0;border:none;text-decoration:none;list-style:none;border-radius:0;box-sizing:border-box;}
.sound_only {display:none;}
.line {text-decoration:underline;}
img {display:block;}
html,body {height:100%;max-height:100%;}
body {background:#dae0e6;font:300 14px/14px 'Noto Sans KR', sans-serif;color:#292929;width:100%;letter-spacing:-0.03em;}
/*contents*/
#wrap {max-width:100%;width:800px;margin:20px auto;}
#modal_bg,#modal_bg2 {position:fixed;background:rgba(0,0,0,0.50);width:100%;height:100%;left:0;top:0;z-index:1100;display:none;}
#modal_bg2 {z-index:1300;background:#000;}
#modal_bg2 img {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;}
#about {float:left;width:250px;background:#fff;border:1px solid #ccc;position:relative;}
h2 {background:#545452;color:#fff;font:500 24px/24px 'Noto Sans KR', sans-serif;padding:10px 20px;height:50px;}
#about>div {padding:18px;position:relative;}
#host_img {border-radius:50%;width:60px;height:60px;}
#host_name,#host_address {position:absolute;left:90px;top:45px;font-size:20px;font-weight:500;}
#host_address {margin-top:20px;font-size:14px;font-weight:300;color:#7c7c7c;}
#host_address+p {margin:18px 0 15px;font-size:13px;line-height:140%;}
#best_talk {font-weight:400;border-top:1px solid #edeff1;padding:15px 0 10px;}
#best_talk a {position:absolute;color:#a2a2a2;margin:-5px 0 0 -2px;padding:5px;}
#best_talk a:hover {color:#292929;}
#rank {counter-reset:li}
#rank li {counter-increment:li;margin-left:20px;margin-top:3px;width:calc(100% - 40px);position:relative;}
#rank li::before {content: counter(li);color:#e7e7e7;display:inline-block;width:1em; margin-left:-1.5em;margin-right:0.5em; text-align:right;direction:rtl;font-weight:700;}
#rank .ri-feedback-line {color:brown;}
#rank .hidden .count, #rank .hidden .ri-feedback-line {display:none;}
#rank i {color:#ccc;font-weight:100;padding:0 2px;}
#rank .count {position:absolute;right:-15px;top:0;font-size:9px;}
#state+ul {border-top:1px solid #edeff1;margin-top:15px;padding-top:15px;overflow:hidden;}
#state+ul li {margin-right:20px;text-indent:15px;}
#state+ul i {color:#cbcbcb;position:absolute;text-indent:0;margin:0 0 0 -15px;}
#state+ul .gray {font:10px/10px tahoma,sans-serif;color:#D0D0D0;display:inline-block;padding:0 10px 4px;text-indent:0;}
#chat {float:right;width:540px;position:relative;}
#chat h2 {border:none;padding-top:13px;}
#chat h2 a {position:absolute;color:#fff;left:0;top:0;height:50px;width:40px;padding-top:12px;}
#chat h2 #about_bt {display:none;}
#chat h2 .right_bt {left:auto;right:0;text-align:center;margin-right:10px;}
#chat h2 .right_bt:hover,#about_bt:hover {color:coral;}
#chat h2 #set_bt {right:40px;}
#chat article {background:#fff;border:1px solid #ccc;padding:20px;margin-top:5px;}
#chat h2+article {margin-top:0;border-top:none;}
#chat article p {position:relative;}
#chat .client {font-size:20px;font-weight:500;line-height:120%;}
#chat .client:not(:first-child) {border-top:1px dashed #ccc;padding-top:10px;margin-top:15px;}
#chat date {font-size:10px;color:#7c7c7c;font-weight:300;margin-left:10px;display:inline-block;letter-spacing:0.05em;padding-top:5px;}
#chat date+span {position:absolute;right:0;}
#chat .host {padding-left:45px;font-size:14px;color:#4a4a4a;font-weight:400;margin-top:15px;}
#chat .host_img {border-radius:50%;width:30px;height:30px;position:absolute;left:0;}
#chat .host .talk {background:#f3f3f3;padding:8px 15px 10px;border-radius:3px;display:inline-block;line-height:150%;}
#chat .host .talk::before {content:"";width:0;height:0;border:8px solid #f3f3f3;border-left:none;border-top:6px solid transparent;border-bottom:6px solid transparent;position:absolute;margin-left:-21px;}
#chat .host .talk a {color:inherit;display:block;}
#chat .host .talk a:hover {text-decoration:underline;}
#chat .host2 {padding-left:45px;}
#chat .host2 a {border:1px solid #bcbcbc;background:#f7f7f7;padding:10px;margin:10px 10px 0 0;display:inline-block;border-radius:3px;color:#4a4a4a;font-weight:400;}
#chat .host2 a:hover,#chat .host2 a:active {background-color:#4a4a4a;color:#f7f7f7;}
#chat .host2 a:last-child {margin-right:0;}
#chat .system {font-size:13px;text-align:center;color:#9f4545;margin:15px 0;line-height:150%;}
#chat>div {margin-top:5px;border:1px solid #ccc;border-radius:0 0 2px 2px;position:relative;margin-bottom:10px;}
#chatbox {width:calc(100% - 64px);height:45px;padding:0 20px;font:300 14px/14px 'Noto Sans KR', sans-serif;box-sizing:border-box;outline:none;}
#chatbox:focus {border:2px solid #888;-webkit-appearance:none;}
#sub_bt {position:absolute;display:block;right:0;top:0;height:45px;width:64px;font:400 14px/14px 'Noto Sans KR', sans-serif;color:#fff;background:#b7b7b7;cursor:pointer;}
footer {clear:both;padding:30px 0;color:#8a8a8a;}
footer li {text-align:center;}
footer li a {color:#8a8a8a;display:inline-block;padding:10px 0;}
footer li a#email_bt {padding:10px 5px 10px 2px;transform:translateY(2px);}
footer li a:hover {color:#000;}
#email {position:fixed;background:rgba(0,0,0,0.40);width:100%;max-width:100%;height:100%;left:0;top:0;z-index:1000;display:none;}
#email h2 {background:transparent;color:#333;font-size:20px;padding:10px 0;}
#email ul {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:600px;overflow:auto;background-color:#fff;padding:30px;box-sizing:border-box;max-width:90%;max-height:80%;}
#email li:nth-child(2) {font-size:13px;margin:10px 0 15px;color:#777;line-height:150%;}
#email li:nth-child(n+3) {}
#email label {display:block;font:400 13px/13px 'Noto Sans KR', sans-serif;color:#777;}
#email input,#email textarea {display:block;border:2px solid #eee;width:100%;margin:5px 0 20px;box-sizing:border-box;outline:none;font:400 13px/16px 'Noto Sans KR', sans-serif;color:#333;padding:10px;-webkit-appearance:none;}
#email input:focus, #email textarea:focus {border:2px solid #162a48;box-shadow:none;}
#email textarea {height:100px;}
#email button {background:#eee;outline:none;font:400 16px/16px 'Noto Sans KR', sans-serif;color:#333;width:100%;padding:10px 0;border-radius:5px;}
#email button:hover {background:#333;color:#eee;}
/*animation*/

@-webkit-keyframes scaling-dots {
  0%, 100% {-webkit-transform:scale(0);transform:scale(0);}
  40%, 60% {-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes scaling-dots {
  0%, 100% {-webkit-transform:scale(0);transform: scale(0);}
  40%, 60% {-webkit-transform: scale(1);transform: scale(1);}
}
.scaling-dots {display:grid;grid-gap:5px;grid-template-columns:repeat(5, 10px);justify-content:center;padding:20px;}
.scaling-dots div {-webkit-animation:scaling-dots 1s infinite ease backwards;animation:scaling-dots 1s infinite ease backwards;background:#ccc;border-radius:100%;height:10px;width:10px;}
.scaling-dots div:nth-child(1) {-webkit-animation-delay:.1s;animation-delay:0.1s;}
.scaling-dots div:nth-child(2) {-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.scaling-dots div:nth-child(3) {-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.scaling-dots div:nth-child(4) {-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.scaling-dots div:nth-child(5) {-webkit-animation-delay:0.5s;animation-delay:0.5s;}

/*Responsive*/
@media screen and (max-width:810px) {
	#wrap{margin:0;width:100%;}
	#about {position:absolute;top:0;transform:translateX(-100%);z-index:1200;transition:ease all .3s;height:100%;border:none;}
	#about.on {transform:translateX(0);}
	#about h2 {display:none;border:none;}
	#chat h2 {text-align:center;border:none;}
	#about #chat_bt {display:block;}
	#chat {width:100%;transition:ease all .3s;}
	#chat h2 #about_bt {display:block;}
	#chat>div {border:none;width:calc(100% - 20px);margin:auto;}
	#chatbox {width:100%;display:block;margin:10px 0;border-radius:7px;}
	#sub_bt {position: static;display:block;width:100%;border-radius:7px;}
}