@charset "UTF-8";

/*
*--------------------------------------------*
|                   20240618                 |
*--------------------------------------------*
*/
html { overflow-x: hidden; width: 100%; height: 100vh; padding: var(--notch); scroll-behavior: smooth;}
body { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; background: #f4f5f6; font-family:var(--Pretendard); font-weight: normal; font-size:var(--font-size); color:var(--default-font-color); line-height:var(--line-height); letter-spacing:var(--font-let-spc);}
b { font-weight: 500;}
strong { font-weight: 700;}
small { font-size: 80%;}
img { max-width: 100%;}
* { margin: 0; padding: 0; box-sizing: border-box;}
.wrap {}

*::placeholder { color: #828282;}
/* messages */
.message { font-size: 14px; }
.wrong_message { display: none; font-weight: 500; line-height: 1.2; color: var(--red-500);}
.success-message { color: #464c53; }
.success-message::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url("/images/common/icon-system-info.svg") center center no-repeat;background-size: contain; border-radius: 50%; margin-right: 4px;}


.login-container { overflow: auto; width: 598px; max-height: calc(100vh - 1px); padding: 48px; border-radius: 16px; background: #ffffff;}
.login-container .login { padding-top: 56px;}
.login-container .logo { text-align: center;}
.login-container .id_enter { display: flex; flex-direction: column; gap: 8px;}
.login-container .login-helper { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 40px; color: #1e2124; font-size: 16px;}
.login-container .login-helper a { padding: 4px 2px; }
.login-container .login_keep.check-box .check { width: 20px; height: 20px;}
.login-container .login_keep.check-box label { display: flex; }
.login-container .login_btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 68px; font-size: 18px;  border-radius: 8px;}
.login-container input[type="text"],
.login-container input[type="password"] { width: 100%; height: 56px; padding: 0 16px; border-radius: 8px; border: 1px solid #cdd1d5; background: #fff; font-size: 18px; }
.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus { border-color: var(--primary-500);}
.login-container .other_link { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 36px;}
.login-container .other_link a { font-weight: 500; line-height: 1.07; color: #1e2124;}
.login-container .other_link .line { color: #dcdcdc;}

/* 관리자 */
.admin-login-container .id_enter { margin-bottom: 40px;}
.admin-login-container .logo { display: flex; align-items: center; gap: 12px; justify-content: center;}
.admin-login-container .logo p { font-size: 24px; font-weight: bold; line-height: 1.5; color: #f8b500;}

/* 아이디/비번 찾기 */
.login-container.login-container2 { padding: 0;}
.login-container ul.main_tab { display: flex; width: 100%; border-bottom: 1px solid #cdd1d5;}
.login-container ul.main_tab li { width: 100%; }
.login-container ul.main_tab li a { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; font-size: 18px; line-height: 1.33;  color: #464c53; transition: color .23s ease-in-out; padding: 24px 20px; }
.login-container ul.main_tab li a::before { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 0; background: var(--primary-500); transition: height .23s ease-in-out;}
.login-container ul.main_tab li a:hover,
.login-container ul.main_tab li.on a { font-weight: bold; color: var(--primary-500);}
.login-container ul.main_tab li a:hover::before,
.login-container ul.main_tab li.on a::before { height: 4px;}
.id_pw_find .find_enter { padding: 48px;}

.id_find_result,
.pw_find_result { padding: 48px; margin-bottom: 36px;}
.id_find_result .result_text { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; font-size: 24px; font-weight: bold; line-height: 1.5; }
.id_find_result .result_text .user_id_text,
.pw_find_result_result strong span { color: var(--primary-500);}

.pw_find_result .result_data { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px;}
.login-container .pw_find_result .result_data .login_btn { margin-bottom: 0;}
.pw_find_result_result .result_text { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px;}
.pw_find_result_result strong { font-size: 24px; font-weight: bold; line-height: 1.5;  color: #222; text-align: center;}

.find_method { display: flex; flex-direction: column; gap: 20px;}
.line { display: flex; flex-direction: column; gap: 8px;}
.line-title { font-size: 14px; font-weight: bold; color: #121212; }
.line-cont { display: flex; flex-direction: column; gap: 8px;}
.line-row { display: flex; gap: 8px; flex-direction: row; align-items: flex-start;}
.line-row .input-width { flex: 1;}
.line-cont .size-b.btn-submit { width: 100%;}
.certi-wrap {position: relative;}
.certi-wrap .certify_num { padding-right: 80px !important; }
.certi-wrap #runningTimer4 { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--red-500);}
.pw_find .btn-submit, 
.pw_find .btn-default { height: 56px; padding: 0 16px; border-radius: 8px; font-size: 18px;  flex-shrink: 0;}
.input-width .btn-submit, 
.input-width .btn-default { width: 140px !important; font-weight: bold;  }
.line-cont .btn-default { font-weight: bold; }
.line-cont .input-box .btn-submit { width: 130px; font-size: 17px; font-weight: bold;}

/* 회사찾기 */
.compony-login-box .login_enter { display: flex; flex-direction: column; gap: 45px;}
.compony-login-box .login_enter .info_text { font-size: 24px; font-weight: bold; line-height: 1.5; text-align: center; color: #222;}
.login-container .compony-login-box .login_btn { margin-bottom: 0;}

/* 총괄관리자 */
.admin_login-container .btn-point { margin-top: 36px;}

[class*="btn-"] { box-shadow: none;}
.bottom_btn { display: flex; gap: 7px; width: 100%;}
.bottom_btn [class*="btn-"] { width: 100%; margin-bottom: 0;}

/* md */
@media (max-width: 768px) {
    .login-container { width: 100%; padding: 0 32px; background: transparent;}
    .login-container .login { padding-top: 40px; }
    .login-container.login-container2 { padding: 0 32px;}
    .login-container .login-helper { margin: 24px 0 40px; font-size: 14px;}
    .login-container .login_keep.check-box label { font-size: 14px;}
    .login-container .login_btn { height: 56px; border-radius: 6px; font-size: 16px;}
    .login-container .other_link { margin-top: 40px;}
    .login-container .other_link a { font-size: 14px;}

    .login-container ul.main_tab li a { font-size: 16px;}
    .id_pw_find .find_enter { padding: 40px 0 48px;}
    .line .line-title { font-size: 14px;}
    .id_find_result .result_text { font-size: 20px;}
    .id_find_result,
    .pw_find_result { padding: 36px 0 28px;}

    .line-cont .size-b.btn-submit { height: 44px; border-radius: 6px; font-size: 13px; font-weight: 500;}

    .login-container input[type="text"],
    .login-container input[type="password"] { height: 48px; border-radius: 6px; font-size: 14px;}
    .pw_find .btn-submit, .pw_find .btn-default { height: 48px; border-radius: 6px; font-size: 14px;}
}