@charset "utf-8";

* {font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; font-weight: 400; color: #000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, p,iframe, figure, a, input, span {margin: 0; padding: 0; font-size: inherit; word-break: keep-all; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
header,main,hgroup,footer,section,article,aside,nav,canvas,figure,figcaption {display: block;}

html {height: 100%; background: #E9EDF0; }
body {background: #E9EDF0; min-height: 100%;}
a {display: block; text-decoration: none;}
img, svg {width: 100%; border: 0;}
li {list-style: none;}
b {font-weight: 600 !important;}

input[type=text], input[type=number], input[type=password] {background: #fff; border: 1px solid #E2E2E2; line-height: 40px; font-size: 15px; padding: 0 16px; width: 100%; border-radius: 6px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}

/* 기본 체크박스 */
.check-box {display: block; position: relative; padding-left: 26px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.check-box input[type=checkbox] {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.check-box .checkmark {position: absolute; top: -1px; left: 0; height: 18px; width: 18px; background-color: #eee; border-radius: 3px;}
.check-box:hover input[type=checkbox] ~ .checkmark {background-color: #ccc;}
.check-box input[type=checkbox]:checked ~ .checkmark {background-color: #302ED1;}
.check-box .checkmark:after {content: ''; position: absolute; display: none;}
.check-box input[type=checkbox]:checked ~ .checkmark:after {display: block;}
.check-box .checkmark:after {left: 5px; top: 2px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* select box */
.select-box {width: 100%; position: relative;}
.select-box select, .select-box .fake-select {appearance: none; -webkit-appearance: none; width: 100%; line-height: 40px; font-size: 15px; padding: 0 16px; background: #fff; border: 1px solid #E2E2E2; border-radius: 6px; color: #000; cursor: pointer;}
.select-box::before,
.select-box::after {content: ''; position: absolute; right: 15px; pointer-events: none;}
.select-box::before,
.select-box::after {width: 8px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 36%;}

.main-wrap {position: relative; overflow: hidden;}
.main-circle {position: absolute; top: -240px; left: -100px; right: -100px; border-radius: 50%; height: 496px; background: #302ED1; z-index: 1;}
.main-head {text-align: center; padding: 70px 0 30px; position: relative; z-index: 2;}
.main-head h1 {font-size: 36px; font-weight: 600; color: #fff; margin-bottom: 12px;}
.main-head p {font-size: 16px; font-weight: 500; color: #fff;}
.main-menu {text-align: center; position: relative; z-index: 2;}
.main-menu a {width: 300px; margin: 0 auto 12px auto;}
.mm-wrap {padding: 0 20px; background: #fff; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);}
.mm-item {display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 80px; padding-left: 46px; position: relative;}
.mm-item::before {position: absolute; content: ''; background-size: cover; width: 30px; height: 30px; left: 0; top: 50%; transform: translateY(-50%);}
.mm-refund .mm-item::before {background: url(../images/img_refund.svg) 50% 50% no-repeat;}
.mm-extend .mm-item::before {background: url(../images/img_extend.svg) 50% 50% no-repeat;}
.mm-history .mm-item::before {background: url(../images/img_history.svg) 50% 50% no-repeat;}
.mm-qna .mm-item::before {background: url(../images/img_qna.svg) 50% 50% no-repeat;}
.mm-item span {font-size: 20px; font-weight: 500;}
.mm-item::after {position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 23px; background: url(../images/img_chevron.svg) 50% 50% no-repeat; background-size: cover;}

main .container {background: #fff;}

nav .head {text-align: center; background: #302ED1; height: calc(env(safe-area-inset-top) + 60px); padding-top: env(safe-area-inset-top);}
nav .head h1 {font-size: 22px; font-weight: 600; color: #fff; line-height: 60px;}
nav .menu {background: #201EB8;}
nav .menu .mn-wrap {display: flex; flex-direction: row; justify-content: space-around; padding: 0 10px; margin: 0 auto; max-width: 600px;}
nav .menu .mn-wrap a span {display: block; font-size: 15px; font-weight: 500; color: #788DD8; line-height: 42px;}
nav .menu .mn-wrap a.on span {font-weight: 600; color: #fff; border-bottom: 2px solid #fff;}

.m-wrap {padding: 30px 20px 60px 20px; max-width: 600px; margin: 0 auto;}
.cau-wrap {background: #F5F8FA; border: 1px solid #E3E9ED; padding: 16px;}
.cau-wrap h2 {font-size: 15px; font-weight: 600; color: #302ED1; margin-bottom: 6px;}
.cau-wrap ul li {position: relative; font-size: 14px; padding: 0 0 6px 12px;}
.cau-wrap ul li:last-child {padding-bottom: 0;}
.cau-wrap ul li::before {content: '-'; font-size: 14px; position: absolute; left: 0; top: 0;}
.cau-wrap ul li p {margin-top: 4px;}
.cau-apply {margin-top: 16px;}
.cs-box {text-align: center;}
.cs-box .cs-tn {margin-bottom: 6px;}
.cs-box .cs-tn span {font-size: 24px; font-weight: 600; color: #302ED1;}
.cs-box .cs-tn span:first-child {font-size: 16px; padding-right: 6px;}
.cs-box p {font-size: 12px; font-weight: 500; color: #626262;}
.btn-wrap {padding-top: 30px; display: flex; flex-direction: row; justify-content: space-evenly; gap: 10px;}

.input-form {margin-bottom: 24px;}
.input-info {margin-bottom: 14px;}
.input-info ul li {position: relative; font-size: 14px; padding-left: 12px;}
.input-info ul li::before {position: absolute; content: '・'; font-weight: 800; color: #302ED1; left: 0; top: 0;}
.input-row {display: flex; flex: 1;  flex-direction: row; gap: 10px;}
.input-column {display: flex; flex: 1;  flex-direction: column; gap: 10px 0;}
.input-row .select-box {width: 110px !important;}
.input-row .i-wrap {flex: 1;}
.input-form .btn-wrap {margin-top: 10px !important; padding-top: 0 !important;}

.btn {width: 100%; background: #302ED1; border-radius: 6px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; color: #fff;}
.btn-od {width: 100%; background: #0B096E; border-radius: 6px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; color: #fff;}
.s-btn {width: 100%; background: #F1F1FF; border-radius: 6px; border: 1px solid #CACAFF; line-height: 44px; text-align: center; font-size: 16px; font-weight: 600; color: #302ED1;}

.ir-info {margin-bottom: 12px;}
.ir-info h2 {font-size: 16px; font-weight: 500; margin-bottom: 2px;}
.ir-info h2 span {font-weight: 600; color: #FF0000;}
.ir-info p {font-size: 13px; color: #969696;}
.ir-tb-wrap > p {font-size: 13px; color: #aaaaaa; margin-top: 10px;}
table {border-collapse: collapse;border-spacing: 0; border-top: 1px solid #000; width: 100%;}
table.i-tb th {background: #F6F6FA;}
table.i-tb th {font-weight: 500;}
table.i-tb th span {font-weight: 600; color: #FF0000;}
table th, table td {border-bottom: 1px solid #EAEAEA; text-align: center; font-size: 12px; padding: 8px;}
table.i-tb .i-tl {text-align: left;}
table.i-tb .i-tl span {color: #8A8A8A;}
table.i-tb .i-amt p {font-weight: 600; color: #FF0000;}
table.i-tb .c-amt {font-weight: 600; color: #302ED1;}
.ldp-table table td {text-align: left; font-size: 14px; font-weight: 500;}
.ldp-table table td:first-child {color: #919191;}

.sum-amt {display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid #000; border-bottom: 1px solid #EAEAEA; margin-top: 10px;}
.sum-amt .sm-tl {background: #F6F6FA; font-size: 14px; font-weight: 500; padding: 0 20px; line-height: 40px;}
.sum-amt .sm-amt {font-size: 15px; font-weight: 600; color: #302ED1; padding: 0 8px; line-height: 40px;}

.f-wrap {padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px) 20px; max-width: 600px; margin: 0 auto;}
.f-info {padding-bottom: 10px;}
.f-info span, .f-wrap p {font-size: 11px; color: #94A0A9;}
.f-info {line-height: 12px;}
.f-info span {position: relative; letter-spacing: -0.2px;}
.f-info span::after {content: '|'; color: #C5CED4; padding: 0 6px;}
.f-info span:last-child:after {display: none;}

.cf-box {margin-bottom: 24px;}
.cf-box h3 {font-size: 14px; font-weight: 600; margin-bottom: 10px;}

.do-wrap {text-align: center; margin-bottom: 30px;}
.do-wrap .do-img {width: 90px; height: 90px; margin: 0 auto 12px auto;}
.do-wrap h2 {font-size: 18px; font-weight: 600;}
.do-count {font-size: 14px; font-weight: 600; margin-bottom: 8px;}
.do-count span {font-weight: 600; color: #FF0000;}

.tab-wrap {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px;}
.tab-wrap .tab-item {display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 20px; background: #fff; border: 1px solid #CACACA; padding: 0 12px; cursor: pointer;}
.tab-wrap .tab-item span {font-size: 15px; font-weight: 500; color: #808080;}
.tab-wrap .tab-item.on {border: 0; background: #181679;}
.tab-wrap .tab-item.on span {font-weight: 600; color: #fff;}

.more {margin-top: 16px;}
.more .btn-more {margin: 0 auto; padding: 10px 0; width: 100px; background: #F8F8F8; border: 1px solid #E2E2E2; border-radius: 3px; font-size: 15px; font-weight: 500; text-align: center;}

.f-box {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.r-wrap {display: flex; flex-direction: row;}
.r-wrap .f-count {font-size: 14px; font-weight: 600;}
.r-wrap .f-range {font-size: 13px; font-weight: 500; color: #A8A8A8; margin-left: 4px;}
.f-filter {position: relative; cursor: pointer; padding-right: 18px;}
.f-filter::after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ''; width: 11px; height: 5px; background: url('../images/img_chevron_dn.svg') 50% 50% no-repeat; background-size: cover;}
.f-filter span {font-size: 14px; font-weight: 500;}
.f-filter span.dv {margin: 0 -4px;}

.filter-wrap {position: absolute; left: 0; right: 0; bottom: 0; background: #fff;}
.filter-wrap .btn-wrap {padding: 0 !important; margin-top: 10px;}
.lc-body {background: #F5F5F5; padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px) 20px; display: flex; flex-direction: column; gap: 20px;}
.filter-box h3 {font-size: 15px; font-weight: 600; margin-bottom: 12px; text-align: left;}
.filter-cont {display: flex; flex-direction: row; justify-content: space-evenly; gap: 10px;}
.filter-cont .f-item {display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 4px; border: 1px solid #e4e4e4; background: #fff; font-size: 14px; font-weight: 500; color: #808080; cursor: pointer;}
.filter-cont .f-item.on {background: #F1F1FF; border-color: #8686ff; color: #302ED1;}

.layer-dialog {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); z-index: 9999;}
.layer-dialog .ld-wrap {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative;}
.layer-dialog .ld-wrap .ld-popup {background: #fff; width: 80%; max-width: 400px;}
.layer-dialog .ld-wrap .ld-popup.ld-big {width: 90%;}
.layer-dialog .ld-wrap .lf-popup {background: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; max-width: 460px; height: 600px;}
.layer-dialog .ld-wrap .ld-popup .ldp-body .ldp-content {text-align: center; font-size: 14px; font-weight: 500; padding: 30px 20px;}
.layer-dialog .ld-wrap .ld-popup .ldp-body .ldp-content .ldp-text {font-size: 14px; font-weight: 500; text-align: center; margin-bottom: 20px;}
.layer-dialog .ld-wrap .ldp-btn {display: flex; flex-direction: row; justify-content: space-evenly;}
.layer-dialog .ld-wrap .ldp-btn .l-btn {width: 100%; line-height: 44px; text-align: center; font-size: 15px; font-weight: 600;}
.layer-dialog .ld-wrap .ldp-btn .l-btn span {color: #fff;}
.layer-dialog .ld-wrap .ldp-btn .l-btn.apply {background: #302ED1;}
.layer-dialog .ld-wrap .ldp-btn .l-btn.cancel {background: #9D9CAC;}
.layer-dialog .ld-wrap .ldf-content {width: 100%; height: 100%; background: #fff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.layer-dialog .ld-wrap .ldf-content .ldf-head {border-bottom: 1px solid #ebebeb;}
.layer-dialog .ld-wrap .ldf-content .ldf-body,
.layer-dialog .ld-wrap .ldf-content .ldf-foot {padding: 20px;}
.lf-head {display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: calc(env(safe-area-inset-top) + 50px); border-bottom: 1px solid #E3E3E3; padding: env(safe-area-inset-top) 20px 0 20px;}
.lf-head .lf-tl {font-size: 18px; font-weight: 600;}
.d-close {width: 20px; height: 20px; background: url('../images/img_close.svg') 50% 50% no-repeat; background-size: cover;}
.lf-body {background: #F5F5F5; flex: 1; overflow-y: scroll; padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px) 20px; text-align: center;}
.lf-wrap {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; max-width: 365px; margin: 0 auto;}
.lf-wrap .lf-item {background: #fff; aspect-ratio: 1 / 0.8; border-radius: 6px;}
.lf-wrap .lf-item a {height: 100%;}
.lf-wrap .lf-item a .bank-box {display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center;}
.lf-wrap .lf-item a .bank-box .bank-img {width: 48px; height: 48px; margin-bottom: 4px;}
.lf-wrap .lf-item a .bank-box p {font-size: 14px; font-weight: 500; margin-bottom: 4px;} 

.no-item {border-top: 1px solid #000; border-bottom: 1px solid #EAEAEA; padding: 30px 0; text-align: center;}
.no-item p {font-size: 14px; color: #969696;}

.search-wrap {display: flex; flex-direction: row; gap: 10px;}
.search-wrap .i-wrap {flex: 1;}
.search-wrap .search-btn {width: 60px;}
.search-wrap .search-btn .s-btn {line-height: 40px !important; font-size: 15px !important;}

.qna-wrap {margin-top: 20px;}
.qna-wrap p {font-size: 14px; font-weight: 500;}
.qna-wrap p span {color: #FF0000; font-weight: 600;}
.qna-wrap .qna-list {margin-top: 10px; border-top: 1px solid #000;}
.qna-wrap .qna-list .qna-item {border-bottom: 1px solid #EAEAEA;}
.qna-wrap .qna-list .qna-item .qna-title {position: relative; font-weight: 500; font-size: 13px; padding: 14px 30px 14px 20px; cursor: pointer;}
.qna-title::before {position: absolute; left: 0; top: 12px; content: 'Q'; color: #CACACA; font-size: 16px; font-weight: 600;}
.qna-title::after {position: absolute; content: ''; right: 0; top: 16px; width: 14px; height: 7px; background: url('../images/img_toggle_ar_dn.svg') 50% 50% no-repeat; background-size: cover;}
.qna-wrap .qna-list .qna-item.on .qna-title::before {color: #302ED1;}
.qna-wrap .qna-list .qna-item.on .qna-title::after {background: url('../images/img_toggle_ar_up.svg') 50% 50% no-repeat;}
.qna-wrap .qna-list .qna-item .qna-body {background: #F6F6FA; font-size: 13px; font-weight: 500; padding: 16px; display: none;}
.qna-wrap .ir-tb-wrap {margin-top: 10px;}

a.disabled {
    pointer-events: none;
    cursor: default;
}

span.max-size-over {
    color : #FF0000;
    font-size: 14px;
}