body { border:1px solid #3f434d}
#login input:not([type=checkbox]),
#login button,
#main input:not([type=checkbox]), 
#main button {border-radius:10px}

header.base {background-color:transparent}
header.base h1 {top:8px; width:34px; height:24px; text-indent:-9000px; background:url(../images/logo.png) no-repeat 0 0; background-size:auto 48px}
header.base .topBtn:after {content:''; display:block; position:absolute; top:9px; left:40px; width:1px; height:14px; background:#8f939c}
header.base .topBtn input {width:40px}

.pcOnly {display:none}
.pc .pcOnly {display:block}
.pc .mtopBtn {display:none}
.mtopBtn {display:block; position:absolute; right:0; top:0}
.mtopBtn input {width:30px; height:30px; font-size:2em; line-height:1; background-color:transparent}

/* chat */
.chatWrap header {height:70px; background-color:#2a2f37; box-shadow:none}
.chatWrap .topIcon {position:absolute; top:35px; right:10px; z-index:1}
.chatWrap .topIcon button {width:35px; height:35px; border:none; text-indent:-9000px; background-color:transparent; background-image:url(../images/ico_chat.png); background-position:5px 5px}
.chatWrap .topIcon button[name=pick].on {background-position:-20px 5px}
.chatWrap .topIcon button[name=push] {background-position:-70px 5px}
.chatWrap .topIcon button[name=push].on {background-position:-45px 5px}

.chatArea { height:calc(100vh - 140px); padding:20px 10px; overflow:hidden; overflow-y:scroll}
.chatArea > div {position:relative; margin-bottom:10px; padding-left:50px }
.chatArea > div:after {content:''; display:block; width:100%; height:1px; clear:both}
.chatArea > div figure { position:absolute; left:0; top:0; width:40px; height:40px; border:none; border-radius:50%; overflow:hidden}
.chatArea > div label {display:block; color:#fff; margin-bottom:10px }
.chatArea > div ul {clear:both}
.chatArea > div ul li {position:relative; display:inline-block; max-width:80%; background:#3f434d; margin-bottom:20px; padding:10px; border-radius:0 10px 10px 10px; color:#fff; text-align:left; word-break:keep-all; white-space:pre-line; line-height:1.6; word-wrap: break-word;}
.chatArea > div ul.pick li {width:calc(100% - 40px); max-width:100%; color:#3f434d; padding-bottom:40px; border-radius:10px; background:#fff}
.chatArea > div ul.pick li span {right:10px; bottom:8px}
.chatArea > div ul span {display:block; position:absolute; right:-80px; bottom:5px; width:80px; text-align:center; color:#99a;}
.chatArea > div.myChat ul li {float:right; border-radius:10px 0 10px 10px; background:#5c657b}
.chatArea > div.myChat ul span  {right:auto; left:-80px}

.chatWrap footer {position:fixed; left:0; bottom:0; width:100%; height:60px; background:#3f434d}
.chatWrap footer ul {position:relative;}
.chatWrap footer ul #sendTo {position:absolute; top:-28px; left:3px; width:110px; height:24px; background:#3f434d}
.chatWrap footer li {float:left; width:calc(100% - 70px)}
.chatWrap footer li:last-child {width:70px; text-align:center; padding-top:5px}
.chatWrap footer li:last-child input {width:60px; line-height:30px}
.chatWrap footer textarea {width:100%; height:60px; padding:5px; color:#fff; border:none; background-color:transparent}
.chatArea > p {color:#8f95a3; text-align:center; margin-bottom:10px}


/* login */
.login { height:calc(100vh - 40px); background:#2d2d2d}
.loginBox {padding-top:30px}
.pc .loginBox {padding-top:20px}
.loginBox h2 {width:110px; height:80px; margin:0 auto; text-indent:-9000px; background:url(../images/logo_b.png) no-repeat left top; background-size:cover}
.loginBox > ul {border:none; border-radius:20px; background:#373b46; overflow:hidden}
.loginBox .inputForm {position:absolute; left:12%; width:76%; padding:20px 0; border:none; z-index:10}
.loginBox .inputForm ul {margin-bottom:10px; color:#cdd1d4}
.loginBox .inputForm li {min-height:30px; margin-bottom:10px; clear:both}
.loginBox .inputForm li.pcOnly	{height:auto; margin-bottom:0}
.loginBox .inputForm input:not([type=checkbox]) {width:100%; height:46px; line-height:46px; border:none; padding-left:15px; margin-bottom:10px; background:#424242}
.loginBox .inputForm li > p {float:left; width:50%; line-height:30px}
.loginBox .inputBot {width:100%; padding-top:30px; text-align:center}
.pc .loginBox .inputBot {padding-top:20px}
.pc .loginBox .inputBot li {margin-bottom:5px}

.loginBox .inputBot li:last-child {padding-top:10px}
.loginBox .btn { display:block; width:100%; height:46px; margin:0 auto; text-align:center; line-height:50px; font-weight:600; font-size:18px; border:none}  
.lostPop {display:none}

/* main */
#main .container {padding-top:50px}
.accList {width:80%; margin:0 auto}
.accList ul li {position:relative; width:100%; height:46px; line-height:46px; border:1px solid #8f939c; color:#fff; padding-left:15px; margin-bottom:10px; background-color:transparent}
.accList ul li p {width:99%; float:left; font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.accList ul li span {display:block; position:absolute; top:10px; right:10px; min-width:40px; font-size:12px; line-height:24px; text-align:center; border-radius:10px; background:#09b33d}
.accList ul:after {content:''; display:block; width:100%; height:0px; clear:both}
.accList.ac2 ul li {float:left; width:calc(50% - 2px); padding-left:5px}
.accList.ac2 ul li:nth-child(odd) {margin-right:4px}
.accList.ac2 ul li span {right:5px; min-width:40px; padding:0 5px}

.accList.ac3 ul li {float:left; width:calc(100% / 3 - 3px); height:62px; margin-right:3px; padding-left:0; line-height:30px}
.accList.ac3 ul li:nth-child(3) {margin-right:0}
.accList.ac3 ul li p {float:none; text-align:center;}
.accList.ac3 ul li span {position:static; margin:0 auto}

.accList.ac4 ul li {float:left; width:calc(50% - 2px)}
.accList.ac4 ul li:nth-child(odd) {margin-right:4px}
.accList.ac4 ul li span {width:60px}

.accList .x-ready span {background:#3f434d}
.accList .x-finding span {background:#f57040}
.mainBox {width:80%; height:auto; margin:0 auto 30px; /*border-bottom:1px solid #3f434d*/}
.mainBox li {margin-bottom:10px; position:relative}
.mainBox .grd1 {width:100%; height:46px; line-height:46px; border:none; color:#2d2d2d; font-size:16px}
.mainBox .mainBtn {text-align:center}
.mainBox .mainBtn li {position:relative; display:block; float:left; width:calc(100% / 2 - 2px); height:40px; border-radius:10px; line-height:40px; margin-bottom:5px; border:1px solid #424242}
.mainBox .mainBtn li:nth-child(odd) {margin-right:4px}
.mainBox .mainBtn button{color:#fff; border:none; background-color:transparent}
.mainBox .mainBtn button:active {background:#555}
.mainBox .mainBtn:after {display:block; content:''; width:100%; height:1px; clear:both}
.stock_select {display:none; position:absolute; top:30px; right:0; width:100%; z-index:1000}
.stock_select ul {width:80%; margin:0 auto; padding:5px 5px; border:1px solid #3f434d; border-radius:5px; background:#536287; box-shadow:1px 1px 5px rgba(0,0,0,.3)}
.stock_select li {height:40px; line-height:40px; font-size:14px; color:#fff; padding:0 10px; white-space:nowrap; text-align:center}
.stock_select li:hover {border:1px solid #ff6801; background:#657599}
.w-bot {width:80%; margin:0 auto; padding-top:50px; text-align:center; color:#fff}
.w-bot li {margin-bottom:10px}
.w-bot li:first-child {display:none}
#main .menu {position:fixed; left:0; bottom:40px; width:100%; padding-left:2%}
#main .menu li{ float:left; width:calc(96% / 3); text-align:center;}

.alertify {color:#fff}
.alertify .ajs-dialog {background:#2d2d2d; border:1px solid #3f434d}
.alertify .ajs-header {background-color:#414243}
.alertify .ajs-body .ajs-content {font-size: 18px}
.alertify .ajs-body .ajs-content p {font-size:14px; padding-top: 10px}
.alertify .ajs-footer {background-color:transparent}
.alertify .ajs-footer .ajs-buttons .ajs-button {width: 240px; font-size: 18px; border:none; border-radius:5px; background-color:#657599; opacity: .8}
.alertify .ajs-footer .ajs-buttons button:last-child {font-weight: 600; color: #2d2d2d; background: #f6d13a; opacity: 1}
#frmChangepw {display:none}
#frmChangepw fieldset{ border: none; padding: 8px; color:black}
#frmChangepw fieldset label {display:block; float:left; width:40%; margin-bottom:10px; line-height:46px; color:#cdd1d4; text-align:left}
#frmChangepw fieldset input {display:block; float:left; width:60%; margin-bottom:10px; line-height:46px; border:1px solid #8f939c}
#frmChangepw fieldset button {width:100%; line-height:46px; font-size:1.2em}

/* login stock */
.pLayer {position:absolute; top:40px; left:0; bottom:0; width:100%; padding-top:30%; background-color:#2d2d2d; z-index:100; display:none}
.pLayer h1 {width:80px; height:80px; margin:0 auto; text-indent:-9000px; background:url(../images/logo_b.png) no-repeat left top; background-size:cover}
.pLayer h2 {margin:0 5% 10px; text-align:center; line-height:40px; font-size:1.2em; font-weight:500; color:#ff9537}
.pLayer ul li {height:46px; margin:0 10% 10px; text-align:center; margin-bottom:10px; color:#cdd1d4}
.pLayer ul li input:not([type=checkbox]):not([type=submit]), .pLayer ul li select {display:block; float:left; width:100%; height:46px; border:1px solid #ccc; padding-left:20px}
.pLayer ul li select{-webkit-appearance:none; padding-right:30px; background:url(../images/select.png) no-repeat right 3px center; background-size:20px; background-color:#2e323a}
.pLayer ul li input[type=submit] {width:100%; height:46px; padding:0; font-size:1.2em}
#popLogin {z-index:101}


/* common */
.grd1 {color:#2d2d2d; background:rgba(253,221,63,1)}
.grd1:hover {background:linear-gradient(125deg, rgba(253,221,63,1) 0%, rgba(246,209,58,1) 100%); transition:ease .5s}
.btn2 {width:100%; line-height:46px; border:1px solid #f8d73a; font-size:16px; font-weight:500; text-align:center; color:#f8d73a; background-color:transparent}


/* theme */
#theme nav {position:relative; width:100%; height:40px; background:#3f434d}
nav .menu {width:540px; height:inherit; margin-left:10px; padding-top:8px; font-size:16px}
nav .menu li {float:left; width:calc(100% /4); height:24px; line-height:24px; color:#fff; font-size:14px; text-align:center}
nav .menu .on { text-shadow:0px 1px 2px rgba(0,0,0,0.3); border:none; border-radius:15px; padding:0 10px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5) inset; background:#ff5c36}
nav .menu li a {font-weight:400}
nav .search {position:absolute; right:12px; top:8px; font-size:14px; color:#fff}
nav .search input[type=text] {width:200px; height:25px; padding-left:15px; border:none; border-radius:13px; background-color:#2d2d2d; background:linear-gradient(to bottom, #222 0%,  #2d2d2d 40%); vertical-align:top}
nav .search button {width:25px; height:25px; text-indent:-9999px; border:none; border-radius:50%; background-color:#2d2d2d; background-image:url(../images/ico_item.png); background-position:0 0; background-repeat:no-repeat; background-size:50px auto; vertical-align:top}
nav .search input[type=button] {width:25px; height:25px; text-indent:-9999px; border:none; border-radius:50%; background-color:#2d2d2d; background-image:url(../images/ico_item.png); background-position:0 0; background-repeat:no-repeat; background-size:50px auto; vertical-align:top}

.up, .s1, .s2 {color:#ff697b}
.dn, .s4, .s5 {color:#3eb4ff}

#theme section {display: block; float:right; width:calc(100% - 380px); margin:10px 10px 0 0}
#theme article {border-radius:10px}
#theme aside {float:left; width:350px; margin:10px 0 0 10px; border-radius:10px; padding-top: 0; background:#393d46}
 
.themeBox {color:#fff}
.themeBox .themeHead {height:40px; margin:0 5px; border-bottom:1px solid #6b707c; padding-top:4px; padding-right:10px} 
.themeBox .themeHead li {line-height:36px}
.themeBox .themeHead li.nam {padding-left:10px}
.themeBox .themeList {height:calc(100vh - 135px); overflow:hidden; overflow-y:scroll}
.themeBox ul {height:30px; margin:0 5px; cursor:pointer}
.themeBox ul.on {background:#262d3b}
.themeBox li {float:left; font-size:12px; line-height:30px; font-family:Gulim}
.themeBox .nam {width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.themeBox .nam span { display:inline-block; min-width:18px; height:17px; line-height:17px; margin-right:5px; text-align:center }
.themeBox .rat {width:16%; text-align:right}
.themeBox .upi {width:12%; text-align:right}
.themeBox .dni {width:12%; text-align:right}
.themeBox .avr {width:25%; text-align:right}

#dSearch {padding:5px 0; display:none}
#dSearch .search_title {width:90%; height:40px; margin:0 auto; line-height:40px; font-size:18px; border-bottom:1px solid #6b707c}
#dSearch .search_title span {font-size:14px}
#dSearch .search_result {width:100%; height:calc(100vh - 120px); padding:10px 5%; overflow-y:scroll}
#dSearch .search_thema dl {font-size:16px; margin-bottom:20px}
#dSearch .search_thema dt h2 {cursor:pointer}
#dSearch .search_thema dt * {display:inline-block; margin-right:10px}
#dSearch .search_thema dt label {font-size:13px; padding:0 5px; background:#5b606c}
#dSearch .search_thema dd p {display:inline-block; margin-right:10px}
#dSearch .search_thema .add {}
#dSearch .s-item {margin-bottom:30px; border-bottom:1px solid #6b707c; font-size:14px}
#dSearch .s-item h3 {position:relative; font-size:16px; margin-bottom:10px; color:#b9bbc7}
#dSearch .s-item h3:before {content:'ㆍ'}
#dSearch .s-item li {margin-bottom:20px; padding-left:12px}
#dSearch .s-item li span {padding-right:10px}
#dSearch .s-item .itm {font-size:16px; cursor:pointer}
#dSearch .s-item .itm + p {font-size:16px}
#dSearch .s-item .ctt {color:#b9bbc7; word-break:keep-all}
#dSearch .back {position:fixed; top:90px; right:10px; width:30px; height:30px; text-indent:-9000px; border:1px solid #6b707c; background-color:transparent; background-image:url(../images/ico_back.png); background-repeat:no-repeat; opacity:.8}

.overview {position:relative; width:100%; height:210px; margin-bottom:10px; padding:0 10px; background:#393d46; overflow:hidden}
.overview .tit { position:relative; width:100%; height:40px; line-height:36px; color:#fff; margin-bottom:10px; border-bottom:1px solid #6b707c; padding-left:50px}
.overview .tit label {display:block; position:absolute; top:8px; left:0; font-size:13px; color:#fff; padding:0 5px; line-height:21px; background-color:#5b606c}
.overview .tit h2 {display:inline-block; font-size:18px; font-weight:400; margin-right:5px}
.overview .tit input {display:inline-block; width:28px; height:28px; border:none; text-indent:-9000px; background-image:url(../images/ico_item.png); background-color:transparent; background-repeat:no-repeat; background-size:50px auto; background-position:0 -26px}
.overview .tit input.on {background-position:0 -51px}
.overview .tit .add {display:block; position:absolute; top:5px; right:5px; height:24px; line-height:22px; padding:0 5px; border:1px solid #ddd; font-size:12px; font-family:Gulim, Dotum; font-weight:300; color:#999; background-color:#fff;}
.overview .tit .addon {color:#fff; background-color:#2fa619}
.overview .pic {position:relative; width:270px; height:150px; overflow:hidden}
.overview .pic img {width:100%; height:auto; margin-top:-18px;}
.overview .pic li {position:absolute; left:0; bottom:0; width:100%; height:30px; line-height:20px; text-align:left; padding:5px 10px; color:#fff; font-family:gulim; font-weight:500; background-color:rgba(0,0,0,0.7)}
.overview .pic li span {display:block; float:left; margin-right:5px; font-size:14px; font-family:"Nanum Gothic"; font-weight:400 }
.overview .pic li span:nth-child(2) {width:30%}
.overview .pic li em {display:inline-block; font-style:normal; font-size:10px; font-weight:normal; line-height:25px}
.overview .pic .up {color:#ff7800; margin-right:10px}
.overview .pic .dn {color:#14b1fe}
.overview .sum {position:absolute; top:50px; left:290px; right:10px; min-width:360px; height:145px; color:#fff; font-size:14px; white-space:pre-line; overflow-y:auto}
.overview .sum .tab {height:35px; border-bottom:1px solid #ddd; background:#f8f8f8}
.overview .sum .tab a {display:block; float:left; width:100px; line-height:35px; text-align:center; color:#777; border-right:1px solid #ccc; font-family:'Noto Sans KR'; font-size:14px}
.overview .sum .tab a.on { color:#169601; font-weight:500}
.overview .sum .ctt { height:193px; overflow-x:hidden; overflow-y:auto}
.overview .sum .ctt > div { margin:20px 5px}
.overview .sum .ctt * {font-size:14px !important; font-family:"Nanum Gothic"; line-height:1.6 }
.overview .sum .line { position:relative; border-bottom:1px solid #ddd; margin:0 15px; cursor:pointer; padding:0 5px}
.overview .sum .line .dt { position:absolute; right:0; color:#888; padding-left:10px}
.overview .sum .ctt .line a {line-height:30px;}
.overview .move {display:none}


.list {width:100%; padding:0 10px; font-size:13px; color:#fff}
.list .rnk {width:70px; text-align:center}
.list .itm {width:120px; text-align:left; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.list .prc {width:70px; text-align:right; padding-right:10px}
.list .chg {width:70px; text-align:right; padding-right:10px}
.list .rat {width:70px; text-align:right; padding-right:10px}
.list .avr {width:80px; text-align:right; padding-right:10px}
.list .vol {display:none}
.list .vch {display:none}
.list .tot {display:none}
.list .per {display:none}
.list .pbr {display:none}
.list .ctt {position:absolute; left:400px; right:0; width:calc(100% - 420px); padding-left:10px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.list .th {height:40px; color:#fff; border-bottom:1px solid #5b606c}
.list .th ul {position:relative}
.list .th ul > li {float:left; line-height:40px; text-align:center; padding:0; cursor:pointer}
.list .th ul > li.ctt, .list .th ul > li.rnk {cursor:default}
.list .th .btn {position:absolute; top:10px; right:10px; width:100px; height:21px}
.list .th .btn input {display:none; float:left}
.list .th .btn input.on {display:block; border:none; border-radius:5px; margin-right:5px; padding:0 10px; line-height:18px; color:#fff; padding-top:3px; background-color:#2fa619}
.list .th .btn_up {display:block; float:left; width:21px; height:21px; background-image:url(../images/list_up.png)}
.list .td {height:calc(100vh - 365px); overflow-y:auto}
.list .td ul {position:relative; clear:both; height:40px; border-bottom:1px solid #3f434d}
.list .td ul > li {float:left; line-height:40px}
.list .td ul > li.itm {cursor:pointer}

.chg span {display:inline-block; text-align:right; margin-left:5px}
.chg span em {text-align:right; padding-left:10px; background-image:url(../images/chg_bl.png); background-repeat:no-repeat}
.s1 em {background-position:0 0}
.s2 em {background-position:0 -23px}
.s3 em {background-position:0 -97px}
.s4 em {background-position:0 -72px}
.s5 em {background-position:0 -48px}

/* message */
.bbs dl {border-bottom:1px solid #667; color:#fff; font-size:16px}
.bbs dl.on dd {display:block; word-break:keep-all; white-space:pre-line; padding:20px 10px}
.bbs dt { position:relative; padding-left:10px; line-height:50px; cursor:pointer}
.bbs dt h2 {width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal}
.bbs dt p {position:absolute; top:0; right:10px}
.bbs dd {display:none; border-top:1px solid #445}

#message nav {position:relative; height:40px; border-top:1px solid #515359; padding-left:40px; line-height:38px; background:#424242}
#message nav h1 {font-size:18px; color:#fff}
#message nav li {position:absolute; top:0; left:0; width:40px; height:40px}
#message nav li button {width:40px; height:40px; border:none; text-indent:-9000px; background-image:url(../images/ico_back.png); background-repeat:no-repeat; background-position:center; background-color:transparent}
#message section { height:calc(100vh - 80px); padding:0 10px; overflow-y:scroll}

.utb {padding-top:30px; margin-left:30px}
.utb ul {float:left; width:320px; margin:0 10px 30px; cursor:pointer}
.utb figure {position:relative; padding-top:56.25%; overflow:hidden; margin-bottom:10px; background-position:center; background-size:cover}
.utb ul li h3{ font-size:16px; color:#fff; margin-bottom:5px; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.utb ul li p { font-size:14px; color:#919cad; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical}
.utb:after { content:''; display:block; clear:both}
.utbView { position:fixed; top:0; left:0; bottom:0; width:100%; padding-top:60px; background-color:rgba(0,0,0,.75); z-index:10}
.utbView ul {position:relative; width:90%; padding-top:50%; margin:0 auto}
.utbView ul li {position:fixed; top:5px; right:5px; z-index:50} 
.utbView ul li button {position:relative; width:50px; height:50px; border:none; border-radius:50%; color:#f57040; background:#f57040}
.utbView ul li button:after {display:block; position:absolute; top:-5px; left:8px; content:'×'; font-size:48px; line-height:1; color:#fff}
.utbView ul iframe { position:absolute; top:0; width:100%; height:100%}

@media only screen and (max-width:640px) {
	.loginBox {width:90%; top:10%; left:0; margin:0 5%}	
}