@import url(common.css);
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic'); */
@charset "utf-8";

/*common*/
html, body {height:100%; overflow:hidden}
body {font-size:13px; font-family:Malgun Gothic; background-color:#2d2d2d}
body.anti {font-family:Gulim}
body.anti .x-tab li, 
body.anti .x-hoga-bar ul li.x-uline input[type=text], 
body.anti .x-grid-bdy td[cc=hname], 
body.anti .x-info-menu > div {font-family:Gulim, Dotum}
body.sec_0 header::after {content:'이베스트증권';}
body.sec_1 header::after {content:'DB증권';}
body.sec_2 header::after {content:'유안타증권';}
body.sec_3 header::after {content:'SK증권';}
body.sec_4 header::after {content:'모의투자'; display:none}
body.sec_5 header::after {content:'키움증권';}
body.sec_6 header::after {content:'NH투자증권투자';}
body.sec_7 header::after {content:'하나대투증권';}
header::after {position:absolute; top:8px; left:100px; line-height:20px; color:#babcbf}
.csCenter::after {content:'고객센터 1833-6014';}
#loading {position: fixed; top:0; left: 0; width: 100%; height: 100vh; z-index: 1000}
#loading ul {width: inherit; height: inherit; display: flex; align-items: center; justify-content: center;}
#loading ul li {width: 80px; height: 80px; border-radius: 50%; opacity: .8; overflow: hidden}
#loading ul li img {width: 100%}
.alertify-notifier .ajs-message {width:300px; overflow:hidden; border-radius:10px; background-repeat:no-repeat; word-break:keep-all}
.alertify-notifier.ajs-right .ajs-message.ajs-visible {right:310px; height:70px; color:#111; padding-left:80px; border-width:0; background-color:#fed807; background-repeat:no-repeat; background-position:left top}
.alertify-notifier.ajs-right .ajs-message.ajs-visible:before {display:block; margin-bottom:3px; font-weight:600}
.alertify-notifier .ajs-message.ajs-success,  .ajs-message.ajs-cancel,  .ajs-message.ajs-memo {background-image:url(../images/ajs-success.png)}
.alertify-notifier .ajs-message.ajs-success:before {color:#111; content:'설정변경'; }
.alertify-notifier .ajs-message.ajs-push {height:auto; background-image:url(../images/ajs-push.png)}
.alertify-notifier .ajs-message.ajs-push:before {color:#111; content:'알림'}
.alertify-notifier .ajs-message.ajs-push p {width:98%; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.alertify-notifier .ajs-message.ajs-sell {background-image:url(../images/ajs-sell.png)}
.alertify-notifier .ajs-message.ajs-sell:before {color:#111; content:'매도주문'}
.alertify-notifier .ajs-message.ajs-buy {height:70px; color:#111; padding-left:80px; border-width:0; background-color:#fed807; background-image:url(../images/ajs-buy.png); background-repeat:no-repeat; background-position:left top}
.alertify-notifier .ajs-message.ajs-buy:before {color:#ff215f; content:'매수주문'; display:block; margin-bottom:3px; font-weight:600}
.alertify-notifier .ajs-message.ajs-sell {background-image:url(../images/ajs-sell.png)}
.alertify-notifier .ajs-message.ajs-sell:before {color:#7654c6; content:'매도주문'}
.alertify-notifier .ajs-message.ajs-error {background-image:url(../images/ajs-error.png)}
.alertify-notifier .ajs-message.ajs-memo:before {color:#111; content:'메모변경'}
.alertify-notifier .ajs-message.ajs-notice {background-image:url(../images/ajs-error.png)}
.alertify-notifier .ajs-message.ajs-notice.ajs-visible:before {color:#111; content:'[공지]'; display:inline-block; padding-right:5px}
.alertify-notifier .ajs-message.ajs-cancel:before {color:#111; content:'주문취소'}

header {position:relative; height:40px; color:#b9bbc7; box-shadow:0 0 5px rgba(0,0,0,.5);  background:#424242; z-index:10}
header h1 {position:absolute; top:6px; left:10px; width:86px; height:24px; text-indent:-9000px; background:url(../images/logo.png) no-repeat 0 0; background-size:auto 48px}
header .topBtn { position:absolute; top:0; right:0; z-index:10; display:none}
.pc header .topBtn {display:block}
header .topBtn input {display:block; float:left; width:50px; height:30px; border:none; text-indent:-9000px; background-image:url(../images/btn_win.png); background-repeat:no-repeat; background-color:transparent}
header .topBtn input:hover {background-color:rgba(50,150,250,.2)}
header .topBtn .win_min { background-position:center 0}
header .topBtn .win_max { background-position:center -30px}
header .topBtn .win_res { background-position:center -60px}
header .topBtn .win_cls { background-position:center -90px}
header .topBtn .win_rel { background-position:center -120px}
header .caption { width:100%; height:40px}
header .sign {position:absolute; top:0; left:25%; width:40%; height:30px; z-index:0; display: none}
header .sign > ul {position:relative; width:100%; height:inherit}
header .sign .push {position:absolute; top:0; left:0; width:100%; height:1px; text-align:center; z-index:10}
header .sign .push p {display:inline-block; width:90%; line-height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
header .sign .push p:hover {cursor:pointer; color:#fff}
header .sign .signBg{ position:relative; width:100%; height:inherit; background-image:url(../images/sign_bg.png); background-position:center top; background-size:300% 30px}
header .sign .signBg:before {content:''; display:block; position:absolute; left:-20px; top:0; width:20px; height:30px; background-image:url(../images/sign_bg.png); background-repeat:no-repeat}
header .sign .signBg:after {content:''; display:block; position:absolute; right:-20px; top:0; width:20px; height:30px; background-image:url(../images/sign_bg.png); background-repeat:no-repeat; background-position:right top}
header .sign .signOn {display:none; position:absolute; top:0; left:0; width:100%; height:30px; z-index:5;}
header .sign.on .push {color:#fff; font-weight:600}
header .sign.on .signOn {display:block; width:100%; height:inherit; background-image:url(../images/sign_on_bg.png); background-position:center top; background-size:300% 30px;
animation-duration:.5s; animation-name:signon; animation-iteration-count:infinite; animation-direction:alternate; animation-timing-function:linear}
header .sign.on .signOn:before {content:''; display:block; position:absolute; left:-20px; top:0; width:20px; height:30px; background-image:url(../images/sign_on_bg.png); background-repeat:no-repeat}
header .sign.on .signOn:after {content:''; display:block; position:absolute; right:-20px; top:0; width:20px; height:30px; background-image:url(../images/sign_on_bg.png); background-repeat:no-repeat; background-position:right top}

@keyframes signon {
  0% {opacity:1}
  100% {opacity:.8}
}

.topState {position:absolute; top:4px; right:150px;  width:auto; height:30px; padding:3px; border:none; border-radius:15px; background:#323232}
.topState ul {display: flex; float:left; align-content: center}
.topState ul li { position:relative; width:72px; height:24px; border:none; border-radius:12px; text-align:center; line-height:24px; color:#2d2d2d; padding-right:15px; background-color:#696969; cursor:pointer}
.topState ul label {display: block; padding: 0 5px; color: #999; line-height: 24px}
.topState ul.s1 li {background-image:linear-gradient(90deg, #fed807 0%, #f6d13a 50%);}
.topState ul.s2 li {background-image:linear-gradient(90deg, #efad0e 0%, #f09b06 50%);}
/*.topState ul.s2 + ul li.on {background-image:linear-gradient(90deg, #25ae01 0%, #11a125 50%);}*/
.topState ul li:after {display:block; position:absolute; top:0; right:0; content:''; width:25px; height:24px; background-image:url(../images/select.png); background-repeat:no-repeat; background-position:center}
.topState ul:last-child li {float:left; width:48px; margin-left:3px; padding-right:0; background-image:none}
.topState ul:last-child li:before {content: '정지중'}
.topState ul:last-child li:first-child { width:48px}
.topState ul:last-child li.on {background-image:linear-gradient(90deg, #fed807 0%, #f6d13a 50%);}
.topState ul:last-child li.on:before {content: '실행중'}
.topState ul:last-child li:after {display:none}
.popState {position:absolute; top:30px; right:150px; border:1px solid #595959; background:#1f1f1f; z-index:200}
.popState ul {padding:3px}
.popState ul > li {position:relative; height:20px; margin-bottom:3px; padding-left:65px; padding-right:5px; border:1px solid #595959; background-color:#2d2d2d}
.popState ul > li label {position:absolute; top:0; left:5px}
.popState ul > li:hover {color:#fff; background-color:#6c6558}
.popState ul > li:active {border-top-width:2px; border-left-width:2px; border-color:#595959}

.ajs-error {color:#fff; font-size:13px;}
.ajs-success {color:#fff; font-size:13px; }    
.ajs-buy { color: #31708f;  background-color:transparent;  border-color: #595959;  height: 100px}
.ajs-sell { color: #31708f;  background-color:transparent;  border-color: #595959; height: 130px}
.ajs-hold { color: #31708f;  background-color:transparent;  border-color: #595959}

table {width:100%}
table th {border-right:1px solid #595959; border-bottom:1px solid #595959; padding:0 5px}
table td {border-right:1px solid #595959; border-bottom:1px solid #595959; padding:0 5px}
*:focus {outline: none;}
input, select {border:none; color:#eaecef; background:#2d2d2d}

.up {color:#ff697b}
.dn {color:#3eb4ff}
select:disabled, input:disabled {color:#bbb; background:#333; opacity:.7}

.openPrice {display:none; position:absolute; top:0; left:0; border-right:1px solid #595959; width:39%; background:#2d2d2d; z-index:10}
.openPrice h2 { text-align:center; border-bottom:1px solid #595959; background:#2f333b}
.openPrice ul {position:relative; height:24px; border-bottom:1px solid #595959; clear:both; line-height:24px; overflow:hidden}
.openPrice ul label {position:absolute; top:0; left:0; border-bottom:1px solid #595959; font-size:12px; padding:0 5px; background:#2f333b}
.openPrice ul li {text-align:right; padding-right:5px}

/* resize */
.pc .resize-l {position:fixed; top:0; left:0; width:5px; height:100%; z-index:100; cursor:e-resize}
.pc .resize-r {position:fixed; top:0; right:0; width:5px; height:100%;  z-index:100; cursor:e-resize}
.pc .resize-t {position:fixed; top:0; left:0; width:100%; height:5px;  z-index:100; cursor:s-resize}
.pc .resize-b {position:fixed; bottom:0; left:0; width:100%; height:5px; z-index:100; cursor:s-resize}
.pc .resize-se {position:fixed; bottom:0; right:0; width:5px; height:5px; background:url(../images/resize.png) no-repeat right bottom; z-index:200; cursor:se-resize}

#w-top {min-width:1270px; height:40px; background:#424242}
.x-hoga-bar {float:left; position:relative; width:calc(100% - 650px); height:40px; margin-left:10px; color:#fff; font-size:16px}
.x-hoga-bar > ul {width:100%; height:39px; padding-top:8px}
.x-hoga-bar ul li {float:left}
.x-hoga-bar ul li p {display:inline-block; margin-right:10px}
.x-hoga-bar ul li.x-uline {width:150px; height:28px; padding-top:2px; border-radius:14px 14px 0 14px; background:#2d2d2d; overflow:hidden}
.x-hoga-bar ul li.x-uline input[type=text] {float:left; width:calc(100% - 25px); height:25px; line-height:25px; border:none; font-size:15px; padding-left:5px; background-color:transparent}
.x-hoga-bar ul li.x-uline input[type=button] {float:left; display:block; width:25px; height:25px; border:none; background-color:transparent; background-image:url(../images/bl_select.png); background-repeat:no-repeat; background-position:right 2px bottom; background-size:10px auto}
.x-hoga-bar ul li.x-uline + li {padding-top:4px; margin-right:10px}
.x-hoga-bar .x-price {line-height:30px; font-size:16px; margin-right:10px}
.x-hoga-bar .x-item-info {line-height:30px; margin-right:10px}
.x-hoga-bar .x-volume {line-height:30px; color:#b9bbc7; font-size:13px}
.x-hoga-bar .icon {width:25px; height:25px; border:none; float:left; text-indent:-9000px; background-image:url(../images/ico_item.png); background-color:transparent; background-repeat:no-repeat; background-size:50px auto}
.x-hoga-bar .x-search {background-position:0 0; display:none}
.x-hoga-bar .x-favorite {background-position:0 -25px}
.x-hoga-bar .x-favorite.on {background-position:0 -50px}
.x-hoga-bar button[name=btnRcmmd] { display:block; position:absolute; top:5px; right:5px; width:30px; height:24px; line-height:23px}

.x-top-wrap {float:right; position:relative; width:640px; height:40px; padding-right:90px}
.x-top-wrap .x-top-menu {line-height:39px; text-align:right}
.x-top-wrap .x-top-menu .x-btn {min-width:60px; padding:0 3px; line-height:20px; color:#fed807; cursor:pointer}
.x-top-wrap .x-top-menu .new {position:relative}
.x-top-wrap .x-top-menu .new:after {content:'N'; display:block; position:absolute; top:-3px; right:-3px; width:12px; height:12px; border:none; border-radius:50%; line-height:12px; color:#fff; font-size:5px; background:#6c6558}
.x-btn {text-align:center; color:#fff; border:none; border-radius:3px; background-color:#383838}
.x-btn:active {border-top-width:2px; border-left-width:2px; border-color:#595959}

section.pc-body {position: relative; min-width: 1480px}
#w-wrap {padding:10px 0 0 10px; color:#b9bbc7; box-sizing:content-box}

/* side */
aside.pc-side {position:absolute; top: 10px; right: 0; width: 200px}
aside.pc-side > div {width: 190px} 
aside.pc-side .x-remote {height: 526px}
aside.pc-side .x-remote dl {height: 31.5%; margin-bottom: 5%; border: 1px solid #1f1f1f; border-radius: 5px; background: #010001; overflow: hidden}
aside.pc-side .x-remote dl:last-child {margin-bottom: 0}
aside.pc-side .x-remote dl dt {position: relative; width: 100%; height: calc(100% - 28px); display: flex; justify-content: center; align-items: center; overflow: hidden}
aside.pc-side .x-remote dl dt label {display: block; position: absolute; left: 10%; bottom: 10px; width: 80%; color: #ffda41; text-align: center; background: rgba(31,31,31,0.5); z-index: 10}
aside.pc-side .x-remote dl dt video {height: 140px}
aside.pc-side .x-remote dl dd {display: flex; justify-content: center; padding: 4px 0}
aside.pc-side .x-remote dl input {flex: 1 1 30%; height: 20px; margin: 0 2px; color: #a2a2a2; border-radius: 5px; border-color: #333;  background: #333;}
aside.pc-side .x-remote dl input.on {color: #2a2a2a; border-color: #f6c501;  background: #f6d13a;}
.bb, .bb span, .bb em {display: none}
.bb.off {display: block; position: absolute; left: 0; top: 0; width: 190px; height: 140px; background: url("../images/md_stop.png"); z-index: 5}
.bb.off span, .bb.off em {display: none}
aside.pc-side .x-remote dl dt .bb.off + label {color: #aaa}
/*
.bb::before, .bb::after, .bb { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; border-radius: 50%}
.bb { width: 60px; height: 60px; margin: auto; color: #ffda41; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(246, 213, 144, 0.75);}
.bb::before, .bb::after {content: ""; margin: -6px; box-shadow: inset 0 0 0 4px; animation: clip 8s linear infinite; z-index: 1;}
.bb::before {animation-delay: -4s;}
@keyframes clip {
  0%, 100% {clip: rect(0px, 72px, 4px, 0px);}
  25% {clip: rect(0px, 4px, 72px, 0px);}
  50% {clip: rect(68px, 72px, 72px, 0px);}
  75% {clip: rect(0px, 72px, 72px, 68px);}
}
.bb span {display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0-15px; text-align: center; line-height: 30px}
.bb em {display:none; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0-15px; text-align: center; line-height: 30px}
.bb.off {box-shadow: inset 0 0 0 1px rgb(180 180 180 / 50%)}
.bb.off::after {animation: none; clip: rect(0px, 36px, 36px, 0px); color: #3e3529;}
.bb.off::before {animation: none; clip: rect(36px, 72px, 72px, 36px); color: #3e3529;}
.bb.off span {display: none}
.bb.off em {display: block; color: #999}
*/
.ani2 {display: none}
/*
aside.pc-side .ani2 {height: calc(100vh - 662px); display: flex; align-items: center; justify-content: center; border-radius: 5px; background-color: #1f1f1f}
aside.pc-side .ani2 > dl {width: 160px; height: 75%; min-height: 180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around}
aside.pc-side .ani2 > dl dt {height: 100%; display: flex; align-items:flex-end; justify-content: space-around; flex-direction:column-reverse}
aside.pc-side .ani2 > dl dt p {color: #a2a2a2}
aside.pc-side .ani2 > dl dd {position: relative; width: 15px; height: 100%; padding: 1px; border: 1px solid #545454; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; background: #111}
aside.pc-side .ani2 > dl dd p {width: 100%; background:linear-gradient(#ffda41, #9c851c); animation: bar 9s linear infinite }
aside.pc-side .ani2 > dl dd:nth-child(2) p {animation-delay: -3s;}
aside.pc-side .ani2 > dl dd:nth-child(3) p {animation-delay: -6s;}
@keyframes bar {
  0%, 100% {height: 10%}
  25% {height: 60%}
  50% {height: 90%}
  75% {height: 40%}
}
*/
/* pc */
.x-hoga-wrap {float:left; width:640px}
.x-chart-wrap {float:left; height:480px}

.x-minichart-wrap {display: flex; flex-direction: column; margin-right: 10px; margin-bottom: 30px}
.x-minichart-wrap ul {display: flex; align-items: center; justify-content: space-between; padding: 2px 5px}

.chk_box {display:inline}
.chk_box input[type="checkbox"] { display:none;}
.chk_box input[type="checkbox"] + label {color:#777;}
.chk_box input[type="checkbox"] + label span {display:inline-block; width:30px; height:20px; border:1px solid #595959; text-align:center; color:#fff; background-color:#6c6558; vertical-align:top; cursor:pointer}
.chk_box input[type="checkbox"]:checked + label span {color:#fff; border:none; background-color:#fed807;}

.x-hbar {clear:both; width:100%; height:10px}
.x-jan-wrap {float:left; min-width:300px;}

.x-info-wrap {float:right; }
.x-info-hdr {height:40px}
.x-info-hdr > div {position:absolute; right:10px}

.x-info-hdr1 {height:30px; text-align:right; padding-top:5px; border-bottom:1px solid #595959}
.x-info-hdr1 ul {padding-right:15px}
.x-info-hdr1 li {display:inline-block; margin-left:20px}
.x-info-hdr1 li input[type=text] {width:50px; text-align:right; padding-right:5px}
.x-info-hdr1 input[type=button] {display: inline-block; width: 20px; height: 20px; border:1px solid #555; border-radius: 3px; text-indent: -9000px; background-image:url("../images/bt_info.png"); background-repeat: no-repeat; background-position: -1px -1px}
.x-info-hdr1 input[type=button].on {border-color: #f6d13a; background-color: #1f1f1f}
.x-info-hdr1 input[name=btnChart] {background-position: -21px -1px}
.x-info-sum {border-top:1px solid #595959}
.x-info-sum dl {float:left; width:19%}
.x-info-sum dl dt {float:left; width:40%; height:19px; text-align:center; white-space:nowrap; line-height:18px; border-right:1px solid #595959; border-bottom:1px solid #aaa; background:#1f1f1f}
.x-info-sum dl dd {float:left; width:60%; height:19px; text-align:right; border-bottom:1px solid #aaa}
.x-info-sum dl dd input {width:100%; border:none; text-align:right; padding-right:5px; line-height:14px; font-size:14px; vertical-align:top}
.x-info-sum dl:last-child {float:left; width:24%}
.x-info-sum dl:last-child dt {width:60%}
.x-info-sum dl:last-child dd {width:40%}

.x-info-chk {position:relative; text-align:right; padding-top:2px;}
.x-info-chk span {display:block; position:absolute; top:3px; left:5px; font-size:12px; color:#999}
.x-info-chk select {width:80px; vertical-align:top}
.x-info-chk button {width:40px; vertical-align:top; border:none; color:#fff; background:#6c6558}
.x-info-chk button.btn_review2 {width:60px; height:21px; border:1px solid #a5a5a5; border-radius:3px; color:#fff; background:#f97b00}

.x-toggle {display:inline-block; width:100px}
.x-toggle ul {width:inherit; height:19px; border-radius:3px; border:1px solid #595959; background:#eee; overflow:hidden}
.x-toggle li {float:left; width:45%; border-radius:3px; line-height:19px; text-align:center}
.x-toggle li.on {width:55%; color:#fff; background:#fed807}

.x-grid-month {padding:5px 0 0 5px; background:#eee; }
.x-grid-month div {float:left; width:150px; margin:0 5px 5px 0; border:1px solid #595959;}
.x-grid-month div h2 {text-align:center; border-bottom:1px solid #595959}
.x-grid-month div h2 span {font-size:18px}
.x-grid-month div li {position:relative; padding-right:5px; text-align:right; border-bottom:1px solid #ddd; line-height:24px;}
.x-grid-month div li label { display:block; position:absolute; top:0; left:0; width:30%; border-right:1px solid #ddd; text-align:center; font-size:11px }
.x-grid-month div a { display:block; width:100%; text-align:center}

.x-pop {border:1px solid #929498; box-shadow:rgba(0,0,0,.2) 1px 1px 3px; background:#3f434e; z-index:100; overflow:hidden; display:none;}
.x-pop h2 {position:relative; height:30px; line-height:30px; padding-left:10px; color:#caccce}
.x-pop h2 input {position:absolute; top:0; right:0px; width:30px; height:30px; line-height:20px; border:none; background-color:transparent; font-size:20px}

.x-bottom-wrap { position:fixed; bottom:0; left:0; width:100%; height:30px; line-height:29px; color:#9a9cab; background:#1f1f1f; z-index:20}
.x-bottom-wrap > div > ul {float:left; padding-left:10px}
.x-bottom-wrap > div > ul p {display:inline-block}
.x-bottom-wrap > div > ul p span {display:inline-block; margin-right:10px}
.x-bottom-wrap .x-btn-rolling {float:right; padding-top:2px}
.x-bottom-wrap .x-btn-rolling li {height:13px; margin-bottom:1px}
.x-bottom-wrap .x-btn-rolling input { width:20px; height:13px; border:none; vertical-align:top; text-indent:-9000px; background-image:url(../images/btn_roll.png); background-repeat:no-repeat; background-position:0 3px}
.x-bottom-wrap .x-btn-rolling .roll-dn {background-position:0 -16px}
.x-bottom-jisu {width:313px; float:left; border-right:1px solid #595959}
.x-bottom-log {position:relative; width: 620px; float:left}
.x-bottom-log .x-log-wrap {position:absolute; left:0; bottom:25px; width:inherit; height:330px}
.x-bottom-log .x-log-wrap ul {height:300px; overflow-y:auto; background:#252932}
.x-bottom-log .x-log-wrap ul li { line-height:25px; border-bottom:1px solid #3e414a; padding-left:10px}
.x-bottom-log .x-log-wrap ul li span {display:inline-block; margin-right:10px; color:#777; }
.x-bottom-btn {float:right; margin-right:20px}
.x-bottom-btn li {float:right; margin:0 10px}

.x-value {float: left; width: 306px; margin-right: 10px; margin-left: 324px; border-radius: 10px; background-color: #1f1f1f; overflow: hidden}
.x-valug-graph {height: 280px; overflow: hidden}
.x-valug-graph li {width: 300px; margin: -20px auto 0}
.x-valug-list {height: 100px; overflow-y: auto}

.x-jan-tab {position:relative; width: inherit; overflow: hidden; overflow-x: auto}
.x-jan-tab > ul {width: 800px}
.x-jan-tab > div { position:absolute; top:2px; right:10px}
.x-tab {height:35px; border-radius:5px; padding:0 5px; background-color:transparent}
.x-tab li {float:left; min-width:70px; padding:0 15px; margin-right: 5px; line-height:33px; text-align:center; color:#999; cursor:pointer; border-radius:10px; opacity:.8}
.x-tab li.on {color: #2d2d2d; background:#fed807; opacity:1}
.x-tab li.btn_review {line-height:23px; opacity:1}
.x-tab li.btn_review a {display:inline-block; height:19px; padding:0 10px; border-radius:5px; color:#fff; line-height:19px; background:#f97b00}
.x-tab li.btn-earn {position: fixed; top: 51px; right: 10px; width: 60px; height: 20px; padding: 0 3px; line-height: 20px; border-radius: 3px; color: #2a2a2a; background: #f6d13a; opacity: 1}
.dbs .x-tab li.btn_review {display:none}
.x-jan-bdy { clear:both}

.x-guide {position:relative; display:inline-block; width:20px; height:20px; margin-left:5px}
.x-guide:before { content:'?'; display:block; width:14px; height:14px; line-height:14px; text-align:center; border:1px solid #999; border-radius:8px;}
.x-guide + div {display:none}
.x-guide + div:before {content:' '; display:block; position:fixed; top:0; left:0; bottom:0; width:100%; background-color:rgba(0,0,0,.5); z-index:500}
.x-guide + div ul {position:fixed; top:30%; left:50%; width:50%; margin-left:-25%; min-height:240px; padding:1%; text-align:left; border:1px solid #595959; background:#2d2d2d; z-index:501; }
.x-guide + div ul li {position:relative; width:100% !important; text-align:left; padding:0 !important}
.x-guide + div ul li h3 {font-size:15px; color:#fed807;}
.x-guide + div ul li p {line-height:1.5; margin-left:0; margin-bottom:20px; text-align:left; font-size:14px; word-break:keep-all}
.x-guide + div ul li:before { content:'×'; display:block; font-size:36px; color:#777; padding-bottom:15px; text-align:right}
.x-guide + div ul li:after {display:none}

.x-tbl-jan-sum {height:40px;}
.x-tbl-jan-sum li {float:left; width:94%}
.x-tbl-jan-sum li:last-child { width:6%}
.x-tbl-jan-sum li:last-child button {width:100%; height:50px; border:none; border-bottom:1px solid #595959; color:#fff; background:#6c6558}
.x-tbl-jan-sum li:last-child button:active {border-style:solid; border-top-width:2px; border-left-width:2px; border-color:#a2a8b2; background-color:#4b73b3}
.x-tbl-jan-sum li > table th {width:12%; font-size:12px; text-align:center; border-bottom:1px solid #595959; line-height:24px; white-space: nowrap}
.x-tbl-jan-sum li > table td {width:13%; height:20px; text-align:right; border-bottom:1px solid #595959; line-height:24px}
.x-grid-hdr th, .x-grid-hdr td {border-color:#383a4a}
.x-grid-bdy th, .x-grid-bdy td {border-color:#383a4a}
.x-info-bdy {clear:both;}

.x-grid { overflow:hidden}
.x-grid-hdr {overflow:hidden; position:relative }
.x-grid-hdr .x-fixed {position:absolute; top:0; left:0; overflow:hidden; background:#2d2d2d; z-index:10}
.x-grid-hdr th {height:24px}
.x-grid-hdr th > span {display:inline-block; width:15px; height:15px; background-color:transparent; font-size:12px; background:url(../images/bl_sort_pc.png); background-repeat:no-repeat; background-size:15px auto}
.x-grid-hdr th > span.desc {background-position:right 4px;}
.x-grid-hdr th > span.asc {background-position:right -18px}
.x-grid-hdr th, .x-grid-bdy td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.x-grid-bdy {position:relative; width:100%; overflow:scroll;}
.x-grid-bdy .x-fixed {position:absolute; top:0; left:0; overflow:hidden; background:#2d2d2d; z-index:10}
.x-grid-bdy table.on td { background:#3c335a}
.x-grid-bdy td {height:24px}
.x-grid-bdy td div {text-align:right}
.x-grid-bdy label {display:block; min-width:30px; height:18px; font-size:12px; text-align:center; background:#1f1f1f}
.x-grid-bdy label.on {color:#2d2d2d; border-color:#f6c501; background:#f6d13a} 
.x-grid-bdy label.on1 {color:#2d2d2d; border:1px solid #c9ae61; background:#c9ae61}
.x-grid-bdy label.on.rvs {color:#fff; border:1px solid #6b55de; background:#7a62f7}
.x-grid-bdy label.play {color:#2d2d2d; font-size:10px; border-color:#f6c501; background:#f6d13a}
.x-grid-bdy label.stop {line-height:12px}
.x-grid-bdy label.pause {color:#2d2d2d; border:1px solid #c9ae61; background:#c9ae61} 
.x-info-bdy .x-grid-bdy label.on {border:1px solid #5f48eb; background:#7960f7}

.stkbox-wrap input[name=btn1] {display:inline-block; width:25px; height:20px; margin-left:-30px; border:none; background-color:transparent; background-image:url(../images/bl_select.png); background-repeat:no-repeat; background-position:right 2px bottom 2px; background-size:10px auto}

.x-order-tab {position:relative; height:30px; padding:0 5px; border-bottom:1px solid #595959; background: #393939}
.x-order-tab li {float:left; width:20%; margin:0 5px; line-height:28px; text-align:center; opacity:.5; cursor:pointer}
.x-order-tab li.on {border-bottom:2px solid #fed807; opacity:1}
.x-order-tab li:last-child {position:absolute; top:0; right:0; padding-left:30px; background-image:url(../images/ico_set.png); background-repeat:no-repeat; background-size:22px; background-position:left 8px top 4px; opacity:1; cursor:pointer}

.x-hoga-bdy {clear:both}
.x-hoga-bdy input[name=hname] {width:120px}
.x-hoga-bdy input[name=shcode] {width:70px}
.x-hoga-bdy1 {position: relative; float:left; width:49%; height:526px; margin-right:10px; border:none; border-radius:10px; font-size:13px; background-color:#1f1f1f; overflow:hidden}
.x-hoga-bdy1 > button {position: absolute; right: 5px; bottom: 5px; z-index: 100; display: none}
.x-hoga-bdy1.max {position: absolute; width: 314px; height: calc(100vh - 130px); z-index: 10}
.x-hoga-bdy1.max .askPrice {position: relative; height: calc(100vh - 170px); max-height: 960px;}
.x-hoga-bdy1.max .askPrice .reverse {height: 240px}

.x-hoga-bdy2 {position:relative; float:right; width:calc(51% - 20px); height:526px; margin-right: 10px; border:none; border-radius:10px; background-color:#1f1f1f; overflow:hidden}
.x-hoga-bdy2 input[type=button]:not([name=btn1]) {min-width:20px; line-height:18px; vertical-align:top; background:#6c6558}
.x-hoga-bdy2 .order {position:relative; padding-left:5px}
.x-hoga-bdy2 .order ul li { position:relative; min-height:30px; line-height:20px; text-align:left; padding-left:60px}
.x-hoga-bdy2 .order ul li > label {display:block; position:absolute; top:0; left:0px; width:60px; color:#a9abb7}
.x-hoga-bdy2 .order .x-price-area {position:relative}
.x-hoga-bdy2 .order .x-price-area input[type=button] {display:block; position:absolute; top:2px; right:1px; width:19px; height:9px; border:none; overflow:hidden; text-indent:-9000px; background-image:url(../images/ico_price.png); background-repeat:no-repeat;  background-position:-18px 0px}
.x-hoga-bdy2 .order .x-price-area input[type=button]:active {border-top:1px solid #aaa; border-left:1px solid #aaa}
.x-hoga-bdy2 .order .x-price-area input[name=btnPrcMinus], .x-hoga-bdy2 .order .x-price-area input[name=btnQtyMinus] {top:12px; background-position:-18px -20px;}
.x-hoga-bdy2 .order .x-price-area input:disabled + input[type=button], .x-price-area input:disabled + input + input[type=button]  {opacity:.5}
.x-hoga-bdy2 .order .orderBasic { padding-top:10px; line-height:20px}
.x-hoga-bdy2 .x-multi-wrap {height:448px; overflow:hidden; overflow-y:auto;}
.x-hoga-bdy2 .x-multi-wrap ul li {padding-left:70px; width:320px}
.x-hoga-bdy2 .x-multi-wrap ul li > label {left:5px;}
.x-hoga-bdy2 .x-multi-wrap.on {background:none}
.x-hoga-bdy2 .x-multi-wrap ul li > p {min-width:170px}
.x-hoga-bdy2 .x-multi-wrap ul li > p span {display:inline-block; float:left; padding:0 12px; line-height:20px; border-right:1px solid #bbb}
.x-hoga-bdy2 .x-multi-wrap ul li > p span:last-child {border-right:none}
.x-hoga-bdy2 .x-multi-wrap .x-step-disp {margin-bottom:10px}
.x-hoga-bdy2 .x-multi-wrap .x-step-user li {float:left; width:50%}
.x-hoga-bdy2 .x-multi-wrap .x-step-user li label {color:#d91434}
.x-hoga-bdy2 .x-multi-wrap .x-multi-line {height:30px}
.x-hoga-bdy2 .x-multi-wrap .x-multi-line li {float:left; width:50%}

.x-hoga-bdy2 .order ul li > p {display:inline-block}
.x-hoga-bdy2 .orderDetail {padding-top:5px}
.x-hoga-bdy2 .orderDetailMore {height:30px; line-height:30px; text-align:center; border-radius:10px; background:#343434}
.x-hoga-bdy2 .orderDetailMore span {padding-right:25px; color:#fed807; background-image:url(../images/bl_more.png); background-repeat:no-repeat; background-position:right -1px; background-size:20px auto}
.x-hoga-bdy2 .orderDetailMore.on span {background-position:right -23px; color:#999}
.x-hoga-bdy2 .orderDetail input[type=text] {width:50px; text-align:right}
.x-hoga-bdy2 .x-btn-area {position:absolute; right:0; bottom:0; width:100%; height:44px; border-top:1px solid #595959; padding-top:6px; padding-right:10px; text-align:right;}
.x-hoga-bdy2 .x-btn-area input {width:80px; height:30px; margin-left:5px; border:1px solid #6c6558; border-radius:3px; color:#eee; background:#4f5564}
.x-hoga-bdy2 .x-btn-area input:active {border-top-width:2px; border-left-width:2px; background-color:#f8f8f8}
.x-hoga-bdy2 .x-btn-area input:last-child {color:#2d2d2d; border-color:#f6c501; background:#f6d13a}
.x-hoga-bdy2 .x-btn-area input:last-child:active {border-top-width:2px; border-left-width:2px; border-left-color:#0f628e; border-top-color:#0f628e; background-color:#188eb6}

.x-hoga-bdy2 .normal {padding:0}
.x-hoga-bdy2 .normal > div {clear:both; }
.x-hoga-bdy2 .normal > div ul > li {height:24px; margin-bottom:6px}
.x-hoga-bdy2 .normal > form > div {height:466px}
.x-hoga-bdy2 .normal .tab li {float:left; width:33%; height:30px; line-height:30px; margin-bottom:0; text-align:center; padding:0; border-right:1px solid #595959; border-bottom:1px solid #595959; cursor:pointer; background: #393939}
.x-hoga-bdy2 .normal .tab li.on {width:34%; border-bottom:none}
.x-hoga-bdy2 .normal .tab li:after {display:none}
.x-hoga-bdy2 .normal .tab li:last-child {border-right:none}
.x-hoga-bdy2 .normal .tab .buy.on {color:#ff697b}
.x-hoga-bdy2 .normal .tab .sell.on {color:#3eb4ff}
.x-hoga-bdy2 .normal .tab .edit.on {color:#c5a148}
.x-hoga-bdy2 .normal form > div {padding:0 10px; clear:both}
.x-hoga-bdy2 .normal .order-box {padding-top:10px}
.x-hoga-bdy2 .normal .order-box input[type=text], .x-hoga-bdy2 .normal .order-box select {width:140px; height:20px; border-radius:5px}
.x-hoga-bdy2 .normal .order-box input[name="shcode"] {width:70px}
.x-hoga-bdy2 .normal .order-box li {clear:both}
.x-hoga-bdy2 .normal .buy {background-color:transparent}
.x-hoga-bdy2 .normal .buy.on {background-color:#1f1f1f}
.x-hoga-bdy2 .normal .buy .order-btn input {color:#fff; background-color:#f11554}
.x-hoga-bdy2 .normal .buy .order-btn input:hover {border:1px solid #ff5e87}
.x-hoga-bdy2 .normal .buy .order-btn input:active {border:0 solid #9e2828; border-top-width:2px; border-left-width:2px}
.x-hoga-bdy2 .normal .sell {background-color:transparent}
.x-hoga-bdy2 .normal .sell.on {background-color:#1f1f1f}
.x-hoga-bdy2 .normal .sell .order-btn input {color:#fff; background-color:#2d6fd1}
.x-hoga-bdy2 .normal .sell .order-btn input:hover {border:1px solid #6c9adf}
.x-hoga-bdy2 .normal .sell .order-btn input:active {border:0 solid #184793; border-top-width:2px; border-left-width:2px}
.x-hoga-bdy2 .normal .edit {background-color:transparent}
.x-hoga-bdy2 .normal .edit.on {background-color:#1f1f1f}
.x-hoga-bdy2 .normal .edit .order-btn input {color:#fff; background-color:#c5a148}
.x-hoga-bdy2 .normal .edit .order-btn input:active {border:0 solid #8d6b26; border-top-width:2px; border-left-width:2px}
.x-hoga-bdy2 .normal .edit .order-btn input:last-child {background-color:#4bb247}
.x-hoga-bdy2 .normal .edit .order-btn input:last-child:active {border:0 solid #267824; border-top-width:2px; border-left-width:2px}
.x-hoga-bdy2 .normal .edit .order-box {}
.x-hoga-bdy2 .normal .edit .order-info { padding:0; max-height:240px; overflow:hidden; overflow-y:auto}
.x-hoga-bdy2 .normal .edit .order-info table {}
.x-hoga-bdy2 .normal .edit .order-info th {background-color:#595959}
.x-hoga-bdy2 .normal .edit .order-info td { height:30px; background-color:#2d2d2d; cursor:pointer}
.x-hoga-bdy2 .normal .edit .order-info .on td {background-color:#3c335a}
.x-hoga-bdy2 .normal .order-btn {text-align:right; padding-right:10px; margin-bottom:20px}
.x-hoga-bdy2 .normal .order-btn input {width:90px; height:30px; border:none}
.x-hoga-bdy2 .normal .order-info {padding:10px 0; background-color:rgba(0,0,10,.1); display: none}
.x-hoga-bdy2 .normal .order-info > li {position:relative; padding-left:75px}
.x-hoga-bdy2 .normal .order-info label {position:absolute; top:0; left:10px; text-align:center; background-color:rgba(0,0,0,.05)}
.x-hoga-bdy2 .normal .order-info p {display:block; height:30px;}
.x-hoga-bdy2 .normal .order-info p span {display:block; float:left; padding:0 12px; line-height:20px; border-right:1px solid #bbb}
.x-hoga-bdy2 .normal .order-info p span:last-child {border-right:none}

.x-detail-hoga {position:relative}
.x-detail-hoga .x-order-price {}
.x-detail-hoga .x-order-price label {position:absolute; left:61.5%; display:none; width:30px; height:24px; line-height:25px; text-align:right; color:#fff; font-size:12px; padding-right:2px; background-image:url(../images/order_price.png); background-repeat:no-repeat; background-position:0 5px; z-index:10}
.x-detail-hoga .x-order-price label.x-order-next {background-position:0 -55px}
.x-detail-hoga .x-order-price label.x-order-hold {background-position:0 -15px}
.x-detail-hoga .x-order-price label.x-order-stop {background-position:0 -35px}

.x-multi-wrap {height:500px; padding-bottom:30px; overflow-y:auto}
.x-multi-wrap .x-btn-area {height:50px;}
.x-multi-wrap input[name=pd_amt] {width:170px; text-align:right; padding-right:10px}
.x-multi-wrap select[name=buyOp], .x-multi-wrap input[name=step_kprc] {width:170px;}
.x-multi-wrap select[name=recursiveTp] {width:150px}
.x-multi-wrap .x-chart-holder + li select {width:60px}
.x-hoga-bdy2 .order .orderBasic select:not([name='limit_step']):not([name='runType']) {width:55px}

.x-mm-notice {display:none; position:absolute; top:15%; left:50%; width:720px; min-height:400px; margin-left:-360px; border:1px solid #637f9d; background:#e5e9f0; z-index:100}
.x-mm-notice .x-top {position:relative; height:30px; border-bottom:1px solid #c5cbd4; margin-bottom:10px; background:#eef1f6;}
.x-mm-notice .x-top h2 {line-height:29px; padding-left:10px} 
.x-mm-notice .x-top .x-top-close { position:absolute; top:0px; right:0; width:30px; height:30px; font-size:30px; color:#5f6368; line-height:20px}
.x-mm-notice .x-body {height:360px; white-space:pre-line; text-align:center; font-size:18px}
.x-mm-notice .x-body h2 { font-weight:600; color:#039}
.x-mm-notice .x-body p {font-size:14px; color:#999}
.x-mm-notice .x-bot {text-align:right; line-height:30px; padding-right:10px; background:#fff}

.x-mm-config {display:none; position:absolute; top:15%; left:50%; width:720px; min-height:480px; margin-left:-360px; border:1px solid #595959; background:#2d2d2d; box-shadow:1px 1px 2px rgba(0,0,0,.3); z-index:200}
.x-mm-config .x-top {position:relative; height:30px; border-bottom:1px solid #595959; margin-bottom:10px; background:#1f1f1f;}
.x-mm-config .x-top h2 {line-height:29px; padding-left:10px; color:#fff} 
.x-mm-config .x-top .x-top-close { position:absolute; top:0px; right:0; width:30px; height:30px; font-size:30px; color:#a2a4a8; line-height:20px; cursor:pointer}
.x-mm-config .x-btn-area {position:absolute; right:5px; bottom:5px; margin-bottom:0; z-index:100}
.x-mm-config .x-btn-area input[type=button] {width:100px; height:30px; margin-left:5px; color:#fff; background:#6c6558}
.x-mm-config .x-btn-area input[type=button]:disabled {border:1px solid #8ca2b6; background:#9cb1c1}
.x-mm-config .x-set label {display:inline-block; min-width:60px}
.x-mm-config .x-set {width:340px}
.x-mm-config .x-set input, .x-mm-config .x-set select {background:#1f1f1f}
.x-mm-config .x-set-side {position:absolute; top:40px; right:0; width:340px; height:400px;}
.x-mm-config::after {content:''; display:block; position:absolute; top:40px; left:50%; bottom:20px; width:1px; background:#000; opacity:.1}
.x-mm-config .x-set-side .x-set {padding:10px 0 0}
.x-mm-config .x-set-side .x-set .tr li > div {width:257px}
.x-bg { display:none; position:fixed; top:0; left:0; bottom:0; width:100%; background-color:rgba(0,0,0,.5); z-index:101}

.x-set {line-height:25px; padding:0 10px}
.x-set input[type="text"] {width:80px; height: 18px; text-align:right}
.x-set .tr li {position:relative;}
.x-set .tr li > label { position:absolute; top:0; left:0; text-align:left}
.x-set .tr li > select + span {display:inline-block; width:13px;}
.x-set .tr li > div {display:inline-block; width:150px; margin-right:18px; text-align:left}
.x-set .tr li span {display: inline-block; vertical-align: top; line-height: 18px}
.x-set h2 {margin-bottom:5px; display:inline-block; color:#fed807}
.x-set > ul {margin-bottom:15px; clear:both}
.x-set .x-step-disp {margin-bottom:3px}
.x-set .x-multi-line {clear:both}
.x-set .x-multi-line li {float:left; width:50%; margin-right:2%}
.x-set .x-multi-line li:last-child {width:48%; margin-right:0}
.x-set .x-multi-line li span {display: inline-block; vertical-align: top}
.x-set .x-multi-line.x-step-user:after { content:''; display:block; width:100%; height:1px; clear:both}
.x-set .x-multi-line.x-step-user li {float:left; width:48%; margin-right:2%}
.x-set .x-multi-line.x-step-user li select {width:80px}
.x-set .x-multi-line.x-step-user li:last-child {width:50%; margin-right:0}
.x-set .x-multi-line:after {content:''; width:100%; height:1px; display:block; clear:both}
.x-set input {vertical-align:top}
.x-set select {vertical-align:top}
.x-set input[type="checkbox"] { display:none;}
.x-set input[type="checkbox"] + label {color:#a2a4a8;}
.x-set input[type="checkbox"] + label span {display:inline-block; width:30px; height:20px; line-height:20px; border:1px solid #595959; vertical-align:top; text-align:center; cursor:pointer; background-color:#1f1f1f}
.x-set input[type="checkbox"]:checked + label span {color:#fff; border:none; background-color:#6c6558;}
.x-step-disp input[type="radio"] { display:none;}
.x-step-disp input[type="radio"] + label {color:#a2a4a8;}
.x-step-disp input[type="radio"] + label span {display:inline-block; width:100%; height:24px; line-height:24px; vertical-align:middle; text-align:center; cursor:pointer; border:1px solid #595959; background-color:#1f1f1f}
.x-step-disp input[type="radio"]:checked + label span {color:#2d2d2d; border-color:#f6c501; background:#f6d13a}
.x-step-disp input[type="radio"]:disabled + label span {color:#a2a4a8; border:1px solid #595959; cursor:default; background-color:#595959}
.x-step-disp > span {display:inline-block; width:18%; margin-bottom:2px}

.x-btn-buy {color:#fff; background:#e33d58}
.x-btn-sell {color:#fff; background:#63b11e}
.x-btn-edit {color:#fff; background:#008fd4}

.expectResult {width:100%; margin-top:10px}
.expectResult ul {width:100%; overflow-y:hidden; overflow-x:auto; text-align:right}
.expectResult table {width:100%;}
.expectResult th {text-align:center; background:#343434}
.expectResult th span, .expectResult td p {color:#b8a073}
.expectResult td {text-align:right}
.expectResult td.on {color:#fff; background:#bc58f6}
.expectResult .xon .on {color:#fff; background:#bf1b42}
.expectResult .xon td p {color:#bf1b42; text-decoration:underline}
.expectResult td.tc {text-align:center}

/*chart*/
#chart-wrap {position:relative; width:100%; height:auto; min-width:340px; border:none; border-radius:10px; background-color:#1f1f1f; background-image:url(../images/chart_bg.png); background-repeat:no-repeat; background-size:100% 50px; background-position:right bottom; overflow:hidden}
#chart-wrap .tool-bar {height:30px; padding-top:4px; padding-right:5px; border-bottom:1px solid #595959; background-color:#1f1f1f}
#chart-wrap .tool-bar .candle-type {padding-left:10px}
#chart-wrap .tool-bar .candle-type input {vertical-align:top; height:21px; }
#chart-wrap .tool-bar .candle-type input[type=button] { margin:0 3px; border:none; background-color:transparent; cursor:pointer; opacity:.8}
#chart-wrap .tool-bar .candle-type input[type=button].on { padding:0 5px; color:#2d2d2d; font-weight:bold; border-radius:3px; background:#f6d13a; opacity:1} 
#chart-wrap .tool-bar .fr p {float:left; margin-right:10px; border-right:1px solid #595959;}
#chart-wrap .tool-bar .fr p:last-child {border-right:none}
#chart-wrap .tool-bar .line-btn input {width:25px; height:20px; text-indent:-5000px; border:none; background-image:url(../images/ico_line.png); background-repeat:no-repeat; background-color:transparent; cursor:pointer}
#chart-wrap .tool-bar .line-btn input.on, #chart-wrap .tool-bar .line-btn input:active {border:1px solid #f6d13a; border-radius:3px; box-shadow:1px 1px 2px rgba(0,0,0,.1) inset; background-color:#2d2d2d}
#chart-wrap .tool-bar button {height:20px; width:50px;}
#w-chart {background-image:url(../images/chart_bg.png); background-repeat:no-repeat; background-size:65px 480px; background-position:right top}
.avg-line {font-size: 11px; padding-right: 10px}
.avg-line input[type="checkbox"] { display:none;}
.avg-line input[type="checkbox"] + label {color:#f2f2f2;}
.avg-line input[type="checkbox"] + label span {display:inline-block; width:19px; height:19px; vertical-align:middle; cursor:pointer; background-repeat:no-repeat; background-position:0 0; background-size:20px}
.avg-line input[type="checkbox"]:checked + label span { background-position:0 -20px;}
.avg-line .ma5+label span {background-image:url(../images/check_01.png);}
.avg-line .ma10+label span {background-image:url(../images/check_02.png);}
.avg-line .ma20+label span {background-image:url(../images/check_03.png);}
.avg-line .ma60+label span {background-image:url(../images/check_04.png);}
.avg-line .ma120+label span {background-image:url(../images/check_05.png);}

.avg-line .ma5 {color:#b71ca3}
.avg-line .ma10 {color:#2e1cb7}
.avg-line .ma20 {color:#f89200}
.avg-line .ma60 {color:#2aa314}
.avg-line .ma120 {color:#727272}

.x-chart-tick { position:absolute; top:0px; left:10px; height:30px; z-index:300}
.x-chart-tick li p {font-size:12px; margin-bottom:5px}
.x-chart-tick li p span { display:inline-block; margin-right:10px}
.x-chart-tick li p:first-child { line-height:30px; margin-bottom:10px; text-indent:-9000px}

.slider {width:100%; height:20px; margin-bottom:5px; overflow:hidden}
.slider .slider-bar {float:left; width:calc(100% - 160px); height:20px}
.slider .slider-bar .ui-widget-content {background:none}
.slider .slider-bar .x-slider {float:left; margin-top:5px; width:calc(100% - 60px); background-color:#333}
.slider .slider-bar button {float:left; width:30px; height:20px; font-size:5px; border:none; text-indent:-9000px; background-color:transparent; background-image:url(../images/scroll.png); background-repeat:no-repeat; background-position:2px -70px; background-size:100px auto}
.slider .slider-bar button:hover {background-color:#d2d2d2}
.slider .slider-bar button:last-child {background-position:-13px -70px}
.slider .slider-bar .slider {width:100%}
.slider .slider-bar .ui-widget-content {border:none}
.slider .slider-bar .ui-slider-horizontal .ui-slider-handle {top:-.2em; width:1.2em; height:1.2em}
.slider .zoom {position:relative; float:right; width:160px; height:20px; padding-right:5px}
.slider .zoom .zoom-handle {position:relative; margin:0 10%}
.slider .zoom .ui-widget-content .ui-state-default, .slider .zoom .ui-slider-horizontal .ui-slider-handle {top:-.5em; z-index:50; width:6px; margin-left:.5%; border:none; border-radius:3px; background:#c9c9c9; cursor:e-resize}
.slider .zoom .zoom-bar { position:absolute; top:8px; left:5%; width:calc(90% - 50px); height:5px; border:none; border-radius:3px; background:#333; z-index:1}
.slider .zoom button {width:20px; height:20px; float:right; border:none; border-radius:15px; text-indent:-9000px; background-color:#2d2d2d; background-image:url(../images/ico_zoom.png); background-repeat:no-repeat; background-position:top -1px right; cursor:pointer}
.slider .zoom button:first-child {margin-left:3px; background-position:top -21px right}

/* stkbox */
.stkbox-wrap {position: relative; display: inline-block;}
.stkbox-items {position: absolute; border: 1px solid #595959; border-top: none; z-index: 99; top: 100%; left: 0; right:auto; width:320px; max-height:300px; overflow-y:auto}
.stkbox-items::-webkit-scrollbar { -webkit-appearance: none;}
.stkbox-items::-webkit-scrollbar:vertical {width:9px;}
.stkbox-items::-webkit-scrollbar:horizontal { height: 9px;}
.stkbox-items::-webkit-scrollbar-thumb {background-color: rgba(150,150,150, .5); border-radius: 5px; border: 1px solid #2d2d2d}
.stkbox-items::-webkit-scrollbar-track {border-radius:0;  background-color:#2d2d2d;}
.stkbox-items div {padding: 10px; cursor: pointer; border-bottom: 1px solid #595959; text-align:left; background-color:#2d2d2d}
.stkbox-items div:hover {background-color:#bc58f6;}
.stkbox-active {color: #fff; background-color: DodgerBlue !important;}

/* askPrice */
.askPrice {position:relative; height: 480px;}
.askPrice > ul {float:left; width:39%; border-right:1px solid #595959; border-bottom:1px solid #595959}
.askPrice > ul:nth-child(3n) {border-right:none}
.askPrice > ul:nth-child(3n - 1) {width:22%}
.askPrice > ul > li {height:24px; line-height:24px}
.askPrice.ap-sum {border-top:1px solid #595959}
.askPrice > ul > li > span {display:inline-block; text-align:right}
.askPrice > ul.sell-price {background-color:transparent/*#eef9ff*/}
.askPrice > ul.sell-price span {display:block; width:100%; padding:0 10%; text-align:right}
.askPrice > ul.sell-ask {background:linear-gradient(0deg, #1f1f1f, #22253d 50%)}
.askPrice > ul.sell-ask li {position:relative; clear:both; background-image:url(../images/sell_bg.png); background-repeat:no-repeat; background-position:top right}
.askPrice > ul.sell-ask li label {position:absolute; top:0; left:0; width:50%; text-align:right; padding-right:10px; font-size:12px}
.askPrice > ul.sell-ask li span {float:right; display:block; width:50%; text-align:right; padding-right:10px;}
.askPrice > ul.buy-price {background-color:transparent; border-bottom:none}
.askPrice > ul.buy-price span {display:block; width:100%; padding:0 10%; text-align:right}
.askPrice > ul.buy-ask {border-bottom: none; background:linear-gradient(180deg, #1f1f1f, #33252b 50%)}
.askPrice > ul.buy-ask li {position:relative; clear:both; background-image:url(../images/buy_bg.png); background-repeat:no-repeat; background-position:top left}
.askPrice > ul.buy-ask label {position:absolute; top:0; left:50%; width:50%; text-align:right; padding-right:10px; font-size:12px}
.askPrice > ul.buy-ask li span {float:left; display:block; width:50%; text-align:right; padding-right:10px;}
.askPrice > ul .tic {height:240px; overflow-y:scroll; border-bottom:1px solid #595959}
.askPrice > ul .tic p {height: 24px; line-height: 24px}
.askPrice > ul .tic p:nth-child(odd) {background-color:rgba(0,0,0,0.1)}
.askPrice > ul .tic p span { display:block; float:left; width:40%; margin:0 5%; text-align:right}
.askPrice > ul.price-info li {position:relative; padding-left:15px; background-color:transparent}
.askPrice > ul.price-info li:nth-child(odd) {background-color:rgba(0,0,0,.1)}
.askPrice > ul.price-info li span {position:absolute; display:block; left:50%; width:50%; text-align:right; padding-right:15px}
.askPrice > ul.dongsi li:nth-child(1) {background:#fffdb9; border-width:1px 1px 0 1px; border-style:solid; border-color:#efc400}
.askPrice > ul.dongsi li:nth-child(2) {background:#fffdb9; border-width:0 1px; border-style:solid; border-color:#efc400}
.askPrice > ul.dongsi li:nth-child(3) {background:#fffdb9; border-width:0 1px; border-style:solid; border-color:#efc400}
.askPrice > ul.dongsi li:nth-child(4) {background:#fffdb9; border-width:0 1px 1px 1px; border-style:solid; border-color:#efc400}
.askPrice > ul.time {text-align:center}
.askPrice > ul.sell-sum {text-align:right; padding-right:10px}
.askPrice > ul.buy-sum {text-align:left; padding-left:10px}
.askPrice .x-high {color:#fff; background:#ff4573}
.askPrice .x-cur {font-weight:bold}
.askPrice .x-low {color:#fff; background:#00a3ff}
.askPrice.ap-sum > ul {border-bottom:none}

/* 40호가 */
.ask40 .askPrice {overflow:hidden; overflow-y:scroll}
.ask40 .askPrice::-webkit-scrollbar { -webkit-appearance: none;}
.ask40 .askPrice::-webkit-scrollbar:vertical {width:9px;}
.ask40 .askPrice::-webkit-scrollbar:horizontal { height: 9px;}
.ask40 .askPrice::-webkit-scrollbar-thumb {background-color: rgba(150,150,150, .5); border-radius: 5px; border: 2px solid #1f1f1f;}
.ask40 .askPrice::-webkit-scrollbar-track {border-radius:0;  background-color: #1f1f1f;}
.ask40 .askPrice > ul:nth-child(3n) {border-right:none}
.ask40 .askPrice > ul:nth-child(4) {border-bottom:none}
.ask40 .askPrice > ul .tic40 {height:160px}
.ask40 .ap-sum {border-top:1px solid #686868}
.ask40 .hodt {color:#999; letter-spacing:-.03rem}
.ask40 .askPrice.ap-sum::-webkit-scrollbar-thumb {background-color:transparent; border-radius: 5px; border: 2px solid #1f1f1f;}
.ask40 .askPrice.ap-sum::-webkit-scrollbar-track {border-radius:0;  background-color: #1f1f1f;}
.ask40 .askPrice.ap-sum ul > li {line-height:22px; height:22px}
.ask40 .askPrice > ul.sell-ask li:nth-child(10) {border-bottom: 1px solid #595959}
.ask40 .askPrice > ul.sell-price li:nth-child(10) {border-bottom: 1px solid #595959}
.ask40 .askPrice > ul.price-info li:nth-child(10) {border-bottom: 1px solid #595959}
.ask40 .askPrice > ul.buy-price li:nth-child(10) {border-bottom: 1px solid #595959}
.ask40 .askPrice > ul.buy-ask li:nth-child(10) {border-bottom: 1px solid #595959}

.x-hogasub-wrap {position:absolute; top: 280px; left: 334px; width:306px; height:256px; box-sizing: content-box; overflow-y: hidden; overflow-x: auto}
.x-hogasub-wrap .x-detail-memo {height:inherit}
.x-hogasub-wrap .x-detail-memo button { border:none; padding:0 10px; line-height:20px; border-radius:10px; color:#fff; background:#6c6558}
.x-hogasub-wrap .x-detail-memo > ul {margin-top:30px; overflow:auto; border-radius: 0}
.x-hogasub-wrap .x-detail-memo .x-memo-tab {width:100%; height: 25px; position:absolute; top:0; left:0; margin-top:0; padding:0 0 0 5px}
.x-hogasub-wrap .x-detail-memo .x-memo-tab li {float:left; width:calc(25% - 5px); min-width:65px; padding: 0; line-height: 23px}
.x-hogasub-wrap .x-detail-memo .x-memo-tab li:nth-child(4) {margin-right: 0}
.x-hogasub-wrap .x-detail-memo textarea {position:absolute; top:35px; bottom:0px; width:100%; border:none; padding:0 10px; background-color:transparent}
.x-hogasub-wrap .x-detail-memo .x-btn-area { position:absolute; bottom:3px; right:10px}
.x-hogasub-wrap .x-detail-memo .x-btn-area input {border:none; padding:0 10px; line-height:20px; border-radius:10px; color:#fff; background:#6c6558}
.x-hogasub-wrap .x-detail-memo .x-memo {display:none}
.x-hogasub-wrap th {height:20px; font-size:12px; white-space:nowrap; padding:0; border-color:#383a4a}
.x-hogasub-wrap td {height:30px; text-align:right; border-color:#383a4a}

.r-click {position:absolute; left:0; top:0; width:150px; min-height:100px; border:1px solid #595959; padding:5px; box-shadow:rgba(0,0,0,.2) 1px 1px 3px; background:#1f1f1f; z-index:500; display:none}
.r-click h2 { text-align:center; margin-bottom:5px}
.r-click ul {border-top:1px solid #595959; margin-bottom:5px; padding-top:5px}
.r-click ul:first-child {border-top:none; padding-top:0}
.r-click ul li {padding-left:20px; line-height:20px; font-size:12px}
.r-click ul li.chk {background:url(../images/bl_chk.png) no-repeat -px -1px}
.r-click ul li.dis {opacity:.5}
.r-click ul li.dis:hover {background:#999; opacity:.5}
.r-click ul li:hover {color:#fff; background:#6c6558; opacity:1}

#w-rvschart {height:inherit; overflow-y:auto}
#w-rvschart dl {position:relative; padding:0px 5px 10px; border-bottom:1px solid #1f1f1f}
#w-rvschart dt {padding-bottom:10px; cursor:pointer}
#w-rvschart dt span {padding-left:10px; color:#999}
.x-news-wrap {position:absolute; left:305px; bottom:25px; width:600px; height:240px }
.x-news-wrap h2 span {position:absolute; top:-1px; right:30px; color:#999}
.x-news-wrap ul { height:570px; padding:10px 20px; overflow-y:auto; word-break:keep-all; white-space:pre-wrap; line-height:1.8; background:#2d2d2d; z-index:1000}
.x-news-wrap ul img {max-width:100%}

.r-pop-prc {width:180px; height:240px; position:absolute; display:none; top:50px; left:50px; z-index:9999;}
.r-pop-prc > ul { position:relative; width:100%; height:20px; color:#fff; background:#1f1f1f}
.r-pop-prc > ul li { position:absolute; top:0; right:0} 
.r-pop-prc > ul li input {width:20px; height:20px; border:none; background:#555}
.r-pop-prc .orderPrice {display:block;position:relative;top:0px;right:0px; width:180px; height:240px; border:1px solid #595959; font-size:13px; overflow-x:hidden; overflow-y:scroll; background:#2d2d2d; z-index:10}
.r-pop-prc .orderPrice > ul {height:24px}
.r-pop-prc .orderPrice > ul:hover {border:1px solid #6c6558}
.r-pop-prc .orderPrice > ul li {float:left; width:40%; line-height:24px; text-align:right; padding-right:10px}
.r-pop-prc .orderPrice > ul li:first-child {width:60%}
.r-pop-prc .orderPrice > ul.x-bold li {font-weight:bold; background:#3c335a;}

.r-pop-ju {position:absolute; width:540px; height:160px; z-index:100; border:1px solid #595959; box-shadow:2px 2px 3px rgba(0,0,0,.5); display:none}
.r-pop-ju > ul {position:relative; width:100%; height:20px; color:#fff; background:#1f1f1f; overflow:hidden}
.r-pop-ju > ul li { position:absolute; top:0; right:0} 
.r-pop-ju > ul li input {width:20px; height:20px; border:none; background:#555}
.orderQuantity {position:relative; border:1px solid #1f1f1f; background:#2d2d2d}
.orderQuantity dl {clear:both; border-right:1px solid #595959}
.orderQuantity dl dt {float:left; width:10%; height:41px; border-bottom:1px solid #1f1f1f; line-height:39px; text-align:center; border-right:1px solid #1f1f1f; background:#2d2d2d}
.orderQuantity dl dd {float:left; width:90%; height:41px; border-bottom:1px solid #1f1f1f}
.orderQuantity dl dd p {float:left; width:calc(100% / 9); height:20px; padding:1px; overflow:hidden}
.orderQuantity dl dd p input {width:100%; height:18px; text-align:right; border:1px solid #595959; vertical-align:top}
.orderQuantity dl dd p input[readonly] {border:none; cursor:pointer }
.orderQuantity dl dd p input[readonly]:hover { border:1px solid #f6c501}
.orderQuantity dl:nth-child(3) dt {height:60px; border-bottom:none; line-height:59px}
.orderQuantity dl:nth-child(3) dd {height:60px; border-bottom:none}
.orderQuantity dl:nth-child(3) dd p {width:calc(89% / 4)}
.orderQuantity::after {content:''; display:block; width:100%; height:1px; clear:both}
.orderQuantity .btn {position:absolute; right:3px; bottom:3px}

.r-pop-rcmmd { display:none; position:fixed; top:0; width:400px; padding-bottom:20px; border:1px solid #555; background:#fff; z-index:1000}
.r-pop-rcmmd h1 { margin-bottom:10px; line-height:30px; padding-left:10px; font-weight:bold; color:#fff; background:#555}
.r-pop-rcmmd li { height:30px;}
.r-pop-rcmmd label {display:inline-block; width:80px; border:none; border-radius:10px; padding:0 5px; background:#fff}
.r-pop-rcmmd input { max-width:120px}
.r-pop-rcmmd .btn-area {text-align:center}
.r-pop-rcmmd .btn-area input { width:120px; line-height:30px}

.x-grid-bdy > ul {min-height:30px}
.x-grid-bdy > ul > li {float:left; height:40px; text-align:right; line-height:40px; font-size:14px; padding-right:10px; border-right:1px solid #595959; border-bottom:1px solid #595959}
.x-grid-bdy > ul .date {text-align:center; padding-right:0px}
.x-grid-bdy > ul .detail {padding-right:0; text-align:center}
.x-grid-bdy > ul.on {border:2px solid #6bc431}
.x-grid-bdy .itemList ul.on li{background:#3c335a}
.x-grid-bdy .itemList {display:none; padding-left:40px; border-bottom:1px solid #595959}
.x-grid-bdy .itemList ul {clear:both}
.x-grid-bdy .itemList ul li {float:left;}
.x-grid-bdy .itemList .th {height:20px; border-left:1px solid #595959;} 
.x-grid-bdy .itemList .th li {width:100px; text-align:center; line-height:20px; border-right:1px solid #595959; color:#fff; background:#595959}
.x-grid-bdy .itemList .td {height:24px; min-height:24px; border-left:1px solid #595959}
.x-grid-bdy .itemList .td li {width:100px; height:24px; text-align:right; line-height:24px; padding-right:10px; border-right:1px solid #595959; border-top:1px solid #595959; background:#383838}
.x-grid-bdy .itemList .td li.item {text-align:left; padding-left:10px; overflow:hidden}
.x-grid-bdy td div.tc input.x-btn {background:#6c6558}
.x-grid-bdy .view {display:block}
.x-grid-bdy td div.tc {text-align:center}
.x-grid-bdy td div.tc input {width:80px;}

.popConfirm {display:none; position:absolute; top:20%; left:0; width:300px; border:1px solid #595959; box-shadow:1px 2px 2px rgba(0,0,0,.3); background:#2d2d2d; z-index:100}
.popConfirm dl {position:relative}
.popConfirm dl dt {height:25px; color:#fff; line-height:24px; padding-left:5px; background:#474d58}
.popConfirm dl dt a {display:block; position:absolute; top:0; right:0; width:25px; height:25px; line-height:20px; text-align:center; background:#1f1f1f}
.popConfirm dl dd {height:100px; padding:30px 20px 0; text-align:center; word-break:keep-all}
.popConfirm.ln dl dd {height:150px; }
.popConfirm.ln dl dd div {padding-top:20px}
.popConfirm dl dd p {font-size:14px}
.popConfirm ul {height:30px; padding:5px 5px 0 0; text-align:right}
.popConfirm ul input[type=button] {width:50px;}

.unselectable {
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.full {position: absolute; top: 0;right: 0%; bottom: 0; left: 0; background: rgba(10,5,20,0.8); z-index: 1000}
.full ul {display: table; position: absolute; width: 100%; height: 100%; text-align: center; table-layout: fixed;}
.full ul li {display: table-cell; overflow: hidden; position: relative; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box;}
.full .pic {display: inline-block; overflow: hidden; margin: 0; opacity: 1; border-radius: 10px }
.full .pic video {position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; width: auto; min-width: 100%; min-height: 100%; margin: auto}

.x-info-menu,
.x-info-menu2 {float:left; width:11.5%; border-right:1px solid #595959; overflow:hidden; overflow-y:auto;}
.x-info-menu > div,
.x-info-menu2 > div { height:30px; line-height:30px; padding-left:10px; margin-top:5px; color:#777}
.x-info-menu > div.on, 
.x-info-menu2 > div.on {border-left:2px solid #fed807; color:#fff; background:linear-gradient(90deg, #1f1f1f, #34353c)}


/* swing */
.swing {position:absolute; top:38px; left:20px; width:calc(100% - 40px); height:6px}
.swing ul {position:relative; width:100%; height:inherit; border-radius:3px; background:#333; box-shadow:inset 0 2px 2px rgba(50,0,0,.3); overflow:hidden}
.swing ul .line {position:absolute; top:0; left:0; width:100%; height:6px; background:url(../images/swing_line.png) repeat-x; z-index:1; opacity:.6}
.swing ul .bar {position:absolute; width:440px; height:6px; top:0; box-shadow:inset 0 2px 2px rgba(50,0,0,.5);
	animation-duration:4s;
	animation-name:slidein;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-timing-function:linear
}
@keyframes slidein {
  0% {left:-110px; background-image: linear-gradient(90deg, rgba(248,215,53,0) 0%, rgba(248,215,53,1) 50%, rgba(248,215,53,0) 100%);}
  50% {background-image: linear-gradient(90deg, rgba(248,215,53,0) 0%, rgba(248,215,53,1) 50%, rgba(248,215,53,0) 100%);}
  100% {left:calc(100% - 330px); background-image: linear-gradient(90deg, rgba(248,215,53,0) 0%, rgba(248,215,53,1) 50%, rgba(248,215,53,0) 100%);}
}
.swing ul.s2 .bar {animation-name:slidestop}
@keyframes slidestop {
  0% {left:0; background-image: linear-gradient(90deg, rgba(248,215,53,0) 0%, rgba(248,215,53,1) 50%, rgba(248,215,53,0) 100%);}
  100% {left:0; background-image: linear-gradient(90deg, rgba(248,215,53,0) 0%, rgba(248,215,53,1) 50%, rgba(248,215,53,0) 100%);}
}
.swing ul.s3 .bar {display:none}

@media only screen and (max-height:910px) {
	.askPrice > ul > li {height:18px; line-height:18px}
    .askPrice > ul .tic {height:180px; overflow-y:scroll}
    .askPrice > ul .tic p {height:18px; line-height:18px}
    .x-hoga-bdy1.max .askPrice .reverse {height:180px}
	.x-hoga-wrap, .x-chart-wrap {height:400px;}
	.x-detail-hoga .x-order-price ul {height:360px}
	.x-multi-wrap {height:365px; overflow-y:auto}
	.x-hoga-bdy1 {height:400px}
	.x-hoga-bdy2 {height:400px}
	.x-hoga-bdy2 .x-multi-wrap { height:328px}
	.x-hoga-bdy2 .x-btn-area { padding-top:4px}
	.x-hoga-bdy2 .x-btn-area input {height:29px}
	.x-hoga-bdy2 .normal .edit .order-info {max-height:150px}
	.x-hoga-bdy2 .normal .edit .order-info td {height:24px}
	.ask40 .askPrice {height:360px}
	.ask40 .askPrice.ap-sum {height:36px}
	.ask40 .askPrice.ap-sum ul > li {line-height:19px; height:19px}
	aside.pc-side .x-remote {height:400px}
    aside.pc-side .ani2 {height: calc(100vh - 540px)}
    .bb.off {top:-22px}
    .x-hogasub-wrap {position:absolute; top: 240px; height: 170px}
    .x-hoga-bdy2 .normal .sell.on .order-btn {position: absolute; right: 0; top: 155px}
}

@media only screen and (max-width:1271px){
    .x-tab li.btn-earn {right: auto; left: 1185px}
}

.x-grid-chart {display:flex; flex-direction: row; flex-wrap: wrap;}
.x-minichart {width:180px;}