html, body {
    height: 100%;
}
body {
    background-color: var(--BG-light);
}

.find-page {
    display: none;
}

/* layout */
.wrapper {
    max-width: 53.8rem;
    margin: 4rem auto 2rem;
    padding: 4rem 6.4rem;
    border-radius: 2.4rem;
    background: var(--white);
    box-shadow: 0px 8px 30px 0px rgba(11, 19, 42, 0.08);
}

/* header */
.login__header {
    margin-bottom: 4rem;
}
.util-menu > ul {
    display: flex;
    justify-content: flex-end;
    gap: 2.4rem;
}
.util-menu a {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1.6rem;
}
.util-menu .util-icon {
    font-size: 1.4rem;
    margin-right: 0.8rem;
}
.util-menu .util-arrow {
    font-size: 1.2rem;
    margin-left: 1rem;
}

/* dropdown */

.dropdown-wrap { position: relative; }
.dropdown-wrap .dropdown__list { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 120px; height: 0; padding: 0; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 20px 0 rgba(11, 19, 42, 0.1); overflow: hidden; transition: .3s ease; opacity: 0; }
.dropdown-wrap.focus .icon_expand:before { transform: rotate(180deg); }
.dropdown-wrap.focus .dropdown__list { height: auto; padding: 8px 0; opacity: 1; }
.dropdown-wrap .dropdown__list li:hover { background-color: var(--sub-A-bright); }
.dropdown-wrap .dropdown__list li a { display: block; padding: 6px 10px 6px 24px; color: var(--gray-dim); font-size: 14px; line-height: 24px; }


/* main(container) */
.login__container .inner {
    max-width: 41rem;
    margin: 0 auto;
}
.login__container h1 {
    margin-bottom: 3.2rem;
    font-weight: 700;
    font-size: 2.4rem;
}

/* login-section */
.login-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 3.2rem 0;
}
.login-input {
    width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border-radius: 1rem;
    border: 1px solid var(--gray-brighter);
}
.login-input + .input-desc {
    margin-top: 0.4rem;
    color: var(--gray-medium);
    line-height: 1.2;
    font-size: 1.3rem;
}
.login-btn {
    width: 100%;
    height: 5.6rem;
    border-radius: 1rem;
    background-color: var(--main-regular);
    color: var(--white);
    font-weight: 700;
    font-size: 1.6rem;
    transition: .2s ease;
}
.login-btn:hover {
    background-color: var(--main-medium);
    box-shadow: 0px 2px 16px 0px rgba(0, 158, 255, 0.50);
}
/* 로그인 버튼 로딩 상태 */
.login-btn--loading {
    background-color: var(--gray-medium) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}
.login-btn--loading:hover {
    background-color: var(--gray-medium) !important;
    box-shadow: none !important;
}
@keyframes login-spin {
    to { transform: rotate(360deg); }
}
.login-btn__spinner {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.login-add-menu {
    margin-top: 1.6rem;
}
.login-add-menu > ul {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}
.login-add-menu .login-add-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    color: var(--gray);
    font-size: 1.4rem;
}

/* banner-section */
.banner-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 4rem 0;
}
.banner {
    position: relative;
    width: 100%;
    min-height: 13rem;
    border-radius: 1rem;
    background-color: var(--BG-UI);
    overflow: hidden;
}
.banner__list {
    display: flex;
}
.banner__item > a {
    display: block;
    width: 100%;
    height: 13rem;
}
.sub-banner {
    border-radius: 1rem;
    overflow: hidden;
}
.sub-banner > a {
    display: block;
}
.banner__item .banner__img,
.sub-banner .sub-banner__img {
    width: 100%;
    object-fit: cover;
}
.banner__num {
    left: auto;
    bottom: 0.8rem;
    right: 0.8rem;
    display: inline-block;
    width: fit-content;
    height: 2rem;
    padding: 0 0.8rem;
    border-radius: 1rem;
    line-height: 2rem;
    background-color: rgba(10, 27, 38, .4);
    color: #fff;
    font-weight: 500;
    font-size: 1.3rem;
}

/* app-download-section */
.app-download-section {
    margin-top: 3.2rem;
}
.app-download-section h2 {
    display: flex;
    align-items: center;
    margin-top: 3.2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--gray-dim);
    font-weight: 500;
    font-size: 1.4rem;
}
.app-download-section h2:before,
.app-download-section h2:after {
    flex-grow: 1;
    display: block;
    height: 1px;
    background-color: var(--BG-medium);
    content: '';
    z-index: 0;
}
.app-download-section h2:before {
    margin-right: 1.6rem;
}
.app-download-section h2:after {
    margin-left: 1.6rem;
}

.app-download > ul {
    display: flex;
    gap: 1.2rem;
}
.app-download > ul > li {
    flex: 1 0 0;
}
.app-download__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem;
    border-radius: 1rem;
    background-color: var(--BG-UI);
    font-weight: 600;
    font-size: 1.4rem;
    transition: .2s ease;
}
.app-download__link:hover {
    background-color: var(--BG-medium);
}
.app-download__link > .icon {
    width: 2rem;
    height: 2rem;
    color: var(--sub-C-light);
}

/* tab-list */
.tab-list {
    display: flex;
    border-bottom: 1px solid transparent;
}
.tab-list > li {
    flex: 1 0 50%;
}
.tab-list .tab-button {
    position: relative;
    width: 100%;
    height: 5.6rem;
    background-color: transparent;
    color: var(--gray-medium);
    font-weight: 600;
    font-size: 1.8rem;
}
.tab-list .tab-button[aria-selected="true"] {
    color: var(--black-regular);
}
.tab-list .tab-button[aria-selected="true"]:after {
    position: absolute;
    bottom: -1px;
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--main-regular);
    content: '';
}
.tab-panel { display: none; }
.tab-panel:not([hidden]) { display: block; }

/* find-info-tab */
.find-info-tab {
    border-bottom: 1px solid var(--gray-brighter);
}
.back-login-btn {
    display: flex;
    align-items: center;
    margin-top: 4rem;
    background-color: transparent;
    color: var(--gray-medium);
}
.back-login-btn .icon {
    margin-right: 0.2rem;
    font-size: 1.4rem;
    transform: rotate(90deg);
}

.form-desc {
    margin: 1.6rem 0;
    color: var(--gray-dim);
    font-size: 1.4rem;
}

/* svg icon */
.icon {
    fill: currentColor;
    height: 1em;
    overflow: hidden;
    width: 1em;
}

/* checkbox */
.checkbox01 { display: none; }
.checkbox01 + label { display: flex; align-items: center; color: var(--black-regular);  font-size: 1.2rem; font-weight: 400; cursor: pointer; user-select:none }
.checkbox01 + label:before { flex: 0 0 2.4rem; display: block; width: 2.4rem; height: 2.4rem; margin-right: 0.8rem; background: url('../images/input-sprite.svg') no-repeat -68px 0; content: ''; }
.checkbox01:checked + label:before { background-position-x: -102px; }

/* dim */
.dim {
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
}

/* recaptcha */
.recaptcha-desc {
    max-width: 53.8rem;
    margin: 2rem auto;
    margin-top: 2rem;
    color: var(--gray-medium);
    text-align: center;
    line-height: normal;
    font-weight: 500;
    font-size: 1.3rem;
}
.recaptcha-desc > a {
    text-decoration: underline;
}

/* SSO 로그인 */
#sso-main { min-height: 100vh; height: 100%; background: url('../images/sso-login__bg.png') no-repeat bottom 20% center / 690px 318px; }
#sso-main .login-wrap { max-width: 440px; min-height: 100vh; height: 100%; margin: 0 auto; }
#sso-main article.login > section { margin: 0; padding: 80px 20px; }
#sso-main h2 { text-align: center; }

.inp-box1 { display: flex; gap: 8px; width: 100%; }
.inp-box1 .inp_btn1 { flex: 0 0 92px; height: 56px; border-radius: 10px; background-color: var(--main-regular); color: #fff; font-size: 16px; font-weight: 600; }

.dropdown-wrap.company_search { width: 100%; }
.dropdown-wrap.company_search .dropdown__list { top: 64px; width: 100%; }
.dropdown-wrap.company_search .dropdown__list li { padding: 16px 16px 16px 24px; cursor: pointer; }
.dropdown-wrap .dropdown__list { z-index: 1; }

article.login .text-back { margin-top: 40px; }
a.text-back { color: var(--gray-medium); font-size: 14px; }
a.text-back:before { display: block; width: 14px; height: 14px; margin-right: 2px; background-position-x: -43px; }


/* google recaptCha 배지 숨기기 */
.grecaptcha-badge { visibility: hidden; }

/* qr 인증 */
.qr-page {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    text-align: center;
}
.qr-page h1 {
    line-height: normal;
    font-weight: 700;
    font-size: 2.4rem;
}

.qr-scan-section h2 {
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 1.8rem;
}
.qr-scan-section .qr-wrap {
    width: 17rem;
    height: 17rem;
    margin: 0 auto;
    border-radius: 1.2rem;
    border: 1px solid var(--gray-brighter);
}
.qr-scan-section .desc {
    margin-top: 1.2rem;
    color: var(--gray);
    line-height: 1.4;
    font-size: 1.4rem;
}

.auth-input {
    display: flex;
    gap: 0.6rem;
}
.auth-input input {
    flex: 1 0 0;
    height: 4.8rem;
    padding: 0 1.6rem;
    border-radius: 1rem;
    border: 1px solid var(--gray-brighter);
    cursor: pointer;
}
.auth-input button {
    flex: 0;
    height: 4.8rem;
    padding: 0 2rem;
    border-radius: 1rem;
    background-color: var(--main-regular);
    color: var(--white);
    font-weight: 500;
    font-size: 1.6rem;
}