@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 {
    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;
}

body {
    background: #fff;
}

a {
    display: block;
    text-decoration: none;
}

img {
    width: 100%;
    border: 0;
}

li {
    list-style: none;
}

input[type=text], input[type=number], input[type=password], input[type=tel] {
    background: #fff;
    border: 1px solid #cacaca;
    line-height: 50px;
    font-size: 15px;
    padding: 0 16px;
    width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number], input[type=tel] {
    -moz-appearance: textfield;
}

input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled {
    background-color: #eee;
}

/* 기본 체크박스 */
.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;
    color: #797979;
}

.check-box.white .checkmark {
    background-color: #fff;
}

.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;
}

.check-box:hover input[type=checkbox] ~ .checkmark {
    background-color: #ccc;
}

.check-box:hover input[type=checkbox]:disabled ~ .checkmark {
    background-color: #eee;
}

.check-box input[type=checkbox]:checked ~ .checkmark {
    background-color: #008bef;
}

.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 {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    line-height: 50px;
    font-size: 15px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #000;
    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%;
}

/* form select box  */
.form-select-box {
    width: 206px;
    position: relative;
}

.form-select-box select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    line-height: 34px;
    font-size: 15px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #cacaca;
    color: #000;
    cursor: pointer;
}

.form-select-box::before,
.form-select-box::after {
    content: '';
    position: absolute;
    right: 15px;
    pointer-events: none;
}

.form-select-box::before,
.form-select-box::after {
    width: 6px;
    height: 6px;
    border: solid #353535;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 36%;
}

/*radio*/
[type="radio"], span {
    vertical-align: middle;
}

[type="radio"] {
    appearance: none;
    border: 1px solid #dadada;
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

[type="radio"]:checked {
    border: 0.4em solid #008bef;
}

[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted #008bef;
}

[type="radio"]:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
    cursor: pointer;
}

[type="radio"]:hover + span {
    cursor: pointer;
}

[type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

/* toggle switch */
.toggle-switch {
    position: relative;
    display: flex;
    width: 64px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .1s;
    transition: .1s;
}

.toggle-switch .slider::before {
    position: absolute;
    content: '';
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .1s;
    transition: .1s;
}

.toggle-switch input:checked + .slider {
    background-color: #008bef;
}

.toggle-switch input:checked + .slider::before {
    -webkit-transform: translateX(34px);
    -ms-transform: translateX(34px);
    transform: translateX(34px);
}

.toggle-switch .slider.round {
    border-radius: 15px;
}

.toggle-switch .slider.round::before {
    border-radius: 50%;
}

.slider::after {
    content: "불가";
    display: inline-block;
    position: absolute;
    top: 55%;
    left: calc(100% - 34px);
    transform: translateY(-55%);
    font-size: 14px;
    color: #555;
}

input:checked + .slider::after {
    content: "가능";
    left: 10px;
    color: #fff;
}

.switch-toggle {
    position: relative;
    display: flex;
    width: 50px;
    height: 30px;
}

.switch-toggle .slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 15px
}

.switch-toggle .slider2::before {
    position: absolute;
    content: '';
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .1s;
    transition: .1s;
    border-radius: 11px
}

.switch-toggle.open .slider2::before {
    left: initial;
    right: 4px;
}

.switch-toggle.open .slider2 {
    background-color: #008bef;
}


/*.switch-toggle .slider2 .wtc {display:inline-block; position:absolute; height: 22px; width: 22px; background-color: white; border-radius:11px; top:4px; left:4px}
.switch-toggle.open .slider2 .wtc {right:4px !important;}*/

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
    border: 1px solid #bebebe;
}

thead {
    border-bottom: 1px solid #bebebe;
}

th, td {
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    border-right: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
    color: #454545;
}

th {
    background: #dfdfdf;
}

.no-mg {
    margin: 0 !important;
}

.h-mg {
    margin-bottom: 10px !important;
}

.no-pd {
    padding: 0 !important;
}

.o-pc {
    display: none;
}

nav {
    z-index: 99;
}

.navbar, .footer-wrap, .section-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

nav .container {
    width: 100%;
    text-align: center;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    padding-top: env(safe-area-inset-top);
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.navbar .nav-left, nav .navbar .nav-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbar .nav-btn {
    position: relative;
}

.navbar .nav-btn.nt-new {
    position: absolute;
}

.navbar .nav-btn.logo {
    width: 64px;
    height: 32px;
}

.navbar .nav-btn.icon {
    width: 28px;
    height: 28px;
}

.navbar .nav-title {
    font-size: 22px;
    font-weight: 700;
}

.navbar .nav-left .nav-btn.icon {
    margin-right: 10px;
}

.navbar .nav-right .nav-btn.icon { /*margin-left: 10px;*/
    margin-left: 6px;
}

.navbar .nav-right .nav-btn.icon:first-child {
    margin-left: 0;
}

.wrap.sub .navbar.gnb {
    display: none;
}

.wrap.sub .navbar.sub {
    display: flex;
}

.nav-location {
    display: none;
    flex-direction: row;
    align-items: center;
}

.nav-location > div {
    position: relative;
    font-size: 12px;
    margin-right: 14px;
    padding-right: 8px;
}

.nav-location > div::after, .nav-location > div::before {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
}

.nav-location > div.nl-home {
    padding-left: 10px;
}

.nav-location > div.nl-home::before {
    left: -10px;
    background-image: url('../images/icon_nav_loc.png');
}

.nav-location > div::after {
    right: -10px;
    background-image: url('../images/icon_chevron.png');
}

.nav-location > div:last-child {
    margin-right: 0;
    padding-right: 0;
}

.nav-location > div:last-child::after {
    display: none;
}

@media screen and (min-width: 701px) {
    nav {
        position: relative;
    }

    nav .navbar.gnb {
        height: 80px;
    }

    .footer-wrap, .section-inner { /*padding: 0 40px;*/
        padding: 0 20px;
    }

    nav .navbar .nav-btn.logo {
        width: 86px;
        height: 43px;
    }

    .wrap.sub .navbar.gnb {
        display: flex;
    }

    .wrap.sub .navbar.sub .nav-left .nav-btn.icon {
        display: none;
    }

    nav .navbar.sub .nav-right .nav-btn {
        display: none;
    }

    .nav-location {
        display: flex;
    }
}

main {
    padding-top: calc(env(safe-area-inset-top) + 60px);
}

main .container {
    background: #f5f5f5;
}

.sub main .container.bg-wc {
    background: #fff;
}

main .default {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
}

@media screen and (min-width: 701px) {
    /* main {padding-top: calc(env(safe-area-inset-top) + 80px);}
    .sub main {padding-top: calc(env(safe-area-inset-top) + 140px);} */
    main {
        padding: 0;
    }

    .o-pc {
        display: flex;
    }
}

/*2405 메인 메뉴 수정*/
.quick-menu-area {
    max-width: 700px;
    margin: 10px 0;
}

/*.quick-menu-wrap {display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 5px; column-gap: 5px; }*/
.quick-menu-wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 5px;
    column-gap: 5px;
}

/*.quick-menu-wrap {display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 5px; column-gap: 5px; }*/
/*.quick-menu-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}*/
.qmenu-item {
    display: flex;
    width: 100%;
    height: 125px;
    flex-direction: column;
    align-items: center;
    padding: 20px 0
}

@media screen and (max-width: 700px) {
    .qmenu-item:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .qmenu-item:nth-child(2) {
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .qmenu-item:nth-child(3) {
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .qmenu-item:nth-child(4) {
        grid-column-start: 10;
        grid-column-end: 13;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .qmenu-item:nth-child(5) {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .qmenu-item:nth-child(6) {
        grid-column-start: 5;
        grid-column-end: 9;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .qmenu-item:nth-child(7) {
        grid-column-start: 9;
        grid-column-end: 13;
        grid-row-start: 2;
        grid-row-end: 3;
    }

}


/*
@media screen and (max-width: 700px) {
.qmenu-item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.qmenu-item:nth-child(2) {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;
}

.qmenu-item:nth-child(3) {
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 1;
	grid-row-end: 2;
}

.qmenu-item:nth-child(4) {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}

.qmenu-item:nth-child(5) {
	grid-column-start: 4;
	grid-column-end: 7;
	grid-row-start: 2;
	grid-row-end: 3;
}

}
*/
.qmenu-item p {
    padding-top: 6px;
}

.qmenu-item .quick-img {
    width: 60px;
}

.qmenu-item.qm01 {
    background: #ba87e5;
}

.qmenu-item.qm01 p {
    color: #813cbc
}

.qmenu-item.qm02 {
    background: #84bbe4
}

.qmenu-item.qm02 p {
    color: #1c569e
}

.qmenu-item.qm03 {
    background: #2fb2b9
}

.qmenu-item.qm03 p {
    color: #107176
}

.qmenu-item.qm04 {
    background: #f6ad3c
}

.qmenu-item.qm04 p {
    color: #b83b05
}

.qmenu-item.qm05 {
    background: #fe8796
}

.qmenu-item.qm05 p {
    color: #e7164a
}

.qmenu-item.qm06 {
    background: #FFE100;
}

.qmenu-item.qm06 p {
    color: #FF7700
}

.qmenu-item.qm07 {
    background: #89D943;
}

.qmenu-item.qm07 p {
    color: #448709
}

@media screen and (min-width: 701px) {
    .quick-menu-area {
        width: 700px;
        margin: 0px auto;
        margin-bottom: 14px;
    }

    .quick-menu-wrap {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        row-gap: 5px;
        column-gap: 5px;
    }

    /*.quick-menu-wrap {display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 5px; column-gap: 5px; }*/
    /*.quick-menu-wrap {display: grid; grid-template-columns: repeat(5, 1fr)}*/
    .qmenu-item {
        border-radius: 10px;
        height: 120px;
    }
}

footer .container {
    background: #f6f6f6;
    padding: 24px 0 calc(env(safe-area-inset-bottom) + 50px) 0;
    border-top: 1px solid #eaeaea;
}

footer .footer-wrap {
    display: flex;
    flex-direction: column;
}

footer .footer-wrap .cs-info p {
    font-size: 12px;
    font-weight: 500;
    color: #959595;
    padding-top: 5px;
}

footer .footer-wrap .cs-info .cs-contact {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

footer .footer-wrap .cs-info .cs-contact span:first-child {
    font-size: 16px;
    font-weight: 700;
}

footer .footer-wrap .cs-info .cs-contact span:last-child {
    font-size: 12px;
}

footer .footer-wrap .cs-info .cs-contact a {
    font-size: 16px;
    font-weight: 700;
    color: #008bef;
    margin: 0 8px;
}

footer .footer-wrap .terms {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    margin: 20px 0;
    padding: 12px 0;
    overflow: auto;
    white-space: nowrap;
}

footer .footer-wrap .terms::-webkit-scrollbar {
    display: none;
}

footer .footer-wrap .terms a {
    font-size: 12px;
    color: #585858;
    padding: 0 15px;
    border-right: 1px solid #e6e6e6;
}

footer .footer-wrap .terms a:first-child {
    padding-left: 0;
}

footer .footer-wrap .terms a:last-child {
    padding-right: 0;
    border: 0;
}

footer .footer-wrap .company a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

footer .footer-wrap .company a span:first-child {
    font-size: 14px;
    font-weight: 700;
    color: #7a7a7a;
    margin-right: 6px;
}

footer .footer-wrap .company a span.info-toggle {
    display: block;
    width: 10px;
    height: 5px;
    background-image: url('../images/icon_footer_chevron_on.png');
    background-size: cover;
    background-repeat: no-repeat;
}

footer .footer-wrap .company a span.info-toggle.open {
    background-image: url('../images/icon_footer_chevron_off.png');
}

footer .footer-wrap .company .company-info {
    display: none;
    padding-top: 10px;
}

footer .footer-wrap .company .company-info ul li {
    font-size: 12px;
    color: #a3a3a3;
    line-height: 16px;
}

footer .footer-wrap .copyright {
    font-weight: 500;
    font-size: 11px;
    color: #d3d3d3;
    margin-top: 20px;
}

.deco-chevron {
    width: 6px;
    height: 12px;
    background-image: url('../images/icon_chevron.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.deco-chevron.bl {
    background-image: url('../images/icon_chevron_black.png')
}

.btn {
    text-align: center;
}

.btn.login-small {
    background: #008bef;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    width: 74px;
    height: 36px;
    line-height: 36px;
    border-radius: 6px;
}

.cc-blue .btn.sub-large {
    background: #008bef;
}

.btn.sub-large {
    line-height: 50px;
    text-align: center;
    width: 100%;
    border-radius: 6px;
}

.btn.sub-large span {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.btn.sub-middle {
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    border-radius: 6px;
}

.btn.sub-middle span {
    color: #fff;
    font-size: 14px;
}

.btn.layer-large {
    line-height: 50px;
    text-align: center;
    width: 100%;
    border-radius: 6px;
}

.btn.layer-large span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.btn.layer-large.bg-lgrey span {
    color: #797979;
    font-size: 14px;
    font-weight: 500;
}

.btn.small {
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    width: 100%;
    border-radius: 6px;
}

.btn.small span {
    color: #666;
    font-size: 14px;
}

@media screen and (min-width: 701px) {
    .deco-chevron {
        width: 8px;
        height: 16px;
    }
}

.sdw-s {
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
}

/*250317 수정 start*/
.nt-tab-wrap {
    background: #fff;
    border-bottom: 1px solid #eceded;
}

.nt-sub-tab-wrap {
    margin: 0px;
    background: #fff;
    border-bottom: 1px solid #eceded;
}

.nt-tab {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}

.nt-sub-tab {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}

.nt-sub-tab div {
    display: inline-flex;
    height: 48px;
    line-height: 48px; /*width: 50%;*/
    text-align: center;
    cursor: pointer;
}

/*.nt-tab {white-space: nowrap; overflow-x: auto;  overflow-y: hidden; flex-wrap: inherit !important; scrollbar-width: none; font-size: 0;}*/
.nt-tab.myteen-history {
    padding: 0
}

.nt-tab div {
    display: inline-flex;
    padding: 0 10px;
    height: 50px;
    line-height: 50px; /*width: 50%;*/
    text-align: center;
    cursor: pointer;
}

.nt-tab div span {
    font-size: 16px;
    color: #ababab;
}

.nt-tab div.selected {
    border-bottom: 3px solid #008bef;
}

.nt-tab div.selected span {
    font-weight: 700;
    color: #008bef;
}

.nt-sub-tab div.selected span {
    font-weight: 700;
    color: #008bef;
}

.nt-cont, .nt-sub-cont {
    display: none;
}

.nt-cont.selected, .nt-sub-cont.selected {
    display: block;
}

@media screen and (min-width: 701px) {
    .nt-tab.myteen-history {
        padding: 0 20px
    }

    .nt-tab {
        max-width: 680px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
    }

    .nt-tab div {
        display: flex;
        padding: 0;
        width: 50%;
        justify-content: center
    }

    .nt-sub-tab-wrap {
        margin: 0 20px;
    }
}

@media screen and (min-width: 360px) {
    .nt-tab.myteen-history {
        padding: 0
    }

    .nt-tab {
        max-width: 680px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 20px;
    }

    .nt-tab div {
        display: flex;
        padding: 0;
        width: 50%;
        justify-content: center
    }
}

/*250317 수정 end*/

.dnt-tab-wrap {
    background: #fff;
    border-bottom: 1px solid #eceded;
}

.dnt-tab {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}

.dnt-tab.myteen-history {
    padding: 0
}

.dnt-tab div {
    height: 50px;
    line-height: 50px;
    width: 50%;
    text-align: center;
    cursor: pointer;
}

.dnt-tab div span {
    font-size: 16px;
    color: #ababab;
}

.dnt-tab div.selected {
    border-bottom: 3px solid #008bef;
}

.dnt-tab div.selected span {
    font-weight: 700;
    color: #008bef;
}

@media screen and (min-width: 701px) {
    .dnt-tab {
        max-width: 680px;
        margin: 0 auto;
    }

    .dnt-tab.myteen-history {
        padding: 0 20px
    }
}

.s-w-wrap {
    padding: 20px;
    background: #fff;
}

@media screen and (min-width: 701px) {
    .s-w-wrap {
        margin: 0 20px;
        border-radius: 10px;
    }
}

mypage-title {
    font-size: 16px;
    padding: 30px 20px 10px;
    border-bottom: 1px solid #e4e4e4;
}


.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%;
}

.layer-dialog .ld-wrap .ld-popup {
    background: #fff;
    width: 80%;
    max-width: 400px;
    border-radius: 16px;
    padding: 40px 16px 26px 16px;
}

.layer-dialog .ld-wrap .ld-popup.has-header {
    padding: 0;
}

.layer-dialog .ld-wrap .ld-popup .ldp-body .ldp-content {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.layer-dialog .ld-wrap .ldp-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    column-gap: 10px;
    margin-top: 26px;
}

.layer-dialog .ld-wrap .ldf-content {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    overflow-y: scroll;
}

.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;
}

.ld-popup.has-header .ldf-foot {
    padding: 20px;
}

.ldf-btn-wrap.btn2 {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
}

.layer-btn {
    width: 100%;
}

.ars-info .find-id-p {
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    margin-top: 14px;
}

.ldf-title-wrap {
    padding: 20px 20px 0 20px
}

.ars-info p.line {
    height: 10px
}

.ldfm-tt {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    padding-bottom: 8px;
}

.ldfm-td {
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    padding-bottom: 10px;
}

.ldfm-tx {
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    border-bottom: 1px solid #dadada;
    padding-bottom: 10px;
}

.ldfm-af {
    background: #f7f7f7;
    border: 1px solid #eaeaea;
    padding: 16px;
}

.ldf-pw-new {
    margin-top: 30px;
}

.ldf-pw-new .sk-box {
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    margin-bottom: 10px;
}

.ldf-pw-input {
    margin-bottom: 10px;
}

.ldf-pw-input:last-child {
    margin-bottom: 0;
}

.mc-tb-wrap {
    padding: 10px 0 20px;
}

.mc-tb-wrap .mc-tb-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.mc-tb-wrap .mc-tb-row.bdr {
    border-bottom: 1px solid #dadada;
}

.mc-tb-wrap .mc-tb-row span {
    font-size: 14px;
}

.mc-tb-wrap .mc-tb-row:first-child {
    padding: 16px 0;
}

.mc-tb-wrap .mc-tb-row:last-child {
    padding-bottom: 20px;
}

.ars-info {
    background: #f7f7f7;
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
}

.ars-info p {
    font-size: 14px;
    color: #797979;
}

.ars-info ul {
    margin-top: 8px;
}

.ars-info li {
    font-size: 14px;
    color: #797979;
    line-height: 1.2;
    padding-bottom: 6px;
    position: relative;
    padding-left: 16px;
}

.ars-info li span {
    display: block;
    position: absolute;
    top: 0;
    left: 0px;
    width: 12px;
    text-align: center;
    color: #797979;
}

.ars-info .ars-user-p {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-top: 14px;
}

.ars-cert .ars-cert-tx {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.ars-cert .ars-cert-num {
    border: 1px solid #ebebeb;
    line-height: 70px;
    text-align: center;
    margin-top: 14px;
}

.ars-cert .ars-cert-num span {
    font-size: 30px;
    font-weight: 700;
}

.ldf-body .dc-wrap {
    background: #fff;
    padding: 0;
    border-radius: 0;
}

.ldf-body .number_list {
}

.ldf-body .number_list li {
    padding: 15px 0px;
    font-size: 14px;
}

.ld-img-wrap {
    margin: 0 auto;
    text-align: center;
}

.ld-img {
    width: 125px;
    margin: 0 auto;
}

.ld-img-tx * {
    font-size: 17px;
    font-weight: 700
}

@media screen and (min-width: 701px) {
    .layer-dialog .ld-wrap .ld-popup .ldp-body .ldp-content {
        font-size: 16px;
    }

    .layer-dialog .ld-wrap .ldf-content {
        width: 420px;
        height: auto;
        padding-bottom: 30px;
        overflow-y: hidden;
    }
}

/*조회 - 기간 설정*/
.period {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #cacaca;
}

.period .period-btn-wrap {
    position: relative;
    height: 36px;
    text-align: center;
    width: 100%;
    border-right: 1px solid #cacaca;
}

.period .period-btn-wrap:last-child {
    border: 0
}

.period input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    cursor: pointer;
    height: 36px;
    top: 0;
    left: 0;
}

.period-btn {
    line-height: 36px;
    color: #797979;
    font-size: 13px;
    text-align: center;
}

.period .period-btn-wrap input .period-btn:last-child {
    border: 0;
}

.period input[type="radio"]:checked ~ .period-btn {
    background: #000;
}

.period input[type="radio"]:checked ~ .period-btn label {
    color: #fff;
}

.date-box-wrap {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-bottom: 10px;
}

.date-box, .searchForm {
    width: 100%;
}

.searchForm input {
    width: 100%;
    padding: 0 10px;
    border: 1px solid #cacaca;
    line-height: 36px;
    font-size: 13px;
}

/*이용약관*/
.mp-title .check-box {
    color: #000;
    font-weight: 700;
}

.mp-list .st-tail a {
    width: 30px;
    height: 40px;
    display: block;
}

@media screen and (min-width: 701px) {
    .mp-item:last-child {
        border-bottom: 0;
    }
}

/*검색창*/
.nt-cont-wrap {
    padding: 0 20px;
}

.nt-search-wrap {
    padding: 25px 0;
    border-bottom: 1px solid #e4e4e4
}

.search_wrap {
    padding-bottom: 25px;
    width: 100%;
    height: 40px;
    position: relative
}

.search_wrap input {
    width: 100%;
    height: 40px;
    border-radius: 20px;
}

.search_wrap .btn_submit {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    background: url("../images/search_btn.png") no-repeat 50% 50%;
    background-size: cover;
    border: none;
}

/* 시스템팝업 */
.sys-pop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sp-wrap {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 360px;
    overflow: hidden;
}

.sp-header {
    padding: 20px 0 16px;
    border-bottom: 1px solid #E4E4E4;
    margin: 0 20px;
}

.sp-header > h1 {
    font-size: 18px;
    font-weight: 700;
}

.sp-body {
    padding: 20px;
    font-size: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.sp-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F1F1F1;
}

.sp-footer > a {
    width: 50%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #979797;
    padding: 16px 0;
}

.sp-footer > a:first-child {
    border-right: 1px solid #E6E6E6;
}

/*레이어팝업*/
.layerpopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup_contents {
    width: 500px;
    background: #ffff;
}

.popup_img {
    margin: 0;
    padding: 0;
    display: flex;
}

.popup_img img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.popup_img a {
    display: inline-flex;
}

.layer_btn_area {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layer_btn {
    flex: 1 1 40%;
    text-align: center;
    border-right: 1px solid #dadada;
    height: -webkit-fill-available;
    align-content: center
}

.layer_btn a {
    display: flex;
    justify-content: center;
    line-height: 70px
}

@media screen and (max-width: 701px) {
    .layerpopup {
        padding: 20px;
    }

    .popup_contents {
        width: 100%;
    }

    .layer_btn_area {
        height: 50px;
    }

    .layer_btn a {
        line-height: 50px;
        font-size: 13px;
    }
}


.mw-container {
    padding: 20px 0;
}

.tb-ntm {
    border: 1px solid #dadada;
}

.tb-ntm th {
    background: #EFF2F4;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    border: 0;
}

.tb-ntm td {
    border: 0;
    border-bottom: 1px solid #dadada;
    padding: 12px 15px;
    font-size: 14px;
}

@media screen and (max-width: 701px) {
    .da-pd {
        padding-top: 30px !important;
    }
}

/*은행선택 팝업*/
#layerpop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
}

.banklist_wrap {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}

.pop_title {
    position: relative;;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #dadada;
    text-align: center;
    font-size: 17px;
}

.btn_close a {
    position: absolute;
    top: 19px;
    right: 20px;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-indent: -9999px;
    background: url(../images/nav_btn_close.png) no-repeat 50% 50%;
    background-size: cover;
}

.bank_list {
    position: fixed;
    padding: 10px 0;
    top: 60px;
    left: 0;
    right: 0;
    overflow-y: scroll;
    bottom: 0;
}

.bank_list .bank_item {
    position: relative;
    display: inline-block;
    float: left;
    width: 33.3%;
    text-align: center;
}

.bank_list .bank_item a {
    position: relative;
    display: inline-block;
    margin: 4px auto;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

.bank_list a .bank_img {
    margin: 0 auto;
    width: 60px;
    height: 60px;
}

.bank_list a p {
    margin-top: 10px;
}

/*하단팝업*/
.bottom-layerpop {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000000;
}

.cashtype_wrap {
    background: #fff;
    border-radius: 10px 10px 0 0;
    width: -webkit-fill-available;;
}

.cash_item {
    font-size: 15px;
    height: 52px;
    line-height: 52px;
    text-align: center;
}

@media screen and (min-width: 701px) {
    .bottom-layerpop {
        justify-content: center;
    }

    .cashtype_wrap {
        width: 640px;
        border-radius: 10px;
    }
}


.sub-bs-wrap {
    padding: 0 20px;
}

.bs-content {
    padding-bottom: 30px;
}

.bs-content h4 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 12px;
}

.select-bank {
    border: 1px solid #cacaca;
    height: 52px;
    line-height: 52px;
    padding-left: 15px;
    font-size: 15px;
    position: relative
}

.select-bank .icon {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    background: url(../images/icon_chevron_down.png) no-repeat 50% 50%;
    background-size: cover;
}

#loading {
    position: fixed;
    top: 30%;
    left: 50%;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background: #3498db;
    animation: pulse 1.5s infinite ease-in-out;
    display: none;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}


.mw-container {
    padding: 20px 0;
}

.tb-ntm {
    border: 1px solid #dadada;
}

.tb-ntm th {
    background: #EFF2F4;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    border: 0;
}

.tb-ntm td {
    border: 0;
    border-bottom: 1px solid #dadada;
    padding: 12px 15px;
    font-size: 14px;
}

@media screen and (min-width: 701px) {
    .banklist_wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1100px;
        height: 460px;
        margin-left: -550px;
        margin-top: -230px;
        background: #fff;
        border-radius: 10px;
    }

    .bank_list {
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        padding: 20px;
    }

    .bank_list .bank_item {
        width: 12.5%;
    }
}

@media screen and (max-width: 701px) {
    .da-pd {
        padding-top: 30px !important;
    }
}

/*250318 추가*/
.bk_num {
    display: flex;
    background: #fff;
    border: 1px solid #008BEF;
    align-items: center;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
}

.bk_num .img {
    width: 40px;
    margin-right: 10px;
}

.btn_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

.btn_wrap a {
    width: 100%;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
}

.lb-right {
    display: flex;
    flex-direction: row;
    gap: 4px;
}