/* 공통 */
body{
    display: block;
    width: 100%;
}
.en {
/*    font-family: "Figtree", serif !important; */
}
#wrap {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #09112b;
}

#wrap .inner {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    padding: 30px 30px 40px;
    min-height: 100vh;
}
#wrap.has-fix-btn .inner{
    padding-bottom: 90px;
}

/* header */
header .h-tit{
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    display: block;
    padding-top: 7px;
}
header .h-tit em {
    color: #fff;
}
header .h-bg {
    position: absolute;
    top: 15px;
    right: 33px;
    width: 32px;
}


/* logo */
.logo.big {
    display: flex;
    align-items: center;
    justify-items: center;
    width: 221px;
    margin: 0 auto;
}

/* back */
.btn-back a{
    position: absolute;
    top: 34px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    background-color: #152042;
    border-radius: 100%;
}
.btn-back i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: 13px;
}

/* input */
input {
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    outline: none;
    border: none;
    font-size: 12px;
    width: 100%;
}
input::placeholder{
    font-size: 12px;
    font-weight: 300;
    color: #5f5d67;
}

input.wht {
    background-color: #fff;
}

/* btn */
.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
.btn-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 42px;
    border-radius: 20px;
    font-size: 14px;
}
.bg-navy {
    background-color: #182f5d;
    color: #fff;
}
.bg-blue {
    background-color: #1766a8;
    color: #fff;
}
.bg-red {
    background-color: #e60012;
    color: #fff;
}

/* font-color */
.point-color{
    color: #68c3c7 !important;
}

/* box-color */
.navy-box {
    background-color: #152042;
    color: #fff;
    border-radius: 20px;
}
.purple-box {
    background-color: #694c9c;
    color: #fff;
    border-radius: 20px;
}
.blue-box {
    background-color: #536ba8;
    color: #fff;
    border-radius: 20px;
}


/* search-ico */
.ico-search-btn {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    background: url('../src/ico/search-ico@2x.png') no-repeat 50% 50% / 16px 16px;
    transform: translateY(-50%);
}


/* table search */
.search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search-box  .date {
    display: flex;
    align-items: center;
    gap: 4px;
}
.search-box  .date input {
    background-color: #68c3c7;
    font-size: 12px;
    padding: 0 5px;
    height: 30px;
    width: 110px;
}
.search-box  .date  > span {
    font-size: 12px;
    color: #68c3c7;
    font-weight: 500;
}
.search-box .text-search-btn {
    font-size: 12px;
    background-color: #68c3c7;
    font-weight: 600;
    width: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}

/* search + table */
.balance-table-wrap {
    margin-top: 12px;
    background-color: #152042;
    border-radius: 16px;
    height: 330px;
    padding: 12px;
    overflow: hidden;
}
.balance-table-wrap *{
    color: #fff;
}
.balance-table-wrap table {
    width: 100%;
}
.balance-table-wrap th{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 33.3333%;
    height: 26px;
}
.balance-table-wrap td{
    font-size: 12px;
    text-align: center;
    width: 33.3333%;
    height: 20px;
}
.balance-table-wrap .table-body-wrap {
    height: calc(100% - 26px);
    overflow: hidden;
    overflow-y: auto;
}
/* pg-ico-box */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* list-tit */
.list-wrapper ul li.navy-box{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 12px 90px 12px 14px;
}

.list-wrapper ul li .list-tit{
    font-size: 12px;
    color: #fff;
}
.list-wrapper ul li .list-tit em{
    color: #fff;
}
.list-wrapper ul li .list-tit span {
    color: #fff;
}

/* bottom-fix-btn */
#bottom-fix-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    z-index: 99;
    background-color: #09112b;
    border-top: 1px solid #394045;
    border-radius: 20px 20px 0 0;
    /* inner값에 맞춰 335로 width를 고정할시 해당 주석을 제거해 주세요.
    left: 50%;
    max-width: 335px;
    transform: translateX(-50%); */
}
#bottom-fix-btn ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 22px 10px 20px;
}
#bottom-fix-btn ul li {
    width: calc(100% / 6);
    height: 100%;
}
#bottom-fix-btn ul li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100%;
}
#bottom-fix-btn ul li i {
    display: flex;
    align-items: center;
    justify-content: center;
}
#bottom-fix-btn ul li:nth-child(1) i{
    width: 20px;
}
#bottom-fix-btn ul li:nth-child(2) i{
    width: 21px;
}
#bottom-fix-btn ul li:nth-child(3) i{
    width: 23px;
}
#bottom-fix-btn ul li:nth-child(4) i{
    width: 16px;
}
#bottom-fix-btn ul li:nth-child(5) i{
    width: 21px;
}
#bottom-fix-btn ul li:nth-child(6) i{
    width: 18px;
}

#bottom-fix-btn ul li span {
    font-size: 9px;
    color: #fff;
}
#bottom-fix-btn ul li span em {
    color: #fff;
}
#bottom-fix-btn ul li.active span {
    color: #68c3c7;
}
#bottom-fix-btn ul li.active span em {
    color: #68c3c7;
}