@charset "utf-8";

/*========================================================================
로그인
========================================================================*/
.member_wrap { width:460px; margin:38px auto 0; }
.member_cont { padding:0; border:0; }

/* 타이틀 */
.body-login .member_tit { text-align:center; }
.body-login .member_tit h2 { margin:0 0 15px; }
.body-login .member_tit p { margin:16px 0 30px; color:#666; font-size:18px; line-height:1.3; }

/* 로그인 & 비회원주문조회 영역 */
.body-login .member_cont > form#formOrderLogin { display:none; }
.body-login .member_cont > form#formLogin { display:block; }

/* 로그인 & 비회원주문조회 탭버튼 */
.member-tab ul { display:flex; padding:3px 4px; background:#F4F4F4; border-radius:999px; box-sizing:border-box; }
.member-tab ul li { width:50%; }
.member-tab ul li a { display:flex; justify-content:center; align-items:center; width:100%; height:52px; color:#999; font-size:18px; font-weight:600; }
.member-tab ul li a.on { color:#2E2E2E; background:#fff; border-radius:999px; }

/* 로그인 항목 */
.member_cont .member_login_box,
.member_cont .nonmember_order_box .order_input_sec { position:relative; padding:0 0 80px; margin:0 0 20px; }
.member_cont .member_login_box .login_input_sec > div,
.member_cont .nonmember_order_box .order_input_sec > div { float:none; }
.member_cont .member_login_box .login_input_sec input,
.member_cont .nonmember_order_box .order_input_sec input { width:100%; height:51px; padding:18px 0; margin:12px 0 0; color:#666; font-size:14px; font-weight:400; border:0; border-bottom:1px solid #D1D1D1; box-sizing:border-box; }
.member_cont .member_login_box .login_input_sec input::placeholder { color:#666; }
/* 로그인 버튼 */
.member_cont .member_login_box .login_input_sec :is(.member_login_order_btn, .member_login_order_btn:hover),
.member_cont .nonmember_order_box .order_input_sec :is(button, button:hover) { position:absolute; bottom:0; left:0; display:flex; justify-content:center; align-items:center; width:100%; height:60px; color:#fff; font-size:18px; font-weight:600; background:var(--point-color); border-radius:5px; }

/* 아이디 저장 */
.member_cont .member_login_box .id_chk { padding:0; margin:20px 0 0; }
.member_cont .member_login_box .id_chk label { color:#2E2E2E; font-size:14px; font-weight:400; }
.member_cont .member_login_box .id_chk span { vertical-align:top; }

/* 아이디 , 비번 찾기 버튼 */
.member_cont .btn_login_box { margin:0; padding:0; border-top:0; }
.member_cont .btn_login_box ul { display:flex; justify-content:center; }
.member_cont .btn_login_box li { float:none; }
.member_cont .btn_login_box li:not(:first-child) { position:relative; margin:0 0 0 13px; padding:0 0 0 13px; }
.member_cont .btn_login_box li:not(:first-child):before { content:""; position:absolute; top:3px; left:0; height:13px; border-left:1px solid #D1D1D1; }
.member_cont .btn_login_box li button { width:auto; height:auto; color:#2E2E2E; font-size:14px; font-weight:400; border:0; background:none; }

/* SNS 로그인 버튼 공통 */
.sns-login-btn a { display:flex; justify-content:center; align-items:center; width:100%; height:60px; font-size:18px; font-weight:600; border-radius:5px; }
.sns-login-btn a img { display:none; }
.sns-login-btn a::after { display:flex; }
/* 카카오 버튼 */
.kakao-login { margin-bottom:40px; }
.kakao-login a { color:#000; background:#FDE500; }
.kakao-login a::after { content:"카카오 로그인/회원가입"; }
/* 네이버 버튼 */
.naver-login { margin-top:40px; }
.naver-login a { color:#fff; background:#1DC800; }
.naver-login a::after { content:"네이버 로그인"; }

/* 비회원주문하기 버튼 */
.member_cont .nonmember_join_box .btn_member_black { height:60px; color:#fff; font-size:18px; font-weight:600; background:var(--point-color); border-radius:5px; }


/*========================================================================
약관동의
========================================================================*/
.join_agreement_wrap .member_cont { width:460px; margin:38px auto 0; }
.join_agreement_wrap .join_agreement_cont { padding:0; border-top:0; border-bottom:1px solid #E9E9E9; }

/* 타이틀 */
.body-join-agreement .member_tit { display:none; }
.join_agreement_wrap .member_cont h3 { padding:0; margin:0 0 30px; color:#221C10; font-size:32px; font-weight:600; line-height:1; text-align:center; }

/* 전체동의 */
.join_agreement_cont .form_element #allAgree + label:where(.check:hover,.check) { padding-left:30px; background:url("../img/check_all_off.png") no-repeat 0 50%; }
.join_agreement_cont .form_element #allAgree + label.on { background:url("../img/check_all_on.png") no-repeat 0 50%; }
.join_agreement_cont .join_agreement_box:not(.js_terms_view) { display:flex; align-items:center; height:50px; padding:0 0 0 12px; margin:0 0 30px; color:#FFF; font-size:16px; font-weight:500; background:#A99888; border-radius:4px; }
.join_agreement_cont .join_agreement_box:not(.js_terms_view) .form_element em { font-weight:500; }
.join_agreement_cont .join_agreement_box:not(.js_terms_view) .form_element span { display:none; }

/* 약관 */
.join_agreement_cont .js_terms_view { margin:0; border-top:1px solid #E9E9E9; }
.join_agreement_cont .js_terms_view .form_element { display:flex; align-items:center; position:relative; width:100%; height:60px; color:#2E2E2E; font-size:16px; font-weight:400; }
.join_agreement_cont .js_terms_view .form_element strong { font-weight:400; }
.join_agreement_cont .js_terms_view .form_element label.check_s { padding-left:30px; }
.join_agreement_cont .js_terms_view .form_element span a { margin:0 0 0 8px; padding:0; color:#999; font-size:14px; font-weight:400; background:none; text-decoration-line:underline; text-underline-offset:3px; }
#contents .join_agreement_cont .js_terms_view .form_element span > a { color:#999; }
.join_agreement_cont .agreement_box { height:140px; margin:0; padding:10px 15px; border:0; background:#F8F8F8; }
.join_agreement_cont .js_terms_view .form_element + div:not(.first) { display:none; }
.join_agreement_cont .js_terms_view .form_element em { position:absolute; top:50%; right:0; width:20px; height:100%; transform:translateY(-50%); font-size:0; background:url("../img/agreement_arr_off.png") no-repeat 100% 50%; cursor:pointer; }
.join_agreement_cont .js_terms_view .form_element em.on { background-image:url("../img/agreement_arr_on.png"); }

/* 다음단계 버튼 */
.join_agreement_wrap .member_cont .btn_center_box { margin:30px 0 0; }
.join_agreement_wrap .member_cont .btn_center_box .btn_member_next { width:100%; height:60px; margin:0; color:#FFF; font-size:18px; font-weight:600; border-radius:4px; background:var(--point-color); }

/*========================================================================
회원가입 method
========================================================================*/
.body-join-method .member_cont .member_login_box .member_login_shop { padding:0; border-bottom:0; }
.body-join-method .member_cont .member_login_box .member_login_shop .shop_mall_join { display:flex; justify-content:center; align-items:center; width:100%; height:60px; padding:0; color:#fff; font-size:18px; font-weight:600; background:var(--point-color); border-radius:5px; }

/* 카카오 버튼 */
.body-join-method .member_login_box .btn_kakao_login { display:flex; justify-content:center; align-items:center; color:#000; width:100%; height:60px; font-size:18px; font-weight:600; border-radius:5px; background:#FDE500; }
.body-join-method .member_login_box .btn_kakao_login img { display:none; }
.body-join-method .member_login_box .btn_kakao_login::after { content:"카카오 로그인/회원가입"; display:flex; }

/* 네이버 버튼 */
.body-join-method .member_login_box .btn_naver_login { display:flex; justify-content:center; align-items:center; color:#fff; width:100%; height:60px; font-size:18px; font-weight:600; border-radius:5px; background:#1DC800; }
.body-join-method .member_login_box .btn_naver_login img { display:none; }
.body-join-method .member_login_box .btn_naver_login::after { content:"네이버 로그인"; display:flex; }


/*========================================================================
회원가입
========================================================================*/
.join_base_wrap { width:460px; margin:38px auto 0;}
.join_base_wrap .member_cont { width:100%; }

/* 타이틀 */
.join_base_wrap .member_tit { border-bottom:0; }
.join_base_wrap .member_tit ol { display:none; }
.join_base_wrap .member_tit h2 { float:none; margin:0 0 30px; text-align:center; }

/* 중간 타이틀 */
#contents .join_base_wrap .member_cont h3 { padding:0; margin:0 0 16px; color:#121212; font-size:20px; font-weight:500; line-height:1; }

/* 필수표시 */
.join_base_wrap .base_info_box > span { display:none; }
.join_base_wrap .member_cont .important { background:none; filter:unset !important; }
.join_base_wrap .member_cont .important::before { content:"*"; display:inline-flex; vertical-align:top; color:#DD4A4A; font-size:18px; font-weight:500; }
.join_base_wrap table th span { display:flex; margin:0; padding:0; }
.join_base_wrap table th span::before { order:1; margin-left:3px; }

/* 항목 테이블 */
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] { border-top:1px solid #121212; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table colgroup { display:none; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table :where(th,td) { display:block; width:100%; padding:0; border:0; box-sizing:border-box; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table th { padding:30px 0 12px; color:#2E2E2E; font-size:18px; font-weight:500; line-height:1; background:none; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table td { color:#2E2E2E; font-size:14px; font-weight:400; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table .form_element { margin-top:12px; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table .form_element label { padding-left:28px; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table input:where([type="text"], [type="password"]) { width:100%; height:50px; font-size:16px; font-weight:300; border:1px solid #E0E0E0; border-radius:4px; }
.join_base_wrap .member_cont [class$="_info_box"] [class$="_info_sec"] table input:where([type="text"], [type="password"])::placeholder { color:#999; }

/* 주소 */
#contents .join_base_wrap .base_info_sec table .member_address .address_input { width:100%; }
#contents .join_base_wrap .base_info_sec table .member_address .address_postcode input { width:350px; }
#contents .join_base_wrap .base_info_sec table .member_address .address_postcode .btn_post_search { float:right; width:100px; height:50px; color:#fff; font-size:0; font-weight:500; background:var(--point-color); border-color:var(--point-color); border-radius:4px; }
#contents .join_base_wrap .base_info_sec table .member_address .address_postcode .btn_post_search::before { content:"우편번호"; display:inline-block; font-size:16px; }
/* 이메일 */
.join_base_wrap .base_info_sec table .member_email input[type="text"] { width:350px; }
.join_base_wrap .base_info_sec table .member_email select { width:102px; }
#wrap .join_base_wrap .base_info_sec table .member_email .chosen-single { display:flex; align-items:center; height:50px; padding-left:12px; color:#fff; font-size:16px; font-weight:500; background:var(--point-color); border-color:var(--point-color); border-radius:4px; box-shadow:none; }
#wrap .join_base_wrap .base_info_sec table .member_email .chosen-container-single { float:right; }
#wrap .join_base_wrap .base_info_sec table .member_email .chosen-container-single .chosen-single div { width:25px;}
#wrap .join_base_wrap .base_info_sec table .member_email .chosen-container-single .chosen-single div b { background:url("../img/select_drop_off.png") no-repeat 0 50%; }
#wrap .join_base_wrap .base_info_sec table .member_email .chosen-container-active.chosen-with-drop .chosen-single div b { background:url("../img/select_drop_on.png") no-repeat 0 50%; }
/* 생일 */
#wrap .join_base_wrap .addition_info_sec table .member_birthday select { width:30% !important; height:50px; padding:0 10px; font-size:16px; font-weight:300; border:1px solid #E0E0E0; border-radius:4px; }
#wrap .join_base_wrap .addition_info_sec table .member_birthday #birthYear { width:38% !important;}

/* 회원가입 버튼 */
.join_base_wrap .member_cont .btn_center_box { display:flex; flex-direction:column; gap:16px; margin:40px 0 0; }
.join_base_wrap .member_cont .btn_center_box button { order:2; display:block; width:100%; height:60px; margin:0; color:#121212; font-size:18px; font-weight:600; border:1px solid #999; border-radius:4px; }
.join_base_wrap .member_cont .btn_center_box button.js_btn_join { order:1; color:#fff; background:var(--point-color); border-color:var(--point-color); }


/*========================================================================
회원가입 변경 
========================================================================*/
.my_page .mypage_zone_tit { margin:0; padding:0; border-bottom:0; }
.my_page .mypage_zone_tit h2 { float:none; margin:0 0 30px; text-align:center; }


/*========================================================================
가입완료
========================================================================*/
.body-join-ok .member_tit { border-bottom:1px solid #2E2E2E; }
.body-join-ok .member_tit h2 { margin:0 0 30px; font-size:0; text-align:center; }
.body-join-ok .member_tit h2::after { content:"가입완료"; display:inline-block; font-size:32px; }

.join_ok_box .join_ok_tit { padding:72px 0 0; margin:40px auto; background:url("../img/img_join_ok.png") no-repeat 50% 0; text-align:center; }
.join_ok_box .join_ok_tit p.complete { padding:0; margin:0 0 16px; color:#2E2E2E; font-size:24px; font-weight:500; line-height:1; }
.join_ok_box .join_ok_tit p.complete strong { font-weight:700; }
.join_ok_box .join_ok_tit p { padding:0; color:#666; font-size:18px;font-weight:400; line-height:1.4; }

/* 완료 버튼 */
.join_ok_box .btn_member_sec { border-top:0; }
.join_ok_box .btn_member_sec ul { display:flex; justify-content:center; gap:10px; margin:0; }
.join_ok_box .btn_member_sec li { flex:1; margin:0; }
.join_ok_box .btn_member_sec li button { width:100%; height:60px; color:#221C10; font-size:18px; font-weight:600; border-radius:4px; }
.join_ok_box .btn_member_sec li button:is(.btn_login,.btn_login:hover) { color:#fff; background:var(--point-color); border-color:var(--point-color); }