body {overflow:hidden}
#wrap {margin-top:40px; padding-top:0; height:calc(100vh - 40px); overflow:auto}

img {vertical-align:top}
em {font-style:normal}
table {width:100%; background:#1a2a3e}
table thead th {border-bottom:1px solid #495360; text-align:center; background:#24394d}
table thead td {border-bottom:1px solid #495360; text-align:center; padding:0 10px; background:#24394d}
table tbody th {border-bottom:1px solid #495360}
table tbody td {border-bottom:1px solid #495360; padding:0 10px}
section {}
input[type=button] {padding:0 5px}
.bt1 input[type=button], .bt1 button {padding:0 5px; border:none; color:#67c1f5; background:#274155}

.grd1 {color:#fff; background:rgba(255,103,0,1)}
.grd1:hover {background:linear-gradient(125deg, rgba(255,175,75,1) 0%, rgba(255,103,0,1) 100%); transition:ease .5s}

.pre {white-space:pre-wrap}

header {display:flex; position:fixed; top:0; left:0; width:100%; height:auto; min-height:40px; 
	background-repeat:no-repeat; background-color:#341a35e6; background-size:100% 70px; background-position:0 0; z-index:100}
header > div {position:relative; width:1200px; height:inherit; margin:0 auto; padding-top:10px}
header h1 {position:absolute; top:0; left:0}
header h1 a { display:block; width:140px; height:40px; text-indent:40px; padding-top:8px; margin-left: 3px;
	font-size:20px; font-weight:800; white-space:nowrap;
	background-image:url(../images/logo_top.png); 
	background-repeat:no-repeat; background-position:left; background-size:contain; background-size:auto 30px}
/* header:before {content:''; display:block; position:absolute; top:0; left:50%; width:1200px; height:39px; margin-left:-600px; background-image:url(../images/top_bg2.png); background-repeat:no-repeat; background-size:1200px 70px}
header:after{content:''; display:block; position:absolute; top:39px; left:0; width:100%; height:1px; background:#606069; z-index:-1} */

header .appBtn {position:absolute; top:5px; right:150px; z-index:10}
header .appBtn a {padding:0 10px; font-size:14px; line-height:20px; border-radius:10px}
header .appBtn dt {display:none}
header .appBtn dt div:nth-child(2) {display:none}
header .appBtn dd div:nth-child(2) {display:none;}

header .appBtn input {width:25px; height:25px; text-indent:-9000px; border:none; margin-left:10px; background-image:url(../images/btn_win2.png); background-color:transparent;}
header .appBtn input.win_max {background-position:-25px 0}
header .appBtn input.win_min {background-position:-50px 0}
header .appBtn table th, header .appBtn table td {padding:10px;}
header .appBtn table td {text-align: right;}

header .caption { width:100%; height:40px}
header .cls {display:none;position:absolute; top:0; right:10px; z-index:10}
header .cls input {padding:3px; border:1px solid #ddd; background: transparent; width:30px; height: 30px; text-indent: -1000px; background-image:url(../images/btn_win.png); background-position:5px 30px;}
header h2 {padding:5px;}
header .topBtn {position:absolute; top:0; right:10px; z-index:10}

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

.list {margin-bottom:30px}
.ui-datepicker table { background:#eee}
.ui-datepicker table thead th {background:#fff}

.x-loading { height:50px; line-height:50px; padding-left:80px; background-color:#1b2838; background-image:url(../images/loading.gif); background-repeat:no-repeat; background-position:45px 12px; background-size:26px; color:#ffffff;}

.scroll::-webkit-scrollbar { -webkit-appearance: none;}
.scroll::-webkit-scrollbar:vertical {width:9px;}
.scroll::-webkit-scrollbar:horizontal { height: 9px;}
.scroll::-webkit-scrollbar-thumb {background-color: rgba(150,150,150, .5); border-radius: 5px; border: 2px solid #f1f1f1;}
.scroll::-webkit-scrollbar-track {border-radius:0;  background-color: #f1f1f1;}

.mNav {display:none}
.navi {width:60%; height:50px; margin-left:23%; font-family:'NanumSquare'; color:#fff; overflow:hidden; transition:ease .2s}
.navi:hover {height:240px; transition:ease .4s;}
.navi dl {float:left; display:inline-block; width:auto; margin-right:30px; padding-bottom:30px}
.navi dl dt {position:relative; padding-right:30px; margin-bottom:40px}
.navi dl dt:after {content:''; display:none; position:absolute; bottom:0; left:0; width:calc(100% - 26px); height:3px; border:none; border-radius:2px; background:#ff9500}
.navi dl dt a {line-height:50px; font-size:18px; font-weight:600; padding-left:4px }
.navi dl dd {}
.navi dl dd a {display:block; line-height:30px; font-size:14px; transform:skew(-0.03deg)}
.info {position:absolute; top:10px; right:0; width:20%; color:#fff}
.info li {float:left; width:40%; line-height:30px; text-align:center}
.info .login {padding-top:10px}
.info .logout {padding-top:10px}

.subTop { height:50px}
.subTop > ul {width:1100px; height:inherit; margin:0 auto; padding-top:10px}
.subTop > ul li {display:inline-block; padding:0 5px; margin:0 10px; color:#14a5ef; font-size:18px; font-weight:600; font-family:'NanumSquare'}

.subTab {width:800px; margin:0 auto; padding-top:50px;}
.subTab ul { height:50px;}
.subTab ul.n3 li {float:left; width:calc(100% / 3 - 20px); height:inherit; margin:0 10px; color:#fff; text-align:center; line-height:50px; border:1px solid #fff; border-radius:25px; opacity:.5}
.subTab ul.n3 li:hover {opacity:.8}
.subTab ul.n3 li.on {opacity:1; border-color:#ff6700; background:#ff6700}

.table {width:100%}
.table ul {width:100%; min-height:50px; clear:both; border-bottom:1px solid #495360}
.table ul > li {position:relative; float:left; height:50px; line-height:50px; text-align:center}
.table:after {content:''; display:block; clear:both}
.table .thead {width:100%; height:50px}
.table .tfoot li {color:#cfe8f5; background:#1a2a3e}

.h-table {width:100%; background:#1a2a3e}
.h-table h3 {margin-bottom:20px}
.h-table dl:last-child {border-bottom:1px solid #495360}
.h-table dl {display:table; width:100%; min-height:80px; line-height:30px; border-top:1px solid #495360}
.h-table dt {display:table-cell; width:25%; padding:10px 20px; vertical-align:middle; text-align:center; background:#24394d}
.h-table dd {display:table-cell; width:75%; padding:10px 20px; vertical-align:middle}
.h-table.grid2 dt {width:15%}
.h-table.grid2 dd {width:35%}
.h-table input[type=tel] {border:1px solid #495360; text-align:right; padding:0 5px; background:rgba(0,0,0,.1)}

.explain {margin-bottom:30px; padding-top:30px}
.explain h3 {margin-bottom:20px; font-size:18px}
.explain p {margin-bottom:10px; font-size:13px}
.explain p.depth {padding-left:10px}

.container { position:relative; width:1100px; min-height:calc(100vh - 300px); margin:20px auto 0}
.content  {width:100%; height:auto; min-height:calc(100vh - 420px); margin-bottom:50px; border:1px solid #495360; border-radius:5px; padding:50px 80px; color:#becde2; background:#1b2838}
.content > ul {margin-bottom:50px}
.content.scrollbar {height:540px; overflow:hidden; overflow-y:scroll}

.guideArea dl {margin-bottom:30px}
.guideArea dt {color:#fff; margin-bottom:10px}
.guideArea dd p { position:relative; padding-left:10px}
.guideArea dd p:before { content:'ㆍ'; position:absolute; top:0; left:-5px}
.guideTable {margin-bottom:50px}

.acc-conf {position:absolute; bottom:0; width:100%; border-top:1px solid #4a5462; z-index:10; font-size:13px; line-height:25px;}
.acc-conf ul {margin:0 20px; padding-top:10px}
.acc-conf li { position:relative; height:30px; text-align:right}
.acc-conf li label { position:absolute; top:0; left:0}
.acc-conf li span {}
.acc-conf li.btn { height:40px; padding-top:5px; text-align:center} 
.acc-conf dl:after { content:''; display:block; clear:both}
.acc-conf dt {float:left; width:40%; text-align:center; border-bottom:1px solid #ccc}
.acc-conf dd {float:left; width:60%; text-align:right; border-bottom:1px solid #ccc; padding-right:10px}
.acc-conf button {width:100px; border:none; border-radius:5px; background:#fff}
.acc-conf .toggle div {display:inline-block; width:120px; border:none; border-radius:5px; background:rgba(0,0,0,.1); overflow:hidden}
.acc-conf .toggle div button {float:left; width:100px; border:none; border-radius:5px; color:#999; background:#fff}
.acc-conf .toggle div.on button {float:right; color:#fff; background:#3C0; opacity:1}

.ui-widget-header {border-color:#0384b0; background:#1b9ecb}

/* Home */
.visual {width: 100%; height: 720px; background-color: #06152d}
.visual .txt {position: absolute; top:25%; width: 100%; text-align: center; z-index: 10}
.visual .txt li { width: 1000px; margin: 0 auto 30px; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,.5)}
.visual .txt h1 {font-size: 48px; margin-bottom:20px}
.visual .txt h2 {font-size: 36px}
.visual .txt h3 {font-size: 24px}
.visual .bg {height: inherit; background-image: url(../images/visual01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .75}
.infoBox {position: relative; width: 1100px; height: 160px; margin:-50px auto 100px; padding-top:30px; background: #fff; z-index: 10; border-radius:10px; box-shadow: 1px 2px 5px rgba(0,0,0,.2);overflow: hidden}
.infoBox > ul {position: relative; float: left; width: 50%; padding:0 30px;}
.infoBox > ul+ ul:before {content: ""; display: block; position:absolute; top:0; left:-10px; width:1px; height: 100px; background: #ccc}
.infoBox > ul .infotxt {}
.infoBox > ul .infotxt ul > li {font-size: 15px; text-align: left}
.mtit {font-size:42px; text-align:center; color:#3a3d60; margin-bottom:50px}
.overview {}
.overview > div {position:relative; margin-bottom:120px}
.overview > div .img {float:left}
.overview > div .txt {position:absolute; top:60px; right:0; width:45%; height:360px; padding:40px 50px 0; background-color:rgba(241,243,248,.7); z-index:10}
.overview > div .txt h3 {font-size:36px; margin-bottom:50px; color:#2c80ff}
.overview > div .txt h3:after { content:''; position:absolute; bottom:-20px; left:0; display:block; width:50px; height:2px; background:#2c80ff}
.overview > div .txt li {position:relative; margin-bottom:30px; font-family:'NanumSquare'; font-size:18px; line-height:1.8}
.overview > div .txt li .btn {display:block; width:180px; height:40px; border:none; border-radius:20px; line-height:40px; text-align:center; color:#292421; background-color:#ffd118}
.overview > div:after {content:''; display:block; clear:both}
.overview > div:nth-child(even) .img {float:right}
.overview > div:nth-child(even) .txt {left:0; right:auto;}

/* stkbox */
.stkbox-wrap {position: relative; display: inline-block;}
.stkbox-items {position: absolute; border: 1px solid #d4d4d4; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; max-height:320px; overflow-y:auto}
.stkbox-items div {padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; text-align:left; }
.stkbox-items div:hover {background-color: #e9e9e9;}
.stkbox-items div span {display:inline-block; width:20px; height:20px; line-height:18px; text-align:center; margin-right:5px; border:0px solid #ccc}
.stkbox-items div span.on { text-indent:-9000px}
.stkbox-items div span.off {color:#6d6698}
.stkbox-active {color: #ffffff; background-color: DodgerBlue !important;}

/* Trade */
.tradeArea {height:90px; padding:20px 30px 0; color:#fff; background:#162436}
.tradeTime {float:left; width:50%}
.tradeTime dl {float:left; width:42%}
.tradeTime dl:first-child {width:33%}
.tradeTime dl:last-child {width:25%}
.tradeTime dt {font-size:14px; line-height:1.2; font-weight:400; color:#5294a8; margin-bottom:5px}
.tradeTime dd {font-size:32px; line-height:1.2; font-weight:600; font-family:'NanumSquare'}
.tradeTime dd span {font-size:30px}
.tradeTime dd.leftTime {color:#ff9500}
.tradeTime dd.profit {font-size:20px;}

.tradeType {position:relative; float:right; width:50%; padding-left:20px}
.tradeType:before {content:''; display:block; position:absolute; top:0px; left:0; width:1px; height:50px; background:#344658}
.tradeType ul {text-align:right}
.tradeType li {display:inline-block; text-align:center; margin:0 10px; padding:0 10px; line-height:50px; font-size:18px; font-family:'NanumSquare'}
.tradeType li.on {border-bottom:3px solid #ff9500}

.trade.content {float:left; width:780px; padding:0; border:none; background:none}

.ajs-message {color:#fff;  background-color:#24394d; border-radius:10px; border-width:3px; border-style:solid; box-shadow:1px, 1px, 5px, rgba(0,0,0,.3)}
.ajs-message.ajs-buy {border-color:#ff4151; background-color:#f3a7b7;}
.ajs-message.ajs-sell {border-color:#0179f1; background-color:#8dc2f3;}
.ajs-message.ajs-cancel {border-color: #31708f; }
.ajs-message.ajs-win {border-color:#ff4151; color:#fff; background-color:#ff4151}
.ajs-message.ajs-lose {border-color:#0179f1; color:#fff; background-color:#0179f1}
.ajs-message.ajs-draw {border-color: #31708f; }

.lot .pipGap {display:inline-block; position:relative}
.lot .pipGap span { position:absolute; top:10px; right:-25px; width:15px; height:30px; background-image:url(../images/up.png),url(../images/down.png); background-repeat:no-repeat; background-position:0 2px, 0 15px}

.charts {margin-bottom:20px; border:1px solid #495360; border-radius:10px; background:#1a2a3e; overflow:hidden}
.charts-top {height:40px; padding:0 20px; border-bottom:1px solid #495360; color:#fff; background:#24394d}
.charts-top .sym-code {display:inline-block; margin-right:10px}
.charts-top label { display:inline-block; margin:0 10px 0 20px; border-radius:3px; font-size:13px; line-height:18px; font-weight:400; color:#c1cdda; padding:0 5px; background:#425161} 
.charts-bdy {height:320px}
.charts-bottom { text-align:center}
.charts-bottom > ul {margin-top:-5px; padding-bottom:5px} 
.charts-bottom input { display:inline-block; width:50px; height:25px; font-size:24px; line-height:25px; opacity:.5}
.charts-bottom input:first-child { border-radius:15px 0 0 15px}
.charts-bottom input:last-child { border-radius:0 15px 15px 0}
.charts-bottom input:hover {opacity:.8}

.x-chart-tick { position:absolute; top:0px; left:10px; height:30px; z-index:300}
.x-chart-tick li p {font-size:13px; 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}

.lotArea {font-weight:600; border:1px solid #495360; border-radius:10px; overflow:hidden }
.lotArea .lotList  {border-top:1px solid #495360; background:#1a2a3e}
.lotArea .table > ul > li:nth-child(1){width:50%; border-right:1px solid #495360}
.lotArea .table > ul > li:nth-child(2){width:50%}
.lotList .table ul {border:none}
.lotList #buyMax {display:inline-block; margin-right:10px; font-size:12px; line-height:30px; border-radius:15px; padding:0 10px; background:#fff}
.lotList #sellMax {display:inline-block; margin-right:10px; font-size:12px; line-height:30px; border-radius:15px; padding:0 10px; background:#fff}
.lotArea .lotList  > ul.tfoot {height:50px}
.lotArea .lotList  > ul.tfoot li {border-bottom:none}
.lotArea .lotList  > ul.tfoot li:nth-child(1){width:50%; text-align:left; border-right:none}
.lotArea .lotList  > ul.tfoot li:nth-child(1) p {margin-left:20px}
.lotArea .lotList  > ul.tfoot li:nth-child(2) {width:50%; text-align:right}
.lotArea .lotList  > ul.tfoot li:nth-child(2) p {margin-right:20px}
.lotArea .btn-group {padding-left:25px}
.lotArea .btn-group .btn {display:block; float:left; border:1px solid #495360; border-radius:5px; text-align:center; line-height:30px; vertical-align:middle; background:rgba(0,0,0,.1)}
.lotArea .order {padding:10px 0 5px}
.lotArea .btn.buy, .lotArea .btn.sell {width:calc(100% / 4 - 10px); margin-right:5px; margin-bottom:5px; font-size:14px}
.lotArea .lotList .table > ul > li {height:auto}
.lotArea .lot input[type=text] {width:calc(100% - 200px); height:30px; line-height:30px; border:1px solid #495360; text-align:right; padding-right:5px; border-radius:5px; color:#fff; background:#0c1c2c}
.lotArea .lot input[type=button] {width:35px; height:30px; line-height:30px; border-radius:5px}
.lotArea .lot .order-btn {border-top:1px solid #495360}
.lotArea .lot button {width:70px; height:30px; line-height:30px; border-radius:5px}
.lotArea .lot button + div {height:30px; line-height:30px; margin-bottom:10px; padding:0 25px}
.lotArea .lot button + div > div {float:left; width:50%; text-align:right}
.lotArea .lot button + div .reverse {display:block; float:left; width:calc(50% - 10px); margin-left:10px; line-height:30px; border-radius:5px}

.order-btn .block {position:relative}
.order-btn .buy.block:after {content:'매수마감'; display:block; position:absolute; top:0; right:25px; width:calc(50% - 35px); color:#c1cdda; border:1px solid #33404f; border-radius:5px; background:#425161}
.order-btn .sell.block:after {content:'매도마감'; display:block; position:absolute; top:0; right:24px; width:calc(50% - 35px); color:#c1cdda; border:1px solid #33404f; border-radius:5px; background:#425161}

#pBuy .order-btn span {font-size:13px; color:#ff4151}

.buy, .up {color:#ff4151}
.sell, .dn {color:#0179f1}

.buy .reverse {border:1px solid #ff4151; color:#fff; background:#ff4151 !important}
.sell .reverse {border:1px solid #0179f1; color:#fff; background:#0179f1 !important}

.maxcount {display:inline-block; color:#fff; font-size:12px; padding:0 5px; border-radius:5px; line-height:30px; vertical-align:middle}
.maxcount.buy {border:1px solid #fff; background:#ff4151}
.maxcount.sell {border:1px solid #fff; background:#0179f1}

.tradePop {width:540px; border:1px solid #c2c4c8; color:#000; background:#fff}
.tp-top { position:relative; height:50px; text-align:center; line-height:50px; color:#fff; background:rgba(36,48,62,1)}
.tp-top input {position:absolute; top:0; right:0; width:50px; height:50px; border:none; font-size:24px; background-color:transparent}
.tp-body {padding:0 20px;}
.tp-body .tp-type {position:relative; float:right; margin:0; padding-top:50px; font-size:18px}
.tp-body .tp-type a {display:block; position:absolute; top:0; right:-20px; width:40px; height:40px; text-align:center; font-size:24px; color:#999; background:#eee}
.tp-body > ul {clear:both; margin-bottom:20px}
.tp-body .tp-title h2 {font-size:36px; text-align:center; margin-bottom:20px}
.tp-body .tp-title p {width:50%; margin:0 auto; text-align:center; font-size:14px}
.tp-box {padding:20px; text-align:center; background:#f2f4f8}
.tp-box li:first-child { width:80%; margin:0 auto; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #c1c4c8}
.tp-box li:first-child h3 {margin-bottom:10px;}
.tp-box li:first-child p {font-family:"NanumSquare"; font-size:28px; line-height:32px}
.tp-box li:first-child p span {font-size:32px; letter-spacing:-0.05em; color:#f74d00}
.tp-box .space {display:inline-block; margin:0 10px; color:#203598}
.tp-guide {font-size:14px; padding:0 10px}
.tp-btn {text-align:center; font-size:24px; font-family:'NanumSquare'}
.tp-btn li {display:inline-block}
.tp-btn li.time {line-height:50px; border:1px solid #c2c4c8; border-radius:5px; padding:0 10px; margin-right:10px}
.tp-btn .btn { display:inline-block; line-height:50px; border:none; border-radius:5px; padding:0 20px; color:#fff;}
.buy .tp-btn .btn {background:#ff4151}
.buy .tp-type {color:#ff4151}
.sell .tp-btn .btn {background:#0179f1}
.sell .tp-type {color:#0179f1}


aside {float:right; width:300px; height:auto; background:#1a2a3e}

.x-codes-box { position:relative; height:auto; border:1px solid #495360; border-radius:10px; overflow:hidden; margin-bottom:20px}
.x-codes-box h2 {height:47px; padding-left:20px; color:#66c0f4; line-height:47px; background:#24394d; margin-bottom:10px; display:none}

.x-codes-box .x-jisu {float:left; width:80%; text-align:center; line-height:30px}
.x-codes-box .x-jisu li {float:none; display:inline-block}
.x-codes-box .x-time {float:left; width:20%; text-align:center} 

.x-codes {padding-top:5px}
.x-codes li {float:left; width:calc(100% / 8 - 10px); margin:0 5px 5px; border:none; border-radius:10px; font-size:20px; font-family:'NanumSquare'; color:#fff; line-height:30px; text-align:center; cursor:pointer;}
.x-codes li.x-disable {color:#4a515d;}
.x-codes li.x-enable {color:#cfd9e7;}
.x-codes li.on {color:#fff; background:#ff6700}

aside .x-trade-box {border:1px solid #495360; border-radius:10px; overflow:hidden; margin-bottom:20px}
aside .tab {height:40px; background:#24394d}
aside .tab ul {text-align:center}
aside .tab ul li {float:left; width:100%; height:inherit; border-bottom:1px solid #495360; color:#999; line-height:40px; cursor:pointer}
aside .tab ul li:first-child {border-right:none} 
aside .tab ul li.on {color:#66c0f4}
aside .tab ul li.on:after {}
aside .resultList .thead {color:#fff; font-weight:400; background:#1a2a3e}
aside .resultList .tbody { height:297px; overflow:hidden; overflow-y:auto}
aside .resultList#_chelst .tbody {height:297px}
aside .resultList#_my_chelst .tbody {height:281px}
aside .resultList .tbody td {line-height:50px}
aside .resultList {font-weight:600}
aside .resultList .scrollbar::-webkit-scrollbar-thumb {border:2px solid #1d2c3f}
aside .resultList .scrollbar::-webkit-scrollbar-track {background-color:#1d2c3f}
aside .resultList > ul li:nth-child(1) {width:40%}
aside .resultList > ul li:nth-child(2) {width:30%}
aside .resultList > ul li:nth-child(3) {width:30%}

aside .table td {border-bottom:none; text-align:center; color:#becde2; font-size:14px; font-weight:400}
aside .table tr:last-child td {border-bottom:none}
aside .table tr:nth-child(odd) { background:rgba(0,0,0,.2)}

#resultList {width:100%}
#resultList td {text-align:center; border-bottom:1px solid #495360; line-height:50px; font-size:14px; color:#555; background:#fff}
#resultList td:nth-child(1){width:40%}
#resultList td:nth-child(2){width:30%}
#resultList td:nth-child(3){width:30%}

.btnBox { position:relative; text-align:center; padding-top:30px}
.btnBox .btn {display:inline-block; min-width:120px; height:40px; padding:0 10px; line-height:40px; color:#fff; border:none; border-radius:5px; background:rgba(255,103,0,1)}
.btnBox .cancel {background:#999}
.btnBox .moreview {border:1px solid #495360; background-color:transparent}
.btnBox .leave {display:block; position:absolute; left:0; top:0; color:#5a81a7}

.title {font-size:24px; line-height:50px; font-weight:600; color:#14a5ef}
.stxt {font-size:14px; font-weight:400; color:#727478}
.stit {font-size:18px; font-weight:600; color:#14a5ef; margin-bottom:20px}
h4.stit {font-size:16px; margin-bottom:10px}

.ajs-frameless .ajs-dialog {background-color:transparent}

.xxx-box { position:relative; width:300px; height:100px; text-align:center; padding-top:50px}
.xxx-box:after {display:block; position:absolute; top:0px; width:300px; height:100px; border:none; border-radius:50px; color:#fff; font-size:48px; line-height:100px; text-align:center; z-index:10}
.xxx-buy:after {content:'매수'; background:#ff4151}
.xxx-sell:after {content:'매도'; background:#0179f1}
.xxx-win:after {content:'WIN'; background:#ff4151}
.xxx-lose:after {content:'LOSE'; background:#0179f1}
.xxx-draw:after {content:'DRAW'; background:#3ca03c}

/* 로그인 */
.loginBox {position:fixed; top:50%; left:50%; width:400px; height:500px; margin:-200px 0 0 -200px; border:none; border-radius:20px; text-align:center; background:#f7f8f9; overflow:hidden; z-index:100}
.loginBox > ul {position:relative; min-height:150px}
.loginBox .loginTop {height:290px; background:linear-gradient(180deg, rgba(255,60,0,1) -30%, rgba(255,120,0,1) 100%)}
.loginBox .loginTop h2 {position:absolute; top:80px; width:100%; text-align:center }
.loginBox .loginTop h2 a {display:none; padding-top:50%; width:80%; margin:0 auto; background-image:url(../images/logo_top.png); background-repeat:no-repeat; background-position:center; background-size:contain}
.loginBox .inputForm {position:absolute; top:-150px; left:6%; width:88%; padding:40px 30px 30px; border:none; border-radius:10px; background:#fff; z-index:10}
.loginBox .inputForm li {margin-bottom:10px}	
.loginBox .inputForm input {width:100%; height:40px; line-height:40px; border:1px solid #eee; border-radius:20px; padding-left:15px; margin-bottom:10px}
.loginBox .inputBot {position:absolute; bottom:20px; width:100%; text-align:center; font-size:14px; color:#777}
.loginBox .inputBot a {display:inline-block; padding:0 10px}
.loginBox .btn { display:block; width:100%; height:50px; margin:0 auto; text-align:center; line-height:50px; font-weight:600; font-size:18px; border-radius:25px; border:none}  

.lostPop {content:''; display:block;  position:fixed; top:0; left:0; bottom:0; width:100%; background:rgba(0,0,0,.5); z-index:1; display:none}

.lostBox {position:absolute; top:50%; left:50%; width:400px; height:500px; margin:-250px 0 0 -200px; background:#fff; z-index:100}
.lostBox > div {position:relative}
.lostBox > div h2 {height:50px; padding-left:10px; line-height:50px; color:#fff; background:#24303e}
.lostBox > div .close{ position:absolute; top:0; right:0; z-index:100}
.lostBox > div .close input {width:50px; height:50px}
.lostBox ul {text-align:center}


/* 거래결과 */
.tradeResult th {line-height:40px}
.tradeResult td {text-align:center; line-height:40px}
.search {margin-bottom:30px}
.search select {width:120px; line-height:30px; padding-left:5px}
.search .date, .date_pick .date {display:inline-block; border:1px solid #495360; padding:0 5px}
.search .date input[type=text], .date_pick .date input[type=text] {width:120px; border:none; line-height:30px; background-color:transparent}
.date input[type=button] {width:30px; height:30px; border:none; text-indent:-9000px; background-image:url(../images/ico_cal.png); background-size:24px; background-position:center; background-color:transparent; background-repeat:no-repeat; opacity:.8}


/* 입출금 */
.date_pick { position:relative; margin-bottom:20px;}
.date_pick li:last-child { position:absolute; top:0; right:0}
.date_pick input[type=radio] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:none}
.date_pick label {display:inline-block; height:30px; padding:0 5px; border:1px solid #495360; border-radius:5px; margin-left:5px}
.date_pick input[type=radio]:checked+label {background:rgba(255,103,0,1); border:none; color:#fff}

.mystate {line-height:40px}


/*마이페이지*/
.qna_table li:nth-child(1) {width:10%}
.qna_table li:nth-child(2) {width:60%}
.qna_table li:nth-child(3) {width:20%}
.qna_table li:nth-child(4) {width:10%}
.qna_table .tbody li:nth-child(2) {width:60%; text-align:left}
.mytrade_table th {text-align:center; line-height:30px;}
.mytrade_table td {text-align:center; line-height:50px;}

.leavePop {position:absolute; top:50%; left:50%; width:480px; height:320px; margin:-160px 0 0 -240px; border:1px solid #ccc; box-shadow:1px 2px 5px rgba(0,0,0,.3); background:#fff; z-index:100}
.leavePop h2 { padding-left:10px; line-height:50px; background:#eee}
.leavePop ul { margin:0 20px; text-align:center; padding-top:50px;}
.leavePop ul li {margin-bottom:30px}
.leavePop ul .txtinfo {padding:0 60px}
.leavePop ul.btnArea {border-top:1px solid #ddd; padding-top:30px}

/* 회원가입 */
.join {margin-bottom:80px}
.inputinfo {width:100%; color:#c1c2c8; margin:0 auto 30px; padding:4% 10% 2%; border:1px solid #ccc; border-radius:10px}
.inputinfo dl {position:relative; width:100%; height:50px; margin-bottom:10px}
.inputinfo dl dt {position:absolute; font-size:14px; color:#799abb; white-space:nowrap}
.inputinfo dl dd {padding-left:20%}
.inputinfo dl dd input, .inputinfo dl dd select {width:100%; border:none; border-bottom:1px solid #495360; line-height:30px; background-color:transparent}
.inputinfo dl.one {float:none; width:100%; clear:both;}
/*.inputinfo dl.one dt {width:12%}*/
.inputinfo dl.one dd input, .inputinfo dl.one dd select {width:auto}
.inputinfo dl.pass input[type=password] {width:calc(50% - 10px); display:block; float:left}
.inputinfo dl.pass input[type=password] + input {margin-left:20px}
.inputinfo dl.account #BankNm {width:calc(30% - 10px); display:block; float:left}
.inputinfo dl.account #No {width:calc(40% - 10px); display:block; float:left; margin-left:20px}
.inputinfo dl.account #AcctNm {width:calc(30% - 20px); display:block; float:left; margin-left:20px} 
.inputinfo dl.email #email1 {width:calc(30% - 10px); display:block; float:left}
.inputinfo dl.email #email2 {width:calc(40% - 10px); display:block; float:left; margin-left:20px}
.inputinfo dl.email #email_kind {width:calc(30% - 20px); display:block; float:left; margin-left:20px} 
.inputinfo dl.email span {position:absolute}
.inputinfo .btn {display:block; position:absolute; width:10%; top:0; right:0; border:none; padding:0 5px; font-size:14px; text-align:center; line-height:30px}
.inputinfo:after {content:''; display:block; clear:both}
.txtinfo {font-size:13px; color:#777}

.agreeArea ul {margin-bottom:30px}
.agreeBox.scrollbar::-webkit-scrollbar-thumb {border:2px solid #1d2c3f}
.agreeBox.scrollbar::-webkit-scrollbar-track {background-color:#1d2c3f}
.agreeBox { height:180px; word-break:keep-all; white-space:pre-wrap; padding:0 10px; border:1px solid #495360; font-size:14px; overflow:hidden; overflow-y:auto; background:#141e2b}

/* tradeStock */
.x-hoga-bar {position:relative; width:100%; height:40px}
.x-hoga-bar > form > ul {width:600px; height:32px; padding-left:5px; border:1px solid #c0c8d7; border-radius:10px; background:#fff; overflow:hidden}
.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; padding-top:4px;}
.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:18px; font-weight:600; font-family:'NanumSquare'; 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 4px bottom; background-size:10px auto}
.x-hoga-bar ul li.x-uline + li {padding-top:4px; margin:0 10px}
.x-hoga-bar .x-price {min-width:60px; line-height:30px; font-size:16px; text-align:right; margin-right:10px}
.x-hoga-bar .x-item-info {min-width:100px; line-height:30px; margin-right:10px}
.x-hoga-bar .x-volume {line-height:30px; font-size:14px; color:#777}
.x-hoga-bar .x-volume span { padding-right:10px; font-size:12px}
.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; opacity:1}
.x-hoga-bar button[name=btnRcmmd] { display:block; position:absolute; top:5px; right:5px; width:30px; height:24px; line-height:23px}
.x-hoga-bar .stkbox-items {width:300px; color:#777}
.x-hoga-wrap .x-order-pop {display:none}

/* askPrice */
.x-hoga-wrap {float:left; width:600px; height:440px; margin-bottom:19px; overflow:hidden}
.x-chart-wrap {position:relative; float:right; width:590px; height:inherit; margin-bottom:20px; border-radius:5px; overflow:hidden}
.tool-bar {height:40px; padding-top:4px; padding-right:5px; border-bottom:1px solid #ccc; background:#fff}
.tool-bar .fr {float:right; padding:0 10px}
.tool-bar .fr p {float:left; margin-right:10px; padding-right:10px; border-right:1px solid #ddd;}
.tool-bar .fr p:last-child {border-right:none}
.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}
.tool-bar .line-btn input.on, .tool-bar .line-btn input:active {border:1px solid #219ced; border-radius:3px; box-shadow:1px 1px 2px rgba(0,0,0,.1) inset; background-color:#f8f9fa}
.tool-bar button {height:20px; width:50px;}
.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}

.slider {width:100%; height:30px; overflow:hidden}
.slider .slider-bar {float:left; width:calc(100% - 150px); height:30px; background:#e6e6e6}
.slider .slider-bar .x-slider {float:left; margin-top:5px; width:calc(100% - 60px)}
.slider .slider-bar button {float:left; width:30px; height:30px; 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:150px; height:30px; background:#e6e6e6}
.slider .zoom .zoom-handle {position:relative; margin:0 10%}
.slider .zoom .zoom-bar { position:absolute; top:12px; left:5%; width:calc(90% - 40px); height:6px; border:1px solid #ccc; border-radius:3px; background:#eee; z-index:1}
.slider .zoom .zoom-bar span {position:absolute; display:block; top:-6px; z-index:50; width:6px; height:18px; margin-left:.5%; border:none; border-radius:3px; background:#1b9ecb}
.slider .zoom button {width:20px; height:20px; float:right; border:none; border-radius:15px; text-indent:-9000px; background-color:#f1f1f1; background-image:url(../images/ico_zoom.png); background-repeat:no-repeat; background-position:top -1px right}
.slider .zoom button:first-child {margin-left:3px; background-position:top -21px right}

.x-chart-bdy {width:inherit; height:368px; background:#fff}

.x-hoga-bdy1 {position:relative; float:left; width:50%; height:inherit; font-size:13px; border-radius:5px; overflow:hidden}
.x-hoga-bdy2 {position:relative; float:right; width:calc(50% - 10px); height:inherit; margin-left:10px; border-radius:5px; overflow:hidden}

.askPrice {position:relative}
.askPrice > ul {float:left; width:39%; height:200px; border-right:1px solid #ccc; background:#f4f4f4}
.askPrice > ul:nth-child(3n - 1) {width:22%}
.askPrice > ul:nth-child(3n) {border-right:none} 
.askPrice > ul > li {height:20px; line-height:20px; font-weight:100}

.askPrice > ul > li:nth-child(10) {border-bottom:1px solid #ccc}
.askPrice > ul > li > span {display:inline-block; text-align:right}
.askPrice > ul.sell-price {background-color:#eef9ff}
.askPrice > ul.sell-price span {display:block; width:100%; padding:0 10%; text-align:right}
.askPrice > ul.sell-ask {background-color:#f7fcff/*#eef9ff;*/}
.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; font-weight:400; padding-right:10px;}
.askPrice > ul.buy-price {background-color:#fff0eb; border-bottom:none}
.askPrice > ul.buy-price span {display:block; width:100%; padding:0 10%; text-align:right}
.askPrice > ul.buy-ask {background-color:#fff8f5;/*#fff0eb*/ border-bottom:none}
.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:200px; overflow-y:scroll; border-bottom:1px solid #ccc}
.askPrice > ul.tic li:nth-child(odd) {background-color:#fafafa}
.askPrice > ul.tic li 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:#fff}
.askPrice > ul.price-info li:nth-child(odd) {background-color:#fafafa}
.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:#ef3636}
.askPrice .x-cur {font-weight:bold}
.askPrice .x-low {color:#fff; background:#0087d1}
.askPrice.ap-sum > ul {height:auto;}

/*order*/
.normal {padding:0}
.normal > div {clear:both; }
.normal > div ul > li {height:24px; margin-bottom:6px}
.normal .tab li {float:left; width:33%; height:40px; line-height:40px; margin-bottom:0; text-align:center; padding:0; border-right:1px solid #ccc; border-bottom:1px solid #ccc}
.normal .tab li.on {width:34%; border-bottom:none}
.normal .tab li:after {display:none}
.normal .tab li:last-child {border-right:none}
.normal .orderBox {height:510px; padding:0 10px; font-size:15px; clear:both}
.normal .orderBox > ul:first-child {padding-top:20px}
.normal .orderBox > ul input[type=text], .normal .orderBox > ul select {width:120px; border:1px solid #ccc; color:#111; background-color:#fff}
.normal .orderBox > ul input[name="shcode"] {width:70px}
.normal .orderBox > ul li {position:relative; min-height:30px; line-height:20px; text-align:left; padding-left:55px; clear:both}
.normal .orderBox > ul li > label {display:block; position:absolute; top:0; left:0px; width:55px; font-size:14px; line-height:28px; color:rgba(0,0,0,.6)}
.normal .orderBox .x-price-area {position:relative; display:inline-block}
.normal .orderBox .x-price-area input[type=button] {display:block; position:absolute; top:2px; right:1px; width:19px; height:10px; border:none; overflow:hidden; text-indent:-9000px; background-image:url(../images/ico_price.png); background-repeat:no-repeat;  background-position:2px 0px}
.normal .orderBox .x-price-area input[type=button]:active {border-top:1px solid #aaa; border-left:1px solid #aaa}
.normal .orderBox .x-price-area input[name=btnPrcMinus], .normal .orderBox .x-price-area input[name=btnQtyMinus] {top:12px; background-position:2px -20px;}
.normal .orderBox.x-disabled ul select, .normal .orderBox.x-disabled .x-price-area input { color:#999; background-color:#eee; pointer-events: none}
.normal .orderBox.x-disabled li > input {border:1px solid #ccc; color:#999; background-color:#eee; pointer-events: none}
.normal .buy .order-btn input:disabled {background-color:#aaa; pointer-events: none}
.normal .buy {background-color:#fbeeeb}
.normal .buy .order-btn input {color:#fff; background-color:#f11554}
.normal .buy .order-btn input:hover {border:1px solid #ff5e87}
.normal .buy .order-btn input:active {border:0 solid #9e2828; border-top-width:2px; border-left-width:2px}
.normal .sell {background-color:#deeaf7}
.normal .sell .order-btn input {color:#fff; background-color:#2d6fd1}
.normal .sell .order-btn input:hover {border:1px solid #6c9adf}
.normal .sell .order-btn input:active {border:0 solid #184793; border-top-width:2px; border-left-width:2px}
.normal .edit {background-color:#edf3dd}
.normal .edit .order-btn input {color:#fff; background-color:#c5a148}
.normal .edit .order-btn input:active {border:0 solid #8d6b26; border-top-width:2px; border-left-width:2px}
.normal .edit .order-btn input:last-child {background-color:#4bb247}
.normal .edit .order-btn input:last-child:active {border:0 solid #267824; border-top-width:2px; border-left-width:2px}
.normal .order-btn {text-align:right; padding-right:10px; margin-bottom:20px}
.normal .order-btn input {width:90px; height:30px; border:none}

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


.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-lst {float:left; width:890px; margin-left:10px; border:1px solid #ccc; border-radius:5px; overflow:hidden}
.x-tab {height:30px; padding-top:5px; background:#2f61bb}
.x-tab ul {padding:0 5px}
.x-tab li {float:left; min-width:70px; padding:0 15px; line-height:27px; text-align:center; color:#fff; cursor:pointer; opacity:.8}
.x-tab li.on {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-lst-bdy {font-size:14px}
.x-lst-bdy td {line-height:30px}
.x-date {text-align:right; border-bottom:1px solid #c0c8d7; display:none}
.x-date.on {display:block}
.x-date.on + .x-lst-bdy .x-grid-bdy {height:calc(100vh - 740px)}
.x-grid-bdy .x-summary li {float:right; margin-right:10px; line-height:30px}

footer {height:150px; font-size:14px; background:linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 100%)}
footer .bottom {position:relative; width:1100px; margin:0 auto; padding-top:30px; color:#8F98A0}
footer .bottom ul {margin-bottom:10px}
footer .termsArea { position:absolute; top:20px; right:0}

.qna_table {text-align:center}

.view {margin-bottom:50px}
.view thead th {width:80px; line-height:50px;}
.view tbody td {padding:20px 5px} 
.reply tbody th {width:80px}
.reply tbody td {padding:20px 5px} 
.write input {width:100%; border:none; line-height:40px; background-color:transparent}
.write textarea {width:100%; min-height:300px; border:none; background-color:transparent}

/* Popup */
.noticePop {border:1px solid #333; box-shadow:1px 2px 5px rgba(0,0,0,.3); background-color:#fff; background-image:url(../images/pop_bg.png); background-repeat:no-repeat; background-size:120%; background-position:center; z-index:100; max-width:640px; max-height:680px;}
.noticePop ul {position:relative; min-width:400px; min-height:400px; max-height:580px; padding:50px 0; margin:50px; background:#333;}
.noticePop .tit {position:relative; padding:20px 10px; margin-bottom:20px; font-weight:bold; text-align:center; font-size:36px}
.noticePop .tit:after {content:''; display:block; position:absolute; bottom:0; left:50%; width:100px; height:2px; margin-left:-50px; background-color:#fff}
.noticePop .con {padding:10px 0; margin:0 50px; white-space:pre-wrap; text-align:center}
.noticePop .con div {overflow-x:hidden; overflow-y:auto; max-height:300px;}
.noticePop .close {position:absolute; bottom:-40px; left:-13px; height:35px; 
	text-align:right; color:#111; }
.noticePop .close a {display:inline-block; padding:0 10px; margin-left:20px}
.noticePop ul {border:solid 1px #ddd; background:#fff;}

.noticePop {width:100%; min-width:0}
.noticePop .con { white-space:pre-line}
.noticePop ul {min-width:300px; min-height:400px; max-height:500px; padding:10px 0; margin:10px;}
.noticePop .close {right:-13px; background:#124bb3; color:#fff}

.popConfirm {display:none; position:fixed; top:30%; left:50%; width:320px; margin-left:-160px; border:1px solid #ccc; box-shadow:1px 2px 2px rgba(0,0,0,.3); background:#fff; z-index:100}
.popConfirm dl {position:relative}
.popConfirm dl dt {height:25px; font-size:14px; 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:#787c84}
.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:35px; padding:5px 5px 0 0; text-align:right; background:#f2f2f2}
.popConfirm ul input[type=button] {width:50px;}

.pop #wrap {overflow:hidden;}
.pop .container {border:none}
.pop header h1 {left:10px}
.pop header button {position:absolute; top:10px; right:10px}
.pop .x-grid { position:relative; height:calc(100vh - 60px); overflow:auto}
.pop .x-grid .x-fixed {position:absolute; top:0; left:0; overflow:hidden; background:#252a32; z-index:10}
.pop .x-grid > div ul {position:relative; width:1000px; padding-left:100px}
.pop .x-grid > div ul li {float:left; width:80px; border-bottom:1px solid #2d3d5e; border-right:1px solid #2d3d5e; text-align:center}
.pop .x-grid > div ul li:first-child {width:100px; text-align:left; padding-left:10px; border-left:1px solid #2d3d5e;}
.pop .x-grid-hdr {position:absolute; top:0; left:0; z-index:100}
.pop .x-grid-hdr ul {height:30px; background:#252a32}
.pop .x-grid-hdr ul li {line-height:30px}
.pop .x-grid-bdy {padding-top:30px; overflow:visible}
.pop .x-grid-bdy ul {height:40px}
.pop .x-grid-bdy ul li {line-height:39px;}
.pop .x-lst {overflow-x: auto;}
.pop .x-date.on + .x-lst-bdy .x-grid-bdy {height:auto}
.pop .x-date {text-align:right; line-height:30px; padding-right:10px; border-bottom:1px solid #495360; 
	display:block;}


.r-pop {position:relative}
.r-pop ul {margin-bottom:20px; clear:both}
.r-pop ul .stit {font-size:18px; font-weight:300; margin-bottom:5px; color:#2677c8; white-space:nowrap}
.r-pop ul .won {font-size:24px}
.r-pop ul .won, .r-pop ul .won input {text-align:right}
.r-pop ul.noti { position:absolute; bottom:0}

.x-tbl-jan-sum {width:300px; height:calc(100vh - 645px); min-height:230px; float:left; border:1px solid #ccc; border-radius:5px; overflow:hidden; background:#fff; line-height: 35px; font-size:13px;}
.x-tbl-jan-sum h2 {height:30px; color:#fff; text-align:center; line-height:30px; border-bottom:1px solid #ccc; background:#2f61bb}
.x-tbl-jan-sum dt {float:left; width:40%; text-align:center; border-bottom:1px solid #ccc; border-right:1px solid #ccc; white-space:nowrap}
.x-tbl-jan-sum dd {float:left; width:60%; text-align:right; border-bottom:1px solid #ccc; padding-right:10px}
.x-tbl-jan-sum dd button {width:90%; height:25px;} 

.x-tbl-jan-sum dl {width:50%; float:left}
.x-tbl-jan-sum dl:nth-child(even) {border-right:1px solid #ccc}
.x-tbl-jan-sum dt span {display:none}
.x-tbl-jan-sum dd button {width:90%; height:25px;}


.x-grid-hdr th {line-height:30px; border-right:1px solid #ccc}
.x-grid-bdy {height:calc(100vh - 710px); min-height:167px; overflow-y:auto; font-size:13px;}
.x-tbl-jan-sum > div {height:calc(100vh - 740px); overflow-y:auto}
.x-grid-bdy td {text-align:right; border-right:1px solid #ccc; padding:0 10px}
.x-grid-bdy td[cc=hname] {text-align:left}
.x-grid-bdy .on { background:#2b485e}
.ui-dialog-titlebar .ui-dialog-titlebar-close {border:none; background:none}
.ui-state-default .ui-icon {background:url(../images/r_pop_cls.png) no-repeat }
.ui-button-text {background:none}

@media only screen and (max-width:640px) {
	input:focus {outline: none;}
	#wrap {margin-top:50px}
	header {height:50px; min-height:50px; background:none}
	header:before {left:0; width:100%; height:49px; margin-left:0; background-size:100% 50px}
	header:after {top:49px}
	header > div {width:100%}
	header h1 {top:5px; left:5px; width:140px}
	header .appBtn {right:20px}
	header .appBtn a {
		display: block;
		margin: 5px;
		padding: 15px;
		border: 1px solid #605b5b;
		border-radius: 5px;
	}
	header .appBtn dt {display:block; height: 49px}
	header .appBtn dt button {width: 40px; height:40px; border: none; background-color: transparent; font-size:1.2em;}
	header .appBtn dd {position: absolute; right: -290px; width: 280px; min-height: 180px; background: #fff; opacity: 0}
	header .appBtn.on dt button { background-position: 0 -40px}
	header .appBtn.on dd {display:block; right: 0px; opacity: 1; transition:ease .2s; border:1px solid #605b5b; padding:5px;}
	
	header .appBtn.on dd > div {display:none;}
	header .appBtn.on dd > div.on {display:block;}

	header .appBtn dd input {display:none;}



	header .topBtn {display:none}
	.visual .txt h1 {font-size:7vw}
	.visual .txt h2 {font-size:6vw}
	.visual .txt h3 {font-size:5vw}

	 /* mobileMenu */
	.mNav {display:block}
	.mNav input {position:absolute; top:5px; left:5px; width:40px; height:40px; text-indent:-9000px; border:none; background-color:transparent; background-image:url(../images/m-btn.png); background-repeat:no-repeat; background-size:40px auto; z-index:100}
	.panel{display:block; position:fixed; top:0; left:-80%; bottom:0; width:80%; padding-top:80px; background-color:rgba(36,48,62,1); z-index:10; transition:ease .2s}
    .panel .navi{float:none; width:80%; height:auto; margin-left:10%; margin-bottom:30px}
    .panel .navi dl {float:none; width:100%; height:auto; padding-bottom:0; padding-left:10px; border-bottom:1px solid rgba(255,255,255,.3); overflow:hidden}
	.panel .navi dl dt {position:relative; padding-right:0; margin-bottom:5px}
	.panel .navi dl dt a {pointer-events: none; font-size:1.1em}
	.panel .navi dl dt:after {width:10px; bottom:auto; top:5px; left:-15px; transform:rotate(45deg)}
	.panel .navi dl dd {display:none; margin-bottom:10px}
	.panel .navi dl dd a {display:block; padding-left:15px; opacity:.8}
	.panel .navi dl dd a:before { content:'ㆍ'; position:absolute; left:0}
	.panel .navi dl.on dd {display:block}
    .panel .navi dl a{font-size:1em; text-align:left;}
    .panel .info {position:static; top:auto; right:auto; width:100%; padding:0 10%;}
    .panel .info ul {padding-left:10px}
	.panel .info li {float:none; width:80%; text-align:left;}
    .panel .info li a{width:100%}
	
	/* Home */
	.visual {height:auto}
	.visual .bg {padding-top:100%}
	.visual .txt li {width:100%}
	.infoBox {width:calc(100% - 20px); height:auto; margin:-30px 10px 50px}
	.infoBox > ul {float:none; width:100%; margin-bottom:20px}
	.overview > div {margin-bottom:0; clear:both}
	.overview > div .img {float:none; z-index:-1}
	.overview > div .img img {width:100%}
	.overview > div .txt {position:static; width:90%; height:auto; padding:10px; margin:0 auto; margin-top:-70px}
	.overview > div:nth-child(even) .txt{left:auto}
	.overview > div:nth-child(even) .img {float:none}
	.overview > div .txt li .btn {margin:0 auto}

	.mNav li{margin:0;}
	.mNav ul li:hover > a:after{top:20px; right:20px;}
    header.op {bottom:0; height:auto; background-color:rgba(0,0,0,.7); z-index:100;}
	header.op .panel {left:0; transition:ease .2s}
    header.op .openPanel {background-position:bottom;}
	
	.container {width:100%; min-height:0; margin:5px 0}
	.subTop > ul {width:100%}
	.content {width:96% !important; margin:0 auto; padding:3%}
	
	.h-table {display:block;  border-left:1px solid #495360; border-right:1px solid #495360;}
	.h-table dt {display:block; width:100%}
	.h-table dd {display:block; width:100%}
	
	.o-table {overflow:scroll}
	.o-table table th {min-width:50px; padding:0 10px}
	.o-table table td { text-align:center} 
	
	.subTop {height:40px}
	.subTop > ul {height:inherit; padding-top:10px}
	.title {font-size:1.2rem; text-align:center; line-height:1.2}
	.explain {}
	.txtinfo {line-height:1.2; margin-bottom:10px}
	
	/* Trade */
	.trade.content {float:none; width:100%}
	
	.tradeArea {height:auto; padding:0; border-bottom:none}
	.tradeArea > ul {padding-top:0}
	.tradeTime {float:none; width:100%; padding-top:10px}
	.tradeTime:after { content:''; display:block; clear:both}
	.tradeTime dt {text-align:center; font-size:.8em}
    .tradeTime dd {text-align:center; font-size:1.6em}
    .tradeTime dd.contractTime {font-size:1.4em;}
	.tradeType {float:none; width:100%; padding-left:0; border-bottom:1px solid #344658}
	.tradeType ul {text-align:center}
	.tradeType:before {display:none}
	.lotArea {margin-bottom:20px}
	.lotArea .btnArea {padding:10px}
	.lotArea .btnArea ul {width:30%}
	.lotArea .btnArea ul li .btn {width:100%}
	.lotArea .btnArea ul:last-child {width:70%}
	.lotArea .btnArea ul:last-child li {width:45%; margin-left:5%}
	.lotArea .table > ul > li:nth-child(1) {width:50%}
	.lotArea .table > ul > li:nth-child(2) {width:50%}
	.lotArea .btn.buy, .lotArea .btn.sell {width:calc(100% / 2 - 5px)}
	.lotArea .lot input[type=button] {display:none}
	.lotArea .lot input[type=text] {width:calc(100% - 70px)}
	.lotArea .lot button { width:50px}
	.lotArea .btn-group {padding-left:5px}
	.lotArea .lot button + div {padding:0 5px}
	
	.lotArea .lotList > ul.tfoot {height:auto}
	.lotArea .lotList > ul.tfoot li {float:none; height:40px; line-height:40px}
	.lotArea .lotList > ul.tfoot li:nth-child(1) {width:100%}
	.lotArea .lotList > ul.tfoot li:nth-child(2) {width:100%; text-align:left; padding-left:20px}
	
	.tp-btn li {width:100%}
	.tp-btn li.time {margin-bottom:10px}
	.tp-btn .btn {display:block; width:100%}
	
	.charts-top {height:72px}
	.charts-top .sym-code {display:block}
	.charts-top label {margin:0}
	.charts-top > span {display:inline-block;padding-right:10px}
	.charts-bdy {height:240px}
	
	.order-btn .buy.block:after {right:4px; width:calc(50% - 15px)}
	.order-btn .sell.block:after {right:5px; width:calc(50% - 15px)}

	.x-tab { height:auto; }
	.x-tab ul {width:100%; height:30px; margin-bottom:5px; clear:both}
	.x-tab ul li {min-width:10px; padding:0 10px;}
	.x-tab ul li.on {border-radius:10px; background: #1b9ecb}

	aside {float:none; position:static; width:96%; margin:0 auto}
	aside .resultList.table > ul > li {height:40px; line-height:40px}
	aside .resultList .tbody td {line-height:30px}
	aside .resultList#_chelst .tbody {height:180px}
	aside .resultList#_my_chelst .tbody {height:180px}
	.x-codes-box {position:absolute; top:45px; left:2%; width:96%; height:auto; padding:10px 0; background:#162436; display:none; z-index:100}
	.x-codes-box.x-on {display:block}
	.x-codes li {width:calc(100% / 2 - 10px)}
	.x-codes-box h2 { display:none}
	.x-trade-box  {position:static}
	.x-trade-box .resultList .tbody {height:200px}
	
	.subTab {width:100%; padding-top:20px}
	.subTab ul.n3 li { width:calc(100% / 3 - 10px); height:35px; margin:0 5px; line-height:30px}
	.search select {width:auto}
	
	/* Trade */
	.loginBox {left:5%; width:90%; margin:-250px 0 0}
		
	.inputinfo {width:90%; margin:0 5%}
	.inputinfo dl {float:none; width:100%; height:auto; margin-bottom:30px}
	.inputinfo dl dd {padding-top:0px; padding-left:100px}
	.inputinfo dl.one dd input, .inputinfo dl.one dd select {width:100%}
	.inputinfo dl.pass input[type=password] {width:100%; display:block; float:none}
	.inputinfo dl.pass input[type=password] + input {margin-left:0}
	.inputinfo dl.account #BankNm {width:100%; display:block; float:none}
	.inputinfo dl.account #No {width:100%; display:block; float:none; margin-left:0}
	.inputinfo dl.account #AcctNm {width:100%; display:block; float:none; margin-left:0} 
	.inputinfo dl.email #email1 {width:100%; display:block; float:none}
	.inputinfo dl.email #email2 {width:100%; display:block; float:none; margin-left:0}
	.inputinfo dl.email #email_kind {width:100%; display:block; float:0; margin-left:0} 
	.inputinfo .email span {position:absolute; right:2px}
	.inputinfo .btn {position:static; width:100%}
	
	.view thead th, .view tbody th {display:none}
	.reply tbody th {display:none}
	
	/*주식레버리지*/
	.x-hoga-bar {height:65px; border-bottom:1px solid #ccc}
	.x-hoga-bar > form > ul {width:96%; height:auto; margin:0 2%; border:none; background:none}
	.x-hoga-bar ul li.x-uline {width:50%; padding-top:3px}
	.x-hoga-bar .x-item-info {position:absolute; bottom:0; right:5px; margin-right:0}
	.x-hoga-bar ul li.x-uline + li {width:10%; margin:0}
	.x-menu-box {padding-top:5px; margin-bottom:5px}
	.x-menu-box li {width:25%; text-align:center; border:1px solid #ccc; border-radius:5px; line-height:30px}
	.x-menu-box li.on { color:#fff; background:#1b9ecb}
	.x-hoga-bar .x-price { width:40%; margin-right:0; line-height:30px; font-size:1.2em}
	.x-hoga-wrap {float:none; width:auto; height:auto; margin-bottom:0}

	.x-hoga-bdy1 {float:none; width:96%; margin-left:2%; margin-bottom:20px}
	.x-hoga-bdy2 {float:none; width:96%; height:440px; margin-left:2%; overflow:hidden; margin-bottom:20px}
	
	.x-chart-wrap {float:none; width:96%; margin-left:2%}
	.tool-bar .fr p.line-btn {display:none}
	.x-tbl-jan-sum {float:none; width:96%; height:auto; min-height: 100px; margin-left:2%; margin-bottom:20px; font-size:13px; line-height: 30px;}
	.x-tbl-jan-sum dl {width:50%; float:left}
	.x-tbl-jan-sum dl:nth-child(even) {border-right:1px solid #495360}
	.x-tbl-jan-sum dl:nth-child(10) dt, .x-tbl-jan-sum dl:nth-child(10) dd {border-bottom:none}
	.x-tbl-jan-sum dl:nth-child(11) dt, .x-tbl-jan-sum dl:nth-child(11) dd {border-bottom:none}
	.x-tbl-jan-sum dt span {display:none}
	.x-lst {float:none; width:96%; margin-left:2%}
	.x-lst .bt1 {display:none}
	.x-grid {overflow-x:auto}
	.x-grid-bdy {height:auto; /*overflow-y:visible; overflow-x:hidden;*/}
	.x-hoga-bar .x-volume {float:none; font-size:.8em; clear:both}
	.x-chart-bdy { width:100%}
	.x-hoga-wrap .x-order-pop {position:absolute; width:100%; height:24px; background:#555; z-index:300; display:none}
	.x-hoga-wrap .x-order-pop ul {position:relative; float:left; width:39%;}
	.x-hoga-wrap .x-order-pop ul:first-child {text-align:right}
	.x-hoga-wrap .x-order-pop ul:nth-child(3n - 1) {width:22%;}
	.x-hoga-wrap .x-order-pop ul:nth-child(3n - 1) li { display:block; width:100%; margin-top:0; text-align:right; color:#fff; font-size:16px; line-height:24px; padding-right:5px; }
	.x-hoga-wrap .x-order-pop li {display:inline-block; margin-top:-7px; padding:0 5px}
	.x-hoga-wrap .x-order-pop li input {width:66px; height:38px; border:1px solid #555}
	.x-hoga-wrap .x-order-pop li input.x-btn-sell {color:#fff; background:#2d6fd1}
	.x-hoga-wrap .x-order-pop li input.x-btn-buy {color:#fff; background:#f11554}
	.x-hoga-wrap .x-order-pop li.move {position:absolute; top:-3px; right:0px; width:30px; height:30px; margin-top:0; background:url(../images/ico_move.png) no-repeat; background-size:cover}
	
	.x-grid-hdr th {line-height:18px;}
	
	/*마이페이지*/
	.qna_table li:nth-child(1) {width:10%}
	.qna_table .thead li:nth-child(2) {width:90%}
	.qna_table .thead li:nth-child(3) {display:none}
	.qna_table .thead li:nth-child(4) {display:none}
	.qna_table .tbody ul {position:relative}
	.qna_table .tbody li:nth-child(1) {float:none; position:absolute; top:0; left:0 }
	.qna_table .tbody li:nth-child(2) {float:none; width:80%; padding-left:10%}
	.qna_table .tbody li:nth-child(3) {float:none; width:80%; height:auto; margin-bottom:19px; line-height:1; padding-left:10%; text-align:left; opacity:.7}
	.qna_table .tbody li:nth-child(4) {float:none; position:absolute; top:0; right:0 }
	
	.date_pick li:last-child {position:static; text-align:center; padding-top:10px}
	.date_pick label {padding:0 10px}
	
	.leavePop {width:90%; margin:-160px 0 0 -45%; overflow:hidden}
	.leavePop ul .txtinfo {padding:0 20px}
	
	/* Popup */
	.tradePop {width:100%}
	.noticePop {width:100%; min-width:0}
	.noticePop .con { white-space:pre-line}
	
	footer .bottom {width:90%; margin:0 auto }
	footer .termsArea {position:static}
	
	.alertify:not(.ajs-maximized) .ajs-modal {padding:0}
	.alertify .ajs-dialog {margin:0}
    .alertify.ajs-frameless .ajs-header {z-index:-1}
	
	#resize {display: none}

	.x-grid-bdy td {padding:0 2px}

	.askPrice > ul { height : 300px;}
	.askPrice > ul > li { height : 30px; line-height:30px; font-size:15px;}
	.askPrice > ul.tic {
		height: 300px;
	}

}

/*future*/

#future .container {height:calc(100vh - 100px)}
#future .x-hoga-box {position:relative; width:780px; padding:30px 0; font-size:14px; margin-bottom:20px; border-radius:5px; overflow:hidden}
#future .x-hoga-box .top { position:absolute; top:0; left:0; width:calc(100% - 12px); height:30px}
#future .x-hoga-box .top li {height:30px; text-align:center; line-height:30px}
#future .x-hoga-box .bdy {height:400px; overflow-y:scroll}
#future .x-hoga-box .bot { position:absolute; bottom:0; left:0; width:calc(100% - 12px); height:30px; overflow:hidden}
#future .x-hoga-box .bot li {height:30px; text-align:center; line-height:30px}
#future .x-hoga-box li  button {width:100%; height:30px}
#future .x-hoga-box li  button:active {padding:1px 0 0 1px; border:none}
#future .x-hoga-box ul {height:20px;}
#future .x-hoga-box ul > li {float:left; width:calc(100% / 9); height:20px; line-height:19px}
#future .x-hoga-box ul > li span { display:block; width:100%; height:20px; padding-right:5px; text-align:right}
#future .x-hoga-box ul > li span.cur {border:1px solid #F00}
#future .x-hoga-box ul > li.col2 {width:calc(100% / 9 * 2)}
#future .f-lst {margin-left:0; width:780px}
#future aside > div {border-radius:5px; font-size:15px; overflow:hidden}
#future aside > div:first-child {height:462px; margin-bottom:20px;}
#future .f-trade {height:140px; padding-top:10px}
#future .f-trade dl {height:25px; margin-bottom:5px}
#future .f-trade dl {clear:both}
#future .f-trade label, #future .f-trade span {}
#future .f-trade dl dt {float:left; width:30%; padding-left:10px}
#future .f-trade dl dd {float:left; width:70%}
#future .f-trade dl dd input[type=text] {width:50px; border:1px solid #c0c8d7; text-align:right}
#future .f-trade dl dd input[type=button]:not([value=편집]):not([value=저장]) {width:30px;}
#future .f-trade dl dd .boxs input[type=text] {width:30px; text-align:center}
#future .f-info {font-size:15px; border-top:1px solid #c0c8d7}
#future .f-info dl {float:left; width:50%; border-bottom:1px solid #c0c8d7}
#future .f-info dl:nth-child(odd) {border-right:1px solid #c0c8d7}
#future .f-info dl dt {float:left; width:35%; height:30px; line-height:29px; text-align:center;}
#future .f-info dl dd {float:left; width:65%; height:30px; line-height:29px; text-align:right}
#future .f-info dl dd span {display:inline-block; margin-right:5px}
#future .f-tic h2 {height:33px; color:#fff; text-align:center; line-height:32px; border-bottom:1px solid #ccc; background:#2f61bb}
#future .f-tic ul{height:calc(100vh - 680px); overflow-y:auto}
#future .x-grid-bdy {height:calc(100vh - 760px); overflow-y:auto}
#future .f-item {clear:both}
#future .f-item dl { height:25px; border-bottom:1px solid #c0c8d7; padding-right:9px; background:#2f61bb}
#future .f-item dl dt {float:left; text-align:center; line-height:25px; color:#fff}
#future .f-item > div {height:139px; overflow-y:scroll; clear:both}
#future .f-item > div li {float:left; padding:0; text-align:center; line-height:25px}
#future .f-item dl dt:nth-child(1), #future .f-item ul li:nth-child(1) {width:45%; border-right:1px solid #c0c8d7}
#future .f-item dl dt:nth-child(2), #future .f-item ul li:nth-child(2) {width:25%; border-right:1px solid #c0c8d7}
#future .f-item dl dt:nth-child(3), #future .f-item ul li:nth-child(3) {width:30%}
#future .f-item ul li {overflow:hidden; white-space:nowrap}

#future .x-acct dl:first-child { float:left; width:90%}
#future .x-acct dl:first-child dt {float:left; width:calc(100% / 6); height:25px; text-align:center; line-height:24px; border-bottom:1px solid #ccc; border-right:1px solid #ccc}
#future .x-acct dl:first-child dd {float:left; width:calc(100% / 6); height:25px; text-align:right; line-height:24px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; background:#fff}
#future .x-acct dl:last-child {float:left; width:10%; border-bottom:1px solid #ccc}
#future .x-acct dl:last-child dd {height:25px; line-height:24px; text-align:center}
#future .x-acct dl:last-child dd:last-child {height:24px}
#future .x-acct dl:last-child dd button {width:90%}

#future .alertify .ajs-dialog {position:relative; border-radius:10px;; overflow:hidden; background:#f8f8f8; box-shadow:3px 5px 5px rgba(0,0,0,.3)}
#future .alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body .ajs-content {padding:0 10%; margin-bottom:30px}
#future .alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body .ajs-content > div {position:absolute; top:0; left:0; width:100%; height:120px; padding:30px 0 0 40px}
#future .alertify .ajs-header {background:none}
#future .alertify .ajs-footer {padding:4px 0}
#future .alertify .ajs-footer .ajs-buttons.ajs-primary {padding:0 4px}

#future .x-sel {border:1px solid red;}
#future .x-SELLSTOP {background-color:#d6eaf2}
#future .x-BUYSTOP {background-color:#f8d6d7}
#future .x-SELLORDER {background-color:#d6eaf2}
#future .x-BUYORDER {background-color:#fbe6e6}
#future .x-SSTCANCEL {background-color:#d6eaf2}
#future .x-BSTCANCEL {background-color:#fbe6e6}
#future .x-CANCELSELLORDER {background-color:#d6eaf2}
#future .x-CANCELBUYORDER {background-color:#fbe6e6}
#future .x-CANCELSELLALL {background-color:#d6eaf2}
#future .x-CANCELBUYALL {background-color:#fbe6e6}

.x-bottom-mnu {display:none; text-align: center; padding:0 5px;}
.x-bottom-mnu ul {display:flex;}
.x-bottom-mnu li {flex:1; padding:3px;}
.x-bottom-mnu li a {
	font-size: 13px;
	display:inline-block;
	text-align: center;
	width:100%;
	padding:5px;
    border: 1px solid #495360;
    background: #151f2f;
	border-radius: 5px;
}

.x-bottom-mnu li a.on {
    background: #3C0;
	color:#fff;
	font-weight: bold;
}

 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#future .x-hoga-box .top, #future .x-hoga-box .bot {width:calc(100% - 17px)}
#future .x-hoga-box ul > li:last-child {width:calc(100% / 9 - 1px)}
#future .f-item dl {padding-right:17px}
}


@media only screen and (max-width: 640px) {
	.content {margin-bottom:30px}
	#future .x-hoga-box {width:100%}
	.f-lst {width:100%}
	.f-tic ul, .x-grid-bdy {height:180px}
	#future .x-hoga-box ul > li {width:calc(100% / 9 - 3px)}
	#future .x-hoga-box ul > li.col2 {width:calc(100% / 9 * 2 - 6px)}
	#future .x-hoga-box ul > li.center {width:calc(100% / 9 + 24px)}
	#future .x-hoga-box li button {font-size:.8em; overflow:hidden}
	aside > div:first-child {height:auto}
	#future .f-item {position:absolute; top:-5px; left:0; width:100%; height:40px; background:#fff; overflow:hidden}
	#future .f-item dl {display:none}
	#future .f-item > div { position:relative; height:40px; border-bottom:1px solid #ccc; overflow:hidden}
	#future .f-item > div ul { height:40px; margin-right:40px;}
	#future .f-item > div li {line-height:40px}
	#future .f-item > div:after { display:block; content:'∨'; position:absolute; top:8px; right:10px; width:18px; height:24px; line-height:24px; color:#c0c8d7; border:1px solid #c0c8d7; border-radius:5px; font-family:'NanumSquare'; text-align:center; font-size:.7em; font-weight:800; transform:scale(1.4,1)}


	.x-hoga-bar {height:65px; border-bottom:1px solid #ccc}
	.x-hoga-bar > form > ul {width:96%; height:auto; margin:0 2%; border:none; background:none}
	.x-hoga-bar ul li.x-uline {width:50%; padding-top:3px}
	.x-hoga-bar .x-item-info {position:absolute; bottom:0; right:5px; margin-right:0}
	.x-hoga-bar ul li.x-uline + li {width:10%; margin:0}
	.x-menu-box {padding-top:5px; margin-bottom:5px}
	.x-menu-box li {width:25%; text-align:center; border:1px solid #ccc; border-radius:5px; line-height:30px}
	.x-menu-box li.on { color:#fff; background:#1b9ecb}
	.x-hoga-bar .x-price { width:40%; margin-right:0; line-height:30px; font-size:1.2em}
	.x-hoga-wrap {float:none; width:auto; margin-bottom:0;}
	.x-hoga-bdy1 {float:none; width:96%; margin-left:2%; margin-bottom:20px; overflow-y:scroll; max-height: 300px; min-height:300px;}
	.x-hoga-bdy2 {float:none; width:96%; height:440px; margin-left:2%; overflow:hidden; margin-bottom:20px}
	.x-chart-wrap {float:none; width:96%; margin-left:2%}
	.tool-bar .fr p.line-btn {display:none}

	.x-bottom-mnu {display:block;}

	.x-sort-box {
		display: -webkit-box;
		display: -moz-box;
		display: box;
		
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		box-orient: vertical;
	}

	.x-tbl-jan-sum {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		box-ordinal-group: 3;
	}
	
	.x-tbl-jan-sum {float:none; width:96%; height:auto; min-height: 100px; margin-left:2%; margin-bottom:20px; font-size:13px; line-height: 30px;}
	.x-tbl-jan-sum dl {width:50%; float:left}
	.x-tbl-jan-sum dl:nth-child(even) {border-right:1px solid #495360}
	.x-tbl-jan-sum dl:nth-child(10) dt, .x-tbl-jan-sum dl:nth-child(10) dd {border-bottom:none}
	.x-tbl-jan-sum dl:nth-child(11) dt, .x-tbl-jan-sum dl:nth-child(11) dd {border-bottom:none}
	.x-tbl-jan-sum dt span {display:none}

	.x-lst {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		box-ordinal-group: 2;
	}

	.x-lst {float:none; width:96%; margin-left:2%}
	.x-lst .bt1 {display:none}
	.x-grid {overflow-x:auto}
	.x-grid-bdy {height:auto; /*overflow-y:visible; overflow-x:hidden;*/}
	.x-hoga-bar .x-volume {float:none; font-size:.8em; clear:both}
	.x-chart-bdy { width:100%}
	.x-hoga-wrap .x-order-pop {position:absolute; width:100%; height:24px; background:#555; z-index:300; display:none}
	.x-hoga-wrap .x-order-pop ul {position:relative; float:left; width:39%;}
	.x-hoga-wrap .x-order-pop ul:first-child {text-align:right}
	.x-hoga-wrap .x-order-pop ul:nth-child(3n - 1) {width:22%;}
	.x-hoga-wrap .x-order-pop ul:nth-child(3n - 1) li { display:block; width:100%; margin-top:0; text-align:right; color:#fff; font-size:16px; line-height:24px; padding-right:5px; }
	.x-hoga-wrap .x-order-pop li {display:inline-block; margin-top:-7px; padding:0 5px}
	.x-hoga-wrap .x-order-pop li input {width:66px; height:38px; border:1px solid #555}
	.x-hoga-wrap .x-order-pop li input.x-btn-sell {color:#fff; background:#2d6fd1}
	.x-hoga-wrap .x-order-pop li input.x-btn-buy {color:#fff; background:#f11554}
	.x-hoga-wrap .x-order-pop li.move {position:absolute; top:-3px; right:0px; width:30px; height:30px; margin-top:0; background:url(../images/ico_move.png) no-repeat; background-size:cover}

	.askPrice > ul { height : 300px;}
	.askPrice > ul > li { height : 30px; line-height:30px; font-size:15px;}
	.askPrice > ul.tic {
		height: 300px;
	}

	header .cls {display:block; align-items: flex-end; }

	.x-grid-hdr th:nth-child(1) {position: sticky; left:0; z-index: 3;}
	.x-grid-bdy td:nth-child(1) {position: sticky; left:0; z-index: 3;}

	#wrap > .cb {height: 80px;}
	.openPrice { position:fixed; top:auto;}
}



header .circle {
	display:none;
	margin-left:-10px;
	background-color:rgb(244, 67, 54);
	border-bottom-left-radius:50%;
	border-bottom-right-radius:50%;
	border-top-left-radius:50%;
	border-top-right-radius:50%;
	box-sizing:border-box;
	color:rgb(255, 255, 255);
	height:22px;
	line-height:22.5px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	text-size-adjust:100%;
	width:25.5469px
}