@charset "utf-8";

.login-container, .join-container {
    position: relative;
    padding: var(--krds-number-0) var(--krds-number-0) var(--krds-size-height-4) var(--krds-number-0) !important;
    overflow: hidden;
}

.top-tit-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--krds-gap-4);
}

.top-tit-area > .h3-tit {
    font-family: 'Paperlogy' !important;
    font-size: var(--krds-pc-font-size-heading-xlarge) !important;
    font-weight: var(--krds-font-weight-bold) !important;
    color: var(--krds-color-light-gray-90) !important;
    line-height: var(--krds-line-height-base) !important;
    background: none;
    margin-bottom: var(--krds-number-0);
}

.top-tit-area > p {
    font-size: var(--krds-pc-font-size-body-medium) !important;
    font-weight: var(--krds-font-weight-regular) !important;
    line-height: var(--krds-line-height-base) !important;
    color: var(--krds-color-light-gray-90) !important;
    text-align: center;
    z-index: 6;
}

.step-conts {
    margin-top: var(--krds-gap-7);
}

.btn-conts-expand {
    position: relative;
    z-index: 2;
    font-size: var(--krds-pc-font-size-body-small);
    color: var(--krds-color-light-gray-90);
    padding-left: var(--krds-padding-8);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--krds-number-0);
    box-sizing: border-box;
    cursor: default;
}

.disclosure .btn-conts-expand::before {
    position: absolute;
    /* top: var(--krds-number-1); */
    left: var(--krds-number-0);
    content: "";
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    /*background-image: url(../images/common/ico_outline_chk.svg);*/
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent !important;
    background-position: center center;
    margin-right: .4rem;
    transform: rotate(0deg);
    transition: 0.4s ease-in-out;
}

.disclosure .expand-wrap.visible {
    overflow: visible;
}

.disclosure .expand-wrap .expand-in {
    background: var(--krds-light-color-surface-white-subtle);
    border: .1rem solid var(--krds-light-color-border-secondary-light);
}

.certify-use {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-7);
}

.certify-use-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-5);
}

.certify-use-tit {
    font-weight: var(--krds-font-weight-bold) !important;
}

.certify-use-list {
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    grid-template-columns: repeat(4, 1fr);
    gap: var(--krds-gap-5);
    margin-top: var(--krds-number-0) !important;
}

.certify-use-list > li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.certify-use-list > li::before {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    content: "";
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
    background-color: transparent !important;
    forced-color-adjust: none;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: var(--krds-gap-3);
}

.certify-use-list > li.ico-pass::before {
    background-image: url(../images/common/icon_certi_pass.svg);
}

.certify-use-list > li.ico-woori::before {
    background-image: url(../images/common/icon_certi_woori.svg);
}

.certify-use-list > li.ico-nonghyup::before {
    background-image: url(../images/common/ico_certi_nh.svg);
}

.certify-use-list > li.ico-kkotalk::before {
    background-image: url(../images/common/icon_certi_kkot.svg);
}

.certify-use-list > li.ico-hana::before {
    background-image: url(../images/common/ico_certi_hana.svg);
}

.certify-use-list > li.ico-samsungpass::before {
    background-image: url(../images/common/ico_certi_spass.svg);
}

.certify-use-list > li.ico-kkobank::before {
    background-image: url(../images/common/icon_certi_kkob.svg);
}

.certify-use-list > li.ico-kb::before {
    background-image: url(../images/common/ico_certi_kb.svg);
}

.certify-use-list > li.ico-banksalad::before {
    background-image: url(../images/common/ico_certi_salad.svg);
}

.certify-use-list > li.ico-ibk::before {
    background-image: url(../images/common/icon_certi_ibk.svg);
}

.certify-use-list > li.ico-shinhan::before {
    background-image: url(../images/common/ico_certi_shinhan.svg);
}

.certify-use-list > li.ico-toss::before {
    background-image: url(../images/common/icon_certi_toss.svg);
}

.certify-use-list > li.ico-naver::before {
    background-image: url(../images/common/ico_certi_naver.svg);
}

.btn-wrap.both {
    justify-content: space-between;
}

.btn-wrap.both div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--krds-button--gap-xlarge) !important;
}

.login-wrap, .join-wrap {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-9);
    position: relative;
    width: 100%;
    padding: var(--krds-pc-gap-layout-h2-h3) var(--krds-number-0);
    background: none;
}

.login-srch-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.id-form, .password-form {
    flex: 1;
}

/* 로그인 */
.login-form .login-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-8);
    margin: 0 auto;
    width: 100%;
    background-color: var(--krds-color-light-primary-5);
    padding: var(--krds-pc-padding-card-large);
    /*padding: var(--krds-padding-10);*/
    border-radius: var(--krds-radius-xlarge1);
    z-index: 5;
}

.login-form .login-box::before {
    content: "";
    position: absolute;
    width: 345px;
    height: 145px;
    left: 10px;
    top: -137px;
    background-image: url(../images/layout/login-img01.png);
    background-repeat: no-repeat;
    z-index: 5;
}

.login-form .login-box.srch {
    margin: 0 auto;
    max-width: 120rem;
    height: 100%;
}

.login-form .login-box.srch.join-comp {
	max-width: 100%;
}

.login-form .login-box.srch::before {
    display: none;
}

.id-form .login-box.srch::after,
.login-form .login-box.srch::after {
    content: "";
    position: absolute;
    width: 299px;
    height: 120px;
    right: 10px;
    top: -120px;
    background-image: url(../images/layout/login-img02.png);
    background-repeat: no-repeat;
    z-index: 5;
}

.id-form .login-box.srch::after {
    /*display: none;*/
}

.login-form .login-box > ul {
    position: relative;
    display: flex;
    gap: var(--krds-gap-8);
    width: 100%;
    padding: var(--krds-number-0);
    /*border-top: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-divider-gray);
    border-bottom: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-divider-gray);*/
}

.login-form .login-box.srch > ul {
    height: 100%;
}

.login-form .login-box > ul > li {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--krds-gap-7);
    flex: 1;
    position: relative;
    min-width: 0;
    padding: var(--krds-pc-padding-card-medium);
    margin-bottom: var(--krds-number-0) !important;
    background: var(--krds-light-color-surface-white-subtle);
    background-image: none;
    box-shadow: none;
    border-radius: var(--krds-radius-xlarge1);
}

.login-form .login-box > ul > li::before {
    background-image: none;
}

.login-form .login-box .h4-tit {
    position: relative;
    display: inline-block;
    font-size: var(--krds-pc-font-size-heading-medium);
    font-weight: var(--krds-font-weight-bold) !important;
}

.login-form .login-left .h4-tit {
    color: var(--krds-color-light-primary-60) !important;
}

.login-form .login-right .h4-tit {
    color: var(--krds-color-light-success-60) !important;
}

.login-form .h4-tit:before {
	content: none !important;
}

.login-form .login-input-form {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-7);
    width: 100%;
}

.login-form .login-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--krds-gap-3);
    width: 100%;
}

.login-form .login-form-group.both {
    flex-direction: row;
    flex-wrap: wrap;
}

.login-form .login-form-group.both div {
    flex: 1;
}

.login-form .login-form-group.both div .btn {
    min-width: 100%;
}

.login-form .login-form-group .form-tit {
    width: 100%;
    font-size: var(--krds-pc-font-size-body-large) !important;
    font-weight: var(--krds-font-weight-semiBold) !important;
    color: var(--krds-color-light-gray-90) !important;
}

.login-form .login-input-form .join-info-box p {
    text-align: center;
}

.login-form .login-form-group .btn{
    white-space: pre-wrap !important;
}

.login-form .link-group-area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.login-form .link-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.login-form .link-group > li + li::before {
    display: inline-block;
    vertical-align: middle;
    margin: var(--krds-number-0) var(--krds-gap-3);
    content: "";
    width: var(--krds-number-1);
    height: var(--krds-size-height-2);
    background-color: var(--krds-light-color-divider-gray);
}

.login-form .link-group a {
    border-radius: var(--krds-button--radius-medium);
    font-size: var(--krds-button--pc-font-size-medium);
    font-weight: var(--krds-button--font-weight-medium) !important;
    background-color: var(--krds-button--color-text-fill);
    border-color: var(--krds-button--color-text-border);
    color: var(--krds-button--color-text-text);
    width: auto;
    border-style: solid;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--krds-transition-base);
    border-width: var(--krds-light-border-width-variable-regular);
    padding: var(--krds-button--padding-y-medium) var(--krds-button--padding-x-medium);
}

.login-form .link-group a:hover,
.login-form .link-group a:active,
.login-form .link-group a:focus {
    background-color: var(--krds-button--color-text-fill-pressed);
}

.login-form .login-form-group input[type="text"],
.login-form .login-form-group input[type="password"],
.login-form .login-form-group input[type="number"] {
    padding: 0 var(--krds-padding-6) !important;
    background-color: var(--krds-light-color-input-surface) !important;
    border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-input-border) !important;
    height:var(--krds-size-height-8) !important;
    border-radius: var(--krds-radius-medium3) !important;
    font-size: var(--krds-pc-font-size-label-large) !important;
}

.login-form .login-form-group input:not(textarea):placeholder-shown {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.login-form .login-form-group input:focus {
    border-color: var(--krds-light-color-input-border-active) !important;
    border-width: 2px !important;
    outline: none !important;
    box-shadow: none !important;
}
.login-form .login-form-group input[type=radio],
.login-form .login-form-group input[type=checkbox] {
    border-radius: var(--krds-radius-small1);
}

.login-form .login-form-group .form-conts {
    position: relative;
}

.login-form .login-form-group .form-conts .password-info {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: var(--krds-size-height-4);
    height: var(--krds-size-height-4);
    padding: var(--krds-number-0) !important;
    background-color: transparent;
    border-color: var(--krds-light-color-border-transparency);
    color: inherit;
    border: 0;
}

.login-form .login-form-group .form-conts .password-info input[type="checkbox"] {
    display: none;
}

.login-form .login-form-group .form-conts .password-info input[type="checkbox"] + label:before,
.login-form .login-form-group .form-conts .password-info input[type="checkbox"]:checked + label:before {
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

.login-form .login-form-group .form-conts .password-info input[type="checkbox"] + label:before {
    background-image: url(../images/common/ico_pw_visible_off.svg);
}

.login-form .login-form-group .form-conts .password-info input[type="checkbox"]:checked + label:before {
    background-image: url(../images/common/ico_view_mode.svg);
}

.login-form .login-form-group .form-conts .password-info input[type="checkbox"]:checked + label:after {
    display: none;
}

/*.login-form .login-btn-form .simplicity {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    content: "";
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
    background-color: transparent !important;
    forced-color-adjust: none;
    background-size: contain;
    margin-right: var(--krds-gap-3);
    background-image: url(../images/common/ico_simplicity.svg);
}*/

.login-form .join-member-bn-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--krds-gap-5);
    width: 100%;
    padding: var(--krds-pc-padding-card-xsmall);
    border-radius: var(--krds-radius-xlarge2);
    border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-secondary-light);
}

.login-form .join-member-bn-wrap .txt-desc {
    flex-grow: 0;
    font-size: var(--krds-pc-font-size-heading-small) !important;
    font-weight: var(--krds-font-weight-bold) !important;
}

.login-form .join-member-bn-wrap .btn-wrap {
    width: auto;
    margin-top: var(--krds-number-0) !important;
}

.login-form .join-member-bn-wrap .btn-wrap a {
    border-radius: var(--krds-button--radius-medium);
    font-size: var(--krds-button--pc-font-size-medium);
    font-weight: var(--krds-button--font-weight-medium) !important;
    background-color: var(--krds-button--color-text-fill);
    border-color: var(--krds-button--color-text-border);
    color: var(--krds-button--color-text-text);
    width: auto;
    border-style: solid;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--krds-transition-base);
    border-width: var(--krds-light-border-width-variable-regular);
    padding: var(--krds-button--padding-y-medium) var(--krds-button--padding-x-medium);
}

.login-form .join-member-bn-wrap .btn-wrap a:hover,
.login-form .join-member-bn-wrap .btn-wrap a:active,
.login-form .join-member-bn-wrap .btn-wrap a:focus {
    background-color: var(--krds-button--color-text-fill-pressed);
}

.login-form .join-member-bn-wrap .btn-wrap a .svg-icon {
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../images/common/ico_angle.svg);
    mask-image: url(../images/common/ico_angle.svg);
    background-color: var(--krds-button--color-text-text);
    forced-color-adjust: none;
    transform: rotate(-90deg);
    margin-bottom: -0.4rem;
}

.login-form .helper-box {
    --helper-color-background: var(--krds-light-color-surface-secondary-subtler);
    --helper-color-border: var(--krds-light-color-border-secondary-light);
    --helper-color-text: var(--krds-light-color-text-secondary);
    --helper-width-border: var(--krds-light-border-width-variable-regular);
    --helper-icon-size: var(--krds-size-height-3);
    --helper-gap-tit-icon: var(--krds-gap-3);
    --helper-desc-wrap-margin-top: var(--krds-gap-4);
    --helper-desc-wrap-margin-left: calc(var(--krds-size-height-3) + var(--krds-gap-3));
    width: 100%;
    padding: var(--krds-pc-padding-card-xsmall);
    border-radius: var(--krds-radius-xlarge2);
    background-color: var(--helper-color-background);
    border: var(--helper-width-border) solid var(--helper-color-border);
}

.login-form .helper-box .helper-tit {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--helper-color-text);
    font-weight: var(--krds-font-weight-bold) !important;
}

.login-form .helper-box .helper-tit::before {
    margin-right: var(--helper-gap-tit-icon);
    content: "";
    display: inline-flex;
    width: var(--helper-icon-size);
    height: var(--helper-icon-size);
    background-color: var(--krds-light-color-text-basic);
    background-color: transparent !important;
    forced-color-adjust: none;
    background-image: url(../images/common/ico_helper_info.svg);
    background-size: contain;
}

.login-form .helper-box .helper-desc-wrap {
    margin-top: var(--helper-desc-wrap-margin-top);
    margin-left: var(--helper-desc-wrap-margin-left);
}

/* 회원가입 */
.step-wrap {
    --krds-step--layout-gap: var(--krds-number-10);
    --krds-step--step-font-size: var(--krds-pc-font-size-body-xsmall);
    --krds-step--step-title-font-size: var(--krds-pc-font-size-body-small);
    --krds-step--circle-size-default: var(--krds-icon--size-medium);
    --krds-step--circle-size-active: 1.2rem;
    --krds-step--circle-radius: var(--krds-radius-max);
    --krds-step--padding-txt-top: var(--krds-padding-9);
    --krds-step--padding-txt-right: var(--krds-padding-9);
    --krds-step--border-width-medium: 0.3rem;
    --krds-step--color-step: var(--krds-light-color-text-subtle);
    --krds-step--color-step-title: var(--krds-light-color-text-basic);
    --krds-step--color-fill-default: var(--krds-light-color-element-gray-light);
    --krds-step--color-fill-done: var(--krds-light-color-element-gray);
    --krds-step--color-fill-active: var(--krds-light-color-element-primary);
    --krds-step--color-fill-white: var(--krds-light-color-element-inverse-static);
    --krds-step--color-border-default: var(--krds-light-color-element-disabled-light);
    --krds-step--color-border-done: var(--krds-step--color-fill-done);
    --krds-step--color-border-active: var(--krds-step--color-fill-active);
    --krds-step--color-icon-done: var(--krds-step--color-fill-white);
    --krds-step--color-icon-active: var(--krds-step--color-fill-active);
    display: flex;
    margin-bottom: var(--krds-step--layout-gap);
    padding: 0;
    overflow-x: inherit;
    background: none;
}

.step-wrap > li {
    position: relative;
    flex-shrink: 1;
    padding: 0;
}

.step-wrap > li:not(:last-child) {
    width: 33.33333333%;
}

.step-wrap > li > a {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: var(--krds-step--padding-txt-top);
    /*padding-right: var(--krds-step--padding-txt-top);*/
}

.step-wrap > li > a::before,
.step-wrap > li > a::after {
    content: "";
    border-radius: var(--krds-step--circle-radius);
}

.step-wrap > li > a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--krds-step--circle-size-default);
    height: var(--krds-step--circle-size-default);
    background-color: var(--krds-step--color-fill-default);
    border: 0.1rem solid var(--krds-step--color-border-default);
    box-sizing: border-box;
}

.step-wrap > li > a.on::before {
    background-color: var(--krds-step--color-fill-white);
    border-width: var(--krds-step--border-width-medium);
    border-color: var(--krds-step--color-border-active);
}

.step-wrap > li > a.on::after {
    position: absolute;
    top: calc((var(--krds-step--circle-size-active) - var(--krds-step--circle-size-default)) / 2 * -1);
    left: calc((var(--krds-step--circle-size-default) - var(--krds-step--circle-size-active)) / 2);
    width: var(--krds-step--circle-size-active);
    height: var(--krds-step--circle-size-active);
    /*background-color: var(--krds-step--color-icon-active);*/
    background: var(--krds-step--color-icon-active) url(../images/common/ico_step_active.svg) no-repeat center;
    z-index: 3;
}

.step-wrap > li a .step {
    font-size: var(--krds-step--step-font-size);
    color: var(--krds-step--color-step);
    line-height: var(--krds-line-height-base);
}

.step-wrap > li a .step-tit {
    font-size: var(--krds-step--step-title-font-size);
    font-weight: var(--krds-font-weight-bold);
    color: var(--krds-step--color-step-title);
    white-space: nowrap;
}

.step-wrap > li a.on .step-tit {
    color: var(--krds-color-light-primary-60);
}

.step-wrap > li:not(:last-child) a .step-tit:before {
    content: "";
    display: block;
    position: absolute;
    left: 2rem;
    /* bottom: -3.5rem; */
    top: 0.9rem;
    width: 100%;
    height: var(--krds-step--border-width-medium);
    background-color: var(--krds-step--color-fill-default);
}

.step-wrap > li:not(:last-child) a.on .step-tit:before {
    /*background-color: var(--krds-step--color-border-default);*/
    /*background: var(--krds-step--color-fill-active);*/
    background: var(--krds-color-light-primary-30);
}

.subTab-list li:before,
.subTab-list li a.on span:before {
    display: none;
}

/* 약관동의 */
.step-now {
    font-size: var(--krds-pc-font-size-body-xsmall);
}

.step-now .point02 {
    color: var(--krds-color-light-primary-50);
}

.step-terms .terms-agree-all {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-3);
}

.step-terms .terms-form-check.large  input[type=checkbox] ~ label {
    font-size: var(--krds-pc-font-size-heading-small) !important;
    font-weight: var(--krds-font-weight-bold) !important;
    gap: var(--krds-gap-5);
}

.step-terms .terms-form-check.large  input[type=checkbox] ~ label:before {
    width: var(--krds-size-height-4);
    height: var(--krds-size-height-4);
}

.step-terms .terms-form-check.large  input[type=checkbox] ~ label:after {
    top: calc((var(--krds-size-height-4) - var(--krds-size-height-4)) / 2 + var(--krds-gap-1));
    left: calc((var(--krds-size-height-4) - var(--krds-size-height-4)) / 2);
    display: inline-flex;
    width: var(--krds-size-height-4);
    height: var(--krds-size-height-4);
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(../images/common/ico_checkbox_checked.svg);
    mask-image: url(../images/common/ico_checkbox_checked.svg);
    /*background-color: var(--krds-form-check--checkbox-check-color-element);*/
}

.step-terms  .terms-agree-all .conts-desc {
    padding-left: var(--krds-padding-10);
}

.step-terms .terms-agree-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-top: var(--krds-gap-5);
    padding: var(--krds-padding-8);
    background-color: var(--krds-light-color-surface-gray-subtle) !important;
    border-radius: var(--krds-radius-xlarge1);
}

.step-terms .terms-agree-box .txt {
    color: var(--krds-color-light-gray-90) !important;
}

.step-conts, .terms-agree-ul {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-9);
}

.step-terms .terms-info-detail {
    display: none;
}

.open {
	display:block;
}

.step-terms .terms-info-detail .conts-box:first-child {
    margin-top: var(--krds-number-0) !important;
}

/* 본인인증 */
.step-certify .certify-type {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--krds-gap-7);
    width: 100%;
}

.step-certify .certify-type > li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-direction: column;
    flex: 1;
    flex-shrink: 0;
    position: relative;
    padding: var(--krds-padding-9) var(--krds-padding-9) var(--krds-padding-9) var(--krds-number-21);
    background-color: var(--krds-light-color-background-gray-subtler);
    border-radius: var(--krds-radius-xlarge1);
    border: var(--krds-number-1) solid var(--krds-light-color-border-secondary-light);
}

.step-certify .certify-type > li::before {
    position: absolute;
    top: var(--krds-gap-8);
    left: var(--krds-gap-8);
    content: "";
    display: inline-flex;
    width: var(--krds-size-height-6);
    height: var(--krds-size-height-6);
    forced-color-adjust: none;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.step-certify .certify-type > li.verify::before {
    background: url(../images/common/ico_login_certify_type_05.svg);
}

.step-certify .certify-type > li.mobile::before {
    background: url(../images/common/ico_login_certify_type_01.svg);
}

.step-certify .certify-type > li.simplicity::before {
    background: url(../images/common/ico_login_certify_type_03.svg);
}

.step-certify .certify-type > li::after {
    position: absolute;
    top: var(--krds-gap-9);
    left: auto;
    right: var(--krds-gap-8);
    content: "";
    display: inline-flex;
    width: var(--krds-size-height-4);
    height: var(--krds-size-height-4);
    background-color: var(--krds-light-color-text-basic);
    forced-color-adjust: none;
    background: url(../images/common/ico_more.svg);
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    pointer-events: none;
}

.step-certify .certify-type > li:hover {
    border: var(--krds-number-1) solid var(--krds-button--color-primary-border);
}

.step-certify .certify-type > li:hover .type-tit {
    color: var(--krds-color-light-primary-60) !important;
}

.step-certify .certify-type > li .type-tit {
    margin: var(--krds-gap-2) 0;
    font-size: var(--krds-pc-font-size-heading-medium);
    font-weight: var(--krds-font-weight-bold) !important;
}

.step-certify .certify-type > li .type-tit:before {
	content: none !important;
}

.step-certify .certify-type > li .type-desc {
    margin-top: var(--krds-gap-3);
    color: var(--krds-light-color-text-subtle);
}

.step-certify .certify-type > li .login-link + div {
    margin-top: var(--krds-padding-6);
    z-index: 2;
}

/* 회원가입 완료  */
.join-wrap h5.txt-complate {
	font-family: 'Paperlogy' !important;
    font-size: var(--krds-pc-font-size-heading-xlarge) !important;
    font-weight: var(--krds-font-weight-bold) !important;
    color: var(--krds-color-light-gray-90) !important;
    line-height: var(--krds-line-height-base) !important;
    background: none;
    margin-bottom: var(--krds-number-0);
}

.join-wrap h5.txt-complate:before {
	background: none;
}

/* 서브 실명인증 2026-07-30 (psr) */
/* 신청인 유형 선택 */
.topAreaBox {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--krds-pc-padding-card-large);
    width: 100%;
    background: var(--krds-light-color-surface-primary-subtler);
    border: var(--krds-number-1) solid var(--krds-light-color-border-secondary-light);
    border-radius: var(--krds-radius-xlarge1);
    flex-direction: column;
}

.topAreaBox:before {
    content: "";
    position: absolute;
    display: block;
    width: 8.3rem;
    height: 10rem;
    background-image: url('../images/layout/ico-ylm.png');
    background-repeat: no-repeat;

}

.topAreaBox .topAreaBox_tit {
    font-size: var(--krds-pc-font-size-heading-small) !important;
    font-weight: var(--krds-font-weight-semiBold) !important;
    text-align: left;
    padding-left: 12rem;
}

.join_form .join-btn-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--krds-gap-6);
    width: 100%;
}

.join_form .join-btn-area .join-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--krds-gap-3);
    flex: 1;
    width: 100%;
    height: 20rem;
    padding: var(--krds-pc-padding-card-small);
    border-radius: var(--krds-radius-xlarge2);
    background: var(--krds-light-color-surface-white);
    font-size: var(--krds-pc-font-size-display-small) !important;
    font-weight: var(--krds-font-weight-semiBold) !important;
}

.join_form .join-btn-area .person-btn {
    border: var(--krds-number-3) solid var(--krds-color-high-contrast-success-40);
    color: var(--krds-light-color-text-success) !important;

}

.join_form .join-btn-area .business-btn {
    border: var(--krds-number-3) solid var(--krds-color-light-primary-40);
    color: var(--krds-light-color-text-primary) !important;
}

.join_form .join-btn-area .join-btn i {
    font-size: var(--krds-pc-font-size-display-small) !important;
    font-weight: var(--krds-font-weight-bold);
}

.join_form .join-btn-area .person-btn i {
    color: var(--krds-color-light-success-40);
}

.join_form .join-btn-area .business-btn i {
    color: var(--krds-color-light-primary-40);
}

.join_form .join-btn-area .person-btn:hover,
.join_form .join-btn-area .person-btn.clicked {
    background: var(--krds-color-high-contrast-success-40);
    border: var(--krds-number-3) solid var(--krds-color-high-contrast-success-40);
    color: var(--krds-light-color-text-basic-inverse) !important;;
}

.join_form .join-btn-area .business-btn:hover,
.join_form .join-btn-area .business-btn.clicked {
    background: var(--krds-color-light-primary-40);
    border: var(--krds-number-3) solid var(--krds-color-light-primary-40);
    color: var(--krds-light-color-text-basic-inverse) !important;;
}

.join_form .join-btn-area .person-btn:hover i,
.join_form .join-btn-area .person-btn.clicked i {
    color: var(--krds-color-light-success-20);
}

.join_form .join-btn-area .business-btn:hover i,
.join_form .join-btn-area .business-btn.clicked i {
    color: var(--krds-color-light-primary-20);
}

.join_form .agreement_wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--krds-pc-gap-layout-h3-h3) !important;
	width: 100%;
	
}

.join_form .agreement_wrap .textarea, .join_form .agreement_wrap .textarea_box {
	border: var(--krds-number-1) solid var(--krds-light-color-divider-gray-light);
	width: 100%;
	height: 20rem;
	overflow-y: auto;
	
}
.join_form .agreement_wrap .textarea_box.h_auto {
	height: auto;
}

.join_form .agreement_wrap .textarea_box .pre {
	padding: var(--krds-padding-8) !important;
	color: transparent !important;
	box-sizing: border-box;
}

.join_form .select_all_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--krds-gap-5);
    width: 100%;
    padding: var(--krds-padding-7);
    border-top: var(--krds-number-1) solid var(--krds-light-color-divider-gray);
    border-bottom: var(--krds-number-1) solid var(--krds-light-color-divider-gray);
    background-color: var(--krds-color-light-gray-5) !important;
    font-size: var(--krds-pc-font-size-body-medium) !important;
}

.join_form .select_all_box .select_all {
    font-weight: var(--krds-font-weight-semiBold);
}

.join_form .select_all_box strong {
    color: var(--krds-light-color-text-basic) !important
}

.join_form .select_all_box .form-check input[type=checkbox]:checked ~ label strong {
    color: var(--krds-light-color-text-primary) !important;
}




@media (max-width: 1300px) {
    .login-form .link-group-area {
        /*justify-content: center;*/
    }

    .login-form .link-group {
        /*width: 100%;*/
    }
}

@media (max-width: 1280px) {
    .certify-use-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .login-form .btn-conts-expand {
        cursor: inherit;
    }

    .login-form .disclosure .expand-wrap {
        overflow: hidden;
    }

    .login-form .login-box > ul {
        flex-direction: column;
    }

    .login-form .login-box::before,
    .login-form .login-box::after {
        display: none;
    }

    .login-form .link-group-area {
        justify-content: center;
    }

    .certify-use-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 960px) {
    .login-srch-wrap {
        flex-direction: column;
    }

    .login-form .link-group-area {
        justify-content: space-between;
    }

    .login-form .link-group {
        width: auto;
    }

    .certify-use-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 860px) {
    .certify-use-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .top-tit-area > .h3-tit {
        font-size: var(--krds-mobile-font-size-heading-xlarge) !important;
    }

    .top-tit-area > p {
        font-size: var(--krds-mobile-font-size-body-medium) !important;
    }

    .login-form .login-box {
        padding: var(--krds-mobile-padding-card-large);
    }

    .login-form .login-box > ul > li {
        padding: var(--krds-mobile-padding-card-medium);
    }

    .login-form .login-box .h4-tit {
        font-size: var(--krds-mobile-font-size-heading-medium);
    }

    .login-form .login-form-group .form-tit {
        font-size: var(--krds-mobile-font-size-body-large) !important;
    }

    .login-form .link-group a {
        padding: var(--krds-number-0);
        font-size: var(--krds-button--mobile-font-size-medium);
    }

    .login-form .helper-box {
        padding: var(--krds-mobile-padding-card-xsmall);
    }

    .login-form .join-member-bn-wrap {
        padding: var(--krds-mobile-padding-card-xsmall);
    }

    .login-form .login-form-group.both {
        flex-direction: column;
    }

    .certify-use-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .step-certify .certify-type > li {
        padding: var(--krds-padding-7) var(--krds-padding-7) var(--krds-padding-7) var(--krds-number-19);
    }

    .step-certify .certify-type > li::before {
        top: var(--krds-gap-6);
        left: var(--krds-gap-6);
    }

    .step-certify .certify-type > li::after {
        top: var(--krds-gap-7);
    }

    .step-certify .certify-type > li .type-tit {
        font-size: var(--krds-mobile-font-size-heading-medium);
    }
}

@media (max-width: 600px) {
    .login-form .link-group-area {
        flex-direction: column;
        justify-content: center;
    }

    .login-form .join-member-bn-wrap {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .certify-use-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 실명인증 */
    .join_form .join-btn-area {
    	flex-direction: column;
    }
}

@media (max-width: 520px) {
    .step-certify .certify-type {
        flex-direction: column;
    }

    .step-certify .certify-type > li {
        padding: var(--krds-padding-7)
    }

    .step-certify .certify-type > li::before {
        /*position: relative;
        top: 0;
        left: 0;
        margin: 0 auto;*/
        display: none;
    }

    .step-certify .certify-type > li::after {
        display: none;
    }

    .step-certify .certify-type > li .login-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .step-certify .certify-type > li .type-tit {
        position: relative;
        padding-left: 4.8rem;
    }

    .step-certify .certify-type > li .type-tit::before {
        position: absolute;
        top: -.4rem;
        left: 0;
        content: "";
        width: var(--krds-size-height-6);
        height: var(--krds-size-height-6);
        forced-color-adjust: none;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    .step-certify .certify-type > li.verify .type-tit::before {
        background: url(../images/common/ico_login_certify_type_05.svg);
    }

    .step-certify .certify-type > li.mobile .type-tit::before {
        background: url(../images/common/ico_login_certify_type_01.svg);
    }

    .step-certify .certify-type > li.simplicity .type-tit::before {
        background: url(../images/common/ico_login_certify_type_03.svg);
    }
   
}


@media (max-width: 480px) {
    .certify-use-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .step-wrap > li a .step-tit {
        font-size: 0;
    }


}

@media (max-width: 320px) {
    .login-form .helper-box .helper-tit::before {
        margin-top: -28px;
    }
}