@charset "utf-8";

/*.container_m {background:#eaeef3;height:100%}
#header {height:130px;text-align:center;border-bottom:1px solid #004ea2;background:#fff;z-index:10}
#header .logo {display:inline-block;width:225px;height:33px;text-indent:-99999px;background:url('/groups/library/images/comm/h_logo.jpg') no-repeat;background-size:contain}
#footer {clear:both;text-align:center;padding:30px 0;z-index:11}
#footer small {font-size:13px}
#footer small a {text-decoration:none}
#content {max-width:1200px;margin:0 auto}*/

/* 로그인 */
.login_area {border:1px solid #dbdbdb;border-radius:5px;background:#fff}
.inputbox {display:block;overflow:hidden;position:relative;margin-bottom:10px;font-size:14px}
.inputbox .int {width:100%;padding:0 16px;color:#222}
.inputbox .lbl {position:absolute;left:16px;top:0;color:#767676;line-height:40px}
.inputbox .int:focus {border:1px solid #007bc8;background:#fff }
/*.inputbox .int:focus+.lbl {display:none}*/
.inputbox .lbl{display:none}
/*.inputbox .btn_del {position:absolute;top:10px;right:10px;display:block;width:20px;height:20px;background:#ccc url('/groups/library/images/comm/btn_icon/close.png') no-repeat 50% 50%;border-radius:20px}*/
.login_chk {margin:20px 0}

.btn_login {display:block;width:100%;height:50px;line-height:50px;font-size:18px;font-weight:600;text-align:center;color:#fff;background:#60BB46;}
.btn_join {display:block;width:100%;height:50px;line-height:50px;font-size:16px;font-weight:600;text-align:center;color:#fff;background:#f7702e;}
.btn_ok {display:block;width:100%;height:50px;line-height:50px;font-size:16px;font-weight:600;text-align:center;color:#fff;background:#f7702e}

.login_help {overflow:hidden;text-align:center;margin-top:30px}
.login_help a {display:inline-block;position:relative;padding:10px 9px 10px 9px;color:#454545;font-size:14px;}
.login_help a:before {margin-top:1px;display:block;width:1px;height:12px;position:absolute;left:-6px;top:10px;content:'';border-right:1px solid #ccc }
.login_help a:first-child:before {display:none }

@media all and (max-width:380px){
    .login_help {margin-top:25px;}
    .login_help a {font-size: 13px;padding: 10px 4px;}
    .login_help a:before {left: -3px;}
}
@media all and (max-width:330px){
    .login_help a {font-size: 12px;}
}

/* 회원가입 */
.step {overflow:hidden;margin-bottom:30px;padding:20px;background:url("/groups/library/images/comm/bg/bg_box4.gif");border:1px solid #dbdbdb;border-radius:5px }
.step li {float:left;width:20%;position:relative;color:#767676;line-height:1.4; letter-spacing:0}
.step li span {display:block}
.step li .st:after {display:block;content:"";height:8px;margin:8px 0;background:#666;border-right:1px solid #fff }
.step li .ko {font-size:14px}
.step li .en {font-size:12px;font-family: 'NanumMyeongjoBold';}
.step li.on {color:#000 }
.step li.on .st:before {display:inline;content:"ON";padding:0 7px;background:#f7702e;color:#fff;font-size:12px;position:absolute;left:55px;top:0}
.step li.on .st:after {background:#f7702e }
@media all and (max-width:480px){
.step {padding:10px}
.step li {width:18%;margin-bottom:10px}
.step li.on {width:28%}
.step li .ko, .step li .en {display:none}
.step li.on span {display:block}
}

/* 회원가입유형선택 */
.member_box {overflow:hidden;margin-bottom:50px}
.member_box .mbox {overflow:hidden;padding:20px 20px 25px 220px;margin-bottom:20px;border:1px solid #dbdbdb;border-radius:5px}
.member_box .mbox a {text-decoration:none;font-size:16px;line-height:2.0;font-weight:600}
.member_box .mbox a span {font-size:13px;font-weight:400;color:#777;font-family: 'NanumMyeongjoBold';}
.member_box .mbox p {margin-bottom:0}
.member_box .mbox .ko {margin-top:10px;color:#555;line-height:1.4}
.member_box .mbox .en {margin-top:5px;font-size:13px;line-height:1.2;font-family: 'NanumMyeongjoBold';}
.member_box .mbox.me0 {background:url("/groups/library/images/member/user-00.png") no-repeat}
.member_box .mbox.me1 {background:url("/groups/library/images/member/user-01.png") no-repeat}
.member_box .mbox.me2 {background:url("/groups/library/images/member/user-02.png") no-repeat}
.member_box .mbox.me3 {background:url("/groups/library/images/member/user-03.png") no-repeat}
.member_box .mbox.me4 {background:url("/groups/library/images/member/user-04.png") no-repeat}
@media all and (max-width:480px){
.member_box .mbox {padding:20px 20px}
.member_box .mbox a span {display:block}
.member_box .mbox.me0, .member_box .mbox.me1, .member_box .mbox.me2, .member_box .mbox.me3, .member_box .mbox.me4 {background-size:100px 64px;background-position:100% 10px}
}

/* 약관동의 */
.join_box {border:1px solid #ccc;background:#fff }
.join_box + .join_box {margin-top:10px }
.join_box h3 {padding:10px 0 10px 20px;font-size:18px;color:#333;border-bottom:1px solid #dbdbdb;background:#f4f4f4 }
.join_box .div_scroll {padding:10px 20px;height:190px;overflow-y:auto;overflow-x:hidden }
.join_box .div_scroll h4 {margin:10px 0 10px 0;padding-left:0;font-size:16px;color:#454545 }
.join_box .div_scroll h4::before {display:none }
.join_box .div_scroll p {margin-bottom:10px;line-height:1.5 }
.join_box .div_scroll strong {display:block;padding:5px 0;font-size:15px;color:#454545 }
.join_box .div_scroll p+h4 {margin-top:20px }
.join_box .chk_agree {margin:0;padding:10px 20px;font-size:14px;border-top:1px solid #dbdbdb;background:#fff;text-align:right }
.terms-confirm {margin-top:10px;padding:15px 0;border:1px solid #ccc;background:#fff }
.terms-confirm .chk_agree {margin:0;text-align:center }

/* 본인인증 */
.stpwrap {overflow:hidden;margin-bottom:50px}
.stpwrap div {float:left;width:49%;height:240px;padding:20px;border:1px solid #dbdbdb;border-radius:5px}
.stpwrap div:first-child {margin-right:2%}
.stpwrap .phone {background:url("/groups/library/images/member/phone.png") no-repeat 10% 20% }
.stpwrap .pin {background:url("/groups/library/images/member/ipin.png") no-repeat 10% 20% }
.stpwrap .stp_dl {padding:20px 20px 20px 100px}
.stpwrap .stp_dl dt {font-size:18px;color:#222;font-weight:600;margin-bottom:10px }
.stpwrap .stp_dl .txt {font-size:14px;color:#444;line-height:1.4;margin-bottom:20px }
@media all and (max-width:768px){
.stpwrap div {float:none;width:100%;margin-bottom:10px}
.stpwrap div:first-child {margin-right:0}
}

/* 정보입력 */
.join_area {border:1px solid #dbdbdb;border-radius:5px}
.join_area h4 {margin:0 0 20px 0;font-size:18px;color:#454545}
.join_area fieldset {margin-bottom:30px}
.box_item {overflow:hidden;position:relative}
.ipbx_id .inputbox {padding-right:140px}
.ipbx_id .id_chk {position:absolute;top:0;right:0;width:130px;font-size:14px;height:40px;line-height:38px;border:1px solid #dbdbdb;background:#dbdbdb}
.ipbx_left {display:table;width:100%;margin-bottom:10px}
.ipbx_left .inputbox {display:table-cell;width:auto}
.ipbx_left .right {display:table-cell;width:140px;padding-left:10px}
.ipbx_left .right input[type="radio"] + label {font-size:14px}
.ipbx_address .inputbox {margin-left:140px}
.ipbx_address .address_chk {position:absolute;top:0;left:0;width:130px;font-size:14px;height:40px;line-height:38px;border:1px solid #dbdbdb;background:#dbdbdb}
.ipbx_email .inputbox {float:left;width:100%;padding-right:140px}
.ipbx_email .sel_email {position:absolute;top:0;right:0}
.ipbx_email .sel_email select {min-width:130px;border:1px solid #dbdbdb}
@media all and (max-width:480px){
.ipbx_id .inputbox {padding-right:27%}
.ipbx_id .id_chk  {width:25%}
.ipbx_address .inputbox {margin-left:27%}
.ipbx_address .address_chk {width:25%}
}

/* 가입완료  */
.welcome {overflow:hidden;padding:50px 0;text-align:center}
.welcome .point {margin-bottom:30px;font-size:46px;color:#222;font-family: 'NanumMyeongjoBold';}
.welcome .title {margin-bottom:10px;font-size:18px;color:#333;font-weight:600 }
.welcome .text {font-size:14px;line-height:1.6;margin-bottom:30px }
.welcome .btn_ok {width:50%;margin:0 auto}

/* 아이디/비밀번호 찾기 */
.idpw_login {position:relative;overflow:hidden}
.idpw_login .login_box:first-child {margin-right:2%}
.login_box {float:left;width:49%;height:420px;padding:30px;border:1px solid #dbdbdb;border-radius:5px}
.login_box h4 {margin:0 0 30px 0;padding-left:0;font-size:16px;color:#454545}
.login_box h4::before {display:none }
.login_box .ma, .join_area .ma {margin-top:30px;background:#f0f3f6;padding:5px}
.login_box .ma li {font-size:13px;letter-spacing:-0.1px}
.caution {display:block;color:#f7702e;font-size:13px;letter-spacing:-0.1px;padding-left:20px;background:url("/groups/library/images/member/ico_info.png") no-repeat left 2px}	

/*.login_area, .join_area {width:600px;margin:0 auto;padding:50px 40px}*/
.login_area, .join_area {margin:0 auto;padding:50px 40px}
@media all and (max-width:768px){
.login_area, .join_area {width:95%;margin:0 auto;padding:50px 20px}
.login_box {float:none;width:100%;margin-bottom:10px}
.idpw_login .login_box:first-child {margin-right:0}
}
@media all and (max-width:480px){
.login_area, .join_area {width:95%;margin:0 auto;padding:30px 20px}
.inputbox {font-size:13px; letter-spacing:-0.5px}  
}