:root {
    --maxWidth: 1200px;
    --pcPadding: 20px;
    --mb: 90px;
    --br: 15px
}
main {
    padding: 100px var(--pcPadding);
}

/* login.php */
.login_inner {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}
.login_top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-direction: column;
    margin-bottom: 50px;
    margin-top: 50px;
}
.login_top img {
    display: block;
    height: 32px;
}
.login_top h1 {
    font-size: 35px;
    font-weight: 800;
    letter-spacing: -2px;
}
.login_top h1 strong {
    font-size: 35px;
    font-weight: 800;
    color: #007BFF;
    letter-spacing: -2px;
}
.login_top a {
    display: block;
    height: 30px;
}
.login_top a img {
    display: block;
    height: 100%;
}
.join_info {
    font-size: 17px;
    color: #6C6C6C;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.join_info a {
    font-size: 17px;
    color: #007BFF;
    font-weight: 700;
}
#loginForm .login_label {
    border: 1px solid #DDDDDD;
    display: block;
    margin-bottom: 20px;
    border-radius: var(--br);
    padding: 0 25px;
}
#loginForm .login_label input {
    width: 100%;
    padding: 20px 0;
    font-size: 18px;
}
#loginForm .login_label input::placeholder {
    font-size: 16px;
    color: #5C5C5C;
}
#loginForm .login_label input:focus {
    outline: none;
}
#loginForm .btm {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.check_wrap {
    display: flex;
    align-items: center;
    gap: 25px;
}
.check_wrap label {
    font-size: 16px;
    color: #5C5C5C;
    display: flex;
    align-items: center;
    gap: 5px;
}
.check_wrap label input {
    border: 1px solid #DEDEDE;
    width: 20px; height: 20px;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
#loginForm .btm .find_link,
#loginForm .btm .find_link a {
    font-size: 16px;
    color: #007BFF;
    font-weight: 700;
}
#loginBtn {
    display: block;
    margin: 60px 0 20px;
    width: 100%;
    background: #007BFF;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border-radius: var(--br);
    padding: 30px 0;
}
.sns_info_txt {
    position: relative;
    width: 100%; height: 2px;
    background: #DADADA;
}
.sns_info_txt p {
    width: fit-content;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: #fff;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 700;
}
.oauth_box {
    margin: 50px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.oauth_box a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: calc(50% - 15px);
    font-size: 16px;
    padding: 17px 0;
    border-radius: 12px;
    height: 55px;
}
.oauth_box a.sns_naver {
    background: #57B04B;
    color: #fff;
}
.oauth_box a.sns_kakao {
    background: #FDE500;
    font-weight: 700;
}
.oauth_box a .ico {
    display: block;
    width: 20px; height: 20px;
}
.oauth_box a.sns_naver .ico {
    background: url(/reward/public/img/auth/login-logo-1.png) no-repeat center/contain;
}
.oauth_box a.sns_kakao .ico {
    width: 22px; height: 22px;
    background: url(/reward/public/img/auth/login-logo-2.png) no-repeat center/contain;
}

/* find_id */
.find_tit {
    font-size: 25px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 70px;
}
.find_link_wrap {
    border-bottom: 1px solid #DADADA;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.find_link_wrap a {
    font-size: 17px;
    color: #777777;
}
.find_link_wrap a.on {
    font-size: 19px;
    font-weight: 800;
    color: #007BFF;
}
.find_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}
.find_sec form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 55%;
}
.find_sec form label {
    border: 1px solid #ECECEC;
    padding: 0 20px;
    border-radius: var(--br);
}
.find_sec form label input {
    padding: 20px 0;
    font-size: 18px;
}
.find_sec form label input::placeholder {
    font-size: 18px;
    color: #777777;
}
.find_sec form label input:focus {
    outline: none;
}
.find_sec form button {
    width: 100%;
    background: #007BFF;
    padding: 23px 0;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    border-radius: var(--br);
}
.find_sec > img {
    display: block;
    height: 30px;
}
input[type="checkbox"]:checked {
    background-color: #127DFF;
    border-color: #127DFF;
    background-image: url(/reward/public/img/common/icons/check.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.mo_header .login_back {
    display: none;
    align-items: center;
    gap: .5rem;
}
.mo_header .login_back .back_ico {
    display: block;
    width: 1.5rem; height: 1.5rem;
    background: url(../../../img/common/arrows/arrow-10.png) no-repeat center/contain;
}
.mo_header .login_back span {
    font-size: 1.6rem;
}
.login_link {
    display: block;
    height: 30px;
    text-align: center;
    margin-bottom: 30px;
}
.login_link img {
    height: 100%;
}
@media screen and (max-width: 767px) {
    header {
        border-bottom: none;
    }
    .login_top {
        margin-top: 0;
    }
    .login_inner {
        max-width: 100% !important;
        padding: 8rem 1.5rem 3rem;
    }
    .login_top {
        gap: 2.5rem;
    }
    .login_top img {
        height: 2.3rem;
    }
    .login_top h1 {
        font-size: 2.5rem;
    }
    .login_top h1 strong {
        font-size: 2.5rem;
    }
    #loginForm .login_label input {
        font-size: 1.6rem;
    }
    .check_wrap {
        gap: 1rem;
    }
    .check_wrap label {
        font-size: 1.5rem;
        letter-spacing: -2px;
    }
    #loginForm .btm .find_link, #loginForm .btm .find_link a {
        font-size: 1.5rem;
        letter-spacing: -2px;
    }
    #loginBtn {
        padding: 2rem 0;
        font-size: 1.8rem;
    }
    .oauth_box a {
        width: calc(50% - .7rem);
        font-size: 1.6rem;
    }
    .oauth_box a .ico {
        width: 1.6rem; height: 1.6rem;
    }
    .find_sec > img {
        display: none;
    }
    .find_sec form {
        width: 100%;
    }
    .login_link {
        display: block; 
        height: 2.3rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    .login_link img {
        height: 100%;
        object-fit: contain;
    }
    .find_tit {
        font-size: 2.3rem;
        margin-bottom: 4rem;
    }
    .find_sec form label input {
        font-size: 1.6rem;
    }
    .find_sec form button {
        padding: 2rem;
        font-size: 1.8rem;
    }
}