/*******************************************************
*/
/* common
 *******************************************************/
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


header#hd.sub-hd{background:#fff;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);}
#sub_top{display: none;}
#subtop_location{display: none;}

input[type='radio']{width:16px;height:16px;cursor: pointer;appearance: none;position: relative;background: #fff;border-radius: 50%;margin-right: 4px;margin-top: 1px;outline:none;border:2px solid #999;}
input[type='radio']:checked {appearance: none;position: relative;background: #000;border-radius: 50%;margin-right: 4px;margin-top: 1px;}
input[type='radio']:checked:after {content: '';width: 8px;height: 8px;background: #000;position: absolute;top: 50%;left: 50%;border-radius: 100%;transform: translate(-50%,-50%);}
span.input_button {display: flex;float: left;align-items: center;margin-right: 12px;}

body p.error{padding:4px 10px;box-sizing: border-box;color: #ff4800 !important;font-size: 13px;line-height: 20px;margin:6px 0;}
body p.error > i{color: #ff4800;font-size: 14px;line-height: 20px;margin-right: 2px;}

body p.success{padding:4px 10px;display: flex;box-sizing: border-box;color: #3c763d;font-size: 13px;line-height: 20px;margin:6px 0;}
body p.success > i{color: #3c763d;font-size: 14px;line-height: 20px;margin-right: 2px;}

.member_form .title h6{color:var(--variant-light);font-weight: 400;word-break: keep-all;}

.member_form{width: 100%;max-width:640px;margin:0 auto;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.member_form .member_area{width:100%;max-width:450px;margin:0 auto;padding:2rem 0;}

.member_form .form-group{position: relative;}
.member_form .form-control{display: block;width: 100%;height: 60px;font-size:18px;font-weight: 400;letter-spacing: -0.6px;line-height: 60px;padding: 0 20px;border-radius: 10px;background-color: #fff;border: 2px solid #fff;outline: none;margin-bottom: 10px;transition: all 0.2s ease-in-out;}
.member_form .form-control::placeholder{color:var(--variant-light);}
.member_form .form-control:focus {border-color: #000;outline: 0;-webkit-box-shadow:none;box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(0 0 0 / 8%);}

@media (max-width:768px) {
    .member_form .member_area{padding:1rem 0;}
    .member_form .form-control{font-size:1rem;height:52px;}
}



/*******************************************************
*/
/* login
 *******************************************************/

#login {width: 100%;min-height:80vh;height: 100%;position: relative;display:flex;align-items:center;justify-content:center;}

.login_form_wrap{width:100%;height:100%;}
.login_form_wrap .form_box{animation: fadeIn 0.5s ease-in-out;}

.login_form_wrap .login_find {display: flex;align-items: center;gap:6px;width:100%;}
.login_form_wrap .login_find a.member__btn {width:100%;display: inline-flex;align-items: center;justify-content: center;height:42px;padding: 0 16px;font-size:14px;font-weight: 500;border-radius: 6px;text-decoration: none;transition: all 0.6s ease-in-out;background-color: #f8f9fa;color: #666;border: 1px solid #e2e8f0;}
.login_form_wrap .login_find a.member__btn:hover {background-color: #edf2f7;border-color: #cbd5e0;}
.login_form_wrap .login_find a.member__btn.text-primary {background-color: rgba(0, 94, 196, 0.1);color: var(--primary);border-color: rgba(0, 94, 196, 0.2);}
.login_form_wrap .login_find a.member__btn.text-primary:hover {background-color: rgba(0, 94, 196, 0.15);border-color: rgba(0, 94, 196, 0.3);}

@media (max-width:768px) {
    .login_form_wrap .login_find {width: 100%;justify-content: space-between;flex-wrap: wrap;}
    .login_form_wrap .login_find a.member__btn {flex: 1;padding: 0 10px;min-width: 80px;font-size: 13px;margin-top:6px;}
}

@media (max-width: 480px) {
    .login_form_wrap .login_find {flex-direction: row;flex-wrap: wrap;}
    .login_form_wrap .login_find a.member__btn.member__join {min-width: 100%;}
}


/*******************************************************
*/
/* join
 *******************************************************/
#join {width: 100%;min-height:80vh;height: 100%;position: relative;display:flex;align-items:center;justify-content:center;}
.join_form_wrap form{width:100%;height:auto;}

#join .member_form{max-width:1000px;}
#join .member_area{max-width:800px;}

.join_form_wrap{width: 100%;margin: 0 auto;height: 100%;}
.join_form_wrap .title{text-align:left;}
.join_form_wrap .title span{font-weight:400;letter-spacing: -0.085rem;}

.join_form_wrap .col-form-label {line-height: 40px;}
.join_form_wrap .col-form-label span{color:#ff4800;}
.join_form_wrap .form_box{animation: fadeIn 0.5s ease-in-out;padding-bottom:10px;}

.agree-custom-check { padding:1rem; border-radius: 10px; background-color:#fff;animation: fadeIn 0.5s ease-in-out;}
.agree-custom-check .form-group {position: relative; }
.agree-custom-check .custom-checkbox { display: block; position: relative; }
.agree-custom-check label { display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 500; color: #666; }
.agree-custom-check input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; }

.agree-custom-check .primary-color { color: #ff3b30; font-weight: 600; }
.agree-custom-check .join_agree {cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding:1rem; border: 1px solid var(--variant-dark); border-radius: 8px; transition: border 0.25s ease; }

.agree-custom-check .form-group:first-child label {font-size:18px;background-color:#fff;color: var(--variant-light);border:1px solid var(--gray-500);padding:1rem; border-radius: 8px; display: flex; justify-content: center; font-weight: 600;transition: all 0.25s ease;}
.agree-custom-check .form-group:first-child input[type="checkbox"]:checked ~ label { background-color: #000; color: #fff; }
.agree-custom-check .form-group:first-child input[type="checkbox"]:checked ~ label .checkmark { background-color: transparent; border-color: #fff; }
.agree-custom-check .form-group.checked label{border-color: rgba(0, 94, 196, 0.2);}
.agree-custom-check .form-group.checked {border-color: rgba(0, 94, 196, 0.2);}
.agree-custom-check .form-group.checked:first-child label{background-color: rgba(0, 94, 196, 0.1);color: var(--primary);}

.agree-custom-check .agree_btn { color: #666; text-decoration: none; font-size: 13px; padding: 6px 12px; border: 1px solid #D4D6D6; border-radius: 20px; transition: all 0.25s ease; }
.agree-custom-check .agree_btn:hover { background-color: #f0f0f0; }

.agree-custom-check p { margin-top: -8px; text-align: right; }


@media (max-width:768px) {
    .agree-custom-check .form-group:first-child label {font-size:16px;}
    .agree-custom-check label{font-size:14px;}
}

@media (max-width:500px) {
    input::placeholder{font-size:13px;}
}


/*******************************************************
*/
/* find
 *******************************************************/

#find{width: 100%;min-height:80vh;height: 100%;position: relative;display:flex;align-items:center;justify-content:center;}

.find_form_wrap .sub_tab_wrap { display: flex; border-bottom: 2px solid #171717; margin-bottom: 30px; position: relative; }
.find_form_wrap .sub_tab { flex: 1; padding: 16px 20px; font-size: 16px; font-weight: 500; color: var(--variant-light); background-color: #f8f9fa; border-top: 1px solid #e2e8f0; border-right: none; border-bottom: none; border-left: 1px solid #e2e8f0; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; border-radius: 10px 10px 0 0; overflow: hidden; }
.find_form_wrap .sub_tab:last-child { border-right: 1px solid #e2e8f0; }
.find_form_wrap .sub_tab.on { background-color: #000; color: #fff; border-color: #000; font-weight: 600; }
.find_form_wrap .sub_tab:hover:not(.on) {background-color: #edf2f7;border-color: #cbd5e0;}
.find_form_wrap .sub_tabcon_wrap { width: 100%; margin-top: 0;position: relative; }
.find_form_wrap .sub_tabcon_wrap:after{content: '';clear:both;display: block;}
.find_form_wrap .sub_tabcon { display: none; overflow: hidden; animation: fadeIn 0.5s ease-in-out;width: 100%; }
.find_form_wrap .sub_tabcon.on { display: block; }

.find_form_wrap .sub_tab_wrap.with-indicator { border-bottom: 1px solid #e2e8f0; }
.find_form_wrap .sub_tab_wrap.with-indicator .sub_tab { background-color: transparent; border: none; color: #666; position: relative; }
.find_form_wrap .sub_tab_wrap.with-indicator .sub_tab.on { color: var(--primary); background-color: transparent; font-weight: 600; }
.find_form_wrap .sub_tab_wrap.with-indicator .sub_tab.on:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--primary); }


@media (max-width: 768px) {
    .find_form_wrap .sub_tab { font-size: 15px; padding: 12px 10px; }
}

@media (max-width: 480px) {
    .find_form_wrap .sub_tab { font-size: 14px; padding: 10px 5px; }
}


.find_form_wrap .idinquiry_info_box { background-color: #fff; border-radius: 8px; padding: 30px;position: relative;border: 1px solid var(--variant-dark);}
.find_form_wrap .idinquiry_info_box h4 { font-size: 18px; color: #333; margin-bottom: 20px; font-weight: 500; position: relative; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
.find_form_wrap .idinquiry_info_box p { font-size: 15px; color: #666; margin-bottom: 25px; line-height: 1.6; position: relative;}
.find_form_wrap .idinquiry_info_box #findid_result { color: #000; font-weight: 600; position: relative; display: inline-block; border-bottom: 2px dashed var(--primary); padding: 0 4px; }
.find_form_wrap .idinquiry_info_box a {display: flex;align-items: center;justify-content: center;}


.find_form_wrap .pwinquiry_info_box { background-color: #fff; border-radius: 8px; padding: 30px; position: relative; border: 1px solid var(--variant-dark);}
.find_form_wrap .pwinquiry_info_box h4 { font-size:20px; color:var(--primary); margin-bottom: 20px; font-weight: 500; position: relative; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
.find_form_wrap .pwinquiry_info_box h4 i { margin-right: 8px; color: var(--primary); }
.find_form_wrap .pwinquiry_info_box p { font-size:1rem; color: #666; margin-bottom: 25px; line-height: 1.6; position: relative; }

.find_form_wrap .pwinquiry_info_box .form-group { margin-bottom: 15px; width: 100%; }
.find_form_wrap .pwinquiry_info_box .form-control { display: block; width: 100%; height: 48px; font-size:1rem; font-weight: 400; padding: 0 20px; border-radius: 6px; background-color: #f8f9fa; border: 1px solid #eee; outline: none; transition: all 0.2s ease-in-out; }
.find_form_wrap .pwinquiry_info_box .form-control:focus { border-color: var(--primary); background-color: #fff; outline: 0; box-shadow: 0 0 0 2px rgba(0, 94, 196, 0.1); }
.find_form_wrap .pwinquiry_info_box .form-control::placeholder { color: #aaa; font-size: 14px; }

.find_form_wrap .pwinquiry_info_box .login_btn { display: inline-block; background-color: transparent; color: var(--primary); padding: 10px 25px; border: 2px solid var(--primary); border-radius: 30px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s ease; position: relative; left: 50%; transform: translateX(-50%); }
.find_form_wrap .pwinquiry_info_box .login_btn:hover { background-color: var(--primary); color: white; }

.find_form_wrap #pw__certi_chk, .find_form_wrap #pw, .find_form_wrap #pw_chk { width: 100%; }

/* 변경 완료 단계 */
.find_form_wrap #step_change_pw_complete .pwinquiry_info_box {  text-align: center; }
.find_form_wrap #step_change_pw_complete .pwinquiry_info_box h4 { justify-content: center;}
.find_form_wrap #step_change_pw_complete .pwinquiry_info_box p { text-align: center; }
.find_form_wrap #step_change_pw_complete .pwinquiry_info_box a {display: flex;align-items: center;justify-content: center;}


/*******************************************************
*/
/* terms / privacy
 *******************************************************/

.help-form { }
.help-form .title {  color: #333; text-align: center; }
.help-form .content { max-height: 600px; overflow-y:scroll; padding: 30px; background:#fff; border-radius: 8px; border: 1px solid var(--variant-dark); }
.help-form .content p { line-height: 1.4; color:var(--variant-light); font-size: 16px; margin-bottom: 20px; }

@media (max-width: 768px) {
    .help-form .content {padding:12px;}
}

/*******************************************************
*/
/* mypage
 *******************************************************/

#mypage_intro {width: 100%;min-height:80vh;height: 100%;position: relative;display:flex;align-items:center;justify-content:center;}
#mypage-security {width: 100%;min-height:80vh;height: 100%;position: relative;display:flex;align-items:center;justify-content:center;}

.mypage_form{width: 100%;max-width:1000px;margin:0 auto;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.mypage_form .mypage_area{width:100%;max-width:800px;margin:0 auto;padding:2rem 0;}
.mypage_form .title h6{color:var(--variant-light);font-weight: 400;word-break: keep-all;}

.mypage_form_wrap .form_box{animation: fadeIn 0.5s ease-in-out;}

.mypage_form_wrap {margin: 0 auto; }
.mypage_form_wrap .mypage-profile {margin-bottom: 40px; text-align: center;}
.mypage_form_wrap .mypage-profile__name { display: inline-block; position: relative; }
.mypage_form_wrap .mypage-profile__name .name_tit { font-size: 24px; font-weight: 300; color: #333; margin: 0; position: relative; display: inline-block; }
.mypage_form_wrap .mypage-profile__name .name { font-weight: 600; color: var(--primary); position: relative;margin-right:3px; }
.mypage_form_wrap .mypage-profile__name .name:after { content: ''; position: absolute; width: 100%; height: 2px; background: var(--primary); left: 0; bottom: -4px; opacity: 0.4; }

.mypage_form_wrap .sub_tab_wrap { display: flex;width:100%;;align-items: center;gap: 6px; margin-bottom: 40px; position: relative;overflow: hidden; }
.mypage_form_wrap .sub_tab {border-radius: 10px; flex: 1; border:1px solid var(--variant-dark); background-color: #fff; position: relative; transition: all 0.25s ease; }
.mypage_form_wrap .sub_tab a { text-decoration: none; font-size: 1rem; font-weight: 500; color: #555; display: flex; justify-content: center; align-items: center; height: 56px; transition: all 0.25s ease; }
.mypage_form_wrap .sub_tab.on {background-color: #edf2f7;border-color: rgba(0, 94, 196, 0.2);pointer-events: none;}
.mypage_form_wrap .sub_tab.on a { color: var(--primary);}
.mypage_form_wrap .sub_tab:hover:not(.on) {background-color: #edf2f7;border-color: #cbd5e0;}
.mypage_form_wrap .sub_tabcon_wrap { width: 100%; position: relative; }
.mypage_form_wrap .sub_tabcon { display: none; animation: fadeIn 0.5s ease-in-out; width: 100%; }
.mypage_form_wrap .sub_tabcon.on { display: block; }

.mypage_form_wrap #my_info .mypage_form {background: #fff;border-radius:10px; padding:2rem 1.5rem; box-shadow: none; max-width: 100%; }

.mypage_form_wrap .form-group { margin-bottom: 20px; display: flex; align-items: center; }

.mypage_form_wrap .col-form-label { font-size: 15px; color: #666; width: 30%; padding-right: 20px; font-weight: 500; }
.mypage_form_wrap .col-form-label span { color: var(--primary); margin-left: 2px; }
.mypage_form_wrap .col-sm-8 { width: 70%; }

.mypage_form_wrap .form-control { display: block; width: 100%; height: 50px; font-size: 15px; padding: 0 15px; border-radius: 8px; background-color: #f8f9fa; border: 1px solid #eee; outline: none; transition: all 0.2s ease-in-out; }
.mypage_form_wrap .form-control::placeholder { color: #bbb; font-size: 14px; }
.mypage_form_wrap .form-control:focus { border-color: var(--primary); background-color: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(0, 94, 196, 0.1); }
.mypage_form_wrap .form-control[readonly] {background-color: #e9ecef;color: #6c757d;border: 1px solid #ced4da;opacity: 0.65;cursor: not-allowed;box-shadow: none;}

.mypage_form_wrap .btn_black { height:44px; padding: 0 24px; background: #f8f9fa; color: #333; border: 1px solid #eee; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.mypage_form_wrap .btn_black:hover { background: #edf2f7; border-color: #ddd; color: var(--primary); }
.mypage_form_wrap .btn_wrap { margin-top: 40px; display: flex; justify-content: center; }
.mypage_form_wrap .btn_confirm { min-width: 180px; height: 54px; background-color: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; padding: 0 32px; box-shadow: 0 4px 12px rgba(0, 94, 196, 0.15); }
.mypage_form_wrap .btn_confirm:hover { background-color: #004ba0; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 94, 196, 0.2); }

.mypage_form_wrap .leave-group{ align-items:flex-start; }
.mypage_form_wrap .leave-group .check-area label{display:flex;align-items:center;color:var(--variant-light);}
.mypage_form_wrap .leave-group textarea{ padding-top:6px;padding-bottom:6px; }
.mypage_form_wrap .leave-group input{width:20px;height:20px;margin-right:8px;}

@media (max-width: 768px) {
    .mypage_form_wrap #my_info .mypage_form{padding:1.2rem 1rem;}

    .mypage_form_wrap .mypage-profile { margin-bottom: 30px; }
    .mypage_form_wrap .mypage-profile__name .name_tit { font-size: 20px; }

    .mypage_form_wrap .sub_tab_wrap { border-radius: 8px; }
    .mypage_form_wrap .sub_tab a { font-size:14px; height: 50px; }

    .mypage_form_wrap .form_box { }
    .mypage_form_wrap .form-group { flex-direction: column; align-items: flex-start; }

    .mypage_form_wrap .col-form-label { width: 100%; margin-bottom: 8px; padding: 0; }
    .mypage_form_wrap .col-sm-8 { width: 100%; }

    .mypage_form_wrap .form-control { height: 46px; }

    .mypage_form_wrap .btn_confirm { min-width: 160px; height: 50px; font-size: 15px; padding: 0 24px; }
}
@media (max-width:480px) {
    .mypage_form_wrap .col-form-label{font-size:14px;}
    .mypage_form_wrap .sub_tab a { font-size:13px;}
}
.mypage_form_wrap .form-group.hidden { display:none; !important; }