@charset "utf-8";

/* 회원가입인트로 */
.join_intro_box{width:450px;margin:0 auto;}
.join_intro_box .common_join{margin-bottom:40px;}
.join_intro_box .common_join a.btn_primary{display:block;width:100%;padding:15px 20px;background:#000;border:1px solid #000;color:#fff;border-radius:10px;box-sizing:border-box;font-weight:700;text-align:center;}
.join_intro_box .common_join a.btn_primary:hover{background:#fff;color:#000;}
.join_intro_box .login_txt{margin-top:40px;font-size:1.5rem;line-height:1;color:#555;text-align:center;}
.join_intro_box .login_txt a{text-decoration:underline;font-weight:600;}

/* 휴대폰번호인증 */
.sms_auth_wrap{width:450px;margin:0 auto;}
.sms_auth_wrap .tit_area{margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid #000;}
.sms_auth_wrap .tit_area h4{font-size:2.2rem;}
.sms_auth_wrap .tit_area p{color:#888;}
.sms_auth_wrap input[type="tel"].inp_num{width:100%;height:50px;padding:0 20px;border:1px solid #e5e5e5;border-radius:5px;font-size:1.5rem;box-sizing:border-box;}
.sms_auth_wrap input[type="tel"].inp_num::placeholder{color:#b5b5b5;}
.sms_auth_wrap .btn_auth_num{width:100%;padding:15px 20px;border:1px solid #000;background:#fff;border-radius:5px;box-sizing:border-box;font-size:1.5rem;font-weight:700;cursor:pointer;}
.sms_auth_wrap .btn_auth_num:hover{background:#000;color:#fff;}
.sms_auth_wrap dl{display:flex;flex-direction:column;}
.sms_auth_wrap dt{font-size:1.6rem;font-weight:700;}
.sms_auth_wrap dd{display:flex;margin-top:10px;}
.sms_auth_wrap dd .inp_num{flex-grow:1;margin-right:10px;}
.sms_auth_wrap dd .btn_auth_num{width:30%;flex-shrink:0;}

.sms_auth_wrap .auth_num_box{display:flex;flex-direction:column;}
.sms_auth_wrap .auth_num_box input{margin-top:10px;}

/* 회원가입약관동의 */
.join_agree .agree_box:nth-child(n+2){margin-top:20px;}
.join_agree .agree_box:last-child{margin-bottom:50px;}

.agree_box{border:1px solid #d5d5d5;}
.agree_box .tit_area{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #d5d5d5;}
.agree_box .tit_area .cbox_wr{display:flex;gap:15px;flex-shrink: 0;}
.agree_box .box_in{padding:25px 20px;box-sizing:border-box;}
.agree_box .box_in textarea{overflow-y:auto;height:150px;border:0;font-size:1.6rem;line-height:1.5;color:#000;resize:none;}
.agree_box .agree_chk{padding:20px;border-top:1px solid #d5d5d5;}
.agree_box .agree_chk label{font-size:1.7rem !important;}

/* 로그인 */
.login_w{position:relative;width:450px;margin:0 auto;}
.login_w .title{margin-bottom:40px;font-size:4rem;line-height:1.2;font-weight:200;color:#000;text-align:center;}
.login_w .title strong{display:block;font-weight:700;}
.login_w .logbox li{overflow:hidden;padding-left:50px;background-repeat:no-repeat;background-position:20px 50%;background-size:auto 20px;border:1px solid #d5d5d5;background-color:#fff;}
.login_w .logbox li:nth-child(n+2){margin-top:10px;}
.login_w .logbox li input{display:block;width:100%;height:60px;padding:0 10px;border:0;font-family:'Roboto',sans-serif;font-weight:400;font-size:1.6rem;line-height:60px;color:#000;box-sizing:border-box;}
.login_w .logbox li.icon_id{background-image:url(/nanum/site/member/img/icon_id.png);}
.login_w .logbox li.icon_pw{background-image:url(/nanum/site/member/img/icon_pw.png);}
.login_w .save_id{position:relative;margin-top:20px;}
.login_w .save_id .tooltip{width:100%;margin-top:10px;padding:20px;border:1px solid #ddd;border-radius:5px;background:#fdfdfd;text-align:left;box-sizing:border-box;box-shadow:10px 10px 20px rgba(0,0,0,0.2);}
.login_w .save_id .tooltip p{font-size:1.4rem;font-weight:500;line-height:1.4;word-break:keep-all;}
.login_w .save_id .tooltip p:nth-child(n+2){margin-top:10px;}
.login_w .btn_login{width:100%;height:60px;margin-top:20px;padding:0;border:0;background:#333;font-size:1.8rem;font-weight:700;color:#fff;text-align:center;cursor:pointer;}
.login_w .member_info{display:flex;justify-content:center;margin-top:30px;}
.login_w .member_info a{position:relative;font-size:1.5rem;font-weight:500;color:#000;}
.login_w .member_info a:nth-child(n+2){margin-left:20px;padding-left:20px;}
.login_w .member_info a:nth-child(n+2):before{content:'';position:absolute;top:50%;left:0;width:1px;height:16px;margin-top:-8px;background:#e5e5e5;}

/* 로그인_회원가입_sns공통 */
.sns_join{margin-top:40px;}
.sns_join h4{position:relative;margin-bottom:20px;text-align:center;}
.sns_join h4::before{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:#d5d5d5;}
.sns_join h4 span{position:relative;padding:0 15px;background:#fff;font-size:1.6rem;z-index:1;}
.sns_join .sns_cont{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:30px;text-align:center;}
.sns_join .sns_cont a.btn_sns{position:relative;min-width:60px;padding-top:70px;font-size:1.5rem;font-weight:700;color:#000;text-align:center;}
.sns_join .sns_cont a.btn_sns::before{content:'';position:absolute;top:0;left:50%;width:60px;height:60px;margin-left:-30px;border-radius:100%;}
.sns_join .sns_cont a.btn_sns::after{content:'';position:absolute;top:20px;left:50%;width:20px;height:20px;margin-left:-10px;background-repeat:no-repeat;background-size:cover;}
.sns_join .sns_cont a.btn_sns.naver::before{background-color:#03c75a;}
.sns_join .sns_cont a.btn_sns.naver::after{background-image:url(/nanum/site/member/img/btn_naver.png);}
.sns_join .sns_cont a.btn_sns.kakao::before{background-color:#fee500;}
.sns_join .sns_cont a.btn_sns.kakao::after{background-image:url(/nanum/site/member/img/btn_kakao.png);}

/* 회원가입&본인인증 공통 */
.member_wrap .title{margin-bottom:40px;font-size:4rem;line-height:1.2;font-weight:200;color:#000;text-align:center;}
.member_wrap .title strong{display:block;font-weight:700;}
.member_wrap .desc{text-align:center;word-break:keep-all;}

.memberbox{display:flex;justify-content:space-between;gap:20px;margin-top:20px;}
.memberbox .box{position:relative;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;width:50%;padding:50px 20px 20px 20px;border:2px solid #e5e5e5;border-radius:20px;box-sizing:border-box;}
.memberbox .box .tit{padding-top:85px;font-size:2.2rem;color:#222;text-align:center;background-repeat:no-repeat;background-position:50% 0;background-size:auto 62px;}
.memberbox .box .con{padding-top:15px;text-align:center;font-size:1.6rem;line-height:1.5;word-break:keep-all;}
.memberbox .box .btn{position:relative;display:block;width:100%;margin-top:30px;padding:12px 0;border:1px solid #f5f5f5;border-radius:10px;background:#f5f5f5;text-align:center;font-weight:700;color:#222;box-sizing:border-box;}
.memberbox .box .btn::after{content:'';position:absolute;top:50%;left:14px;margin-top:-8px;background-repeat:no-repeat;background-size:cover;}

/* 본인인증 */
.memberbox .box.ipin1 .tit{background-image:url(/nanum/site/member/img/ipin_icon01.png);}
.memberbox .box.ipin2 .tit{background-image:url(/nanum/site/member/img/ipin_icon02.png);}

.memberbox .box.ipin2 .ballon{display:none;}

.memberbox .box.sns .tit{background-image:url(/nanum/site/member/img/sns_icon.png);}
.memberbox .box.sns .btn_area{margin-top:30px;}
.memberbox .box.sns .btn{margin-top:10px;}
.memberbox .box.sns .btn.naver::after{width:17px;height:17px;background-image:url(/nanum/site/member/img/btn_login_naver.png);}
.memberbox .box.sns .btn.kakao::after{width:19px;height:17px;background-image:url(/nanum/site/member/img/btn_login_kakao.png);}

/* 회원가입폼  */
.join_write > dl{display:flex;align-items:center;min-height:40px;padding:15px 0;border-bottom:1px solid #d5d5d5;}
.join_write > dl:first-of-type{border-top:2px solid #000;}
.join_write > dl:last-child{border-color:#000;}
.join_write > dl > dt{flex-shrink:0;width:200px;padding:0 20px;font-weight:600;color:#000;box-sizing:border-box;}
.join_write > dl > dd{display:flex;flex-wrap:wrap;align-items:center;flex-grow:1;}
.join_write dd input.member_input{height:40px;padding:0 10px;border:1px solid #d5d5d5;box-sizing:border-box;width:50%;}
.join_write dd input.member_input.w100{width:100%;}
.join_write dd .member_btn{height:40px;margin-left:8px;padding:0 15px;border:1px solid #000;background:#fff;font-size:1.5rem;font-weight:700;line-height:40px;color:#000;cursor:pointer;box-sizing:border-box;}
.join_write dd .member_btn:hover{background:#000;color:#fff;}
.join_write dd span.text1{margin-left:10px;font-size:1.5rem;font-weight:600;color:#888;}
.join_write dd ul.tel_area{display:flex;}
.join_write dd ul.tel_area li{position:relative;}
.join_write dd ul.tel_area li:nth-child(1) select{flex-shrink:0;width:100px;}
.join_write dd ul.tel_area li:nth-child(n+2){padding-left:20px;}
.join_write dd ul.tel_area li:nth-child(n+2)::after{content:'';position:absolute;top:50%;left:8px;width:4px;height:1px;background:#000;}
.join_write dd ul.sns_area{display:flex;align-items:center;}
.join_write dd ul.sns_area li{display:inline-flex;align-items:center;position:relative;min-height:30px;padding-left:40px;font-weight:700;color:#000;}
.join_write dd ul.sns_area li:nth-child(n+2){margin-left:30px;}
.join_write dd ul.sns_area li a{position:relative;padding-right:15px;}
.join_write dd ul.sns_area li a::after{content:'';position:absolute;top:50%;right:0;margin-top:-6px;width:7px;height:12px;background:url(/nanum/site/member/img/icon_arr.png) no-repeat;background-size:cover;}
.join_write dd ul.sns_area li a:hover{text-decoration:underline;}
.join_write dd ul.sns_area li a.unlock{margin-left:8px;font-size:1.4rem;font-weight:600;color:#888;text-decoration:underline;}
.join_write dd ul.sns_area li a.unlock::after{display:none;}
.join_write dd ul.sns_area li::before{content:'';position:absolute;top:50%;left:0;margin-top:-15px;width:30px;height:30px;background-repeat:no-repeat;background-size:cover;}
.join_write dd ul.sns_area li.naver::before{background-image:url(/nanum/site/member/img/naver_icon.png);}
.join_write dd ul.sns_area li.kakao::before{background-image:url(/nanum/site/member/img/kakao_icon.png);}
.join_write dd .change_box{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;padding:20px;background:#f9f9f9;box-sizing:border-box;}
.join_write dd .change_box *{font-size:1.4rem !important;}
.join_write dd .change_box dt{flex-shrink:0;width:20%;font-weight:700;}
.join_write dd .change_box dd{display:flex;}
.join_write dd .change_box dd:nth-of-type(n+2){margin-left:20px;}
.join_write dd .change_box dd input.member_input{max-width:180px;}

/* 아이디비밀번호찾기 */
.member_id{position:relative;padding:60px 30px;border:1px solid #e5e5e5;text-align:center;}
.member_id .tit{position:relative;padding-top:120px;font-size:3rem;color:#222;line-height:1.4;}
.member_id .tit::after{content:'';position:absolute;top:0;left:50%;width:106px;height:100px;background-repeat:no-repeat;background-size:contain;transform: translate(-50%, 0);}
.member_id .tit.mem_id::after{background-image:url(/nanum/site/member/img/bg_idfind.png);}
.member_id .tit.mem_pwd::after{background-image:url(/nanum/site/member/img/bg_pwdfind.png);}
.member_id .tit.mem_joinok::after{background-image:url(/nanum/site/member/img/bg_joinok.png);}
.member_id .txt{padding:8px 0 30px;font-size:1.7rem;color:#555;font-weight:500;}
.member_id .idpw_reserv{font-size:2rem;line-height:1.5;}
.member_id .idpw_reserv strong{color:#000;}
.member_id .idpw_reserv span{color:#ff3232;font-weight:600;}
.member_id .area{width:320px;margin:0 auto;}
.member_id .area p{position:relative;margin-bottom:10px;}
.member_id .area p input{width:100%;height:45px;padding:0 15px;border:0;background:#f5f5f5;font-size:1.4rem;line-height:45px;box-sizing:border-box;}
.member_id .area p input:focus{border:1px solid #222;background:#f8f8f8;}
.member_id .area p label{position:absolute;top:0;left:15px;height:45px;;font-size:1.5rem;line-height:45px;color:#999;}
.member_id input.inp_btn,
.member_id a.inp_btn{display:inline-block;min-width:180px;margin-top:40px;padding:15px 30px;background:#222;border:none;font-size:1.5rem;font-weight:700;line-height:normal;color:#fff;box-sizing:border-box;}

/* 주민등록번호체크 */
.juminchk_wrap .form_box{display:flex;justify-content:center;align-items:center;height:40px;margin-top:20px;padding:20px;background:#f9f9f9;}
.juminchk_wrap .form_box dl{display:flex;align-items:center;margin-right:10px;}
.juminchk_wrap .form_box dt{flex-grow:1;margin-right:20px;font-size:1.6rem;font-weight:700;}
.juminchk_wrap .form_box dd{position:relative;flex-grow:1;height:40px;line-height:40px;}
.juminchk_wrap .form_box dd:nth-of-type(2){padding-left:20px;}
.juminchk_wrap .form_box dd:nth-of-type(2)::after{content:'';position:absolute;top:50%;left:8px;width:4px;height:1px;background:#000;}
.juminchk_wrap .form_box dd span.user_name{display:block;width:120px;height:100%;padding:0 10px;border-radius:5px;border:1px solid #e5e5e5;background:#e9e9e9;font-weight:700;color:#000;box-sizing:border-box;}
.juminchk_wrap .form_box dd input{width:100%;height:100%;padding:0 10px;border:1px solid #e5e5e5;border-radius:5px;box-sizing:border-box;font-size:1.5rem;font-weight:700;color:#000;}
.juminchk_wrap .form_box dd input::placeholder{font-weight:500;color:#d5d5d5;}
.juminchk_wrap .form_box dd input::-webkit-input-placeholder{font-weight:500;color:#d5d5d5;}
.juminchk_wrap .form_box dd input:-ms-input-placeholder{font-weight:500;color:#d5d5d5;}
.juminchk_wrap .form_box .con_sbtn{min-width:100px;height:100%;}

/* 회원버튼정의 */
.membtn_w{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;width:100%;padding:30px 0;text-align:center;}
.membtn_w.center{justify-content:center;}
.membtn_w.center .mem_btn{flex-grow:0;}

.membtn_w .mem_btn{flex-grow:1;border:0;display:inline-block;color:#fff;min-width:130px;padding:15px 40px;font-size:1.6rem;font-weight:600;line-height:normal;vertical-align:middle;text-align:center;cursor:pointer;border:0;letter-spacing:-0.025em;box-sizing:border-box;}
.membtn_w .mem_btn.black{background:#000;color:#fff;}
.membtn_w .mem_btn.gray{background:#f5f5f5;color:#000;}

/********************태블릿********************/
@media all and (max-width:1024px){
	
.cash_box{display:none;}

/* 회원가입인트로 */
.join_intro_box{width:100%;}
.join_intro_box .login_txt{margin-top:4vh;}

/* 휴대폰번호인증 */
.sms_auth_wrap{width:100%;}
.sms_auth_wrap .tit_area{margin-bottom:2vh;padding-bottom:2vh;}
.sms_auth_wrap input[type="tel"].inp_num{height:40px;padding:0 2vw;}
.sms_auth_wrap dd{flex-direction:column;gap:10px;}
.sms_auth_wrap dd .inp_num{margin-right:0;}
.sms_auth_wrap dd .btn_auth_num{width:100%;}
.sms_auth_wrap .btn_auth_num{width:100%;padding:1.5vh 2vw;}

/* 회원가입약관동의 */
.join_agree .agree_box:nth-child(n+2){margin-top:2vh;}
.join_agree .agree_box:last-child{margin-bottom:5vh;}

.agree_box .tit_area{padding:1.5vh 2vw;}
.agree_box .box_in{padding:2.5vh 2vw;}
.agree_box .agree_chk{padding:2vh 2vw;}

/* 회원가입폼  */
.join_write > dl{flex-direction:column;gap:10px;padding:1.5vh 2vw;}
.join_write > dl > dt{width:100%;padding:0;}
.join_write > dl > dd{width:100%;gap:8px;}
.join_write dd input.member_input{width:100%;}
.join_write dd .member_btn{width:100%;margin-left:0;text-align:center;}
.join_write dd span.text1{margin-left:0;}
.join_write dd .change_box{flex-wrap:wrap;flex-direction:column;gap:8px;padding:2vh 2vw;}
.join_write dd .change_box dt{width:100%;}
.join_write dd .change_box dd{width:100%;}
.join_write dd .change_box dd:nth-of-type(n+2){margin-left:0;}
.join_write dd .change_box dd input.member_input{flex-grow:1;max-width:100%;}
.join_write dd .change_box dd .member_btn{flex-shrink:0;width:120px;margin-left:5px;}

/* 로그인_회원가입_sns공통 */
.sns_join .sns_cont{margin-top:3vh;}
.sns_join .sns_cont a.btn_sns{min-width:40px;padding-top:50px;}
.sns_join .sns_cont a.btn_sns::before{width:40px;height:40px;margin-left:-20px;}
.sns_join .sns_cont a.btn_sns::after{top:12px;width:16px;height:16px;margin-left:-8px;}

/* 로그인 */
.login_w{width:100%;}
.login_w .logbox li input{height:auto;padding:2vh 1vw;line-height:1;}
.login_w .btn_login{height:auto;margin-top:2vh;padding:2vh 0;}
.login_w .member_info{margin-top:4vh;padding-top:2vh;}

.memberbox .box{padding:5vh 2vw 2vh 2vw;}
.memberbox .box .con{padding-top:1.5vh;}
.memberbox .box .btn{margin-top:3vh;padding:1vh 0;}

/* 주민등록번호체크 */
.juminchk_wrap .form_box{flex-wrap:wrap;height:auto;}
.juminchk_wrap .form_box dl{width:100%;margin-right:0;}
.juminchk_wrap .form_box dl:nth-of-type(n+2){margin-top:1vh;}
.juminchk_wrap .form_box dt{flex-grow:0;flex-shrink:0;width:30%;}
.juminchk_wrap .form_box dd span.user_name{width:100%;}
.juminchk_wrap .form_box dd input{width:100% !important;}
.juminchk_wrap .form_box .con_sbtn{min-width:100%;margin-top:2vh;}

.membtn_w.center .mem_btn{flex-grow:1;}
	
}

/********************모바일********************/
@media all and (max-width:767px){
	
/*** 모바일에서 본인인증이 안될경우 [해결방법] 안내문구 ***/
.cash_box{display:block;padding:2vh 2vw;background:#fff;border:1px solid #e5e5e5;}
.cash_box a{position:relative;padding-left:24px;font-size:1.7rem;font-weight:700;color:#000;text-decoration:underline;}
.cash_box a::after{content:'';position:absolute;top:50%;left:0;width:16px;height:16px;margin-top:-8px;background:url(/nanum/site/member/img/icon_warning_red.png) no-repeat;background-size:cover;}

/*** 모바일에서 본인인증이 안될경우 [해결방법] 팝업 ***/
.cash_delete_wrap .tab_wrap{display:flex;position:fixed;top:0;width:100%;height:40px;margin:0;padding:0;background:#5e637c;}
.cash_delete_wrap .tab_wrap li{display:inline-flex;justify-content:center;align-items:center;width:calc(100% / 3);text-align:center;box-sizing:border-box;list-style:none;}
.cash_delete_wrap .tab_wrap li:nth-child(n+2){border-left:1px solid #b0b0b2;}
.cash_delete_wrap .tab_wrap li a{display:block;padding:0 2vw;font-size:1.4rem;font-weight:700;color:#fff;text-decoration:none;}
.cash_delete_wrap .box{margin-top:40px;}
.cash_delete_wrap .box > div{padding-top:40px;}
.cash_delete_wrap .box img{max-width:100%;min-width:320px;}


/* 회원가입&본인인증 공통 */
.memberbox{gap:0;flex-wrap:wrap;}
.memberbox .box{width:100%;border:none;padding:0;}
.memberbox .box .tit,
.memberbox .box .con{display:none;}
.memberbox .box .btn{margin-top:1vh;}

.memberbox .box.sns .btn_area{margin-top:0;}
.memberbox .box.sns .btn{margin-top:1vh;}
.memberbox .box.sns .btn.naver{margin-top:0;background-color:#03c75a;color:#fff;}
.memberbox .box.sns .btn.naver::after{background-image:url(/nanum/site/member/img/btn_login_naver_ov.png);}
.memberbox .box.sns .btn.kakao{background:#fee500;color:#000;}

/* 아이디비밀번호찾기 */
.member_id{padding:40px 20px;}
.member_id .tit{padding-top:100px;font-size: 2.6rem;}
.member_id .tit::after{width: 85px;height: 80px;}
.member_id .txt{line-height: 1.5;}
.member_id .area{width:100%;}

/* 회원가입 */
.agree_box .tit_area{display:block;}
.agree_box .tit_area .cbox_wr{margin-top:10px;}

/* 주민등록번호체크 */
.juminchk_wrap .form_box{margin-top:2vh;padding:2vh 3vw;}

/* 회원가입폼  */
.join_write dd .change_box dd .member_btn{width:90px;}

}

/********************웹********************/
@media all and (min-width:1025px) {

.memberbox .box:hover{border-color:#009ef6;}

.memberbox .box.ipin1:hover .btn,
.memberbox .box.ipin2:hover .btn{background:#009ef6;color:#fff;}

.memberbox .box.ipin2:hover .ballon{display:block;position:absolute;top:100%;left:0;padding:20px;border-radius:10px;background:#484848;color:#fff;box-sizing:border-box;box-shadow:10px 10px 10px rgba(0,0,0,0.2);}
.memberbox .box.ipin2:hover .ballon::after{border-bottom:10px solid #484848;border-left:10px solid transparent;border-right:10px solid transparent;border-top:0px solid transparent;content:'';position:absolute;top:-10px;left:50%;margin-left:-5px;}
.memberbox .box.ipin2:hover .ballon ul.list li{font-size:1.3rem;line-height:1.4;color:#fff;}
.memberbox .box.ipin2:hover .ballon ul.list li::after{top:5px;}

.memberbox .box.sns .btn.naver:hover{background:#03c75a;color:#fff;}
.memberbox .box.sns .btn.naver:hover::after{background-image:url(/nanum/site/member/img/btn_login_naver_ov.png);}
.memberbox .box.sns .btn.kakao:hover{background:#fee500;color:#000;}

/*** 모바일에서 본인인증이 안될경우 [해결방법] 안내문구 ***/
.cash_box{display:none;}

}