@charset "utf-8";

/* 인트로 */
.intro{display:flex; justify-content:center; align-items:center; width:100%; height:100vh; text-align: center; color: var(--f); background-color: var(--c-01);}
.intro em {display: block; margin: -50rem 0 25rem; font-family: var(--font-en); font-size: 27rem; font-weight: 700;}
.intro img{ height:165rem;}

/* 로그인 */
#content.login{padding-top:80rem; padding-bottom:30rem;}
.login-head em {display: block; margin-bottom: 15rem; font-family: var(--font-en); font-size: 17rem; font-weight: 700; color: #3d3d3d;}
.login-head img{display:inline-block; height: 20rem; object-fit: cover;}
.login-head{width: 100%; margin-bottom:40rem; text-align:center; overflow: hidden;}
.login-btn button{font-size:16rem; text-align:center;}
.login-btn button + button{margin-top:6rem;}
.login-input input + input{margin-top:7rem;}
.login-btn{margin-top:20rem;}
.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 15rem; background:var(--f); font-weight: 700; font-size:14rem; color:var(--b-01);}
.login-sns__tit::before{content:""; position:absolute; left:0; width:100%; height:1px; background:var(--l-01);}
.login-find{margin-top:20rem;}
.login-find li {position: relative; padding: 0 15rem;}
.login-find button {font-size: 14rem; color: var(--g-01);}
.login-find li:not(:first-child)::after {position: absolute; left: 0; top: 50%; content:''; width: 1px; height: 14rem; background: #ccc; transform: translateY(-50%);}
.login-sns{margin-top:90rem;}
.login-sns__list{margin-top:17rem; gap:20rem;}
.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:55rem;}
.login-sns__list .bd button{border:1px solid #e7e7e7;}

/* 회원가입 */
#content.join{padding-top: 40rem;}
.join-tit{font-size:20rem; color:var(--b-01);}
.join-tit strong,
.join-tit strong span {font-size: 22rem; font-weight: 700; line-height: 1.35;}
.join-tit p{margin-top:10rem; font-size:14rem; color:var(--g-01);}
.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 > .address-first > input + *{width: 40%; margin-top: 0; border: 0; border-radius: 7rem;}
.input-box > .address-first {margin-bottom: 8rem;}
.input-box__time span{position:absolute; right:20rem; margin-top:0; font-weight:600; color: orangered;}
.input-box__time{display:flex; align-items:center; position:relative; margin-top: 8rem;}
.btn-ment{color:#a5a5a5;}
.btn-ment i{color:var(--b-01);}

.join02 .input-box,
.join03 .input-box {margin-bottom: 40rem;}
.join02 .input-box > p,
.join03 .input-box > p {display: block; font-size: 14rem; margin-bottom: 8rem;}

.join03 .phone-input {width: 100%; display: flex; gap: 10px;}
.join03 .phone-input .select-btn { height: 100%; font-size: 14rem; border: 1px solid #ddd; border-radius: 7rem; padding: 16px 17rem; width: 100%; outline: none;}
.join03 .phone-input .select-btn::before{content: none;}
.join03 .phone-input .select-btn::after {top: 22rem;}
.join03 .phone-input .select-filter,
.join03 .phone-input input {width: calc(100% / 3);}
/* .join03 .input-box input + * {margin-top: 0 !important;} */
.join03 .input-box__certi {width: 100%; display: flex; gap: 10px;}
.join03 .input-box__certi > div {width: 80%; position: relative;}
.join03 .input-box__certi > div > span {position: absolute; display: inline-block; top: 50%; right: 0; transform: translate(-20px, -50%); font-size: 14rem; color: orangered;}
.join03 .input-box__certi > input[type="button"] {width: 20%; font-size: 14rem; border: 1px solid var(--c-02); background-color: var(--c-02); border-radius: 7rem; font-weight: 600;}

/* 회원가입 약관보기 */
.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; gap: 8rem; padding-top:100rem; flex-direction:column;}
.content-done > strong{font-weight: 700;font-size: 19rem;color:var(--b-01);text-align:center;}
.content-done__box{width:100%; margin-top:11rem; 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:60rem;}
.content-done:has(.content-done__box){padding-top:50rem;}

.join .content-wrap {padding-top: 40rem;}