@charset "utf-8";

.cm-member{padding:50px 12px 100px;line-height:1.6;letter-spacing:-1.5%;color:var(--prm-gray-800);font-family:'Pretendard'}
.cm-mb-tit{margin-bottom:12px;font-size:24px;font-weight:700;text-align:center}
.cm-mb-tit+p{margin-bottom:30px;text-align:center;color:var(--prm-gray-500)}
.cm-mb-mtit{margin-bottom:10px;font-size:18px;font-weight:700}
.cm-mb-mtit~.cm-mb-mtit{margin:35px 0 10px}

/* 로그인 */
#mbLogin{max-width:800px;width:100%;margin:0 auto}
#mbLogin *{word-break: keep-all;}
#mbLogin .inner{gap:32px}
#mbLogin .inner > div{flex:auto}
#mbLogin .login-area{min-width:340px}
#mbLogin ul{gap:15px}
#mbLogin ul li input{width:100%}
#mbLogin .login-auto{margin:15px 0 25px}
#mbLogin .login-auto label{font-weight:500;color:var(--prm-gray-500)}
#mbLogin .login-auto button{font-size:14px;color:var(--prm-gray-500)}
#mbLogin .login-auto button:hover{text-decoration:underline}
#mbLogin .login-btns{gap:8px}
#mbLogin .ad-area{padding:24px;border-radius:12px;box-shadow:0 0 12px rgba(0, 0, 0, .12);}
#mbLogin .ad-area p{margin-bottom:16px;font-size:20px;font-weight:700;line-height:1.45}
#mbLogin .ad-area p span{font-size:16px;font-weight:500}
#mbLogin .ad-area ul{gap:16px;flex:auto;padding:20px;border-radius:12px;background:var(--prm-blue-50)}
#mbLogin .ad-area ul li{display:flex;gap:8px;align-items:center;font-size:15px}
#mbLogin .ad-area ul li span{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:var(--prm-blue-500);background:#c2dcff}
#mbLogin .ad-area ul li span svg{width:20px}
#mbLogin .intro{margin-top:70px}
#mbLogin .intro button{display:flex;align-items:center;gap:6px;margin:0 auto 28px;font-size:20px;font-weight:700;text-align:center;color:var(--prm-gray-800)}
#mbLogin .intro button svg{width:20px;opacity:.4}
#mbLogin .intro button.open svg{transform:scaleY(-1)}
#mbLogin .intro ul{display:none;gap:32px}
#mbLogin .intro ul.open{display:flex}
#mbLogin .intro ul li{display:flex;flex-direction:column;justify-content: center;align-items:center;gap:10px;font-size:13px;font-weight:600}
#mbLogin .intro ul li .ci{width:55px;height:55px;border-radius:12px;box-shadow:0 0 12px rgba(0, 0, 0, .12);}
#mbLogin .intro ul li .ci img{width:100%}

/* 회원정보찾기 */
#mbLost{padding:15px}
#mbLost ul{gap:15px}
#mbLost ul li .cm-input{flex-grow:1}

/* 회원가입 */
#mbRegister{max-width:480px;width:100%;margin:0 auto}
#mbRegister ul{gap:15px}
#mbRegister ul li input{width:100%;font-size:16px}
#mbRegister .birth-selects{flex-grow:1}
#mbRegister .birth-selects select{flex:1}
#mbRegister .agreements{margin-top:20px}
#mbRegister .agreements p {padding-bottom:15px;margin-bottom:15px;border-bottom:1px dotted #ccc}
#mbRegister .agreements p .cm-ckbox{font-size:16px}
#mbRegister .agreements ul{gap:6px}
#mbRegister .agreements ul li .cm-ckbox{font-weight:400}
#mbRegister .agreements ul li a{text-decoration: underline;}
#mbRegister .agreements ul li i{font-style: normal;color:var(--prm-gray-400)}
#mbRegister .btn-area{margin-top:40px}
#mbRegister .cm-ps{text-align:center}

/* 회원가입 완료 */
#mbRegisterResult{max-width:480px;width:100%;margin:0 auto;padding:15vh 0;font-size:16px;text-align:center}
#mbRegisterResult .cm-mb-tit{margin-bottom:20px}
#mbRegisterResult .btn-area{margin-top:30px}
#mbRegisterResult .btn-area.cm-flex *{flex:1}

@media(max-width:768px){
.cm-member{padding:0 12px}
.cm-mb-tit{margin-bottom:15px;font-size:20px}
#mbLogin{max-width:480px}
#mbLogin .inner{flex-direction: column;}
#mbLogin .login-area{order:-1;min-width:unset}
#mbLogin .ad-area{width:100%;padding:16px}
#mbLogin .ad-area p{font-size:18px}
#mbLogin .ad-area p span{font-size:14px}
#mbLogin .ad-area ul{padding:12px}
#mbLogin .ad-area ul li{font-size:13px}
#mbLogin .ad-area ul li span{width:24px;height:28px}
#mbLogin .ad-area ul li span svg{width:16px;height:16px}
#mbLogin .intro{margin-top:30px}
#mbLogin .intro button{font-size:18px}
#mbLogin .intro ul{gap:24px;flex-wrap:wrap}

#mbRegister .agreements p .cm-ckbox{font-size:15px}
#mbRegister ul{gap:10px}
#mbRegister ul li .cm-label{font-size:16px;font-weight:600}
#mbRegister ul li .cm-input {border-color:var(--prm-gray-300)}
#mbRegister ul li .cm-btn.size-m{font-size:15px;font-weight:700}
#mbRegister .btn-area{margin-top:20px}
#mbRegisterResult{padding:30px 16px;word-break:keep-all}
}
@media(max-width:480px){
#mbRegisterResult br{display:none}
}