@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* reset code */
* {
  margin: 0 ;
  padding : 0;
  box-sizing: border-box;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}
html, body {
  width: 100%;
  height: 100%;
  color: #222;
  word-break: keep-all;
}
ul, ol {
  list-style: none;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  border: none;  
  font-weight: 600;
}
button, input {
  outline: none;
}
button, 
input[type="checkbox"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ========== start ========== */
.login_section {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: grid;
  place-items: center;
}
.login_section .centerBox {
  width: 100%;
  min-height: 700px;
}

.logout_web {
  position: absolute;
  top: 40px;
  right: 100px;
  font-size: 16px;
  font-weight: 700;
  color: #929292;
  padding-left: 32px;
  background: #fff url(/images/login_renewal/Sign_out_squre.svg) no-repeat left center / 24px;
}

.title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 64px;
}
.title::before {
  content: "";
  display: block;
  width: 32px;
  height: 8px;
  border-radius: 4px;
  background: #1875FF;
  margin: 0 auto 32px;
}
.choice_user {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.choice_user > div {
  position: relative;
  width: 228px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  padding: 110px 16px 30px;
}
.choice_user > .my_self {
  background: #fff url(/images/login_renewal/my_self.svg) no-repeat top 32px center;
}
.choice_user > .comp_spt_fam {
  background: #fff url(/images/login_renewal/comp_spt_fam.svg) no-repeat top 32px center;
}
.choice_user > .self_pay_fam {
  background: #fff url(/images/login_renewal/self_pay_fam.svg) no-repeat top 32px center;
}
  /* before */
  .choice_user > div::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 8px;    
    border-radius: 8px 8px 0 0;
  }
  .choice_user > .my_self::before {
    background: #2C7FFA;
    opacity: 0.3;
  }
  .choice_user > .comp_spt_fam::before {
    background: #777CE7;
    opacity: 0.3;
  }
  .choice_user > .self_pay_fam::before {
    background: #05C1AB;
    opacity: 0.3;
  }
  .choice_user > .my_self.active::before,
  .choice_user > .comp_spt_fam.active::before,
  .choice_user > .self_pay_fam.active::before  {
    opacity: 1;
  }

  /* after */
  .choice_user > div::after {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    left: 12px;
    background: url(/images/login_renewal/icn_checkfield_unchecked.svg) no-repeat;
  }
  .choice_user > .my_self.active::after {
    background: url(/images/login_renewal/icn_checkfield_checked1.svg) no-repeat;
  }
  .choice_user > .comp_spt_fam.active::after {
    background: url(/images/login_renewal/icn_checkfield_checked2.svg) no-repeat;
  }
  .choice_user > .self_pay_fam.active::after {
    background: url(/images/login_renewal/icn_checkfield_checked3.svg) no-repeat;
  }

.choice_user > div > p {
  text-align: center;
  font-weight: 600;
  color: #595959;
}
/* 이용 가이드 말풍선 */
.user_guide {
	cursor: pointer;
	position: absolute;
	right: -24px;
	top: 12px;
}
.user_guide > div {
	width: 120px;
	height: 40px;
}
.user_guide_tf {
	background: url(/images/login_renewal/user_guide_tf.svg) no-repeat 0 0 / 100%;
}
.user_guide_se {
	background: url(/images/login_renewal/user_guide_se.svg) no-repeat 0 0 / 100%;
}


.choice_user .select {
  position: relative;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #A7A7A7;
  font-size: 15px;
  padding: 0 12px;

  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  background: #fff url(/images/login_renewal/icn_menu.svg) no-repeat right 4px center;
}

/* btn_box */
.btn_box {
  margin: 40px auto 0;
  height: 24px;
  display: flex;
  justify-content: center;
  gap: 40px;
}
.btn_box button {
  display: block;
  border: none;
  color: #595959;
  font-size: 18px;
  font-weight: 700;
  padding-left: 32px;
}
  .add_self_pay_fam {
    background: url(/images/login_renewal/akar-icons_circle-plus-green.svg) no-repeat left center;
  }
  .rm_self_pay_fam {
    background: url(/images/login_renewal/icn_minus.svg) no-repeat left center;
  }
  .examination {
    background: url(/images/login_renewal/akar-icons_circle-plus-blue.svg) no-repeat left center;
  }
  .examination:disabled {  /* disabled */
    cursor: default;
    filter: grayscale(100%);
    opacity: 0.3;
  }

/* input_btn */
.input_btn {
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 352px;
}
.input_btn p {
  text-align: center;
  color: #FF753A;
}
.input_btn input {
  height: 48px;
  border-radius: 4px;
  border: 1px solid #C9C9C9;
  font-size: 16px;
  padding: 0 12px;
  color: #929292;
}
.input_btn button {
  border: none;
}
.input_btn button.setting {
  height: 56px;
  border-radius: 8px;
  background: #929292;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.input_btn button.active {
  background: #2C7FFA;
}
.input_btn button.back {
  margin: 16px auto 0;
  width: 56px;
  font-size: 16px;
  font-weight: 600;
  color: #7A7A7A;
  background: inherit;
  word-break: keep-all;
}


/* layer_popup_section */
.layer_popup_section {
  display: none;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.4);  
}

.layer_popup_section > div {
  /* display: none; */

  position: absolute;
  background: #fff;
  max-height: 90%;
  overflow-y: auto;
  padding: 40px 24px 16px;
  border-radius: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.layer_popup_section > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: #2C7FFA;
}
.layer_popup_section > div.orange::before {
  background: #FF753A;
}
.layer_popup_section > div h4 {
  font-size: 18px;
  text-align: center;
}

  /* 공통 */
  .close {
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 0px;
    width: 32px;
    height: 32px;
    background: url(/images/login_renewal/close.svg) no-repeat 0 0 / 100%;
  }
  .txt_center {
    text-align: center;
  }
  .divide {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  button.default {
    background: #E4E4E4;
    color: #929292;    
  }
  button.active {
    background: #2C7FFA !important;
    color: #fff !important;
  }
  button.line_white {
    border: 1px solid #595959 !important;
    background: #fff !important;
    color: #595959 !important;
  }  
  button.underline {
    display: block;
    background: inherit;
    color: #595959;
    font-size: 16px;
    text-decoration: underline;
  }
  .layer_popup_section select {
    padding: 0 12px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background: #fff url(/images/login_renewal/icn_menu.svg) no-repeat right 4px center;
  
  }

/* regitercheck */
/* .regitercheck {
  display: none;

  width: 400px;
  padding: 40px 32px 24px;
}
.tit_dl {
  margin-top: 8px;
  line-height: 1.4;
}
.tit_dl dt {
  font-size: 14px;
  color: #595959;
}
.tit_dl dd {
  font-size: 12px;
  color: #FF753A;
}

.check_chart {
  margin: 24px 0;
}
.check_chart dl {
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.check_chart dl:not(:last-child) {
  border-bottom: 1px solid #C9C9C9;
  margin-bottom: 8px;
}
.check_chart dt {
  color: #595959;
}
.check_chart dd div {
  text-align: right;
}
.check_chart .alret dt {
  position: relative;
}
.check_chart .alret dt::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -20px;
  width: 16px;
  height: 16px;
  background: url(/images/login_renewal/alert-circle.svg) no-repeat 0 0 / 100%;
}
.check_chart .alret dd {
  color: #FF753A;
  font-size: 12px;
}
.check_chart .adress dt {
  min-width: 80px;
}

.agree_terms {
  display: flex;
  align-items: center;
  color: #C9C9C9;
  margin-bottom: 12px;
}
.agree_terms label {
  cursor: pointer;
}
.agree_terms input[type="checkbox"]+label::before,
.agree_terms input[type="checkbox"]:checked+label::before {
  content: '';
  cursor: pointer;
  padding-left: 12px;
  display: block;
  width: 24px;
  height: 24px;
  background: url(/images/login_renewal/unchecked.svg) no-repeat;
}
.agree_terms input[type="checkbox"]+label::before {
  background: url(/images/login_renewal/unchecked.svg) no-repeat;
}
.agree_terms input[type="checkbox"]:checked+label::before {
  background: url(/images/login_renewal/checked.svg) no-repeat;
}
.agree_terms input[type="checkbox"]+label+label  {
  font-size: 16px;
}
.agree_terms input[type="checkbox"]:checked+label+label {
  color: #2C7FFA;
  font-weight: 700;
}
.agree_terms > span {
  margin-left: auto;
  cursor: pointer;
  text-decoration: underline;
  font-size: 16px;
} */
.term_box {
  display: none;

  background: #eee;
  font-size: 13px;
  padding: 16px 12px;
  color: #7a7a7a;
  height: 150px;
  overflow-y: auto;
  line-height: 1.6;
  /* white-space: pre-wrap; */
}
.term_box .article h4 {
	text-align: left;
	font-size: 14px;
}
.term_box .article:not(:first-child) {
	margin-top: 16px;	
}
.term_box .article ol li {
	margin-left: 8px;
}

/* 
.popup_btn {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.popup_btn button {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
} */

/* userRegisterDup */
.userRegisterDup {
  /* display: none; */

  width: 450px;
}
.userRegisterDup .exact_info {
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
}
.userRegisterDup .exact_info span {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
}
.userRegisterDup .orange {
  color: #FF753A;
}

.userRegisterDup input[type="text"],
.userRegisterDup input[type="radio"],
.userRegisterDup input[type="password"],
.userRegisterDup select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #929292;
  padding: 0 12px;
}
.userRegisterDup input:disabled {
  background: #E4E4E4;
}
.input_info {
  margin: 24px 0;
}
.input_info.gray {
  margin: 16px 0 24px;
  padding: 16px;
  border-radius: 16px;
  background: #F8F8F8;
}
.userRegisterDup .pass_sms button {
  border: 1px solid #929292;
  height: 48px;
  font-weight: 600;
  padding-left: 20px;
  font-size: 14px;
  color: #595959;
}
.userRegisterDup .pass_sms button.pass {  
  background: #fff url(/images/login_renewal/pass.svg) no-repeat 16px center / 20px;
}
.userRegisterDup .pass_sms button.sms {  
  background: #fff url(/images/login_renewal/Message_alt_fill.svg) no-repeat 16px center / 20px;
}
	/* disabled */
	.userRegisterDup .pass_sms button:disabled {
		border: 1px solid #E4E4E4;
	}
	.userRegisterDup .pass_sms button.pass:disabled {  
	  background: #E4E4E4 url(/images/login_renewal/pass.svg) no-repeat 16px center / 20px;
	}
	.userRegisterDup .pass_sms button.sms:disabled {  
	  background: #E4E4E4 url(/images/login_renewal/Message_alt_fill.svg) no-repeat 16px center / 20px;
	}
.input_info .comple {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #638EFF;
}

.input_info dl:not(:last-child) {
  margin-bottom: 24px;
}
.input_info dt {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.input_info dt span {
  font-size: 12px;
  font-weight: 400;
  color: #595959;
}
.input_info dt.essential::after {
  content: " *";
  color: #F8463B;
}
.input_info input[type="radio"]+label {
  cursor: pointer;
  flex: 1;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #929292;
  color: #929292;
  background: #fff;
}
.input_info input[type="radio"]+label,
.input_info input[type="radio"]:checked+label {
  content: '';
  cursor: pointer;
  display: block;
  border-radius: 8px;
}
.input_info input[type="radio"]:checked+label {
  border: 1px solid #2C7FFA;  
  color: #2C7FFA;
  font-weight: 700;
}

  /* disabled */
  .input_info input[type="radio"]:disabled+label {
    cursor: default;
    background: #E4E4E4;
    color: #929292;
    font-weight: 700;
  }


.input_info .has_btn .divide input,
.input_info .has_btn .divide select {
  width: 65%;
}
.input_info .has_btn .divide button {
  width: 35%;
  height: 40px;
  border-radius: 8px;
  background: #0C73BE;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.input_info .has_btn div:not(:last-child) {
  margin-bottom: 8px;
}
.agree_form > ul {
  color: #C9C9C9;
  font-weight: 700;
}
.agree_form > ul > li {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agree_form > ul > li span {
  cursor: pointer;
  color: #595959;
  font-size: 14px;
  text-decoration: underline;
}
.agree_form > ul > li:not(:first-child) {
  padding: 0 12px;
}
.agree_form > ul > li input[type="checkbox"]+label {  
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agree_form > ul > li input[type="checkbox"]+label p {
  margin: 0 auto 0 12px;
}
.agree_form .all_agree {
  margin-bottom: 8px;
  display: block;
  border-radius: 8px;
  border: 1px solid #929292;
  width: 100%;
  font-size: 16px;
  padding: 12px;
  background: #fff;
}

.agree_form > ul > li input[type="checkbox"]+label::before,
.agree_form > ul > li input[type="checkbox"]:checked+label::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
}
.agree_form > ul > li input[type="checkbox"]+label::before {
  background: url(/images/login_renewal/unchecked.svg) no-repeat;
}
.agree_form > ul > li input[type="checkbox"]:checked+label::before {
  background: url(/images/login_renewal/checked.svg) no-repeat;
}
.agree_form > ul > li input[type="checkbox"]:checked+label p {
  color: #2C7FFA;
}


.userRegisterDup button {
  border-radius: 8px;
  width: 100%;
  height: 56px;
  font-size: 16px;
}

.explan {
  margin-top: 24px;
  font-size: 14px;
  text-align: center;
  color: #595959;

}
.explan p:last-child {
  margin-top: 4px;
  font-weight: 700;
}


/* identification */
.identification {
  /* display: none; */
  
  width: 582px;
}
.identification .tit_p {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #595959;
  margin-top: 4px;
}

.popup_tab {
  margin-top: 16px;
  display: flex;
  align-items: center;
  background: #F8F8F8;
  border-radius: 16px;
  height: 56px;
  padding: 6px;
}
.popup_tab > div {
  cursor: pointer;
  flex: 1;
  text-align: center;
  height: 100%;
  line-height: 44px;
  border-radius: 10px;
  font-size: 16px;
  color: #595959;
}
.popup_tab > div.active {
  background: #fff;
  color: #0C73BE;
  font-weight: 600;
}

.SMS_Email {
  margin-top: 32px;
}
.SMS_Email dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.SMS_Email dl:not(:last-child) {
  margin-bottom: 12px;
}
.SMS_Email dt {
  font-size: 16px;
  font-weight: 700;
  width: 110px;
}
.SMS_Email dd {
  /* display: flex; */
  width: calc(100% - 110px);
}
.SMS_Email dd input {
  padding: 0 12px;
  width: 100%;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #A7A7A7;
}

.SMS_Email dd button {
  width: 132px;
  margin-left: 8px;
  border-radius: 4px;
}

.identi_btn {
  margin-top: 32px;
}
.identi_btn button {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  font-weight: 600;
}


/* exam_trans_share */
/* .exam_trans_share {
  display: none;

  width: 450px;  
} */
.exam_tit1 {
  margin: 16px 0 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #595959;
}
/* .exam_trans_share .exam_tit2 {
  font-size: 14px;
  text-align: center;
  color: #595959;
}
.exam_trans_share hr {
  margin: 8px 0 16px;
}
.exam_trans_share dt {
  font-size: 14px;
  font-weight: 600;
  color: #595959;
  margin-bottom: 6px;
}
.exam_trans_share select {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #A7A7A7;
}
.exam_trans_share .exam_btn {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exam_trans_share .exam_btn button {
  width: 100%;
  height: 40px;
  border-radius: 8px;
} */

/* exam_pop */
/* .exam_pop {
  display: none;

  width: 450px;
}
.exam_pop .examPop_btn {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.exam_pop .examPop_btn button {
  flex: 1;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
} */

/* id_ver_info */
/* .id_ver_info {
  width: 658px;
}
.id_ver_info .background {
  margin: 0 auto 8px;
  width: 285px;
  height: 240px;
  background: url(/images/login_renewal/pc_service.svg) no-repeat top 16px center / 100%;
}
.id_ver_info .idVertxt {
  margin: 12px 0 24px;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
}
.id_ver_info .idVertxt span {
  color: #2C7FFA;
}
.layer_popup_section > .id_ver_info {
  padding: 24px 24px;
}
.id_ver_info .id_ver_box {
  border-radius: 8px;
  background: #F8F8F8;
  padding: 16px 24px;
}
.id_ver_info .id_ver_box ul {
  list-style: inside; 
  line-height: 1.6;
  color: #595959;
}
.id_ver_info .agree_terms {
  margin: 32px 16px;
}

.id_ver_info button {
  margin-bottom: 24px;
  display: block;
  margin: 24px auto;
  width: 336px;
  height: 56px;
  border-radius: 8px;
  font-size: 16px;
  background: #E4E4E4;
  color: #929292;
}

.id_ver_info .id_ver_txt {
  text-align: center;
  line-height: 1.6;
} */


/* change_simple_password */
/* .change_simple_password,
.put_simple_password {
  width: 658px;
}
.layer_popup_section > .change_simple_password,
.layer_popup_section > .put_simple_password {  
  padding: 120px 24px 24px;
  background: #fff url(/images/login_renewal/pinSetting_icon.png) no-repeat top 36px center / 80px;
}
.change_simple_password .password_setting_rule ul {
  width: 320px;
}
put_simple_password
.put_simple_password .put_txt {
  text-align: center;
  margin-top: 8px;
  color: #595959;
  line-height: 1.4;
}
.put_simple_password .put_txt span {
  font-weight: bold;
}
.put_simple_password .password_setting {
  margin-top: 24px;
} */


/* =============== change_password (loginInn.jsp) =============== */
.change_password {
  /* display: none; */

  width: 658px;
}
hr.m_24 {
  margin: 24px 0;
}

.password_setting_rule p {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #2C7FFA;
  margin-bottom: 8px;
}
.password_setting_rule ul {
  margin: 0 auto;
  width: 440px;
  list-style: disc;
  line-height: 1.4;
  color: #595959;
}
.password_setting {
  width: 360px;
  margin: 0 auto;
}
.password_setting dl:not(:last-child) {
  margin-bottom: 24px;
}
.password_setting dt {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.password_setting dd input {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  border: 1px solid #979797;
  padding: 0 12px;
  font-size: 14px;
}
.password_setting dd.correct input {
  background: url(/images/login_renewal/correct.svg) no-repeat right 12px center;
}
.password_setting dd .cur {
  display: none;
  margin-top: 4px;
  font-size: 14px;
  color: #2C7FFA;
}
.password_setting dd.correct .cur {
  display: block;
}
.password_setting dd.denied input {
  background: url(/images/login_renewal/alert-circle_red.svg) no-repeat right 12px center;
}
.password_setting dd .den {
  display: none;
  margin-top: 4px;
  font-size: 14px;
  color: #F8463B;
}
.password_setting dd.denied .den {
  display: block;
}
.password_setting .change {
  margin-top: 40px;
  width: 100%;
  height: 56px;
  border-radius: 8px;
  font-size: 16px;
}
.password_setting .underline {
  margin: 16px auto;
}

/* =============== 나눠쓰기 이력 (admin_popup.jsp) =============== */
.adminPopup.w_360 {
  width: 360px;
}
.disable {
  width: 400px;
}
.layer_popup_section > .disable::before {
	background: #0C73BE;
}

.adminPopup hr {
  margin: 8px 0 16px;
}
.adminPopup .table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  font-size: 14px;
}
.adminPopup .table th,
.adminPopup .table td {
  border: 1px solid #e4e4e4;
  padding: 8px 16px;
}
.adminPopup .btn {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
}
.adminPopup .btn:active {
	box-shadow: none;
	top: unset;
	left: unset;
}
.adminPopup .btn button {
  width: 80px;
  /* height: 24px; */
  border-radius: 4px !important;
}
.disable .btn button {
	width: 200px;
	height: 48px;
	border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 700;
}
.disable .btn .btn_popup_close {
  color: #929292 !important;
  background: #E9EFF4;
}
.disable .btn .btn_popup_confirm {
  color: #fff;
  background: #0C73BE !important;
}
.adminPopup .text {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
}
.adminPopup .box {
	padding: 16px 0;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	line-height: 1.4;
}
.adminPopup .blue {
	font-weight: 600;
	color: #2C7FFA;
}
.adminPopup .orange {
	color: #FF753A;
	font-size: 14px;
}

/* viewHistory */
.viewHistory .table_wrap {
	max-height: 590px;
	overflow-y: auto;
}


/* =============== mini_popup =============== */

.layer_popup_section > .mini_popup {
  padding: 16px 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  min-width: 360px;
}
.layer_popup_section > .mini_popup::before {
  display: none;
}
.mini_popup > *:not(.close) {
  margin-top: 16px;
}
.mini_popup .close {
  width: 24px;
  height: 24px;
  height: 24px;
  top: 16px;
  right: 16px;
}
.mini_popup .list {
  font-size: 14px;
  font-weight: 600;
  color: #F8463B;
  border-radius: 8px;
  background: #F8F8F8;
  padding: 10px 16px;
}
.mini_popup button {
	border-radius: 4px;
	width: 100%;
	height: 40px;
	color: #7A7A7A;
}



.w_view {
  display: block;
}
.m_view {
  display: none;
}



/* =============== 모바일 mobile =============== */

@media only screen and (max-width: 768px) {

  .w_view {
    display: none;
  }
  .m_view {
    display: block;
  }

  /* login_section */
  .login_section {
    display: block;
  }
  .login_section .center {
    min-height: unset;
  }
  .login_header {
    /* position: fixed; */
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
  }
  .login_header .goback {
  	background: transparent;
  }
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
  }
  .title::before {
    display: none;
  }
  .goback {
    width: 24px;
    height: 24px;
    background: url(/images/login_renewal/bzv_ic_arrow.svg) no-repeat 0 0 / 100%;
  }
  .logout_m {
    width: 24px;
    height: 30px;
    position: relative;
    background: url(/images/login_renewal/Sign_out_squre.svg) no-repeat top center / 16px;
  }
  .logout_m p {
    position: absolute;
    bottom: 0;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #929292;
    margin-left: -4px;
  }

  .choice_user {
    display: block;
    padding: 24px 16px 0;
  }
  .choice_user > div {
    margin: 0 auto;
    max-width: 328px;
    width: 100%;
  }
  .choice_user > div:not(:last-child) {
    margin-bottom: 24px;
  }
  /* 이용 가이드 말풍선 */
  .user_guide {
  	right: 16px;
  }
  .btn_box {
    flex-direction: column;
    margin: 40px 0;
    padding: 0 16px 224px;
    gap: 16px;
    height: unset;
  }
  .btn_box button {
    margin: 0 auto;
    width: 200px;
    height: 24px;
    text-align: left;    
  }

  .input_btn {
    position: fixed;
    width: 100%;
    bottom: 0;
    /* border-radius: 16px 16px 0px 0px;
    background: #FFF;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
    padding: 24px 16px 0; */
  }
  .input_btn button.setting {
    width: calc(100% + 32px);
    margin-left: -16px;
    border-radius: 0;
    /* margin-top: 12px; */
  }


  /* layer_popup_section */
  .layer_popup_section {
    height: unset;
  }
  .layer_popup_section > div {
    position: static;
    width: 100%;
    height: 100vh;
    transform: unset;
    padding: 0 16px;
    background: #F8F8F8;
  }
  .layer_popup_section > div::before {
    display: none;
  }
  .close {
    display: none;
  }
  .popup_header {
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 16px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .popup_header > div {
    width: 24px;
  }

  /* regitercheck */
  /* .tit_dl {
    text-align: center;
  }
  .check_chart {
    padding: 16px;
    border-radius: 8px;
    background: #FFF;
    border: 1px solid #E4E4E4;
  }
  .check_chart dl {
    font-size: 14px;
  }
  .agree_terms {
    margin-bottom: 24px;
  } */

  /* userRegisterDup */
  .userRegisterDup input[type="text"],
  .userRegisterDup input[type="radio"],
  .userRegisterDup input[type="password"],
  .input_info input[type="radio"]+label,
  .input_info .has_btn .divide button {
  	height: 48px;
  	line-height: 48px;
  }
  .explan p:last-child {
    margin-top: 8px;
    margin-bottom: 160px;
  }
  

  /* exam_pop */
  /* #examPop {
    height: 100vh;
  }
  .layer_popup_section > .exam_pop {
    position: absolute;
    transform: translate(-50%,-50%);
    width: calc(100% - 32px);
    height: unset;
    padding: 40px 0 0;
    border-radius: 8px;

  }
  .layer_popup_section > .exam_pop::before {
    display: block;
  }
  .exam_pop .examPop_btn {
    gap: 0;
  }
  .exam_pop .examPop_btn button {
    border-radius: 0;
    height: 48px;
  } */

  /* change_password */
  .password_setting_rule ul {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 16px;
    font-size: 14px;
  }
  .password_setting dt {
    font-size: 14px;
  }
  .password_setting dd input {
    height: 48px;
  }
  .password_setting .underline {
    font-size: 14px;
    margin: 24px auto;
  }

  /* id_ver_info */
  /* .layer_popup_section > .id_ver_info {
    padding: 0 16px;
  }
  .id_ver_info .background {
    width: 240px;
    height: 208px;
  }
  .id_ver_info .idVertxt {
    font-size: 16px;
  }
  .id_ver_info .id_ver_box {
    border-radius: 8px;
    border: 1px solid #E4E4E4;
    background: #fff;
    font-size: 14px;
    padding-left: 32px;
  }
  .id_ver_info .id_ver_box ul {
    list-style: disc;
  }
  .id_ver_info .agree_terms {
    margin: 24px 0;
  }
  .id_ver_info button {
    width: 100%;
  } */

  /* change_simple_password, put_simple_password */
/*   .layer_popup_section > .change_simple_password,
  .layer_popup_section > .put_simple_password {
    padding: 0 16px;
    background: #fff url(/images/login_renewal/pinSetting_icon.png) no-repeat top 48px center / 80px;
  }
  .change_simple_password .exam_tit1 {
    margin-top: 88px;
  }
  .put_simple_password .put_txt {
    margin-top: 88px;
  } */
  .password_setting {
    width: 100%;
    max-width: 360px;  
    /* IOS 다음에 변경하기 안보이는 문제 */
    padding-bottom: 160px;
  }

  /* exam_trans_share */
/*   #examTransShare {
    height: 100vh;
  }
  .layer_popup_section > .exam_trans_share {
    position: absolute;
    transform: translate(-50%,-50%);
    width: calc(100% - 32px);
    height: unset;
    padding: 40px 16px 24px;
    border-radius: 8px;
  }
  .layer_popup_section > .exam_trans_share::before {
    display: block;
  }
  .exam_trans_share .close {
    display: block;
    width: 28px;
  } */

  /* identification */
  .identification .tit_p {
    margin-top: 16px;
  }
  .popup_tab {
    padding: 4px;
    background: #F8F8F8;
    border-radius: 50px;
  }
  .popup_tab > div {
    line-height: 48px;
  }
  .popup_tab > div.active {
    border-radius: 50px;
  }
  .SMS_Email dl {
    display: block;
  }
  .SMS_Email dl:not(:last-child) {
    margin-bottom: 24px;
  }
  .SMS_Email dt {
    margin-bottom: 8px;
  }
  .SMS_Email dd {
    width: 100%;
  }
  .SMS_Email dd input {
    width: 100%;
  }
  .SMS_Email dd button {
    margin-left: 0;
  }
  
  
  
  /* 모바일 주소검색 */
  .layer_popup_section > .pos_address_popup {
  	background: rgba(0,0,0,0.8);
  	color: #fff;
  }
  .pos_address_popup .close_white {
  	position: absolute;
  	top: 24px;
  	right: 16px;
  	display: block;
  	width: 16px;
  	height: 16px;
  	font-size: 24px;
  	font-weight: 700;
  	background: url(/images/login_renewal/close_white.svg) no-repeat 0 0 / 100%;
  }
  .pos_address_popup .overlay-content {
  	width: calc(100% + 32px);
  	margin-left: -16px;
  }
  .pos_address_popup .pos_address_inner {
  	margin-top: 56px;
  }
  
  
}




/* =============== 아이디 비밀번호 찾기 PC =============== */
.find_ID, .find_PW {
  width: 460px;
}

.input_box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}
.input_box > div {
  display: flex;
  gap: 8px;
}
.input_box > div button {
  width: 134px;
  border-radius: 8px;
}
.input_box input {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #929292;
  padding: 0 12px;
  font-size: 14px;
}
.input_box input::placeholder {
  color: #929292;
}
.select_corp {
  width: 100%;
}
.select_corp li {
  font-size: 14px;
  border-top: 1px solid #C9C9C9;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select_corp li:last-child {
  border-bottom: 1px solid #C9C9C9;
}
.select_corp li button,
.select_corp li a {
  width: 100px;
  height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #7a7a7a;
  background: #EFF1F5;	
}
.select_corp li a {
  text-align: center;
  line-height: 32px;
  border-radius: 8px;
}
.IDfound {
  padding: 24px 0 32px;
  text-align: center;
}
.IDfound .txt {
  font-size: 14px;
}
.IDfound .id {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #3740AA;
}

.find_ID > button,
.IDfound + button,
.find_PW > button {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background: #EFF1F5;
}

/* find_PW */ 
.find_PW .cert_num {
  margin: 24px 0 32px;
  padding: 104px 0 0;
  background: url(/images/login_renewal/kakao.svg) no-repeat top center;
}
.find_PW .cert_num p {
  font-size: 14px;
  text-align: center;
  line-height: 1.6;
}
.find_PW > button:not(:last-child) {
  margin-bottom: 8px;
}
.find_PW .input_cert_num p,
.find_PW .set_new_PW p {
  font-size: 14px;
  text-align: center;
}
.find_PW .input_cert_num p span {
  color: #929292;
}
.find_PW .input_cert_num .underline {
  font-size: 14px;
}

.find_PW .input_box dl {
  margin-top: 8px;
}
.find_PW .input_box dt {
  font-size: 14px;
  margin-bottom: 8px;
}
.timer_wrap {
	display: block;
	position: relative;
}
.findpw-timer {
	width: unset !important;
	position: absolute;
	top: 15px;
	right: 16px;
	color: #F8463B;
	font-size: 14px;
	font-weight: 600;
}

/* =============== 아이디 비밀번호 찾기 mobile =============== */

@media only screen and (max-width: 768px) {

.layer_popup_section > .find_ID, 
.layer_popup_section > .find_PW {
  background: #fff;
  padding-bottom: 72px;
}

.find_ID > button, 
.find_PW > button {
  position: fixed;
  left: 0;
  bottom: 0;
  border-radius: 0;
}

.IDfound {
  padding: 72px 0;
}
.find_PW > button:not(:last-child) {
  margin-bottom: 64px;
}

.find_ID > button,
.IDfound + button,
.find_PW > button {
  margin-bottom: 64px;
}

}

/* =============== pass 인증 실패 PC =============== */
.pass_fail_wrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	max-width: 1920px;
	
	display: grid;
	place-items: center;
}
.pass_fail {
	padding-top: 144px;
	text-align: center;	
	line-height: 1.4;
	background: url(/images/login_renewal/img_Error.svg) no-repeat top center / 135px;
}
.pass_fail .logo {
	cursor: pointer;
	position: absolute;
	top: 40px;
	left: 32px;
	width: 160px;
	height: 56px;
	background: url(/images/common/Carehe_logo.svg) no-repeat 0 0 / 100%;
	
}
.pass_fail button {
	margin: 56px 0 16px;
	width: 328px;
	height: 56px;
	background: #E4E4E4;
	border-radius: 8px;
	color: #929292;
	font-size: 16px;
	font-weight: 600;
}
.pass_fail .txt1 {
	font-size: 18px;
}
.pass_fail .txt2 {
	font-size: 16px;
	color: #595959;
}
.pass_fail .txt2 a {
	font-weight: bold;
}

/* =============== pass 인증 실패 mobile =============== */
@media only screen and (max-width: 768px) {
.pass_fail .logo {
	top: 16px;
	left: 16px;
	width: 96px;
	height: 34px;
}
.pass_fail .txt1 {
	font-size: 16px;
}
.pass_fail .txt2 {
	font-size: 14px;
}
	
}




#identification {
  	  display: none; /* 처음에는 숨김 */
      position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 100;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0,0,0,0.4);  
  }
  
  #identification > div {
	  /* display: none; */
	
	  position: absolute;
	  background: #fff;
	  max-height: 90%;
	  overflow-y: auto;
	  padding: 40px 24px 16px;
	  border-radius: 8px;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	}
	#identification > div::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 16px;
	  background: #2C7FFA;
	}
	#identification > div.orange::before {
	  background: #FF753A;
	}
	#identification > div h4 {
	  font-size: 18px;
	  text-align: center;
	}
    
    /* 전체 컨테이너 스타일 */
    .loading-container, .loading-container-findPwd {
        display: none; /* 초기 숨김 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 투명도 배경 */
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

     /* 점 애니메이션 */
     .dots, .dots-findPwd {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 5px; /* 점 간격 */
     }

     .dot, .dot-findPwd {
         width: 12px;
         height: 12px;
         background-color: #3498db; /* 점 색상 */
         border-radius: 50%;
         animation: bounce 1.5s infinite;
     }

     .dot:nth-child(1), .dot-findPwd:nth-child(1) {
         animation-delay: 0s;
     }

     .dot:nth-child(2), .dot-findPwd:nth-child(2) {
         animation-delay: 0.3s;
     }

     .dot:nth-child(3), .dot-findPwd:nth-child(3) {
         animation-delay: 0.6s;
     }

     @keyframes bounce {
         0%, 80%, 100% {
             transform: scale(0);
         }
         40% {
             transform: scale(1);
         }
     }
     
    /* 팝업 오버레이 스타일 */
     .popup-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: none;
         z-index: 1000;
     }
     
     .popup-overlay-kakao {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: none;
         z-index: 1000;
     }
     
     /* 팝업 컨테이너 스타일 */
     #emailPopup {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 400px;
         background-color: #fff;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
     }
     #emailPopup h2 {
         margin-bottom: 15px;
         color: #333;
     }
     #emailPopup input[type="text"] {
         width: 80%;
         padding: 10px;
         margin-bottom: 15px;
         border: 1px solid #ccc;
         border-radius: 5px;
     }
     #emailPopup button {
         background-color: #007bff;
         color: #fff;
         border: none;
         padding: 10px 20px;
         border-radius: 5px;
         cursor: pointer;
     }
     #emailPopup button:hover {
         background-color: #0056b3;
     }

/* 팝업 오버레이 스타일 */
.email-check-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    z-index: 1000;
    display: none; /* 기본적으로 숨김 */
}

.hp-check-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    z-index: 1000;
    display: none; /* 기본적으로 숨김 */
}


/* 팝업 컨테이너 스타일 */
#emailCheckPopup {
    background-color: white; /* 흰색 배경 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 그림자 */
    text-align: center;
    max-width: 400px;
    width: 90%; /* 화면이 작을 때 반응형으로 조정 */
}

/* 제목 스타일 */
#emailCheckPopup h1 {
    margin-bottom: 15px;
    font-size: 2.5rem;
    color: #333;
}

/* 설명 텍스트 스타일 */
#emailCheckPopup h2 {
    margin-bottom: 20px;
    color: #555;
    font-size: 1.5rem;
}

/* 버튼 스타일 */
#emailCheckPopup button {
    background-color: #007bff; /* 기본 파란색 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

#emailCheckPopup button {
    background-color: #007bff; /* 기본 파란색 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

/* 버튼 호버 효과 */
#emailCheckPopup button:hover {
    background-color: #0056b3; /* 더 진한 파란색 */
}

/* 취소 버튼 다른 색상 */
#cancelButton {
    background-color: #6c757d; /* 회색 */
}

#cancelButton:hover {
    background-color: #5a6268; /* 더 진한 회색 */
}