/**
 * layout.css 2018_11_12
 */
@charset "utf-8";

/* 메뉴 공통 레이아웃 */
/* body.no_scroll{overflow:scroll;} */
.menu-section {background-color: #E7E8EA; overflow-y: scroll !important;}

.menu-wrap{overflow-y: scroll; position:fixed;left:-100%;top:0;width:100%;height:100%;overflow-y:auto;background: #E7E8EA;z-index:10;opacity:0;transition:left .3s, opacity .3s;}
.menu-wrap.on{left:0;opacity:1;}
.menu-wrap .btn-close{position: absolute;right:23.5px;top:26.5px;display:block;width:20px;height:20px;background:url(../img/btn_close.png) 0 0 no-repeat;background-size:auto 20px;}
.menu-wrap .menu-cont{padding:0;}
.menu-wrap .user-info{padding:60px 30px 10px 30px;background: #fff; }
.menu-wrap .user-info .top{position: relative; padding-bottom:10px;}
.menu-wrap .user-info .user-email{ font-size:14px; color: #000000; font-family: 'NotoSans-Medium', sans-serif;}
.menu-wrap .user-info .user-email a { display: inline-block; float: right;  padding: 5px;}
span.right-arrow {margin-left: 15px; background:url(../img/icon_arrow.png) 0 0 no-repeat;background-size:auto 12px;width:12px;height:12px;position: relative;right:0px;top:7px;}

.menu-wrap .my-assets-info {margin-top:10px; padding: 20px 10px; background:  #fff;}
.menu-wrap .my-assets-info h5 {color: #000000; font-size: 14px; font-family: 'NotoSans-Medium', sans-serif;}
.menu-wrap .my-assets-info .money-info {margin: 10px 0 30px 0; color: #224EDE; font-size: 20px; font-family: 'NotoSans-Medium', sans-serif;}
.menu-wrap .my-assets-info .money-info span.krw-unit{padding-left: 5px;}
.menu-wrap .my-assets-info ul.assets-menu {display: inline-block; width: 100%; height: 50px;}
.menu-wrap .my-assets-info ul.assets-menu li {float:left; display:inline-block;width: 25%;height:50px;text-align:center;}
.menu-wrap .my-assets-info ul.assets-menu li a {display:block; color: #000000; font-size: 12px; font-family: 'NotoSans-Regular', sans-serif; }
.menu-wrap .my-assets-info ul.assets-menu li .wallet {width: 100%; height: 24px; background:url(../img/assets-wallet.svg) no-repeat; background-size:auto 24px; background-position: center center;}
.menu-wrap .my-assets-info ul.assets-menu li .airdrop {width: 100%; height: 24px; background:url(../img/assets-airdrop.svg) no-repeat; background-size:auto 24px; background-position: center center;}
.menu-wrap .my-assets-info ul.assets-menu li .staking {width: 100%; height: 24px; background:url(../img/assets-staking.svg) no-repeat; background-size:auto 24px; background-position: center center;}
.menu-wrap .my-assets-info ul.assets-menu li .event {width: 100%; height: 24px; background:url(../img/assets-event.svg) no-repeat; background-size:auto 24px; background-position: center center;}

.menu-wrap .menu-list {margin-top:10px; padding: 5px 30px; background:  #fff;}

.menu-wrap .menu-list ul li span.menu-name  {font-size: 14px; color: #000000; font-family: 'NotoSans-Medium', sans-serif;}
.menu-wrap .menu-list ul li {margin: 25px 0 ;}
.menu-wrap .menu-list ul li a.go-btn  {float:right; font-size: 13px; color: #97A5AE; font-family: 'NotoSans-Regular', sans-serif;}
.menu-wrap .banner-wrap {min-height: 100px; background: #fff;}
.menu-wrap .banner-wrap .banner {width: 100%;height: 100px; background:url(../img/menu-banner.png)no-repeat;background-size:100% 100%;}
.menu-wrap .logout-wrap {padding:30px 30px 70px 30px;background: #fff; }
.menu-wrap .logout-wrap a {display:block; line-height: 20px; vertical-align: middle; }
.menu-wrap .logout-wrap span.logout-btn {display:inline-block; margin-right: 10px; width: 15px;height: 20px; background:url(../img/exit.svg)no-repeat;background-position:center center; }
.menu-wrap .logout-wrap span.menu-name{position:relative; top: -5px; font-size: 14px; color: #000000; font-family: 'NotoSans-Medium', sans-serif; }

/*i btn*/
i{display: inline-block; background: url("../img/icn_btn.png")no-repeat 0 0;background-size:150px 150px; vertical-align: middle; line-height: 0;font-size: 0;}
i.tok-icon-back {width:25px; height:25px; background-position: -25px -70px; cursor: pointer;}


/*pageTitle*/
.pageTitle{height: 3.4rem;line-height: 3.2rem;text-align:center;font-size: 1rem;background-color:rgb(116,148,251);border:1px solid rgb(116,148,251);padding:0 25px 0 10px;color:#fff;}
.pageTitle:after {visibility: hidden;  display: block;  font-size: 0;  content: " ";  clear: both;  height: 0;}
.pageTitle i{float:left; width: 25px; height: 25px; margin-top:13px;}
.pageTitle span{display:inline-block; line-height: 3.4rem; text-align:center; vertical-align: middle;}

.pageTitle.close{padding:0 10px 0 25px;}
.pageTitle.close i{float:right;}
.pageTitle.close span{display:inline-block; float: left;}


.pageSubTitle {height: 3.4rem;line-height: 3.2rem;text-align:center;font-size: 1rem;background-color:rgb(220,221,223);text-align: left;text-indent: 40px;padding:0 25px 0 10px;color:#000;}

/*general dim-layer popup layer*/
.pop-layer .pop-container { padding: 20px 25px 50px 25px; }
.pop-layer p.ctxt {line-height: 25px; }
.pop-title{	padding-top: 15px; color: #000; font-size: 16px;  font-family: 'NotoSans-Bold', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.pop-content { height: 410px; overflow-y: scroll; padding: 0 14px; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }
.pop-subtitle { margin:30px 0; }
.pop-detail {line-height: 20px; word-break: break-all; overflow-wrap: break-word; text-align: justify;}

.pop-layer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 82%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
	z-index: 10;
}

.dim-layer {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.dim-layer .dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
	display: block;
}

a.btn-layerClose {
	float: right;
	background: transparent;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 30px;
	cursor: pointer;
}
a.btn-layerClose:after {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(45deg);
	left: 18px;
}

a.btn-layerClose:before {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(-45deg);
	left: 18px;
}


/*signup dim-layer popup layer*/
.signup-pop-layer .signup-pop-container { padding: 20px 25px 50px 25px; }
.signup-pop-layer p.ctxt {line-height: 25px; }
.signup-pop-title{	padding-top: 15px; color: #000; font-size: 16px;  font-family: 'NotoSans-Bold', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.signup-pop-content { height: 410px; overflow-y: scroll; padding: 0 14px; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }
.signup-pop-subtitle { margin:30px 0; }
.signup-pop-detail {line-height: 20px; word-break: break-all; overflow-wrap: break-word; text-align: justify;}

.signup-pop-layer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 82%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
	z-index: 10;
}

.signup-dim-layer {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.signup-dim-layer .signup-dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
}

.signup-dim-layer .signup-pop-layer {
	display: block;
}

a.signup-btn-layerClose {
	float: right;
	background: transparent;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 30px;
	cursor: pointer;
}
a.signup-btn-layerClose:after {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(45deg);
	left: 18px;
}

a.signup-btn-layerClose:before {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(-45deg);
	left: 18px;
}


/*history popup layer*/
.history-pop-layer .pop-container { padding: 20px; }
.history-pop-layer p.ctxt {line-height: 25px; }
.history-pop-layer .pop-title{	padding-top: 15px; color: #000; font-size: 16px;  font-family: 'NotoSans-Bold', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.history-pop-layer .pop-content { padding: 30px 0 0 0; height: auto; overflow-y: scroll; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }
.history-pop-layer .pop-subtitle { margin:30px 0; }
.history-pop-layer .pop-detail {line-height: 20px; word-break: break-all; overflow-wrap: break-word; text-align: justify;}

.history-pop-layer{
	display: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
	z-index: 10;
}

.dim-layer .history-pop-layer {
	display: block;
}

.history-pop-layer .pop-signal-time {font-size: 13px; color: #97A5AE; font-family: 'NotoSans-Regular', sans-serif; }
.history-pop-layer .pop-signal-text {font-size: 16px; color: #000000; font-family: 'NotoSans-Medium', sans-serif; }

.history-pop-layer .pop-tbl table {width: 100%;  border-collapse: separate; border-spacing: 0 10px; margin-top:40px; margin-bottom: 40px;}

td.tit {text-align: left; font-size: 13px; color: #97A5AE; font-family: 'NotoSans-Regular', sans-serif;}
td.cont {text-align: right; font-size: 14px; color: #5D666C; font-family: 'NotoSans-Regular', sans-serif;}
td.cont.content {color: #000 !important;}
td.cont.type {color: #5D666C !important;}
td.cont.money-hyc {font-size: 16px !important; color: #06A589; font-family: 'NotoSans-Medium', sans-serif !important;}
table .money-unit {margin-left: 5px;}

/*sort condition popup*/
.sort-pop-layer .pop-container { padding: 30px; }
.sort-pop-layer p.ctxt {line-height: 25px; }
.sort-pop-layer .pop-title{	padding-top: 15px; color: #000; font-size: 16px;  font-family: 'NotoSans-Bold', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.sort-pop-layer .pop-content { padding: 30px 10px 20px 10px; height: auto; overflow-y: scroll; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }
.sort-pop-layer .pop-subtitle { margin:30px 0; }
.sort-pop-layer .pop-detail {line-height: 20px; word-break: break-all; overflow-wrap: break-word; text-align: justify;}

.sort-pop-layer{
	display: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
	z-index: 10;
}

.dim-layer .sort-pop-layer {
	display: block;
}

.sort-wrapper .sort-title {
	color: #97A5AE;
	font-size: 13px;
	font-family: 'NotoSans-Regular', sans-serif;
}

.sort-wrapper .sort-button {
	margin: 10px 0 20px 0;
	float: left;
	position: relative;
	left: 33%;
	width: 33%;
	height: 34px;
	line-height: 34px;
	display: inline-block;
	text-align: center;
	font-size:14px;
	color: white;
	font-family: 'NotoSans-Thin', sans-serif;
	border: 1px solid #90a6ee;
	background: rgba(102,152,203,1);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
}

ul.sort-condition {
	width: 100%;
	height: 34px;
	margin: 5px 0;
	display:inline-block;
	background: #f7f8fa;
	border: 1px solid #EFEFF4;
}
ul.sort-condition.period li {
	float: left;
	width: calc(25% - 2px);
	height: 34px;
	line-height: 34px;
	display: inline-block;
	text-align: center;
	font-size:14px;
	color: #97a5ae;
	font-family: 'NotoSans-Thin', sans-serif;
	border: 1px solid #EFEFF4;
}

ul.sort-condition.type li {
	float: left;
	width: calc(33.33% - 2px) !important;
	height: 34px;
	line-height: 34px;
	display: inline-block;
	text-align: center;
	font-size:14px;
	color: #97a5ae;
	font-family: 'NotoSans-Thin', sans-serif;
	border: 1px solid #EFEFF4;
}

ul.sort-condition.sort li {
	float: left;
	width: calc(50% - 2px) !important;
	height: 34px;
	line-height: 34px;
	display: inline-block;
	text-align: center;
	font-size:14px;
	color: #97a5ae;
	font-family: 'NotoSans-Thin', sans-serif;
	border: 1px solid #EFEFF4;
	cursor: pointer;
}

ul.sort-condition li a {
	color: #97a5ae;
	font-family: 'NotoSans-Thin', sans-serif;
}

ul.sort-condition li.active {
	color: #90a6ee;
	font-family: 'NotoSans-Regular', sans-serif;
	border: 1px solid #90a6ee !important;
	cursor: pointer;
}

ul.sort-condition li.active a {
	color: #90a6ee;
	font-family: 'NotoSans-Regular', sans-serif;
	cursor: pointer;
}

/*freezing-popup*/
.freezing-pop-content {text-align: center;}
.freezing-txt { font-size: 16px; color:#000000;font-family: 'NotoSans-Medium', sans-serif; }
.freezing-txt span.point-txt{font-size: 15px; color:#224EDE;font-family: 'NotoSans-Regular', sans-serif; }

.freezing-popup-btn {width: 100%; height: 50px;line-height: 50px;}
.freezing-popup-btn a.btn{display:block;float:left;width: 50%; height: 50px; text-align: center; font-size:14px;font-family: 'NotoSans-Regular', sans-serif;cursor: pointer;}
.freezing-popup-btn a.btn.cancel { background: #EFF0F2; color: #224EDE;}
.freezing-popup-btn a.btn.ok { background: #041171; color: #fff;}

/*login-popup*/
.login-pop-content {text-align: center;}
.login-txt { font-size: 16px; color:#000000;font-family: 'NotoSans-Medium', sans-serif;margin-top: 20px; }
.login-txt span.point-txt{font-size: 15px; color:#224EDE;font-family: 'NotoSans-Regular', sans-serif; }

.login-popup-btn {width: 100%; height: 50px;line-height: 50px;}
.login-popup-btn a.btn{display:block;float:left;width: 100%; height: 50px; text-align: center; font-size:14px;font-family: 'NotoSans-Regular', sans-serif;cursor: pointer;}
.login-popup-btn a.btn.cancel { background: #EFF0F2; color: #224EDE;}
.login-popup-btn a.btn.ok { background: #6e3077; color: #fff;}

/*selection-popup*/
.selection-pop-layer .pop-container { padding: 0px; }
.selection-pop-layer .pop-title {padding: 10px 0 ;background:#224EDE; color: #fff; font-size: 14px;  font-family: 'NotoSans-Regular', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.selection-pop-layer .pop-content { padding: 0px 0px 20px 0px; height: auto; overflow-y: scroll; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }

.selection-pop-layer .pop-content ul.selection-area li {margin: 3px 0; padding: 5px 0;}
.selection-pop-layer .pop-content ul.selection-area li a{display:block; text-align:center; color: #97A5AE; font-size:18px; font-family: 'NotoSans-Regular', sans-serif;cursor: pointer;}
.selection-pop-layer .pop-content ul.selection-area li.active a {color: #000;}
.selection-pop-layer{
	display: none;
	z-index: 100000;
	position: absolute;
	bottom: 60px;
	left: 50%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
}

.dim-layer .selection-pop-layer {
	display: block;
}

/*swap-popup*/
.swap-pop-layer .pop-container { padding: 20px 20px 40px 20px; }
.swap-pop-layer p.ctxt {line-height: 25px; }
.swap-pop-layer .pop-title{	padding-top: 15px; color: #000; font-size: 16px;  font-family: 'NotoSans-Bold', sans-serif; line-height: 25px; text-align:center; margin-bottom: 30px; }
.swap-pop-layer .pop-content { height: 410px; overflow-y: scroll; padding: 40px 5px 0 5px; font-size: 11px; font-family: 'NotoSans-Regular', sans-serif; }
.swap-pop-layer .pop-subtitle { margin:30px 0; }
.swap-pop-layer .pop-detail {line-height: 20px; word-break: break-all; overflow-wrap: break-word; text-align: justify;}

.swap-pop-layer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 82%;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3px;
	z-index: 10;
}

.dim-layer {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.dim-layer .dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
}

.dim-layer .swap-pop-layer {
	display: block;
}

a.btn-layerClose {
	float: right;
	background: transparent;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 30px;
	cursor: pointer;
}
a.btn-layerClose:after {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(45deg);
	left: 18px;
}

a.btn-layerClose:before {
	content: '';
	height: 20px;
	border-left: 2px solid #ccc;
	position: absolute;
	transform: rotate(-45deg);
	left: 18px;
}