@charset "UTF-8";
@import "./tokens.css";

/* ---- 콘텐츠 기본 설정 ---- */
/* 페이지 타이틀 */
.page-title-wrap {
  /* tokens */
  --pt--gap: var(--gap-4);
  --pt--pb: var(--pc-gap-title-body-xsmall);
  --pt--mb: var(--pc-gap-h2-h3);

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: var(--pt--gap);
  padding-bottom: var(--pt--pb);
  margin-bottom: var(--pt--mb);
  flex-wrap: wrap;
  border-bottom: var(--width-variable-regular) solid var(--divider-gray-light);
}

/* 제목(H1) — Aggro는 .ff-aggro 유틸로 개별 적용 */
.page-title-wrap .h-tit {
  font-weight: var(--typo-weight-medium);
}

/* 오른쪽 유틸 영역 */
.page-title-wrap .content-util {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-left: auto;
}

/* 출력 버튼(칩) */
.page-title-wrap .btn-print {
  --btn-h: var(--size-height-6);
  --btn-px: var(--padding-6);
  --btn-r: var(--radius-medium);

  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-r);
  background: var(--surface-white);
  border: 1px solid var(--border-gray-light);
  color: var(--text-basic);
  line-height: 1;
}

.page-title-wrap .btn-print .svg-icon {
  display: block;
  width: var(--icon--size-medium);
  height: var(--icon--size-medium);
}

.page-title-wrap .btn-print .txt {
  font-size: var(--pc-fs-label-medium);
}

.page-title-wrap .btn-print:hover {
  background: var(--action-secondary-hover);
}

.page-title-wrap .btn-print:active {
  background: var(--action-secondary-pressed);
}

/* 모바일 */
@media (max-width: 780px) {
  .page-title-wrap {
    --pt--pb: var(--mobile-gap-title-body-medium);
    --pt--mb: var(--mobile-gap-h2-h3);
    row-gap: var(--gap-1);
  }

  .page-title-wrap .btn-print .txt {
    font-size: var(--pc-fs-label-small);
  }

  .page-title-wrap .h-tit {
    font-size: var(--mobile-fs-heading-large);
    display: inline-flex;
  }

  .page-title-wrap .content-util {
    justify-content: flex-end;
  }

  .page-title-wrap .btn-print .svg-icon {
    width: var(--icon--size-small);
    height: var(--icon--size-small);
  }
}

/* 인쇄 시 버튼 숨김 */
@media print {
  .page-title-wrap .content-util {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .page-title-wrap .h-tit {
    font-size: var(--mobile-fs-heading-medium);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
컨텐츠 서브 타이틀
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-sub-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-4);
}

h2.section-sub-title {
  padding-left: 30px;
  position: relative;
  font-weight: var(--typo-weight-medium);
  letter-spacing: -0.96px;
}

h2.section-sub-title::before {
  width: 19px;
  height: 18px;
  position: absolute;
  content: "";
  background: url("../images/component/icon/ico_sub_title.svg") no-repeat;
  left: 0;
  top: 5px;
  background-size: contain;
}

@media (max-width: 767px) {
  h2.section-sub-title {
    padding-left: 22px;
    font-size: var(--mobile-fs-heading-small);
  }

  h2.section-sub-title::before {
    width: 16px;
    height: 15px;
    top: 4px;
  }
}

@media (max-width: 480px) {
  .section-sub-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-3);
  }

  .section-sub-title-wrap .table-actions {
    margin-left: 0;
    align-self: flex-end;
  }
}

/* ━━━━━━━━
등록폼 하단 버튼
━━━━━━━━━ */
.btn-bottom-wrap {
  display: flex;
  gap: var(--gap-4);
  justify-content: center;
  align-items: center;
  margin-top: var(--gap-9);
  margin-bottom: var(--gap-9);
}

.btn-bottom-wrap.between {
  justify-content: space-between;
}

.btn-bottom-wrap .bottom-actions {
  display: flex;
  gap: var(--gap-4);
  align-items: center;
}

@media (max-width: 1380px) {
  .btn-bottom-wrap>button[style*="visibility: hidden"] {
    display: none !important;
  }

  .btn-bottom-wrap,
  .btn-bottom-wrap.between {
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-bottom-wrap>.btn.secondary {
    order: 4;
  }
}

@media (max-width: 480px) {

  .btn-bottom-wrap,
  .btn-bottom-wrap.between {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-4);
  }

  .btn-bottom-wrap>.btn {
    flex: 1 1 0;
    min-width: 120px;
  }

  .btn-bottom-wrap>.btn.secondary {
    width: 100%;
  }

  .btn-bottom-wrap .bottom-actions {
    order: 1;
    width: 100%;
    justify-content: space-between;
    gap: var(--gap-4);
  }
  
  .btn-bottom-wrap .bottom-actions.bottom-grid {
    order: 1;
    width: 100%;
    justify-content: space-between;
    gap: var(--gap-4);
    display: grid;
	grid-template-columns: repeat(2, 1fr);
  }

  .btn-bottom-wrap>.btn.outline-danger {
    order: 1;
    flex: 1 1 120px;
  }

  .btn-bottom-wrap .bottom-actions>.btn {
    flex: 1 1 0;
    min-width: 80px;
  }
}

/* ━━━━━━━━━━
Table Filter Form
━━━━━━━━━━━━ */
.filter-box.object-box {
  position: relative;
  overflow: hidden;
}

.filter-box.object-box::before {
  content: url(../images/content/box_mark_obj.png);
  position: absolute;
  bottom: -8%;
  left: -2%;
  display: block;
}

@media (max-width: 1380px) {
  .filter-box.object-box::before {
    bottom: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 480px) {
  .filter-box.object-box::before {
    content: "";
    background-image: url(../images/content/box_mark_obj.png);
    width: 7rem;
    height: 7rem;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
  }
}

.filter-box {
  background: #f8f9fd;
  border: var(--width-variable-regular) solid var(--fb--bd);
  border-radius: 20px;
  padding: 20px 30px;
  box-sizing: border-box;
}

.filter-grid {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr; /* th 너비 변경 20260325 */
  column-gap: var(--gap-8);
  row-gap: var(--gap-6);
  align-items: center;
}

.filter-grid .th {
  font-weight: var(--typo-weight-bold);
  color: var(--text-basic);
  font-size: var(--pc-fs-body-medium);
  line-height: 1.2;
  /*white-space: nowrap;*/
}

.filter-grid .th.top,
.filter-grid .td.top,
.filter-grid .sub-th.top {
  align-self: start;
  margin-top: 8px;
}

.filter-grid .th em {
  display: inline-block;
  color: #e60012;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8em;
  vertical-align: super;
  margin-right: 2px;
}

.filter-grid .th:nth-of-type(2n)+.td {
  padding-left: var(--gap-10);
}

.filter-grid .td {
  min-width: 0;
}

.filter-grid .td .annotation {
  font-size: var(--pc-fs-label-xsmall);
}

.td .inline-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-4);
}

.filter-grid .td .sub-grid-wrapper {
  display: grid;
  flex-direction: column;
  gap: var(--gap-2);
}

.filter-grid .td .sub-grid-wrapper.double {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: var(--gap-8);
  row-gap: var(--gap-6);
}

.sub-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--gap-2);
}

.sub-grid .sub-th {
  font-weight: var(--typo-weight-medium);
  color: var(--text-subtle);
  position: relative;
  padding-left: 10px;
}

.sub-grid .sub-th::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: #11357c;
  border-radius: 1px;
}

.sub-grid .sub-th em {
  display: inline-block;
  color: #e60012;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8em;
  vertical-align: super;
  margin-right: 2px;
}

.sub-grid .sub-td {
  min-width: 0;
}

.special-note-label {
  align-self: start;
  padding-top: 5px;
}

.special-note-field {
  grid-column: 2 / span 3;
}

/* 버튼 정렬 */
.filter-actions {
  display: flex;
  justify-content: center;
  gap: var(--gap-4);
  margin-top: var(--gap-6);
}

/* ━━━━━━━━━━━━
    검사일(기간) 입력 필드 스타일
    - [인풋] ~ [인풋] 구조 구현
       ━━━━━━━━━━━━ */
.input-period {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}

.input-period .period-delimiter {
  font-weight: var(--typo-weight-semibold);
  color: var(--text-basic);
  margin: 0 var(--gap-1);
}

.input-period .form-field {
  flex-grow: 1;
}

/* 폼 영역 구분자 (신청인 / 신청내용) */
.form-area-label {
  font-weight: 600;
  color: #555;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  padding-left: 10px;
  margin-top: 25px;
}

@media (max-width: 1380px) {
  .filter-grid {
    grid-template-columns: auto;
    column-gap: normal;
    row-gap: var(--gap-2);
  }

  .filter-grid.sub-only {
    grid-template-columns: 150px auto;
  }

  .filter-grid:not(.sub-only) {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    row-gap: 0;
  }

  .filter-grid:not(.sub-only)>.th,
  .filter-grid:not(.sub-only)>.td {
    grid-column: 1 / -1;
  }

  /* 라벨 ↔ 필드(쌍 내부) 소간격 */
  .filter-grid:not(.sub-only)>.th {
    margin-bottom: var(--gap-2);
  }

  /* 필드와 필드 사이 대간격 */
  .filter-grid:not(.sub-only)>.td {
    margin-bottom: var(--gap-6);
  }

  .filter-grid:not(.sub-only)>.td:last-child {
    margin-bottom: 0;
  }

  /* 빈 셀은 모바일에서 숨김 */
  .filter-grid:not(.sub-only)>.th:empty,
  .filter-grid:not(.sub-only)>.th:empty+.td:empty {
    display: none;
  }

  /* 기존 td 여백 규칙은 유지(호환) */
  .filter-grid .td {
    margin-bottom: var(--gap-4);
  }

  .filter-grid .td:last-child {
    margin-bottom: 0;
  }

  .filter-box {
    padding: 25px;
  }

  /* 2분할 입력(품종명 등)도 세로 스택 */
  .filter-grid .td .sub-grid-wrapper.double {
    grid-template-columns: 1fr;
  }

  .filter-grid .td .inline-2 {
    grid-template-columns: 1fr;
    gap: var(--gap-3);
  }

  /* 서브 그리드(검정항목) 세로 정렬 */
  .sub-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-1);
    grid-column: auto !important;
  }

  .sub-grid .sub-td {
    margin-bottom: var(--gap-2);
  }

  .judgement-reason-wrap {
    grid-column: 1 / span 4;
    grid-row: auto;
    display: block;
  }

  .judgement-reason-wrap .th,
  .judgement-reason-wrap .td {
    grid-column: auto;
    grid-row: auto;
    padding-top: 0;
  }

  .judgement-reason-wrap .th {
    margin-bottom: var(--gap-1);
  }

  /* nice-select 너비 보장 */
  .form-field.is-select .nice-select {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .filter-grid.sub-only {
    grid-template-columns: auto;
  }

  .filter-grid .th {
    font-size: var(--pc-fs-label-xsmall);
  }
}

@media (max-width: 480px) {
  .filter-grid:not(.sub-only)>.td {
    margin-bottom: var(--gap-4);
  }

  .filter-grid .td,
  .filter-grid .td .input-period,
  .filter-grid .td .form-field,
  .filter-grid .td .form-field .form-field__control {
    min-width: 0;
  }

  .filter-grid .td .custom-input,
  .filter-grid .td .form-select,
  .filter-grid .td .nice-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .input-period {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--gap-2);
  }

  .input-period .form-field {
    min-width: 0;
  }

  .input-period .period-delimiter {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 var(--gap-1);
  }

  .input-period input[type="date"] {
    width: 100%;
    min-width: 0;
  }

  input[type="date"]::-webkit-datetime-edit {
    padding: 0;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
  }
}

@media (max-width: 360px) {
  .input-period {
    grid-template-columns: 1fr;
    row-gap: var(--gap-2);
  }

  .input-period .period-delimiter {
    order: 2;
    text-align: center;
  }

  .input-period .form-field:nth-of-type(1) {
    order: 1;
  }

  .input-period .form-field:last-of-type {
    order: 3;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Guide Box
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.guide-box {
  --guide--bg: var(--surface-white);
  --guide--bd: var(--surface-gray-subtle);
  --guide--radius: var(--radius-large);
  --guide--pad-x: var(--padding-9);
  --guide--pad-y: var(--padding-8);
  --guide--gap: var(--gap-8);

  background: var(--guide--bg);
  border: var(--width-variable-regular) solid var(--guide--bd);
  border-radius: var(--guide--radius);
  padding: var(--guide--pad-y) var(--guide--pad-x);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
  margin-top: var(--number-17);
  margin-bottom: var(--number-10);
}

.guide-box__in {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--guide--gap);
  align-items: start;
}

.guide-aside {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 140px;
}

.guide-aside__card {
  background: var(--primary-0);
  border-radius: var(--guide--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  padding: var(--padding-6) var(--padding-5);
  min-height: 140px;
  width: 100%;
}

.guide-aside .svg-icon {
  width: 40px;
  height: 40px;
}

.guide-title {
  font-size: var(--pc-fs-heading-small);
  color: var(--text-bolder);
  line-height: 1.2;
}

.guide-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

.guide-desc {
  color: var(--text-sub);
  font-size: var(--pc-fs-body-small);
  line-height: 1.6;
}

.guide-divider {
  display: block;
  width: 100%;
  border-top: var(--width-variable-regular) dashed var(--border-gray);
  opacity: 1;
}

.guide-list {
  display: grid;
  gap: var(--gap-1);
  color: var(--text-basic);
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
}

.guide-list .tit {
  font-weight: var(--typo-weight-bold);
}

.guide-list li {
  position: relative;
  padding-left: var(--gap-5);
}

.guide-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-sub);
}

@media (max-width: 1024px) {
  .guide-aside {
    min-width: 120px;
  }

  .guide-aside__card {
    min-height: 120px;
  }
}

@media (max-width: 767px) {
  .guide-box {
    --guide--pad-x: var(--padding-7);
    --guide--pad-y: var(--padding-7);
    margin-top: var(--number-7);
  }

  .guide-box__in {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-5);
  }

  .guide-aside {
    align-self: center;
    order: -1;
    justify-content: center;
    width: 100%;
  }

  .guide-aside__card {
    min-height: auto;
    padding: var(--padding-5) var(--padding-4);
    border-radius: var(--radius-medium);
  }

  .guide-aside .svg-icon {
    width: 20px;
    height: 20px;
  }

  .guide-title {
    font-size: var(--mobile-fs-heading-xsmall);
  }

  .guide-desc,
  .guide-list {
    font-size: var(--mobile-fs-label-small);
  }
}

/* content01_0104_02 인증재료 신청  */
div.table-even {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-10);
}

div.table-even>.w45 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

div.table-even-btn {
  display: flex;
  gap: var(--gap-3);
  width: 65%;
  justify-content: end;
  align-items: center;
}

div.table-even>.w45 .table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

div.table-even>.w45 .table-wrap table {
  flex: 1 1 auto;
  width: 100%;
  border-collapse: collapse;
}

div.table-even>.w45 .table-wrap tbody {
  height: 100%;
}

div.table-even>.w45 .table-wrap td {
  vertical-align: middle;
  height: auto;
  padding-block: var(--padding-3);
}

div.table-even>.w45 .send-actions {
  flex: 0 0 auto;
  margin-top: var(--gap-6);
}

@media (max-width: 1380px) {
  div.table-even {
    flex-direction: column;
    gap: 28px;
  }

  div.table-even>.w45 {
    width: 100% !important;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  div.table-even .section-sub-title-wrap {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  div.table-even .section-sub-title-wrap h2 {
    margin-bottom: 5px;
  }

  div.table-even-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--gap-3);
    row-gap: var(--gap-2);
    width: 100%;
  }

  div.table-even-btn .input-group {
    flex: 1 1 0;
    min-width: 0;
  }

  div.table-even-btn .input-group {
    margin-right: 0 !important;
  }

  div.table-even-btn .table-actions {
    flex: 0 0 100%;
    order: 2;
    display: flex;
    gap: var(--gap-3);
    justify-content: flex-end;
    margin-top: var(--gap-2);
  }

  div.table-even-btn .dash {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: var(--gap-2);
  }
}

/* content01_0303_02 포장검사부  */
div.sub-guide-title {
  background: #f8f9fd;
  border: 1px solid #c1cfee;
  border-radius: 15px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: var(--gap-4);
}

div.sub-guide-title .underline {
  width: 200px;
  border-bottom: 2px solid #333333;
  display: inline-block;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  div.sub-guide-title {
    flex-direction: column;
    padding: 2rem 1rem 1rem;
  }

  div.sub-guide-title .underline {
    width: 100%;
    display: block;
  }

  .sub-guide-title h2 {
    font-size: var(--pc-fs-heading-small);
  }
}

/* content02__무병묘 관리란  */

/* 링크 아이콘 */
.link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ico-link {
  width: 12px;
  height: 12px;
  margin-left: 3px;
}


/* sub02 CSS파일 s*/

/* 서브페이지 타이틀  s*/
.sub-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--padding-13);
  background: linear-gradient(170deg, #F4F4FA 0%, #F3F7FF 33%, #f4f4fe 66%, #f2f5fa 100%);
  border-top-left-radius: var(--radius-xmlarge);
  border-top-right-radius: var(--radius-xmlarge);
  border-bottom-left-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
  max-height: 180px;
  gap: var(--gap-4);
}

.sub-title-wrap .h-tit {
  font-weight: var(--typo-weight-medium);
  letter-spacing: -1.36px;
  padding: 0 var(--padding-6);
}

.sub-title-wrap .sub-title-cont {
  width: 100%;
  max-width: 1410px;
  padding: var(--padding-9) var(--padding-9);
  box-shadow: 0 8px 25px #b5bbcc20;
  display: flex;
  justify-content: center;
  border-radius: var(--radius-xmlarge);
  background-color: var(--surface-white);
  transform: translateY(0);
}

.sub-title-wrap .sub-title-cont .title-cont-txt {
  font-size: var(--pc-fs-body-large);
  line-height: 1.5;
  font-weight: var(--typo-weight-medium);
  color: var(--text-static);
  letter-spacing: -0.4px;
  text-align: center;
}

.sub-title-wrap .sub-title-cont .title-cont-txt>span {
  white-space: nowrap;
}


@media (max-width: 1280px) {
  .sub-title-wrap .sub-title-cont .title-cont-txt>span {
    white-space: wrap;
  }
}

@media (max-width: 1200px) {
  .sub-title-wrap .sub-title-cont .title-cont-txt {
    font-size: var(--pc-fs-heading-small);
    line-height: 1.4;
  }
}

@media (max-width: 767px) {

  .section-sub-cont-wrap {
    margin-top: 0px !important;
  }

  .sub-title-wrap {
    padding-top: var(--padding-9);
  }

  .sub-title-wrap .sub-title-cont {
    padding: var(--padding-8) var(--padding-6);
  }

  .sub-title-wrap .h-tit {
    font-size: var(--mobile-fs-heading-large);
    display: inline-flex;
  }

  .sub-title-wrap .sub-title-cont .title-cont-txt {
    font-size: var(--pc-fs-label-small);
  }
}

@media (max-width: 480px) {


  .sub-title-wrap {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-top: var(--number-13);
    max-height: 100%;
  }

  .sub-title-wrap .sub-title-cont {
    padding: var(--padding-6);
  }

  .sub-title-wrap .h-tit {
    font-size: var(--pc-fs-heading-small);
    text-align: center;
  }

  .sub-title-wrap .sub-title-cont .title-cont-txt {
    font-size: var(--pc-fs-caption-medium);
  }
}

/* 서브페이지 타이틀  e*/




/* 🛑🛑 deco_box s */
.deco_box_wrap .sub-cont-wrap .box-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.deco_box_wrap .sub-cont-wrap .box-wrap>li {
  position: relative;
  width: 100%;
}

.deco_box_wrap .sub-cont-wrap .box-wrap>li::before {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: var(--surface-gray-subtler);
  border-radius: 50%;
}

/* deco_box - necessity(아이콘 변경) s*/
.deco_box_wrap .sub-cont-wrap .box-wrap.necessity>li::after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: url('../images/content/ico_first_svg01.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.necessity>li:nth-child(2)::after {
  background: url('../images/content/ico_first_svg02.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.necessity>li:nth-child(3)::after {
  background: url('../images/content/ico_first_svg03.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.necessity>li:nth-child(4)::after {
  background: url('../images/content/ico_first_svg13.svg') center center / cover no-repeat;
  width: 19px;
}

/* deco_box - necessity(아이콘 변경) e */



/* deco_box - work(아이콘 변경) s */
.deco_box_wrap .sub-cont-wrap .box-wrap.work>li::after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: url('../images/content/ico_first_svg05.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.work>li:nth-child(2)::after {
  background: url('../images/content/ico_first_svg06.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.work>li:nth-child(3)::after {
  background: url('../images/content/ico_first_svg07.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.work>li:nth-child(4)::after {
  background: url('../images/content/ico_first_svg08.svg') center center / cover no-repeat;
  width: 19px;
}

/* deco_box - work(아이콘 변경) e */



/* deco_box - call(아이콘 변경) s */
.deco_box_wrap .sub-cont-wrap .box-wrap.call>li::after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
  top: 10px;
  background: url('../images/content/ico_first_svg09.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.call>li:nth-child(2)::after {
  background: url('../images/content/ico_first_svg10.svg') center center / cover no-repeat;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.call>li:nth-child(3)::after {
  background: url('../images/content/ico_first_svg11.svg') center center / cover no-repeat;
  width: 24px;
  height: 17px;
  right: 9px;
  top: 12px;
}

.deco_box_wrap .sub-cont-wrap .box-wrap.call>li:nth-child(4)::after {
  background: url('../images/content/ico_first_svg12.svg') center center / cover no-repeat;
  width: 19px;
}

/* deco_box - call(아이콘 변경) e */



.deco_box_wrap .sub-cont-wrap .box-wrap .box {
  padding: var(--padding-8) 30px 22px var(--padding--20);
  max-width: 360px;
  max-height: 185px;
  min-height: 175px;
  display: flex;
  flex-direction: column;
  gap: var(--padding-4);
  position: relative;
  z-index: 3;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box::after {
  content: '';
  position: absolute;
  background-color: var(--surface-gray-subtler);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: var(--radius-xmlarge);
  -webkit-mask-image: radial-gradient(circle 75px at 90% 90%, transparent 99%, #000 100%);
  mask-image: radial-gradient(circle 75px at 100% 10%, transparent 99%, #000 100%);

}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-tit {
  font-size: var(--pc-fs-body-xlarge);
  font-weight: 700;
  color: var(--text-basic);
  letter-spacing: var(--typo-letter-spacing-2);
  z-index: 3;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box>ul {
  z-index: 3;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt {
  position: relative;
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
  color: var(--text-basic);
  letter-spacing: var(--typo-letter-spacing-2);
  width: 85%;
  height: 63px;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box:has(.box-txt:nth-of-type(2)) .box-txt {
  margin-bottom: var(--padding-2);
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box:has(.box-txt:nth-of-type(2)) .box-txt:last-of-type {
  margin-bottom: 0;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box:has(.box.befo-txt:nth-of-type(2)) .box-txt.befo {
  height: auto;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt.befo {
  padding-left: var(--padding-4);
  width: auto;
  height: auto;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt.befo::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-first-point);
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt.hidden {
  opacity: 0;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt>strong {
  margin-left: 4px;
}

/* .deco_box_wrap .sub-cont-wrap .box-wrap .box .deco {
  position: relative;
} */

.deco_box_wrap .sub-cont-wrap .box-wrap .box .deco::after {
  content: '';
  position: absolute;
  top: -1px;
  right: 0px;
  background: url('../images/content/box_deco.svg') center center / cover no-repeat;
  width: 108px;
  height: 108px;
}

.deco_box_wrap .sub-cont-wrap .box-wrap .box .deco.befo::after {
  top: -1px;
  right: 0px;
}

.deco_box_wrap .sub-cont-wrap .box .box-txt .link {
  text-decoration: underline;
  text-underline-offset: 4px;
}


.deco_box_wrap .sub-cont-wrap .box .box-txt .link .ico-link {
  width: 12px;
  height: 12px;
  margin-left: 3px;
}


@media (max-width: 1258px) {
  .deco_box_wrap .sub-cont-wrap .box-wrap .box {
    max-height: 180px;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt.befo {
    font-size: var(--pc-fs-body-xsmall);
  }
}

@media (max-width: 1200px) {
  .deco_box_wrap .sub-cont-wrap .box-wrap {
    flex-wrap: wrap;
    column-gap: 0;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap>li {
    width: 49%;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box {
    max-width: none;
    min-height: 0;
    width: 100%;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt {
    height: 48px;
    width: 100%;
    padding-right: var(--padding-4);
  }
}

@media (max-width: 767px) {
  .deco_box_wrap .sub-cont-wrap .box-wrap>li {
    width: 100%;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box {
    padding: var(--padding-7) 30px 15px var(--padding-8);
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-tit {
    font-size: var(--pc-fs-body-small);
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt {
    font-size: var(--pc-fs-label-small) !important;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt {
    height: 35px;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .deco::after {
    width: 95px;
    height: 95px;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-txt.befo::before{
    width: 3px;
    height: 3px;
  }
}

@media (max-width: 500px) {


  .deco_box_wrap .sub-cont-wrap .box-wrap .box .box-tit {
    margin-bottom: var(--padding-5);
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box {
    padding: var(--padding--21) var(--padding--20) var(--padding--21) var(--padding-7);
    justify-content: flex-start;
    gap: 0;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap .box .deco::after {
    width: 95px;
    height: 95px;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap>li::before {
    width: 35px;
    height: 35px;
  }

  .deco_box_wrap .sub-cont-wrap .box-wrap.necessity>li::after {
    width: 14px;
    height: 14px;
    right: 10px;
    top: 10px;
  }
}

/*  deco_box e 🛑🛑*/



/* 🛑🛑 step_box s */
.step_box_wrap .sub-cont-wrap .sec {
  display: flex;
  justify-content: center;
}

.step_box_wrap .sub-cont-wrap .sec>li {
  flex: 1;
  padding: 0 var(--padding--23);
  position: relative;
}

.step_box_wrap .sub-cont-wrap .sec>li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  background: url('../images/content/ico_card_arrow.svg') center center / cover no-repeat;
  width: 20px;
  height: 20px;
}

.step_box_wrap .sub-cont-wrap .sec>li:nth-child(1) {
  padding-left: 0;
}

.step_box_wrap .sub-cont-wrap .sec>li:nth-child(1)::after {
  display: none;
}

.step_box_wrap .sub-cont-wrap .sec>li:nth-child(4) {
  padding-right: 0;
}

.step_box_wrap .sub-cont-wrap .sec .card .card-txt {
  background-color: var(--card-background-color);
  border-radius: var(--radius-full);
  padding: var(--padding--22) var(--padding-4);
  text-align: center;
  font-size: var(--pc-fs-body-small);
  font-weight: var(--typo-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.step_box_wrap .sub-cont-wrap .sec .card .card-txt>span {
  display: block;
  font-weight: var(--typo-weight-medium);
}

@media (max-width: 1314px) {
  .step_box_wrap .sub-cont-wrap .sec .card .card-txt {
    height: 120px;
  }
}

@media (max-width: 1200px) {
  .step_box_wrap .sub-cont-wrap .sec>li {
    padding: 0 var(--padding-4);
  }

  .step_box_wrap .sub-cont-wrap .sec .card .card-txt {
    padding: var(--padding--23) var(--padding-5);
    height: 80px;
    font-size: var(--pc-fs-caption-medium);
  }
}

@media (max-width: 767px) {

  .exp_box_wrap .sub-cont-wrap {
    padding: var(--padding-6) var(--padding-6) var(--padding-6) var(--padding--26) !important;
  }

  .step_box_wrap .sub-cont-wrap .sec {
    flex-direction: column;
    gap: var(--gap-9);
  }

  .step_box_wrap .sub-cont-wrap .sec>li::after {
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .exp_box_wrap .sub-cont-wrap .cont-text {
    font-size: var(--pc-fs-label-small) !important;
  }

  .step_box_wrap .sub-cont-wrap .sec .card .card-txt {
    padding: var(--padding-5) var(--padding-5);
    height: 70px;
  }
}

@media (max-width: 500px) {
  .exp_box_wrap .sub-cont-wrap {
    padding: var(--padding-6) var(--padding-6) var(--padding-6) var(--padding-8) !important;
  }
}

@media (max-width: 380px) {
  .exp_box_wrap .sub-cont-wrap {
    padding: var(--padding-6) !important;
  }

  .exp_box_wrap .sub-cont-wrap .cont-text::before {
    left: -3px !important;
  }
}

/* step_box e 🛑🛑*/



/* 🛑🛑 exp_box s*/
.exp_box_wrap .sub-cont-wrap {
  background-color: var(--primary-0);
  width: 100%;
  border-radius: var(--radius-mlarge);
  padding: var(--padding--22) var(--padding-6) var(--padding--22) var(--padding-11);
}

.exp_box_wrap .sub-cont-wrap .cont-text {
  position: relative;
  width: 100%;
  font-size: var(--pc-fs-body-small);
  line-height: 1.3;
  letter-spacing: -0.64px;
}

.exp_box_wrap .sub-cont-wrap .cont-text::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-point-color);
}

.exp_box_wrap .sub-cont-wrap:has(p:nth-of-type(2)) p {
  margin-bottom: var(--padding-4);
}

.exp_box_wrap .sub-cont-wrap:has(p:nth-of-type(2)) p:last-of-type {
  margin-bottom: 0;
}


.exp_box_wrap .sub-cont-wrap .txt_wrap {
  display: flex;
}

@media (max-width: 767px) {
  .exp_box_wrap .sub-cont-wrap .cont-text::before {
    width: 3px;
    height: 3px;
  }
}

/* exp_box_wrap e 🛑🛑*/



/* 🛑🛑.exp_box 두번째 s */
.exp_box_wrap.two .sub-cont-wrap {
  position: static;
}

.exp_box_wrap.two {
  display: flex;
  gap: 40px;
}

.exp_box_wrap.two .sub-cont-wrap {
  padding: var(--padding--22) var(--padding-6) var(--padding--22) var(--padding-11);
  background-color: var(--surface-white);
  border: 1px solid #e4e5e8;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text {
  padding: 0;
  margin-bottom: var(--padding-4);
  position: relative;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text.h_auto {
  height: auto !important;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text.last {
  margin-bottom: 0;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text::before {
  top: 8px;
  left: -12px;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text.hide {
  opacity: 0;
  display: block !important;
}

.exp_box_wrap.two .sub-cont-wrap .cont-text.non {
  display: none;
}


.exp_box_wrap.two .exp_first,
.exp_box_wrap.two .exp_second {
  flex: 1;
}

.exp_box_wrap.two .exp_second .link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.exp_box_wrap.two .exp_second .link .ico-link {
  width: 12px;
  height: 12px;
  margin-left: 3px;
}

@media (max-width: 1258px) {
  .exp_box_wrap.two .sub-cont-wrap .cont-text {
    height: 42px;
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text.last {
    height: auto;
  }
}

@media (max-width: 1020px) {
  .exp_box_wrap.two .sub-cont-wrap .cont-text.last {
    height: 42px;
  }
}

@media (max-width: 767px) {
  .exp_box_wrap.two {
    flex-direction: column;
  }

  .exp_box_wrap.two .sub-cont-wrap {
    padding: var(--padding-6) var(--padding-6) var(--padding-6) var(--padding-9);
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text {
    height: auto;
    font-size: var(--pc-fs-caption-medium);
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text.hide {
    display: none !important;
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text.last {
    height: auto;
  }

  .exp_box_wrap.two .exp_second .sub-cont-wrap .cont-text:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text.pb30 {
    padding-bottom: 0 !important;
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text::before{
    width: 3px;
    height: 3px;
  }
}

@media (max-width: 380px) {
  .link .ico-link {
    width: 10px !important;
    height: 10px !important;
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text,
  .exp_box_wrap .sub-cont-wrap .cont-text {
    padding-left: 8px;
  }

}

/* exp_box 두번째 e 🛑🛑 */




/* 🛑🛑 port_box s */
.port_box_wrap .sub-cont-wrap {
  width: 100%;
  padding: var(--padding-13) 0;
  background-color: var(--primary-0);
  border-radius: var(--radius-mlarge);
  text-align: center;
}

.port_box_wrap .sub-cont-wrap .effect-title {
  display: flex;
  justify-content: center;

}

.port_box_wrap .sub-cont-wrap .effect-title .title {
  flex: 1;
  position: relative;
  font-size: var(--pc-fs-heading-large);
  color: var(--text-basic-inverse);
  font-weight: var(--typo-weight-medium);
  padding: 10px 0;
  max-width: 425px;
  background: url('../images/content/title_bubb_bg.png') center center / 100% no-repeat;
  width: 100%;
  height: 74px;
  line-height: 1.0;
}

.port_box_wrap .sub-cont-wrap .effect-title .title > span{
  font-size: var(--pc-fs-heading-medium);
  color: var(--text-basic-inverse);
  font-weight: var(--typo-weight-medium);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto;

}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li {
  flex: 1;
  max-width: 370px;
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1) {
  transform: translateX(25px);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
  transform: translateX(-25px);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box {
  padding: var(--padding--24) 0;
  background-color: rgba(64, 101, 218, 0.05);
  border: 1px solid var(--graphic-55);
  border-radius: var(--radius-box);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--padding-4);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box.gree {
  background-color: rgba(13, 170, 143, 0.05);
  border: 1px solid var(--graphic-65);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box.re {
  background-color: rgba(221, 73, 107, 0.05);
  border: 1px solid var(--graphic-75);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box.pur {
  background-color: rgba(115, 86, 248, 0.05);
  border: 1px solid var(--graphic-95);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-top {
  font-size: var(--pc-fs-heading-small);
  line-height: 1.2;
  letter-spacing: -0.72px;
  font-weight: var(--typo-weight-semibold);
  color: var(--graphic-60);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-top.gree {
  color: var(--graphic-85);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-top.re {
  color: var(--graphic-80);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-center {
  font-size: var(--pc-fs-heading-small);
  line-height: 1.2;
  letter-spacing: -0.72px;
  font-weight: var(--typo-weight-semibold);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-center span {
  display: block;
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
  padding: 0 12px;
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
  letter-spacing: -0.64px;
  white-space: wrap;
  margin: 0 auto;
  width: 80%;
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-bottom>span {
  color: var(--graphic-60);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-bottom.gree>span {
  color: var(--graphic-85);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-bottom.re>span {
  color: var(--graphic-80);
}

@media (max-width: 767px) {

  .port_box_wrap .sub-cont-wrap {
    padding: var(--padding-7) 0;
  }

  .port_box_wrap .sub-cont-wrap .effect-title {
    padding: 0 var(--padding-5);
  }

  .port_box_wrap .sub-cont-wrap .effect-title .title {
    font-size: var(--pc-fs-heading-small);
    max-width: 300px;
    padding : 18px 0;

  }
  
  .port_box_wrap .sub-cont-wrap .effect-title .title > span{
  	font-size: 0.875rem;
    color: var(--text-basic-inverse);
    font-weight: var(--typo-weight-medium);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-top,
  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-center {
    font-size: var(--pc-fs-body-small);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
    font-size: var(--pc-fs-label-small);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap {
    flex-direction: column;
    padding: 0 var(--padding-4);
    gap: var(--gap-5);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li {
    max-width: none;
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1),
  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
    transform: none;
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box {
    padding: var(--padding-8) 0;
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-center span {
    display: inline;
  }
}

/* port_box e 🛑🛑*/



/* 🛑🛑 port_box 두번째 s */
.port_box_wrap.two .sub-cont-wrap .effect-title .title {
  max-width: 600px;
  background: url(../images/content/title_bubb_bg02.png) center center / cover no-repeat;
  padding: 18px 0 var(--padding--21) 0;
}

.port_box_wrap.two .sub-cont-wrap .effect-title .title.two {
  max-width: 420px;
  background: url(../images/content/title_bubb_bg.png) center center / 100% no-repeat;
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li {
  max-width: 348px;
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1) {
  transform: translateX(36px);
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(2) {
  transform: translateX(12px);
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
  transform: translateX(-12px);
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(4) {
  transform: translateX(-36px);
}

.port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box {
  padding: var(--padding--20) 0;
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
  font-size: var(--pc-fs-navigation-item);
  font-weight: var(--typo-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.72px;
  width: 100%;
}

.port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box .txt-bottom>span {
  color: var(--text-basic);
  display: block;
}

@media (max-width: 1200px) {

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    row-gap: var(--padding-6);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
    font-size: var(--pc-fs-body-small);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
    transform: translateX(12px);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(2),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(4) {
    transform: translateX(-12px);
  }
}

@media (max-width: 767px) {

  .port_box_wrap.two .sub-cont-wrap .effect-title .title {
    padding: var(--padding--21) 0;
    background: url(../images/content/title_bubb_bg03.png) center center / 100% no-repeat;
    max-width: 440px;
    height: 104px;
    font-size: var(--pc-fs-heading-medium);
    font-weight: var(--typo-weight-medium);
    line-height: 1.3;
    letter-spacing: -1.04px;

  }

  .port_box_wrap.two .sub-cont-wrap .effect-title .title.two {
    height: auto;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-title .title>span {
    display: block;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
    transform: translateX(20px);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(2),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(4) {
    transform: translateX(-20px);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box-wrap .effect-box {
    padding: var(--padding-6) 0;
    gap: var(--padding-2);
  }

  .port_box_wrap .sub-cont-wrap .effect-cont .effect-box .txt-top {
    margin-bottom: 5px;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
    font-size: var(--pc-fs-label-small);
    font-weight: var(--typo-weight-medium);
    padding: 0 12px;
  }
}

@media (max-width: 586px) {
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box {
    height: 100px;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3) {
    transform: translateX(14px);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(2),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(4) {
    transform: translateX(-14px);
  }

}

@media (max-width: 360px) {

  .port_box_wrap .sub-cont-wrap {
    padding: var(--padding-8) 0;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-title .title {
    font-size: var(--pc-fs-body-small);
    padding: 13px 0 22px 0;
    height: 70px;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-title .title.two {
    padding: 13px 0 17px 0;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box {
    height: 65px;
    padding: var(--padding-5) 0;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-4);
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(1),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(3),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(2),
  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box-wrap>li:nth-child(4) {
    transform: none;
  }

  .port_box_wrap.two .sub-cont-wrap .effect-cont .effect-box .txt-bottom {
    font-size: var(--pc-fs-label-small);
  }

}

/* port_box 두번째 e 🛑🛑 */




/* 🛑🛑 intro_box s */
.intro_box_wrap .sub-cont-wrap .box-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.intro_box_wrap .sub-cont-wrap .box-wrap>li {
  flex: 1;
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box {
  background-color: var(--primary-15);
  padding: 32px 30px 32px var(--padding-semi-max);
  border-radius: var(--radius-mlarge);
  position: relative;
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 30px;
  background: url('../images/content/ico_intro_01.svg') center center / cover no-repeat;
  width: 66px;
  height: 66px;

}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box.gree {
  background-color: var(--secondary-25);
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box.gree::before {
  background: url('../images/content/ico_intro_02.svg') center center / cover no-repeat;
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box.pur::before {
  background: url('../images/content/ico_intro_03.svg') center center / cover no-repeat;
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box.pur {
  background-color: var(--secondary-35);
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-top {
  font-size: var(--pc-fs-caption-medium);
  color: var(--text-sub);
  font-weight: var(--typo-weight-bold);
  letter-spacing: -0.56px;
}

.intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
  font-size: var(--pc-fs-body-xlarge);
  font-weight: var(--typo-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.8px;
  margin-top: var(--number-4);
  width: 90%;
}

@media (max-width: 1470px) {
  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
    height: 78px;
  }
}

@media (max-width: 1237px) {
  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
    word-break: break-all;
  }
}

@media (max-width: 1200px) {
  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box {
    padding: var(--padding-16) 24px 16px 24px;
  }

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .intro-txt-wrap {
    text-align: center;
  }

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box::before {
    width: 50px;
    height: 50px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .intro_box_wrap.two .sub-cont-wrap .box-wrap .intro-box .txt-bottom,
  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
    word-break: keep-all;
    font-size: var(--mobile-fs-body-medium);
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .intro_box_wrap .sub-cont-wrap .box-wrap {
    flex-direction: column;
  }

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
    height: 45px;
  }
}

@media (max-width: 380px) {

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box {
    padding: 70px 24px 16px 24px;
  }

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box::before {
    top: 10px;
  }

  .intro_box_wrap .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
    height: auto;
    font-size: var(--mobile-fs-body-small) !important;
  }
}

/* intro_box  e 🛑🛑*/



/* 🛑🛑intro_box 두번째 s */
.intro_box_wrap.two .sub-cont-wrap .box-wrap .intro-box .txt-bottom {
  width: 82%;
}

.intro_box_wrap.two .sub-cont-wrap .box-wrap>li:nth-child(1) .intro-box .txt-bottom {
  width: 78%;
}

.intro_box_wrap.two .sub-cont-wrap .box-wrap .intro-box::before {
  background: url(../images/content/ico_intro_04.svg) center center / cover no-repeat;
}

.intro_box_wrap.two .sub-cont-wrap .box-wrap .intro-box.gree::before {
  background: url(../images/content/ico_intro_05.svg) center center / cover no-repeat;
}

.intro_box_wrap.two .sub-cont-wrap .box-wrap .intro-box.pur::before {
  background: url(../images/content/ico_intro_06.svg) center center / cover no-repeat;
}

/* intro_box 두번째 e 🛑🛑 */



/* 🛑🛑flow_box s*/
.flow_box_wrap .sub-cont-wrap .flow-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--gap-7);
}

.flow_box_wrap .sub-cont-wrap .flow-wrap>li {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 var(--padding-8);
  position: relative;
}

.flow_box_wrap .sub-cont-wrap .flow-wrap>li::after {
  content: '';
  position: absolute;
  top: 26px;
  left: -10px;
  background: url('../images/content/ico_card_arrow.svg') center center / cover no-repeat;
  width: 20px;
  height: 20px;
}

.flow_box_wrap .sub-cont-wrap .flow-wrap>li:nth-child(1):after {
  display: none;
}

.flow_box_wrap .sub-cont-wrap .flow-wrap>li:nth-child(1) {
  padding-left: 0;
}

.flow_box_wrap .sub-cont-wrap .flow-wrap>li:nth-child(3) {
  padding-right: 0;
}


.flow_box_wrap .sub-cont-wrap .flow-card .card-top {
  background-color: #f6f6f6;
  max-height: 4.25rem;
  display: flex;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-mlarge);
  padding: var(--padding-8) 0;
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-top>h4 {
  font-size: var(--pc-fs-body-xlarge);
  font-weight: var(--typo-weight-bold);
  letter-spacing: -0.8px;
  line-height: 1.1;
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom {
  padding: var(--padding--26) var(--padding--20) var(--padding--26) var(--padding--20);
  border-radius: var(--radius-mlarge);
  border: 1px solid #e4e5ef;
  margin-top: var(--padding-4);
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt {
  margin-bottom: var(--number-4);
  position: relative;
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
  letter-spacing: -0.64px;
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt.last {
  margin-bottom: 0;
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt.hide {
  opacity: 0;
  display: block !important;
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-first-point);
}

.flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt.non::before {
  display: none;
}

@media (max-width: 1170px) {
  .flow_box_wrap .sub-cont-wrap .flow-card .card-top>h4 {
    font-size: var(--pc-fs-heading-small);
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt {
    height: 45px;
  }
}

@media (max-width: 787px) {
  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt.last {
    height: 60px;
  }
}

@media (max-width: 767px) {
  .flow_box_wrap .sub-cont-wrap .flow-wrap {
    flex-direction: column;
    gap: var(--gap-8);
  }

  .flow_box_wrap .sub-cont-wrap .flow-wrap>li {
    max-width: none;
    width: 100%;
    padding: 0;
  }

  .flow_box_wrap .sub-cont-wrap .flow-wrap>li::after {
    top: -25px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-top {
    padding: var(--padding-6) 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-top>h4 {
    font-size: var(--mobile-fs-body-medium);
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: var(--padding-6);
    border-top-color: #fff;
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt {
    height: auto;
    font-size: var(--pc-fs-label-small);
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt.last {
    height: auto;
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt::before {
    top: 8px;
  }

  .flow_box_wrap .sub-cont-wrap .flow-card .card-bottom .bottom-txt::before{
    width: 3px;
    height: 3px;
  }
}

@media (max-width: 380px) {
  .flow_box_wrap .sub-cont-wrap .flow-wrap>li::after {
    width: 15px;
    height: 15px;
  }
}

/* flow_box e 🛑🛑 */





/* 🛑🛑 join_box s*/
.join_box_wrap .sub-cont-wrap {
  background-color: var(--primary-0);
  width: 100%;
  border-radius: var(--radius-mlarge);
  padding: var(--padding--24) 0;
}

.join_box_wrap .sub-cont-wrap .join-wrap {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li {
  margin: 0 var(--padding-9);
  width: 100%;
  max-width: 334px;
  position: relative;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -42px;
  background: url('../images/content/ico_card_arrow.svg') center center / cover no-repeat;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(1):after {
  display: none;
}

.join_box_wrap .sub-cont-wrap .join-wrap .join-card {
  padding: var(--padding--19) var(--padding-6) var(--padding-9);
  background-color: var(--surface-white);
  border-radius: var(--radius-mlarge);
  position: relative;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(3) .join-card {
  border: 1px solid var(--text-point-color);
}

.join_box_wrap .sub-cont-wrap .join-wrap .join-card::after {
  content: '';
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: url('../images/content/ico_sys_join01.svg') center center / cover no-repeat;
  width: 42px;
  height: 40px;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(2) .join-card::after {
  width: 36px;
  height: 41px;
  background: url('../images/content/ico_sys_join02.svg') center center / cover no-repeat;
}

.join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(3) .join-card::after {
  width: 42px;
  height: 36px;
  top: 38px;
  background: url('../images/content/ico_sys_join03.svg') center center / cover no-repeat;
}


.join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt {
  text-align: center;
}

.join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt .txt-title {
  font-size: var(--pc-fs-body-xlarge);
  font-weight: var(--typo-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.88px;
  margin-bottom: var(--padding-3);
}

.join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt .txt-cont {
  width: 100%;
  font-size: var(--pc-fs-body-small);
  font-weight: var(--typo-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.64px;
}


@media (max-width: 1045px) {
  .join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt .txt-cont {
    height: 68px;

  }
}

@media (max-width: 767px) {
  .join_box_wrap .sub-cont-wrap {
    padding: var(--padding-9) 0;
  }

  .join_box_wrap .sub-cont-wrap .join-wrap {
    flex-direction: column;
    padding: 0 var(--padding-8);
  }

  .join_box_wrap .sub-cont-wrap .join-wrap>li {
    width: 100%;
    max-width: none;
    margin: var(--padding-7) 0;
  }

  .join_box_wrap .sub-cont-wrap .join-wrap>li::after {
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .join_box_wrap .sub-cont-wrap .join-wrap .join-card {
    padding: var(--padding-14) var(--padding-6) var(--padding-6);
  }

  .join_box_wrap .sub-cont-wrap .join-wrap .join-card::after {
    top: 23px !important;
    width: 32px;
    height: 30px;
  }

  .join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(2) .join-card::after {
    width: 28px;
    height: 31px;
  }

  .join_box_wrap .sub-cont-wrap .join-wrap>li:nth-child(3) .join-card::after {
    width: 32px;
    height: 29px;
  }

  .join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt .txt-title {
    font-size: var(--pc-fs-body-small);
  }

  .join_box_wrap .sub-cont-wrap .join-wrap .join-card .card-txt .txt-cont {
    height: auto;
    font-size: var(--pc-fs-caption-medium);
  }
}

/* join_box e 🛑🛑*/





/* 🛑🛑regist_box s*/
.regist_box_wrap .sub-cont-wrap {
  border: 1px solid var(--border-gray-light);
  padding: var(--padding-13) 0;
  width: 100%;
  border-radius: var(--radius-mlarge);
}

.regist_box_wrap .sub-cont-wrap .regist-wrap {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

}

.regist_box_wrap .sub-cont-wrap .regist-wrap::after {
  content: '';
  width: 95%;
  height: 1px;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px dashed #dfdfdf;
  z-index: 0;

}

.regist_box_wrap .sub-cont-wrap .regist-wrap>li {
  z-index: 3;
  max-width: 250px;
  width: 100%;
  margin: 0 var(--padding-4);
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--padding--23);
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-point-color);
  color: var(--surface-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--mobile-fs-body-medium);
  font-weight: var(--typo-weight-bold);
  margin-bottom: var(--padding-7);
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .number.gree {
  background-color: #1189A1;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .top-txt {
  font-size: var(--pc-fs-heading-small);
  font-weight: var(--typo-weight-bold);
  white-space: nowrap;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: var(--card-background-color);
  border-radius: var(--radius-mlarge);
  padding: var(--padding-8) var(--padding-6);
  min-height: 115px;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont.gree{
  background-color: #F3FAFD;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap.big .regist-box .box-cont {
  min-height: 140px;
}

.regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont .cont-txt {
  font-size: var(--pc-fs-body-small);
  line-height: 1.4;
  letter-spacing: -0.64px;
}

@media (max-width: 1155px) {
  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont {
    padding: var(--padding-6) var(--padding-6);
    height: 150px;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap.big .regist-box .box-cont {
    height: 170px;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .top-txt {
    font-size: var(--pc-fs-body-small);
  }


  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont .cont-txt {
    font-size: var(--pc-fs-caption-medium);
    line-height: 1.4;
  }
}

@media (max-width: 767px) {

  .regist_box_wrap .sub-cont-wrap {
    padding: var(--padding-11) var(--padding-8) var(--padding-11) var(--padding-4);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap {
    flex-direction: column;
    gap: var(--padding-4);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap::after {
    width: 1px;
    transform: none;
    height: 80%;
    left: 24px;

  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap>li {
    max-width: none;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box {
    padding-left: var(--padding-5);
    align-items: flex-end;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: var(--padding-3);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .number {
    margin: 0;
    margin-right: var(--padding-6);
    width: 25px;
    height: 25px;
    font-size: var(--pc-fs-body-xsmall);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont {
    width: 94%;
    min-height: 0;
    border-radius: var(--radius-large);
    height: auto;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap.big .regist-box .box-cont {
    min-height: 0;
    height: auto;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont .cont-txt {
    display: block;
    text-align: left;
    font-size: var(--pc-fs-caption-medium);
    position: relative;
    margin-left: var(--number-6);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-cont .cont-txt::before {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #81869D;
    position: absolute;
    top: 8px;
    left: -10px;
  }
}

@media (max-width: 380px) {


  .regist_box_wrap .sub-cont-wrap {
    padding: var(--padding-8) var(--padding-6) var(--padding-9) var(--padding-4);
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap::after {
    left: 10px;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box {
    padding-left: 0;
  }

  .regist_box_wrap .sub-cont-wrap .regist-wrap .regist-box .box-title .number {
    width: 22px;
    height: 22px;
    font-size: var(--pc-fs-label-small);
    margin-right: var(--padding-5);
  }
}


/* regist_box e 🛑🛑*/



/* 🛑🛑 연혁  s*/
.history {
  background-color: var(--background-white);
  background-image: url(../images/content/history_bg.png);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.sub-title-wrap.min_h {
  min-height: 180px;
}

.EffBoxIn {
  border: 1px solid var(--white);
  background-color: color-mix(in srgb, var(--white) 50%, transparent);
  padding: 70px 70px 60px 70px;
  justify-content: flex-start;
  width: 100%;
  max-width: 1410px;
  box-shadow: 0 8px 25px #b5bbcc40;
  display: flex;
  border-radius: var(--radius-xmlarge);
  margin: 0 auto;
  margin-top: -63px;
}

.EffBoxIn.blur_m {
  backdrop-filter: blur(12.5px);
}

.EffBoxIn.blur_s {
  backdrop-filter: blur(2px);
}

.history_wr {
  width: 100%;
  letter-spacing: var(--typo-letter-spacing-2);
}

.history_wr .h_list {
  display: block;
}

.history_wr .h_item .tit {
  display: inline-block;
  width: 180px;
  padding: 0 var(--padding-2);
  font-size: var(--number-13);
  font-weight: var(--typo-weight-semibold);
  color: var(--primary-45);
  vertical-align: top;
  word-break: keep-all;
}

.history_wr .h_item .txt {
  position: relative;
  display: inline-block;
  width: calc(100% - 200px);
  min-height: 90px;
  padding-left: var(--padding-13);
  padding-bottom: var(--padding-12);
}

.history_wr .h_item .txt::before {
  position: absolute;
  display: block;
  content: '';
  top: 15px;
  left: 0;
  background: url(../images/content/history_arrow.png) no-repeat;
  width: 24px;
  height: 24px;
}

.history_wr .h_item .txt::after {
  position: absolute;
  display: block;
  content: '';
  width: 3px;
  height: calc(100% - 40px);
  background: color-mix(in srgb, var(--secondary-20) 40%, transparent);
  top: 47px;
  left: 11px;
}

.history_wr .h_item .txt dl:first-of-type {
  padding-top: 20px;
}

.history_wr .h_item .txt dl:last-of-type {
  padding-bottom: 20px;
}

.history_wr .h_item .txt dl+dl {
  margin-top: 50px;
}

.history_wr .h_item .txt dt {
  margin-bottom: 15px;
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-semibold);
  line-height: 1;
}

.history_wr .h_item .txt dl dd {
  display: flex;
  font-size: var(--pc-fs-body-medium);
  line-height: 1.4;
}

.history_wr .h_item .txt dl dd b {
  display: inline-block;
  min-width: 40px;
  margin-right: var(--gap-2);
}

.history_wr .h_item .txt dl dd p {
  padding-bottom: 8px;
}

.history_wr .h_item .txt dl dd p:last-of-type {
  padding-bottom: 0;
}

.history_wr .h_item:last-child .txt::after {
  display: none;
}

@media (max-width: 767px) {

  .sub-title-wrap.min_h {
    min-height: 150px;
  }

  .history {
    background-size: inherit;
  }

  .EffBoxIn {
    padding: 20px;
  }

  .history_wr .h_item .tit {
    width: 100%;
    font-size: var(--number-10);
    padding: 0;
  }

  .history_wr .h_item .txt {
    width: 100%;
    padding-left: var(--padding-9);
    padding-bottom: var(--padding-8);
  }

  .history_wr .h_item .txt::before {
    width: 20px;
    height: 20px;
    background-size: contain;
  }

  .history_wr .h_item .txt::after {
    height: calc(100% - 70px);
    top: 44px;
    left: 8px;
  }

  .history_wr .h_item .txt dl:first-of-type {
    padding-top: 18px;
  }

  .history_wr .h_item .txt dl+dl {
    margin-top: 20px;
  }

  .history_wr .h_item .txt dt {
    margin-bottom: 10px;
    font-size: var(--pc-fs-body-small);
  }

  .history_wr .h_item .txt dl dd {
    font-size: var(--pc-fs-label-small);
  }
}

@media (max-width: 380px) {
  .EffBoxIn {
    padding: 20px 14px 14px;
  }

  .history_wr .h_item .tit {
    font-size: var(--pc-fs-body-xlarge);
  }

  .history_wr .h_item .txt {
    padding-left: var(--padding-8);
    padding-bottom: var(--padding-7)
  }

  .history_wr .h_item .txt dl dd {
    flex-direction: column;
  }

  .history_wr .h_item .txt::after {
    left: 6px;
  }

  .history_wr .h_item .txt dl:first-of-type {
    padding-top: var(--padding-6);
  }

  .history_wr .h_item .txt::before {
    width: 15px;
    height: 15px;
  }
}

/* 연혁 e 🛑🛑*/




/* 🛑🛑 자주찾는질문 s*/
.sub-title-wrap.deco {
  position: relative;
}

.sub-title-wrap.deco::before,
.sub-title-wrap.deco::after {
  position: absolute;
  content: '';
  display: block;
  width: 92px;
  height: 75px;
  top: 66px;
}

.sub-title-wrap.deco::before {
  background: url(../images/content/ico_qna_left.png) no-repeat;
  left: 70px;
}

.sub-title-wrap.deco::after {
  background: url(../images/content/ico_qna_right.png) no-repeat;
  right: 70px;
}

.qna_wr {
  width: 100%;
  letter-spacing: var(--typo-letter-spacing-2);
}

.qna_list li {
  border-bottom: 1px solid var(--border-gray-light);
}

.qna_list li:last-of-type {
  border-bottom: none;
}

.qna_list li [class^='qna_'] {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: var(--gap-5);
  padding: var(--padding-8);
  line-height: 1.4;
  text-align: left;
}

.qna_list li .circle {
  border-radius: 50%;
  min-width: 2.4em;
  height: 2.4em;
  line-height: 2.6em;
  padding: 0;
  text-align: center;
  font-size: var(--pc-fs-body-xsmall);
}

.qna_list li .circle.mark_q {
  color: var(--white);
  background: var(--primary-45);
}

.qna_list li .circle.mark_a {
  color: var(--primary-45);
  background: var(--white);
}

.qna_list li .subject {
  font-size: var(--pc-fs-heading-small);
}

.qna_list li .qna_a {
  border-radius: var(--radius-mlarge);
  background: var(--surface-gray-primary);
}

.qna_list li .answer {
  font-size: var(--pc-fs-body-small);
}

.qna_list li .qna_a>div {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  line-height: 1.4;
}

.qna_list li:has(.collapse.show) {
  border-bottom-color: transparent;
}

.collapse:not(.show) {
  display: none;
}

@media (max-width: 767px) {

  .sub-title-wrap.deco::before,
  .sub-title-wrap.deco::after {
    width: 65px;
    top: 55px;
  }

  .sub-title-wrap.deco::before {
    background-size: contain;
    left: 20px;
  }

  .sub-title-wrap.deco::after {
    background-size: contain;
    right: 20px;
  }

  .qna_list li [class^='qna_'] {
    gap: var(--gap-3);
    padding: var(--padding-5) var(--padding-5);
  }

  .qna_list li .circle {
    font-size: var(--pc-fs-body-xxsmall);
    min-width: 2em;
    height: 2em;
    line-height: 2.2em;
  }

  .qna_list li .subject {
    font-size: var(--pc-fs-label-small);
  }

  .qna_list li .answer {
    font-size: var(--pc-fs-label-small);
  }
}

@media (max-width: 480px) {

  .sub-title-wrap.deco::before,
  .sub-title-wrap.deco::after {
    width: 55px;
    top: 65px;
  }

  .sub-title-wrap.deco::before {
    background-size: contain;
    left: 15px;
  }

  .sub-title-wrap.deco::after {
    background-size: contain;
    right: 15px;
  }

  .qna_list li .circle {
    font-size: var(--pc-fs-caption-small);
  }
}

/* 자주찾는질문 e 🛑🛑*/



/* 🛑🛑 관련법규 s */
.sub-cont-wrap .cont-list li {
  position: relative;
  width: 100%;
  font-size: var(--pc-fs-body-small);
  line-height: 1.3;
  letter-spacing: -0.64px;
  padding-top: 5px;
  padding-left: var(--gap-5);
}

.sub-cont-wrap .cont-list li.cont-text {
  padding: 0;
}

.sub-cont-wrap .cont-list li::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--gray-30);
}

@media (max-width: 767px) {
  .sub-cont-wrap .cont-list li {
    font-size: var(--pc-fs-label-small) !important;
  }

  .sub-cont-wrap .cont-list .cont-text strong {
    font-size: var(--pc-fs-body-xsmall);
  }
}

@media (max-width: 380px) {
  .sub-cont-wrap .cont-list li.cont-text{
    padding-left: 8px;
  }
}

/* 관련법규 e 🛑🛑 */




/* 🛑🛑 업무담당자안내 s */
.sub-cont-wrap.direct_wr {
  padding: var(--padding--22) var(--padding-11);
  display: flex;
  gap: 40px;
  align-items: center;
}

.direct_wr .map_wr {
  max-width: 48.5%;
  height: 354px;
  border: 1px solid #E4E5E8;
  border-radius: var(--radius-mlarge);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.direct_cont>div.ff-aggro {
  font-size: var(--number-11);
  letter-spacing: -0.96px;
  padding-bottom: var(--padding-3);
}

.direct_cont .txt .info {
  display: flex;
  align-items: center;
  gap: var(--gap-7);
  padding: var(--padding-2) 0;
  font-size: var(--pc-fs-body-small);
  letter-spacing: -0.96px;
  line-height: 1.4;
}

.direct_cont .txt .info>div {
  display: flex;
  gap: var(--gap-7);
}

.direct_cont .txt .info span {
  color: var(--text-sub);
}

.direct_cont .txt .info p.bold {
  font-size: var(--pc-fs-navigation-item);
  font-weight: var(--typo-weight-bold);
}

.exp_box_wrap .sub-cont-wrap.half {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sub-cont-wrap.half .list_label {
  max-width: 50%;
  flex: 0 0 50%;
}

.list_label li {
  font-size: var(--pc-fs-body-small);
  letter-spacing: -0.96px;
  display: flex;
  gap: var(--gap-4);
}

.list_label li span.tit_color {
  font-weight: var(--typo-weight-bold);
  color: var(--primary-45);
  min-width: 124px;
}

.list_label.shot li span {
  min-width: 42px;
}

.list_label.mid li span {
  min-width: 55px;
}

.list_label li span.tit_gray {
  color: var(--text-sub);
}

.warning {
  position: relative;
  padding-left: var(--padding-7);
  font-size: var(--pc-fs-body-small);
  letter-spacing: -0.96px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.3;
}

.warning::before {
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  background: url(../images/content/ico_warning.svg) no-repeat;
  top: 3px;
  left: 0;
}

.exp_box_wrap.two .sub-cont-wrap.pd-st {
  padding: var(--padding--22) var(--padding-6) var(--padding--22) var(--padding-9);
}

.cs_wr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-5);
}

.cs_wr ul li:first-child {
  font-weight: var(--typo-weight-bold);
}

.cs_wr ul li:last-child {
  font-weight: var(--typo-weight-bold);
  font-size: var(--number-10);
  color: var(--primary-45);
  line-height: 1.2;
}

@media (max-width: 1400px) {
  .direct_cont .txt .info>div {
    flex-direction: column;
    gap: 0.1rem;
  }

  .sub-cont-wrap .list_label .cont-text.column {
    flex-direction: column;
    gap: 0.1rem;
  }
}

@media (max-width: 1300px) {
  .sub-cont-wrap.half.column {
    flex-direction: column;
  }

  .sub-cont-wrap.half .list_label {
    max-width: 100%;
    flex: 1;
    padding-left: 0;
  }

  .sub-cont-wrap.half .list_label.pL20 {
    padding-left: 0 !important;
  }

  .sub-cont-wrap.half .list_label:last-child {
    margin-top: var(--padding-4);
  }


  .sub-cont-wrap.half .list_label:last-child.mg_t {
    margin-top: 0 !important;
  }

  .cs_wr ul li:last-child {
    font-size: var(--number-9);
    display: block;
  }

  .cs_wr>ul>li {
    display: inline-block;
  }

  .cs_wr .cs_ico {
    width: 50px;
  }
}

@media (max-width: 1258px) {
  .exp_box_wrap.two .sub-cont-wrap .list_label .cont-text {
    height: auto;
  }
}

@media (max-width: 1100px) {
  .sub-cont-wrap.direct_wr {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-6);
  }

  .direct_wr .map_wr {
    max-width: 100%;
    height: auto;
  }

  .direct_cont>div.ff-aggro {
    font-size: var(--mobile-fs-heading-xlarge);
  }

  .direct_cont .txt .info {
    gap: var(--gap-5);
  }
}

@media (max-width: 767px) {

  .warning {
    font-size: var(--pc-fs-label-small);
  }

  .sub-cont-wrap.direct_wr {
    padding: var(--padding--22) var(--padding-8);
  }

  .direct_cont>div.ff-aggro {
    font-size: var(--mobile-fs-heading-large);
    padding-bottom: 0;
  }

  .list_label li span.tit_color {
    font-size: var(--pc-fs-body-xsmall);
  }

  .direct_cont .txt .info span{
    font-size: var(--pc-fs-body-xsmall);
  }

  .direct_cont .txt .info>div p{
    font-size: var(--mobile-fs-body-small);
  }
}

@media (max-width: 480px) {
  .exp_box_wrap .sub-cont-wrap.half {
    flex-direction: column;
  }

  .sub-cont-wrap.half .list_label.mt0 {
    margin-top: var(--padding-4) !important;
  }

  .direct_cont .txt .info img {
    width: 40px;
  }
}

@media (max-width: 380px) {
  .warning {
    font-size: var(--pc-fs-caption-small);
    padding-left: var(--padding-6);
  }

  .warning::before{
    width: 12px;
    height: 12px;
    background-size: contain;
    top: 1px;
  }

  .direct_cont>div.ff-aggro {
    font-size: var(--pc-fs-body-medium);
  }

  .direct_cont .txt .info {
    font-size: var(--pc-fs-label-small);
  }

  .direct_cont .txt .info p.bold {
    font-size: var(--pc-fs-body-small);
  }

  .exp_box_wrap.two .sub-cont-wrap .list_label .cont-text {
    padding-left: var(--padding-4);
  }

  .exp_box_wrap.two .sub-cont-wrap .cont-text::before {
    left: -3px;
  }
}

/* 업무담당자안내 e 🛑🛑 */




/* 🛑🛑 로그인페이지 s */
#wrap.login {
  min-height: 70vh;
}

#wrap.login #main-content {
  width: 100%;
}

#wrap.login .login-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--padding-12) var(--padding-9);
  position: relative;
}

#wrap.login .login-content::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: url(../images/common/login_bg.png) no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
}

.login-content .login-tit {
  text-align: center;
  letter-spacing: -0.96px;
  margin-bottom: var(--gap-6);
  position: relative;
  z-index: 1;
}

.login-content .login-tit b {
  color: #144EB5;
}

.login-content .login-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content .login-box .login-box-wr {
  width: 460px;
  padding: var(--padding--22) var(--padding-11);
  border-radius: var(--radius-mlarge);
  border: 1px solid var(--white);
  background-color: color-mix(in srgb, var(--white) 38%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 5px 30px 0 rgba(86, 87, 91, 0.10);
}

.login-content .login-box .login-box-wr .loginForm {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.login-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--pc-fs-body-xsmall);
  color: var(--text-subtle);
  letter-spacing: -0.96px;
}

.login-head p {
  font-size: 23px;
  font-weight: var(--typo-weight-bold);
}

.login-head .cs-info a {
  font-weight: var(--typo-weight-bold);
  margin-left: var(--gap-2);
}

.login-content .form-group {
  width: 100%;
  position: relative;
}

.login-content .form-group:focus-within,
.login-content .form-group:focus-visible {
  border-radius: var(--radius-full);
}

.login-content .form-group .custom-input {
  width: 100%;
  height: 3rem;
  border-radius: var(--radius-full);
  border: unset;
  box-shadow: 0 3px 5px 0 rgba(180, 180, 180, 0.25);
}

.login-content .form-group input::placeholder {
  font-size: var(--pc-fs-caption-medium);
  color: var(--text-sub);
}

.login-btm {
  display: flex;    
  font-size: var(--pc-fs-caption-medium);
  color: var(--text-muted);
  gap: var(--gap-4);  
  justify-content: space-between;
}

.login-btm .btn-join {
  position: relative;
}

.login-btm .btn-join::before {
  position: absolute;
  content: '';
  height: 10px;
  width: 1px;
  background-color: #bcbcbc;
  top: 6px;
  right: -8px;
}

.login-btn-wr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-4);
  padding-top: var(--gap-5);
}

.login-btn-wr .login-btn {
  width: 100%;
  height: 3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-gray-light);
  background-color: var(--primary-45);
  box-shadow: 0 3px 5px 0 rgba(180, 180, 180, 0.25);
  font-weight: var(--typo-weight-semibold);
  font-size: var(--pc-fs-label-medium);
  color: var(--white);
  transition: background 0.2s ease;
}

.login-btn-wr .login-btn.gpki {
  background-color: var(--white);
  color: var(--primary-45);
}

.login-btn-wr .login-btn:hover {
  background-color: #194ead;
}

.login-btn-wr .login-btn.gpki:hover {
  background-color: #fafafa;
}

@media (min-height: 910px) {
  #wrap.login #container {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
    width: 100%;
  }

  /* .login-content .login-box .login-box-wr .loginForm{
    gap: var(--gap-5);
  } */
}

@media (max-width: 1024px) {
  .login-content .login-tit {
    font-size: var(--pc-fs-body-xsmall);
  }
}

@media (max-width: 480px) {
  #wrap.login .login-content {
    padding: var(--padding-12) var(--padding-6);
  }

  .login-content .login-tit {
    font-size: var(--pc-fs-body-xxsmall);
  }


  .login-content .login-box .login-box-wr {
    padding: var(--padding--20) var(--padding-7);
  }

  .login-head,
  .login-btn-wr {
    flex-direction: column;
    font-size: var(--pc-fs-body-xxsmall);
  }

  .login-head p {
    font-size: 20px;
  }

  .login-content .form-group .custom-input,
  .login-btn-wr .login-btn {
    height: 2.7rem;
  }

  .login-content .form-group input::placeholder {
    font-size: var(--pc-fs-caption-small);
  }

  .login-btm {
    font-size: var(--pc-fs-body-xxsmall);
  }

  .login-btn-wr {
    gap: var(--gap-3);
  }

  .login-btn-wr .login-btn {
    font-size: var(--pc-fs-label-small);
  }

}

/* 로그인페이지 e 🛑🛑 */


/* 🛑🛑회원가입 페이지(main) s  */

#wrap.join {
  min-height: 100vh;
}

#wrap.join #main-content {
  width: 100%;
}

#wrap.join .join-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /*   padding: var(--padding-12) var(--padding-9);
  padding: var(--padding--22) var(--padding-6); */
  position: relative;
}

.join-content .inner {
  --container-max: 1280px;
}

.join-content .page-title-wrap {
  border-bottom: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--padding-12);
}

.join-content .page-title-wrap .join-title {
  font-weight: var(--typo-weight-medium);
}

.join-content .join-wrap .join-top {
  margin-bottom: var(--padding-15);
}

.join-content .join-wrap .join-top .step-wrap {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  max-width: 720px;
  align-items: center;
  margin: 0 auto;
  position: relative;

}

.join-content .join-wrap .join-top .step-wrap::before {
  content: '';
  width: 85%;
  height: 4px;
  background-color: #DBDEE1;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 20px;
  transform: translateX(-52%);

}

.join-content .join-wrap .join-top .step-wrap .step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
  z-index: 2;
}

.join-content .join-wrap .join-top .step-wrap .step .step-num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--black-10);
  color: var(--black-10);
  font-size: var(--pc-fs-body-small);
  background-color: var(--surface-white);
}

.join-content .join-wrap .join-top .step-wrap .step .step-txt {
  font-size: var(--pc-fs-label-large);
  font-weight: var(--typo-weight-medium);
  line-height: 1.5;
  letter-spacing: -0.54px;
  color: var(--black-10);
  text-align: center;
}

.join-content .join-wrap .join-top .step-wrap .step.color .step-num {
  color: var(--button-primary-fill-pressed);
  border: 2px solid var(--button-outline-primary-border);
}

.join-content .join-wrap .join-top .step-wrap .step.color .step-txt {
  color: var(--divider-gray-dark);
}

.join-content .join-wrap .join-bottom .card-title {
  margin-bottom: var(--padding-13);
}

.join-content .join-wrap .join-bottom .title-txt {
  font-size: var(--mobile-fs-heading-xlarge);
  font-weight: var(--typo-weight-semibold);
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.72px;
}

.join-content .join-wrap .join-bottom .join-card-wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  max-width: 1250px;
  margin: 0 auto;
}


.join-card-link:focus-visible {
  outline-offset: 4px;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card {
  flex: 1;
  max-width: 285px;
  border-radius: var(--number--28);
  position: relative;
  transition: 0.4s;
  cursor: pointer;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--padding--20) var(--padding--20) var(--padding-13) var(--padding--20);
  overflow: hidden;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card:hover {
  transform: translateY(-30px);
  transition: 0.4s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card a:hover {
  color: inherit;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card a::before {
  content: '';
  width: 350px;
  height: 350px;
  position: absolute;
  top: -170px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 0;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit {
  font-size: var(--mobile-fs-heading-xlarge);
  font-weight: var(--typo-weight-semibold);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  letter-spacing: -0.96px;
  z-index: 10;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit img {
  width: 75px;
  margin-bottom: var(--padding-6);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list {
  margin-top: var(--padding-16);
  display: flex;
  flex-direction: column;
  gap: var(--padding-4);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list .exp {
  font-size: var(--pc-fs-body-small);
  font-weight: var(--typo-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.64px;
  padding-left: 11px;
  position: relative;

}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list .exp::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  left: 0;
  top: 8px;
  background-color: var(--divider-gray-dark);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn_wrap {
  position: absolute;
  right: 0;
  bottom: 7px;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn {
  position: relative;
  line-height: 1.2;
  letter-spacing: -0.68px;
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-medium);
  padding: 12px 14px;
  border-top-left-radius: 14px;
  border-bottom-right-radius: 14px;
}



/* join-card blue s */
.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu {
  background-color: var(--card-color-blue);
  box-shadow: 0 0 10px #bdc9f2;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu a::before {
  background: linear-gradient(0deg, #E3EBFF 0%, #F8FAFF 100%);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu .join_btn {
  background-color: #FBFCFF;
  color: var(--card-btn-blue);
  transition: 0.3s;
  overflow: hidden;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu:hover .join_btn {
  background-color: var(--card-btn-blue);
  color: var(--surface-white);
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu .join_btn::after {
  content: '';
  position: absolute;
  top: -14px;
  right: 0;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_btn_af.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu .join_btn::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -13px;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_btn_bf.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu:hover .join_btn::after {
  background: url('../images/content/join_btn_af_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.blu:hover .join_btn::before {
  background: url('../images/content/join_btn_bf_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

/* join-card blue e */




/* join-card yellow s */
.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo {
  background-color: var(--card-color-yellow);
  box-shadow: 0 0 10px #EFD0A8;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo a::before {
  background: linear-gradient(0deg, #FFEBA9 0%, #FFFCF9 100%);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo .join_btn {
  background-color: #FBFCFF;
  color: var(--card-btn-yellow);
  transition: 0.3s;
  overflow: hidden;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo:hover .join_btn {
  background-color: var(--card-btn-yellow);
  color: var(--surface-white);
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo .join_btn::after {
  content: '';
  position: absolute;
  top: -14px;
  right: 0;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_yelo_af.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo:hover .join_btn::after {
  background: url('../images/content/join_yelo_af_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo .join_btn::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -13px;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_yelo_bf.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.yelo:hover .join_btn::before {
  background: url('../images/content/join_yelo_bf_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

/* join-card yellow e */




/* join-card green s */
.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree {
  background-color: var(--card-color-green);
  box-shadow: 0 0 10px #B2C9AB;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree a::before {
  background: linear-gradient(0deg, #CBEBC0 0%, #F5FFF2 100%);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree .join_btn {
  background-color: #F9FFFA;
  color: var(--card-btn-green);
  transition: 0.3s;
  overflow: hidden;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree:hover .join_btn {
  background-color: var(--card-btn-green);
  color: var(--surface-white);
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree .join_btn::after {
  content: '';
  position: absolute;
  top: -14px;
  right: 0;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_gree_af.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree:hover .join_btn::after {
  background: url('../images/content/join_gree_af_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree .join_btn::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -13px;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_gree_bf.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.gree:hover .join_btn::before {
  background: url('../images/content/join_gree_bf_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

/* join-card green e */



/* join-card purple s */
.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp {
  background-color: var(--card-color-purple);
  box-shadow: 0 0 10px #d8c9f3;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp a::before {
  background: linear-gradient(0deg, #E7DBFF 0%, #FEF6FF 100%);
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp .join_btn {
  background-color: #FAF8FF;
  color: var(--card-btn-purple);
  transition: 0.3s;
  overflow: hidden;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp:hover .join_btn {
  background-color: var(--card-btn-purple);
  color: var(--surface-white);
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp .join_btn::after {
  content: '';
  position: absolute;
  top: -14px;
  right: 0;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_purp_af.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp:hover .join_btn::after {
  background: url('../images/content/join_purp_af_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp .join_btn::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -13px;
  width: 13px;
  height: 14px;
  transition: 0.3s;
  background: url('../images/content/join_purp_bf.png') center center / cover no-repeat;
}

.join-content .join-wrap .join-bottom .join-card-wrap .join-card.purp:hover .join_btn::before {
  background: url('../images/content/join_purp_bf_hov.png') center center / cover no-repeat;
  transition: 0.3s;
}

/* join-card purple e */


@media (max-width: 1200px) {

  .join-content .join-wrap .join-bottom .card-title {
    margin-bottom: var(--padding-10);
  }

  .join-content .join-wrap .join-bottom .title-txt {
    font-size: var(--pc-fs-navigation-title);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit {
    font-size: var(--pc-fs-body-xlarge);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit img {
    width: 60px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap {
    gap: var(--gap-6);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a {
    padding: var(--padding-6) var(--padding-8) var(--padding-10) var(--padding-8);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a::before {
    top: -225px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit img {
    margin-bottom: 6px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list {
    margin-top: 60px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list .exp {
    font-size: var(--pc-fs-label-small);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn_wrap {
    bottom: 4px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn {
    font-size: var(--pc-fs-body-xsmall);
    padding: 9px 11px;
  }
}

@media (max-width: 767px) {
  .join-content {
    margin-top: 50px !important;
  }

  .join-content .page-title-wrap {
    margin-bottom: var(--padding-7);
  }

  .join-content .page-title-wrap .join-title {
    font-size: var(--mobile-fs-heading-large);
  }

  .join-content .join-wrap .join-top {
    margin-bottom: var(--padding-11);
  }

  .join-content .join-wrap .join-top .step-wrap::before {
    height: 2px;
    top: 15px;
  }

  .join-content .join-wrap .join-top .step-wrap .step .step-num {
    width: 30px;
    height: 30px;
    font-size: var(--pc-fs-body-xsmall);
  }

  .join-content .join-wrap .join-top .step-wrap .step .step-txt {
    font-size: var(--pc-fs-label-small);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap {
    flex-direction: column;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card {
    max-width: none;
    width: 100%;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a {

    width: 100%;
    padding-bottom: var(--padding-10);
    padding-top: var(--padding-5);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card:hover {
    transform: none;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list {
    flex-direction: inherit;
    flex-wrap: wrap;
    margin-top: var(--padding-8);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a::before {
    width: 300px;
    height: 300px;
    top: -193px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list .exp {
    width: 48%;
    font-size: var(--pc-fs-body-xsmall);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn_wrap {
    bottom: 2px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .join_btn {
    padding: 6px 11px;
  }


}

@media (max-width: 500px) {

  .join-content .join-wrap .join-top .step-wrap::before {
    width: 80%;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a {
    padding-top: 6px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit img {
    width: 45px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card a::before {
    width: 200px;
    height: 200px;
    top: -110px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit {
    font-size: var(--pc-fs-navigation-item);
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .card-tit img {
    width: 50px;
  }

  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list {
    margin-top: var(--padding-8);
  }




}

/* 회원가입 페이지(main) e 🛑🛑*/





/* 🛑🛑 회원가입 페이지(step2) s */

/* per_list_wrap s */
.per_list_wrap .table-wrap {
  border-bottom: none;
}

.per_list_wrap .table-wrap.scrollable .data-table thead th {
  background-color: var(--primary-0);
}

@media (max-width: 1380px) {
  .per_list_wrap .table-wrap.scrollable {
    overflow-x: hidden;
  }

  .per_list_wrap .table-wrap.scrollable .data-table {
    min-width: auto;
    width: 100%;
  }

  .per_list_wrap .table-wrap.scrollable .data-table th:first-child,
  .per_list_wrap .table-wrap.scrollable .data-table td:first-child {
    width: 25%;
  }

  .per_list_wrap .table-wrap.scrollable .data-table th:last-child,
  .per_list_wrap .table-wrap.scrollable .data-table td:last-child {
    width: 25%;
  }

  .per_list_wrap .table-wrap.scrollable .data-table thead th {
    background-color: inherit;
  }
}

@media (max-width: 767px) {
  .per_list_wrap .data-table {
    font-size: var(--mobile-fs-body-medium);
  }

  /*   .per_list_wrap .data-table td {
    font-size: var(--mobile-fs-body-small);
  } */
}

@media (max-width: 550px) {
  .per_list_wrap .table-wrap.scrollable {
    overflow-x: auto;
  }

  .per_list_wrap .table-wrap.scrollable .data-table {
    min-width: 510px;
  }
}


@media (max-width: 330px) {
  .join-content .join-wrap .join-bottom .join-card-wrap .join-card .exp-list .exp {
    width: 46%;
  }
}

/* per_list_wrap e */



/* check_box s */
.check_box_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-6);
  background-color: var(--primary-0);
  padding: var(--padding-4) var(--padding--20);
  border-radius: var(--radius-small);
}


.check_box_wrap .chk-quest {
  font-size: var(--pc-fs-label-large);
  font-weight: var(--typo-weight-bold);
  line-height: 1.4;
  letter-spacing: -0.54px;
}

.check_box_wrap .chk-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  font-size: 16px;
}

.check_box_wrap .chk-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check_box_wrap .chk-box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--gray-25);
  border-radius: 50%;
  display: inline-block;
  background-color: #fff;
  transition: all 0.15s ease;
  box-sizing: border-box;
  position: relative;
}

.check_box_wrap .chk-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--gray-25);
  border-bottom: 2px solid var(--gray-25);
  transform: rotate(45deg);

}

.check_box_wrap .chk-label {
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-medium);
}


.check_box_wrap .chk-input:checked+.chk-box {
  background-color: var(--black-30);
  border-color: #0054a6;
}

.check_box_wrap .chk-input:checked+.chk-box::after {
  transform: rotate(45deg) scale(1);
}

.check_box_wrap .chk-input:focus+.chk-box {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .check_box_wrap .chk-quest {
    font-size: var(--pc-fs-body-small);
  }

  .check_box_wrap .chk-label {
    font-size: var(--pc-fs-body-xsmall);
  }
}

/* check_box e */



/* agree_box s */
.agree_box_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-6);
}

.agree_box_wrap .agree-tit {
  font-size: var(--mobile-fs-heading-large);
  line-height: 1.2;
  letter-spacing: -0.66px;
}

.agree_box_wrap .agree-chk-wrap {
  display: flex;
  align-items: center;
  gap: var(--padding--23);
}

.chk-wrap:has(.chk-input:focus),
.chk-wrap:has(.chk-input:focus-visible) {
  outline: 2px solid #0054a6;
  outline-offset: 4px;
}

.chk-wrap:has(.chk-input.fcn:focus),
.chk-wrap:has(.chk-input.fcn:focus-visible) {
  outline: none;

}

.agree_box_wrap .agree-chk-wrap .chk-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  inset: 0;
}

.chk-input:focus-visible,
.chk-input:focus {
  outline: none;
  box-shadow: none;
}

.chk-input:focus+.chk-box {
  outline: 2px solid #0054a6;
  outline-offset: 2px;
  outline: none;

}


.agree_box_wrap .agree-chk-wrap .chk-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  background-color: var(--gray-10);
  padding: var(--padding-5) var(--padding--22);
  border-radius: var(--number-18);
}

.agree_box_wrap .agree-chk-wrap .chk-wrap:hover {
  background-color: var(--gray-15);
}

.agree_box_wrap .agree-chk-wrap .chk-box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--gray-25);
  border-radius: 50%;
  display: inline-block;
  background-color: #fff;
  transition: all 0.15s ease;
  box-sizing: border-box;
  position: relative;
}

.agree_box_wrap .agree-chk-wrap .chk-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--gray-25);
  border-bottom: 2px solid var(--gray-25);
  transform: rotate(45deg);
}

.agree_box_wrap .agree-chk-wrap .chk-label {
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-medium);
}

.agree_box_wrap .agree-chk-wrap .chk-input:checked+.chk-box::after {
  border-right: 2px solid var(--black-30);
  border-bottom: 2px solid var(--black-30);
}

.agree_box_wrap .agree-chk-wrap .chk-wrap:has(.chk-input:checked) {
  background-color: var(--black-30);
}

.agree_box_wrap .agree-chk-wrap .chk-wrap:has(.chk-input:checked) .chk-label {
  color: var(--surface-white);
}

@media (max-width: 767px) {

  .agree_box_wrap {
    margin-bottom: 40px !important;
  }

  .agree_box_wrap .agree-tit {
    font-size: var(--pc-fs-body-xlarge);
  }

  .agree_box_wrap .agree-chk-wrap .chk-label {
    font-size: var(--pc-fs-body-xsmall);
  }
}

@media (max-width: 500px) {
  .agree_box_wrap .agree-chk-wrap {
    gap: var(--padding-4);
  }

  .agree_box_wrap .agree-chk-wrap .chk-wrap {
    padding: var(--padding-5) var(--padding-6);
  }

  .agree_box_wrap .agree-chk-wrap .chk-label {
    font-size: var(--pc-fs-label-small);
    white-space: nowrap;
  }
}

/* agree_box e */

/* cert-wrap s */

.cert-wrap {
  text-align: center;
}

.cert-wrap .cert_btn {
  display: block;
  margin: 0 auto;
  max-width: 190px;
  width: 100%;
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-medium);
  color: var(--text-point-color);
  line-height: 1.2;
  letter-spacing: -0.51px;
  padding: var(--padding--23) var(--padding-6);
  border: 1px solid var(--text-point-color);
  border-radius: var(--radius-medium);
}

.cert-wrap .cert_btn:hover {
  background-color: var(--text-point-color);
  color: var(--surface-white);
  transition: 0.3s;
}

.cert-wrap .cert_btn.check {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cert-wrap .cert_btn.check .ico_check {
  display: block;
  background: url('../images/content/ico_btn_check.svg') center center / cover no-repeat;
  width: 20px;
  height: 20px;
  transition: 0.3s;
}

.cert-wrap .cert_btn:hover .ico_check {
  background: url('../images/content/ico_btn_check_wh.svg') center center / cover no-repeat;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .cert-wrap .cert_btn {
    max-width: 150px;
    font-size: var(--pc-fs-body-small);
    padding: var(--padding-5);
  }
}

/* cert-wrap e */


.exp_box_wrap .sub-cont-wrap.gray {
  background-color: #f6f6f6;
  padding: var(--padding-7) var(--padding-6) var(--padding-7) var(--padding-11);
}

.exp_box_wrap .sub-cont-wrap.gray .cont-text span {
  font-size: 17px;
  font-weight: var(--typo-weight-medium);
}

.exp_box_wrap .sub-cont-wrap.gray .cont-text.sml {
  font-size: var(--mobile-fs-body-medium);
}

h2.section-sub-title.noBf {
  padding-left: 0;
}

h2.section-sub-title.noBf::before {
  display: none;
}

@media (max-width: 767px) {
  .exp_box_wrap .sub-cont-wrap.gray .cont-text span {
    font-size: var(--pc-fs-body-xsmall);
  }
}

/* 회원가입 페이지(step2) e 🛑🛑 */



/* 🛑🛑 회원가입 페이지(step3) s */
/* info_box s */
.info_box_wrap .info_list {
  padding: var(--padding-8) var(--padding--26);
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--gap-6);
}

.info_box_wrap .info_list .info {
  width: 43%
}

.info_box_wrap .info_list .info.max {
  width: 49%;
}

.info_box_wrap .info_list .info.opcty {
  opacity: 0;
  visibility: hidden;
}


.info_box_wrap .info_list .info .info_tit {
  display: inline-block;
  font-size: var(--pc-fs-label-large);
  font-weight: var(--typo-weight-bold);
  margin-bottom: 7px;
  line-height: 1.2;
  letter-spacing: -0.72px;
  padding-right: 11px;
  position: relative;
}

.info_box_wrap .info_list .info .info_tit::after {
  content: '*';
  position: absolute;
  right: 0;
  top: 0;
  color: #E31F1F;
  font-size: var(--pc-fs-body-xsmall);
}

.info_box_wrap .info_list .info .info_tit.noBf::after {
  display: none;
}

.info_box_wrap .info_list .info .info_box {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  position: relative;
}

.info_box_wrap .info_list .info .info_box.two {
  gap: 40px;
}


.info_box_wrap .info_list .info .info_box.three {
  gap: 14px;
}

.info_box_wrap .info_list .info .info_box.three .form-field:first-child {
  max-width: 105px;
}

.info_box_wrap .info_list .info .info_box .form-field {
  padding: 0 23px;
  height: 48px;
  max-width: 520px;
  position: relative;
}

.info_box_wrap .info_list .info .info_box .form-field.sign::before {
  content: '@';
  position: absolute;
  right: -30px;
  top: 7px;
  font-weight: var(--typo-weight-bold);
  font-size: var(--mobile-fs-heading-medium);

}


.info_box_wrap .info_list .info .info_box .form-field .form-field__control {
  font-size: 17px;
  font-weight: var(--typo-weight-medium);
}

.info_box_wrap .info_list .info .check-btn {
  position: absolute;
  right: -100px;
  top: 0px;
  font-size: var(--pc-fs-body-medium);
  font-weight: var(--typo-weight-semibold);
  background-color: var(--primary-45);
  color: var(--surface-white);
  line-height: 1.2;
  letter-spacing: -0.68px;
  padding: 14px 17px;
  border-radius: 6px;
}

.info_box_wrap .info_list .info .check-btn.short {
  right: -72px;
}

.info_box_wrap .info_list .info .check-btn:hover {
  background-color: var(--primary-80);
}

/* .info_box_wrap .info_list .info .form-field__control.place input {
  font-size: var(--pc-fs-body-small);
  color: var(--element-gray-dark);
} */

.info_box_wrap .form-field.check::after {
  content: '일치합니다.';
  font-size: 17px;
  font-weight: var(--typo-weight-medium);
  color: var(--text-success);
  line-height: 1.2;
  letter-spacing: -0.68px;
}

.info_box_wrap .nice-select:after {
  width: 8px;
  height: 8px;
}

@media (max-width: 900px) {

  .info_box_wrap .form-field__control input {
    font-size: var(--pc-fs-body-xsmall);
  }

  .info_box_wrap .info_list .info .info_box .form-field {
    padding: 0 12px;
  }

  .section-sub-title-wrap.plus {
    gap: 0;
  }

  .section-sub-title-wrap.plus p {
    font-size: var(--pc-fs-label-small);
  }


  .info_box_wrap .info_list .info {
    width: 100%;
  }

  .info_box_wrap .info_list .info.max {
    width: 100%;
  }

  .info_box_wrap .info_list .info.opcty {
    display: none;
  }


  .info_box_wrap .info_list .info.hbtn {
    padding-right: 100px;
  }

  .info_box_wrap .info_list .info.hbtn.short {
    padding-right: 70px;
  }

  .info_box_wrap .info_list .info .check-btn.short {
    right: -70px;
  }

  .info_box_wrap .info_list .info .info_tit {
    font-size: var(--mobile-fs-body-medium);
  }

  .info_box_wrap .info_list .info .info_box .form-field {
    max-width: none;
  }

  .info_box_wrap .info_list .info .info_box.three .form-field:first-child {
    max-width: 80px;
  }

  .info_box_wrap .info_list .info .check-btn {
    font-size: var(--pc-fs-body-xsmall);
  }

  .info_box_wrap .form-field.check::after {
    font-size: var(--pc-fs-body-xsmall);
  }

  .info_box_wrap .info_list .info .info_box.three {
    gap: 8px;
  }
}

@media (max-width: 500px) {

  .info_box_wrap .info_list {
    padding: var(--padding-8) var(--padding-6);
    row-gap: var(--gap-4);
  }

  .info_box_wrap .info_list .info .info_box .form-field {
    height: 44px;
  }

  .info_box_wrap .info_list .info .check-btn {
    padding: 13px 17px;
  }

}

/* info_box e */
/* 회원가입 페이지(step3) e 🛑🛑 */



/*  🛑🛑 회원가입 페이지(step4) s */

.end_box_wrap {
  padding: var(--padding-9) 0;
  position: relative;
}

.end_box_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #ffffff 0%, #F5FAFF 100%);
  z-index: -1;
  border-radius: 30%;
  filter: blur(20px);
}

.end_box_wrap .join-end-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--number-13);
  z-index: 3;
}

.end_box_wrap .join-end-cont img {
  width: 70px;
  animation: spinImg 3s infinite linear;
}

/* 애니메이션 */
@keyframes spinImg {
  0% {
    transform: perspective(800px) rotateY(0deg) translateY(0);
  }

  50% {
    transform: perspective(800px) rotateY(180deg) translateY(-10px);
  }

  100% {
    transform: perspective(800px) rotateY(360deg) translateY(0);
  }
}


.end_box_wrap .join-end-cont .join-end-txt {
  text-align: center;
}

.end_box_wrap .join-end-cont .join-end-txt .txt-top {
  font-size: var(--mobile-fs-heading-xlarge);
  font-weight: var(--typo-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.72px;
}

.end_box_wrap .join-end-cont .join-end-txt .txt-btm {
  font-size: var(--pc-fs-label-medium);
  font-weight: var(--typo-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--text-point-color);
}

.end_box_wrap .join-end-button {
  display: flex;
  justify-content: center;
  gap: var(--gap-5);
}

.end_box_wrap .join-end-button .btn {
  max-width: 150px;
  width: 100%;
  font-size: var(--pc-fs-body-small);
  font-weight: var(--typo-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.48px;
  padding: var(--padding-5) var(--padding-6);
  border: none;
  transition: 0.3s;
}

.end_box_wrap .join-end-button .btn:hover {
  transform: translateY(-10px);
  transition: 0.3s;
}

.end_box_wrap .join-end-button .btn.main_btn {
  background-color: var(--join-mem-btn10);
  color: var(--join-mem-btn20);
}

.end_box_wrap .join-end-button .btn.login_btn {
  background-color: var(--join-mem-btn30);
  color: var(--surface-white);
}

@media (max-width: 767px) {

  .end_box_wrap .join-end-cont img {
    width: 50px;
  }

  .end_box_wrap .join-end-cont .join-end-txt .txt-top {
    font-size: var(--pc-fs-navigation-title);
    margin-bottom: 5px;
  }

  .end_box_wrap .join-end-cont .join-end-txt .txt-btm {
    font-size: var(--mobile-fs-body-small);
  }

  .end_box_wrap .join-end-button {
    margin-top: var(--padding-8) !important;
  }
}

/*   회원가입 페이지(step4) e 🛑🛑 */



/* 오류 페이지 s */

.error-page {
  width: 100%;
  height: 100vh;
  background-color: var(--surface-gray-subtler);
}

.error-page .error-wrap {
  max-width: 1284px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;

}

.error-page .error-wrap .error-txt-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--gap-14);
  z-index: 2;
}

.error-page .error-wrap .error-txt-wrap .text-wrap .txt-type {
  font-size: var(--number-max);
  white-space: nowrap;
  margin-bottom: 6px;
}

.error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub {
  display: flex;
  flex-direction: column;
  gap: var(--number-5);
}

.error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont {
  font-size: var(--pc-fs-label-large);
  font-weight: var(--typo-weight-medium);
  line-height: 1.5;

}

.error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont-sub {
  font-size: var(--pc-fs-label-medium);
  color: var(--gray-60);
  max-width: 480px;
  line-height: 1.5;
  letter-spacing: -0.48px;
}

.error-page .error-wrap .error-txt-wrap .btn_wrap {
  display: flex;
  gap: var(--padding-4);
  width: 100%;
}

.error-page .error-wrap .error-txt-wrap .back_btn {
  display: flex;
  align-items: center;
  gap: var(--padding-4);
  justify-content: center;
  max-width: 150px;
  max-height: 47px;
  width: 100%;
  border: 1px solid var(--text-basic);
  padding: var(--padding-4) var(--padding-5);
  border-radius: var(--number-15);
  position: relative;
  overflow: hidden;
}

.error-page .error-wrap .error-txt-wrap .back_btn.main {
  color: var(--surface-white);
  border: 1px solid #2D5517;
}

.error-page .error-wrap .error-txt-wrap .back_btn .btn-txt {
  font-size: var(--pc-fs-body-small);
  font-weight: var(--typo-weight-medium);
  z-index: 3;
}

.error-page .error-wrap .error-txt-wrap .back_btn .bg_black {
  width: 100%;
  height: 47px;
  background-color: var(--text-basic);
  transform: translateX(100%);
  position: absolute;
  border-radius: var(--number-15);
  transition: 0.3s;
  z-index: 0;
}

.error-page .error-wrap .error-txt-wrap .back_btn .bg_black.color {
  background-color: #2D5517;
  transform: translateX(0);
}


.error-page .error-wrap .error-txt-wrap .back_btn:hover .btn-txt {
  color: var(--surface-white);
}

.error-page .error-wrap .error-txt-wrap .back_btn.main:hover .btn-txt {
  color: #2d5517;
}

.error-page .error-wrap .error-txt-wrap .back_btn:hover .bg_black {
  transform: translateX(0);
  transition: 0.3s;
}

.error-page .error-wrap .error-txt-wrap .back_btn:hover .bg_black.color {
  transform: translateX(-100%);
}

.error-page .error-wrap .error-txt-wrap .back_btn:hover .ico_arrow {
  background: url('../images/content/ico_arrow_back_wh.svg') center center / cover no-repeat;
  transition: 0.3s;
}



.error-page .error-wrap .error-txt-wrap .back_btn .ico_arrow {
  display: block;
  width: 24px;
  height: 24px;
  background: url('../images/content/ico_arrow_back.svg') center center / cover no-repeat;
  z-index: 3;
  transition: 0.3s;
}


.error-page .error-wrap .error-img-wrap {
  position: relative;
  z-index: 1;
}

.error-page .error-wrap .error-img-wrap img {
  width: 536px;
  height: 536px;
  object-fit: cover;
}

.error-page .error-wrap .error-img-wrap .bg_position {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;

}

.error-page .error-wrap .error-img-wrap .bg_position .bg_wrap {
  position: relative;
}

.error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 536px;
  height: 536px;
  background-color: #F7FFF3;
  border-radius: 50%;
  animation: fadeBlink 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg_wrap * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes fadeBlink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg02 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 447px;
  height: 447px;
  background-color: #DCFFCC;
  border-radius: 50%;
  animation: fadeBlink2 4s ease-in-out infinite;
}

@keyframes fadeBlink2 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg03 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  background-color: #C4F6AD;
  border-radius: 50%;
  animation: fadeBlink3 4s ease-in-out infinite;
}

@keyframes fadeBlink3 {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 1200px) {

  .error-page .error-wrap .error-txt-wrap {
    gap: var(--padding-15);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-type {
    font-size: var(--number-20);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont {
    font-size: var(--pc-fs-body-small);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont-sub {
    font-size: var(--pc-fs-label-small);
  }

  .error-page .error-wrap .error-img-wrap img {
    width: 480px;
    height: 480px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg01 {
    width: 480px;
    height: 480px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg02 {
    width: 400px;
    height: 400px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg03 {
    width: 320px;
    height: 320px;
  }

}


@media (max-width: 968px) {
  .error-page .error-wrap {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  .error-page .error-wrap .error-txt-wrap {
    order: 1;
    align-items: center;
    gap: var(--gap-8);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-type {
    font-size: var(--pc-fs-display-large);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap {
    text-align: center;
  }

  .error-page .error-wrap .error-txt-wrap .btn_wrap {
    justify-content: center;
  }
}

@media (max-width: 500px) {

  .error-page .error-wrap {
    padding: 0 16px;
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont {
    font-size: var(--pc-fs-body-xsmall);
  }

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-sub .txt-cont-sub {
    font-size: var(--pc-fs-body-xxsmall);
  }

  .error-page .error-wrap .error-txt-wrap .btn_wrap .back_btn {
    max-width: none;
  }

  .error-page .error-wrap .error-txt-wrap .btn_wrap .back_btn .ico_arrow {
    width: 18px;
    height: 18px;
  }

  .error-page .error-wrap .error-txt-wrap .btn_wrap .back_btn .btn-txt {
    font-size: var(--pc-fs-label-small);
  }

  .error-page .error-wrap .error-img-wrap img {
    width: 400px;
    height: 400px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg01 {
    width: 400px;
    height: 400px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg02 {
    width: 350px;
    height: 350px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg03 {
    width: 290px;
    height: 290px;
  }
}

@media (max-width: 400px) {

  .error-page .error-wrap .error-txt-wrap .text-wrap .txt-type {
    font-size: var(--mobile-fs-display-large);
  }

  .error-page .error-wrap .error-txt-wrap .back_btn {
    max-height: 36px;
  }

  .error-page .error-wrap .error-img-wrap img {
    width: 300px;
    height: 300px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg01 {
    width: 300px;
    height: 300px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg02 {
    width: 250px;
    height: 250px;
  }

  .error-page .error-wrap .error-img-wrap .bg_position .bg_wrap .bg03 {
    width: 210px;
    height: 210px;
  }
}

/* 오류 페이지 e */

/*생산판매정보 > 관리정보 폰트 사이즈 수정 s*/
.flow-card .card-bottom .flow-desc {
  font-size: var(--pc-fs-body-large);
  line-height: 1.5;
  font-weight: var(--typo-weight-regular);
  color: var(--text-static);
  letter-spacing: -0.4px;
  text-align: left;
}

@media (max-width: 1200px) {
  .flow-card .card-bottom .flow-desc {
    font-size: var(--pc-fs-heading-small);
    line-height: 1.4;
  }
}

@media (max-width: 767px) {
  .flow-card .card-bottom .flow-desc {
    font-size: var(--pc-fs-label-small);
  }
}

@media (max-width: 480px) {
  .flow-card .card-bottom .flow-desc {
    font-size: var(--pc-fs-caption-medium);
  }
}

.sub-title-wrap .sub-title-cont .title-cont-txt .related-law-text {
  display: inline-block;
  font-size: 0.9em;
  color: var(--text-sub);
}

.exp_box_wrap .sub-cont-wrap .cont-text.desc-text {
  font-size: var(--pc-fs-body-large);
  line-height: 1.5;
  font-weight: var(--typo-weight-regular);
  color: var(--text-static);
  letter-spacing: -0.4px;
  text-align: left;
}

@media (max-width: 1200px) {
  .exp_box_wrap .sub-cont-wrap .cont-text.desc-text {
    font-size: var(--pc-fs-heading-small);
    line-height: 1.4;
  }
}

@media (max-width: 767px) {
  .exp_box_wrap .sub-cont-wrap .cont-text.desc-text {
    font-size: var(--pc-fs-label-small);
  }
}

@media (max-width: 480px) {
  .exp_box_wrap .sub-cont-wrap .cont-text.desc-text {
    font-size: var(--pc-fs-caption-medium);
  }
}
/*생산판매정보 > 관리정보 폰트 사이즈 수정 e*/