@charset "utf-8";
/*** 모바일에서 본인인증이 안될경우 [해결방법] 안내문구 ***/
.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;}
.mcardw .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:600;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;padding:0 10px;margin:0 2px;font-size:15px;line-height:40px;color:#222;border:1px solid #ddd;border-radius:4px;}
.mcardw .btn_wrap a:hover{color:#fff;background:#154064;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);}		
}


/*** 로그인 ***/
.login_w{position:relative;padding:0 65px 60px;margin:0 auto;width:395px;text-align:center;border:1px solid #c0c5cd;border-radius:20px;overflow:hidden;}
.login_w .ltop_btn{position:absolute;top:0;right:0;display:block;width:50%;height:60px;line-height:60px;font-size:18px;color:#686868;background:#f3f3f3;}
.login_w li:first-child .ltop_btn{left:0;}
.login_w .on .ltop_btn{font-weight:600;color:#0074ce;background:#fff;}
.login_w .stxt{display:block;margin:110px 0 18px;font-size:15px;line-height:1;color:#777;}
.login_w .tit{margin-bottom:35px;font-size:32px;line-height:50px;color:#444;}
.login_w .tit strong{display:block;font-size:36px;color:#000;}

.login_w .login_box{position:relative;margin-bottom:5px;}
.login_w .login_box input,
.login_w input.btn_input{display:block;padding:0 7%;width:86%;height:52px;line-height:52px;font-size:15px;color:#717171;background-color:#fff;background-repeat:no-repeat;background-position:center left 17px;border:1px solid #d6d6d6;border-radius:5px;}
.login_w .login_box label{position:absolute;top:0;left:7%;height:54px;line-height:54px;font-size:15px;color:#707070;}
.login_w input.btn_input{margin-top:40px;padding:0;width:100%;height:54px;line-height:54px;font-weight:600;font-size:18px;color:#fff;background:#034b9f;border-color:#fff;text-align:center;}

.login_w.ident_w{padding:60px 65px;}
.login_w.ident_w .tit{height:160px;margin-bottom:45px;background:url(/sbcc/nanum/site/builder/skin/common/img/ipin_icon2.gif) no-repeat center bottom;}
.login_w.ident_w .numw{position:relative;padding-right:130px;}
.login_w.ident_w .numw input.btn_input{position:absolute;top:0;right:0;padding:0;width:120px;font-size:15px;background:#000;}
.login_w.ident_w .txt{font-size:14px;color:#e30000;text-align:right;}

.login_w .lcheck_box{margin-top:20px;clear:both;overflow:hidden;}
.login_w .lcheck_box li{float:right;}
.login_w .lcheck_box li:first-child{float:left;}
.login_w .lcheck_box li .cinput_w{position:relative;}
.login_w .lcheck_box li input[type="checkbox"]{-webkit-appearance:none;border:1px solid #6c6c6c !important;display:inline-block;position:absolute;left:0;top:0;margin:0;width:24px;height:24px;background:#fff;border:0;}
.login_w .lcheck_box li input[type="checkbox"]:checked{-webkit-appearance:checkbox;vertical-align:top;cursor:pointer;}
.login_w .lcheck_box li input[type="checkbox"] + label{display:inline-block;font-size:14px;color:#292929;cursor:pointer;vertical-align:top;}
.login_w .lcheck_box li input[type="checkbox"] + label span{display:inline-block;margin-right:12px;width:24px;height:24px;background:#fff;text-indent:-9999px;vertical-align:top;}
.login_w .lcheck_box li input[type="checkbox"]:checked + label span{vertical-align:top;cursor:pointer;}
.login_w li.idpw_sgo{margin-top:15px;}
.login_w li.idpw_sgo a{display:inline-block;margin:0 10px;font-size:15px;line-height:1;color:#222;text-decoration:underline;text-underline-position:under;}
.login_w .lcheck_box li .login_notice{position:absolute;top:140px;left:7%;padding:3%;width:80%;font-size:13px;line-height:20px;text-align:left;background:#fdfdfd;border:1px solid #ddd;border-radius:5px;}


/*** 아이디 및 비밀번호 찾기 ***/
.idpw_sw{margin:0 auto;padding:65px 60px;width:395px;text-align:center;background:url(/sbcc/nanum/site/builder/skin/common/img/idpw_icon.gif) no-repeat center top 50px;border:1px solid #c0c5cd;border-radius:15px;}
.idpw_sw.icon1{background-image:url(/sbcc/nanum/site/builder/skin/common/img/idpw_icon1.gif)}
.idpw_sw.icon2{background-image:url(/sbcc/nanum/site/builder/skin/common/img/idpw_icon2.gif)}
.idpw_sw .stxt{margin-top:100px;display:block;font-size:15px;color:#777;}
.idpw_sw .tit{margin:15px 0 40px;font-size:32px;line-height:50px;color:#444;}
.idpw_sw .tit strong{display:block;font-size:36px;color:#000;}

.drop_sw{margin:0 auto;padding:65px 30px;width:455px;text-align:center;background:url(/sbcc/nanum/site/builder/skin/common/img/drop_icon.gif) no-repeat center top 50px;border:1px solid #c0c5cd;border-radius:15px;}
.drop_sw .tit{margin:80px 0 30px;font-size:28px;line-height:50px;color:#000;}
.drop_sw ul.list{padding:40px 30px 20px;text-align:left;border-top:1px dashed #ccc;}

.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-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-style:italic;font-size:16px;color:#717171;}
.idpw_sw .btn_input,
.idpw_sw a.btn_input{display:block;margin-top:30px;padding:0;width:100%;font-weight:600;font-size:18px;color:#fff;background:#034b9f;border-color:#fff;text-align:center;}

/*** 아이디비밀번호찾기 결과 ***/
.idpw_sw.sw_result{margin:0 auto;padding:65px;width:395px;text-align:center;background:url(/sbcc/nanum/site/builder/skin/common/img/idpw_icon.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-weight:500;font-size:16px;line-height:29px;color:#606060;}


/*** 회원가입&본인인증 공통박스 ***/
.member_wrap .title{font-size:38px;color:#000;text-align:center;line-height:1;padding-bottom:50px;}
.member_wrap .title strong{color:#216abe;}
.member_wrap .desc{text-align:center;padding:0 80px 70px;}

.memberbox{display:inline-block;width:102%;margin-left:-2%;}
.memberbox .box{position:relative;float:left;width:39.5%;margin-left:2%;padding:50px 4%;min-height:400px;border:1px solid #dfdfdf;border-radius:20px;}
.memberbox .box .tit{height:200px;border-bottom:1px dashed #ccc;font-size:28px;color:#222;text-align:center;background-repeat:no-repeat;background-position:center 60px;}
.memberbox .box .tit.icon1{background-image:url(/sbcc/nanum/site/builder/skin/common/img/join_icon1.gif);}
.memberbox .box .tit.icon2{background-image:url(/sbcc/nanum/site/builder/skin/common/img/join_icon2.gif);}
.memberbox .box .tit.icon3{background-image:url(/sbcc/nanum/site/builder/skin/common/img/ipin_icon1.gif);}
.memberbox .box .tit.icon4{background-image:url(/sbcc/nanum/site/builder/skin/common/img/ipin_icon2.gif);}
.memberbox .box .con{padding-top:30px; text-align:center;}
.memberbox .box .btn{position:absolute;bottom:40px;left:0;width:100%;text-align:center;}
.memberbox .box .btn .con_btn {width:282px;line-height:51px;padding:0;background:#222;}


/*** 회원가입동의 ****/
.join_agree{width:100%;}
.join_agree .area{width:100%;margin-bottom:50px;}
.join_agree .area h3.tit{float:left;}
.join_agree .area .check{float:right;padding-top:10px;}
.join_agree .area .check input{vertical-align:middle;}
.join_agree .area .check label{vertical-align:middle;}
.join_agree .area .txt_box{clear:both;width:100%;height:140px;padding:20px;border:1px solid #dfdfdf;border-radius:10px;overflow-y:scroll;font-size:13px;color:#666;line-height:18px;box-sizing:border-box;}
.join_agree .allagree{padding-bottom:40px;border-bottom:1px dashed #ccc;text-align:center;font-size:17px;color:#222;font-weight:500;}
.join_agree .allagree label{color:#222;}
.join_agree .btn_w{padding:40px 0;}

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


/*** 회원서비스 > 이용약관 ***/
.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(/sbcc/nanum/site/builder/skin/common/img/drop.gif) no-repeat center 50px;}
.drop_out .btxt{margin-bottom:12px;font-weight:600;font-size:25px;color:#222;}
.drop_out .btn{width:80%;padding-top:25px;margin:25px auto 0 auto;}
.drop_out .btn a{background:#555;}



/******************************1023******************************/
@media all and (max-width:1023px){
	
/*** 모바일회원증 ***/
.mcardw dl dt{font-size:20px;}
.mcardw dl dd {font-size:16px;}
.mcardw .mgray_box {padding:20px;}
.mcardw .mgray_box li {font-size:13px;line-height:1.5;}
	
/*** 로그인 ***/
.login_w .ltop_btn {font-size:16px;}
.login_w .tit{margin-bottom:25px;font-size:28px;line-height:1.4;}
.login_w.ident_w .tit{margin-bottom:40px;}
.login_w .tit strong{font-size:32px;}
.login_w .stxt {font-size:14px;}
.login_w li.idpw_sgo a {font-size:16px;}
.login_w input.btn_input {font-size:16px;}
	
	
/*** 회원가입&본인인증 공통박스 ***/
.member_wrap .title{padding:40px 0 30px;font-size:30px;}
.member_wrap .desc{padding:0 100px 50px;}
.memberbox .box{padding:40px 4%;min-height:350px;}
.memberbox .box .tit{height:155px;font-size:24px;background-position:center 40px;background-size:80px;}
.memberbox .box .btn .con_btn {width:80%;margin:0;}

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

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

.drop_sw .tit{margin-bottom:20px;font-size:24px;}
.drop_sw ul.list{padding:30px 30px 10px;}

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



}



/******************************768******************************/
@media all and (max-width:768px){

.btn_w{padding-top:25px;}

/*** 모바일회원증 ***/
.mcardw_line {padding-top:40px;}
.mcardw {width: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;padding:15px;border:1px solid #ccc;background:#f9f9f9;}
.cash_box p{padding-left:20px;font-size:14px;color:#555;background:url(/sbcc/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;}
.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-weight:500;color:#fff;}
.cash_delete_wrap .box{margin-top:20px;}
.cash_delete_wrap .box img{max-width:100%;min-width:320px;margin-top:20px;}


/*** 로그인 ***/
.login_w{width:auto;margin:0 auto;padding:0 15px 30px;box-sizing:border-box;}
.login_w.ident_w{padding:30px 15px;}
.login_w .ltop_btn{height:50px;line-height:50px;font-size:15px;}
.login_w.ident_w .numw{padding-right:90px;}
.login_w .tit{margin-bottom:15px;font-size:22px;}
.login_w .tit strong{font-size:26px;}
.login_w.ident_w .tit{height:120px;margin-bottom:30px;background-size:70px;}
.login_w .stxt {margin:85px 0 15px;font-size:13px;line-height:18px;}
.login_w.ident_w .numw input.btn_input{width:85px;font-size:13px;}
.login_w.ident_w .txt{margin-top:-5px;font-size:13px;}

.login_w .login_box input,
.login_w input.btn_input{width:100%;padding:0 15px;height:44px;line-height:44px;font-size:14px;box-sizing:border-box;}
.login_w .login_box label{left:15px;height:44px;line-height:45px;font-size:14px;}
.login_w input.btn_input{margin-top:20px;}
.login_w .lcheck_box li .login_notice {top:100px;}
.login_w .lcheck_box li input[type="checkbox"],
.login_w .lcheck_box li input[type="checkbox"] + label span{width:20px;height:20px;}
.login_w .lcheck_box li input[type="checkbox"] + label{font-size:13px;line-height:20px;}

.login_w li.idpw_sgo a{font-size:14px;}


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

.memberbox .box {padding:30px;width:48%;min-height:430px;box-sizing:border-box;}
.memberbox .box:hover {background-size:20px;}
.memberbox .box .tit{height:140px;font-size:22px;background-size:70px;background-position:center 37px;}
.memberbox .box .btn .con_btn{line-height:45px;}


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

/*** 아이디 및 비밀번호 찾기 ***/
.idpw_sw{width:auto; box-sizing:border-box; margin:0 auto; padding:0 15px 30px;background-position:center top 25px;background-size:60px;}
.idpw_sw .stxt{font-size:13px; margin-top:100px;}
.idpw_sw .tit{margin:10px 0 25px; font-size:22px;}
.idpw_sw .tit strong{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 .btn_input, .idpw_sw a.btn_input{height:44px;line-height:44px;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_sw{width:auto; box-sizing:border-box; margin:0 auto; padding:0 15px 30px;background-position:center top 25px;background-size:60px;}
.drop_sw .tit{margin:85px 0 15px;font-size:20px;}
.drop_sw ul.list{padding:30px 15px 0px;}
.drop_sw input{ width:100%; height:40px; line-height:40px; font-size:14px; box-sizing:border-box;}
.drop_sw label {height:40px;line-height:40px; font-size:14px; }
.drop_sw a.btn_input{font-size:14px; }
.drop_sw .btn_input, .drop_sw a.btn_input{height:44px;line-height:44px;font-size:14px;}


}


/******************************480******************************/
@media all and (max-width:480px){
	

.memberbox{display:block;margin:0;width:auto;}
.memberbox .box{float:none;margin:10px 0;width:auto;min-height:auto !important;}
.memberbox .box .btn{position:static;margin-top:30px;}
.memberbox .box .btn .con_btn{width:100%;}
	
	
}

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

.memberbox .box:hover{border:1px solid #034b9f;box-shadow:8px 10px 20px rgba(0,0,0,0.2);-webkit-box-shadow:8px 10px 20px rgba(0,0,0,0.2);}
.memberbox .box:hover .con_btn {background:#034b9f;}

}