@charset "UTF-8";
#container {
  background-color: var(--bg);
}

.member_card {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
  max-width: 560px;
  margin-top: 60px;
  width: 100%;
  padding: 50px;
  margin-inline: auto;
}
.member_card .form-control-feedback {
  top: 50%;
  transform: translateY(-50%);
  right: 10px !important;
  width: 20px !important;
  color: var(--text-3);
}
.member_card .form-control {
  height: 44px;
  width: 100% !important;
}
.member_card .form_item {
  position: relative;
}
.member_card .form_item input {
  width: 100%;
}

.form_head {
  text-align: center;
  margin-bottom: 20px;
}
.form_head strong,
.form_head h2 {
  font-size: 1.8666666667rem;
  font-weight: 600;
}
.form_head p {
  margin-top: 15px;
  font-size: 1rem;
  color: var(--text-2);
}

#captcha #captcha_mp3,
#captcha #captcha_reload {
  border-radius: 6px;
  background-color: var(--bg);
  width: 44px;
  height: 44px;
  text-indent: -9999999999px;
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../img/icons/i_volume.svg);
}

#captcha #captcha_reload {
  border-radius: 10px;
  background-image: url(../img/icons/i_refresh.svg);
}

#captcha legend {
  position: absolute;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999999999px;
  overflow: hidden;
}

#captcha #captcha_img {
  height: 44px;
  border: 1px solid #898989;
  vertical-align: top;
  padding: 0;
  margin: 0;
  width: 120px;
}

#captcha #captcha_info {
  margin-top: 5px;
  width: 100%;
  color: var(--text-3);
  font-size: 0.9333333333rem;
}

#captcha #captcha_key {
  height: 44px;
  width: 150px;
}

.captcha {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/*회원가입*/
#container.register,
#container.register_form {
  background-color: var(--bg);
}

#container_inner.register_form {
  width: 900px;
  min-width: auto;
  max-width: 900px !important;
  display: block !important;
}
#container_inner.register_form .info_txt {
  margin-top: 0;
}

.register table {
  padding-top: 10px;
  border-top: none;
}
.register table th {
  text-align: center;
}
.register table th,
.register table td {
  font-size: 0.8666666667rem;
}
.register .panel {
  border-radius: 10px;
}
.register .form_tip {
  margin-bottom: 0;
}
.register .panel-footer {
  background-color: var(--bg-blue);
  margin-top: 5px;
  border-top: none;
}
.register .register-term {
  height: 150px;
}
.register .panel-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0;
}
.register .panel-heading strong {
  font-weight: 600;
  font-size: 1.2rem;
}
.register .panel-body {
  padding: 0;
}
.register .register-term {
  border-color: var(--border);
}
.register .card {
  padding: 0;
}

#container_inner.register_form {
  width: 900px;
  min-width: auto;
  display: block;
}

#sns_register .sns-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sns-wrap .sns-icon {
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 44px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 48%;
  font-size: 1rem;
  width: calc(50% - 5px);
}

.sns-wrap .sns-icon .ico {
  width: 30px;
  height: 30px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sns-wrap .sns-naver .ico {
  background-image: url(../img/sns_naver.png) !important;
}

.sns-wrap .sns-kakao .ico {
  background-image: url(../img/sns_kakao.png) !important;
}

.sns-wrap .sns-google .ico {
  background-image: url(../img/sns_google.png) !important;
}

.sns-wrap .sns-facebook .ico {
  background-image: url(../img/sns_facebook.png) !important;
}

/*로그인*/
.sns-wrap {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.sns_tit {
  position: relative;
  margin-block: 30px;
  text-align: center;
}
.sns_tit span {
  position: relative;
  background-color: #fff;
  padding-inline: 10px;
  font-size: 1rem;
  color: var(--text-3);
  margin-inline: auto;
  font-weight: 400;
}
.sns_tit:before {
  content: "";
  left: 0;
  width: 100%;
  border-top: 1px solid var(--border);
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.login .sns-wrap .sns-icon {
  border: none;
  padding: 0;
  width: auto;
}
.login .sns-wrap .sns-icon .txt {
  display: none;
}

.form-footer,
#ol_svc {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.form-footer a,
#ol_svc a {
  font-size: 1.0666666667rem;
  margin: 0;
}
.form-footer a:not(:last-child)::after,
#ol_svc a:not(:last-child)::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 1px;
  height: 10px;
  margin-inline: 10px;
  background: #ccc;
  cursor: default;
}

/*회원가입*/
#sub-wrapper {
  width: 100%;
  height: 100%;
  display: table;
  background: #f9f9f9;
}

#container_inner.container.register {
  margin-inline: auto;
  display: block;
  max-width: none;
  padding: 0;
}

.register_tip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1rem;
  margin-top: 24px;
}
.register_tip i {
  flex: 0 0 auto;
}
.register_tip h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.register_tip .bullet {
  margin-top: 5px;
}

.step_view {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1100px;
  margin-inline: auto;
  padding-bottom: 60px;
  padding-inline: 15px;
  display: none;
}
.step_view.active {
  display: flex;
}
.step_view .left_panel {
  flex: 1;
  padding-right: 30px;
}
.step_view .left_panel .step_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-2);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.step_view .left_panel h2 {
  font-size: 1.8666666667rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 12px;
}
.step_view .left_panel .sub {
  font-size: 1.0666666667rem;
  color: var(--text-3);
  line-height: 1.6;
  margin-bottom: 28px;
}
.step_view .left_panel .btn_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  gap: 10px;
  margin-top: 15px;
  color: var(--blue);
  font-weight: 600;
}
.step_view .left_panel .btn_link:hover {
  text-decoration: underline;
}
.step_view .terms-btn-wrapper #backbtn {
  display: none;
}
.step_view .form_panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 535px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step_view .form_panel fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step_view .form_panel #mb_country_tel {
  width: 150px;
  margin-left: 5px;
}
.step_view .form_panel .panel {
  border-bottom: 0;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: none;
}
.step_view .form_panel .panel:last-child {
  margin-bottom: 0;
}
.step_view .form_panel .resend {
  color: var(--text-2);
}
.step_view .form_panel .resend + .btn {
  text-decoration: underline;
  font-size: 14px !important;
  margin-left: 10px;
}
.step_view .form_panel .sns-wrap {
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.step_view .form_panel .sns-wrap .sns-icon {
  width: 100%;
}
.step_view .form_panel .sns-wrap .txt {
  position: static !important;
  font-size: 15px !important;
  line-height: 44px !important;
}
.step_view .form_panel .btn_wrap_bottom {
  margin-top: 20px;
  justify-content: flex-end;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.step_view .form_panel .btn_wrap_bottom .btn {
  min-width: 120px;
}
.step_view .form_panel .btn_wrap_bottom .btn.btn-gray {
  min-width: 80px;
}
.step_view .form_panel .i_circle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.step_view .form_panel .card_head {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 10px;
  padding-bottom: 15px;
}
.step_view .form_panel .form_item + .form_item {
  margin-top: 20px;
}
.step_view .form_panel .tit_field {
  font-size: 1rem;
}
.step_view .form_panel .captcha {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.step_view .form_panel select.input-sm {
  height: 34px;
  line-height: 34px;
  padding: 6px 12px;
  font-size: 14px;
}
.step_view .form_panel #fregister {
  width: 100%;
}
.step_view .form_panel label {
  display: inline-flex;
}
.step_view .form_panel .file_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.step_view .form_panel .file_wrap input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.step_view .form_panel .file_wrap .file_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.step_view .form_panel .file_wrap .file_btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.step_view .form_panel .file_wrap {
  /* 파일명 표시 */
}
.step_view .form_panel .file_wrap .file_name {
  font-size: 13px;
  color: #555;
}
.step_view .register-term {
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  border-color: var(--border);
  border-radius: 6px;
}
.step_view .panel-footer {
  margin-top: 10px;
  border-top: none;
}
.step_view .table {
  margin-top: 10px;
  border-top: none !important;
}
.step_view textarea.form-control {
  height: 300px;
  box-shadow: none !important;
  background-color: var(--bg);
}
.step_view #oj_before .tit_wrap {
  display: none;
}
.step_view #oj_before .dd .ddTitle .ddTitleText {
  border-left: 1px solid var(--border);
}
.step_view #oj_before #mb_country_tel_msdd {
  width: 140px !important;
  margin-left: 5px;
}
.step_view #oj_before #mb_field {
  height: 48px;
  flex: 1;
}
.step_view #oj_before .next_btn1 {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--primary);
  border-radius: 6px;
  font-weight: 600;
}
.step_view #oj_before .has-feedback .form-control {
  width: 200px;
}
.step_view #oj_before .select2-container--default .select2-selection--single {
  height: 44px;
}
.step_view #oj_before .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
}
.step_view #oj_before .control-label {
  margin-top: 10px;
}
.step_view .join_cls_btn {
  display: none;
}
.step_view #page_login input[type=password] {
  margin-top: 10px;
  height: 48px;
  width: 100%;
}
.step_view .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.step_view .form-group.contury {
  flex-direction: row;
}

.step_nav {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f1f5f9;
}

.step_nav ul {
  display: flex;
  justify-content: center;
  gap: 6%;
  max-width: 1100px;
  margin-inline: auto;
}
.step_nav ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
}
.step_nav ul li::before {
  content: "";
  border-top: 1px solid var(--border-2);
  width: 30px;
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
}
.step_nav ul li:first-child::before {
  display: none;
}
.step_nav ul li .text {
  border-bottom: 2px solid var(--border-2);
  flex: 1;
  padding-bottom: 5px;
}
.step_nav ul li .num {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text-3);
  border: 2px solid var(--border);
  font-weight: 600;
  border-radius: 50%;
}
.step_nav ul li.active {
  color: var(--primary);
}
.step_nav ul li.active .num {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.step_nav ul li.active .text {
  border-bottom-color: var(--primary);
}

.sns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sns-list .sns-icon {
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 44px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 48%;
  font-size: 1rem;
}
.sns-list .sns-icon .ico {
  width: 30px;
  height: 30px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover !important;
}
.sns-list .sns-naver .ico {
  background-image: url(../img/sns_naver.png) !important;
}
.sns-list .sns-kakao .ico {
  background-image: url(../img/sns_kakao.png) !important;
}
.sns-list .sns-google .ico {
  background-image: url(../img/sns_google.png) !important;
}
.sns-list .sns-facebook .ico {
  background-image: url(../img/sns_facebook.png) !important;
}

.input_has_icon {
  position: relative;
}
.input_has_icon i,
.input_has_icon .fa {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 20px !important;
  height: 20px !important;
  right: 10px !important;
  width: 20px !important;
  color: var(--text-3);
}
.input_has_icon i.fa-check,
.input_has_icon .fa.fa-check {
  display: none;
}
.input_has_icon.right i,
.input_has_icon.right .fa {
  right: 10px;
}

.register-form input[type=text],
input[type=password] {
  height: 35px;
}

.register-form .card + .card {
  margin-top: 20px;
}

.pop_howtoset .guide_content {
  line-height: 1.7;
}
.pop_howtoset .guide_content > p {
  margin: 0 0 16px;
}
.pop_howtoset .guide_box {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  background: #fafafa;
}
.pop_howtoset .guide_box h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.pop_howtoset .guide_box p {
  margin: 0;
}
.pop_howtoset .guide_box ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pop_howtoset .guide_box li {
  position: relative;
  padding-left: 15px;
}
.pop_howtoset .guide_box li::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 5px;
  vertical-align: middle;
  cursor: default;
  position: absolute;
  top: 10px;
  left: 0;
}