@charset "utf-8";

/* loginpage-N6 */
.loginpage-N6 {
    overflow: hidden;
    position: relative;
    background: var(--white)
}

.loginpage-N6:has(.contents-container:not(.fullscreen)) {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.loginpage-N6 .contents-inner {
    display: flex;flex-direction: row;
    align-items: center;
    gap: 10rem;
    width: 100%;
    height: 100%; display: flex;  justify-content: center;  align-items: center;
}

.loginpage-N6 .contents-container.container-md .contents-inner {
    gap: 8rem
}

.loginpage-N6 .contents-container.container-sm .contents-inner {
    gap: 6rem
}

.loginpage-N6 .thumb-area {
    flex: 1 1 92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 92rem;
    height: 100%
}

.loginpage-N6 .contents-container.container-md .thumb-area {
    max-width: 100rem
}

.loginpage-N6 .contents-container.container-sm .thumb-area {
    max-width: 58.4rem
}

.loginpage-N6 .thumb {
    width: 100%;
    height: 80rem
}

.loginpage-N6 .fullscreen .thumb {
    height: calc(100% - 8rem)
}

.loginpage-N6 .thumb img {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    object-fit: cover
}

.loginpage-N6 .desc {
    position: absolute;
    padding: 0 6rem;
    width: 100%
}

.loginpage-N6 .desc strong {
    display: block;
    color: var(--white);
    text-align: center
}

.loginpage-N6 .desc p {
    margin-top: 1.6rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center
}

.loginpage-N6 .login-area {
    flex: 1 1 44rem;
    max-width: 44rem
}

.loginpage-N6 .login-area h2 {
    text-align: center
}

.loginpage-N6 .form-group {
    margin: 4rem 0
}

.loginpage-N6 .form-box+.form-box,
.loginpage-N6 .form-box+.form-box-wrap {
    margin-top: 2rem
}

.loginpage-N6 .form-box-wrap {
    display: flex;
    align-items: center;
    gap: 2rem
}

.loginpage-N6 .form-box-wrap .form-box {
    margin-top: 0
}

.loginpage-N6 .form-btn {
    margin-top: 4rem; height: 50px!important
}
.loginpage-N6 .form-btn button{
   width: 100%
}

.loginpage-N6 .login-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    margin-bottom: 4rem
}

.loginpage-N6 .login-more a {
    display: flex;
    align-items: center;
    position: relative;
    color: #999999;
    transition: color 0.3s
}

.loginpage-N6 .login-more a:hover {
    color: var(--black)
}

.loginpage-N6 .login-more a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -2rem;
    opacity: 0.1;
    width: 0.1rem;
    height: 1.2rem;
    background: var(--black);
    pointer-events: none
}

.loginpage-N6 .sns-link {
    position: relative
}

.loginpage-N6 .link-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    position: relative
}

.loginpage-N6 .link-title::before,
.loginpage-N6 .link-title::after {
    content: "";
    flex: 1;
    opacity: 0.1;
    height: 0.1rem;
    background: var(--black)
}

.loginpage-N6 .link-title span {
    color: var(--black);
    font-weight: var(--fw-medium)
}

.loginpage-N6 .link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem
}

.loginpage-N6 .link-wrap a {
    width: 5.6rem;
    height: 5.6rem
}

.loginpage-N6 .ico-kakao {
    background: url(../images/ico_kakao.png) no-repeat center/contain
}

.loginpage-N6 .ico-naver {
    background: url(../images/ico_naver.png) no-repeat center/contain
}

.loginpage-N6 .ico-apple {
    background: url(../images/ico_apple.png) no-repeat center/contain
}

@media (max-width: 1280px) {
    .loginpage-N6 .contents-inner {
        gap: 10rem
    }
}

@media (max-width: 992px) {
    .loginpage-N6 .contents-container:not(.fullscreen) {
        display: flex;
        align-items: center;
        height: 80rem
    }

    .loginpage-N6 .contents-inner {
        justify-content: center
    }

    .loginpage-N6 .thumb-area {
        display: none
    }

    .loginpage-N6 .form-group {
        margin: 3.2rem 0
    }

    .loginpage-N6 .form-box-wrap {
        gap: 1.2rem
    }

    .loginpage-N6 .form-btn {
        margin-top: 3.2rem
    }

    .loginpage-N6 .login-more {
        gap: 2.5rem;
        margin-bottom: 3.2rem
    }

    .loginpage-N6 .login-more a:not(:first-child)::before {
        left: -1.2rem
    }

    .loginpage-N6 .link-wrap {
        gap: 1.2rem;
        margin-top: 1.2rem
    }

    .loginpage-N6 .link-wrap a {
        width: 4.8rem;
        height: 4.8rem
    }
}



.inputset .inputset-input { height:40px!important; padding: 0 2rem!important;} 
.inputset .inputset-input:focus { height:40px!important; padding: 0 2rem!important } 
.inputset .inputset-input::placeholder { color: var(--text-color3); } 
.inputset .inputset-input:disabled {height:40px!important; padding: 0 2rem!important } 
.btnset { display: inline-flex; justify-content: center; align-items: center; min-width: 9.4rem; padding: 0 2rem; height: var(--ht-md)!important; transition: .3s; cursor: pointer; }