@charset "utf-8";
.icon_success { width: 64px; height: 64px; background: url(../image/icon/icon_success.svg) no-repeat center center; background-size: contain; display: block; }

/* 로그인 */
.login_section { position: relative; }
.login_section .social_login_list ul li { margin-bottom: 12px; } 
.login_section .social_login_list ul li:last-of-type { margin-bottom: 0; } 
.login_section .social_login_list .btn_link { display: block; width: 100%; height: 60px; font-size: 15px; font-weight: 700; line-height: 60px; text-align: center; border-radius: 12px; box-sizing: border-box; overflow: hidden; } 
.login_section .social_login_list .btn_link.kakao { color: var(--black); background: #fee500; } 
.login_section .social_login_list .btn_link.naver { color: var(--white); background: #42BC00; } 
.login_section .social_login_list .btn_link.email { color: var(--white); background: var(--primary-500); }
.login_section .social_login_list .email_input_box { display: none; padding-bottom: 12px; overflow: hidden; } 
.login_section .etc_link_box ul { display: flex; flex-direction: row; }
.login_section .etc_link_box ul li { position: relative; flex: 1 1 auto; text-align: center; }
.login_section .etc_link_box ul li::after { position: absolute; right: 0; top: 2px; width: 1px; height: 12px; background: var(--gray-200); content: ''; display: inline-block; } 
.login_section .etc_link_box ul li:last-of-type:after { display: none; } 
.login_section .etc_link_box ul li a { font-size: 14px; font-weight: 400; display: inline-block; } 


/* 이메일 찾기 완료 */
.register_section .email_info_box { margin-top: 50px; } 
.register_section .email_info_box span { display: block; font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 20px; } 
.register_section .email_info_box .email_box { width: 100%; font-size: 16px; font-weight: 700; line-height: 24px; padding: 20px; text-align: center; background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; overflow: hidden; } 
.register_section .email_info_box p { font-size: 14px; font-weight: 400; line-height: 24px; word-break: keep-all; } 

/* 회원가입 */
.join_section .join_form .input_list { margin-top: 16px; } 
.join_section .join_form .radio_box { display: inline-block; margin-right: 24px; } 
.join_section .join_form .radio_box input[type=radio] { display: none; } 
.join_section .join_form .radio_box input[type="radio"] + label { position: relative; font-size: 16px; font-weight: 700; color: var(--gray-200); line-height: 22px; } 
.join_section .join_form .radio_box input[type="radio"] + label::before { width: 20px; height: 20px; background: var(--white); border-radius: 50%; border: 2px solid var(--gray-100); box-sizing: border-box; vertical-align: -4px; margin-right: 8px; content: ""; display: inline-block; }
.join_section .join_form .radio_box input[type="radio"]:checked + label { color: var(--primary-500); } 
.join_section .join_form .radio_box input[type="radio"]:checked + label::before { border: 5px solid var(--primary-500); } 
.join_section .all_check { width: 100%; margin-top: 16px; } 
.join_section .all_check input[type="checkbox"] { display: none; } 
.join_section .all_check input[type="checkbox"] + label { display: block; width: 100%; font-size: 16px; font-weight: 700; line-height: 24px; background: var(--white); border: 1px solid var(--primary-100); border-radius: 16px; padding: 16px 12px; }
.join_section .all_check input[type="checkbox"] + label::before { width: 24px; height: 24px; background: url(../image/icon/icon_chkbox_circle_off.svg) no-repeat center center; background-size: contain; vertical-align: -7px; margin-right: 12px; display: inline-block; content: ''; } 
.join_section .all_check input[type="checkbox"]:checked + label::before { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat center center; background-size: contain; } 
.join_section .agree_chk_list { padding: 16px 12px 0; } 
.join_section .agree_chk_list li { display: flex; align-items: center; justify-content: space-between; } 
.join_section .agree_chk_list li + li { margin-top: 24px; }
.join_section .agree_chk_list li:last-of-type { margin-top: 2px; } 
.join_section .agree_chk_list li button { font-size: 15px; color: var(--gray-400); line-height: 24px; text-decoration: underline; } 
.join_section .agree_chk_list li em { display: block; font-size: 13px; font-weight: 400; color: var(--primary-500); line-height: 22px; padding-left: 32px; }
.join_section .agree_chk_list .chk_box input[type="checkbox"] { display: none; }
.join_section .agree_chk_list .chk_box input[type="checkbox"] + label { display: inline-block; position: relative; font-size: 15px; line-height: 24px; padding-left: 32px; } 
.join_section .agree_chk_list .chk_box input[type="checkbox"] + label::before { position: absolute; left: 0; top: -1px; width: 24px; height: 24px; background: url(../image/icon/icon_check_gray.svg) no-repeat center center; background-size: contain; border-radius: 50%; content: ""; display: inline-block; } 
.join_section .agree_chk_list .chk_box input[type="checkbox"]:checked + label::before { background: url(../image/icon/icon_check_primary.svg) no-repeat center center; background-size: contain; } 
.join_section .agree_chk_list .chk_box input[type="checkbox"]:checked + label { font-weight: bold; color: var(--primary-500); }
.join_section .coupon_wrap { width: 100%; text-align: center; }
.join_section .coupon_wrap dl { width: 290px; height: 170px; padding: 40px 0; background: url(../image/bg_coupon_gray.png) no-repeat center center; background-size: contain; margin: 0 auto; }
.join_section .coupon_wrap dl dt { font-size: 16px; font-weight: 700; color: var(--white); line-height: 22px; }
.join_section .coupon_wrap dl dd { font-size: 54px; font-weight: 700; color: var(--white); line-height: 60px; letter-spacing: -0.5px; margin-top: 4px; }
.join_section .coupon_wrap .text { font-weight: 700; margin-top: -4px; }
.join_section .coupon_wrap .text b { color: var(--primary-500); }
.join_banner { position: relative; width: 100%; padding: 16px 16px 62px; background: url(../image/img_coins.png) no-repeat calc(100% - 16px) calc(100% - 16px), var(--primary-100); background-size: 90px; border-radius: 12px; }
.join_banner h4 { font-size: 16px; font-weight: 700; color: var(--black); line-height: 22px; }
.join_banner h4 strong { color: var(--primary-500); }
.join_banner p { font-size: 14px; font-weight: 400; color: var(--black); line-height: 18px; margin-top: 8px; }