/* -------- 로그인 -------- */

.login {padding: 0 20px; position: relative; height: 100vh;}
.login-txt {padding-top: 80px;}
.login-txt em {width: 100px; margin-bottom: 10px;}
.login-txt h2 {font-size: 26px; color: #333; font-weight: bold; line-height: 1.4;}

.login-input {margin-top: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;}
.login-input input {border-radius: 50px; padding: 10px 20px;}
.login-input ul li { color: #555; font-weight: 500; display: flex; align-items: center; gap: 7px;}
.login-input ul li i {font-size: 12px;}

.input {display: flex; flex-direction: column; gap: 5px;}
.input p {padding-left: 5px;}

.other-login {width: 100%; margin-top: 70px;}
.other-login .ot-txt { margin-bottom: 24px; position: relative;}

.other-login .ot-txt p {text-align: center; font-size: 15px; font-weight: 600; color: #555;}
.other-login ul {display: flex; flex-direction: column; gap: 10px;}
.other-login ul li {width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 50px; font-size: 16px; font-weight: 600;}
.other-login ul li em {width: 28px;}
.other-login ul li:nth-child(1) {background-color: #FAE100; color: #371d1e;}
.other-login ul li:nth-child(2) {background-color: #06BE34; color: #fff;}
.other-login ul li:nth-child(3) {background-color: #fff; border: 1px solid #ddd; color: #333;}
.other-login > p {color: #6a6a6a; text-align: center; margin-top: 40px; padding-bottom: 20px;}
.other-login > p em {display: inline-block; margin-left: 10px; font-weight: 600; color: #353535; text-decoration: underline;}

/* -------- 회원가입 -------- */

.join .input-wrap {margin-top: 20px;}
.id-wrap {display: flex !important; gap: 10px; width: 100%;}
.join button {margin-top: 0; height: 50px;}
.join .id-wrap button {width: 150px;}
.join .phone-wrap button {width: 150px;}
.num-confirm {margin-top: 10px; position: relative;}
.num-confirm p {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: #42A468;}

/* -------- 아이디 찾기 -------- */

.find-tab {margin-top: 60px;}
.find-tab ul {display: flex; border-bottom: 1px solid #eee;}
.find-tab ul li {width: 50%; padding: 15px 0; text-align: center; font-size: 15px; color: #555;}
.find-tab ul li:first-child {border-right: 1px solid #eee;}
.find-tab ul li.on {color: #111; font-weight: 800; border-bottom: 2px solid #111;}

.join h2 {font-size: 20px; font-weight: 700;}
.done-txt {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 120px;}
.done-txt > span {width: 80px;}
.join-con h2 {margin: 30px 0; font-size: 20px;}
.done-txt h2 span {display: inline-block; font-size: 18px !important; color: #42A468 !important; padding: 0 !important; font-weight: bold;} 

/* -------- 인트로 -------- */

.intro {width: 100%; height: 100vh; background-color: #42A468; display: flex; align-items: center; justify-content: center;}
.intro .intro_box {display: flex; flex-direction: column; align-items: center; gap: 17px;}

.intro .intro-logo {width: 128px;}
.intro .intro_box p {text-align: center; font-size: 15px; color: #fff; line-height: 1.5;}


@media (max-width:380px){

    .login-txt {padding-top: 70px;}
    .other-login .ot-txt {margin-bottom: 15px;}
    .other-login > p {margin-top: 30px;}
}