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

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

/* Inner Box */
.inr_box {width:90%;max-width: 1200px; margin: 0 auto;padding:20px 0;}
.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: 20px;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 .chk_box .chk + label {font-size:15px;color: #000;}
.save_id .chk_box .chk + label:before {margin-right: 8px;}
.login_list {float: right;display: flex;align-items: center; padding: 2px 0;}
.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: 16px;}
  .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 .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: 70%; 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;}
.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;}
.join_box 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;}

@media screen and (max-width:768px){
  .join_box {margin:30px 0;padding:30px 40px;}
  .inputBox {display: block;}
  .inputBox label {width: 100%; font-size: 15px;margin-bottom: 10px;}
  .inputBox label + input {width: 100% !important;}
  .inputBox .btn_input {width: 100%}
  .inputBox .btn_input .inp {padding: 0 80px 0 10px;}
  .inputBox .btn_input button {height: 28px;right: 5px;font-size: 14px;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 {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;}
}

/* 기본베이스_회원가입폼 */
#di_join_form { width:100%; margin:0 auto; }
#di_join_form .dc_join_title { color:#152e7f; font-size:1.2em; font-weight:bold; margin:0 0 10px 0; }
#di_join_form .dc_join_title2 { color:#152e7f; font-size:1.2em; font-weight:bold; margin:30px 0 10px 0; border-top:2px solid #152e7f;padding:15px 0 0 0;}
#di_join_form .dc_join_info { background:#F6F9FA; height:97px; padding:18px 30px; color:#666; line-height:20px; margin:0 0 46px 0; }
#di_join_form .dc_join_table { border-bottom:1px solid #d8d7d7; width:100%; color:#777; }
#di_join_form .dc_join_table tr th { min-height:49px; line-height:20px; font-size:1.0em; border-top:1px solid #d8d7d7; padding:5px 0; }
#di_join_form .dc_join_table tr td { height:49px; line-height:25px; border-top:1px solid #d8d7d7;  padding:5px 0 5px 10px;}
#di_join_form .dc_join_table tr td span { color:#b61466; line-height:28px; }
#di_join_form .dc_join_table tr td .dc_input { width:145px; height:32px; line-height:34px; font-size:1.1em; padding:0 9px; border:1px solid #dfdfdf; }
#di_join_form .dc_join_table .dc_phone input { height:32px; line-height:32px; font-size:1.0em; padding:0 9px; border:1px solid #dfdfdf; }
#di_join_form .dc_join_table .dc_phone .btn_addrfind{position: relative;bottom: inherit;left: inherit;display: inline-block;width: 120px;height: 32px;margin: 0;padding: 0;border-top: solid 1px #ddd;border-right: solid 1px #aaa;border-bottom: solid 1px #aaa;border-left: solid 1px #ddd;background:url(../img/common/bg_button_cancle.gif) repeat-x;text-align: center;font-size: 13px;font-weight:bold;;color: #666;line-height: 32px;cursor: pointer;margin-left: 20px;vertical-align: bottom;}
#di_join_form .dc_join_table .dc_addr { padding:10px 0; }
#di_join_form .dc_join_table .dc_addr input { height:32px; line-height:34px; font-size:1.1em; padding:0 9px; border:1px solid #dfdfdf; }
#di_join_form .dc_join_table .dc_addr .btn_addrfind{position: relative;bottom: inherit;left: inherit;display: inline-block;width: 120px;height: 32px;margin: 0;padding: 0;border-top: solid 1px #ddd;border-right: solid 1px #aaa;border-bottom: solid 1px #aaa;border-left: solid 1px #ddd;background:url(../img/common/bg_button_cancle.gif) repeat-x;text-align: center;font-size: 13px;font-weight:bold;;color: #666;line-height: 32px;cursor: pointer;margin-left: 20px;vertical-align: bottom;}
#di_join_form .dc_join_table .dc_file { padding:10px 0; }
#di_join_form .dc_join_table .dc_file input { height:32px; line-height:34px; font-size:1.1em; padding:0 9px; border:1px solid #dfdfdf; }
#di_join_form textarea {padding:3px 5px;border:solid 1px #dfdfdf;background-color:#fff;}
#di_join_form .dc_join_table select { width:146px; height:40px; border:1px solid #dfdfdf; background:#f8f8f8;font-size:14px; }
/* //기본베이스_회원가입폼 끝*/


/* 기본베이스_회원탈퇴*/
#memberLeaveBox{ width:100%; margin:0 auto;}
#memberLeaveBox .leaveTitle { background:#F6F9FA; height:97px; padding:18px 30px; color:#666; line-height:20px; margin:0 0 46px 0; }
#memberLeaveBox #leaveBox{ width:100%;margin-bottom:20px;}
#memberLeaveBox #leaveBox .dc_leave_table { border-bottom:1px solid #d8d7d7; width:100%; color:#777; }
#memberLeaveBox #leaveBox .dc_leave_table tr th { min-height:49px; line-height:49px; font-size:1.1em; border-top:1px solid #dfdfdf; }
#memberLeaveBox #leaveBox .dc_leave_table tr td { min-height:49px; border-top:1px solid #dfdfdf; padding:5px 0 5px 5px;}
#memberLeaveBox #leaveBox .dc_leave_table tr td span { color:#b61466; line-height:28px; }
#memberLeaveBox #leaveBox .dc_leave_table tr td .dc_input { width:145px; height:48px; line-height:48px; font-size:1.1em; padding:0 9px; border:1px solid #dfdfdf; }
#memberLeaveBox #leaveBox .dc_leave_table td .ssInput{height:48px;padding:3px 5px;border:solid 1px #dfdfdf;background-color:#fff; font-size:18px; }
#memberLeaveBox #leaveBox .dc_leave_table textarea {padding:3px 5px;border:solid 1px #dfdfdf;background-color:#fff;}
/* //기본베이스_회원탈퇴 끝*/

.btns_center {text-align:center;align-items: center;justify-content: center;margin:30px auto;}
.btns_center button {border:1px solid #ccc;padding:10px 20px;border-radius:2px;font-size:1em;}
.btns_center button:hover {border:1px solid #666;color:#666;}

/* 기본 테이블 - 리스트용 */
.table_organ1 {width: 100%; margin: 10px 0; border-collapse:collapse; border-spacing:0; font-size:13px;border-top:solid 1px #999;}
.table_organ1 thead tr {background:#f4f4f4; border-bottom:solid 1px #ddd;}
.table_organ1 thead tr th { height:50px; text-align: center; color: #666; font-weight:bold; border-left:1px solid #ddd;border-right:1px solid #ddd; font-size:13px;}
.table_organ1 thead tr th:first-child{border-left:0;}
.table_organ1 thead tr th:last-child{border-right:0;}
.table_organ1 tbody tr{border-bottom:solid 1px #ddd;}
.table_organ1 tbody tr th{height:50px; text-align: center; color: #666; font-weight:bold; font-size:13px;background:#f4f4f4; border-left:1px solid #ddd;border-right:1px solid #ddd; }
.table_organ1 tbody tr th:first-child{border-left:0;}
.table_organ1 tbody tr th:last-child{border-right:0;}
.table_organ1 tbody tr td {height: 50px; padding:10px; text-align:left; color:#666;border-left:1px solid #ddd;border-right:1px solid #ddd;}
.table_organ1 tbody tr td:first-child{border-left:0;}
.table_organ1 tbody tr td:last-child{border-right:0;}
.table_organ1 tbody tr td span{}
.table_organ1 tbody tr td.accent{font-size:25px; font-weight:bold;}
.table_organ1 tbody tr td.accent span{font-size:13px; font-weight:normal; color:#666;}
.table_organ1 tbody tr td.bold{font-weight:bold;}
.table_organ1 tbody tr td.center{text-align:center;}
.table_organ1 tbody tr td.right{text-align:right;}
.table_organ1 tbody tr td.left{text-align:left;}

.table_organ2 {width: 100%; margin: 10px 0; border-collapse:collapse; border-spacing:0; font-size:13px;border-top:solid 1px #ddd;}
.table_organ2 thead tr {background:#f4f4f4; border-bottom:solid 1px #ddd;}
.table_organ2 thead tr th { height:50px; text-align: center; color: #666; font-weight:bold; border-left:1px solid #ddd;border-right:1px solid #ddd; font-size:13px;}
.table_organ2 thead tr th:first-child{border-left:0;}
.table_organ2 thead tr th:last-child{border-right:0;}
.table_organ2 tbody tr{border-bottom:solid 1px #ddd;}
.table_organ2 tbody tr th{height:50px; text-align: center; color: #666; font-weight:bold; font-size:13px;background:#f4f4f4; border-left:1px solid #ddd;border-right:1px solid #ddd; }
.table_organ2 tbody tr th:first-child{border-left:0;}
.table_organ2 tbody tr th:last-child{border-right:0;}
.table_organ2 tbody tr td {height: 50px; padding:10px; text-align:left; color:#666;border-left:1px solid #ddd;border-right:1px solid #ddd;}
.table_organ2 tbody tr td:first-child{border-left:0;}
.table_organ2 tbody tr td:last-child{border-right:0;}
.table_organ2 tbody tr td span{}
.table_organ2 tbody tr td.accent{font-size:25px; font-weight:bold;}
.table_organ2 tbody tr td.accent span{font-size:13px; font-weight:normal; color:#666;}
.table_organ2 tbody tr td.bold{font-weight:bold;}
.table_organ2 tbody tr td.center{text-align:center;}
.table_organ2 tbody tr td.right{text-align:right;}
.table_organ2 tbody tr td.left{text-align:left;}
.table_organ2 tbody tr td img{display:inline;}

.table_organ3 {width: 100%; margin: 10px 0; border-collapse:collapse; border-spacing:0; font-size:13px;border:solid 1px #ddd;}
.table_organ3 tbody tr{}
.table_organ3 tbody tr td {height: 40px; padding:10px; text-align:left; color:#666;}
.table_organ3 tbody tr td.accent{font-size:25px; font-weight:bold;}
.table_organ3 tbody tr td.accent span{font-size:13px; font-weight:normal; color:#666;}
.table_organ3 tbody tr td.bold{font-weight:bold;}
.table_organ3 tbody tr td.center{text-align:center;}
.table_organ3 tbody tr td.right{text-align:right;}
.table_organ3 tbody tr td.left{text-align:left;}
.table_organ3 tbody tr td img{display:inline;}