/*=================================================================================================
// 명    칭 : 회원관련 css
// 처리내용 : 로그인, 회원가입, 회원정보수정, 탈퇴
// 작 성 자 : 2024-01-06 강대인
//=================================================================================================*/

/*-----------------------------------------------------------------------------
 *  Content Box
 *----------------------------------------------------------------------------*/

/* Inner Box */
.inr_box {max-width: 1200px; margin: 0 auto;}
.inr_box.bdr_top {border-top: 1px solid #ddd;padding-top: 80px;}
.inr_box.half_box {display: flex;}
.inr_box.half_box > div {width: 50%;}

.btn_wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}

@media screen and (max-width:520px){
  .inr_box.half_box {flex-wrap: wrap;}
  .inr_box.half_box > div {width: 100%;padding: 0 !important;}
}


/*-----------------------------------------------------------------------------
 *  Login
 *----------------------------------------------------------------------------*/

.login_wrap {max-width:450px; margin: 0 auto;}
.tit_ment {font-size: 30px; font-weight:700; text-align: center;color: #222;}
.login_box {margin: 30px 0;}
.login_box p {position: relative;}
.login_box p + p {margin-top: 10px;}
.login_box p input {width: 100%; height: 60px;padding:15px 20px 0;border: 1px solid #efefef;background: #f4f4f4;font-size: 20px; font-weight: 600; color: #000;border-radius:10px;}
.login_box p label {position: absolute;left: 20px;top: 19px;display: block;transition: all 0.2s ease;pointer-events: none;font-size: 15px;font-weight: 600;color: #94949a;}
.login_box p input:focus {background:#fff;height: 60px;padding:15px 20px 0;}
.login_box p input:focus + label {top:10px;font-size: 13px;color:#000;border-color:#000;}
.login_box p input:valid + label {top:10px;font-size: 13px;}
.login_box .btn_login {display: inline-flex;align-items: center;justify-content: center;position: relative;height: 60px;border-radius: 10px;font-size: 20px;font-weight: 600;width: 100%;background:#237dd2 ;color:#fff;margin-top: 20px; transition: background 0.2s ease;}
.login_box .btn_login:hover {background:#0962b4;}
.login_box .btn_cancel {display: inline-flex;align-items: center;justify-content: center;position: relative;height: 60px;border-radius: 10px;font-size: 20px;font-weight: 600;width: 100%;background:#6e6e6e ;color:#fff;margin-top: 20px; transition: background 0.2s ease;}
.login_box .btn_cancel:hover {background:#555;}
.save_id {display:flex;flex-direction:row; flex-wrap:wrap; justify-content:center;}
.save_id .chk_box {display: inline-block; vertical-align: middle;  margin: 2px 10px 2px 0;}
.save_id .chk_box .chk + label {font-size:15px;color: #000;}
.save_id .chk_box .chk + label:before {margin-right: 8px;}
.login_list {width:100%; display: flex; justify-content: center; align-items: center; padding: 2px 0; margin-top: 30px;}
.login_list li + li {padding-left: 15px;border-left: 1px solid #ddd;margin-left: 15px;line-height: 1;}
.login_list li a {display: block; font-size: 15px; font-weight:600; color:#888;}
.login_list li:hover a {color:#000;}
.login_list li.link_join a {color: #1152D7}
.sns_login {text-align: center;margin-top: 50px;}
.sns_login h4 {font-size: 24px; font-weight: 700; color: #000;margin-bottom: 20px;}
.sns_login a.login_naver {display: inline-block;line-height: 50px;padding: 0 30px; font-size: 16px; font-weight: 600; color:#fff; border-radius: 10px; background:#00bf18;margin: 0 5px}
.sns_login a.login_kakao {display: inline-block;line-height: 50px;padding: 0 30px; font-size: 16px; font-weight: 600; color:#000; border-radius: 10px; background:#f9e000;margin: 0 5px}
.sns_login a.login_naver img {display: inline-block; vertical-align: middle; width:30px;margin-right:5px;}
.sns_login a.login_kakao img {display: inline-block; vertical-align: middle; width:30px;margin-right:5px;}

@media screen and (max-width:768px){
  .tit_ment {font-size: 18px;}
  .sns_login h4 {font-size:20px;}
}
@media screen and (max-width:480px){
  .login_wrap .tit_ment {font-size:16px;}
  .login_box p input {height:55px;padding: 10px 15px 0;}
  .login_box p label {left: 15px;top: 18px;font-size: 14px;}
  .login_box p input:focus + label {top:8px;font-size: 12px;}
  .login_box p input:valid + label {top:8px;font-size: 12px;}
  .login_box .btn_login {height: 55px;font-size: 18px;margin-top: 15px;}
  .login_box .btn_cancel {height: 55px;font-size: 18px;margin-top: 15px;}
  .save_id {text-align: center;}
  .save_id .chk_box .chk + label {font-size: 14px;color: #000;}
  .login_list {float: none;justify-content: center;margin-top: 20px;}
  .login_list li a {font-size: 14px;}
  .sns_login {margin-top: 30px;}
  .sns_login h4 {font-size:20px;margin-bottom: 15px;}
  .sns_login a.login_naver {width: 100%; line-height: 45px;padding: 0 25px;font-size: 15px;margin:5px 0;}
  .sns_login a.login_naver img {width: 25px;}
  .sns_login a.login_kakao {width:100%;line-height: 45px;padding: 0 25px;font-size: 15px;margin: 5px 0}
  .sns_login a.login_kakao img {width: 25px;}
}

/*-----------------------------------------------------------------------------
 *  Join
 *----------------------------------------------------------------------------*/

.join_wrap {max-width:700px;margin: 0 auto;}
.join_box {}
.inputBox {display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 20px;}
.inputBox label {display: block;width: 30%; font-size: 16px;font-weight: 600;}
.inputBox label + input.inp.full {width: 70%;}
.inputBox label + textarea.inp.full {width: 70%;height:150px; line-height:20px; padding:5px;}
.inputBox .btn_input .inp {padding: 0 160px 0 10px;}
.inputBox .btn_input {position: relative;width: 70%}
.inputBox .btn_input button {position: absolute;height: 32px;top: 50%;right: 6px;font-size: 15px; font-weight: 500;transform: translateY(-50%);outline: none;padding: 0 15px;border-radius: 5px;color:#fff;}

.inputBox .radio_input {width: 70%; height: 30px; display: flex; flex-direction: row; align-items: center;}
.inputBox .radio_input label {width:auto; display: inline-block; font-size: 16px; font-weight: 600;  margin-right: 10px;cursor: pointer;}

.inputBox .file_input {width: 70%; height: 70px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;}
.inputBox .file_input input[type='file'] {width: 100%;height: 40px; display: inline-block; padding: 5px;}
.inputBox .file_input .pc_file_wrap {width: 100%;height: 25px; display: inline-block; margin-top:10px;}
.inputBox .file_input .pc_file_wrap input[type='checkbox'] {width:auto; height:auto; display: inline-block;}
.inputBox .file_input .pc_file_wrap label {width:auto; display: inline-block; margin-right:10px; }

.join_box .terms {margin-top: 30px;}
.join_box .terms input {display: none;}
.join_box .terms input + label:before {display: inline-block;content: '';border: 1px solid #ccc;box-sizing: border-box;}
.join_box .err_ment {display: block; width: 100%; margin-top: 10px;font-size: 13px; color:#C91E21;padding-left: 30%}
.join_box .err_ment:before {content: "";display: inline-block; float: left; width: 10px; height: 5px;margin-right: 5px;margin-top: 2px; border:1px solid #C91E21;border-top:none;border-right: none;transform: rotate(315deg)}
.join_box .terms #checkAll + label {font-size: 17px;font-weight: 600;color: #222;cursor: pointer;}
.join_box .terms #checkAll + label:after {left: 6px;top: 7px;}
.join_box .terms input + label:before {display: inline-block;content: '';border: 1px solid #ccc;box-sizing: border-box;}
.join_box .terms #checkAll + label:before {width: 22px;height: 22px;margin: 0 8px -2px 0;}
.join_box .terms_cont {background: #f8f8f8;border-radius: 5px;margin: 15px 0 40px;padding: 10px 20px;box-sizing: border-box;}
.join_box .terms_cont li {padding: 10px 0;}
.join_box .terms_cont input + label {display: block;position: relative;font-size: 15px;color: #444;padding-left: 30px;line-height: 20px;cursor: pointer;}
.join_box .terms_cont input + label:before {position: absolute;left: 0;top: 0;width: 18px;height: 18px;margin: 0 10px 0 0;}
.join_box .terms_cont input + label strong {color: #000;border-bottom: 1px solid #aaa;}

.join_box input.inp { display: inline-block; vertical-align: middle; font-size: 15px; font-weight: 500; color: #000;  padding: 0 10px; height: 62px; margin: 2px; border-radius: 5px; transition: all 0.3s ease;}
input.inp.full {display: block; width: 100%;margin: 0;}

.btn_big {width: 100%;max-width:200px;margin: 20px auto 0;height:55px;background: #237dd2;border-radius: 10px;outline: none;display:block;font-size: 18px;color: #fff;font-weight: 500;transition: all 0.3s ease;}
.btn_big:hover {background:#0962b4;}

.btn_middle {width: 100%;max-width:150px;margin: 15px auto 0;height:55px;background: #237dd2;border-radius: 10px;outline: none;display:block;font-size: 18px;color: #fff;font-weight: 500;transition: all 0.3s ease;}
.btn_middle:hover {background:#0962b4;}

@media screen and (max-width:768px){
  .join_box {}
  .inputBox {display: block;}
  .inputBox label {width: 100%; font-size: 16px;margin-bottom: 10px;}
  .inputBox label + input {width: 100% !important; font-size: 16px;}
  .inputBox label + textarea {width: 100% !important; font-size: 16px;}
  .inputBox .btn_input {width: 100%}
  .inputBox .btn_input .inp {padding: 0 120px 0 10px;}
  .inputBox .btn_input button {height: 28px;right: 5px;font-size: 16px;padding: 0 10px;}
  .join_box .err_ment {width: 100%; margin-top: 5px;padding-left: 0; font-size: 12px;}
  .join_box .terms #checkAll + label {font-size: 16px;}
  .join_box .terms #checkAll + label:before {width: 20px;height: 20px;margin: 0 8px 0 0;}
  .join_box .terms_cont {margin: 15px 0 30px;padding: 10px 15px;}
  .join_box .terms_cont input + label {font-size: 14px;padding-left: 25px;}
  .join_box .terms_cont input + label:before {position: absolute;left: 0;top: 0;width: 18px;height: 18px;margin: 0 5px -5px 0;}
  .join_box .terms_cont input + label strong {color: #000;border-bottom: 1px solid #aaa;}

  .btn_big {max-width:unset; height:50px;font-size: 16px;}
  .btn_middle {max-width:unset; height:50px;font-size: 16px;}
}


/*-----------------------------------------------------------------------------
 *  Find
 *----------------------------------------------------------------------------*/

.find_wrap {max-width: 600px;margin: 0 auto;}
.find_wrap .tit_ment {font-size: 18px;}
.find_wrap .tabs.row .tabs_head {justify-content: center;}
.find_wrap .tabs.row .tabs_head .tab {height: 60px;font-size: 18px;font-weight: 600;padding: 0 30px;border:none;border-bottom:1px solid #ddd;background:none;}
.find_wrap .tabs.row .tabs_head .tabs_head_active {color: #3d7db7;border-bottom:2px solid #3d7db7;}
.find_wrap .tabs.row .tabs_cont {padding:50px 80px 80px;border-radius: 10px;}
.find_box {margin-top: 30px;}

@media screen and (max-width:768px){
  .find_wrap .tabs.row .tabs_head .tab {height: 40px;font-size: 15px;padding: 0 15px;}
  .find_wrap .tabs.row .tabs_cont {padding:50px;}
  .find_wrap .tit_ment {font-size: 16px;}
}
@media screen and (max-width:480px){
  .find_wrap .tabs.row .tabs_cont {padding:30px 40px 50px;}
}

/*-----------------------------------------------------------------------------
 *  Check Box
 *----------------------------------------------------------------------------*/

/* Basic */
.chk_box {display: inline-block;vertical-align: middle;margin: 2px 10px 2px 0;}
.chk_box .chk {display:none;}
.chk_box .chk + label {position: relative;display: inline-block;vertical-align: middle;font-size:14px;line-height:1; color:#444;}
.chk_box .chk + label:before {content:'';display:inline-block;vertical-align: middle;width:20px;height:20px;border-radius: 4px;border:1px solid #ccc;margin-right: 5px;}
.chk_box .chk + label:after {content: '';display: inline-block; position: absolute;left:4px;top:5px;width: 10px;height: 5px;border:2px solid #fff;border-top:none;border-right:none; transform: rotate(-45deg);}
.chk_box .chk:checked + label {color:#000;}
.chk_box .chk:checked + label:before {background:#222; border-color:#222; }