@import url(common.css);

body {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;}

/* layout */
#w-wrap {font-size:1em; font-family:Tahoma, Geneva, sans-serif}
.pc #w-bdy {font-size:13px; border:1px solid #6abec6}
/* header */

.pc #header {height:80px; background-image:url(../images/logo.png); background-size:auto}
#header {position:fixed; top:0; left:0; width:100%; height:80px; background-image:url(../images/m/logo.png); background-repeat:no-repeat; background-color:#6abec6; background-position:10px 12px; background-size:auto 20px; z-index:100}
#header>div {position:relative}
.ios #header>div {position:relative; margin-top:30px}
.ios #header {height:110px; background-position:10px 40px; background-image:url(../images/m/logo.png); background-size:auto 20px}

.pc #header .ctr-bar {display:block; position:absolute; top:10px; right:12px; width:80px; z-index:50}
.pc #header .ctr-bar>li {float:right; margin-left:5px}
.pc #header .ctr-bar>li a {display:block; width:18px; height:18px; background-image:url(../images/ctr_bar.png); opacity:0.8}
.pc #header .ctr-bar>li a:hover {opacity:1}
.pc #header .ctr-bar .min {background-position:0 0}
.pc #header .ctr-bar .max {background-position:0 -18px}
.pc #header .ctr-bar .cls {background-position:0 -36px}
#header .ctr-bar {display:none}

.pc #header .lnb > li .lnb_01{ background-image:url(../images/lnb_01.png)}
.pc #header .lnb > li .lnb_02{ background-image:url(../images/lnb_02.png)}
.pc #header .lnb > li .lnb_03{ background-image:url(../images/lnb_03.png)}
.pc #header .lnb > li .lnb_04{ background-image:url(../images/lnb_04.png)}

#header .lnb {position:absolute; top:42px; left:12px; z-index:50}
#header .lnb > li {position:relative; float:left; width:45px}
#header .lnb > li .lnb_01{ background-image:url(../images/m/lnb_01.png)}
#header .lnb > li .lnb_02{ background-image:url(../images/m/lnb_02.png)}
#header .lnb > li .lnb_03{ background-image:url(../images/m/lnb_03.png)}
#header .lnb > li .lnb_04{ background-image:url(../images/m/lnb_04.png); opacity:1}

#header .lnb > li a {display:block; width:30px; height:30px; opacity:0.6; background-repeat:no-repeat; background-size:contain; text-indent:-9999px}
#header .lnb > li a:hover {opacity:1}
#header .lnb > li.on a  {opacity:1}
#header .lnb > li span {position:absolute; display:block; right:0; top:-8px; min-width:24px; padding:0 5px; line-height:20px; text-align:center; border:2px solid #6abec6; border-radius:12px; font-weight:400; color:#441614; background:#ffd820}

#header .gnb {position:absolute; top:44px; right:12px; width:150px; z-index:10 }
#header .gnb>li {float:right; margin-left:5px}
.pc #header .gnb>li .gnb_01{ background-image:url(../images/gnb_01.png)}
.pc #header .gnb>li .gnb_02{ background-image:url(../images/gnb_02.png)}
.pc #header .gnb>li .gnb_03{ background-image:url(../images/gnb_03.png)}
#header .gnb>li .gnb_01{ background-image:url(../images/m/gnb_01.png)}
#header .gnb>li .gnb_02{ background-image:url(../images/m/gnb_02.png)}
#header .gnb>li .gnb_03{ background-image:url(../images/m/gnb_03.png)}
#header .gnb>li a {display:block; width:30px; height:30px; opacity:0.6; background-repeat:no-repeat; background-size:contain; text-indent:-9999px}
#header .gnb>li a:hover, #header .gnb .on a {opacity:1}

#w-hdr {position:relative; width:100%; height:30px; z-index:100}
#w-hdr .ctr-bar {display:none}
#w-hdr .back {position:absolute; top:10px; left:10px; z-index:100}

.pc #w-hdr {position:absolute; top:0; left:0; width:100%; height:30px; z-index:100}
.pc #w-hdr .ctr-bar {display:block; position:absolute; top:10px; right:12px; width:80px }
.pc #w-hdr .ctr-bar>li {float:right; margin-left:5px}
.pc #w-hdr .ctr-bar>li a {display:block; width:18px; height:18px; background-image:url(../images/ctr_bar2.png); opacity:0.5}
.pc #w-hdr .ctr-bar>li a:hover {opacity:1}
.pc #w-hdr .ctr-bar .cls {background-position:0 -36px}
.ios #w-hdr {padding-top:30px; margin-top:20px}
.ios #w-hdr .ctr-bar {display:none}

/* login */
.ios .naver {display:none}
.bg {position:absolute; top:0; left:0; right:0; bottom:0; background-color:#96d1d7; z-index:1}
.logo_big {width:100%; height:180px; padding-top:60px; margin-bottom:40px; box-sizing:content-box; text-indent:-9999px; background-image:url(../images/logo_big.png); background-size:60%; background-repeat:no-repeat; background-position:center bottom}
.login h1 {text-align:center}
.login_box {width:70%; margin:0 auto}
.login_box ul {margin-bottom:1%}
.login_box .ipt li { margin-bottom:5px}
.login_box .ipt input {width:100%; height:30px;}
.login_box .chk {height:30px}
.login_box .chk li {float:left; width:50%}
.login_box .btn li {margin-bottom:8px}
.login_box .btn input[type=submit] {width:100%; height:40px; font-size:14px; font-weight:700; border:none; border-radius:5px; color:#fff; background:#3b5999}
.login_box .btn input[type=button] {width:100%; height:40px; font-size:14px; font-weight:700; border:none; border-radius:5px; color:#fff; background:#1fbc02}
.login_box .btn2 li {float:left; width:50%; text-align:center}
.login_box .btn2 li input {width:90%; margin:0 auto; border:none; text-align:center; font-size:13px; background:transparent}

.ios .login_box .chk li:last-child {display:none}
.pc .naver {display:block} 

/* join */
#step1, #step2, #step3 {max-width:400px; margin:0 auto}
#step1 .logo_big {}
#step1 .naver input {font-weight:700; font-size:14px; color:#fff; border:1px solid #1a3; background:#1fbc02}
#step1 .naver span {display:inline-block; font-size:14px; color:#274848; margin-bottom:5px}
#step2 .logo_big {width:80%; max-width:400px; height:10px; margin:10px auto; background-image:url(../images/logo_big2.png); background-size:contain}
#step2 textarea {height:54px; width:100%; border:1px solid #ddd; background-color:#f4f4f4;}

.btn_area {width:70%; margin:5% auto; text-align:center;}
.btn_area ul {margin-bottom:15px}
.btn_area input[type=button] {font-weight:700; font-size:14px; border:1px solid #ddd; width:100%; height:40px; border-radius:10px; background-color:#fff}
.btn_area a {display:block; width:100%; line-height:40px} 

.btn_area2 {width:92%; height:50px; margin:0% 4%;}
.btn_area2 li {width:50%; height:40px; float:left}
.btn_area2 a { display:block; width:94%; line-height:40px; background:#fff; margin:0 auto; text-align:center}
.btn_area a.blue, .btn_area2 a.blue {color:#fff; background:#3b475d}

.input_area {border:1px solid #ddd; width:90%; margin:0 auto 20px; padding-top:10px; background:#fff}
.input_area li {width:90%; margin:2% 5% 5%;}
.input_area h2 {width:90%; margin:0 5% 1%;}

#step3 .logo_big {width:80%; max-width:400px; height:10px; margin:10px auto; background-image:url(../images/logo_big2.png); background-size:contain}
#step3 input[type=text], #step3 input[type=password] {height:48px; width:80%; border:0px; font-size:1.2em}
#step3 input[type=button] {background-color:#fff; height:36px; width:18%; border:1px solid #dcdcdc;}
#step3 {width:90%; margin:2% 5%}
#step3 ul {width:100%; margin:2% 0; border-top:1px solid #ddd; border-left:1px solid #ddd; background:#fff}
#step3 li {height:50px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding-left:10px;}

/* find_id */
.find {}
.find .find_box {width:90%; margin:0 auto; border:none; border-radius:10px; padding-top:0px; background:#fff}
.find .find_box h2 {width:90%; margin:2% auto; line-height:30px; padding-top:10px; border-top:1px solid #ddd;}
.find .find_box h2:first-child {border:none}
.find ul {width:90%; margin:2%  auto 20px; border-top:1px solid #ddd; border-left:1px solid #ddd; background:#fff}
.find ul li {height:40px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding-left:10px;}
.find input[type=text] {height:38px; width:80%; border:0px;}
.find input[type=button] {border:1px solid #dcdcdc; background-color:#ffffff; height:28px; width:18%;}
.find select {border:0px; height:38px; width:100%; background:#fff}
.find .btn {border:none; background:none}
.find .btn li{margin:0% 2%; width:94%; height:60px; border:none}
.find .btn a {display:block; text-align:center; line-height:40px; color:#fff; background-color:#3b475d}

.find .tab { width:90%; margin:0 5% 10px; height:40px}
.find .tab li {width:50%; height:40px; line-height:40px; text-align:center; float:left; background:#fff}
.find .tab li:first-child {border-radius:10px 0 0 10px}
.find .tab li:last-child {border-radius:0 10px 10px 0}
.find .tab .on {background-color:#3b475d;}
.find .tab .on a {color:#fff;}

/* rooms */
.room .price {margin:1% 3%; overflow:hidden}
.room .price > ul {min-width:320px; height:30px}
.room .price > ul:first-child { border-bottom:1px solid #ccc}
.room .price label {float:left; width:18%; line-height:30px; white-space:nowrap; font-size:0.9em}
.room .price li {float:left; width:34%; font-size:0.9em}
.room .price label:nth-child(3) {width:16%;}
.room .price li:nth-child(4) {width:32%}
.room .price li span {line-height:30px; font-weight:700}
.room .price li span:last-child {font-size:11px; padding-left:10px}
.room .list h2 {line-height:34px; padding-left:5px; background:#dedcd0}
.room .list li {position:relative; height:74px; border-bottom:1px solid #cdd; cursor:pointer}
.room .list li .mark {position:absolute; top:5px; left:5px; width:64px; height:64px; background-size:cover; background-position:center}
.room .list li .name {font-size:15px; height:40px; margin-bottom:4px; margin-left:80px; line-height:40px; color:#222}
.room .list li .sum {margin:0 15px 0 80px; padding:0 10px; font-size:12px; line-height:20px; border:none; border-radius:10px; color:#222; background-color:#f4f4f4}
.room .list li span {display:block; position:absolute; top:10px; right:15px; line-height:18px; font-size:12px; border:none; border-radius:3px; padding:0 3px 0 21px; text-align:right; background:url(../images/ico_num.png) no-repeat #e9e9ea 2px 3px}
.red {color:#e72d36}
.blue {color:#0377da}

/* chatlist */
.chatlist .list li {position:relative; height:74px; padding-top:8px; border-bottom:1px solid #cdd; cursor:pointer}
.chatlist .list li .title {width:calc(100% - 120px); margin-left:80px}
.chatlist .list li .title h2 {display:inline; min-width:120px; font-size:16px; line-height:30px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chatlist .list li .title ul {display:inline-block; position:relative;}
.chatlist .list li .read {display:block; position:absolute; top:7px; right:-60px; width:50px; font-size:12px; color:#d35742}
.chatlist .list li .mark {position:absolute; top:5px; left:5px; width:64px; height:64px; background-size:cover; background-position:center}
.chatlist .list li .con {width:60%; height:20px; margin:0 15px 0 80px; font-size:1em; color:#777; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chatlist .list li .con * {background:none !important; font-weight:normal !important; font-size:1em !important; color:#777 !important}
.chatlist .list li .alm {display:block; position:absolute; top:10px; right:10px; width:28px; height:28px; background-image:url(../images/ico_alarm.png); background-repeat:no-repeat; background-position:0 0; z-index:100}
.chatlist .list li .alm.off {background-position:0 -28px}
.chatlist .list li .num {display:block; position:absolute; top:45px; right:5px; line-height:18px; font-size:12px; border:none; border-radius:3px; padding:0 3px 0 21px; margin-left:10px; text-align:right; background:url(../images/ico_num.png) no-repeat #e9e9ea 2px 3px}

/* chat */
.ios #w-left {height:100px}
.ios #w-left .back {top:30px}
.ios #w-left .left {top:65px}
.ios #w-left .gnb {top:60px}
.ios #w-left #room_title {top:30px}
#w-left {height:80px; border-bottom:1px solid #ccc; background:#fff}
#w-left .back {position:absolute; top:10px; left:0; font-weight:bold; font-size:18px; display:block; width:150px; text-align:center; opacity:0.5}
#w-left #room_title {position:absolute; top:5px; left:30px; width:70%; height:30px; white-space:nowrap; overflow:hidden; font-size:1em; text-overflow:ellipsis; font-weight:600; cursor:default}
.pc #w-left {border-top:1px solid #aaa; border-left:1px solid #aaa; border-right:1px solid #aaa; border-bottom:1px solid #ccc}
.pc #w-left > a {display:none}
.pc #w-left #room_title {position:absolute; top:10px; left:10px; height:24px; font-size:18px; font-weight:400; cursor:default}
.pc #w-left .ctr-bar {position:absolute; top:10px; right:12px; width:70px; z-index:10}
.pc #w-left .ctr-bar>li {float:right; margin-left:5px}
.pc #w-left .ctr-bar>li a {display:block; width:18px; height:18px; background-image:url(../images/ctr_bar2.png); opacity:0.5}
.pc #w-left .ctr-bar>li a:hover {opacity:1}
.pc #w-left .ctr-bar .min {background-position:0 0}
.pc #w-left .ctr-bar .max {background-position:0 -18px}
.pc #w-left .ctr-bar .cls {background-position:0 -36px}
#w-left .left {position:absolute; top:45px; left:12px; z-index:10;}
#w-left .left #room_cnt { display:inline-block; padding:0 5px 0 20px; min-width:50px; text-align:right; line-height:20px; font-size:0.8em; border:none; border-radius:5px; cursor:default; 
background-color:#ddd; background-image:url(../images/ico_num.png); background-repeat:no-repeat; background-position:3px 4px}
#w-left .left #consult {display:none; padding:0 5px 0 20px; min-width:50px; text-align:right; line-height:20px; font-size:0.8em; letter-spacing:-0.1em; color:#322; border:none; border-radius:5px; cursor:default; 
background-color:#ffd91d; background-image:url(../images/ico_cst.png); background-repeat:no-repeat; background-position:5px 4px}
.pc #w-left #room_cnt, .pc #w-left #consult {font-size:12px}
#w-left .gnb {position:absolute; top:40px; right:12px; width:180px; z-index:10}
#w-left .gnb>li {float:right; margin-left:5px}
#w-left .gnb>li a {opacity:0.8; display:block; width:30px; height:30px}
#w-left .gnb>li a:hover {opacity:1; border:none; border-radius:15px; background-color:rgba(255,255,255,0.4)}

#list_box {display:none; position:absolute; margin-top:-1px; left:5px; width:80%; height:50%; border:1px solid #999; background:#f8f8f8; z-index:1000}
#list_box ul { height:100%; padding-top:10px; overflow-x:hidden; overflow-y:auto}
#list_box .me {float:none; max-width:none; clear:both; padding:2% 10%; margin:0; background-image:url(../images/ico_me.png); background-size:auto 60%; background-position:2% 7px}
#list_box li {padding:2% 10%; font-size:1em; background-repeat:no-repeat; background-size:auto; background-position:2% 8px}
#list_box .xpt {background-image:url(../images/cht_xpt.png)}
#list_box .mst {background-image:url(../images/cht_mst.png)}
#list_box .adm {background-image:url(../images/cht_adm.png)}
.pc #list_box .tail {background-image:url(../images/list_tail.png)}
.pc #list_box li {padding:2% 10%; margin-bottom:2%; font-size:12px; font-family:gulim}
.pc #list_box .me {background-size:auto 75%; background-position:5px 2px}
.pc #list_box .xpt {background-size:auto 75%; background-position:5px 3px}
.pc #list_box .mst {background-size:auto 75%; background-position:5px 2px}
.pc #list_box .adm {background-size:auto 75%; background-position:5px 3px}
#list_box .tail {position:absolute; top:-9px; left:20px; width:18px; height:9px; background-image:url(../images/m/list_tail.png); background-size:contain; z-index:10}

#req_box {display:none; position:absolute; width:80%; left:10px; margin-top:-1px; font-size:12px; padding:1%; background-color:#f8f8f8; border:solid 1px #777; z-index:100}
#req_box>ul {position:relative; padding:10px 0}
.pc #req_box .tail {background-image:url(../images/list_tail.png)}
#req_box .tail {position:absolute; top:-9px; left:85px; width:18px; height:9px; background-image:url(../images/m/list_tail.png); background-size:contain; z-index:10}
#req_box li {text-align:center; margin-bottom:5px}
#req_box li label {display:inline-block; margin:0 3%;}
#req_box li textarea {width:90%; height:100px}
#req_box li input[type=button] {width:90%; font-size:1.2em; line-height:2; font-weight:bold; color:#fff; border:none; border-radius:5px; background-color:#6abec6}

#icon_box {display:none; position:absolute; width:80%; height:50%; bottom:60px; right:20px; padding-top:25px; background-color:#fff; border:solid 1px #777; z-index:2000}
#icon_box li {width:calc(100% / 3); float:left; text-align:center; padding:5% 0}
#icon_box li img {width:80%}
#icon_box h2 {position:absolute; top:0; left:0; width:100%; height:25px; line-height:25px; text-align:center; border-bottom:1px solid #999; background-color:#fff; z-index:10}
#icon_box .cls {position:absolute; top:0; right:0; width:25px; line-height:25px; z-index:20; border:none; background:transparent}
#icon_box ul {height:100%; overflow-x:hidden; overflow-y:auto}

#divOut {position:absolute; top:0px; bottom:60px; width:100%; padding-top:10px; overflow-x:hidden; overflow-y:auto; background:#fff}
#divOut .img img {max-height:300px}
#divOut .img .tail {display:none}
.pc #divOut * {font-family:gulim; font-size:12px}
.pc #divOut .time {font-family:dotom; font-size:11px}
.pc #divOut .talk pre {padding:0 7px; background-image:url(../images/alarm_bl01.png); background-repeat:no-repeat; overflow:hidden; background-size:2px; background-position:left 7px}
.pc #divOut .alarm p {vertical-align:top}
.date {position:relative; width:92%; height:45px; margin:0 4%; clear:both}
.date ul {width:100%; height:12px; text-align:center; border-bottom:1px dashed #aaa}
.date ul li {display:inline-block; line-height:24px; padding:0 5px; color:#999; background:#fff; z-index:10}
.name {height:18px; line-height:18px; margin-bottom:3px}
.time {display:inline-block; font-size:11px; color:#999; margin-left:8px}
.talk {border-radius:3px; padding:8px 8px 8px 5px; line-height:1.5}
.other {clear:both; float:left; max-width:80%; padding-left:4%; margin-bottom:10px}
.other .talk {position:relative; float:left; width:100%; border:1px solid #ccc; background:#f5f5f5}
.other .talk .tail {position:absolute; top:5px; left:-8px; width:8px; height:8px; background-image:url(../images/tail.png); background-size:contain; z-index:10}
.xpt .name {padding-left:20px; color:#06c; font-weight:700; background:url(../images/cht_xpt.png) no-repeat }
.xpt .talk {border:1px solid #b3cce6; background-color:#eaf3fc}
.xpt .talk .tail {background-image:url(../images/tail_xpt.png)}
.adm .talk {border:1px solid #bbdec4; background-color:#f0faf3}
.adm .talk .tail {background-image:url(../images/tail_adm.png)}
.adm .name {padding-left:20px; color:#096; font-weight:700; background-image:url(../images/m/cht_adm.png); background-repeat:no-repeat; background-size:18px }
.pc .adm .name {padding-left:20px; color:#096; font-weight:700; background-image:url(../images/cht_adm.png); background-repeat:no-repeat}
.spt .name {padding-left:20px; color:#fa0; font-weight:700; background-image:url(../images/cht_spt.png); background-repeat:no-repeat; background-size:18px }
.mst .name {padding-left:20px; color:#f63; font-weight:700; background-image:url(../images/cht_mst.png); background-repeat:no-repeat; background-size:18px }
.mst .talk {border:1px solid #e9d0b1; background-color:#ffedd4}
.mst .talk .tail {background-image:url(../images/tail_mst.png)}

.mute .name {color:#999}
.mute .talk { border:1px solid #ddd}
.mute pre {color:#999}
.me {float:right; max-width:80%; clear:both; padding-right:4%; margin-bottom:10px}
.me .name { text-align:right;}
.me .talk {position:relative; float:right; border:1px solid #e4dd89; background:#fdfbd8}
.me .talk .tail { position:absolute; top:5px; right:-8px}
.alarm {position:relative; width:92%; line-height:1.5; min-height:30px; padding:7px 5px 5px 30px; text-align:left; margin:0 4% 3%; color:#3a3135; border:1px solid #c7e3e2; border-radius:5px; clear:both;
background-image:url(../images/alarm.png); background-repeat:no-repeat; background-color:#d5ecf0; background-position:3px 5px; background-size:20px}
.alarm p:first-child {display:inline-block}
.alarm img {width:100%}

#adm_box {display:none; position:absolute; left:10%; z-index:2000; background-color:white;border:solid 1px black}
#adm_box>ul {position:relative}
#adm_box>ul div {cursor:pointer; font-size:12px; line-height:1.5}
#adm_box #nic {background:#d5eff0}
#adm_box #memo {font-size:12px; color:#777}
#adm_box #cls {position:absolute; top:0; right:0; width:20px; text-align:center; color:#fff; font-weight:bold; background:#f21}
div[name=more] { padding-left:30px; color:#777; line-height:18px; background:url(../images/prev.png) no-repeat 9px 0}

#divOut .buy {border:1px solid #ecd2df; background-image:url(../images/alarm_buy.png); background-color:#fae1ed}
#divOut .sell {border:1px solid #bacfe1; background-image:url(../images/alarm_sell.png); background-color:#d4dff2}
#divOut .evt {border:1px solid #e9d0b1; background-image:url(../images/alarm_evt.png); background-color:#ffedd4}

.talk_box {position:fixed; bottom:0; width:100%; height:40px; background:#fff; z-index:100}
.talk_box>ul {width:100%; margin:0 auto}
.talk_box .text {position:relative; float:left; width:100%; padding-right:80px}
.talk_box .text textarea {width:100%; height:40px; border:none; border-top:1px solid #ccc}
.talk_box .menu {position:absolute; top:0; right:0; z-index:10}
.talk_box .menu ul {float:left}
.talk_box .menu input[type=button] {width:40px; height:40px; border:none; border-top:1px solid #ccc; background-image:url(../images/m/btn_emo.png); background-repeat:no-repeat; background-size:70%; background-color:#f1f1f1; background-position:center}
.talk_box .file label {position:relative; cursor:pointer; display:block; overflow:hidden; border-top:1px solid #ccc; width:40px; height:40px; background-image:url(../images/m/btn_pic.png); background-repeat:no-repeat; background-color:#f1f1f1; background-size:70%; background-position:center; z-index:10}
.talk_box .file label input {position:absolute; width:0; height:0; overflow:hidden; z-index:1}
.talk_box .file input[type=text] {position:absolute; display:block; width:0; height:0; border:none; margin-top:-10px; margin-left:-10px}
.talk_box .btn {display:none; position:absolute; top:0; right:0; width:80px; height:40px; z-index:100}
.talk_box .on {display:block}
.talk_box .btn input[type=submit] {width:100%; height:40px; border:none; background:#f1f1f1}
.talk_box .on input[type=submit] {background:#6abec6; color:#fff}

.pc .talk_box {position:fixed; bottom:1px; width:calc(100% - 2px); height:60px; padding-top:5px; border-top:1px solid #ccc; background:#fff; z-index:100}
.pc .talk_box>ul {width:90%; margin:0 auto}
.pc .talk_box .text {width:85%; padding-right:30px}
.pc .talk_box .text textarea {width:100%; height:50px; border:none}
.pc .talk_box .menu {position:absolute; top:0; right:4px}
.pc .talk_box .menu ul {float:none}
.pc .talk_box .menu input[type=button] {width:23px; height:23px; border:none; background-image:url(../images/btn_emo.png); background-repeat:no-repeat; background-size:90%; background-color:#f1f1f1; background-position:center}
.pc .talk_box .file {padding-top:4px}
.pc .talk_box .file label {position:relative; cursor:pointer; display:block; overflow:hidden; width:23px; height:23px; background-image:url(../images/btn_pic.png); background-repeat:no-repeat; background-color:#f1f1f1; background-size:90%; background-position:center; z-index:10}
.pc .talk_box .file label input {position:absolute; width:0; height:0; overflow:hidden; z-index:1}
.pc .talk_box .file input[type=text] {position:absolute; display:block; width:0; height:0; border:none; margin-top:-10px; margin-left:-10px}
.pc .talk_box .btn {display:block; position:static; float:left; width:15%}
.pc .talk_box .btn input[type=submit] {width:100%; height:50px; border:none; border-radius:5px}

.droid .talk_box .text {position:relative; float:left; width:100%; padding-right:40px}
.droid .talk_box .file {display:none}


/* chat_sub */
.pc #s-hdr {height:40px; border-left:1px solid #6abec6; border-right:1px solid #6abec6;}
.pc #s-hdr a {top:10px; left:auto; right:10px; width:18px; height:18px; background-image:url(../images/ctr_bar2.png); background-position:0 -36px; background-size:100%; opacity:0.5}
.pc #s-hdr a:hover {opacity:1}
.pc #s-hdr h2 {padding-left:15px; font-size:16px; font-weight:700; line-height:40px}
#s-hdr {position:fixed; top:0; left:0; width:100%; height:50px; background:#dedcd0; z-index:100}
#s-hdr a {position:absolute; display:block; top:12px; left:5px; width:150px; height:30px; background-image:url(../images/back.png); background-repeat:no-repeat; background-size:auto 75%; opacity:0.5; z-index:10}
#s-hdr h2 {padding-left:30px; font-size:18px; font-weight:700; line-height:50px}
.ios #s-hdr {height:80px; padding-top:30px}
.ios #s-hdr a {top:43px;}

.c-arm {position:absolute; top:50px; bottom:20px; width:100%; margin-top:0; overflow-x:hidden; overflow-y:auto; background:#fff; z-index:1}
.ios .c-arm {top:70px}
.pc .c-arm {top:40px}
.c-arm>ul {border:1px solid #ccc; margin:0 2% 3%; padding:1% 1%; border-radius:5px}
.c-arm>ul h2 {margin-bottom:5px; line-height:24px; padding-left:25px; font-size:0.9em; color:#777; border-bottom:1px solid #ccc;
background-image:url(../images/alarm.png); background-repeat:no-repeat; background-position:0 3px; background-size:20px}
.c-arm>ul.buy h2 {border:none; border-radius:3px; background-image:url(../images/alarm_buy.png); background-color:#fae1ed}
.c-arm>ul.sell h2 {border:none; border-radius:3px; background-image:url(../images/alarm_sell.png); background-color:#d4dff2}
.c-arm>ul.evt h2 {border:none; border-radius:3px; background-image:url(../images/alarm_evt.png); background-color:#ffedd4}
.c-arm>ul li {margin-bottom:10px; padding:0 2%}

.pc .c-arm>ul li pre {font-family:gulim; font-size:12px !important}
.c-arm>ul li pre {font-size:1em !important}

.c-lead {position:absolute; top:50px; bottom:0px; width:100%; margin-top:0; overflow-x:hidden; overflow-y:auto; background:#fff; z-index:1}
.pc .c-lead {top:40px}
.ios .c-lead {top:70px}

.lead {width:96%; margin:50px 2%}
.lead th {border-bottom:1px solid #222; text-align:right; font-size:12px; line-height:1.8}
.lead td {border-bottom:1px solid #ccc; padding:5px 0; font-size:12px; text-align:right}
.lead .kind {width:20%; text-align:left}
.lead .kind .k0 {padding:0 5px; color:#fff; background:#3eaa20}
.lead .kind .k1 {padding:0 5px; background:#ffb400}
.lead .kind .k2 {padding:0 5px; color:#fff; background:#f1183b}
.lead .stk {width:25%; text-align:left; padding-left:1px; }
.lead .stk span:first-child { position:absolute; white-space:nowrap}
.lead .stk span:last-child {color:#777}
.lead .buy {width:25%}
.lead .loss { color:#23c}
.lead .pro {width:18%}
.lead .pro .up { color:#f31}
.lead .pro .dn { color:#06f}
.lead .con {width:12%}
.lead .dti {display:none; }
.lead .dti td {text-align:left; padding:5px}
.lead .btn_dti {padding:0 5px; background:#eee}

.c-edu {position:absolute; top:80px; bottom:0px; width:100%; overflow-x:hidden; overflow-y:auto; background:#fff; z-index:1}
.pc .c-edu {top:80px}
.ios .c-edu {top:110px}

#dList ul {position:relative; min-height:54px; border-bottom:1px solid #ddd; padding:10px 5%; font-family:gulim}
#dList ul.on {padding-top:3%; background-color:#f8f8f8}
#dList ul li {font-size:0.9em}
#dList ul li h2 {width:90%; white-space:nowrap; overflow:hidden; font-size:1em; text-overflow:ellipsis;}
#dList ul li span {display:inline-block; margin-right:5px; padding-right:5px; color:#777; border-right:1px solid #ddd}
#dList ul li span:last-child {border:none}
#dList .on h2 {font-size:1.2em; font-family:Nanum Gothic; font-weight:700; margin-bottom:5px}
#dList #dView span {display:inline; margin-right:0; padding-right:0; border:none}
#dView {}
#dView table, #dView iframe {width:100% !important}
#dView table * {font-size:4vw !important}
#dView img {max-width:100% !important; height:auto !important}
#dView_title {padding:2% 3%; font-size:1.2em}

.mnu {position:fixed; top:50px; left:0; width:100%; height:39px; border-bottom:1px solid #ccc; background:#fff; z-index:10}
.mnu>ul {position:relative}
.mnu>ul li {position:absolute; top:0px; left:0; width:100%; text-align:center; z-index:10}
.mnu a {display:inline-block; padding:0 5px; margin:0 5px; line-height:36px;}
.pc .mnu {top:40px}
.pc .mnu a { font-size:13px;}
.ios .mnu {top:70px}
.mnu a.on {border-bottom:3px solid #19a59d; font-weight:700; color:#00a097}


/* notice */
.notice_list dl { min-height:50px; overflow:hidden; border-bottom:1px solid #ccc}
.notice_list dl dt {position:relative; height:50px}
.notice_list dl dt a {position:absolute; top:0; left:0; width:8%; height:50px; background:url(../images/ntc_bg.png) #f4f4f4 no-repeat center top}
.notice_list dl dt p {display:inline-block; font-size:15px; line-height:50px; padding-left:10%; color:#222}
.notice_list dl dt span {display:inline-block; line-height:18px; font-size:12px; color:#777; margin-left:10px; text-align:right}
.notice_list dl dd {display:none; padding:5px 20px 30px 20px; border-top:1px solid #ddd; background:#f8f8f8}
.notice_list dl dd img {max-width:100%; height:auto !important}
.notice_list .on a {position:absolute; top:0; left:0; width:8%; height:50px; background:url(../images/ntc_bg.png) #f4f4f4 no-repeat center -50px}
.notice_list .on dd {display:block}

/* cfg_arm*/
#cfg_arm input[type=checkbox] {width:24px; height:24px; }
.carm {width:90%; margin:1% 5%; height:35px; }
.carm h2 {float:left}
.carm li {float:right; width:50%; height:30px; line-height:30px}
.carm input {display:block; float:left; width:50%; line-height:30px; border:1px solid #ccc; border-radius:0 5px 5px 0; background:#fff}
.carm input:first-child {border-radius:5px 0 0 5px}
.carm .on {background-color:#3b475d; color:#fff; border:1px solid #3b475d;}
#cfg_arm .off {background:#eee; opacity:0.8}
#cfg_arm select:disabled {opacity:0.5}
#cfg_arm {display:none}

.set_box {margin:0 5%}
.set_box li {width:90%; margin:1% 5%; height:35px; clear:both}
.set_box li label {display:block; float:left; width:60%; line-height:35px}
.set_box li p {display:block; float:left; width:40%; line-height:35px; text-align:right}
.ios .set_box .arm_sound {display:none}
.pc .set_box .arm_wave {display:none}
.set_box .arm_push {display:none}
.pc .set_box .arm_push {display:block}
#cfg_pw {padding-left:8%; border-bottom:1px solid #ddd; padding-bottom:10px}
#cfg_pw h2 {display:none}
#cfg_pw label {display:inline-block; width:110px; line-height:20px; margin-bottom:5px}
#cfg_pw input {width:100px; line-height:20px; margin-bottom:5px}

/* info */
.info {width: 90%; padding: 30px 0; margin:0 auto}
.info .tit {height:30px; background:#e4dfd3}
.info .tit h2 {line-height:30px; font-size:1.1em; font-weight:400; padding-left:5px; margin-bottom:3%}
.info .lst {padding-top:10px; margin:0 3%}
.info .lst li {line-height:2; border-bottom:1px solid #ccc; cursor:pointer}
.info .lst li:last-child {border-bottom:none}
.info .lst li span {float:right; color:#999}
.info .rank {margin-bottom:3%}
.info .rank table {width:100%; box-sizing:border-box}
.info .rank th {height:28px; border-bottom:1px solid #999}
.info .rank td {text-align:right; font-size:0.9em; padding-right:3%; line-height:2; border-bottom:1px solid #ccc}
.info .rank tr:last-child td {border-bottom:none}
.info .rank td.num {text-align:center}
.info .rank td.item {text-align:left;}
.info .rank td.item span {color:#000}
.info .rank .up span { color:#f31}
.info .rank .dn span { color:#06f}

.info .rank2 {margin-bottom:3%}
.info .rank2 table {width:100%; box-sizing:border-box}
.info .rank2 th {height:28px; border-bottom:1px solid #999}
.info .rank2 td {text-align:right; font-size:0.9em; padding-right:3%; line-height:2; border-bottom:1px solid #ccc}
.info .rank2 tr:last-child td {border-bottom:none}
.info .rank2 td.num {text-align:center}
.info .rank2 td.item {text-align:left;}
.info .rank2 td.item span {color:#000}
.info .rank2 .up span { color:#f31}
.info .rank2 .dn span { color:#06f}

.info .rank4 {margin-bottom:3%}
.info .rank4 table {width:100%; box-sizing:border-box}
.info .rank4 th {height:28px; border-bottom:1px solid #999}
.info .rank4 td {text-align:right; font-size:0.9em; padding-right:3%; line-height:2; border-bottom:1px solid #ccc}
.info .rank4 tr:last-child td {border-bottom:none}
.info .rank4 td.num {text-align:center}
.info .rank4 td.item {text-align:left;}
.info .rank4 td.item span {color:#000}
.info .rank4 .up span { color:#f31}
.info .rank4 .dn span { color:#06f}

.info .review {margin-bottom:3%}
.info .market {margin-bottom:3%}
.info .humor {margin-bottom:3%}
.info .humor .lst {margin:0 5%; padding-left:10px;}
.info .humor li {float:left; width:50%; max-width:200px; overflow:hidden}
.info .humor li img {width:80%}
.info .humor li .h-tit {width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inf_tit {line-height:2; margin:0 3%; padding-left:5px; border-bottom:1px solid #777}
.pc .inf_tit {font-weight:700}
/* resize */
.pc .resize-l { position:fixed; top:0; left:0; width:5px; height:100%; background:url(../images/trans.png); z-index:100; cursor:e-resize}
.pc .resize-r { position:fixed; top:0; right:0; width:5px; height:100%; background:url(../images/trans.png); z-index:100; cursor:e-resize}
.pc .resize-t { position:fixed; top:0; left:0; width:100%; height:5px; background:url(../images/trans.png); z-index:100; cursor:s-resize}
.pc .resize-b { position:fixed; bottom:0; left:0; width:100%; height:5px; background:url(../images/trans.png); z-index:100; cursor:s-resize}
.pc .resize-se {position:fixed; bottom:0; right:0; width:16px; height:16px; background:url(../images/resize.png); z-index:200; cursor:se-resize}

/* cfg */
.s-menu ul{cursor:pointer;} 

/*jquery ui*/
.pc .ui-tooltip {border:1px solid #114499; background-color:#ffffcc; background-image:none;}
.ui-tooltip-content {font-size:11px; font-family:'돋움'}

.ht {position:absolute; top:0; left:0; width:100%; height:100%; cursor:default; z-index:1}
.back {display:block; width:40px; height:30px; text-indent:-999px; background-image:url(../images/back.png); background-repeat:no-repeat; background-size:contain; opacity:0.5; z-index:10}
.back:hover {opacity:1}
.pc .back {position:absolute; top:10px; left:5px; width:30px; height:30px; background-size:18px}
.nodata {text-align:center; padding-top:40%}

/* memo */
.memo dt {position:relative; height:30px; padding-left:30px; line-height:30px; border-bottom:1px solid #cbd7de; background-image:url(../images/alarm.png); background-repeat:no-repeat; background-color:#d4e9f2; background-position:3px 5px; background-size:20px}
.memo dt h2 {display:inline-block; padding-right:5px}
.memo dt span {color:#777}
.memo .cls {position:absolute; top:5px; right:5px; display:block; width:18px; height:18px; background-image:url(../images/ctr_bar2.png); background-position:0 -36px; opacity:0.5}
.memo dd {padding:5px}


@media only screen and (min-width: 768px) {
    .logo_big {width: 400px; margin: 0 auto; padding-top: 0;}
    .login_box {width: 420px; margin: 0 auto; padding: 50px 10px}
}