/*========================================
            USER-FORM PAGE STYLE
=========================================*/
.user-form-part {
  padding-top: 140px/*30px*/;
  padding-bottom:100px;
}

.user-form-logo {
  text-align: center;
  margin-bottom: 25px;
}

.user-form-logo img {
  width: 200px;
}

.user-form-card {
  border-radius: 8px;
  margin-bottom: 20px;
  background: var(--white);
  /*border: 1px solid var(--border);*/
  word-break:keep-all;
}

.user-form-title {
  text-align: center;
  margin-bottom: 50px;
}

.user-form-title h1 {margin-top:50px;	margin-bottom:30px; font-size: 36px;color: var(--black); font-weight:700;}

.user-form-title p {color: #666; text-transform: capitalize;}

.user-form-title .txt_caution {display:inline-block; font-weight:400;}

.user-form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.user-form-social {
  width: 100%;
}

.user-form-social li {
  margin-bottom: 20px;
}

.user-form-social li a {
	display:flex; align-items:center;
  width: 100%;
  font-size: 15px;
  padding: 10px 0px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: capitalize;
  color: var(--black);
  background: var(--white);
  border:1px solid #ddd;
}

.user-form-social li a i {
	display:flex; justify-content:center; width:50px; border-right:1px solid #ddd;
  font-size: 16px;
  margin-right: 20px;
}

.user-form-social li:last-child {
  margin-bottom: 0px;
}

.user-form-social .facebook i {
  color: var(--facebook);
}

.user-form-social .twitter  i {
  color: var(--twitter);
}

.user-form-social .google  i {
  color: var(--google);
}

.user-form-social .instagram  i {
  color: var(--instagram);
}

.user-form-divider {
  width: 1px;
  height: 240px;
  margin: 0px 50px;
  background: var(--border);
  position: relative;
  z-index: 1;
}

.user-form-divider p {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  margin: 0 auto;
  font-style: italic;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--border);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.user-form {
  width: 100%;
}

.user-form .form-group {
  margin-bottom: 20px;
}

.form-button {
  text-align: center;
}

.form-button button {
  width: 100%;
  height: var(--btn-h);
  font-size: 0.9375rem/*14px*/;
  font-weight: 500;
  line-height: var(--btn-h);
  border-radius: var(--bdr-r);
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  background: var(--primary);
}

.form-button p {
  font-size: 15px;
  margin-top: 12px;
  text-transform: capitalize;
}

.form-button p a {
  font-weight: 500;
  margin-left: 5px;
  color: var(--primary);
}

.form-button p a:hover {
  text-decoration: underline;
}

.user-form-remind {
	height:var(--btn-h); line-height:var(--btn-h); margin:0 auto;
  border-radius: var(--bdr-r);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--primary);
}

.user-form-remind p {text-transform: capitalize;}

.user-form-remind p a {
  font-weight: 500;
  margin-left: 8px;
  color: var(--primary); text-decoration:underline;
}

.user-form-remind p a:hover {
  text-decoration: underline;
}

.user-form-footer {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 40px;
}

.user-form-footer p {
  font-size: 14px;
  color: var(--gray);
}

.user-form-footer p a {
  color: var(--primary);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.user-form-footer p a:hover {
  text-decoration: underline;
}

thead tr {background:var(--primary)!important;}
thead tr th {font-size:1rem!important;}

@media (max-width: 767px) {
  .user-form-group {
    display: inherit;
  }
  .user-form-divider {
    width: 100%;
    height: 1px;
    margin: 50px 0px;
  }
}


.user-form-card button {width:100%;}
.user-form-part .text-danger em,
.user-form-group .text-danger em {display: block; margin: -10px 3px 0 3px; font-size:14px; font-style:normal;}
.user-form-part .btn {height:var(--btn-h); line-height:1; font-size:1rem}

.mem_veri_resend .user-form-group,
.active_failed .form-group,
.mt_40 {margin-top:40px;}
.login_sso .user-form-card button,

.login .page_link,
.login_sso .page_link {display:flex; justify-content:center; align-items:center; margin-bottom:40px;}
.login_sso .page_link {margin-bottom:10px}
.login .page_link a,
.login_sso .page_link a {display:block; color:var(--black);}
.login .page_link a:after,
.login_sso .page_link a:after {content:""; display:inline-block; width:1px; height:15px; margin:0 15px; background:#111;}
.login .page_link a:last-child:after,
.login_sso .page_link a:last-child:after {display:none;}

.sns-login {padding:40px 0; border-top:1px solid #ededed;}
.sns-login h2 {margin-bottom:20px; text-align:center; font-size:16px; font-weight:500; color:var(--black);}
.sns-login ul {display:flex; justify-content:center; align-items:center;}
.sns-login li {padding:0 10px;}
.sns-login a {display:block; width:48px; height:48px; border-radius:50px; overflow:hidden;}
.sns-login a img {width:100%; object-fit:cover;}

.non_mem .guide {margin-top:20px; margin-bottom:40px; padding:0 3px; font-size:0.9375rem; color:#c27a0c; text-align:center;}
.non_mem .text-danger {display:block; padding:3px 3px 0 4px; font-size:14px;}

em {font-style:normal;}

.signup .container,
.login .container {max-width:1200px;}
.signup .d-flex {align-items:center; gap:5px;}
.signup .user-form-card {margin-bottom:10px;}
.signup .user-form-group form h5 {margin-top:30px;}
.signup button {max-width:none;}
.signup .d-flex span {display:inline-block; margin-right:20px;}
.signup .check_wrap {margin-right:10px;}
.signup .agree h5 {margin-bottom: .5rem; font-weight: 500; color: var(--black); font-size:1rem;}
.signup .agree li {display:flex; justify-content:space-between; padding:5px 3px; color:#525252;}
.signup .agree li strong {font-weight:500; color:var(--black);}
.signup .agree li label {color:inherit;}
.signup .agree li a {display:inline-block; margin-left:10px; text-decoration:underline;}
.signup  .form-button {margin-top:20px!important;}
.signup .guide {font-size:0.875rem; color:#787878;}
.signup .guide li {position:relative; padding-left:10px;}
.signup .guide li:before {position:absolute; top:0px; left:0; content:"-";}
.signup .form-check {margin-top:30px; margin-bottom:50px;}
.signup .form-check a {margin-left:10px; text-decoration:underline;}

.signup .step {display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:40px;}
.signup .step li {position:relative;  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:2px solid #ebebeb; border-radius:50px; color:#878787; font-size:14px; font-weight:500;}
.signup .step li:not(:last-child):after {position:absolute; top:50%; right:-12px; content:""; width:10px; height:2px; background:#ebebeb;}
.signup .step li.active {background:var(--primary); border:2px solid var(--primary); color:#fff;}

.agree_form .user-form-title {margin-bottom:80px;}
.agree_form .user-form-title h2 {font-size:36px;}
.agree_form h3 {font-size: var(--h5size); color:var(--sec);}
.agree_form textarea {width:100%; height:200px; padding:10px; border:1px solid #ddd; color:#666; font-size:14px;}
.agree_form .form-check {margin-bottom:0; padding:15px 15px 15px 40px; border-bottom:1px solid #ddd; color:var(--black);}
.agree_form .all_agree {background:#f6f6f6;  font-weight:500; border-top:2px solid var(--black);}
.agree_form .ph2 {margin-top:40px;}

.find_id .flex-row {width:100%; max-width:500px; margin:0 auto; margin-top:70px; justify-content:space-between;}
.find_id .flex-row button {width:49%;}
.find_id label {margin-bottom:0;}

.signup.com .form-button {display:flex; gap:5px;}
.signup.com .form-button button {width:50%;}
.signup.com .form-button .btn_outline {color:var(--black);}
.signup.com .form-button .btn_outline:hover {color:#fff;}

.divide .user-form-group {align-items: inherit;}
.divide .user-form-group .user-form-divider {height:auto;}
.divide .user-form-group h6 {display:flex; flex-flow:wrap; margin-bottom:10px;}
.divide .user-form-group h6 p {margin-left:auto; color:#878787; font-size: var(--bodysize); font-weight:400;}
.divide .user-form-group h6 strong {color:#C00;}
.divide .text-danger {font-size:14px;}
.divide .re label:after {content:"*"; margin-left:6px; font-size:700; color:#C00; font-size:inherit;}*/
.divide .form-group li {display:flex; margin-top:5px;}
.divide .form-group li:first-child {margin-top:0;}
.divide .form-group li input {flex:2;}
.divide .form-group li select {flex:1; margin-left:5px; font-size:15px;}
.divide .form-group li button {flex:1; margin-left:5px; background:gray; border-radius:5px; color:#fff;}
.divide .form-group em {display:block; margin-top: 5px; font-style: normal; font-size:14px;}
.divide .form-check {text-align:center;}
.divide .form-button button {max-width:500px;}
.divide .user-form-remind {max-width:500px; margin:0 auto; margin-top:50px;}
.divide .user-form-remind {}
.divide input[type="radio"],
.divide input[type="checkbox"] {display:inline-block; width:1rem; height:1rem; margin-left:3px; margin-right:-4px; vertical-align:middle;}
.divide .type .d-flex {flex-wrap: wrap;}

.active_failed .form-group {margin-bottom:20px;}

/*  브랜치 */
.signup_sel {width:100%; max-width:600px; margin:0 auto; margin-top:40px; }
.signup_sel .user-form-title h2 {color:var(--primary); font-size:36px;}
.signup_sel .user-form-group {flex-direction:column; margin-top:40px;}
.signup_sel .user-form-group a {position:relative; display:block; width:100%; max-width:360px; margin:10px auto; padding:20px; padding-left:60px;  border-radius:20px; font-size:1.125rem; font-weight:500;}
.signup_sel .user-form-group a:after {content:url('/themes/friendme/pro/resources/images/icn_arw.svg'); display:block; position:absolute; top:24px; right:20px;}
.signup_sel .personal a:after {filter: invert(1);}
.signup_sel .biz a:after {filter: invert(13%) sepia(37%) saturate(5145%) hue-rotate(218deg) brightness(107%) contrast(100%);}
.signup_sel .user-form-group i {position:absolute; top:26px; left:20px; font-size:1rem;}
.signup_sel .personal i {opacity:0.6;}
.signup_sel .user-form-group i:after {content:""; display:inline-block; width:1px; height:1rem; margin-left: 14px; vertical-align: bottom; opacity:0.6;}
.signup_sel .personal i:after {background:#fff;}
.signup_sel .biz i:after {background:var(--primary);}
.signup_sel .user-form-group .guide {display:block; font-size:0.875rem; color:#666; font-weight:400;}
.signup_sel .personal a {background:var(--primary); color:#fff;}
.signup_sel .biz a {background:#fff; border:1px solid var(--primary); color:var(--primary);}
.signup_sel .sns h3 {margin-bottom:6px!important; font-size:1.125rem; font-weight:500; color:var(--black);}
.signup_sel .sns .guide {text-align:center; font-size:0.9375rem;}
.signup_sel .sns ul {margin-top:20px;}

/*회원인증*/
.user-form-part .certi-btn {width:120px; height:45px; padding:10px; font-size:0.9375rem;}

/*탈퇴*/
.withdrawal .form-check {margin-left:3px;}

@media (max-width: 768px) {
	.user-form-part {padding-top:60px;}
	.find_id .flex-row {max-width:none;}

	.divide .user-form-group {flex-flow:column wrap;}
	.divide .user-form-group .user-form-divider {height: 1px; width: 100%; margin: 50px 0;}
}

@media (max-width: 576px) {
	html {font-size:14px;}
	html *,
	body {font-size:1rem;}
	:root {
		--bodysize : 14px;
	}

	tbody tr td {padding:10px!important;}

	.user-form-part {padding-top:0;}
	.user-form-part .container {padding-left: 15px; padding-right: 15px;}

	.user-form-card button {max-width:none;}
	.user-form-title h2 {margin-bottom:10px; font-size:28px;}

	.user-form-remind p {font-size:1.4rem;}
	.signup_agree .user-form-title {margin-bottom:0;}
	.signup_agree .user-form-title h2 {font-size:28px;}
	.signup_agree .ph2 {margin-top:20px;}

	.user-form-part .text-danger em {margin-top:-7px; font-size:13px;}

	.non_mem .text-danger {font-size:13px;}
	.user-form-title {margin-top:30px; margin-bottom:30px;}

	.find_id .col-md-12 {padding-left:0; padding-right:0;}
	.find_id .flex-row {margin-top:30px;}

	.active_failed .form-group {margin-top:0px; margin-bottom:10px;}

	.user-form-part  .certi-btn {width:100px;}

}