@charset "utf-8";

/* =====================================================
   회원 페이지 (로그인 · 회원가입 약관 · 회원가입 입력 · 가입 완료)
   포인트 색 #222664. 그누보드 기본 마크업(skin/member/basic)을 덮어쓰는 규칙
   ===================================================== */
.member .inner {width: 94rem; margin: 0 auto;}
.member .pc_in {display: inline;}
.member .mo_in {display: none;}

/* 비주얼 : 헤더(11rem) 아래로 78rem 사진 */
.member .sv {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 89rem; padding-top: 11rem; background: url(../img/member/register_sv.jpg) no-repeat center bottom / 100% 78rem; color: #fff; text-align: center;}
.member.mb_login .sv {background-image: url(../img/member/login_sv.jpg);}
.member .sv::before {content: ''; position: absolute; left: 0; right: 0; top: 11rem; bottom: 0; background: rgba(0,0,0,0.4);}
.member .sv > * {position: relative;}
.member .sv .mark {display: none;}
.member .sv .sub {font-size: 4.6rem; font-weight: 700; line-height: 9rem;}
.member .sv .tit {font-size: 7rem; font-weight: 700; line-height: 9rem;}

/* 제목 영역 */
.member .mb_head {padding-top: 15rem; text-align: center; color: #262829;}
.member .mb_head .mark {display: block; width: 7.8rem; margin: 0 auto;}
.member .mb_head .tit {margin-top: 1.7rem; font-size: 4.8rem; font-weight: 300; line-height: 6.8rem;}
.member .mb_head .desc {margin-top: 2.1rem; font-size: 2rem; font-weight: 300; line-height: 3.2rem;}

/* 본문 공통 */
.member .mb_body {padding: 6rem 0 15rem; font-size: 1.5rem; color: #333;}
.member .mb_body h1, .member .mb_body .sound_only {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; font-size: 0;}
.member .mb_body .frm_input, .member .mb_body textarea {box-sizing: border-box; box-shadow: none !important; border: 1px solid #d5d5d5; border-radius: 0.4rem; background: #fff; font-family: inherit; font-size: 1.5rem; color: #161616;}
.member .mb_body .frm_input {height: 4.8rem; padding: 0 1.4rem; background-image: none !important;}
.member .mb_body .required, .member .mb_body textarea.required {background-image: none !important;}
.member .mb_body .frm_input::placeholder {color: #9a9a9a;}
.member .mb_body .frm_input:focus, .member .mb_body textarea:focus {outline: none; border-color: #222664;}
.member .mb_body .btn_submit, .member .mb_body .btn_close, .member .mb_body .reg_btn_submit {display: inline-flex; align-items: center; justify-content: center; height: 5rem; margin: 0; padding: 0 3rem; border: 1px solid #222664; border-radius: 0.6rem; background: #222664; font-family: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; cursor: pointer; transition: background 0.2s;}
.member .mb_body .btn_submit:hover, .member .mb_body .reg_btn_submit:hover {background: #1a1e4f;}
.member .mb_body .btn_close {border-color: #bebebe; background: #fff; color: #333;}
.member .mb_body .btn_close:hover {background: #f5f5f5;}
.member .mb_body .btn_confirm {display: flex; justify-content: center; gap: 0.8rem; margin-top: 3rem;}
/* 체크박스 */
.member .mb_body .chk_box, .member .mb_body .fregister_agree {position: relative;}
.member .mb_body input[type="checkbox"] + label {display: inline-flex; align-items: center; gap: 0.8rem; padding: 0; font-size: 1.5rem; color: #333; cursor: pointer;}
.member .mb_body input[type="checkbox"] + label span {position: static; float: none; display: flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; margin: 0; border: 1px solid #bebebe; border-radius: 0.4rem; background: #fff; transition: 0.2s;}
.member .mb_body input[type="checkbox"] + label span::after {content: ''; width: 0.5rem; height: 1rem; margin-top: -0.2rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;}
.member .mb_body input[type="checkbox"]:checked + label {color: #222664;}
.member .mb_body input[type="checkbox"]:checked + label span {border-color: #222664; background: #222664;}
.member .mb_body input[type="checkbox"]:checked + label span::after {opacity: 1;}

/* 로그인 */
.member #mb_login {width: 38rem; margin: 0 auto; padding: 0; border: 0; background: none;}
.member #mb_login .mbskin_box {margin: 0; padding: 0; border: 0; background: none;}
.member #mb_login .mb_log_tit {margin: 0 0 1.6rem; padding: 0 0 1.2rem; border: 0; border-bottom: 1px solid #2a2a2a; font-size: 2rem; font-weight: 700; line-height: 1; color: #161616; text-align: center;}
.member #mb_login #login_fs {display: flex; flex-direction: column; gap: 0.8rem; margin: 0; padding: 0; border: 0;}
.member #mb_login #login_fs .frm_input {width: 100%; margin: 0; background-image: none !important;}
.member #mb_login #login_fs .btn_submit {width: 100%; height: 5.2rem; margin-top: 0.8rem; flex: none;}
.member #mb_login #login_fs .btn_join {display: flex; align-items: center; justify-content: center; width: 100%; height: 5.2rem; border: 1px solid #222664; border-radius: 0.6rem; background: #fff; font-size: 1.6rem; font-weight: 600; color: #222664; text-decoration: none; transition: 0.2s;}
.member #mb_login #login_fs .btn_join:hover {background: #222664; color: #fff;}
.member #mb_login #mb_login_notmb, .member #mb_login #mb_login_od_wr {margin-top: 4rem; padding: 2.4rem; border: 1px solid #e5e5e5; border-radius: 0.8rem;}
.member #mb_login #mb_login_notmb h2, .member #mb_login #mb_login_od_wr h2 {margin-bottom: 1.2rem; font-size: 1.8rem; font-weight: 700;}

/* 회원가입 약관 */
.member .register {width: auto; margin: 0; padding: 0; border: 0; background: none;}
.member #fregister > p {margin: 0 0 3rem; padding: 1.8rem 2.4rem; border: 0; border-radius: 0.8rem; background: #f5f5f5; font-size: 1.5rem; line-height: 2.4rem; color: #222664; height: auto}
.member #fregister > p::before {display: none;}
.member #fregister > p .fa {margin-right: 0.6rem;}
.member #fregister section {margin: 0 0 3rem; padding: 0; border: 0; background: none;}
.member #fregister section h2 {margin: 0 0 1.2rem; padding: 0; border: 0; font-size: 1.8rem; font-weight: 700; line-height: 1; color: #161616;}
.member #fregister textarea {display: block; width: 100%; height: 18rem; padding: 1.6rem; font-size: 1.4rem; line-height: 1.7; color: #555; resize: vertical;}
.member #fregister table {width: 100%; border-collapse: collapse; border-top: 1px solid #2a2a2a; font-size: 1.4rem;}
.member #fregister table caption {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); font-size: 0;}
.member #fregister th, .member #fregister td {padding: 1.4rem 1.6rem; border: 0; border-bottom: 1px solid #e0e0e0; line-height: 1.6; text-align: left; vertical-align: middle;}
.member #fregister th {background: #f5f5f5; font-weight: 600; color: #161616;}
.member #fregister .fregister_agree {position: static; display: flex; justify-content: flex-end; margin: 1.2rem 0 0; padding: 0; border: 0; text-align: right;}
.member #fregister .fregister_agree label b {font-size: 1.5rem; font-weight: 500; line-height: 2rem;}
.member #fregister #fregister_chkall {margin: 3.6rem 0 0; padding: 2rem; border: 1px solid #222664; border-radius: 0.8rem; background: #fff; text-align: center; justify-content: center;}
.member #fregister #fregister_chkall label {font-size: 1.6rem; font-weight: 700; color: #222664;}
.member #fregister #fregister_chkall label span {width: 2.2rem; height: 2.2rem;}

/* 회원가입 입력 */
.member #register_form {font-size: 1.5rem;}
.member #register_form .register_form_inner {margin: 0 0 2.4rem; padding: 3rem 3.2rem 1.6rem; border: 1px solid #e5e5e5; border-radius: 1.2rem; background: #fff;}
.member #register_form h2 {margin: 0 0 2rem; padding: 0 0 1.4rem; border: 0; border-bottom: 1px solid #2a2a2a; font-size: 1.8rem; font-weight: 700; line-height: 1; color: #161616;}
.member #register_form ul {margin: 0; padding: 0; list-style: none;}
.member #register_form ul::after {content: ''; display: block; clear: both;}
.member #register_form li {position: relative; margin: 0 0 1.6rem; padding: 0; border: 0;}
.member #register_form li.half_input {float: left; width: 49%;}
.member #register_form li.margin_input {margin-right: 2%;}
.member #register_form label {display: block; margin-bottom: 0.6rem; font-size: 1.4rem; font-weight: 600; color: #161616;}
.member #register_form label.inline, .member #register_form .chk_box label {display: inline-flex; margin: 0; font-weight: 500;}
.member #register_form .frm_input {width: 100%;}
.member #register_form .frm_input.readonly {background: #f5f5f5; color: #777;}
.member #register_form textarea {width: 100%; height: 10rem; padding: 1.2rem;}
.member #register_form .tooltip_icon {margin-left: 0.4rem; padding: 0; border: 0; background: none; font-size: 1.4rem; color: #9a9a9a; cursor: pointer; vertical-align: middle;}
.member #register_form .tooltip {display: none; position: absolute; left: 0; top: 100%; z-index: 10; max-width: 100%; margin-top: 0.4rem; padding: 1rem 1.2rem; border-radius: 0.6rem; background: #333; font-size: 1.3rem; font-weight: 400; line-height: 1.5; color: #fff;}
.member #register_form label {position: relative;}
.member #register_form .tooltip_icon:hover + .tooltip, .member #register_form .tooltip_icon:focus + .tooltip {display: block;}
.member #register_form #msg_mb_id, .member #register_form .cert_desc, .member #register_form .frm_info {display: block; margin-top: 0.6rem; font-size: 1.3rem; color: #777;}
.member #register_form .btn_frmline, .member #register_form .win_sa_cert {display: inline-flex; align-items: center; height: 4rem; margin: 0 0 0.8rem; padding: 0 1.6rem; border: 1px solid #222664; border-radius: 0.4rem; background: #fff; font-family: inherit; font-size: 1.4rem; font-weight: 500; line-height: 1; color: #222664; cursor: pointer; vertical-align: middle;}
.member #register_form .btn_frmline:hover {background: #222664; color: #fff;}
.member #register_form #msg_certify {margin-top: 0.8rem; font-size: 1.4rem; color: #222664;}
.member #register_form .frm_address {margin-top: 0.8rem;}
.member #register_form #reg_mb_zip {width: 16rem; margin-right: 0.6rem;}
.member #register_form input[type="file"] {font-size: 1.4rem;}
.member #register_form .chk_box {display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.8rem;}
.member #register_form .chk_box .tooltip_icon {margin: 0;}
.member #register_form .is_captcha_use {margin-top: 2rem;}
.member #register_form .is_captcha_use #captcha {display: inline-block;}
.member #register_form .reg_mb_img_file img {display: block; margin: 0.8rem 0; max-width: 12rem;}

/* 정보수정 전 비밀번호 확인 */
.member #mb_confirm {width: 38rem; margin: 0 auto; padding: 0; border: 0; background: none;}
.member #mb_confirm > p {margin: 0 0 2rem; padding: 1.8rem 2rem; border-radius: 0.8rem; background: #f5f5f5; font-size: 1.4rem; line-height: 2.2rem; color: #555; text-align: center;}
.member #mb_confirm > p strong {display: block; margin-bottom: 0.4rem; font-size: 1.6rem; color: #222664;}
.member #mb_confirm fieldset {display: flex; flex-direction: column; gap: 0.8rem; margin: 0; padding: 0; border: 0;}
.member #mb_confirm .confirm_id {font-size: 1.4rem; font-weight: 600; color: #161616;}
.member #mb_confirm #mb_confirm_id {display: flex; align-items: center; height: 4.8rem; margin-bottom: 0.4rem; padding: 0 1.4rem; border: 1px solid #e5e5e5; border-radius: 0.4rem; background: #f5f5f5; font-size: 1.5rem; color: #777;}
.member #mb_confirm .frm_input {width: 100%; margin: 0;}
.member #mb_confirm .btn_submit {width: 100%; height: 5.2rem; margin-top: 0.8rem;}

/* 비밀글 · 수정 · 삭제 비밀번호 확인 */
.member #pw_confirm {width: 38rem; margin: 0 auto; padding: 0; border: 0; background: none;}
.member #pw_confirm > p {margin: 0 0 2rem; padding: 1.8rem 2rem; border-radius: 0.8rem; background: #f5f5f5; font-size: 1.4rem; line-height: 2.2rem; color: #555; text-align: center;}
.member #pw_confirm > p strong {display: block; margin-bottom: 0.4rem; font-size: 1.6rem; color: #222664;}
.member #pw_confirm > p b {font-weight: 700; color: #222664;}
.member #pw_confirm fieldset {display: flex; flex-direction: column; gap: 0.8rem; margin: 0; padding: 0; border: 0;}
.member #pw_confirm .frm_input {width: 100%; margin: 0; text-align: center; letter-spacing: 0.2rem;}
.member #pw_confirm .btn_submit {width: 100%; height: 5.2rem; margin-top: 0.4rem;}
.member #pw_confirm .btn_back {display: flex; align-items: center; justify-content: center; width: 100%; height: 5.2rem; border: 1px solid #bebebe; border-radius: 0.6rem; background: #fff; font-size: 1.6rem; font-weight: 600; color: #333; text-decoration: none;}
.member #pw_confirm .btn_back:hover {background: #f5f5f5;}

/* 가입 완료 */
.member #reg_result {max-width: 70rem; margin: 0 auto; padding: 4rem 3rem; border: 1px solid #e5e5e5; border-radius: 1.2rem; text-align: center; font-size: 1.5rem; line-height: 2.6rem; color: #555;}
.member #reg_result .reg_result_p {margin-bottom: 2.4rem; font-size: 2rem; line-height: 3.2rem; color: #161616;}
.member #reg_result .reg_result_p .fa {display: block; margin-bottom: 1rem; font-size: 4rem; color: #222664;}
.member #reg_result .reg_result_p strong {color: #222664;}
.member #reg_result .result_txt {margin: 1.2rem 0;}
.member #reg_result #result_email {margin: 1.6rem auto; padding: 1.6rem; border-radius: 0.8rem; background: #f5f5f5;}
.member #reg_result #result_email span {display: inline-block; width: 10rem; color: #777;}
.member .btn_confirm_reg {margin-top: 3rem; text-align: center;}

@media all and (max-width: 880px){
    .member .inner {width: auto; margin: 0 2.75rem;}
    .member .pc_in {display: none;}
    .member .mo_in {display: inline;}

    .member .sv {height: 100vh; padding-top: 0; background-position: center; background-size: cover;}
    .member .sv::before {top: 0;}
    .member .sv .mark {display: block; width: 7.8rem; margin-bottom: 0.8rem;}
    .member .sv .sub {font-size: 3rem; line-height: 5rem; color: #f6f6f6; text-shadow: 0 0 1rem #000;}
    .member .sv .tit {display: none;}

    .member .mb_head {padding-top: 14rem;}
    .member .mb_head .tit {margin-top: 0.9rem; font-size: 4rem; line-height: 6rem;}
    .member .mb_head .desc {margin-top: 0.8rem; font-size: 1.6rem; line-height: 2.6rem;}

    .member .mb_body {padding: 5rem 0 10rem;}
    .member #mb_login {width: auto;}
    .member #register_form .register_form_inner {padding: 2.4rem 2rem 1rem;}
    .member #register_form li.half_input {float: none; width: auto;}
    .member #register_form li.margin_input {margin-right: 0;}
    .member #fregister th, .member #fregister td {padding: 1rem 0.8rem; font-size: 1.3rem;}
    .member .mb_body .btn_submit, .member .mb_body .btn_close, .member .mb_body .reg_btn_submit {flex: 1; padding: 0 1.6rem;}
    .member #reg_result {padding: 3rem 2rem;}
}