/*=================================================================================================
// 명    칭 : 회원관련 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;}
}


/*-----------------------------------------------------------------------------
 *  input Text
 *----------------------------------------------------------------------------*/

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


input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=password]:focus {border-color:#000;background:#fff; }
input[readonly] {background:#eee !important;color:#888 !important;border: none !important}
input[disabled] {background:#f8f8f8;}
input[readonly]:focus {border-color:#ccc;}

input::placeholder { padding:0 5px; }


/* Size */
input.inp_150 {max-width: 150px}
input.inp_200 {max-width: 200px}
input.inp_300 {max-width: 300px}

@media screen and (max-width:768px){
  input.inp {height: 40px;}
}


/********************************************************

 *  Tabs

 ********************************************************/

/* Tab Row */
.tabs.row {}
.tabs.row .tabs_head {display: flex;}
.tabs.row .tabs_head .tab {display: flex; align-items: center; height: 45px; font-size: 15px; color: #666; background:#f6f6f6; padding:0 20px; border: 1px solid #ddd;cursor: pointer; transition: all 0.3s ease;}
.tabs.row .tabs_head .tab + .tab {margin-left: -1px;}
.tabs.row .tabs_head .tabs_head_active {color:#000;background:#fff; border-bottom-color: #fff; cursor: default;}
.tabs.row .tabs_cont {padding: 20px;border: 1px solid #ddd;margin-top: -1px;}
.tabs.row .tabs_item { display: none;}
.tabs.row .tabs_cont_active {display: block;}


/* Tab Column */
.tabs.col {display: flex;align-items: stretch;}
.tabs.col .tabs_head {position:relative;width:200px;}
.tabs.col .tabs_head .tab {display: flex; align-items: center;height: 45px; font-size: 15px; color: #666; background:#f6f6f6; padding:0 20px; border: 1px solid #ddd;cursor: pointer; transition: all 0.3s ease;}
.tabs.col .tabs_head .tab + .tab {border-top: none;}
.tabs.col .tabs_head .tabs_head_active {color:#000;background:#fff; border-right-color: #fff; cursor: default;}
.tabs.col .tabs_cont {width: 100%; padding: 20px;border:1px solid #ddd;margin-left: -1px;}
.tabs.col .tabs_item { display: none;}
.tabs.col .tabs_cont_active {display: block;}


/*-----------------------------------------------------------------------------
 *  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 {margin: 50px 0;padding:60px 100px; border:1px solid #e5e5e5; border-radius: 20px;}
.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 100px 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;background:#188ef4;color:#fff;}
.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;}
.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;}
.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: 45px; 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 {margin:30px 0;padding:30px 40px;}
  .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 80px 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;}
}