@charset "utf-8";

@import "./normalize.css";

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	body{ overflow-x:hidden; }
}

/* DEFAULT */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,button,form,fieldset,p,blockquote{
	margin:0;
	padding:0;
}

body{
	font-size:14px; 
	font-family: 'Noto Sans KR',-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Segoe UI,Malgun Gothic,맑은 고딕,sans-serif;
	font-weight:400;
	-webkit-text-size-adjust:none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, fieldset {
	border:0 none;
}

body, h1, h2, h3, h4, h5, dl, dt, dd, th, td, div, p, a{
	color:#444444;
	/* font-size:14px; */
	font-family: 'Noto Sans KR',-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Segoe UI,Malgun Gothic,맑은 고딕,sans-serif;
}

form, fieldset, legend, input, button, textarea, label{
	color:#555555;
	font-size:13px;
	line-height:1.65;
}

ul, ol, li {
	list-style:none outside;
}

table{
	border-collapse:collapse;
}

td,th{
	word-break: break-all;
	box-sizing:border-box;
	padding:0 10px;
}

.tal{ text-align:left !important; }
.tac{ text-align:center !important; }
.tar{ text-align:right !important; }

input, textarea, select{
	display:inline-block;
	font-size:1em;
	vertical-align:middle; 
	font-family:NotoSans;
}

select{
	height: 30px;
    border: 1px solid #7a7a7a;
    min-width: 100px;
}

textarea {
	resize:none; 
	box-sizing:border-box;
	padding:5px; 
	line-height:18px;
	font-family:NotoSans;
}

::placeholder {
	color: #222;
	/* font-size: 12px; */
	opacity: 0.3;
}

address, em{
	font-style:normal
}

caption{
	overflow:hidden;
	width:0;
	height:0
}

legend{
	font:0; 
	line-height:0; 
	text-indent:-9999em;
}

hr{
	display:none;
}

a{text-decoration:none;color:#444; cursor:pointer;}
a:hover,a:focus,a:active{text-decoration:none;cursor:pointer !important}
a:hover,a:focus,a:active{text-decoration:none;cursor:pointer !important}

img{ display:block; }

table{
	width:100%;
	box-sizing:border-box;
}

i.xi{
	position: relative;
	overflow: hidden;
}

i.xi span.hide{
	position: absolute;
	opacity: 0;
	text-indent: -9999px;
}

button.button,
a.button{
    display: inline-block;
    line-height: 32px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid #2e313a;
    color: #2e313a;
    border-radius: 6px;
    font-weight: 400;
    font-size: 13px;
    background-color: #fff;
	opacity: 1;
}

button.button:hover,
a.button:hover{
	background-color: #f8f8f8;
}

button.button.app,
a.button.app{
    color: #3c84fc;
    background: #e9f3fb;
	border-color:#e9f3fb;
}

button.button.app:hover,
a.button.app:hover{
	background:#3c84fc;
    color:#fff;
}

button.button.rej,
a.button.rej{
	color: #eb6464;
    background: #ffeeee;
	border-color:#ffeeee;
}

button.button.rej:hover,
a.button.rej:hover{
	background:#eb6464;
    color:#fff;
}

button.button.close,
a.button.close{
	color: #3b454e;
    background: #f5f6f6;
	border-color:#f5f6f6;
}

button.button.close:hover,
a.button.close:hover{
	background:#3b454e;
    color:#fff;
}

button.button.rej:active,
a.button:active{
	opacity: 0.9;
}

th.req:after{
	content:'*';
	color:#eb6464;
	margin-left:5px;
}

.paging{
    width:100%;
    height:auto;
    overflow:hidden;
    box-sizing: border-box;
    padding:40px 0;
    text-align: center;
}

.paging a{
    display: inline-block;
    line-height: 30px;
    padding:0 12px;
    color:#b3b3b3;
    margin:0 3px;
    box-sizing: border-box;
    position: relative;
}

.paging a.current{
    background-color:#f5f6f6;
    border-bottom: 1px solid #3b454e;
    color:#3b454e;
}

.paging a:hover{
    background-color:#f5f6f6;
}

.paging a.fst,
.paging a.end,
.paging a.prv,
.paging a.nxt{
    color:#fff;
    padding:0;
    opacity: 0.7;
}

.paging a.fst:hover,
.paging a.end:hover,
.paging a.prv:hover,
.paging a.nxt:hover{
    background-color:#fff;
    opacity: 1;
}

.paging a.fst:before,
.paging a.end:before,
.paging a.prv:before,
.paging a.nxt:before{
    content: '';
    width:30px;
    height:30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:0px;
    background-image: url('../img/svg/icon_arr_dgy_fst.svg');
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: center center;
}

.paging a.fst:before{ background-image: url('../img/svg/icon_arr_dgy_fst.svg'); }
.paging a.end:before{ background-image: url('../img/svg/icon_arr_dgy_end.svg'); }
.paging a.prv:before{ background-image: url('../img/svg/icon_arr_dgy_left.svg'); }
.paging a.nxt:before{ background-image: url('../img/svg/icon_arr_dgy_right.svg'); }

.paging a.prv{ margin-right:20px;}
.paging a.nxt{ margin-left:20px;}


.mask{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	position: fixed;
	top:0px;
	left:0px;
	z-index: 10;
	display: none;
}

.modal{
	width:600px;
	height:auto;
	overflow:hidden;
	box-sizing: border-box;
	background:#fff;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 12;
	display: none;
}

.modal.sm{
	width:400px;
}

.modal.lg{
	width:1000px;
}

.modal.xlg{
	width:1200px;
}

.modal .modalInner{
	width:100%;
	height:auto;
	overflow:hidden;
}

.modal .modalInner .searchArea{
	margin-top:5px;
}

.modal .modalInner .modalTop{
	width:100%;
	height:auto;
	overflow:hidden;
	border-bottom: 1px solid #e2e4e5;
}

.modal .modalInner .modalTop h2{
	display:block;
	line-height:50px;
	font-size:16px;
	padding:0 20px;
}

.modal .modalInner .modalBody,
.modal .modalInner .modalBtnArea{
	width:100%;
	height:auto;
	overflow:hidden;
	box-sizing: border-box;
	padding:20px;
}

.modal .modalInner .modalBody{
	padding-bottom: 10px;
}

textarea,
.modal .modalInner .modalBody textarea{
	width:100%;
	height:150px;
	box-sizing: border-box;
	padding:10px;
    border-radius: 4px;
    border:1px solid #e1e1e1;
    background-color:#f5f8fa;
    color:#3b454e;
    font-size:14px;
    box-sizing: border-box;
	line-height: 24px;
}

.modal .modalInner .modalBtnArea{
	text-align: right;
	padding-top: 10px;
}

p.info{
	clear: both;
	display: block;
	line-height: 20px;
	width: 100%;
	color: #eb6464;
	font-size:14px;
	padding-top:5px;
}

.dipnone{
	display:none !important;
}

.toast{
    width: 100%;
    max-width: 400px;
	background-color: rgba(255, 204, 0, 0.8);
    color: #262323;
    position: fixed;
    bottom: 20px;
    right: 65px;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    line-height: 30px;
    padding: 10px 30px;
    box-sizing: border-box;
    border-radius: 5px;
    z-index: 1;
}

.u-legend{
	width:130px;
}

.u-legend div,
.u-legend td{
	color:#fff !important;
}


.w10per{ width:10% !important; }
.w15per{ width:15% !important; }
.w20per{ width:20% !important; }
.w25per{ width:25% !important; }
.w30per{ width:30% !important; }
.w35per{ width:35% !important; }
.w40per{ width:40% !important; }
.w45per{ width:45% !important; }
.w50per{ width:50% !important; }
.w55per{ width:55% !important; }
.w60per{ width:60% !important; }
.w65per{ width:65% !important; }
.w70per{ width:70% !important; }
.w75per{ width:75% !important; }
.w80per{ width:80% !important; }
.w85per{ width:85% !important; }
.w90per{ width:90% !important; }
.w95per{ width:95% !important; }
.w100per{ width:100% !important; }

.w10px{ width:10px !important; }
.w15px{ width:15px !important; }
.w20px{ width:20px !important; }
.w25px{ width:25px !important; }
.w30px{ width:30px !important; }
.w35px{ width:35px !important; }
.w40px{ width:40px !important; }
.w45px{ width:45px !important; }
.w50px{ width:50px !important; }
.w55px{ width:55px !important; }
.w60px{ width:60px !important; }
.w65px{ width:65px !important; }
.w70px{ width:70px !important; }
.w75px{ width:75px !important; }
.w80px{ width:80px !important; }
.w85px{ width:85px !important; }
.w90px{ width:90px !important; }
.w95px{ width:95px !important; }
.w100px{ width:100px !important; }
.w110px{ width:110px !important; }
.w115px{ width:115px !important; }
.w120px{ width:120px !important; }
.w125px{ width:125px !important; }
.w130px{ width:130px !important; }
.w135px{ width:135px !important; }
.w140px{ width:140px !important; }
.w145px{ width:145px !important; }
.w150px{ width:150px !important; }
.w155px{ width:155px !important; }
.w160px{ width:160px !important; }
.w165px{ width:165px !important; }
.w170px{ width:170px !important; }
.w175px{ width:175px !important; }
.w180px{ width:180px !important; }
.w185px{ width:185px !important; }
.w190px{ width:190px !important; }
.w195px{ width:195px !important; }
.w200px{ width:200px !important; }

.mx-w100per{ max-width:100% !important; }

.mx-w10px{ max-width:10px !important; }
.mx-w15px{ max-width:15px !important; }
.mx-w20px{ max-width:20px !important; }
.mx-w25px{ max-width:25px !important; }
.mx-w30px{ max-width:30px !important; }
.mx-w35px{ max-width:35px !important; }
.mx-w40px{ max-width:40px !important; }
.mx-w45px{ max-width:45px !important; }
.mx-w50px{ max-width:50px !important; }
.mx-w55px{ max-width:55px !important; }
.mx-w60px{ max-width:60px !important; }
.mx-w65px{ max-width:65px !important; }
.mx-w70px{ max-width:70px !important; }
.mx-w75px{ max-width:75px !important; }
.mx-w80px{ max-width:80px !important; }
.mx-w85px{ max-width:85px !important; }
.mx-w90px{ max-width:90px !important; }
.mx-w95px{ max-width:95px !important; }
.mx-w100px{ max-width:100px !important; }
.mx-w110px{ max-width:110px !important; }
.mx-w115px{ max-width:115px !important; }
.mx-w120px{ max-width:120px !important; }
.mx-w125px{ max-width:125px !important; }
.mx-w130px{ max-width:130px !important; }
.mx-w135px{ max-width:135px !important; }
.mx-w140px{ max-width:140px !important; }
.mx-w145px{ max-width:145px !important; }
.mx-w150px{ max-width:150px !important; }
.mx-w155px{ max-width:155px !important; }
.mx-w160px{ max-width:160px !important; }
.mx-w165px{ max-width:165px !important; }
.mx-w170px{ max-width:170px !important; }
.mx-w175px{ max-width:175px !important; }
.mx-w180px{ max-width:180px !important; }
.mx-w185px{ max-width:185px !important; }
.mx-w190px{ max-width:190px !important; }
.mx-w195px{ max-width:195px !important; }
.mx-w200px{ max-width:200px !important; }
.mx-w300px{ max-width:300px !important; }
.mx-w400px{ max-width:400px !important; }
.mx-w500px{ max-width:500px !important; }
.mx-w600px{ max-width:600px !important; }
.mx-w700px{ max-width:700px !important; }
.mx-w800px{ max-width:800px !important; }
.mx-w900px{ max-width:900px !important; }
.mx-w1000px{ max-width:1000px !important; }

.h10px{ height:10px !important; }
.h15px{ height:15px !important; }
.h20px{ height:20px !important; }
.h25px{ height:25px !important; }
.h30px{ height:30px !important; }
.h35px{ height:35px !important; }
.h40px{ height:40px !important; }
.h45px{ height:45px !important; }
.h50px{ height:50px !important; }
.h55px{ height:55px !important; }
.h60px{ height:60px !important; }
.h65px{ height:65px !important; }
.h70px{ height:70px !important; }
.h75px{ height:75px !important; }
.h80px{ height:80px !important; }
.h85px{ height:85px !important; }
.h90px{ height:90px !important; }
.h95px{ height:95px !important; }
.h100px{ height:100px !important; }
.h110px{ height:110px !important; }
.h115px{ height:115px !important; }
.h120px{ height:120px !important; }
.h125px{ height:125px !important; }
.h130px{ height:130px !important; }
.h135px{ height:135px !important; }
.h140px{ height:140px !important; }
.h145px{ height:145px !important; }
.h150px{ height:150px !important; }
.h155px{ height:155px !important; }
.h160px{ height:160px !important; }
.h165px{ height:165px !important; }
.h170px{ height:170px !important; }
.h175px{ height:175px !important; }
.h180px{ height:180px !important; }
.h185px{ height:185px !important; }
.h190px{ height:190px !important; }
.h195px{ height:195px !important; }
.h200px{ height:200px !important; }

.mgt-0{ margin-top:0px !important }
.mgt-10{ margin-top:10px !important }
.mgt-20{ margin-top:20px !important }
.mgt-30{ margin-top:30px !important }
.mgt-40{ margin-top:40px !important }
.mgt-50{ margin-top:50px !important }
.mgt-60{ margin-top:60px !important }
.mgt-70{ margin-top:70px !important }
.mgt-80{ margin-top:80px !important }
.mgt-90{ margin-top:90px !important }
.mgt-100{ margin-top:100px !important }

.pdt-0{ padding-top:0px !important }
.pdt-10{ padding-top:10px !important }
.pdt-20{ padding-top:20px !important }
.pdt-30{ padding-top:30px !important }
.pdt-40{ padding-top:40px !important }
.pdt-50{ padding-top:50px !important }
.pdt-60{ padding-top:60px !important }
.pdt-70{ padding-top:70px !important }
.pdt-80{ padding-top:80px !important }
.pdt-90{ padding-top:90px !important }
.pdt-100{ padding-top:100px !important }

.pdb-0{ padding-bottom:0px !important }

/* loading */
.loading{
	width:100%;
	height:100%;
	position: fixed;
	top:0px;
	left:0px;
	background:rgba(255,255,255,0.8);
	display:none;
	z-index:1000;
}

/* .loading.mainDash{
	background:rgba(25,25,25,0.8);
} */

.loading .loadingBox{
	width:124px;
	height:88px;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background-image: url('../img/common/kb_wallet_black_logo.png');
	background-size: auto 28px;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.sk-cube-grid {
	width: 60px;
	height: 60px;
	margin:0 auto
  }
  
  .sk-cube-grid .sk-cube {
	width: 33%;
	height: 33%;
	/* background-color: #2f86ca; */
	background-image:url('../img/common/kb_wallet_ci_basic_circle_loading.png');
	background-repeat: repeat;
	background-size: 60px 60px;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
			animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
  }
  .sk-cube-grid .sk-cube1 {
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube2 {
	-webkit-animation-delay: 0.3s;
			animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube3 {
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s; }
  .sk-cube-grid .sk-cube4 {
	-webkit-animation-delay: 0.1s;
			animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube5 {
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube6 {
	-webkit-animation-delay: 0.3s;
			animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube7 {
	-webkit-animation-delay: 0s;
			animation-delay: 0s; }
  .sk-cube-grid .sk-cube8 {
	-webkit-animation-delay: 0.1s;
			animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube9 {
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s; }
  
  .sk-cube-grid .sk-cube1{
	background-position: left top;
  }
  .sk-cube-grid .sk-cube2{
	background-position: center top;
  }
  .sk-cube-grid .sk-cube3{
	background-position: right top;
  } 
  .sk-cube-grid .sk-cube4{
	background-position: left center;
  }
  .sk-cube-grid .sk-cube5{
	background-position: center center;
  }
  .sk-cube-grid .sk-cube6{
	background-position: right center;
  } 
  .sk-cube-grid .sk-cube7{
	background-position: left bottom;
  }
  .sk-cube-grid .sk-cube8{
	background-position: center bottom;
  }
  .sk-cube-grid .sk-cube9{
	background-position: right bottom;
  }   

  @-webkit-keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
	  -webkit-transform: scale3D(1, 1, 1);
			  transform: scale3D(1, 1, 1);
	} 35% {
	  -webkit-transform: scale3D(0, 0, 1);
			  transform: scale3D(0, 0, 1); 
	}
  }
  
  @keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
	  -webkit-transform: scale3D(1, 1, 1);
			  transform: scale3D(1, 1, 1);
	} 35% {
	  -webkit-transform: scale3D(0, 0, 1);
			  transform: scale3D(0, 0, 1);
	} 
  }

.sk-fading-circle {
	margin: 0 auto;
	width: 80px;
	height: 80px;
	position: relative;
  }
  
  .sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
  }
  
  .sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 10%;
	height: 10%;
	background-color: #52c7e7;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
			animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
			transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
			transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
		-ms-transform: rotate(120deg);
			transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
		-ms-transform: rotate(150deg);
			transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
			transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
		-ms-transform: rotate(210deg);
			transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
		-ms-transform: rotate(240deg);
			transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
			transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
		-ms-transform: rotate(300deg);
			transform: rotate(300deg); 
  }
  .sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
		-ms-transform: rotate(330deg);
			transform: rotate(330deg); 
  }
  .sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s; 
  }
  .sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
			animation-delay: -1s; 
  }
  .sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s; 
  }
  .sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s; 
  }
  .sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s; 
  }
  .sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s; 
  }
  .sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
			animation-delay: -0.5s; 
  }
  .sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
			animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
			animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
			animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
			animation-delay: -0.1s;
  }
  
  @-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
  }
  
  @keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
  }