@charset "utf-8";
.login,
.find { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 520px; height: 100vh; margin: 0 auto; padding: 0 10px; font-size: 0.9em; }

.login .logo { width: 80px; padding: 0 0 2.5rem 0; }

.find .form_box,
.login .form_box { width: 100%; max-width: 500px; }
.login .check_box { display: flex; justify-content: space-between; width: 100%; }
.login dl dt { padding-bottom: 5px; font-size: 0.9em; font-weight: 500; }

.login .btn_box,
.find .btn_box { width: 100%; padding-top: 20px; font-size: 1.1em; }
.login .btn_box a,
.find .btn_box a{ display: block; height: 45px; line-height: 45px; margin-top: 20px; text-align: center; border-radius: 5px; }

.login .sns_box { width: 100%; padding: 40px 0 0 0; }
.login .sns_box h5 { position: relative; text-align: center; }
.login .sns_box h5::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #d1d5db; }

.login .sns_box span { position: relative; display: inline-block; padding: 0 20px; background: var(--white); }

.login .sns_box div {display: flex; justify-content: center; align-items: center; gap: 10px; padding: 2.5rem 0 0 0; }
.login .sns_box button { width: 40px; border-radius: 40px; overflow: hidden; }

.find .title { padding: 0 0 3rem 0; font-size: 2.7rem; font-weight: 600; }
.find .form_box dl { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.find .form_box dt, 
.find .form_box dd { width: 100%; }
.find .form_box .w70 { width: 80%; }
.find .form_box .w30 { width: calc(20% - 10px); }
.find .form_box button { width: 100%; height: 45px; }
@media (max-width:991px) {
    .login,
    .find { padding: 2rem 10px 3rem; }
    .find .title { font-size: 2rem; }
}

/* 회원가입 */
.join { width: 100%; max-width: 520px; margin: 0 auto; padding: 5rem 10px 7.5rem; font-size: 0.9em; }
    .join .logo { width: 80px; margin: 0 auto; padding: 0 0 2.5rem 0; }
    .join .title { padding: 0 0 3rem 0; font-size: 2.7rem; text-align: center; font-weight: 600; }
    .join .s_tt { padding: 0 0 2rem 0; font-size: 1.1em; text-align: center; }
    .join .form_box dl { display: flex; flex-wrap: wrap; gap: 5px 10px; }
    .join .form_box dt, 
    .join .form_box dd { width: 100%; }
    .join .form_box .w80 { width: 80%; }
    .join .form_box .w20 { width: calc(20% - 10px); }
    .join .form_box .w70 { width: 70%; }
    .join .form_box .w15 { width: calc(15% - 10px); text-align: center; line-height: 45px; }
    .join .form_box button { width: 100%; height: 45px; }

    .join .term_box { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0 0 20px 0; }
    
    .join .btn_box { display: flex; gap: 10px; }
    .join .btn_box li { width: 50%; }
    .join .btn_box a{ display: block; height: 45px; line-height: 45px; text-align: center; border-radius: 5px; }
@media (max-width:991px) {
    .join { padding: 3rem 10px; }
    .join .title { font-size: 2rem; }
}