@charset "utf-8";

/* 로그인 */
.login_w{position:relative;width:500px;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/builder/skin/common/img/icon_id.png);}
.login_w .logbox li.icon_pw{background-image:url(/nanum/site/builder/skin/common/img/icon_pw.png);}
.login_w .save_id{position:relative;margin-top:20px;}
.login_w .save_id .tooltip{position:absolute;top:40px;left:0;width:100%;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:#3c3c50;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:40px;padding-top:20px;border-top:1px solid #e5e5e5;}
.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;}

/* 회원가입&본인인증 공통 */
.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:2%;width:100%;margin-top:60px;box-sizing:border-box;}
.memberbox .box{flex-grow:1;width:0;padding:55px 30px 40px;background:no-repeat top 48px right 30px;border:1px solid #d5d5d5;box-sizing:border-box;border-radius:15px;}
.memberbox .box.naver{background-image:url(/nanum/site/member/img/naver_icon.gif);}
.memberbox .box.kakao{background-image:url(/nanum/site/member/img/kakao_icon.gif);}
.memberbox .box.phone{background-image:url(/nanum/site/member/img/phone_icon.gif);}
.memberbox .box.ipin{background-image:url(/nanum/site/member/img/ipin_icon.gif);}
.memberbox .box > div h3.tit{/*margin-bottom:35px;*/font-size:2.8rem;color:#222;}
.memberbox .box > div p{color:#555;}
.memberbox .box .con{padding:30px 0 40px;text-align:center;font-size:1.6rem;line-height:1.5;word-break:keep-all;}
.memberbox .box .btn{margin-top:60px;display:block;height:50px;font-size:1.6rem;line-height:46px;font-weight:500;color:#fff;background:#997865;border:2px solid #997865;box-shadow:8px 8px 20px rgb(57 20 1 / 30%);text-align:center;border-radius:10px;box-sizing:border-box;}
.memberbox .box .btn:hover{background:#fff;color:#997865;}

#d_shadow{position:fixed;display:none;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background:#000;opacity:0.8;z-index:560;}
.jsLayerPopw{position:absolute;width:680px;/*min-height:790px;*/padding:60px 40px;top:-5000px;left:-5000px;z-index:565;background:#fff;border-radius:20px;box-sizing:border-box;}
.jsLayerPopw.absol{position:fixed;top:50%;left:50%;margin:-316px 0 0 -340px;}
.jsLayerPopw .inner{position:relative;}
.jsLayerPopw .inner .tit{padding-bottom:20px;font-weight:700;font-size:3rem;color:#000;border-bottom:2px solid #000;}
.jsLayerPopw .inner .txtw dl{display:flex;flex-wrap:wrap;padding:30px 20px;width: 100%;font-size:1.6rem;align-items: center;border-bottom:1px solid #e5e5e5;box-sizing: border-box;}
.jsLayerPopw .inner .txtw dl dt{width:22%;font-weight:700;color:#000;}
.jsLayerPopw .inner .txtw dl dd{display:flex;width:78%;font-weight:500;align-items: center;}
.jsLayerPopw .inner .txtw dl dd p:not(:first-child){margin-left:7px;}
.jsLayerPopw .inner .txtw dl dd p{flex-grow: 1; width: 0;}
.jsLayerPopw .inner .txtw dl dd p.txt{flex-grow:0;width: auto;}
.jsLayerPopw .inner .txtw dl dd input{padding:7px 20px;width: 100%;font-size:1.6rem;border:1px solid #d5d5d5;border-radius:5px;box-sizing: border-box;}
.jsLayerPopw .inner .txtw dl dd input::placeholder{font-weight:500;color:#c1c1c1;}
.jsLayerPopw .inner .btn_w{padding-bottom:0;}
.jsLayerPopw .inner .btn_w a{min-width:auto;width:35%;}
.jsLayerPopw .inner .closed{position:absolute;top:13px;right:0;display:inline-block;}

/* 회원가입 */
.memberbox .box.join1 .tit{background-image:url(/nanum/site/builder/skin/common/img/join_icon01.gif);}
.memberbox .box.join2 .tit{background-image:url(/nanum/site/builder/skin/common/img/join_icon02.gif);}
.memberbox .box .btn a{background:#555;}

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

/* 회원가입동의 */
.join_agree{width:100%;}
.join_agree .agree_box{margin-bottom:40px;border:1px solid #d5d5d5;}
.join_agree .agree_box .tit_area{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #d5d5d5;}
.join_agree .agree_box .tit_area h3{font-weight:700;color:#000;}
.join_agree .agree_box .cont_area{padding:20px;}
.join_agree .agree_box .cont_area textarea{width:100%;height:200px;padding:0 20px 0 0;border:0;box-sizing:border-box;font-size:1.4rem;line-height:1.5;color:#555;}
.join_agree .allagree{padding-bottom:40px;border-bottom:1px dashed #d5d5d5;text-align:center;}
.join_agree .allagree label{font-size:1.7rem !important;}

/*** 버튼정의 ***/
.cancel_btn{display:inline-block;margin:0 3px;color:#fff !important;padding:16px 40px; font-weight:normal;font-size:15px;line-height:normal;vertical-align:middle;text-align:center;cursor:pointer;border:0;letter-spacing:-0.05em;background:#a2a2a2;}



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

/*** 모바일회원증 ***/
.mcardw_line{padding-top:90px;border-top:2px solid #000;}
.mcardw{padding-top:60px;margin:0 auto;width:395px;text-align:center;border:1px solid #d5d5d5;border-radius:10px;box-shadow:32px 10px 29px rgba(0,0,0,0.09);overflow:hidden;}
.hatch{animation-name:hatch; -webkit-animation-name:hatch;animation-duration:2s;-webkit-animation-duration:2s;	animation-iteration-count:infinite;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;	transform-origin:50% 100%;-ms-transform-origin:50% 100%;	-webkit-transform-origin:50% 100%; visibility:visible !important;}
.mcardw dl{margin:30px 0 20px 0;}
.mcardw dl dt{font-weight:700;font-size:28px;line-height:1;color:#000;}
.mcardw dl dd{margin-top:15px;font-weight:500;font-size:18px;color:#0095ea; line-height:1.3;}
.mcardw .btn_wrap {width:100%; text-align:center; margin-bottom:30px;}
.mcardw .btn_wrap a {display:inline-block; line-height:40px; border:1px solid #ddd; border-radius:4px; font-size:15px; padding:0 10px; margin:0 2px; color:#222;}
.mcardw .btn_wrap a:hover {background:#154064; color:#fff; border-color:#154064;}
.mcardw .mgray_box{margin-top:45px;padding:25px 30px;background:#f9f9f9;text-align:left; border-top:1px dashed #bbb;}
.mcardw .mgray_box li{font-weight:500;font-size:15px;line-height:22px;color:#6f6f6f;}

@keyframes hatch {
0% {
	transform:rotate(0deg) scaleY(0.6);
}
20% {
	transform:rotate(-2deg) scaleY(1.05);
}
35% {
	transform:rotate(2deg) scaleY(1);
}
50% {
	transform:rotate(-2deg);
}	
65% {
	transform:rotate(1deg);
}	
80% {
	transform:rotate(-1deg);
}		
100% {
	transform:rotate(0deg);
}									
}

@-webkit-keyframes hatch {
0% {
	-webkit-transform:rotate(0deg) scaleY(0.6);
}
20% {
	-webkit-transform:rotate(-2deg) scaleY(1.05);
}
35% {
	-webkit-transform:rotate(2deg) scaleY(1);
}
50% {
	-webkit-transform:rotate(-2deg);
}	
65% {
	-webkit-transform:rotate(1deg);
}	
80% {
	-webkit-transform:rotate(-1deg);
}		
100% {
	-webkit-transform:rotate(0deg);
}		
}



/*** 아이디 및 비밀번호 찾기 ***/
.idpw_sw{margin:0 auto;padding:65px;width:395px;text-align:center;background:url(/nanum/site/builder/skin/common/img/idpw_sicon1.gif) no-repeat center top 50px;border:1px solid #c0c5cd;border-radius:15px;}
.idpw_sw .stxt{margin-top:120px;display:block;font-size:16px;color:#909090;}
.idpw_sw .tit{margin:15px 0 40px;font-size:36px;line-height:46px;color:#000;}
.idpw_sw .tit strong{display:block;}

.idpw_sw .idpw_box{position:relative;margin-bottom:5px;}
.idpw_sw input,
.idpw_sw a.btn_input{display:block;padding:0 5%;width:90%;height:53px;line-height:53px;font-family:'Roboto','NotoKrR',sans-serif;font-weight:400;font-size:16px;color:#717171;border:1px solid #d6d6d6;border-radius:5px;}
.idpw_sw label{position:absolute;top:0;left:5%;height:53px;line-height:53px;font-family:'Roboto','NotoKrR',sans-serif;font-style:italic;font-weight:400;font-size:16px;color:#717171;}
.idpw_sw .btn_input,
.idpw_sw a.btn_input{display:block;margin-top:30px;padding:0;width:100%;font-family:'Roboto','NotoKrB',sans-serif;font-weight:700;font-size:19px;color:#fff;background:#0e96ff;border-color:#0e96ff;text-align:center;}

/*** 아이디비밀번호찾기 결과 ***/
.idpw_sw.sw_result{margin:0 auto;padding:65px;width:395px;text-align:center;background:url(/nanum/site/builder/skin/public/img/common/idpw_sicon2.gif) no-repeat center top 105px;border:1px solid #c0c5cd;border-radius:15px;}
.idpw_sw.sw_result .tit{margin:185px 0 35px; font-size:30px;}
.idpw_sw.sw_result .txt{margin-bottom:50px;font-family:'Roboto','NotoKrM',sans-serif;font-weight:500;font-size:16px;line-height:29px;color:#606060;}

/*** 회원서비스 > 이용약관 ***/
.form_argree{height:208px;border:1px solid #dfdfdf;background:#fff;padding:20px;overflow-y:scroll;}
.form_argree h5,
.form_argree h6{margin-left:0}
.form_argree p,
.form_argree ul{margin:0 15px;font-size:14px;}
.form_argree ul li{font-size:14px;}

/*** 회원탈퇴 ***/
.drop_out{width:500px;padding:160px 50px 50px 50px;margin:0 auto;text-align:center;border:1px solid #dfdfdf;background:url(/nanum/site/builder/skin/common/img/drop.gif) no-repeat center 50px;}
.drop_out .btxt{margin-bottom:12px;font-weight:bold;font-size:25px;color:#222;}
.drop_out .stxt{}
.drop_out .btn{width:80%;padding-top:25px;margin:25px auto 0 auto;}
.drop_out .btn a{background:#555;}



/********************태블릿********************/
@media all and (max-width:1024px){
	
/*** 모바일회원증 ***/
.mcardw dl dt{font-size:20px;}
.mcardw dl dd {font-size:16px;}
.mcardw .mgray_box {padding:20px;}
.mcardw .mgray_box li {font-size:13px; word-break:keep-all; line-height:1.5;}
	
/*** 로그인 ***/
.login_w .ltop_btn {font-size:16px;}
.login_w .tit{margin-bottom:30px; font-size:30px; line-height:1.4; }
.login_w .stxt {font-size:14px;}
.login_w li.idpw_sgo a {font-size:14px;}
.login_w input.btn_input {font-size:14px;}
	
	
/*** 회원가입&본인인증 공통박스 ***/
.member_wrap .title {font-size:30px;}
.memberbox{margin-top:40px;}
.memberbox .box{padding: 40px 20px 30px;background-position:top 35px right 20px;background-size: 40px;}
.memberbox .box .tit{font-size:2.2rem;}
.memberbox .box .btn{margin-top:35px;}


/*** 본인인증 ***/
.memberbox.ipin .box{min-height:430px;}
.memberbox.ipin .box .con{padding-top:30px; }
.memberbox.ipin .box .btn{bottom:30px;}

/*** 아이디 및 비밀번호 찾기 ***/
.idpw_sw .stxt{font-size:14px;}
.idpw_sw .tit {font-size:30px; line-height:1.4;}
.idpw_sw input{font-size:14px;}
.idpw_sw label{font-size:14px}
.idpw_sw a.btn_input{font-size:16px;}

/*** 아이디비밀번호찾기 결과 ***/
.idpw_sw.sw_result .tit{font-size:28px;}
.idpw_sw.sw_result .txt{font-size:14px; line-height:1.6;}

}


/********************모바일********************/
@media all and (max-width:767px){


/*** 모바일회원증 ***/
.mcardw_line {padding-top:40px;}
.mcardw {width:70%; margin:0 auto; padding-top:30px;}
.mcardw .hatch {max-width:80px; margin:0 auto;}
.mcardw .barcode_w {font-size:0; line-height:0; max-width:180px; margin:0 auto;}
.mcardw .barcode_w img {width:100%;}
.mcardw dl {margin:20px 0 25px;}
.mcardw dl dt{font-size:18px;}
.mcardw dl dd {font-size:15px;}
.mcardw .btn_wrap a {line-height:35px; font-size:13px;}
.mcardw .mgray_box {margin-top:30px; padding:20px;}
.mcardw .mgray_box li {font-size:13px; word-break:keep-all; line-height:1.5;}

/*** 모바일에서 본인인증이 안될경우 [해결방법] 안내문구 ***/
.cash_box{display:block;margin-bottom:20px;background:#fff;padding:20px;border:1px solid #ccc;background:#f9f9f9;}
.cash_box p{padding-left:20px;font-size:15px;font-family:'NotoKrR', sans-serif;color:#555;letter-spacing:-0.05emb;word-break:keep-all;background:url(/nanum/site/builder/skin/common/img/noti_icon_red.gif) no-repeat left 3px;}
.cash_box p a{cursor:pointer;}

/*** 모바일에서 본인인증이 안될경우 [해결방법] 팝업 ***/
body{margin:0;}
.cash_delete_wrap{display:inline-block;}
.cash_delete_wrap .tab_wrap{position:fixed;top:0;z-index:9;display:inline-block;width:100%;background:#5e637c; padding:0; margin:0;}
.cash_delete_wrap .tab_wrap li{float:left;width:25%;text-align:center;border-left:1px solid #b0b0b2;box-sizing:border-box; list-style:none; }
.cash_delete_wrap .tab_wrap li:first-child{border-left:0;}
.cash_delete_wrap .tab_wrap li a{display:block;height:40px;line-height:40px;font-size:14px;font-family:'NotoKrM', sans-serif;color:#fff;letter-spacing:-0.05em; text-decoration:none;}
.cash_delete_wrap .box{margin-top:20px;}
.cash_delete_wrap .box img{max-width:100%;min-width:320px;margin-top:20px;}


/*** 로그인 ***/
.login_w {width:95%; box-sizing:border-box; margin:0 auto; padding:0 30px 50px;}
.login_w .ltop_btn {font-size:15px;}
.login_w .tit{font-size:26px; }
.login_w .stxt {font-size:13px; margin-bottom:10px;}

.login_w .login_box input,
.login_w input.btn_input{height:40px;line-height:40px;font-size:14px;}
.login_w .login_box label{height:40px;line-height:43px;font-size:14px;}
.login_w input.btn_input{margin-top:20px;}
.login_w .lcheck_box li .login_notice {top:100px;}
.login_w li.idpw_sgo{margin-top:10px;}


/*** 회원가입&본인인증 공통박스 ***/
.member_wrap .title {font-size:26px;}
.member_wrap .desc {padding:20px 30px 50px 30px;}

.memberbox{margin-top:20px;flex-wrap:wrap;}
.memberbox .box{padding: 20px 15px 15px;flex-grow:0;margin-top:2%;width:49%;background-position: top 16px right 15px;background-size: 30px}
.memberbox .box > div h3.tit{font-size:2rem;}
.memberbox .box .btn{margin-top:25px;height:36px;line-height:34px;font-size: 1.5rem;}

/*** 버튼정의 ***/
.ndls_btn,
.cancel_btn{margin:0 2px;padding:10px 20px;font-size:14px;}

/*** 아이디 및 비밀번호 찾기 ***/
.idpw_sw{width:95%; box-sizing:border-box; margin:0 auto; padding:0 30px 50px; background-size:75px;}
.idpw_sw .stxt{font-size:13px; margin-top:140px; }
.idpw_sw .tit{margin:10px 26px 26px 26px; font-size:26px;}

.idpw_sw input{ width:100%; height:40px; line-height:40px; font-size:14px; box-sizing:border-box;}
.idpw_sw label {height:40px;line-height:40px; font-size:14px; }
.idpw_sw a.btn_input{font-size:14px; }


/*** 아이디비밀번호찾기 결과 ***/
.idpw_sw.sw_result {width:100%; padding:30px; background-size:70px; background-position:50% 50px;}
.idpw_sw.sw_result .tit{font-size:20px; margin:110px 0 40px 0;}


/*** 회원탈퇴 ***/
.drop_out{width:auto;padding:150px 15px 30px 15px;}
.drop_out .btxt{font-size:20px;}

}


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

/*.memberbox .box:hover{border:1px solid #3c3c50;box-shadow:8px 10px 20px rgba(0,0,0,0.2);}
.memberbox .box:hover .btn{background:#fff;color:#3c3c50;}*/

}