@charset "utf-8";

/* 로그인 박스의 아이디/비밀번호 찾기 링크 */
#ol_password_lost {
    display:inline-block;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#777;
    font-size:11px;
    line-height:22px;
    letter-spacing:-0.04em;
    text-decoration:none;
    cursor:pointer;
    vertical-align:middle;
}

#ol_password_lost:hover,
#ol_password_lost:focus {
    color:#005da8;
    text-decoration:underline;
}

/* 팝업 */
html.sl-password-popup-html,
body.sl-password-popup-body {
    width:100%;
    min-width:0 !important;
    height:auto;
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#f3f5f7;
}

body.sl-password-popup-body > *:not(#slFindInfo):not(script):not(style) {
    box-sizing:border-box;
}

.sl-find-info {
    width:100%;
    max-width:520px;
    min-height:620px;
    margin:0 auto;
    background:#fff;
    color:#333;
    font-family:"Malgun Gothic","맑은 고딕",Arial,sans-serif;
    box-shadow:0 12px 35px rgba(0,0,0,.16);
}

.sl-find-header {
    position:relative;
    height:54px;
    padding:0 58px 0 20px;
    border-bottom:3px solid #003466;
    background:#fff;
}

.sl-find-header h1 {
    margin:0;
    color:#003466;
    font-size:18px;
    font-weight:700;
    line-height:51px;
}

.sl-find-close {
    position:absolute;
    top:0;
    right:0;
    width:54px;
    height:51px;
    border:0;
    background:#003466;
    color:#fff;
    font-size:30px;
    font-weight:300;
    line-height:48px;
    cursor:pointer;
}

.sl-find-tabs {
    display:flex;
    justify-content:center;
    gap:0;
    padding:25px 20px 18px;
    background:#fff;
}

.sl-find-tabs button {
    width:160px;
    height:42px;
    border:1px solid #cdcdcd;
    background:#fff;
    color:#666;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.sl-find-tabs button + button {
    margin-left:-1px;
}

.sl-find-tabs button.is-active {
    position:relative;
    z-index:2;
    border-color:#1d7fde;
    background:#1d7fde;
    color:#fff;
}

.sl-find-body {
    padding:0 30px 24px;
}

.sl-find-panel {
    display:none;
    max-width:460px;
    margin:0 auto;
}

.sl-find-panel.is-active {
    display:block;
}

.sl-find-description {
    margin:0;
    padding:0 0 20px;
    color:#666;
    font-size:12px;
    line-height:1.7;
    letter-spacing:-.03em;
    text-align:center;
}

.sl-find-description strong {
    color:#003466;
}

.sl-find-field {
    display:block;
    margin-top:8px;
    border:1px solid #ccc;
    background:#fff;
}

.sl-find-field > span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.sl-find-field input {
    display:block;
    box-sizing:border-box;
    width:100%;
    height:50px;
    margin:0;
    padding:0 15px;
    border:0 !important;
    outline:0;
    background:#fff !important;
    color:#333 !important;
    font-size:14px;
    line-height:50px;
}

.sl-find-method {
    display:flex;
    align-items:center;
    justify-content:space-around;
    min-height:54px;
    margin:4px 0;
    color:#444;
    font-size:12px;
}

.sl-find-method label {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.sl-find-submit {
    display:block;
    width:100%;
    height:48px;
    margin-top:18px;
    border:1px solid #1d7fde;
    background:#1d7fde;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.sl-find-submit:disabled {
    opacity:.55;
    cursor:wait;
}

.sl-find-result {
    margin-top:16px;
    padding:14px;
    border:1px solid #cdd7e3;
    background:#f7f9fc;
    color:#333;
    font-size:13px;
    line-height:1.7;
    text-align:center;
}

.sl-find-result.is-error {
    border-color:#e3caca;
    background:#fff7f7;
    color:#b00020;
}

.sl-find-result ul {
    margin:8px 0 0;
    padding:0;
    list-style:none;
}

.sl-find-result li {
    padding:3px 0;
    color:#003466;
    font-family:Verdana,Arial,sans-serif;
    font-size:15px;
    font-weight:700;
}

.sl-find-captcha {
    margin-top:12px;
}

.sl-find-captcha #captcha {
    box-sizing:border-box;
    width:100%;
    margin:0;
    padding:12px 8px !important;
}

.sl-find-footer {
    padding:0 30px 28px;
    text-align:center;
}

.sl-find-cancel {
    width:120px;
    height:40px;
    border:1px solid #bbb;
    background:#fff;
    color:#555;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

@media screen and (max-width:560px) {
    .sl-find-info {
        min-height:100vh;
        box-shadow:none;
    }

    .sl-find-tabs {
        padding-left:14px;
        padding-right:14px;
    }

    .sl-find-tabs button {
        width:50%;
    }

    .sl-find-body {
        padding-left:16px;
        padding-right:16px;
    }
}