@charset "UTF-8";

/*========================================================================
로그인
========================================================================*/
.login { padding:0 20px; }
.login .tit-desc { margin:10px auto 24px; color:#757575; font-size:16px; font-weight:400; line-height:1.3; text-align:center; }
.login .guest_order_box .guest_txt { display:none; }
#formOrderLogin { display:none; }

/* 로그인 & 비회원주문조회 탭버튼 */
.member-tab { margin:0 0 24px; }
.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; }

.login :is(.login_box,.guest_order_box) dl + dl { margin:12px 0 0; }
.login :is(.login_box,.guest_order_box) dl dd { padding:0; }
.login :is(.login_box,.guest_order_box) dl dd input { height:50px; padding:0; font-size:14px; font-weight:400; border:0; border-bottom:1px solid #D1D1D1; text-indent:0; }
.login :is(.login_box,.guest_order_box) dl dd input::placeholder { color:#666; }

/* 아이디 저장 */
.login .login_box .inp_chk { padding:0; margin:20px 0 0; line-height:20px; }
.login .login_box .inp_chk label { margin:0 10px 0 3px; color:#2E2E2E; font-size:14px; font-weight:400; }
.login .login_box .inp_chk input { margin:0; }

/* 아이디 , 비번 찾기 버튼 */
.login .login_find { display:flex; justify-content:center; padding:0; margin:24px auto 0; }
.login .login_find li { padding:0 13px; color:#2E2E2E; font-size:14px; font-weight:400; line-height:1.2; }
.login .login_find li::before { top:4px; height:13px; background:#D1D1D1; }

/* 확인 버튼 */
.login .login_box .submit { padding:0; }
.login .member_login_order_btn { width:100%; height:50px; margin:20px 0 0; color:#FFF; font-size:18px; font-weight:600; border-radius:5px; background:var(--point-color); border-color:var(--point-color); }

/* SNS 로그인 버튼 공통 */
.sns-login-btn { display:flex; justify-content:center; align-items:center; width:100%; height:50px; font-size:16px; font-weight:600; border-radius:4px; background:no-repeat 30px 50%; background-size:auto 20px; }
.sns-login-btn img { display:none; }
.sns-login-btn::after { display:flex; }
/* 카카오 버튼 */
.js_btn_kakao_login { margin-bottom:40px; background-color:#FDE500; background-image:url("../img/sns_kakao_icon.png"); }
.js_btn_kakao_login::after { content:"카카오 로그인/회원가입"; color:#000; }
/* 네이버 버튼 */
.js_btn_naver_login { margin-top:40px; background-color:#1DC800; background-image:url("../img/sns_naver_icon.png"); }
.js_btn_naver_login::after { content:"네이버 로그인"; color:#fff; }


/*========================================================================
회원가입 구분
========================================================================*/
.join_method { padding: 10px 20px; }
.join_method .sns_login li {  }
.join_method .sns_login li#btnJoin { width:100%; height:50px; line-height:50px; padding:0; margin:50px 0 0; color:#FFF; font-size:18px; font-weight:600; border-radius:5px; background:var(--point-color); border-color:var(--point-color); }
.join_method .sns_login li.kakao { display: flex; justify-content: center; align-items: center; height:50px; padding:0; font-size:16px; font-weight:600; border-radius:5px; border-color:#FDE500; background:#FDE500 url("../img/sns_kakao_icon.png") no-repeat 30px 50%; background-size:auto 20px; }
.join_method .sns_login li.kakao img { display:none; }
.join_method .sns_login li.naver { display: flex; justify-content: center; align-items: center; height:50px; padding:0; font-size:16px; font-weight:600; border-radius:5px; border-color:#1DC800; background:#1DC800 url("../img/sns_naver_icon.png") no-repeat 30px 50%; background-size:auto 20px; }
.join_method .sns_login li.naver img { display:none; }


/*========================================================================
약관동의
========================================================================*/
.join_step { display:none; }
.join_agreement { margin:24px 0 0; padding:0 20px; }

/* 전체동의 */
.join_agreement .all_chk { width:100%; padding:15px 12px; margin:0 0 30px; color:#FFF; font-size:14px; font-weight:500; line-height:20px; border:0; border-radius:4px; background:#A99888; box-sizing:border-box; }
.join_agreement .all_chk label { margin:0 0 0 3px; }

/* 약관 */
.join_agreement .privacy_big_box { padding:0; border-bottom:1px solid #E9E9E9; }
.join_agreement .privacy_big_box .privacy_box dl { display:flex; padding:20px 12px; color:#2E2E2E; font-size:16px; font-weight:400; line-height:1; border-bottom:0; border-top:1px solid #E9E9E9; box-sizing:border-box; }
.join_agreement .privacy_big_box .privacy_box dl dt { line-height:20px; }
.join_agreement .privacy_big_box .privacy_box dl dt label { margin:0 0 0 3px; }
.join_agreement .privacy_big_box .privacy_box dl dd { flex:auto; padding:0 0 0 10px; text-align:left; box-sizing:border-box; }
.join_agreement .privacy_big_box .privacy_box dl dd button { width:100%; padding:0; color:#999; font-size:0; text-align:left; border:0; background:url("../img/agreement_arr_off.png") no-repeat 100% 50%; background-size:15px auto; text-decoration-line:underline; }
.join_agreement .privacy_big_box .privacy_box dl dd button::after { content:"전체보기"; font-size:14px; }
.join_agreement .privacy_big_box .privacy_box dl dd button.on { background-image:url("../img/agreement_arr_on.png"); }
.join_agreement .privacy_big_box .privacy_box .privacy_content { height:140px; padding:10px; background:#F8F8F8; overflow-y:auto; }

/* 다음단계 버튼 */
.join_agreement .member_confirm_btn { padding:0; margin:30px 0 0; }
.join_agreement .member_confirm_btn .join_next_btn { height:50px; color:#fff; font-size:18px; font-weight:600; border-radius:4px; background:var(--point-color); border-color:var(--point-color); }


/*========================================================================
회원가입
========================================================================*/
.join .join_content_box .join_content,
.my_page .modify_content_box .modify_content { padding:0 20px 0; }
:is(.join_view, .join_view_business, .join_view_other) .tit { padding:0 0 16px; margin:34px 0 0; color:#121212; font-size:20px; font-weight:500; line-height:1; border-bottom:1px solid #121212; }

#memberjoin .input_wrap { display:flex; flex-direction:column; padding:0; }
#memberjoin .input_wrap .input_title.required { filter:none; background:none; }
#memberjoin .input_wrap .input_title.required::after { content:"*"; display:inline-flex; margin:0 0 0 3px; color:#DD4A4A; }
#memberjoin .input_wrap .input_title { width:100%; padding:12px 0; margin:18px 0 0; color:#2E2E2E; font-size:18px; font-weight:500; line-height:1; }
#memberjoin .input_wrap:has(.description) .input_title { display:none; }

#memberjoin .input_wrap .input_content { width:100%; }
#memberjoin .input_wrap .input_content:has(.input_email) { display:flex; width:100%; }
#memberjoin .input_wrap .input_content :is(input[type=text],input[type=password], input[type=email]) { height:50px; padding:0 12px; font-size:16px; font-weight:300; border-radius:4px; border:1px solid #E0E0E0; background:#FFF; text-indent:0; }
#memberjoin .input_wrap .input_content input::placeholder { color:#999; font-size:12px; }

/* 이메일 */
#memberjoin .input_wrap .input_content input.input_email { width:calc(100% - 112px) !important; }
#memberjoin .input_wrap .email_select_box { width:102px; margin:0 0 0 10px; }
#memberjoin .input_wrap .email_select { height:50px; padding:0 0 0 12px; color:#FFF; font-size:16px; font-weight:500; border-radius:4px; background:var(--point-color) url("../img/select_drop_off.png") no-repeat right 13px top 50%; background-size:14px auto; border:1px solid var(--point-color); }
#memberjoin .input_wrap .input_content .description { padding:0; margin:12px 0 0; }
#memberjoin .input_wrap .input_content .description + .description { margin:5px 0 0; }
#memberjoin .input_wrap .input_content .inp_chk label { color:#2E2E2E; font-size:14px; font-weight:400; line-height:20px; }

/* 우편번호 */
#memberjoin .zipcode_box .zipcode_top { padding-right:112px; }
#memberjoin .zipcode_box .zipcode_top .zipcode_btn_box { width:102px; }
#memberjoin .zipcode_btn { height:50px; color:#FFF; font-size:16px; font-weight:600; border-radius:4px; background:var(--point-color); border-color:var(--point-color); }

/* 생일 */
#memberjoin .input_wrap .input_content .inp_sel:has(#birthYear) { width:100%; }
#memberjoin .input_wrap .input_content .inp_sel select { height:50px; padding:0 0 0 10px; font-size:16px; background:url("../img/agreement_arr_off.png") no-repeat right 10px top 50%; background-size:10px auto; border:1px solid #E0E0E0; border-radius:4px; }


/* 가입 버튼 */
.join .join_btn_box,
.my_page .modify_content_box .modify_btn_box { padding:40px 20px 0; }
.join .join_btn_box button,
.my_page .modify_btn_box button { width:100%; height:50px; padding:0; font-size:18px; font-weight:600; border-radius:4px; outline:none; }
#memberjoin .join_ok_btn { color:#FFF; background:var(--point-color); border-color:var(--point-color); }
.join .join_btn_box .join_cancel_btn { margin:16px 0 0; color:#121212; background:#fff; border:1px solid #999; }

/* 회원정보 변경 - 아이디 */
#memberjoin .input_wrap .input_content .member_id { display:block; line-height:48px; font-size:16px; font-weight:300; }

/* 회원정보 변경 - 비밀번호 변경 */
#memberjoin .input_wrap .input_content .modify_pw_btn { width:100%; height:50px; color:#FFF; font-size:16px; font-weight:600; border-radius:4px; background:var(--point-color); border-color:var(--point-color); }
#memberjoin .input_wrap .input_content .modify_pw label { color:#2E2E2E; font-size:15px; font-weight:500; }


/*========================================================================
가입완료
========================================================================*/
.join_ok .join_content { margin:34px 20px 0; padding:40px 0; border-top:1px solid #2E2E2E;  }
.join_ok .join_content .complete { padding:72px 0 0; margin:0 0 16px; color:#2E2E2E; font-size:22px; font-weight:500; line-height:1; background:url("../img/img_join_ok.png") no-repeat 50% 0; background-size:50px auto; }
.join_ok .join_content .complete strong { color:var(--point-color); font-weight:700; }
.join_ok .join_content p { color:#666; font-size:16px; font-weight:400; line-height:1.4; }

.join_ok .btn { padding:0 20px; }
.join_ok .btn .join_home_btn { width:100%; height:60px; color:#221C10; font-size:18px; font-weight:600; border-radius:4px; background:#fff; border:1px solid #999; }
.join_ok .btn .join_login_btn { width:100%; height:60px; line-height:58px; padding:0; margin:10px 0 0; color:#fff; font-size:18px; font-weight:600; border-radius:4px; background:var(--point-color); border-color:var(--point-color); }