@charset "utf-8";

/* 인트로 */
.intro{display:flex; justify-content:center; align-items:center; width:100%; height:100vh; background-color:var(--bg-01);}
.intro img{height:163rem;}
.intro-copy {opacity: .3; position: absolute; left:0; bottom: 30rem; width: 100%; text-align: center; font-size: var(--font-12); font-weight: 800; color: var(--f-01);}

/* 로그인 */
#content.login{padding-top:130rem; padding-bottom:30rem;}
.login-head img{display:inline-block; height:150rem;}
.login-head{margin-bottom:30rem; text-align:center;}
.login-head p {margin-top: 10rem; font-size: var(--font-14); color: #444;}
.login-btn button{font-size:var(--font-15); font-weight: 600; text-align:center;}
.login-btn button + button{margin-top:6rem;}
.login-input input + input{margin-top:7rem;}
.login-btn{margin-top:10rem;}
.login-sns__tit{display:block; display:flex; justify-content:center; align-items:center; position:relative; width:100%; text-align:center; font-size: var(--font-14); font-weight: 700; color: var(--b-01);}
.login-sns__tit i{position:relative; padding:0rem 10rem; background:var(--f); font-size:13rem; color:var(--g);}
.login-find{margin-top:17rem;}
.login-find li {position: relative;}
.login-find li:not(:last-child) {margin-right: 10rem; padding-right: 10rem;}
.login-find li:not(:last-child)::after {position:absolute; right: 0; top: 50%; content:''; width: 1px; height: 12rem; transform: translateY(-50%); background: var(--bd-01);}

.login-find button{color: var(--b-02);}
.login-sns{margin-top:115rem;}
.login-sns__list{margin-top:17rem; gap:13rem;}
.login-sns__list button{overflow:hidden; border-radius:8rem;}
.btn-ment-wrap{margin-top:45rem;}
.btn-ment *{margin-left:6rem;}
.btn-ment i{border-bottom:1px solid;}
.login-sns__list button {overflow: hidden; border-radius: 100%;}
.login-sns__list button img{width:47rem;}
.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: 17rem;font-weight: 700;font-size: 19rem;color:var(--b-01);text-align:center;line-height: 1.3;}
.content-done__box{width:100%;margin-top: 16rem;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;}
.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: 18rem;}