@charset "utf-8";

/* 프로필 작성 */
#joinStep{max-width:800px;margin:40px auto;padding:40px;border-radius:12px;font-size:15px;font-weight:400;color:#777;line-height:1.65;box-shadow:0 0 10px rgba(0,0,0,0.1);background:#fff}
#joinStep .progress-container{overflow:hidden;height:6px;width:100%;margin:30px 0 40px;border-radius:3px;background:#ddd}
#joinStep .progress-bar{height:100%;background:var(--primary);transition:width 0.3s linear}
#joinStep svg{width:16px;height:16px}
#joinStep .pl{white-space:pre-line}
#joinStep .stit{font-size:16px;font-weight:500;color:var(--dark);text-align:center}
#joinStep .tit{margin-bottom:40px;font-size:24px;font-weight:700;line-height:1.45;color:var(--dark);text-align:center}
#joinStep .step{display:none}
#joinStep .step-tip{display:flex;align-items:center;gap:5px;padding:0 20px;margin:30px 0;border-radius:4px;font-size:14px;color:var(--primary);background:var(--primary-bg)}
#joinStep .step-tip .rolling{overflow:hidden;position: relative;height:45px;}
#joinStep .step-tip .rolling ul li {height:45px;line-height:45px;animation:txt_roll2 5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite}
:root{--txt-h2:-45px}
@keyframes txt_roll2{
0%{transform:translateY(0px)}
30%{transform:translateY(0px)}
45%{transform:translateY(var(--txt-h2))}
85%{transform:translateY(var(--txt-h2))}
100%{transform:translateY(0px)}
}
#joinStep .step-btns{display:flex;justify-content:center;gap:10px;max-width:400px;margin:0 auto}
#joinStep .step-btns .btn{height:50px;border-radius:30px;font-size:15px;font-weight:500;background:none}
#joinStep .step-btns .btn-prev{width:30%;border:1px solid #d9d9d9;color:#aaa}
#joinStep .step-btns .btn-next{width:70%;color:#fff;background:var(--primary)}
#joinStep .step-01 .profile-tit-wrap{display:flex;border:1px solid #d9d9d9;border-radius:4px}
#joinStep .step-01 .profile-tit{flex-grow:1;height:45px;padding:0 20px;border:none;background:none}
#joinStep .step-01 .profile-tit:focus{border:none!important}
#joinStep .step-01 .profile-tit-rcmd-btn{display:flex;align-items:center;gap:5px;width:max-content;padding:0 20px;border:none;font-size:14px;font-weight:500;color:var(--primary);background:none}
#joinStep .step-01 .profile-tit-rcmd-btn svg{width:16px;height:16px}
#joinStep .step-01 .profile-tit-rcmd-btn.on svg{transform:rotate(180deg)}
#joinStep .step-01 .profile-tit-rcmd{display:none;padding:20px 0 15px;margin-top:-4px;border:1px solid #d9d9d9;border-top:none;border-radius:0 0 4px 4px}
#joinStep .step-01 .profile-tit-rcmd p{margin-bottom:15px;padding:0 20px 10px;border-bottom:1px dotted #ddd;font-size:12px;color:#aaa}
#joinStep .step-01 .profile-tit-rcmd p b{margin-right:5px;font-size:13px;font-weight:600;color:var(--primary)}
#joinStep .step-01 .profile-tit-rcmd ul li{padding:4px 20px;font-size:13px}
#joinStep .step-01 .profile-tit-rcmd ul li:hover{cursor:pointer;background:#f5f5f5}
#joinStep .step-02 .cont{min-height:200px;padding:20px;border:1px solid #d9d9d9;border-radius:4px}
#joinStep .step-03 dl+dl{margin-top:20px}
#joinStep .step-03 dl dt{margin-bottom:5px;font-size:17px;font-weight:700;color:var(--dark)}
#joinStep .step-03 dl dd .ps{margin-bottom:10px;font-size:14px}
#joinStep .step-03 dl.logo_area{text-align:center}
#joinStep .step-03 .profile-logo-label{display:block;position:relative;width:max-content;margin:0 auto;cursor:pointer}
#joinStep .step-03 .profile-logo-circle{width:100px;height:100px;border:1px solid #d9d9d9;border-radius:50%;overflow:hidden;background:#fafafa}
#joinStep .step-03 .profile-logo-img{display:none;width:100%;height:100%;object-fit:contain}
#joinStep .step-03 .profile-logo-icon{display:flex;align-items:center;justify-content:center;position:absolute;right:2px;bottom:2px;width:24px;height:24px;border-radius:50%;border:1px solid #d9d9d9;color:var(--dark);background:#fff}
#joinStep .step-03 .profile-logo-icon svg{width:14px;height:14px;color:#aaa}
#joinStep .step-03 .profile-site{width:100%;height:45px;padding:0 12px;border:1px solid #d9d9d9;border-radius:4px}
#joinStep .step-03 .profile-site:focus, #joinStep .step-03 .profile-site:active{border:1px solid #d9d9d9!important}
#joinStep .step-04 .profile-field{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:50px}
#joinStep .step-04 .profile-field button{height:40px;padding:0 20px;border:1px solid #d5d5d5;border-radius:30px;font-size:14px;font-weight:500;color:#aaa;white-space:nowrap;;background:#fff; transition: all .2s;}
#joinStep .step-04 .profile-field button.on{border-color:var(--primary);color:#fff;background:var(--primary)}
#joinStep .step-04 .profile-field button:not(.on):hover{color:var(--primary);border-color:var(--primary)}
#joinStep .step-last{text-align:center}
#joinStep .step-last .check{display:flex;width:40px;height:40px;margin:0 auto 20px;border-radius:50%;color:#fff;background:var(--primary)}
#joinStep .step-last .check svg{width:20px;height:20px;margin:auto}
#joinStep .step-last .tit{margin-bottom:15px}
#joinStep .step-last a{display:block;width:max-content;height:50px;padding:0 40px;margin:25px auto 0 ;border-radius:30px;font-size:15px;font-weight:500;color:#fff;line-height:50px;background:var(--primary)}


/* 로그인 */
#mbLogin{padding:80px 0;border-top:1px solid #e1e1e1;font-size:14px;font-weight:500;color:#555;line-height:1.8;text-align:center;font-family:'Pretendard'}
#mbLogin .inner{max-width:520px;width:100%;margin:0 auto;padding:50px;border:1px solid #e1e1e1;border-radius:12px;background:#fff}
#mbLogin .tit{margin-bottom:20px;font-size:24px;font-weight:700;color:var(--dark)}
#mbLogin .sh_input{width:100%;height:55px;padding:0 15px;border:1px solid #e1e1e1;border-radius:4px;font-size:16px;font-weight:500;transition:all .2s;font-family:'Pretendard'}
#mbLogin .sh_input:focus,#mbLogin .sh_input:active{outline:none;box-shadow:none;border-color:var(--dark)!important}
#mbLogin .sh_input::placeholder{color:#999}
#mbLogin ul li+li{margin-top:8px}
#mbLogin ul li label{display:none}
#mbLogin .auto_login{display:flex;align-items:center;padding:15px 0}
#mbLogin .auto_login div{display:flex;align-items:center;justify-content:flex-end;width:100%}
#mbLogin .auto_login input[type=checkbox]{position:absolute;width:0;height:0;visibility:hidden}
#mbLogin .auto_login label{font-size:14px;font-weight:600;color:#999}
#mbLogin .auto_login label:before{display:inline-block;vertical-align:middle;content:"";width:20px;height:20px;margin-right:8px;border-radius:4px;border:1px solid #e1e1e1;text-align:center;line-height:16px}
#mbLogin .auto_login input:checked + label:before{content:url(/sh_img/common/check.png);border:none;background:#111}
#mbLogin .login_sm{width:100%;height:55px;border:none;border-radius:4px;font-size:16px;font-weight:600;color:#fff;background:var(--primary);font-family:'Pretendard'}
#mbLogin .ps_area{margin-top:8px;color:#999;line-height:1.5;word-break:keep-all}
#mbLogin .ps_area a{display:block;height:55px;margin-bottom:15px;border-radius:4px;border:1px solid var(--dark);font-size:16px;font-weight:600;line-height:53px}

input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fcfcfc inset}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fcfcfc inset}
#shLogin_new{display:flex;position:relative;margin:0 auto;font-size:14px;font-weight:400;line-height:1.8;color:#777;font-family:'Pretendard'}
#shLogin_new, #shLogin_new *{box-sizing:border-box}
#shLogin_new .left{display:flex;flex-direction:column;align-items:center;justify-content: center;gap:50px;flex-shrink:0;position:relative;width:50%;height:100vh;background:#f5f5f5;text-align: center;}
#shLogin_new .left h1{opacity:0;margin-top:10px;font-size:35px;font-weight:700;color:var(--dark); white-space: pre-line;line-height:1.45; }
#shLogin_new .left img{opacity:0;margin-top:40px;max-width:720px;width:100%}
#shLogin_new .login_area{display:flex;flex-flow:column;justify-content:center;width:50%;max-width:600px;padding:0 85px}
#shLogin_new .login_area .tit{margin-bottom:5px;font-size:24px;font-weight:700;color:var(--dark)}
#shLogin_new .login_area form{margin-top:10px}
#shLogin_new .login_area ul li+li{margin-top:8px}
#shLogin_new .login_area .sh_input{width:100%;height:55px;padding:0 15px;border-radius:4px;border:1px solid #e1e1e1;font-size:15px;font-weight:500;color:#777;background:#fff;transition:all .2s;font-family:'Pretendard'}
#shLogin_new .login_area .sh_input:focus, #shLogin_new .login_area .sh_input:active{outline:none;box-shadow:none;border-color:var(--dark)!important}
#shLogin_new .login_area .sh_input::placeholder{color:#999}
#shLogin_new .login_area .login_ck{padding:15px 0;text-align:right}
#shLogin_new .login_area .login_btn{cursor:pointer;width:100%;height:60px;border:none;border-radius:6px;font-size:16px;font-weight:600;color:#fff;background:var(--dark)}
#shLogin_new .login_area .join_btn{display:block;height:60px;margin:8px 0 20px;border:1px solid var(--dark);border-radius:6px;font-size:16px;font-weight:600;color:var(--dark);text-align:center;line-height:58px}
@media(max-width:1200px){
#shLogin_new .left h1{font-size:30px}
}
@media(max-width:1024px){
#shLogin_new .left h1{font-size:24px}    
#shLogin_new .login_area{padding:0 30px}    
#shLogin_new .login_area .tit{font-size:22px}
}
@media(max-width:768px){
#shLogin_new{flex-flow:column}
#shLogin_new .left{gap:10px;width:100%;height:auto;padding:20px 0}
#shLogin_new .left h1{font-size:16px}
#shLogin_new .left img{width:90%}
#shLogin_new .login_area{order:-1;width:100%;max-width:100%;padding:30px 20px}
#shLogin_new .login_area .tit{margin-bottom:25px;font-size:20px;text-align:center}
#shLogin_new .login_area .tit p{margin-top:10px;font-size:24px}
#shLogin_new .login_area .sh_input{height:50px}
#shLogin_new .login_area .login_btn{height:55px}
#shLogin_new .login_area .join_btn{height:55px}
}

/* 회원가입-타입 */
#mbRegisterType{padding:80px 0;font-size:14px;font-weight:500;color:#555;line-height:1.8;font-family:'Pretendard'}
#mbRegisterType .inner{max-width:520px;width:100%;margin:0 auto;padding:50px;border:1px solid #e1e1e1;border-radius:12px;background:#fff}
#mbRegisterType .tit{margin-bottom:20px;text-align:center}
#mbRegisterType .tit p{margin-bottom:5px;font-size:24px;font-weight:700;text-align:center;color:var(--dark)}
#mbRegisterType .btn_wrap{display:flex;flex-flow:column;gap:15px}
#mbRegisterType .dft_btn{display:flex;align-items:center;gap:20px;height:60px;padding:0 30px;border-radius:6px;border:1px solid #e1e1e1;background:#fff;font-size:17px;font-weight:600;color:var(--dark);line-height:1.2;transition:all .2s}
#mbRegisterType .dft_btn img{width:24px}
#mbRegisterType .dft_btn:hover{border-color:var(--dark)}

/* 회원가입 */
#mbRegister{padding:80px 0;font-size:14px;font-weight:500;color:#555;line-height:1.8;font-family:'Pretendard'}
#mbRegister .inner{max-width:520px;width:100%;margin:0 auto;padding:50px;border:1px solid #e1e1e1;border-radius:12px;background:#fff}
#mbRegister .tit{margin-bottom:20px;font-size:24px;font-weight:700;text-align:center;color:var(--dark)}
#mbRegister .ps{padding:5px 0;font-size:13px;line-height:1.45;color:var(--danger)}
#mbRegister .label{margin-bottom:4px;font-size:15px;font-weight:600;color:var(--dark)}
#mbRegister .sh_input{width:100%;height:50px;padding:0 15px;border:1px solid #e1e1e1;border-radius:4px;font-size:16px;font-weight:500;transition:all .2s;font-family:'Pretendard'}
#mbRegister .sh_input:focus,#mbRegister .sh_input:active{outline:none;box-shadow:none;border-color:var(--dark)!important}
#mbRegister .sh_input::placeholder{color:#999}
#mbRegister .sh_select{cursor:pointer;-webkit-appearance:none;appearance:none;color:var(--dark);background:url(/sh_img/common/select_arr.png) 95% center no-repeat}
#mbRegister .form li+li{margin-top:20px}
#mbRegister .form li input~input{margin-top:8px}
#mbRegister .form li label{display:block;margin-bottom:4px;font-size:15px;font-weight:600;color:var(--dark)}
#mbRegister .form li b{color:var(--danger)}
#mbRegister .filebox{display:flex;column-gap:8px}
#mbRegister .filebox .upload-name{width:75%;color:#888}
#mbRegister .filebox label{cursor:pointer;width:120px;height:50px;margin:0!important;border-radius:4px;font-weight:500!important;line-height:50px;text-align:center;color:#fff!important;background:#aaa}
#mbRegister .filebox input[type="file"]{position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0}
#mbRegister .zip_area{display:flex;column-gap:8px;margin-bottom:8px}
#mbRegister .zip_input{width:75%;height:50px;padding:0 15px;border:1px solid #e1e1e1;border-radius:4px;font-size:16px;font-weight:500;background:#f2f2f2;font-family:'Pretendard'}
#mbRegister .zip_input:focus,#mbRegister .zip_input:active{outline:none;box-shadow:none;border-color:#e1e1e1!important}
#mbRegister .zip_area button{width:120px;height:50px;margin-left:auto;font-size:15px;font-weight:500;color:#fff;background:var(--dark)}
#mbRegister .agreements{margin-top:30px}
#mbRegister .agreements p{padding-bottom:15px;margin-bottom:15px;border-bottom:1px dotted #ccc}
#mbRegister .agreements ul li{vertical-align:middle}
#mbRegister .agreements ul li+li{margin-top:6px}
#mbRegister .agreements ul li span{color:var(--primary)}
#mbRegister .agreements ul li span.gray{color:#aaa}
#mbRegister .agreements ul li a{cursor:pointer;margin-left:5px;text-decoration:underline}
#mbRegister .agreements label{cursor:pointer;font-size:15px;line-height:1.4}
#mbRegister .agreements label:before{display:inline-block;vertical-align:middle;content:"";width:20px;height:20px;margin-right:8px;border-radius:4px;border:1px solid #e1e1e1;text-align:center;line-height:16px}
#mbRegister .agreements input{position:absolute;width:0;height:0;visibility:hidden}
#mbRegister .agreements input:checked + label:before{content:url(/sh_img/common/check.png);border:none;background:#111}
#mbRegister .join_btn{margin-top:30px;width:100%;height:55px;border:none;border-radius:6px;font-size:16px;font-weight:600;color:#fff;background:var(--primary);font-family:'Pretendard'}
.cm_ck.red{color:var(--danger)}
.cm_ck.blue{color:var(--primary)}
#mbRegister .info_list{margin-top:10px}
#mbRegister .form .info_list li{margin-top:0;font-size:14px;font-weight:500}
#mbRegister .info_list li:before{display:inline-block;vertical-align:middle;content:"";width:2px;height:2px;margin-right:6px;background:#222}

/* 회원가입 완료 */
#mbRegisterResult{padding:80px 0;font-size:15px;font-weight:500;color:#aaa;line-height:1.8;text-align:center;font-family:'Pretendard'}
#mbRegisterResult .inner{max-width:600px;width:100%;margin:0 auto;padding:100px 20px;border:1px solid #e1e1e1;border-radius:12px}
#mbRegisterResult .tit{font-size:28px;font-weight:700;color:var(--dark);line-height:1.45}
#mbRegisterResult .tit span{display:block;margin:30px 0;font-size:20px}
#mbRegisterResult .agree{display:flex;justify-content:center;align-items:center;gap:30px;margin:30px 0}
#mbRegisterResult .agree b{font-weight:600;color:var(--primary)}
#mbRegisterResult .agree a{color:#777}
#mbRegisterResult .btns{display:flex;justify-content: center;gap:10px;}
#mbRegisterResult .btns a{min-width:140px;height:50px;padding:0 30px;border-radius:30px;border:1px solid #d9d9d9;font-size:16px;font-weight:500;color:#aaa;line-height:48px}
#mbRegisterResult .btns a.fill{border:none;color:#fff; background: var(--primary);}

/* 회원확인 */
#pwCheck{padding:80px 0;font-size:15px;font-weight:500;color:#888;line-height:1.8;text-align:center;font-family:'Pretendard'}
#pwCheck .inner{max-width:520px;width:100%;margin:0 auto;padding:50px;border:1px solid #e1e1e1;border-radius:12px}
#pwCheck .tit{margin-bottom:20px;font-size:24px;font-weight:700;text-align:center;color:var(--dark)}
#pwCheck .cfm{margin-bottom:25px}
#pwCheck .cfm b{font-weight:600;color:var(--dark)}
#pwCheck .sh_input{width:100%;height:55px;padding:0 15px;border:1px solid #e1e1e1;border-radius:4px;font-size:16px;font-weight:500;transition:all .2s;font-family:'Pretendard'}
#pwCheck .sh_input.read{color:#aaa;background:#f2f2f2}
#pwCheck .sh_input:focus,#pwCheck .sh_input:active{outline:none;box-shadow:none;border:1px solid #e1e1e1!important}
#pwCheck .sh_input:not(.read):focus,#pwCheck .sh_input:not(.read):active{border-color:var(--dark)!important}
#pwCheck .sh_input::placeholder{color:#999}
#pwCheck ul li+li{margin-top:8px}
#pwCheck .pw_sm{width:100%;height:55px;margin-top:15px;border:none;border-radius:4px;font-size:16px;font-weight:600;color:#fff;background:var(--dark);font-family:'Pretendard'}

/* 로그인 */
#mbLeave{padding:80px 0;font-size:15px;font-weight:500;color:#555;line-height:1.8;font-family:'Pretendard'}
#mbLeave .inner{max-width:520px;width:100%;margin:0 auto;padding:50px;border:1px solid #e1e1e1;border-radius:12px;background:#fff}
#mbLeave .tit{margin-bottom:20px;font-size:24px;font-weight:700;color:var(--dark);text-align:center}
#mbLeave ul li{text-indent:-12px;margin-left:12px;padding:5px 0;word-break:keep-all}
#mbLeave ul li:before{display:inline-block;content:"";vertical-align:middle;width:2px;height:2px;margin-right:10px;background:#222}
#mbLeave ul li+li{border-top:1px dotted #ddd}
#mbLeave .agr_area{margin:20px 0;text-align:center}
#mbLeave .agr_area span{color:var(--danger)}
#mbLeave .agr_area input{position:absolute;width:0;height:0;visibility:hidden}
#mbLeave .agr_area label{font-size:15px;font-weight:500;color:var(--dark)}
#mbLeave .agr_area label:before{cursor:pointer;display:inline-block;vertical-align:middle;content:"";width:20px;height:20px;margin-right:8px;border-radius:4px;border:1px solid #e1e1e1;text-align:center;line-height:16px}
#mbLeave .agr_area input:checked + label:before{content:url(/sh_img/common/check.png);border:none;background:#111}
#mbLeave button{width:100%;height:55px;border:none;border-radius:4px;font-size:16px;font-weight:600;color:#fff;background:var(--dark);font-family:'Pretendard'}

@media(max-width:768px){
#mbLogin{padding:40px 12px}
#mbLogin .inner{padding:0;border:none}
#mbLogin .tit{font-size:20px}
#mbLogin .sh_input{height:50px}
#mbLogin .login_sm{height:50px}
#mbLogin .ps_area a{height:50px;line-height:48px}
#mbRegister{padding:30px 12px}
#mbRegister .inner{padding:0;border:none}
#mbRegister .tit{font-size:20px}
#mbRegisterType{padding:30px 12px}
#mbRegisterType .inner{padding:0;border:none}
#mbRegisterType .tit p{font-size:20px}
#mbRegisterType .dft_btn{gap:18px;font-size:16px}
#mbRegisterResult{padding:40px 12px}
#mbRegisterResult .inner{padding:0;border:none}
#mbRegisterResult .tit{padding-left:30px;margin-bottom:20px;font-size:26px}
#mbRegisterResult .login_btn{height:55px;line-height:55px}
#pwCheck{padding:40px 12px}
#pwCheck .inner{padding:0;border:none}
#pwCheck .inner > .tit{display:none}
#pwCheck .sh_input{height:50px}
#pwCheck .login_sm{height:50px}
#mbLeave{padding:40px 12px;font-size:14px}
#mbLeave .inner{padding:0;border:none}
#mbLeave .tit{font-size:20px}
#mbLeave ul{padding:15px 20px;border-radius:4px;border:1px solid #e1e1e1}
#mbLeave ul li{line-height:1.5}
#mbLeave .agr_area label{font-size:14px}
}

#mbRegister .form .prdt label{display:flex;align-items:flex-start;justify-content:space-between;padding:15px;border:1px solid #e1e1e1;border-radius:4px;cursor:pointer;line-height:1.5;transition:all .3s}
#mbRegister .form .prdt label:hover{background:#f5f5f5}
#mbRegister .form .prdt label.chk{border:1px solid #111;background:#f5f5f5}
#mbRegister .form .prdt label+label{margin-top:10px}
#mbRegister .form .prdt div{width:calc(100% - 23px)}
#mbRegister .form .prdt span{display:inline-block;font-size:13px;color:#777;word-break:keep-all}
#mbRegister .form .prdt input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;margin-top:4px;border:1px solid #ccc; border-radius:50%;outline:none;cursor:pointer}
#mbRegister .form .prdt input[type='radio']:checked{border:3px solid #fff;box-shadow:0 0 0 1px #111;background:#111}