* {
    box-sizing: border-box;
}

#wrap {
    width: 100%;
    overflow-x: hidden;
}

.sec-intro {
    background-color: #ece4e9;
}

.sec-intro__cont {
    padding-top: 101px;
}

.intro-logo {
    height: 36px;
}

.intro-info {
    margin-top: 35px;
    flex: 1;
}

.intro-info__title {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.intro-info__desc {
    margin-top: 24px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.login-noti {
    margin-top: auto;
    padding: 32px var(--base-padding);
    font-size: 13px;
    line-height: 16px;
    color: #64645f;
    text-align: center;
}

.sec-login__cont {
    padding-top: 54px;
}

.logo-title {
    height: 36px;
}

.login-desc {
    margin-top: 46px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
}

.login-form {
    margin-top: 24px;
}

.sec-main {
    background-color: #ece4e9;
}

.sec-main__cont {
    padding: var(--base-padding);
}

.main-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 36px 32px;
}

.main-block + .main-block {
    margin-top: 12px;
}

.main-block__title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.main-block__title--blue {
    color: #465aaa;
}

.main-block__title--red {
    color: #f05a5a;
}

.main-block__desc {
    margin-top: 16px;
    font-size: 13px;
    line-height: 20px;
}

.main-block .btn-wrap {
    margin-top: auto;
    padding: 0;
}

.sec-banking-intro__cont {
    padding: 0;
}

.banking-intro {
    width: 100%;
    padding: 36px 24px 24px;
    display: flex;
    flex-direction: column;
}

.banking-shortcut {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 25px 16px 32px;
    background-color: #ece4e9;
    display: flex;
    flex-direction: column;
}

.banking-intro .btn-wrap {
    margin-top: 12px;
    padding-bottom: 0;
}

.banking-intro__title {
    font-size: 24px;
    line-height: 32px;
    color: #f05a5a;
    font-weight: 700;
    text-align: center;
}

.banking-intro__desc {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
}

.shortcut-list {
    display: grid;
    flex: 1;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    -ms-column-gap: 8px;
    row-gap: 8px;
    -ms-row-gap: 8px;
}

.shortcut-list__item {
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shortcut-list__desc {
    margin-top: 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
}

.noti-info {
    width: 100%;
    padding-top: 120px;
}

.noti-info__symbol {
    display: block;
    margin: 0 auto;
}

.noti-info__title {
    margin-top: 24px;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
}

.noti-info__desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.sec-banking-cert__cont .btn-wrap {
    margin-top: auto;
}

.content-block__block {
    width: 100vw;
    max-width: var(--content-wrapper);
    padding: 0 var(--base-padding);
    margin-left: calc(var(--base-padding) * -1);
}

.content-block__block + .content-block__block {
    border-top: 6px solid #ece4e9;
}

.comm-wrapper {
    width: 100%;
    padding-top: 32px;
}

.text-box + .text-box {
    margin-top: 32px;
}

.content-block__block .text-box:last-child {
    padding-bottom: 48px;
}

.text-box h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.text-box p {
    font-size: 13px;
    line-height: 20px;
}

.text-box h3 + p {
    margin-top: 12px;
}

.text-box h3 + ul {
    margin-top: 12px;
}

.text-box ul li {
    font-size: 13px;
    line-height: 20px;
    padding-left: 10px;
    position: relative;
}

.text-box ul li::before {
    content: "•";
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
}

.content-block__block .toggle-box__btm .text-box_p_list p::before {
    content: "•";
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
}

.text-box p + ul {
    margin-top: 16px;
}

.toggle-box__item {
    border-bottom: 1px solid #ece4e9;
}

.toggle-box__top {
    height: 56px;
    padding: 16px 0;
    padding-right: 30px;
    position: relative;
    cursor: pointer;
}

.toggle-box__top::after {
    content: "";
    position: absolute;
    top: 13px;
    right: 0;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico-arrow-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.toggle-box__item.open .toggle-box__top::after {
    transform: rotate(180deg);
}

.toggle-box__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.toggle-box__wrapper {
    padding-bottom: 18px;
}

.toggle-box__cont {
    font-size: 12px;
    line-height: 16px;
}

.toggle-box__btm {
    height: 0;
    overflow: hidden;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.checkbox-box {
    display: none;
}

.checkbox-box + label {
    display: inline-block;
    padding: 1px 0;
    padding-left: 29px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    position: relative;
    cursor: pointer;
}

.checkbox-box + label::before {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(../img/ico-checkbox-o.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.checkbox-box:checked + label::before {
    background-image: url(../img/ico-checkbox.svg);
}

.agree-box {
    margin-top: 23px;
}

.agree-box__list {
    margin-top: 22px;
    padding-left: 8px;
}

.checkbox-check {
    display: none;
}

.checkbox-check + label {
    display: block;
    padding: 1px 0;
    padding-left: 24px;
    position: relative;
    cursor: pointer;
}

.btn-agree-modal {
    display: block;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    padding-right: 26px;
}

.btn-agree-modal::after {
    content: "";
    width: 9px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-image: url(../img/ico-angle-agree.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.checkbox-check + label::before {
    content: "";
    width: 13px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(../img/ico-check-o.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.checkbox-check:checked + label::before {
    background-image: url(../img/ico-check.svg);
}

.agree-box__item + .agree-box__item {
    margin-top: 17px;
}

.text-box h3 + .btn-agree-modal {
    margin-top: 12px;
}

.agree-box + .text-box {
    margin-top: 32px;
}

.agree-box__all {
    position: relative;
}

.agree-more {
    border-radius: 4px;
    background-color: #f9f9f9;
    line-height: 18px;
    padding: 0 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #747679;
}

.checkbox-box:checked + label + .agree-more {
    background-color: #006ada;
    color: #fff;
}

.agree-box + .agree-box {
    margin-top: 32px;
}

.agree-box__cont {
    margin-top: 12px;
}

.agree-box__cont p {
    font-size: 12px;
    line-height: 16px;
    color: #64645f;
}

.text-noti {
    color: #64645f;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.sec-cert-customer__cont .text-noti {
    margin-top: auto;
}

.cert-customer-form {
    margin-top: 48px;
}

.sec-cert-check__form {
    padding-bottom: 64px;
}

.cert-additional {
    margin-top: 32px;
    padding-bottom: 64px;
}

.cert-additional__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 24px;
    height: 56px;
    background-color: #eeedfa;
    border-radius: 8px;
}

.cert-additional__item + .cert-additional__item {
    margin-top: 12px;
}

.cert-additional__text {
    margin-left: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #261667;
}

.cert-additional__item::after {
    content: "";
    width: 8px;
    height: 14px;
    display: block;
    background-image: url(../img/ico-angle-additional.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
}

.cert-ars {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
}

.cert-ars__img {
    margin-bottom: 32px;
}

.btm-help {
    margin-top: auto;
    padding-bottom: var(--fixed-btn);
}

.phone-numpad__timer {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
}

.phone-marquee {
    margin-top: 12px;
    width: 100%;
    overflow: hidden;
}

.phone-marquee p {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    min-width: 100%;
    color: #fff;
    white-space: nowrap;
    animation: phoneMarquee 10s linear infinite;
}

.phone-noti {
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #fff;
}

.phone-numpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 36px);
    padding: 32px 0;
    opacity: 0;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.phone-numpad.open {
    opacity: 1;
}

.phone-numpad__numpad {
    display: grid;
    flex: 1;
    margin: 0 auto;
    margin-top: 32px;
    max-width: 267px;
    width: 100%;
    max-height: 328px;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    -ms-column-gap: 24px;
    row-gap: 12px;
    -ms-row-gap: 12px;
}

.phone-numpad__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
    /* border-radius: 50%; */
    /* background-color: rgba(255, 255, 255, 0.15); */
    background-image: url(../img/bg-numpad.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.phone-numpad__num:active {
    opacity: 0.6;
}

.phone-numpad__number {
    font-size: 34px;
    line-height: 28px;
}

.phone-numpad__number {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #fff;
}

.phone-numpad__letter {
    font-size: 9px;
    line-height: 11px;
    margin-top: 3px;
    color: #fff;
}

.phone-numpad__end {
    margin: 0 auto;
    margin-top: 36px;
    width: 73px;
    height: 73px;
    background-image: url(../img/ico-call-end.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.phone-numpad__end:active {
    opacity: 0.6;
}

.sec-cert-sms__cont .btn-wrap {
    margin-top: auto;
}

.modal-sms {
    position: fixed;
    top: 52px;
    left: 50%;
    z-index: 600;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 415px;
    padding: 12px 16px 16px;
    border-radius: 12px;
    background-color: #000000;
    opacity: 0;
    animation: showDownCenter 0.5s forwards 0.5s;
    display: none;
}

.modal-sms.open {
    display: block;
}

.modal-sms__title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #31c957;
}

.modal-sms__desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}

.form-basic__row--auth {
    display: none;
}

.form-basic__row--auth input[type="number"] {
    padding-right: 120px;
}

.form-basic__row--auth.show {
    display: block;
}

.form-basic__time {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    font-size: 13px;
    line-height: 20px;
    color: #fd0014;
}

.sec-cert-media__cont {
    padding-top: 64px;
    justify-content: flex-start;
}

.cert-media__intro {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    text-align: center;
}

.cert-media__list {
    width: 232px;
    margin: 0 auto;
    margin-top: 24px;
}

.cert-media__item {
    width: 100%;
    height: 25vh;
    max-height: 164px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #eeedfa;
}

.cert-media__ico {
    width: 36px;
}

.cert-media__desc {
    margin-top: 24px;
    font-size: 16px;
    line-height: 22px;
    color: #261667;
}

.cert-media__item + .cert-media__item {
    margin-top: 12px;
}

.cert-secure__label {
    display: flex;
    align-items: center;
}

.cert-secure__label p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    display: inline-block;
    vertical-align: top;
}

.cert-secure__tooltip {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    width: 14px;
    background-image: url(../img/ico-tooltip.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 8px;
}

.cert-secure__field {
    margin-top: 16px;
    display: flex;
}

.cert-secure__box + .cert-secure__box {
    margin-left: 12px;
}

.cert-secure__box {
    flex: 1;
    border-radius: 8px;
    background-color: #eeedfa;
    padding: 24px 8px;
    text-align: center;
}

.cert-secure__desc {
    font-size: 13px;
    line-height: 20px;
}

.cert-secure__row + .cert-secure__row {
    margin-top: 32px;
}

.cert-secure__nums {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-secure__num {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #006ada;
}

.cert-secure__input-list {
    display: flex;
    align-items: center;
}

.cert-secure__num + .cert-secure__num {
    margin-left: 12px;
}

.cert-secure__input-item + .cert-secure__input-item {
    margin-left: 6px;
}

.cert-secure__num + .cert-secure__input-list,
.cert-secure__input-list + .cert-secure__num {
    margin-left: 12px;
}

.cert-secure__input-item .input-basic {
    border: 1px solid #cbd0d6;
    background-color: #fff;
    height: 36px;
    color: #006ada;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    width: 30px;
    border-radius: 4px;
}

.cert-secure__input-item .input-basic:not(:placeholder-shown) {
    border-color: #006ada;
}

.sec-cert-card__cont .btn-wrap {
    margin-top: auto;
}

.sec-cert-otp__cont .btn-wrap {
    margin-top: auto;
}

.cert-service {
    margin-top: 24px;
}

.cert-service-btm {
    margin-top: auto;
    padding: 0 0 32px;
    width: 100%;
}

.service-btm-top {
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-btm-top__item + .service-btm-top__item {
    margin-left: 12px;
}

.service-btm-top__link {
    font-size: 13px;
    line-height: 20px;
}

.service-btm-btm {
    margin-top: 16px;
    display: flex;
    width: 100%;
}

.service-btm-btm__item {
    flex: 1;
}

.service-btm-btm__item + .service-btm-btm__item {
    margin-left: 12px;
}

.service-btm-btm__link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 16px;
    background-color: #eeedfa;
    border-radius: 6px;
    height: 33px;
}

.service-btm-btm__link img {
    margin-right: 8px;
}

.cert-service-title__title {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

.cert-service-title__title .cert-service-title__sms {
    display: inline-block;
    vertical-align: top;
    color: #006ada;
    position: relative;
    font-weight: 700;
    padding-left: 42px;
}

.cert-service-title__title .cert-service-title__sms::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-image: url(../img/ico-service-sms.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cert-service-title__title .cert-service-title__box {
    padding: 0 9px;
    height: 30px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    color: #006ada;
    border-radius: 6px;
    background-color: #eeedfa;
    margin-right: 6px;
}

.cert-service-box {
    margin: 0 auto;
    margin-top: 35px;
    border-radius: 8px;
    background-color: #f0f2f4;
    max-width: 255px;
    padding: 24px 16px 16px;
    text-align: center;
}

.cert-service-box__title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}

.cert-service-box__time {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-service-box__time::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    background-image: url(../img/ico-timer.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 4px;
}

.cert-service-box__timer {
    font-size: 14px;
    line-height: 20px;
    color: #fd0014;
}

.cert-service-box__num {
    font-size: 96px;
    color: #006ada;
    font-weight: 700;
}

.sec-cert-service__noti {
    margin-top: auto;
    font-size: 12px;
    line-height: 16px;
    color: #64645f;
    text-align: center;
}

.sms-chat {
    padding: var(--base-padding) 0;
}

.sms-chat__system {
    color: #747679;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.sms-chat__item {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    padding: 0 4px;
}

.sms-chat__cont {
    max-width: 286px;
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
}

.sms-chat__cont a,
.sms-chat__cont button {
    text-decoration: underline;
    color: #006ada !important;
    font-size: inherit !important;
    text-align: left;
    word-break: break-all;
    overflow-wrap: break-word;
}

.sms-chat__cont span {
    text-align: left;
    word-break: break-all;
    overflow-wrap: break-word;
}

.sms-chat__cont--you {
    align-self: flex-start;
    background-color: #e6e6e8;
}

.sms-chat__cont--you::before {
    content: "";
    width: 8px;
    height: 18px;
    position: absolute;
    bottom: 10px;
    left: -8px;
    background-image: url(../img/img-chat-gray.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sms-chat__cont--me {
    align-self: flex-end;
    background-color: #31c957;
}

.sms-chat__cont--me::before {
    content: "";
    width: 8px;
    height: 18px;
    position: absolute;
    bottom: 10px;
    right: -8px;
    background-image: url(../img/img-chat-green.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sms-chat__cont p {
    font-size: 16px;
    line-height: 20px;
    min-width: 24px;
}

.sms-chat__cont.sms-chat__cont--me p {
    color: #fff;
}

.sms-chat__time {
    position: absolute;
    width: 54px;
    bottom: 0;
    left: calc(100% + 6px);
    font-size: 12px;
    line-height: 15px;
    color: #64645f;
}

.sms-chat-field {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--content-wrapper);
    padding: 12px;
    padding-top: 0;
}

.sms-chat-field__input {
    border-radius: 20px;
    border: 1px solid #cbd0d6;
    height: 40px;
    width: 100%;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
}

.sms-chat-field__input::placeholder {
    color: #cbd0d6;
}

.sms-chat-field__input + label {
    display: none;
}

.sms-chat-field__btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 24px;
    border-radius: 24px;
    background-color: #31c957;
    font-size: 13px;
    line-height: 20px;
    color: #fff;
}

.set-code {
    margin-top: 32px;
}

.set-code input {
    display: none;
}

.set-code input + label {
    display: none;
}

.set-code__list {
    display: flex;
    width: 100%;
    margin: 0 auto;
    max-width: 276px;
}

.set-code__item {
    flex: 1;
    height: 36px;
    background-color: #eeedfa;
    border-radius: 4px;
}

.set-code__item.active {
    background-color: #006ada;
    background-image: url(../img/ico-code-input.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.set-code__item + .set-code__item {
    margin-left: 12px;
}

.set-code-noti {
    margin-top: 40px;
    font-size: 12px;
    line-height: 16px;
    color: #fd0014;
    text-align: center;
    margin-bottom: 24px;
}

.code-numpad {
    margin-top: auto;
    width: 100%;
    max-width: 322px;
    display: flex;
    align-items: flex-end;
    flex: 1;
    padding-top: 20px;
}

.code-numpad__list {
    display: grid;
    width: 100%;
    height: 100%;
    max-height: 213px;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-template-columns: repeat(3, 1fr);
    column-gap: 34px;
    -ms-column-gap: 34px;
    row-gap: 7px;
    -ms-row-gap: 7px;
}

.code-numpad__item {
    width: 100%;
    height: 100%;
}

.btn-code {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.btn-code-init {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/ico-numpad-init.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    color: transparent;
    font-size: 0;
}

.btn-code-del {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/ico-numpad-del.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    color: transparent;
    font-size: 0;
}

.sec-cert-complete__cont {
    padding-top: 64px;
}

.cert-complete-img {
    width: 64px;
    margin-bottom: 24px;
}

.cert-complete {
    margin-top: 48px;
    width: 100%;
    border-radius: 8px;
    background-color: #f0f2f4;
    padding: 24px;
}

.cert-complete__title {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 12px;
}

.cert-complete__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cert-complete__label {
    font-size: 14px;
    line-height: 20px;
}

.cert-complete__desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.sec-cert-complete__cont .btn-wrap {
    margin-top: auto;
}

.modal-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 49;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.modal-alert.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-alert__wrapper {
    background-color: #f2f2f2;
    border-radius: 14px;
    max-width: 276px;
    display: none;
}

.modal-alert.open .modal-alert__wrapper {
    display: block;
}

.modal-alert__top {
    padding: 24px 16px;
    text-align: center;
}

.modal-alert__btm {
    border-top: 1px solid rgba(60, 60, 67, 0.29);
}

.modal-alert__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

.modal-alert__desc {
    margin-top: 16px;
    font-size: 13px;
    line-height: 20px;
}

.modal-alert__btn {
    display: block;
    width: 100%;
    height: 45px;
    text-align: center;
    font-size: 16px;
    color: #007aff;
}

.sec-cert-bio__cont {
    width: 100%;
}

.sec-cert-bio__cont .comm-title {
    width: 100%;
    padding-top: 48px;
}

.cert-bio {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cert-bio__noti {
    margin-top: 44px;
    font-size: 12px;
    line-height: 16px;
    color: #fd0014;
}

.cert-bio-info {
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.cert-bio__desc {
    margin-top: 42px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    text-align: center;
}

.banking-login {
    margin-top: 47px;
    display: flex;
    justify-content: center;
}

.banking-login__item + .banking-login__item {
    margin-left: 12px;
}

.banking-login__item {
    /* border-radius: 50%; */
    overflow: hidden;
}

.banking-login__item img {
    max-width: 100%;
}

.banking-login-info {
    margin-top: 24px;
    font-size: 12px;
    line-height: 16px;
    color: #fd0014;
    text-align: center;
}

.sec-banking-login__cont {
    justify-content: center;
    padding-bottom: 140px;
}

.sec-banking-main__cont {
    padding: 16px var(--base-padding) 32px;
}

.main-greeting {
    border-radius: 8px;
    background-color: #eeedfa;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.main-greeting::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../img/ico-talk-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
}

.banking-greeting__text {
    font-size: 16px;
    line-height: 22px;
    color: #006ada;
}

.main-account {
    border-radius: 8px;
    background-color: #f0f2f4;
    width: 100%;
    margin-top: 9px;
    padding: 19px 16px 12px;
}

.account-name {
    display: flex;
    align-items: center;
}

.account-name__img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

.account-name__text {
    color: #261667;
    font-size: 14px;
    line-height: 20px;
}

.account-num {
    margin-top: 5px;
}

.account-num__top {
    display: flex;
    align-items: center;
}

.account-num__text {
    font-size: 20px;
    line-height: 22px;
    color: #261667;
    font-weight: 600;
}

.account-num__top .btn-small {
    margin-left: 8px;
}

.account-num__desc {
    margin-top: 2px;
    font-size: 14px;
    line-height: 22px;
    color: #747679;
}

.account-amount {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-amount__text {
    font-size: 24px;
    line-height: 29px;
    font-weight: 700;
}

.account-amount .btn-small {
    margin-left: 12px;
}

.accoutn-btns {
    margin-top: 28px;
    display: flex;
}

.accoutn-btns > * + * {
    margin-left: 8px;
}

.banking-main-noti {
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 16px;
    line-height: 16px;
    color: #fd0014;
    margin-top: 12px;
    margin-bottom: 24px;
}

.main-account-link {
    width: 100%;
}

.main-account-link__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 8px;
    background-color: #eeedfa;
}

.main-account-link__item + .main-account-link__item {
    margin-top: 8px;
}

.main-account-link__item img {
    margin-right: 8px;
}

.account-info-top {
    padding: 31px 0 32px;
}

.account-info-top__account {
    display: flex;
    align-items: flex-start;
}

.account-info-top__img {
    width: 24px;
    height: 24px;
    border: 1px solid #cbd0d6;
    border-radius: 50%;
}

.account-info-top__num {
    margin-left: 6px;
}

.account-info-top__text {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.account-info-top__text::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    background-image: url(../img/ico-angle-account.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 13px;
}

.account-info-top__name {
    margin-top: 6px;
    color: #747679;
    font-size: 14px;
    line-height: 20px;
}

.account-info-top__account .btn-small {
    margin-top: 3px;
    margin-left: 9px;
}

.account-info-top__amount {
    margin-top: 24px;
}

.account-info-amount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.account-info-amount__text {
    font-size: 24px;
    font-weight: 700;
}

.account-info-amount__refresh {
    width: 26px;
    height: 26px;
    background-image: url(../img/ico-refresh.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 8px;
}

.account-info-top__btns {
    margin-top: 24px;
    display: flex;
}

.account-info-top__btns > * + * {
    margin-left: 12px;
}

.history-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    background-color: #f0f2f4;
    margin-left: calc(var(--base-padding) * -1);
    width: 100vw;
    max-width: var(--content-wrapper);
    padding: 0 var(--base-padding);
}

.history-filter__btn {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 22px;
}

.history-filter__btn img {
    margin-right: 6px;
}

.history-filter__date {
    display: flex;
    align-items: center;
}

.history-filter__nav {
    width: 6px;
    height: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.history-filter__prev {
    background-image: url(../img/ico-tool-prev.svg);
}

.history-filter__next {
    background-image: url(../img/ico-tool-next.svg);
}

.history-filter__text {
    width: 80px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    margin: 0 17px;
    font-weight: 700;
}

.history-list__list {
    padding: 25px 0;
}

.history-list__item + .history-list__item {
    margin-top: 24px;
}

.history-list__month {
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    padding-bottom: 6px;
}

.history-entry {
    border-top: 1px solid #cbd0d6;
}

.history-entry__item {
    padding: 12px 0 16px;
    border-bottom: 1px solid #f0f2f4;
}

.history-entry__date {
    font-size: 12px;
    line-height: 15px;
    color: #747679;
}

.history-entry__info {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
}

.history-entry__name {
    font-size: 18px;
    line-height: 21px;
}

.history-entry__amount {
    font-size: 18px;
    line-height: 21px;
    font-weight: 700;
}

.history-entry__total {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.history-entry__text {
    font-size: 14px;
    line-height: 17px;
    color: #747679;
}

.sec-account-info__noti {
    padding-bottom: 32px;
    font-size: 12px;
    line-height: 16px;
    color: #fd0014;
    text-align: center;
}

.transfer-title__num {
    font-size: 16px;
    line-height: 19px;
    color: #006ada;
    font-weight: 700;
}

.transfer-title__title {
    margin-top: 6px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.transfer-title__to {
    font-size: 16px;
    line-height: 19px;
    margin-top: 6px;
}

.transfer-title__to span {
    text-decoration: underline;
    font-weight: 700;
}

.transfer-title__account {
    margin-top: 3px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 17px;
}

.transfer-title__account span {
    text-decoration: underline;
    font-weight: 700;
}

.transfer-tab {
    margin-top: 24px;
    position: relative;
    display: flex;
}

.transfer-tab::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: var(--content-wrapper);
    height: 1px;
    background-color: #cbd0d6;
}

.transfer-tab__item {
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 12px;
    color: #747679;
    position: relative;
}

.transfer-tab__item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #1d222c;
    opacity: 0;
    transition: All 0.1s ease-out;
    -webkit-transition: All 0.1s ease-out;
    -moz-transition: All 0.1s ease-out;
    -o-transition: All 0.1s ease-out;
}

.transfer-tab__item.current::before {
    opacity: 1;
}

.transfer-tab__item + .transfer-tab__item {
    margin-left: 24px;
}

.transfer-tab__item.current {
    font-weight: 700;
    color: #1d222c;
}

.transfer-tab__item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3px;
    opacity: 0;
}

.transfer-tab__item.current::after {
    opacity: 1;
}

.transfer-account {
    margin-top: 48px;
}

.transfer-account__name {
    display: flex;
    align-items: center;
}

.transfer-account__name img {
    width: 24px;
    height: 24px;
    border: 1px solid #cbd0d6;
    border-radius: 50%;
    margin-right: 6px;
}

.transfer-account__name span {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

.transfer-account__name::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    margin-left: 13px;
    background-image: url(../img/ico-angle-account.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.transfer-account__field {
    margin-top: 10px;
    position: relative;
}

.transfer-account__number {
    height: 45px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #e8eced;
    font-size: 18px;
    color: #261667;
    font-weight: 700;
}

.transfer-account__number + label {
    display: none;
}

.transfer-account__ghost {
    position: absolute;
    top: 0;
    left: 0;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    font-weight: 700;
    color: #cbd0d6;
    display: none;
    pointer-events: none;
}

.transfer-account__num-fill {
    color: transparent;
}

.transfer-account__number:not(:placeholder-shown) + label + .transfer-account__ghost {
    display: block;
}

.transfer-list {
    padding: 24px 0;
}

.transfer-list__list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    -ms-grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
    -ms-column-gap: 0;
    row-gap: 24px;
    -ms-row-gap: 24px;
}

.transfer-list__item {
    width: 100%;
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
    display: flex;
    align-items: center;
}

.transfer-list__profile {
    flex: 0 0 24px;
    min-width: 0;
    border: 1px solid #f0f2f4;
    border-radius: 50%;
    overflow: hidden;
}

.transfer-list__img {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.transfer-list__info {
    margin-left: 8px;
    flex: 1;
    text-align: left;
}

.transfer-list__name {
    font-size: 16px;
    line-height: 19px;
    color: #1d222c;
    font-weight: 700;
}

.transfer-list__account {
    margin-top: 4px;
    font-size: 12px;
    line-height: 17px;
    color: #747679;
}

.modal-bank {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.modal-bank.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-bank__wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--content-wrapper);
    width: 100%;
    border-radius: 16px 16px 0 0;
    background-color: #ffffff;
    display: none;
    animation: showUpBottom 0.3s forwards;
}

.modal-bank.open .modal-bank__wrapper {
    display: block;
}

.modal-bank__btn-close {
    width: 30px;
    height: 30px;
    top: 16px;
    right: 16px;
    position: absolute;
    background-image: url(../img/ico-btn-modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-bank-title {
    padding: 50px 46px 12px;
}

.modal-bank-title__title {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.modal-bank-tab {
    display: flex;
}

.modal-bank-tab__btn {
    flex: 1;
    font-size: 16px;
    line-height: 43px;
    border-bottom: 1px solid #cbd0d6;
    position: relative;
    transition: All 0.1s ease-out;
    -webkit-transition: All 0.1s ease-out;
    -moz-transition: All 0.1s ease-out;
    -o-transition: All 0.1s ease-out;
}

.modal-bank-tab__btn::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0;
    transition: All 0.1s ease-out;
    -webkit-transition: All 0.1s ease-out;
    -moz-transition: All 0.1s ease-out;
    -o-transition: All 0.1s ease-out;
}

.modal-bank-tab__btn.current {
    font-weight: 700;
}

.modal-bank-tab__btn.current::after {
    opacity: 1;
}

.bank-list {
    height: 292px;
    overflow-y: auto;
    padding: 18px 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    -ms-column-gap: 12px;
    row-gap: 25px;
    -ms-row-gap: 25px;
}

.bank-list__item {
    display: flex;
    align-items: center;
    width: 100%;
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
}

.bank-list__img {
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

.bank-list__name {
    font-size: 16px;
}

.sec-transfer__cont .btn-wrap {
    margin-top: auto;
}

.modal-transfer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.modal-transfer.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-transfer__wrapper {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--content-wrapper);
    border-radius: 16px 16px 0 0;
    background-color: #ffffff;
    padding: 48px 0 0;
    text-align: center;
    display: none;
    animation: showUpBottom 0.3s forwards;
}

.modal-transfer.open .modal-transfer__wrapper {
    display: block;
}

.modal-transfer__img {
    width: 64px;
}

.modal-transfer__title {
    margin-top: 24px;
    font-size: 20px;
    line-height: 24px;
}

.modal-transfer__desc {
    margin-top: 8px;
    font-size: 16px;
    line-height: 22px;
}

.modal-transfer__wrapper .btn-wrap {
    margin-top: 24px;
    padding-left: 16px;
    padding-right: 16px;
}

.transfer-amount {
    margin-top: 24px;
}

.transfer-amount__field {
    border: none;
    font-size: 36px;
    width: 100%;
    font-weight: 600;
}

.transfer-amount__field + label {
    display: none;
}

.transfer-amount__desc {
    margin-top: 13px;
    font-size: 16px;
    line-height: 22px;
    color: #747679;
}

.transfer-amount__desc.error {
    color: #fd0014;
    animation: shake 0.1s forwards 2;
}

.transfer-amount__account {
    margin-top: 24px;
    display: inline-flex;
    height: 40px;
    background-color: #eeedfa;
    padding: 0 8px;
    padding-right: 16px;
    border-radius: 40px;
    align-items: center;
}

.transfer-amount__account-img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

.transfer-amount__account-name {
    font-size: 14px;
    line-height: 22px;
}

.modal-numpad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height) - var(--modal-keypad-height));
    max-height: 322px;
    display: none;
    animation: showUp 0.3s forwards;
    padding-top: 20px;
}

.modal-numpad.open {
    display: block;
}

.modal-numpad__wrapper {
    width: 100%;
    max-width: var(--content-wrapper);
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 16px;
    padding-bottom: 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.modal-numpad__preset {
    display: flex;
    margin-bottom: 17px;
}

.modal-numpad__btn-preset {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    background-color: #eeedfa;
    font-size: 14px;
}

.modal-numpad__btn-preset--all {
    color: #006ada;
}

.modal-numpad__btn-preset + .modal-numpad__btn-preset {
    margin-left: 6px;
}

.modal-numpad__grid {
    display: grid;
    flex: 1;
    width: 100%;
    max-width: 302px;
    height: 100%;
    max-height: 213px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-template-columns: repeat(3, 1fr);
    column-gap: 34px;
    -ms-column-gap: 34px;
    row-gap: 7px;
    -ms-row-gap: 7px;
}

.modal-numpad__item {
    max-height: 48px;
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
}

.modal-numpad__num {
    width: 100%;
    height: 100%;
    font-size: 24px;
    font-weight: 700;
}

.modal-numpad__remove {
    width: 100%;
    height: 100%;
    background-image: url(../img/ico-numpad-del.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    color: transparent;
    font-size: 0;
}

.modal-numpad__confirm {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    background-color: #465aaa;
}

.transfer-data {
    margin-top: 22px;
}

.transfer-data__item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
}

.transfer-data__item + .transfer-data__item {
    border-top: 1px solid #e8eced;
}

.transfer-data__title {
    font-size: 14px;
    line-height: 20px;
}

.sec-transfer__cont .under-form {
    padding: 24px 0 0;
}

.under-form__row + .under-form__row {
    margin-top: 24px;
}

.under-form__label p {
    font-size: 14px;
    line-height: 20px;
    color: #747679;
}

.under-form__field .input-under {
    height: 39px;
    border: none;
    width: 100%;
    border-bottom: 1px solid #cbd0d6;
    font-size: 18px;
    font-weight: 600;
}

.under-form__field .input-under + label {
    display: none;
}

.under-form__checkbox {
    margin-top: 16px;
}

.checkbox-under {
    display: none;
}

.checkbox-under + label {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 22px;
}

.checkbox-under + label::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 2px solid #cbd0d6;
    box-sizing: border-box;
    background-image: url(../img/ico-check-o.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px auto;
    margin-right: 7px;
}

.checkbox-under:checked + label::before {
    border-color: #006ada;
    background-image: url(../img/ico-check.svg);
}

.transfer-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.transfer-complete__symbol {
    width: 64px;
}

.transfer-complete__title {
    margin-top: 24px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    font-weight: 700;
}

.transfer-complete__more {
    padding-right: 21px;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #747679;
    margin-top: 16px;
}

.transfer-complete__more::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 7px;
    transform: translateY(-50%);
    background-image: url(../img/ico-angle-more.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.transfer-complete__btns {
    margin-top: 32px;
    width: 100%;
    display: flex;
}
.transfer-complete__btns > * + * {
    margin-left: 12px;
}

.transfer-sns {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    padding-bottom: calc(var(--fixed-btn) + 57px);
}

.btn-wrap .transfer-sns {
    position: absolute;
    bottom: calc(100% + 57px);
    left: 50%;
    width: 100%;
    max-width: 220px;
    transform: translateX(-50%);
}

.transfer-sns + .btn-wrap {
    margin-top: 33px;
}

.transfer-sns__item {
    text-align: center;
    flex: 1;
    position: relative;
}

.transfer-sns__item + .transfer-sns__item {
    margin-left: 38px;
}

.transfer-sns__img {
    max-width: 100%;
}

.transfer-sns__desc {
    font-size: 14px;
    line-height: 17px;
    color: #261667;
    white-space: nowrap;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.cert-main {
    margin-top: 24px;
    text-align: center;
}

.cert-main__sub {
    font-size: 14px;
    line-height: 17px;
    color: #747679;
    text-align: center;
}

.cert-main__list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cert-main__item {
    width: 243px;
    height: 172px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cert-main__item--personal {
    background: rgb(87, 130, 234);
    background: -moz-linear-gradient(180deg, rgba(87, 130, 234, 1) 0%, rgba(54, 106, 200, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(87, 130, 234, 1) 0%, rgba(54, 106, 200, 1) 100%);
    background: linear-gradient(180deg, rgba(87, 130, 234, 1) 0%, rgba(54, 106, 200, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5782ea",endColorstr="#366ac8",GradientType=1);
}

.cert-main__item--company {
    background: rgb(44, 76, 131);
    background: -moz-linear-gradient(180deg, rgba(44, 76, 131, 1) 0%, rgba(23, 46, 85, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(44, 76, 131, 1) 0%, rgba(23, 46, 85, 1) 100%);
    background: linear-gradient(180deg, rgba(44, 76, 131, 1) 0%, rgba(23, 46, 85, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2c4c83",endColorstr="#172e55",GradientType=1);
}

.cert-main__item + .cert-main__item {
    margin-top: 12px;
}

.cert-main__ico {
    max-width: 100%;
}

.cert-main__title {
    margin-top: 24px;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
}

.cert-main__desc {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

.sec-cert-service__cont .under-form__checkbox {
    display: inline-block;
    margin-top: 24px;
}

.saving-list-title__title {
    font-size: 18px;
    line-height: 21px;
    font-weight: 600px;
}

.saving-list {
    margin-top: 16px;
    padding-bottom: 32px;
}

.saving-list__item {
    display: block;
    border: 1px solid #d3dde8;
    border-radius: 8px;
    padding: 16px;
}

.saving-list__title {
    display: block;
    font-size: 15px;
    line-height: 19px;
    font-weight: 600;
}

.saving-list__desc {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
}

.saving-list__label {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    line-height: 15px;
    color: #465aaa;
}

.saving-list__data-list {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    -ms-column-gap: 12px;
}

.saving-list__data {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 19px;
    color: #465aaa;
}

.saving-list__item + .saving-list__item {
    margin-top: 12px;
}

.saving-benefit {
    margin-top: 24px;
}

.saving-desc {
    margin-top: 16px;
}

.approve-text {
    padding: 24px 0;
}

.approve-text__title {
    font-size: 12px;
    line-height: 16px;
    color: #1d222c;
}

.approve-text__desc {
    font-size: 12px;
    line-height: 16px;
    color: #64645f;
}

.saving-desc {
    margin-top: 23px;
    margin-bottom: 32px;
}

.saving-desc__desc {
    font-size: 12px;
    line-height: 16px;
    margin-top: 8px;
    color: #64645f;
}

.sec-saving__cont .form-basic {
    margin-top: 32px;
}

.modal-confirm {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
}

.modal-confirm.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-confirm__wrapper {
    width: 100%;
    max-width: var(--content-wrapper);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    padding-top: 48px;
    padding-left: var(--base-padding);
    padding-right: var(--base-padding);
    display: none;
    animation: showUpBottom 0.3s forwards;
}

.modal-confirm.open .modal-confirm__wrapper {
    display: block;
}

.modal-msg {
    text-align: center;
}

.modal-msg__title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
}

.modal-msg__desc {
    margin-top: 16px;
    font-size: 13px;
    line-height: 20px;
    color: #64645f;
}

.saving-earn {
    text-align: center;
    margin-bottom: 48px;
}

.saving-earn__title {
    font-size: 28px;
    color: #006ada;
    font-weight: 700;
}

.saving-earn__desc {
    margin-top: 12px;
    font-size: 12px;
}

.sec-saving-form__cont .checkbox-under + label {
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
}

.sec-saving-form__noti {
    margin-top: 12px;
    font-size: 12px;
    line-height: 15px;
    color: #64645f;
}

.sec-saving-form__info {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 15px;
    background-image: url(../img/ico-saving-info.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 6px;
}

.saving-data-box {
    margin-top: 32px;
    padding: 24px;
    border-radius: 8px;
    background-color: #f0f2f4;
    margin-bottom: 32px;
}

.saving-data-box__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saving-data-box__title {
    font-size: 14px;
    line-height: 20px;
}

.saving-data-box__desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.confirm-data {
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 24px;
    max-width: 288px;
}

.confirm-data__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirm-data__title {
    font-size: 13px;
    line-height: 20px;
    color: #64645f;
}

.confirm-data__desc {
    font-size: 13px;
    line-height: 20px;
    color: #64645f;
}

.confirm-data__desc--strong {
    font-weight: 700;
    color: #465aaa;
}

.saving-complete {
    padding-top: 64px;
    text-align: center;
}

.comp-title__img {
    max-width: 64px;
    vertical-align: top;
}

.comp-title__title {
    margin-top: 24px;
    font-size: 20px;
    line-height: 24px;
    color: #1d222c;
    font-weight: 600;
}

.comp-title__desc {
    margin-top: 16px;
    font-size: 13px;
    line-height: 20px;
    color: #1d222c;
}

.comp-data {
    margin-top: 42px;
    padding: 0 15px;
}

.comp-data__item {
    border-bottom: 1px solid #cbd0d6;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comp-data__item:first-child {
    border-top: 1px solid #cbd0d6;
}

.comp-data__title,
.comp-data__desc {
    font-size: 14px;
    line-height: 20px;
}

.comp-data_info {
    text-align: left;
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #64645f;
}

.main-saving {
    padding: 23px 16px;
    border-radius: 8px;
    background-color: #006ada;
    margin-top: 12px;
}

.main-saving__title {
    font-size: 14px;
    line-height: 17px;
    color: #ffffff;
}

.main-saving__amount {
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.main-saving__desc {
    font-size: 20px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 700;
}

.main-saving__amount .btn-small {
    margin-left: 12px;
}

.ex-title {
    margin-bottom: 24px;
}

.ex-title__title {
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
}

.ex-currency {
    flex: 0 0 126px;
    margin-right: 12px;
    border: 1px solid #e8eced;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: relative;
    border-radius: 8px;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.form-basic__field.active .ex-currency {
    border-color: #006ada;
}

.ex-currency::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    width: 11px;
    height: 6px;
    background-image: url(../img/ico-angle-account.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ex-currency__img {
    width: 24px;
    margin-right: 8px;
}

.ex-currency__currency {
    font-size: 18px;
    color: #261667;
    font-weight: 700;
}

.currency-amount {
    position: absolute;
    top: 0;
    left: 16px;
    height: 64px;
    display: flex;
    align-items: center;
}

.currency-amount__img {
    width: 24px;
    margin-right: 8px;
}

.currency-amount + .input-basic {
    padding-left: 100px !important;
}

.currency-amount__currency {
    font-size: 18px;
    font-weight: 700;
    color: #261667;
}

.curr-detail + .curr-detail {
    margin-top: 32px;
}

.curr-detail--date {
    display: none;
    animation: showUp 0.3s forwards;
}

.curr-detail--date.show {
    display: block;
}

.curr-detail-box {
    margin-top: 24px;
    padding: 24px;
    border-radius: 8px;
    background-color: #f0f2f4;
}

.curr-detail-box__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.curr-detail-box__title {
    font-size: 14px;
    line-height: 20px;
}

.curr-detail-box__desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.curr-detail-info {
    margin-top: 31px;
}

.curr-detail-search + .curr-detail-info {
    margin-top: 12px;
}

.curr-detail-info__title {
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    margin-bottom: 12px;
}

.curr-detail-toggle {
    border-radius: 8px;
    border: 1px solid #e8eced;
}

.curr-detail-toggle__top {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: relative;
}

.curr-detail-toggle__top::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    background-image: url(../img/ico-angle-account.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.curr-detail-toggle.open .curr-detail-toggle__top::after {
    transform: translateY(-50%) rotate(180deg);
}

.curr-detail-toggle__title {
    font-size: 18px;
}

.curr-detail-toggle__sub {
    font-size: 13px;
    color: #006ada;
    margin-left: 12px;
}

.curr-detail-toggle__btm {
    height: 0;
    overflow: hidden;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.curr-detail-toggle__wrapper {
    padding: 0 26px;
    padding-bottom: 24px;
}

.curr-detail-toggle__img {
    max-width: 100%;
}

.curr-detail-info__desc {
    margin-top: 16px;
}

.curr-detail-info__desc li {
    text-indent: -9px;
    padding-left: 9px;
    font-size: 13px;
    line-height: 20px;
}

.modal-currency {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
}

.modal-currency.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-currency__wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--content-wrapper);
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 50px 16px 0;
    display: none;
    animation: showUpBottom 0.3s forwards;
}

.modal-currency.open .modal-currency__wrapper {
    display: block;
}

.btn-close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico-btn-modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-currency__title {
    text-align: center;
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
}

.currency-recent {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-template-columns: repeat(4, 1fr);
    column-gap: 12px;
    -ms-column-gap: 12px;
}

.currency-recent__btn {
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: #f0f2f4;
    border-radius: 8px;
    align-items: center;
}

.currency-recent__img {
    width: 24px;
}

.currency-recent__name {
    margin-top: 10px;
    font-size: 16px;
    line-height: 18px;
}

.currency-recent__currency {
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

.currency-list {
    margin-top: 10px;
    padding: 10px 0;
    height: 194px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    -ms-column-gap: 12px;
    row-gap: 15px;
    -ms-row-gap: 15px;
}

.currency-list__item {
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.currency-list__img {
    width: 22px;
    margin-right: 7px;
}

.currency-list__text {
    font-size: 16px;
    line-height: 22px;
}

.ex-map {
    width: 100%;
    flex: 1;
    margin-top: 24px;
    width: 100vw;
    margin-left: calc(var(--base-padding) * -1);
    height: 317px;
    max-width: var(--content-wrapper);
    position: relative;
    overflow: hidden;
}

.ex-map.hide {
    display: none;
}

.ex-map__wrapper {
    width: 900px;
    height: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f2f2f2;
}

.modal-srch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
}

.modal-srch.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-srch__wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--content-wrapper);
    transform: translateX(-50%);
    animation: showUpBottom 0.3s forwards;
    display: none;
    background-color: #fff;
    border-radius: 18px 18px 0 0;
    padding: 50px 16px 0;
}

.modal-srch.open .modal-srch__wrapper {
    display: block;
}

.modal-srch__btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico-btn-modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-srch__title {
    text-align: center;
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
}

.srch-result {
    margin-top: 8px;
    min-height: 160px;
}

.srch-result__item {
    width: 100%;
    border-bottom: 1px solid #ece4e9;
    padding: 16px 0;
    position: relative;
    text-align: left;
}

.srch-result__item::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../img/ico-location.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.srch-result__title {
    font-size: 16px;
    line-height: 19px;
}

.srch-result__desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
}

.modal-date {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
}

.modal-date.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-date__wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--content-wrapper);
    transform: translateX(-50%);
    animation: showUpBottom 0.3s forwards;
    display: none;
    background-color: #fff;
    border-radius: 18px 18px 0 0;
    padding: 50px 16px 0;
}

.modal-date.open .modal-date__wrapper {
    display: block;
}

.modal-date__btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico-btn-modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-date-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-date-title__title {
    width: 140px;
    text-align: center;
    font-size: 18px;
    line-height: 21px;
}

.modal-date-title__nav {
    width: 7px;
    height: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-date-title__nav--prev {
    background-image: url(../img/ico-date-nav-prev.svg);
}

.modal-date-title__nav--next {
    background-image: url(../img/ico-date-nav-next.svg);
}

.modal-date-cal {
    margin: 0 auto;
    margin-top: 34px;
    max-width: 294px;
    padding-bottom: 48px;
}

.modal-date-cal__top,
.modal-date-cal__date {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    -ms-grid-template-columns: repeat(7, 1fr);
    column-gap: 24px;
    -ms-column-gap: 24px;
    row-gap: 24px;
    -ms-row-gap: 24px;
}

.modal-date-cal__date {
    margin-top: 24px;
}

.modal-date-cal__week {
    font-size: 16px;
    line-height: 24px;
    color: #cbd0d6;
    font-weight: 600;
    text-align: center;
}

.modal-date-cal__day {
    font-size: 16px;
    line-height: 24px;
    color: #261667;
    font-weight: 600;
    text-align: center;
}

.modal-date-cal__day--prev,
.modal-date-cal__day--next {
    color: #cbd0d6;
}

.sec-ex-amount__cont {
    padding-bottom: 0 !important;
}

.ex-draw-toggle {
    flex: 1;
    border: 1px solid #ece4e9;
    border-radius: 8px;
}

.ex-draw-toggle.hide {
    display: none;
}

.ex-draw-toggle__title {
    height: 64px;
    width: 100%;
    padding: 0 24px;
    font-size: 18px;
    text-align: left;
    position: relative;
}

.ex-draw-toggle__title::after {
    content: "";
    position: absolute;
    top: 28px;
    right: 28px;
    width: 13px;
    height: 8px;
    background-image: url(../img/ico-angle-account.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ex-draw-toggle__list {
    padding: 0 24px;
    padding-bottom: 15px;
}

.ex-draw-toggle__item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 15px 0;
    text-align: left;
}

.ex-draw-toggle__img {
    width: 24px;
    margin-right: 8px;
}

.ex-draw-toggle__bank {
    font-size: 16px;
    line-height: 19px;
}

.ex-draw-toggle__number {
    margin-top: 4px;
    font-size: 14px;
    line-height: 17px;
    color: #747679;
}

.ex-draw-toggle__btm {
    height: 0;
    overflow: hidden;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.ex-account {
    display: none;
    animation: showUp 0.3s forwards;
    flex: 1;
}

.ex-account.show {
    display: block;
}

.ex-account-box {
    border: 1px solid #ece4e9;
    border-radius: 8px;
    padding: 24px;
}

.ex-account-box__account {
    display: flex;
    align-items: center;
}

.ex-account-box__img {
    width: 24px;
    margin-right: 8px;
}

.ex-account-box__num {
    font-size: 16px;
    line-height: 19px;
}

.ex-account-box__name {
    margin-top: 4px;
    font-size: 14px;
    line-height: 17px;
    color: #747679;
}

.ex-account-box__amount {
    margin-top: 24px;
    font-size: 16px;
    line-height: 19px;
    color: #006ada;
}

.ex-account-draw {
    margin-top: 16px;
    border-radius: 8px;
    background-color: #f0f2f4;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ex-account-draw__title {
    font-size: 14px;
}

.ex-account-draw__desc {
    font-size: 14px;
    font-weight: 600;
}

.modal-check {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 55;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
}

.modal-check.open {
    opacity: 1;
    pointer-events: visible;
}

.modal-check__wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--content-wrapper);
    transform: translateX(-50%);
    animation: showUpBottom 0.3s forwards;
    display: none;
    background-color: #fff;
    border-radius: 18px 18px 0 0;
    padding: 50px 16px 0;
}

.modal-check.open .modal-check__wrapper {
    display: block;
}

.modal-check__btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico-btn-modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-check__title {
    text-align: center;
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
}

.comm-data {
    margin-top: 32px;
}

.comm-data__item {
    border-bottom: 1px solid #ece4e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.comm-data__item:first-child {
    border-top: 1px solid #ece4e9;
}

.comm-data__title {
    font-size: 14px;
}

.comm-data__desc {
    font-size: 14px;
}

.modal-check__noti {
    margin-top: 12px;
    font-size: 13px;
    line-height: 16px;
    color: #64645f;
}

.ex-complete {
    text-align: center;
    padding-top: 48px;
}

.sec-ex-location__cont {
    padding-bottom: 0 !important;
}

.tax-main-noti {
    border-radius: 8px;
    background-color: #eeedfa;
    padding: 18px 16px;
    display: flex;
    align-items: flex-start;
}

.tax-main-noti__text {
    font-size: 16px;
    line-height: 22px;
    color: #006ada;
}

.tax-main-noti__img {
    width: 14px;
    margin-right: 10px;
    margin-top: 3px;
}

.sec-tax-main__cont {
    padding-top: 16px;
}

.tax-type {
    margin-top: 24px;
}

.tax-type__title {
    font-size: 14px;
    line-height: 17px;
    font-weight: 600;
}

.tax-type__list {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -ms-grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    -ms-column-gap: 8px;
    row-gap: 8px;
    -ms-row-gap: 8px;
}

.tax-type__item {
    border-radius: 10px;
    background-color: #f8f9f9;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 2px;
}

.tax-type__ico {
    width: 32px;
    vertical-align: top;
}

.tax-type__name {
    margin-top: 6px;
    font-size: 12px;
}

.tax-type__block + .tax-type__block {
    margin-top: 26px;
}

.tax-card-tab {
    margin-top: 36px;
}

.tax-card-tab__btns {
    display: flex;
    margin-left: calc(var(--base-padding) * -1);
    width: 100vw;
    max-width: var(--content-wrapper);
}

.tax-card-tab__btn {
    flex: 1;
    font-size: 16px;
    line-height: 43px;
    border-bottom: 1px solid #cbd0d6;
    position: relative;
}

.tax-card-tab__btn::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    width: 100%;
    height: 3px;
    background-color: #1d222c;
    opacity: 0;
    transition: All 0.1s ease-out;
    -webkit-transition: All 0.1s ease-out;
    -moz-transition: All 0.1s ease-out;
    -o-transition: All 0.1s ease-out;
}

.tax-card-tab__btn.current {
    font-weight: 700;
    color: #1d222c;
}

.tax-card-tab__cont {
    padding: 32px 0 0;
}

.tax-card-tab__btn.current::after {
    opacity: 1;
}

.tax-appcard {
    margin-top: 59px;
}

.sec-tax-appcard__noti {
    margin-top: auto;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
}

.sec-tax-appcard__cont .btn-wrap {
    padding-top: 16px;
}

.appcard-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d222c;
}

.appcard-screen p {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.appcard-select {
    margin-top: 24px;
}

.appcard-select__item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.appcard-select__ico-card {
    max-width: 100%;
    margin-right: 16px;
}

.appcard-select__info {
    text-align: left;
}

.appcard-select__name {
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
}

.appcard-select__num {
    margin-top: 4px;
    font-size: 14px;
    line-height: 17px;
    color: #747679;
}

.appcard-select__check {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    max-width: 100%;
}

.tax-faceid-noti {
    margin-top: auto;
    font-size: 12px;
    line-height: 16px;
    color: #64645f;
    text-align: center;
}

.tax-faceid {
    padding-top: 94px;
    text-align: center;
}

.tax-faceid__img {
    width: 100%;
    max-width: 96px;
    vertical-align: top;
}

.tax-faceid__title {
    font-size: 20px;
    margin-top: 41px;
    font-weight: 600;
}

.tax-complete {
    text-align: center;
    padding-top: 48px;
}

/* tax */
.tax-detail {
    padding: 37px 0 48px;
}

.tax-detail__title {
    font-size: 18px;
    line-height: 21px;
}

.tax-detail__title b {
    font-weight: 600;
}

.tax-detail__title span {
    color: #006ada;
    font-weight: 600;
}

.tax-detail-total {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tax-detail-total__title {
    font-size: 14px;
    line-height: 17px;
    font-weight: 600;
}

.tax-detail-total__desc {
    font-size: 18px;
    line-height: 21px;
    color: #006ada;
    font-weight: 600;
}

.tax-notice {
    padding-top: 48px;
    text-align: center;
}

.tax-notice__img {
    max-width: 100%;
    vertical-align: top;
}

.tax-notice__title {
    margin-top: 32px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
}

.tax-notice__desc {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
}

.tax-form {
    margin-top: 32px;
    padding-bottom: 48px;
}

.tax-card {
    margin-top: 32px;
}

.tax-card-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tax-card-price__title {
    font-size: 18px;
    line-height: 21px;
}

.tax-card-price__title b {
    font-weight: 600;
}

.tax-card-price__title span {
    font-weight: 600;
    color: #006ada;
}

.tax-card-price__desc {
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
    color: #006ada;
}

.sec-smishing-main__cont {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
}

.sec-smishing-main .comm-title{
    width: 100%;
    padding: 36px;
}

.sec-smishing-main .comm-title img{
    margin-bottom: 36px;
}


.sec-smishing-main .comm-title p{
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 12px;
}

.sec-smishing-main .comm-title h2{
    color: #ffffff;
    font-weight: 700;
}

.smishing-icon {
    position: absolute;
    bottom: 48px;
    left: 38%;
    transform: translateX(-50%);
}

.smishing-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.smishing-icon__img {
    width: 73px;
}

.smishing-icon__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 19px;
    color: #ffffff;
}

.banking-icon {
    position: absolute;
    bottom: 48px;
    left: 62%;
    transform: translateX(-50%);
}

.banking-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banking-icon__img {
    width: 73px;
}

.banking-icon__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 19px;
    color: #ffffff;
}

.modal-sms-toggle {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 16px;
    border-radius: 12px;
    background-color: #000000;
    /* display: none; */
    animation: showDownCenter 0.6s forwards;
}

.modal-sms-toggle.show {
    /* display: block; */
}

.modal-sms-toggle__top {
    display: flex;
    align-items: center;
    padding-right: 24px;
    position: relative;
    cursor: pointer;
}

.modal-sms-toggle__top::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url(../img/ico-angle-sms-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.active .modal-sms-toggle__top::after {
    transform: translateY(-50%) rotate(180deg);
}

.modal-sms-toggle__title {
    padding-left: 30px;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    display: block;
    font-weight: 600;
    flex: 0 0 105px;
    white-space: nowrap;
}

.modal-sms-toggle__title::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url(../img/ico-smishing-msg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.modal-sms-toggle__summery {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-left: 16px;
    font-size: 14px;
    line-height: 17px;
    color: #ffffff;
    transition: All 0.3s ease-out;
    -webkit-transition: All 0.3s ease-out;
    -moz-transition: All 0.3s ease-out;
    -o-transition: All 0.3s ease-out;
}

.modal-sms-toggle__summery br {
    display: none;
}

.modal-sms-toggle.active .modal-sms-toggle__summery {
    opacity: 0;
}

.modal-sms-toggle__btm {
    margin-top: 8px;
    display: none;
}

.modal-sms-toggle__cont {
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    display: block;
    word-wrap: break-word; /* 표준 줄바꿈 */
    overflow-wrap: break-word; /* 표준 줄바꿈 */
    word-break: break-all; /* 가장 강력한 강제 줄바꿈 */
}

.modal-sms-toggle__cont .smishing-whether {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    white-space: normal;
    word-break: break-all;
    text-align: left;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.modal-sms-toggle__cont .smishing-whether span {
    word-break: break-all;
}

.modal-sms-toggle__btns {
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.btn-sms {
    height: 56px;
    line-height: 56px;
    border-radius: 8px;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.btn-sms + .btn-sms {
    margin-left: 12px;
}

.btn-sms--sub {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-sms--main {
    background-color: #31c957;
    color: #fff;
}

.comm-title__info {
    margin-bottom: 32px;
}

.comm-title__discription {
    margin-bottom: 32px;
}

.btn-smishing-o {
    text-align: left;
    margin-bottom: 16px;
}

.btn-smishing-o img {
    margin: 20px 16px 0px 24px;
    width: 16px;
    height: 16px;
}

.btn-smishing-x {
    text-align: left;
    margin-bottom: 16px;
}

.btn-smishing-x img {
    margin: 20px 16px 0px 24px;
    width: 16px;
    height: 16px;
}

.progress-bar {
    padding: 0px 32px 0px 32px;
    width: 0;
    height: 10px;
    background-color: #ffffff;
    border-radius: 0px;
    transition: width 5s linear;
}

.sms-list__title {
    padding-top: 18px;
    padding-bottom: 55px;
    text-align: center;
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
}

.sms-search {
    position: relative;
}

.sms-search__field {
    border-radius: 8px;
    width: 100%;
    background-color: #f0f2f4;
    border: none;
    height: 42px;
    font-size: 13px;
    padding-left: 42px;
    padding-right: 25px;
    color: #000;
}

.sms-search__field::placeholder {
    color: #64645f;
}

.sms-search__field + label {
    display: none;
}

.sms-search__btn {
    width: 14px;
    height: 14px;
    color: transparent;
    font-size: 0px;
    position: absolute;
    top: 14px;
    left: 16px;
    background-image: url(../img/ico-smishing-search.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sms-search__menu {
    width: 14px;
    height: 14px;
    color: transparent;
    font-size: 0px;
    position: absolute;
    top: 14px;
    right: 11px;
    background-image: url(../img/ico-smishing-menu.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.btn-icon--trash {
    width: 16px;
    height: 18px;
    color: transparent;
    font-size: 0px;
    position: absolute;
    right: 26px;
    background-image: url(../img/ico-smishing-trash.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sms-list__list {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    -ms-grid-template-columns: repeat(1, 1fr);
    column-gap: 0;
    -ms-column-gap: 0;
    row-gap: 24px;
    -ms-row-gap: 24px;
    padding-bottom: 36px;
}

.sec-sms-list__cont {
}

.sms-list__item {
    display: flex;
    align-items: flex-start;
    grid-column: auto / span 1;
    -ms-grid-column: auto / span 1;
}

.sms-list__item .sms-past{
    opacity: 0.3;
}

.sms-list__profile {
    flex: 0 0 42px;
    border-radius: 50%;
    border: 1px solid #cbd0d6;
}

.sms-list__img {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sms-list__info {
    padding-top: 2px;
    margin-left: 12px;
    flex: 1;
    min-width: 0;
    position: relative;
    padding-right: 57px;
}

.sms-list__number {
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
}

.sms-list__date {
    position: absolute;
    top: 2px;
    right: 0px;
    padding-right: 16px;
    font-size: 12px;
    line-height: 15px;
    color: #64645f;
}

.sms-list__date::after {
    content: "";
    width: 6px;
    height: 15px;
    background-image: url(../img/ico-angle-smishing-sms.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
}

.sms-list__text {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #64645f;
    overflow: hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px; /* 이 줄을 추가합니다 (line-height 18px * 2줄) */
}

.sms-list__text br {
    display: none;
}

.sms-list__item--new .sms-list__info::after {
    content: "1";
    width: 18px;
    height: 18px;
    line-height: 18px;
    background-color: #31c957;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 24px;
    right: 0;
}

.smishing-chat-field {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--content-wrapper);
    padding: 8px 16px;
    padding-right: 54px;
    background-color: #fcfcfc;
}

.smishing-chat-field__input {
    border-radius: 8px;
    height: 42px;
    background-color: #f0f2f4;
    padding: 0 16px;
    font-size: 13px;
    width: 100%;
    border: none;
}

.smishing-chat-field__input::placeholder {
    color: #64645f;
}

.smishing-chat-field__input + label {
    display: none;
}

.smishing-chat-field__btn-send {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 14px;
    right: 66px;
    color: transparent;
    font-size: 0;
    background-image: url(../img/ico-smishing-btn-send.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.smishing-chat-field__btn-voice {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 14px;
    right: 16px;
    color: transparent;
    font-size: 0;
    background-image: url(../img/ico-smishing-btn-voice.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sms-title {
    flex: 1;
    display: flex;
    align-items: center;
}

.sms-title__profile {
    flex: 0 0 24px;
    border-radius: 50%;
    border: 1px solid #cbd0d6;
}

.sms-title__img {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sms-title__title {
    margin-left: 6px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.modal-smishing-alert {
    position: fixed;
    top: var(--marquee-height);
    /* left: 50%; */
    width: 100%;
    /* transform: translateX(-50%); */
    max-width: var(--content-wrapper);
    /* margin-left: calc(var(--scrollbar-width) * -1); */
    height: calc(100% - var(--marquee-height));
    z-index: 600;
    padding: 58px 36px;
    display: none;
    animation: showOpacity 0.3s forwards;
}

.modal-smishing-alert.open {
    display: block;
}

.modal-smishing-alert#smishing-trust {
    background-color: rgba(32, 22, 103, 0.9);
}

.modal-smishing-alert#smishing-untrust {
    background-color: rgba(255, 0, 0, 0.9);
}

.modal-smishing-alert__sub {
    margin-top: 21px;
    font-size: 14px;
    line-height: 17px;
    color: #ffffff;
    font-weight: 700;
}

.modal-smishing-alert__title {
    margin-top: 16px;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    font-weight: 700;
}

.modal-smishing-alert__title span {
    font-weight: 400;
}

.modal-smishing-alert__desc {
    margin-top: 16px;
    font-size: 14px;
    line-height: 17px;
    color: #fff;
}

.modal-smishing-alert__btn-close {
    position: absolute;
    bottom: 32px;
    width: 158px;
    left: 50%;
    transform: translateX(-50%);
    height: 56px;
    font-size: 16px;
    border-radius: 8px;
    background-color: #fff;
    color: #261667;
    font-weight: 600;
}

/* 250602 환전 통화 비활성화 */
.disabled-currency-item {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 1. 중간 컨테이너 영역이 남은 공간을 모두 차지하고, 내용이 길면 스크롤되도록 설정 */
#container {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 효과*/
}

/* 2. 하단 입력창에 내용이 가려지지 않도록 채팅 영역에 아래쪽 여백 추가 */
.sec-sms-chat__cont {
    padding-bottom: 80px; /* 하단 입력창 높이만큼 여유 공간 확보 (이 값은 필요시 조절 가능) */
}