/* -----------------------------------------
 회원가입
-------------------------------------------- */

.joinNew_wrapper {margin: 0 auto; padding: 5% 0 8%;width:92%;}
.joinNew_wrapper .tt {margin-bottom: 1rem;font-size: 1.5rem; font-weight: 500; color: #3d3d3d;}
.joinNew_wrapper .tt span {color: #DF3732;}
.joinNew_wrapper button {height: 4rem; border-radius: 0.4rem;}
.joinBtnDisabled {color: #a6a6a6;font-size: 16px;font-weight: 500;border: 1px solid #ddd;background: #f8f8f8;}

/* top */
.joinNew_wrapper .joinNew .joinNew_bn {width: 100%;}
.joinNew_wrapper .joinNew .joinNew_bn img {width: 100%;}
.joinNew_wrapper .top {margin: 3% 0; text-align: center;font-size: 2rem; font-weight: 600;}

/* main */
.joinNew_wrapper .main {margin-bottom: 3%;}
.joinNew_wrapper .main .sec {margin-bottom: 3%;}
.joinNew_wrapper .main .sec:last-child {margin-bottom: 0;}
.joinNew_wrapper .main .sec .flxbx {display: flex; align-items: center;justify-content: space-between;gap:0.6rem;}
.joinNew_wrapper .main .sec .inpt_wrap {width: 100%;}
.joinNew_wrapper .main .sec input[type='text'], .joinNew_wrapper .main .sec input[type='password'], .joinNew_wrapper .main .sec textarea {padding:0 1rem;width: 100%;height: 4rem; font-size: 1.5rem;border-radius: 0.4rem;border: 0.1rem solid #D0D0D0; box-sizing: border-box;}
.joinNew_wrapper .main .sec input:focus, .joinNew_wrapper .main .sec textarea:focus {border-color:#000;outline: none;}
.joinNew_wrapper .main .sec input::placeholder, .joinNew_wrapper .main .sec textarea::placeholder {color:  #aeaeae;}
.joinNew_wrapper .main .sec input:read-only {background: #f5f5f5;}
.joinNew_wrapper .main .sec select {padding-left: 0.5rem;height: 4rem; color:#666666;font-size: 1.5rem;border-radius: 0.4rem;border: 0.1rem solid #D0D0D0; background: #fff;outline: none;}
.joinNew_wrapper .main .sec .btn_wrap {width: 8rem;}
.joinNew_wrapper .main .sec .btn_wrap.phonebtn_wrap {width: 11rem;}
.joinNew_wrapper .main .sec button {color:#276ac7; font-size: 1.4rem; font-weight: 500;border: 0.1rem solid #276ac7; background: #fff;}
.joinNew_wrapper .main .sec button.chkbtn {width: 8rem;}
.joinNew_wrapper .main .sec button.phonebtn {width: 11rem;}
.joinNew_wrapper .main .sec button#ok_btn {width: 100%;color:#fff; font-size: 1.4rem; font-weight: 500;background: #276ac7;}

.joinNew_wrapper .main .sec.join_email .flxbx {position: relative;}
.joinNew_wrapper .main .sec.join_email .inpt_wrap {width: 50%;}
.joinNew_wrapper .main .sec.join_email input.inpt_email {width: 100%;}
.joinNew_wrapper .main .sec.join_email select.select_email {width: 100%;}
.joinNew_wrapper .main .sec.join_email .text {width: 5%;text-align: center;font-size: 1.8rem; color: #999;}

.joinNew_wrapper .main .sec.join_email .selBoxDir_wrap {display:none;position: absolute;top:0; width: 50%;}
.joinNew_wrapper .main .sec.join_email .selBoxDir_wrap.on {display: block;}
.joinNew_wrapper .main .sec.join_email input.selBoxDirect_inpt {position: absolute; top:0; padding-right: 2.5rem;}
.joinNew_wrapper .main .sec.join_email .selBoxDirect_xbtn {position: absolute;right: 1rem;transform: translateY(35%);color: #276ac7; font-size: 1.8rem;cursor:pointer;}

.joinNew_wrapper .main .sec.join_phone .inpt_wrap {position: relative;}
.joinNew_wrapper .main .sec.join_phone .inpt_wrap .countdown {position: absolute; top:50%; right: 1rem; transform: translateY(-50%); color:#DF3732;font-weight: 500;}

.joinNew_wrapper .main .sec.join_birth_gender {display: flex; justify-content: space-between; gap:1rem;}
.joinNew_wrapper .main .sec.join_birth_gender .tt {width: fit-content;}
.joinNew_wrapper .main .sec.join_birth_gender .birth {width: 60%;}
.joinNew_wrapper .main .sec.join_birth_gender .birth .birth_num {width: 30%;}
.joinNew_wrapper .main .sec.join_birth_gender .birth .birth_num:first-child {width: 40%;}
.joinNew_wrapper .main .sec.join_birth_gender .gender {width: 40%;}
.joinNew_wrapper .main .sec.join_birth_gender .gender .inpt_wrap {height: 4rem;}
.joinNew_wrapper .main .sec.join_birth_gender .gender .inpt_wrap.flxbx {gap:0;}
.joinNew_wrapper .main .sec.join_birth_gender .gender input {width: 100%; height: 100%; color:#aeaeae;font-size: 1.5rem;font-weight: 500;border:0.1rem solid #d0d0d0;background: #fff;}
.joinNew_wrapper .main .sec.join_birth_gender .gender input:first-child {border-right: 0.1rem solid #D0D0D0; border-radius: 0.4rem 0 0 0.4rem;}
.joinNew_wrapper .main .sec.join_birth_gender .gender input:last-child {border-radius: 0 0.4rem 0.4rem 0;border-left: 0;}
.joinNew_wrapper .main .sec.join_birth_gender .gender input.on {color:#276ac7; border: 0.1rem solid #276ac7;}
.joinNew_wrapper .main .sec.join_birth_gender .gender input:last-child.on .joinNew_wrapper .main .sec.join_birth_gender .gender input:first-child {border-right: 0;}

/* bottom */
.joinNew_wrapper .bottom .bx_agree {padding: 1rem 1.5rem;font-size: 1.5rem; border: 0.1rem solid #D0D0D0; border-radius: 0.4rem;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap {display: flex; align-items: center;gap:1rem;padding: 0.5rem 0;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap_top {margin-bottom: 1rem;padding: 1rem 0 2rem 0;border-bottom: 0.1rem solid #D0D0D0;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap .text.all {font-size: 1.7rem; font-weight: 600;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap .text.text_terms_pop {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap .text span.blue {color:#276ac7;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap .text span.none {color:#999;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap input.chkbx {display: none;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap input.chkbx:checked + .show_chkbx svg path:first-child {stroke:#276ac7; fill:#276ac7;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap input.chkbx:checked + .show_chkbx svg path:last-child {stroke:#fff;}
.joinNew_wrapper .bottom .bx_agree .chk_wrap .show_chkbx {display: inline-block;height: 2.3rem;}

.joinNew_wrapper .bottom .signin .btn_wrap .join_btn {margin:3% 0;width: 100%; height: 5rem; color:#fff; font-size: 1.8rem; border: 0; border-radius: 0.3rem;background: #276ac7;}
.joinNew_wrapper .bottom .signin .in {width: 100%; text-align: center;font-size: 1.5rem;}
.joinNew_wrapper .bottom .signin .in a {color: #276ac7; font-weight: 600;text-decoration: underline;}

/* 팝업 */
.pop {display: none; position: absolute; /*top:50%; left: 50%; transform: translate(-50%, -50%);*/ z-index: 101;width: 90vw; height: 70%; overflow-y: scroll; border-radius: 1rem;background: #fff;}
.pop.active {display: block;}
.pop .pop_inner {padding: 1rem;}
.pop .pop_inner .policy_wrap {margin:0;}
.pop .btn_wrap {position: sticky; bottom: 0; width: 100%; height: 7rem;line-height: 7rem;text-align: center;background: #fff;}
.pop .btn_wrap button {width: 50%; height: 4rem;font-size: 1.625rem;border-radius: 0.5rem;}

.join_mask {position: fixed; top:0; left:0; z-index: 100; opacity: 0.6;background-color: #000;}


@media (max-width: 340px) {
  .joinNew_wrapper .bottom .bx_agree .chk_wrap .text.text_terms_pop .img_wrap span {display: none;}
}

/* -----------------------------------------
 로그인
-------------------------------------------- */
.loginNew_wrapper {margin: 0 auto; padding: 5% 0 8%;width:92%;min-height: 60vh;}
.loginNew_wrapper .top {margin: 3% 0; text-align: center;font-size: 2rem; font-weight: 600;}
.loginNew_wrapper .main .sec {margin-bottom: 5%;width: 100%;}

.loginNew_wrapper .main {font-size: 1.5rem;}
.loginNew_wrapper .main .inpt_wrap {display: flex; flex-direction: column;}
.loginNew_wrapper .main .inpt_wrap input {padding-left: 1rem; height: 5rem; outline: none; font-size: 1.5rem;border:0.1rem solid #D0D0D0;box-sizing: border-box;}
.loginNew_wrapper .main .inpt_wrap input::placeholder {color: #aeaeae;}
.loginNew_wrapper .main .inpt_wrap input:focus {border-color: #000;}
.loginNew_wrapper .main .inpt_wrap input#user_id {border-radius: 0.6rem 0.6rem 0 0;}
.loginNew_wrapper .main .inpt_wrap input#user_pwd {border-radius: 0 0 0.6rem 0.6rem;}

.loginNew_wrapper .main .chkbox_wrap {display: flex;gap:2rem;}
.loginNew_wrapper .main .chkbox_wrap .inner {display: flex; align-items: center;gap:1rem;}
.loginNew_wrapper .main .chkbox_wrap input.chkbx {display: none;}
.loginNew_wrapper .main .chkbox_wrap input.chkbx:checked + .show_chkbx svg path:first-child {stroke:#276ac7; fill:#276ac7;}
.loginNew_wrapper .main .chkbox_wrap input.chkbx:checked + .show_chkbx svg path:last-child {stroke:#fff;}
.loginNew_wrapper .main .chkbox_wrap .show_chkbx {display: inline-block;height: 2.3rem;}

.loginNew_wrapper .main .btns {display: flex; flex-direction: column;gap:1rem;}
.loginNew_wrapper .main .btns button {height: 5rem;font-size: 1.7rem; border-radius: 0.4rem;}
.loginNew_wrapper .main .btns button.login {color:#fff;background: #276ac7;}
.loginNew_wrapper .main .btns button.signin {color:#276ac7;border: 0.1rem solid #276ac7;background: #fff;}

.loginNew_wrapper .main .bottom {display: flex; justify-content: center;}
.loginNew_wrapper .main .bottom a {display: inline-block;color:#666;}
.loginNew_wrapper .main .bottom a:first-child::after {content:"|"; margin: 0 1rem;color:#666;}

/* -----------------------------------------
 아이디 비번 찾기
-------------------------------------------- */
main.find_main .login_tit {font-size: 2rem; font-weight: 600;}
main.find_main .list_form .tt {margin-bottom: 3%;}
main.find_main .list_form > li .wrap_type1 ~ .wrap_type1 {margin-top: 3%;}
main.find_main .list_form > li ~ li {margin: 3% 0;}
main.find_main .sec_reg.write .list_form .bx_num {margin-top:0;}
main.find_main .sec_reg.write .wrap_btn {display: flex;gap:0.6rem;padding: 0;}
main.find_main .sec_reg.write .wrap_btn.flex.space > * {width: 100%;}
main.find_main .sec_reg.write .wrap_btn button {height: 4rem;border-radius: 0.4rem;color:#276ac7;font-weight: 600;border: 0.1rem solid #276ac7;background: #fff;}

main.find_main .bx_input {height: 4rem;border-radius: 0.4rem;}
main.find_main .wrap_type1 {grid-gap: 0.6rem;}
main.find_main .wrap_type1 .find_btn {height: 4rem;border-radius: 0.4rem;color:#276ac7;font-weight: 600;border: 0.1rem solid #276ac7;background: #fff;}
main.find_main .wrap_type1 > div + * {margin-left: 0;}


/* -----------------------------------------
 infoModi2
-------------------------------------------- */
.infoModi2_top {width: 100%;background: #F8FAFB;}
.infoModi2_top li {padding: 3%;line-height: 1.5;}
.joinNew_wrapper.infoModi2 .bottom .bx_agree input#chk_agree {display: none;}
.joinNew_wrapper.infoModi2 .text span.text_none {color:#999;}
.joinNew_wrapper.infoModi2 .txt_type1 {margin-top:0.5rem; color:#666;}
.joinNew_wrapper.infoModi2 .bottom_btn_wrap {display: flex;justify-content: space-between; gap:0.6rem;margin-top: 5%;width: 100%;}
.joinNew_wrapper.infoModi2 .bottom_btn_wrap button {width: 100%;height: 5rem;font-size: 1.8rem;font-weight: 600;}
.joinNew_wrapper.infoModi2 .bottom_btn_wrap button.cancel {color:#276ac7;border: 0.1rem solid #276ac7;background: #fff;}
.joinNew_wrapper.infoModi2 .bottom_btn_wrap button.ok_btn {color:#fff;background: #276ac7;}

/* -----------------------------------------
 mypageDel
-------------------------------------------- */

.joinNew_wrapper.mypageDel .sec.other_con textarea {padding: 1rem; height: 10rem;resize: none;}
.joinNew_wrapper.mypageDel .sec.other_con textarea::placeholder {font-family: 'Pretendard', sans-serif !important;}

.joinNew_wrapper.mypageDel .bottom_btn_wrap {display: flex;justify-content: space-between; gap:0.6rem;margin-top: 5%;width: 100%;}
.joinNew_wrapper.mypageDel .bottom_btn_wrap button {width: 100%;height: 5rem;font-size: 1.8rem;font-weight: 600;}
.joinNew_wrapper.mypageDel .bottom_btn_wrap button.cancel {color:#276ac7;border: 0.1rem solid #276ac7;background: #fff;}
.joinNew_wrapper.mypageDel .bottom_btn_wrap button.ok_btn {color:#fff;background: #276ac7;}

/* -----------------------------------------
 realApply
-------------------------------------------- */
.realApply.joinNew_wrapper label {display: inline-block;}
.realApply.joinNew_wrapper .main .sec .btn_wrap {width: 15rem;}
.realApply.joinNew_wrapper .main .sec .btn_wrap button {width: 100%;}
.realApply.joinNew_wrapper .btn_wrap {width: 100%;}
.realApply.joinNew_wrapper .btn_wrap #ok_btn {margin: 3% 0;width: 100%;height: 5rem;color: #fff;font-size: 1.8rem;border: 0;border-radius: 0.3rem;background: #276ac7;}
