@charset "utf-8";

/* 인트로 */
.intro{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background-color: var(--c-01);text-align: center;}
.intro img{height:60rem;}
.intro-logo{display:flex; align-items:center; position:relative; top:-5vh; color:var(--f); text-align:center; flex-direction:column;}
.intro-logo p{margin-top: 3rem;font-weight:200;font-size:27rem;letter-spacing:-0.3rem;}
.intro > i{position:absolute; opacity:0.4; bottom:30rem; left:50%; color:var(--f); transform:translateX(-50%);}
.intro-logo > i{margin-top:20rem; font-weight:100;}

/* 로그인 */
#content.login{padding-top: 0;padding-bottom:30rem;}
.login-head img{display:inline-block;height: 69rem;}
.login-head{margin-bottom: 30rem;text-align:center;background: var(--c-01);padding-top: 130rem;border-bottom-left-radius: 20rem;border-bottom-right-radius: 20rem;}
.login-btn button{font-size:16rem; text-align:center;}
.login-btn button + button{margin-top:6rem;}
.login-input input + input{margin-top: 8rem;}
.login-btn{margin-top: 8rem;}
.login-sns__tit{display:block; display:flex; justify-content:center; align-items:center; position:relative; width:100%; text-align:center;}
.login-sns__tit i{position:relative;padding:0rem 10rem;background:var(--f);font-size:13rem;color: var(--b-01);font-weight: 700;}
.login-sns__tit::before{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--g);opacity: 0;}
.login-find button{display:inline-block; width:auto; font-size:13rem;}
.login-find{margin-top:20rem;gap: 0;display: flex;justify-content: center;}
.login-sns{margin-top: 70rem;}
.login-sns__list{margin-top:17rem; gap:7rem;}
.login-sns__list button{overflow:hidden;border-radius: 100%;}
.btn-ment-wrap{margin-top:45rem;}
.btn-ment *{margin-left:6rem;}
.btn-ment i{border-bottom:1px solid;}
.login-sns__list button img{width:41rem;}
.login-sns__list .bd button{border:1px solid #e7e7e7;}

/* 회원가입 */
#content.join{padding-top: 100rem;}
.join-tit{font-size:22rem; color:var(--b-01);}
.join-tit strong{font-weight:600;}
.join-tit p{margin-top:10rem; font-size:14rem; color:#757575;}
.join-check{margin-top:30rem;}
.join-check__list{display:flex; margin-top:20rem; padding-top:20rem; border-top:1px solid #ededed; flex-direction:column; gap:22rem;}
.join-check__list li{display:flex; justify-content:space-between; align-items:center;}
.join-check__list li a{font-weight:400; font-size:12rem; color:#b3b3b3; white-space:nowrap; word-spacing:revert-layer;}
.join-check input[type="checkbox"] + label{font-weight:400; color:var(--b-01);}
.join-check__option{width:100%; padding:18rem 20rem; border-radius:5rem; gap:20rem;}
.join-check__option input[type="checkbox"] + label{font-weight:300; font-size:13rem; color:#a3a3a3;}
.join-check__option input[type="checkbox"]:checked + label{font-weight:400; color:var(--b-01);}
.join-check #chk-all + label{font-weight:600;}
.join-check input[type="checkbox"] + label strong:not(data-color){color:#a7a7a7;}
.join-check input[type="checkbox"] + label strong{margin-right:2rem;}
.input-box input + *{margin-top:8rem;}
.input-box__time span{position:absolute; right:20rem; margin-top:0; font-weight:600;}
.input-box__time{display:flex; align-items:center; position:relative;}
.btn-ment{color:#a5a5a5;}
.btn-ment i{color:var(--b-01);}

/* 회원가입 약관보기 */
.join-pop .content-header{border-bottom:1px solid #f1f1f1;}
.join-popup{padding:20rem; background:#f5f5f5; border-radius:10rem;}
.join-popup-tit{display:block; margin-bottom:9rem; color:var(--b-01);}
.join-tit + .input-box{margin-top:20rem;}

/* 완료화면 */
.content-done{display:flex; justify-content:center; align-items:center; padding-top:100rem; flex-direction:column;}
.content-done > strong{margin-top:20rem;font-weight: 700;font-size: 19rem;color:var(--b-01);text-align:center;line-height: 1.3;}
.content-done__box{width:100%;margin-top: 14rem;padding:19rem 20rem;background:#f7f7f7;text-align:center;border-radius:5rem;}
.content-done__box i{display:block; margin-top:3rem; font-weight:300; font-size:12rem;}
.content-done__box strong{font-size:15rem;color: var(--b-01);}
.content-done img{height:90rem;}
.content-done:has(.content-done__box){padding-top:50rem;}
.content-done__svg{display:flex; justify-content:center; align-items:center; width:70rem; height:70rem; background:var(--c-01); border-radius:100%;}
.content-done svg{height:30rem;}
