@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Gyuri Son., Hyerin Lim (Weaverloft Corp.)
    * 2. Production Date: 2025-07
    * 3. Client: Auoseed
 */

/*========== 공통 ==========*/
.login-container { display: flex; justify-content: center; align-items: center; padding-top: 80px; background: var(--bg-color); min-height: 100vh; }
.login-container .login-box { width: 100%; max-width: 550px; margin: 30px auto 100px; padding: 60px 36px 50px; border-radius: 16px; background: #fff; }
.login-container .login-box .login-title { font-size: 26px; font-weight: 700; color: var(--text-color-2); text-align: center; line-height: 1.3; }
.login-container .login-box .login-form { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.login-container .login-box .form-bottom-row { display: flex; justify-content: space-between; color: var(--text-color-5); }
.login-container .login-box .form-bottom-row .link-wrap { display: flex; align-items: center; line-height: 1;}
.login-container .login-box .form-bottom-row .link-wrap a { color: var(--text-color-5); }
.login-container .login-box .form-bottom-row .link-wrap .divider { display: inline-block; width: 1px; height: 16px; margin-inline: 12px; background-color: var(--border-color-d);}
.login-container .login-box .signup-row { display: flex; justify-content: center; gap: 12px; margin-top: 20px; font-size: 18px; font-weight: 500; color: var(--text-color-8); text-align: center; line-height: 1; }
.login-container .login-box .signup-row .signup-link { font-weight: 700; color: var(--point-color); }
.login-container .login-box .banner-wrap { margin-top: 50px; }
.login-container .login-box .trial-banner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 110px; padding: 16px 30px 16px 40px; border-radius: 12px; background: url("../images/front/login-banner-bg.png") no-repeat center / cover; overflow: hidden;}
.login-container .login-box .trial-banner .trial-banner-text { font-size: 16px; font-weight: 500; color: #fff; line-height: 1.25; }
.login-container .login-box .trial-banner .trial-banner-text span { display: block; padding-bottom: 5px; font-size: 20px; font-weight: 700; }
@media screen and (max-width: 1024px) {
    .login-container{ min-height: 100dvh; padding: 64px clamp(16px, 2.93vw, 30px) 70px;}
    .login-container .login-box { margin: 30px auto 0; padding: 3.75em clamp(16px, 3.516vw, 36px) 3.125em; border-radius: clamp(12px, 1.563vw, 16px); font-size: clamp(14px, 1.563vw, 16px);}
    .login-container .login-box .login-title { font-size: clamp(21px, 2.539vw, 26px); }
    .login-container .login-box .login-form{margin-top: clamp(30px, 3.906vw, 40px);}
    .login-container .login-box .form-bottom-row .link-wrap .divider { height: clamp(14px, 1.563vw, 16px); margin-inline: clamp(8px, 1.172vw, 12px); }
    .login-container .login-box .signup-row { gap: 0.6667em; margin-top: 1.1111em; font-size: clamp(15px, 1.758vw, 18px); }
    .login-container .login-box .banner-wrap { margin-top: clamp(40px, 4.883vw, 50px); }
    .login-container .basic-btn.main-btn{ font-size: clamp(16px, 1.758vw, 18px); line-height: clamp(50px, 5.273vw, 54px);}
    .login-container .btn-wrap.two-btn .basic-btn.main-btn{ font-size: clamp(15px, 1.758vw, 18px); line-height: clamp(42px, 5.273vw, 54px);}
}
@media screen and (max-width: 767px) {
    .login-container .login-box .login-form{gap: clamp(12px, 2.086vw, 16px);}
    .login-container .login-box .trial-banner { height: clamp(90px, 14.342vw, 110px); padding: 16px clamp(20px, 3.911vw, 30px) 16px clamp(20px, 5.215vw, 40px); border-radius: clamp(8px, 1.565vw, 12px);}
    .login-container .login-box .trial-banner .trial-banner-text { font-size: clamp(14px, 2.086vw, 16px); word-break: keep-all;}
    .login-container .login-box .trial-banner .trial-banner-text span { padding-bottom: clamp(3px, 0.652vw, 5px); font-size: clamp(18px, 2.608vw, 20px); }
    .login-container .login-box .trial-banner .icon-box { width: clamp(28px, 4.302vw, 33px); height: auto; aspect-ratio: 1/1;}
}
@media screen and (max-width: 340px) {
    .login-container .login-box .form-bottom-row{flex-flow: row wrap; gap: 10px;}
    .login-container .login-box .form-bottom-row .link-wrap{margin-left: auto;}
}

/* 탭 */
.login-container .tab-wrap { padding-top: 40px; }
.login-container .tab-wrap .tab-list { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color-d); }
.login-container .tab-wrap .tab-list .tab-item { flex: 1; position: relative; }
.login-container .tab-wrap .tab-list .tab-item.active::after { display: block; content: ''; position: absolute; bottom: -1px; width: 100%; height: 2px; background: var(--point-color); }
.login-container .tab-wrap .tab-list .tab-item a { display: block; padding-bottom: 10px; font-weight: 500; color: var(--text-color-8); text-align: center; line-height: 1; }
.login-container .tab-wrap .tab-list .tab-item.active a { font-weight: 700; color: var(--point-color); }

/*========== 로그인 ==========*/
.login-page .login-container .login-box { padding-bottom: 40px; }
.login-page .login-container .login-box .submit-btn-wrap { margin-top: 34px; }
@media screen and (max-width: 1024px) {
    .login-page .login-container .login-box .submit-btn-wrap { margin-top: clamp(20px, 3.32vw, 34px); }
}

/*========== 아이디 찾기 ==========*/
.findid-page .login-box .login-form { margin-top: 30px; }
.findid-page .login-box .submit-btn-wrap { margin-top: 34px; }

/*========== 아이디 찾기 결과 ==========*/
.findid-result-page .findid-result-wrap { position: relative; flex: 1; }
.findid-result-page .findid-result-wrap .user-info { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; padding: 20px 30px; border-radius: 6px; border: 1px solid var(--border-color-d); font-size: 16px; font-weight: 500; line-height: 1.125; }
.findid-result-page .findid-result-wrap .user-info dt { width: 100px; color: var(--text-color-5); }
.findid-result-page .findid-result-wrap .user-info dt .gap { width: 0.8em; }
.findid-result-page .findid-result-wrap .user-info dd { color: var(--text-color-2); }
.findid-result-page .findid-result-wrap p { padding-block: 20px 24px; font-size: 16px; font-weight: 700; color: var(--text-color-2); text-align: center; line-height: 1.2; }
.findid-result-page .findid-result-wrap .user-id { padding: 12px; background: var(--bg-color); border-radius: 6px; font-size: 20px; font-weight: 600; color: var(--point-color); text-align: center; line-height: 1.2; }
.findid-result-page .login-container .login-box .submit-btn-wrap { gap: 16px; margin-top: 50px; }
@media screen and (max-width: 1024px) {
    .findid-result-page .findid-result-wrap .user-info{ padding: clamp(16px, 1.953vw, 20px) clamp(20px, 2.93vw, 30px); border-radius: clamp(3px, 0.586vw, 6px); font-size: clamp(14px, 1.563vw, 16px);}
    .findid-result-page .findid-result-wrap .user-info dt { width: clamp(52px, 9.766vw, 100px); }
    .findid-result-page .findid-result-wrap p { padding-block: clamp(16px, 1.953vw, 20px) 24px; font-size: clamp(14px, 1.563vw, 16px); word-break: keep-all; }
    .findid-result-page .findid-result-wrap .user-id{font-size: clamp(16px, 1.953vw, 20px);}
    .findid-result-page .login-container .login-box .submit-btn-wrap { gap: clamp(10px, 1.563vw, 16px); margin-top: clamp(40px, 4.883vw, 50px); }
}

/*========== 비밀번호 찾기 ==========*/
.findpw-page .login-box .login-form { margin-top: 30px; }
.findpw-page .send-btn.hide, .findpw-page .resend-btn.hide, .findpw-page .number-chk.hide { display: none; }
.findpw-page .time-limit { position: absolute; right: 136px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 500; color: var(--red-color); }
.findpw-page .login-box .submit-btn-wrap { margin-top: 106px; }
.findpw-page .login-box .input-box-wrap.number-chk:not(.hide) + .submit-btn-wrap { margin-top: 34px; }
@media screen and (max-width: 1024px) {
    .findpw-page .login-box .submit-btn-wrap { margin-top: 6.625em; }
    .findpw-page .time-limit { right: 8.5em; font-size: clamp(13px, 1.563vw, 16px); }
}
@media screen and (max-width: 460px) {
    #container:has(.rwd) .findpw-page .input-box.button .btn-wrap {bottom: -38px;}
    .findpw-page .number-chk{margin-top: 34px;}
    .findpw-page .time-limit{right: 14px;}
    .findpw-page .login-box .input-box-wrap.number-chk:not(.hide) + .submit-btn-wrap{margin-top: 50px;}
}

/*========== 비밀번호 재설정 ==========*/
.changepw-page .password-guide { padding-top: 30px; font-size: 16px; font-weight: 700; color: var(--text-color-2); text-align: center; }
.changepw-page .password-note { padding-top: 20px; font-size: 12px; color: var(--red-color); text-align: center; word-break: keep-all;}
.changepw-page .login-box .login-form { margin-top: 20px; }
.changepw-page .login-box .submit-btn-wrap { margin-top: 34px; }
@media screen and (max-width: 1024px) {
    .changepw-page .password-guide{font-size: clamp(14px, 1.563vw, 16px);}
}

/*========== 회원가입 - 사업자 확인 ==========*/
.join-company-check-container .join-guide { padding-top: 20px; font-size: 16px; color: var(--text-color-5); text-align: center; word-break: keep-all;}
.join-company-check-container .input-box:has(#businessNumber)::before { background-image: url("../images/common/icon-company.svg"); }
.join-company-check-container .login-box .submit-btn-wrap { gap: 16px; margin-top: 34px; }
.join-company-check-container .join-guide-bottom { margin-top: 40px; padding: 20px 34px; border-radius: 6px; border: 1px solid var(--border-color-d); font-size: 16px; color: var(--text-color-5); font-weight: 500; text-align: center; line-height: 1.6; word-break: keep-all; }
.join-company-check-container .join-guide-bottom p span { font-weight: 700; }
/* 중복가입 */
.join-company-check-container .duplicate-company-no { padding: 20px; background: var(--bg-color); border-radius: 6px; font-size: 16px; color: var(--text-color-2); font-weight: 700; text-align: center; line-height: 1.5; word-break: keep-all;}
.join-company-check-container .duplicate-company-no em { color: var(--point-color); }
@media screen and (max-width: 1024px) {
    .join-company-check-container .join-guide {font-size: clamp(14px, 1.563vw, 16px);}
    .join-company-check-container .login-box .submit-btn-wrap{gap: clamp(10px, 1.563vw, 16px);}
    .join-company-check-container .join-guide-bottom{margin-top: clamp(30px, 3.906vw, 40px); padding: clamp(16px, 1.953vw, 20px) clamp(24px, 3.32vw, 34px);  border-radius: clamp(3px, 0.586vw, 6px); font-size: clamp(14px, 1.563vw, 16px);}
    .join-company-check-container .duplicate-company-no { padding: clamp(16px, 1.953vw, 20px);  border-radius: clamp(3px, 0.586vw, 6px); font-size: clamp(14px, 1.563vw, 16px); }
}

/*========== 회원가입 - 정보입력 ==========*/
.join-container .title-wrap { position: relative; }
.join-container .title-wrap .step-wrap { display: flex; gap: 8px; position: absolute; top: 0; right: 0; }
.join-container .title-wrap .step-wrap li { display: flex; justify-content: center; align-items: center; width: 32px; height: auto; aspect-ratio: 1/1; border: 1px solid var(--border-color-d); border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--text-color-8); }
.join-container .title-wrap .step-wrap li.complete { background-image: url("../images/common/icon-check.svg"); background-repeat: no-repeat; background-position: center; background-size: 16px; background-color: var(--point-color); border-color: var(--point-color); }
.join-container .title-wrap .step-wrap li.complete span{ font-size: 0;}
.join-container .join-box { max-width: 750px; margin: 51px auto 100px; padding: 40px 40px 50px; }
.join-container .join-box .join-title { text-align: left; word-break: keep-all;}
.join-container .join-box .join-sub-title { padding-top: 16px; font-size: 16px; color: var(--text-color-5); line-height: 1.5; word-break: keep-all;}
.join-container .join-info-wrap { margin-top: 36px; }
.join-container .join-info-wrap .join-info:not(:first-child) { margin-top: 60px; }
.join-container .join-info-wrap .join-info .form-title { margin-bottom: 20px; padding: 14px 10px; border-top: 2px solid var(--text-color-2); border-bottom: 1px solid var(--border-color-d); font-size: 18px; font-weight: 700; color: var(--text-color-2); line-height: 1; }
.join-container .join-info-wrap .join-info.price-plan .form-title, .join-container .join-info-wrap .join-info.agreement .form-title { margin-bottom: 24px; }
.join-container .join-info-wrap .join-info .form-content { display: flex; flex-direction: column; gap: 20px; padding-inline: 10px; }
.join-container .join-info-wrap .join-info .file-btn-wrap { display: flex; align-items: center; gap: 10px; }
.join-container .join-info-wrap .join-info .file-btn-wrap > * { flex: 1; }
.join-container .join-info-wrap .join-info .send-btn.hide, .join-container .join-info-wrap .join-info .resend-btn.hide, .join-container .join-info-wrap .join-info .number-chk.hide { display: none; }
.join-container .join-info-wrap .join-info .cert-number-input-box { margin-top: 10px; }
.join-container .join-info-wrap .time-limit { position: absolute; right: 136px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 500; color: var(--red-color); }
.join-container .join-info-wrap .join-info .all-checkbox-wrap { padding: 16px; border-radius: 6px; background: var(--bg-color); }
.join-container .join-info-wrap .join-info .all-checkbox-wrap label { font-weight: 700; color: var(--text-color-2); }
.join-container .join-info-wrap .join-info .agreement-list { display: flex; flex-direction: column; gap: 17px; padding-left: 17px; }
.join-container .join-info-wrap .join-info .agreement-list .agreement-item { display: flex; justify-content: space-between; gap: 6px; word-break: keep-all;}
.join-container .join-info-wrap .join-info .agreement-list .agreement-item .agreement-link{width: 26px; height: auto; aspect-ratio: 1/1;}
.join-container .join-info-wrap .join-info .agreement-sub-list { display: flex; gap: 20px; padding-top: 14px; padding-left: 35px; }
.join-container .join-info-wrap .submit-btn-wrap { margin-top: 50px; }
@media screen and (max-width: 1024px) {
    .join-container .title-wrap .step-wrap { gap: clamp(4px, 0.781vw, 8px); }
    .join-container .title-wrap .step-wrap li { width: 2.2857em; font-size: clamp(11px, 1.367vw, 14px);  }
    .join-container .title-wrap .step-wrap li.complete {background-size: 1.1429em; }
    .join-container .join-box{margin: clamp(30px, 4.98vw, 51px) auto clamp(30px, 9.766vw, 100px); padding: 2.5em clamp(16px, 3.906vw, 40px) 3.125em;}
    .join-container .join-box .join-sub-title{padding-top: 1em; font-size: clamp(14px, 1.563vw, 16px); }
    .join-container .join-info-wrap { margin-top: clamp(28px, 3.516vw, 36px); }
    .join-container .join-info-wrap .join-info:not(:first-child) { margin-top: clamp(40px, 5.859vw, 60px); }
    .join-container .join-info-wrap .join-info .form-title { padding: 0.7778em 10px; font-size: clamp(16px, 1.758vw, 18px); }
    .join-container .join-info-wrap .join-info.price-plan .form-title, .join-container .join-info-wrap .join-info.agreement .form-title { margin-bottom: clamp(20px, 2.344vw, 24px); }
    .join-container .join-info-wrap .join-info .form-content { gap: clamp(14px, 1.953vw, 20px); }
    .join-container .join-info-wrap .join-info .file-btn-wrap { gap: clamp(6px, 0.977vw, 10px); }
    .join-container .join-info-wrap .join-info .cert-number-input-box { margin-top: 10px; }
    .join-container .join-info-wrap .time-limit { right: 8.5em; font-size: clamp(13px, 1.563vw, 16px); }
    .join-container .join-info-wrap .join-info .all-checkbox-wrap { padding: 1em; border-radius: clamp(3px, 0.586vw, 6px); }
    .join-container .join-info-wrap .join-info .agreement-list { gap: 1.0625em; padding-left: clamp(14px, 1.66vw, 17px); }
    .join-container .join-info-wrap .join-info .agreement-sub-list { gap: 1.25em; padding-top: 0.875em; padding-left: 2.1875em; }
    .join-container .join-info-wrap .join-info .agreement-list .agreement-item .agreement-link{width: 1.625em; min-width: 1.625em; font-size: clamp(14px, 1.563vw, 16px); }
}
@media screen and (max-width: 460px) {
    #container:has(.rwd) .join-container .input-box.button .btn-wrap {bottom: -38px;}
    .join-container .input-box-wrap:has(.input-box.button) + .input-box-wrap{margin-top: 30px;}
    .join-container .input-box-wrap.cert-number-input-box{margin-top: 45px !important; margin-bottom: 30px;}
    .join-container .input-box-wrap:has(.input-box.button) ~ .input-box-wrap:has(.file-btn-wrap){margin-bottom: 30px;}
    .join-container .input-box-wrap .input-box.button ~ .error-wrap{width: calc(100% - 110px);}
    .join-container .join-info-wrap .join-info .file-btn-wrap .delete-btn{position: absolute; top: -40px; right: 0;}
    .join-container .join-info-wrap .time-limit {right: 14px;}
    .join-container .join-info-wrap .submit-btn-wrap .basic-btn.main-btn{width: 100%;}
}

/* 정보입력 완료 */
.join-complete-container .join-info-wrap .info-list { display: flex; flex-wrap: wrap; }
.join-complete-container .join-info-wrap .join-info .form-title.info-title { margin-bottom: 0; }
.join-complete-container .join-info-wrap .info-list dt { padding-left: 10px; }
.join-complete-container .join-info-wrap .info-list dt, .join-container .join-info-wrap .info-list dd { padding-block: 20px; border-bottom: 1px solid var(--border-color-d); font-size: 16px; color: var(--text-color-5); }
.join-complete-container .join-info-wrap .info-list dt { width: 126px; font-weight: 600; }
.join-complete-container .join-info-wrap .info-list dd { width: calc(100% - 126px); padding-left: 20px; }
@media screen and (max-width: 1024px) {
    .join-complete-container .join-info-wrap .info-list dt, .join-container .join-info-wrap .info-list dd{ padding-block: clamp(16px, 1.953vw, 20px); font-size: clamp(14px, 1.563vw, 16px);}
    .join-complete-container .join-info-wrap .info-list dt { width: 7.875em; }
    .join-complete-container .join-info-wrap .info-list dd { width: calc(100% - 7.875em); padding-left: clamp(16px, 1.953vw, 20px); }
}
@media screen and (max-width: 767px) {
    .join-complete-container .join-info-wrap .info-list dt, .join-container .join-info-wrap .info-list dd{ padding-block: clamp(14px, 1.563vw, 16px); word-break: keep-all;}
    .join-complete-container .join-info-wrap .info-list dt { width: clamp(100px, 14.342vw, 110px); }
    .join-complete-container .join-info-wrap .info-list dd { width: calc(100% - clamp(100px, 14.342vw, 110px)); padding-left: clamp(14px, 1.563vw, 16px);}
}
@media screen and (max-width: 359px) {
    .join-complete-container .join-info-wrap .info-list dd { word-break: break-all;}
}

/*========== 회원가입 - 부계정 정보입력 ==========*/
.join-sub-container .note-wrap { padding-top: 10px; }
.join-sub-container .note-wrap .note { display: flex; align-items: flex-start; gap: 2px; font-size: 14px; font-weight: 500; color: var(--text-color-8);  word-break: keep-all;}
.join-sub-container .note-wrap .note::before { display: inline-block; content: ''; width: 18px; min-width: 18px; height: auto; aspect-ratio: 1/1; background: url("../images/common/icon-alert-gray.svg") no-repeat center / cover; }
@media screen and (max-width: 767px) {
    .join-sub-container .note-wrap { padding-top: clamp(8px, 0.977vw, 10px); }
    .join-sub-container .note-wrap .note { font-size: clamp(12px, 1.367vw, 14px);}
    .join-sub-container .note-wrap .note::before {width: clamp(16px, 1.758vw, 18px); min-width: clamp(16px, 1.758vw, 18px);}
}