/* -------- 로그인 -------- */
.login-wrap {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.login-wrap .log-logo {margin-top: 60px; width: 109px; margin-bottom: 35px;}
.input-wrap {width: 100%;}

.input-wrap ul.find {display: flex; align-items: center; justify-content: center; margin-top: 6px;}
.input-wrap ul.find li {color: #444; font-size: 15px; padding: 0 12px; position: relative;}
.input-wrap ul.find li:nth-child(2)::after {position: absolute; content: ""; display: block; width: 1px; height: 12px; background-color: #b1b1b1; top: 50%; left: 0; transform: translateY(-50%);}
.input-wrap ul.find li:nth-child(2)::before {position: absolute; content: ""; display: block; width: 1px; height: 12px; background-color: #b1b1b1; top: 50%; right: 0; transform: translateY(-50%);}

.login-wrap .input-wrap {gap: 12px;}

.other-login { width: 100%; margin-top: 40px;}
.other-login .ot-txt {margin-bottom: 20px; position: relative;}
.other-login .ot-txt::after {content: ""; display: block; width: 24%; height: 1px; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.other-login .ot-txt::before {content: ""; display: block; width: 24%; height: 1px; background-color: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.other-login .ot-txt p {text-align: center; font-size: 15PX; color: #909090;}
.other-login ul {display: flex; align-items: center; justify-content: center; gap: 25px;}
.other-login ul li {width: 45px;}
.done {margin-top: 40px !important;}

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

.join .input-wrap {margin-top: 30px;}
.id-wrap {display: flex !important; gap: 10px;}
.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: #356EFF;}

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

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

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

.intro {width: 100%; height: 100vh; background-color: #Fff; 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: 140px;}
.intro .intro_box p {text-align: center; font-size: 15px; color: #fff; line-height: 1.5;}


@media (max-width:310px){
    .join-con .input-wrap button {font-size: 12px;}
}