@charset "UTF-8";
/* font import */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");
:root {
  /* Color */
  --primary: #FF5500;
  --primary-bg: #e8f1ff;
  --primary-hover: #D74800;
  --secondary: #16A34A;
  --secondary-hover: #166534;
  --text: #111111;
  --warning: #BE123C;
  /* Gray Scale */
  --gray-50: ##FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --black: #000;
  --white: #fff;
  /* Spacing */
  --space-0: 0rem;
  --space-4: 0.4rem;
  --space-8: 0.8rem;
  --space-12: 1.2rem;
  --space-16: 1.6rem;
  --space-20: 2.0rem;
  --space-24: 2.4rem;
  --space-28: 2.8rem;
  --space-32: 3.2rem;
  --space-36: 3.6rem;
  --space-40: 4.0rem;
  --space-44: 4.4rem;
  --space-48: 4.8rem;
  --space-52: 5.2rem;
  --space-56: 5.6rem;
  --space-60: 6.0rem;
  --space-64: 6.4rem;
  --space-68: 6.8rem;
  --space-72: 7.2rem;
  --space-76: 7.6rem;
  --space-80: 8.0rem;
  --space-84: 8.4rem;
  --space-88: 8.8rem;
  --space-92: 9.2rem;
  --space-96: 9.6rem;
  --space-100: 10.0rem;
  --space-104: 10.4rem;
  --space-108: 10.8rem;
  --space-112: 11.2rem;
  --space-116: 11.6rem;
  --space-120: 12.0rem;
  --space-124: 12.4rem;
  --space-128: 12.8rem;
  --space-132: 13.2rem;
  --space-136: 13.6rem;
  --space-140: 14.0rem;
  --space-144: 14.4rem;
  --space-148: 14.8rem;
  --space-152: 15.2rem;
  --space-156: 15.6rem;
  --space-160: 16.0rem;
  /* Font */
  --font-base: "Pretendard", sans-serif;
  --font-en: "Google Sans Flex", sans-serif;
  --f-size-12: 1.2rem;
  --f-size-14: 1.4rem;
  --f-size-16: 1.6rem;
  --f-size-18: 1.8rem;
  --f-size-20: 2.0rem;
  --f-size-22: 2.2rem;
  --f-size-24: 2.4rem;
  --f-size-26: 2.6rem;
  --f-size-28: 2.8rem;
  --f-size-30: 3rem;
  --f-size-32: 3.2rem;
  --f-size-34: 3.4rem;
  --f-size-36: 3.6rem;
  --f-size-38: 3.8rem;
  --f-size-40: 4.0rem;
  --f-size-42: 4.2rem;
  --f-size-44: 4.4rem;
  --f-size-46: 4.6rem;
  --f-size-48: 4.8rem;
  --f-size-50: 5rem;
  --f-size-52: 5.2rem;
  --f-size-54: 5.4rem;
  --f-size-56: 5.6rem;
  --f-size-58: 5.8rem;
  --f-size-60: 6.0rem;
  --f-size-160: 16rem;
  --radius-4: 0.4rem;
  --radius-8: 0.8rem;
  --radius-12: 1.2rem;
  --radius-16: 1.6rem;
}

/*-----------------------------------------------------------------
   base
------------------------------------------------------------------*/
/* reset */
html {
  font-size: 62.5%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

form, fieldset {
  display: block;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  font-family: var(--font-en), var(--font-base), "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  font-size: 1.5rem;
}

table, tbody, tr, td, th {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  outline: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  outline: none;
}

button, input, select {
  overflow: visible;
  border-width: 1px;
  border-style: solid;
  border-color: va-color(grey500);
  background: transparent;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button {
  cursor: pointer;
  user-select: none;
  border: none;
}

/* position absolute : abs */
/* position fixed : fix */
/* 센터 abs 정렬  */
/* border-radius */
/* media querry */
/* -----------------------------------
   header
----------------------------------- */
.header {
  position: fixed;
  width: 100%;
  z-index: 90;
  padding: 4.2rem 4vw 4vw 4vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  /* ----------------------------------- */
  /* hamburg
  /* ----------------------------------- */
  /* ----------------------------------- */
  /* full menu
  /* ----------------------------------- */
}
@media (max-width: 768px) {
  .header {
    padding: 2.4rem;
  }
}
.header .hambug {
  z-index: 999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  transition: transform 0.25s ease;
  /* 햄버거 열림 상태 */
}
@media (max-width: 768px) {
  .header .hambug {
    width: 48px;
    height: 48px;
  }
}
.header .hambug span {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
  transition: all 0.3s ease;
}
.header .hambug:hover {
  transform: scale(1.08);
}
.header .hambug.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header .hambug.is-open span:nth-child(2) {
  opacity: 0;
}
.header .hambug.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.header .full-menu {
  padding: 10vw;
  height: 100%;
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  z-index: 998;
  pointer-events: none;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
  flex-wrap: wrap;
  gap: 0;
}
@media (max-width: 768px) {
  .header .full-menu {
    padding: 32vw 10vw 24vw 10vw;
  }
}
.header .full-menu .full-menu-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem 0;
}
.header .full-menu .full-menu-nav .item {
  cursor: pointer;
  font-size: 5.2rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .header .full-menu .full-menu-nav .item {
    font-size: 3.6rem;
    margin-bottom: 1.2rem;
  }
}
.header .full-menu .full-menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12rem;
}
@media (max-width: 768px) {
  .header .full-menu .full-menu-foot {
    gap: 2.4rem;
    flex-direction: column;
  }
}
.header .full-menu .full-menu-foot .item p {
  margin: 0;
  line-height: 1.4;
}
.header .full-menu .full-menu-foot .item p:first-child {
  opacity: 0.6;
  margin-bottom: 1.2rem;
}

/* text wipe */
.wipe {
  --base-color: #fff; /* 기본 글자색 */
  --duration: .4s; /* 애니메이션 시간 */
  position: relative;
  display: inline-block;
  /*방향*/
}
.wipe:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--primary);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration) ease;
  pointer-events: none;
}
.wipe.from-left:after {
  clip-path: inset(0 100% 0 0);
}
.wipe.from-right:after {
  clip-path: inset(0 0 0 100%);
}
.wipe.from-top:after {
  clip-path: inset(100% 0 0 0);
}
.wipe.from-bottom:after {
  clip-path: inset(0 0 100% 0);
}
.wipe:hover:after {
  clip-path: inset(0 0 0 0);
}

/* -----------------------------------
   footer
----------------------------------- */
.footer {
  padding: 0 4vw 15rem 4vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
@media (max-width: 768px) {
  .footer {
    padding: 0 2.4rem 4.2rem 2.4rem;
  }
}
.footer-lt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-lt .sns {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-lt .addr {
  color: var(--white);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 768px) {
  .footer-rt {
    margin-top: 3.6rem;
  }
}

/* -----------------------------------
   tgr - 구조/스페이싱
----------------------------------- */
.tgr {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  gap: var(--space-12);
  position: relative;
}
.tgr__tit, .tgr__m-tit, .tgr__t-desc, .tgr__desc {
  margin: 0;
  color: var(--gray-900);
}
.tgr__t-desc {
  color: var(--primary);
}
.tgr__t-desc.vt {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left top;
  white-space: nowrap;
  line-height: 1.4;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -1.2rem;
}
.tgr__desc {
  margin-top: var(--space-8);
  line-height: 1.6;
}

/* -----------------------------------
   Typography 유틸
----------------------------------- */
.tit-mxl {
  font-size: var(--f-size-160);
  font-weight: 500;
  line-height: 1.2;
}
.tit-xxl {
  font-size: var(--f-size-56);
  font-weight: 800;
  line-height: 1.2;
}
.tit-xl {
  font-size: var(--f-size-42);
  font-weight: 700;
  line-height: 1.2;
}
.tit-lg {
  font-size: var(--f-size-32);
  font-weight: 600;
  line-height: 1.3;
}
.tit-md {
  font-size: var(--f-size-18);
  font-weight: 500;
  line-height: 1.5;
}
.tit-sm {
  font-size: var(--f-size-16);
  font-weight: 500;
  line-height: 1.5;
}
.tit-xs {
  font-size: var(--f-size-15);
  font-weight: 400;
  line-height: 1.5;
}
.tit-xxs {
  font-size: var(--f-size-13);
  font-weight: 400;
  line-height: 1.5;
}

/* ----------------------------------- */
/* Card Component 
/* ----------------------------------- */
.card, .card-in, .card-bs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  cursor: pointer;
  gap: var(--space-16);
  border-radius: var(--radius-8);
  background: var(--white);
}
.card__stit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: auto;
  font-size: 2.4rem;
}
@media (max-width: 768px) {
  .card__stit {
    font-size: 1.6rem;
  }
}
.card__stit .num {
  font-size: 3.8rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  .card__stit .num {
    font-size: 2.4rem;
  }
}
.card__tit {
  font-size: 2.4rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  .card__tit > img {
    width: 200px;
    height: auto;
  }
}
.card__desc {
  font-size: 1.6rem;
  margin-top: 1rem;
}
.card__btit {
  font-weight: 600;
}
.card__btit .big {
  font-size: 6.2rem;
}
@media (max-width: 768px) {
  .card__btit .big {
    font-size: 3.6rem;
    margin-top: 0.6rem;
  }
}
.card__btit .sml {
  font-size: 2rem;
}
@media (max-width: 768px) {
  .card__btit .sml {
    font-size: 1.6rem;
  }
}
.card-cont {
  z-index: 2;
}

.card-bs {
  padding: 0;
  overflow: hidden;
}
.card-bs .fig {
  overflow: hidden;
  aspect-ratio: 1.7777777778;
}
.card-bs .fig > img,
.card-bs .fig > .fig {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-bs .card-cont {
  padding: 2.4rem;
}

.card-in {
  position: relative;
  overflow: hidden;
  color: var(--white);
  /* 카드 오버시 컨텐츠 */
}
.card-in .fig {
  overflow: hidden;
  aspect-ratio: 1;
}
.card-in .fig > img,
.card-in .fig > .fig {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-in .card-cont {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 2.4rem;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.card-in .card-cont.center {
  justify-content: center;
  text-align: center;
}
.card-in .card-cont.bottom {
  justify-content: flex-end;
  margin-top: auto;
}
.card-in .card-ov {
  padding: 4.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
@media (max-width: 768px) {
  .card-in .card-ov {
    display: none;
  }
}
.card-in .card-ov__stit {
  font-size: 1.8rem;
}
.card-in .card-ov__tit {
  margin-top: 1.8rem;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.card-in .card-ov__desc {
  margin-top: auto;
  font-size: 2.2rem;
}
.card-in.dimd::after {
  content: "";
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.card-in .card-ov {
  z-index: 9;
  position: absolute;
  inset: 0;
  background-color: var(--primary);
}

.tab-cont {
  position: relative;
}

.tab {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
}
.tab__item {
  position: relative;
  color: var(--gray-700);
  width: 100%;
  flex: 1;
  height: 4.8rem;
  line-height: 4.8rem;
  font-size: 1.8rem;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.tab__item.actived {
  font-weight: 600;
}
.tab__item__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
.tab-uline .tab__item:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--gray-400);
}
.tab-uline .tab__item.actived {
  color: va-color(primary);
}
.tab-uline .tab__item.actived:before {
  background-color: var(--primary);
}
.tab-bx {
  overflow: hidden;
  position: relative;
  border-radius: 0.4rem;
}
.tab-bx:before {
  content: "";
  border: 1px solid var(--gray-300);
  position: absolute;
  inset: 0;
}
.tab-bx .tab__item {
  border-radius: 0;
  position: relative;
}
.tab-bx .tab__item.actived {
  color: var(--white);
  background-color: var(--primary);
}
.tab-bx .tab__item:after {
  content: "";
  height: 100%;
  width: 1px;
  background-color: var(--gray-200);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.tab-rd {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.tab-rd .tab__item {
  width: auto;
  background-color: var(--gray-100);
  border-radius: 3rem;
  margin: 0 0.4rem;
  padding: 0 2.4rem;
}
.tab-rd .tab__item.actived {
  color: #fff;
  background-color: var(--primary);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.tab-bxline:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--primary);
  height: 1px;
}
.tab-bxline .tab__item {
  border-radius: 0.4rem 0.4rem 0 0;
}
.tab-bxline .tab__item.actived {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--primary);
  border-bottom: 1px solid transparent;
  color: var(--primary);
  background-color: var(--white);
}
.tab-scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .tab-scrollable {
    display: flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-12);
  }
  .tab-scrollable .tab__item {
    flex: 0 0 auto;
    width: auto;
  }
}

/* -----------------------------------
   Tab View
----------------------------------- */
.tab-view {
  margin-top: 4.2rem;
}
.tab-view__sec {
  display: none;
}
.tab-view__sec:after {
  content: "";
  display: block;
  clear: both;
}
.tab-view__sec.actived {
  display: block;
}
.tab-view__desc {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 6.2rem;
  font-weight: 300;
}
.tab-view__desc > p + p {
  margin-top: 3.2rem;
}

/* -----------------------------------
   공통 아이콘 베이스
----------------------------------- */
[class^=icon-] {
  display: inline-block;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 1em;
  height: 1em;
}

/* -----------------------------------
   아이콘 사이즈 시스템
----------------------------------- */
.icon-sm {
  width: 1.6rem;
  height: 1.6rem;
}

.icon-md {
  width: 2.4rem;
  height: 2.4rem;
}

.icon-lg {
  width: 3.2rem;
  height: 3.2rem;
}

/* -----------------------------------
   아이콘 컬러 옵션
----------------------------------- */
.is-dark {
  color: var(--black);
}

.is-white {
  color: var(--white);
}

.is-muted {
  color: var(--gray-400);
}

/* -----------------------------------
   공통 배경 래퍼
----------------------------------- */
.icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-bg > i {
  width: 50%;
  height: 50%;
}
.icon-bg.is-dark {
  background: #222;
}
.icon-bg.is-dark > i {
  color: #fff !important;
}

/* -----------------------------------
   배경 타입
----------------------------------- */
.icon-circle {
  border-radius: 50%;
  background: var(--gray-200);
}

.icon-round {
  border-radius: 1.2rem;
  background: var(--gray-200);
}

/* 배경 크기 옵션 */
.icon-circle-sm,
.icon-round-sm {
  width: 3.6rem;
  height: 3.6rem;
}

.icon-circle-md,
.icon-round-md {
  width: 4.8rem;
  height: 4.8rem;
}

.icon-circle-lg,
.icon-round-lg {
  width: 6.4rem;
  height: 6.4rem;
}

/* -----------------------------------
   아이콘 네임 컨벤션
----------------------------------- */
.icon-delete {
  -webkit-mask-image: url("/libs/img/icon_delete.svg");
  mask-image: url("/libs/img/icon_delete.svg");
}

.icon-close {
  -webkit-mask-image: url("/libs/img/icon_close.svg");
  mask-image: url("/libs/img/icon_close.svg");
}

.icon-arr-bottom {
  -webkit-mask-image: url("/libs/img/main/icon_arr_b.svg");
  mask-image: url("/libs/img/main/icon_arr_b.svg");
}

.btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: var(--space-8) var(--space-16);
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  font-family: var(--font-base);
  /* -----------------------------------
     색상/스타일
  ----------------------------------- */
  /* -----------------------------------
     크기
  ----------------------------------- */
}
.btn:has(i) {
  gap: var(--space-4);
}
.btn-primary {
  background-color: var(--primary);
  color: var(--white);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-gray {
  background: var(--gray-200);
  color: var(--text);
}
.btn-gray:hover {
  background-color: var(--gray-300);
}
.btn-xlg {
  min-width: 25rem;
  height: 7.2rem;
  padding: 0 var(--space-20);
  font-size: var(--f-size-20);
  font-weight: 700;
}
@media (max-width: 768px) {
  .btn-xlg {
    min-width: 10rem;
    height: 4.2rem;
    padding: 0 var(--space-16);
    font-size: var(--f-size-16);
  }
}
.btn-lg {
  min-width: 12rem;
  height: 5.6rem;
  padding: 0 var(--space-20);
  font-size: var(--f-size-16);
  font-weight: 700;
}
@media (max-width: 768px) {
  .btn-lg {
    min-width: 10rem;
    height: 4.2rem;
    padding: 0 var(--space-16);
    font-size: var(--f-size-16);
  }
}
.btn-md {
  min-width: 10rem;
  height: 4.8rem;
  padding: 0 var(--space-18);
  font-size: var(--f-size-16);
}
@media (max-width: 768px) {
  .btn-md {
    min-width: 8rem;
    height: 3.8rem;
    padding: 0 var(--space-16);
    font-size: var(--f-size-15);
  }
}
.btn-sm {
  min-width: 8rem;
  height: 3.6rem;
  padding: 0 var(--space-12);
  font-size: var(--f-size-14);
}
@media (max-width: 768px) {
  .btn-sm {
    min-width: 7rem;
    height: 3rem;
    font-size: var(--f-size-15);
  }
}
.btn-xs {
  min-width: 6.8rem;
  height: 3rem;
  padding: 0 var(--space-10);
  font-size: var(--f-size-13);
}
@media (max-width: 768px) {
  .btn-xs {
    min-width: 6rem;
    height: 2.6rem;
    font-size: var(--f-size-12);
  }
}

.chip {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  font-family: var(--font-base);
  font-size: 1.5rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 3rem;
  transition: all 0.4s ease;
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* -----------------------------------
     Size
  ----------------------------------- */
}
.chip:has(i) {
  gap: var(--space-4);
}
+ .chip-primary {
  background-color: var(--primary);
  color: var(--white);
}
+ .chip-primary:hover {
  background-color: var(--primary-hover);
}
.chip-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.chip-outline:hover {
  background-color: var(--primary-50);
}
.chip-gray {
  background: var(--gray-200);
  color: var(--text);
}
.chip-gray:hover {
  background-color: var(--gray-300);
}
.chip-lg {
  font-size: var(--f-size-16);
  padding: 1rem 1.6rem;
}
.chip-md {
  font-size: var(--f-size-15);
  padding: 0.8rem 1.4rem;
}
.chip-sm {
  font-size: var(--f-size-14);
  padding: 0.4rem 1.2rem;
}

.form-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-12);
  position: relative;
  font-family: var(--font-base);
  margin-bottom: var(--space-16);
  /* 라벨 */
  /* 입력 필드 래퍼 */
  /* 공통 입력 스타일 */
  /* 셀렉트 */
  /* 텍스트에어리어 */
  /* 에러 메시지 */
}
@media (max-width: 768px) {
  .form-group {
    flex-direction: column;
    gap: var(--space-8);
  }
}
.form-group .fm-label {
  flex: 0 0 20%;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-700);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .form-group .fm-label {
    flex: none;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
  }
}
.form-group .form-field {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
}
.form-group .form-field > * {
  flex: 1 1 auto;
}
@media (max-width: 960px) {
  .form-group .form-field {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }
}
.form-group .fm-input,
.form-group .fm-select,
.form-group .fm-textarea {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  border-radius: var(--radius-8);
  border: 1px solid var(--gray-400);
  background-color: var(--white);
  padding: 0 1.6rem;
  transition: all 0.25s ease;
  color: var(--gray-900);
  height: 4.8rem;
}
.form-group .fm-input:focus,
.form-group .fm-select:focus,
.form-group .fm-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
.form-group .fm-input::placeholder,
.form-group .fm-select::placeholder,
.form-group .fm-textarea::placeholder {
  color: var(--gray-500);
}
@media (max-width: 768px) {
  .form-group .fm-input,
  .form-group .fm-select,
  .form-group .fm-textarea {
    font-size: 1.5rem;
    height: 4.2rem;
  }
}
.form-group .fm-select {
  appearance: none;
  background: var(--white) url("../img/icon_arrow_bottom.svg") no-repeat right 1.6rem center;
  background-size: 2.4rem;
  padding-right: 3.2rem;
}
.form-group .fm-textarea {
  height: auto;
  min-height: 12rem;
  line-height: 1.6;
  padding: 1.2rem 1.6rem;
  resize: vertical;
}
.form-group .fm-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  /* 라디오 공통 */
  /* 체크박스는 네모 */
}
.form-group .fm-options .rdo,
.form-group .fm-options .chk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 1.5rem;
  color: var(--gray-800);
  line-height: 1.4;
  /* 숨겨진 input */
  /* 커스텀 아이콘 */
  /* 텍스트 */
  /* 체크 상태 */
  /* 라디오 체크 상태 */
}
.form-group .fm-options .rdo input,
.form-group .fm-options .chk input {
  position: absolute;
  inset: 0; /* 부모 라벨 전체 클릭 영역 */
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.form-group .fm-options .rdo__icon,
.form-group .fm-options .chk__icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--gray-400);
  border-radius: 50%;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 0;
}
.form-group .fm-options .rdo__text,
.form-group .fm-options .chk__text {
  position: relative;
  z-index: 0;
  line-height: 1.4;
}
.form-group .fm-options .rdo input:checked + .chk__icon,
.form-group .fm-options .chk input:checked + .chk__icon {
  border-color: var(--primary);
  background: var(--primary) url("../img/icon_check_wh.svg") no-repeat center/1.8rem;
}
.form-group .fm-options .rdo input:checked + .rdo__icon,
.form-group .fm-options .chk input:checked + .rdo__icon {
  border-color: var(--primary);
  background-color: var(--primary);
  border-radius: 50%;
}
.form-group .fm-options .rdo input:checked + .rdo__icon::after,
.form-group .fm-options .chk input:checked + .rdo__icon::after {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form-group .fm-options .chk__icon {
  border-radius: 0.4rem;
  background: var(--white) url("../img/icon_check.svg") no-repeat center/1.8rem;
}
.form-group__error {
  color: var(--danger);
  font-size: 1.3rem;
  margin-top: 0.4rem;
}

/* -----------------------------------
   Table List 
----------------------------------- */
.tb-list {
  width: 100%;
  border-top: 2px solid var(--gray-600);
  border-collapse: collapse;
  /* -----------------------------------
     모바일: overflow-x 스크롤형
  ----------------------------------- */
  /* -----------------------------------
     모바일: 2컬럼 카드형 변환
  ----------------------------------- */
}
.tb-list th {
  padding: 2rem;
  border-bottom: 1px solid var(--gray-300);
  text-align: center;
  background-color: var(--gray-100);
  font-weight: 500;
  font-size: 1.6rem;
}
.tb-list td {
  padding: 2rem;
  border-bottom: 1px solid var(--gray-300);
  text-align: center;
  background-color: var(--white);
  font-size: 1.6rem;
}
.tb-list td.subj {
  text-align: left;
}
@media (max-width: 768px) {
  .tb-list-scroll {
    display: block;
    overflow-x: auto;
  }
  .tb-list-scroll th, .tb-list-scroll td {
    white-space: nowrap;
    font-size: 1.5rem;
    padding: 1.5rem;
  }
}
@media (max-width: 768px) {
  .tb-list-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-16);
  }
  .tb-list-card thead {
    display: none;
  }
  .tb-list-card tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--gray-300);
    margin-bottom: var(--space-12);
    padding: var(--space-12);
  }
  .tb-list-card tr td, .tb-list-card tr th {
    flex: 1 1 50%;
    text-align: left;
    padding: 0.8rem 1rem;
    border: none;
    background: transparent;
  }
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
}
.list li {
  position: relative;
  font-size: 1.6rem;
  padding: 0.6rem 0;
}
@media (max-width: 768px) {
  .list li {
    font-size: 1.4rem;
  }
}
.list-line li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--gray-300);
  opacity: 0.8;
}
.list-line li:last-child {
  border-bottom: none;
}
.list-dot li {
  padding: 0.4rem 0 0.4rem 1.6rem;
}
.list-dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--gray-800);
}
@media (max-width: 768px) {
  .list-dot li {
    padding: 0.3rem 0 0.3rem 1.4rem;
  }
  .list-dot li::before {
    top: 1rem;
  }
}
.list-num {
  counter-reset: num 0;
}
.list-num li {
  counter-increment: num 1;
  padding: 0.4rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.list-num li::before {
  content: counter(num, decimal-leading-zero);
  color: var(--primary);
  font-weight: 600;
  font-size: 1.6rem;
  width: 3rem;
}
@media (max-width: 768px) {
  .list-num li {
    font-size: 1.5rem;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
  }
}
.list-circle {
  counter-reset: circle 0;
}
.list-circle li {
  counter-increment: circle 1;
  padding: 0.4rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.list-circle li::before {
  content: counter(circle);
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--gray-600);
  border-radius: 50%;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin-right: 1rem;
}
.list-step li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3rem 0;
}
.list-step li:first-child {
  border-top: none;
}
.list-step__left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  gap: 2rem;
}
.list-step__left .step {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 8rem;
  height: 3.6rem;
  border-radius: 3rem;
  background-color: var(--gray-800);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 600;
}
.list-step__left .text .fst {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text);
}
.list-step__left .text .snd {
  margin-top: 1rem;
  font-size: 1.8rem;
  color: var(--gray-600);
}
@media (max-width: 768px) {
  .list-step__left {
    flex-direction: column;
    align-items: flex-start;
  }
  .list-step__left .fst {
    font-size: 2.2rem;
  }
  .list-step__left .snd {
    font-size: 1.4rem;
  }
}
.list-step__right {
  font-size: 6rem;
  color: var(--primary);
  opacity: 0.6;
  font-weight: 700;
}

:root {
  --icon-arrow-default: url("/libs/img/icon_arrow_bottom.svg");
  --icon-plus-default: url("/libs/img/icon_minus.svg");
  --icon-plus-open: url("/libs/img/icon_plus.svg");
}

/* ----------------------------------- */
/* Accordion Component */
/* ----------------------------------- */
.acc {
  border-bottom: 1px solid var(--gray-200);
  /* open state */
  /* -----------------------
     Mobile menu variant
  ----------------------- */
  /* -----------------------
     Sidebar variant
  ----------------------- */
}
.acc:last-child {
  border-bottom: none;
}
.acc-wrap {
  margin: 4rem 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-8);
  overflow: hidden;
  background: var(--white);
}
.acc-header {
  position: relative;
  padding: 1.6rem;
  font-size: 1.6rem;
  cursor: pointer;
  background: var(--gray-50);
  transition: background 0.2s;
}
.acc-header:hover {
  background: var(--gray-100);
}
.acc-content {
  padding: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.5;
  display: none;
}
.acc-content a {
  display: block;
}
.acc-icon {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.acc-icon.arrow {
  background-image: var(--icon-arrow-default);
}
.acc-icon.plus {
  background-image: var(--icon-plus-default);
}
.acc.is-open .acc-content {
  display: block;
}
.acc.is-open .acc-header {
  background: var(--primary-bg);
}
.acc.is-open .acc-icon.arrow {
  transform: translateY(-50%) rotate(180deg);
}
.acc.is-open .acc-icon.plus {
  background-image: var(--icon-plus-open);
}
.acc-mobile .acc-header {
  font-weight: 600;
}
.acc-mobile .acc-content a {
  display: block;
  margin: 0.4rem 0;
  color: var(--gray-800);
  text-decoration: none;
}
.acc-sidebar {
  max-width: 22rem;
  border-color: var(--gray-400);
}
.acc-sidebar .acc-header {
  background: var(--gray-100);
  font-weight: 600;
}
.acc-sidebar .acc-content a {
  display: block;
  padding: 0.4rem 0;
  color: var(--gray-700);
  text-decoration: none;
}

/* ==================================================
   POPUP (Base)
================================================== */
.pop {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: none;
  overflow: hidden;
  width: min(90%, 40rem);
  background: var(--white);
  border-radius: var(--radius-8);
  /* -----------------------
     variant
  ----------------------- */
  /* -----------------------
     Elements
  ----------------------- */
}
.pop-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
}
.pop-modal {
  min-width: 60rem;
}
.pop-alert {
  max-width: 30rem;
  border: 1px solid var(--gray-300);
}
.pop-slide {
  inset: auto 0 0 0;
  transform: translateY(100%);
  width: 100%;
  max-width: 100%;
  border-radius: 1.2rem 1.2rem 0 0;
}
.pop__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
}
.pop__head {
  padding: 1.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-200);
}
.pop__cont {
  padding: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* -----------------------------------
   Box Component
----------------------------------- */
.box {
  display: block;
  width: 100%;
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background-color: var(--white);
  transition: all 0.3s ease;
  /* ----------------------------
     Mobile / Responsive
  ---------------------------- */
}
.box__tit {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: var(--space-8);
  color: var(--text);
}
.box__desc {
  font-size: 1.6rem;
  color: var(--gray-700);
  line-height: 1.6;
}
.box--shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.box--shadow:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.box--line {
  border: 1px solid var(--gray-300);
  background-color: var(--white);
}
.box--line:hover {
  border-color: var(--primary);
}
@media (max-width: 768px) {
  .box {
    padding: var(--space-12);
  }
  .box__tit {
    font-size: 1.6rem;
  }
  .box__desc {
    font-size: 1.4rem;
  }
}

.jin-main {
  background-color: var(--black);
  overflow-x: hidden;
}

.jin-main-wrap {
  background: url(/libs/img/main/hero_bg.png) top/auto no-repeat;
}
.jin-main-wrap .sec-desc {
  color: var(--white);
  font-size: 4rem;
  margin-bottom: 6rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .sec-desc {
    font-size: 1.8rem;
    margin-bottom: 2.4rem;
  }
}
.jin-main-wrap .sec-tit {
  color: var(--primary);
  font-size: 9.6rem;
  font-weight: 600;
  margin-bottom: 12rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .sec-tit {
    font-size: 3.6rem;
    margin-bottom: 2.4rem;
  }
}
.jin-main-wrap .hero {
  position: relative;
  width: 100%;
  padding: 12vw 20vw 10vw 20vw;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  background: url(/libs/img/main/hero_bg_copy.png) 40% 100%/auto no-repeat;
}
@media (max-width: 768px) {
  .jin-main-wrap .hero {
    padding: 16rem 2.4rem 0 2.4rem;
    background-size: 120%;
    background-position: 40% 56%;
  }
}
.jin-main-wrap .hero-top {
  font-size: 2.4rem;
  margin-bottom: 8.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .hero-top {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
  }
}
.jin-main-wrap .hero-main p {
  width: 100%;
  font-size: 13rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .jin-main-wrap .hero-main p {
    font-size: 4.8rem;
  }
}
.jin-main-wrap .hero-desc {
  font-size: 3.6rem;
  margin-top: 40rem;
  margin-left: auto;
}
@media (max-width: 768px) {
  .jin-main-wrap .hero-desc {
    font-size: 1.8rem;
    left: 0;
    margin-right: auto;
  }
  .jin-main-wrap .hero-desc p + p {
    margin-top: 0.6rem;
  }
}
.jin-main-wrap .portfolio {
  padding: 8vw 4vw 0 4vw;
  display: grid;
  /* PC 기본 grid */
  grid-template-columns: repeat(3, 1fr);
  /* gap 처리 */
  gap: 2rem;
  /* 모바일 반응형 */
}
@media (max-width: 768px) {
  .jin-main-wrap .portfolio {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 768px) {
  .jin-main-wrap .portfolio {
    padding: 4.2rem 2.4rem;
  }
}
.jin-main-wrap .portfolio + .btn-center {
  text-align: center;
  padding-top: 6.8rem;
}
.jin-main-wrap .portfolio + .btn-center .btn-outline {
  border: 1px solid var(--gray-500);
  color: var(--gray-300);
}
.jin-main-wrap .portfolio + .btn-center .btn-outline:hover {
  border: 1px solid var(--white);
}
@media (max-width: 768px) {
  .jin-main-wrap .portfolio + .btn-center {
    padding-top: 0;
  }
}
.jin-main-wrap .service {
  margin-top: 32rem;
  padding: 0 0 0 4vw;
}
@media (max-width: 768px) {
  .jin-main-wrap .service {
    margin-top: 16rem;
  }
}
.jin-main-wrap .service-list {
  padding: 4rem 10vw 0 0;
  overflow: hidden;
  display: flex;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: no-wrap;
  gap: 2rem;
}
.jin-main-wrap .service-list .card-in .fig {
  overflow: hidden;
  aspect-ratio: 0.7647058824;
  width: 48rem;
}
.jin-main-wrap .service-list .card-in .fig > img,
.jin-main-wrap .service-list .card-in .fig > .fig {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .jin-main-wrap .service-list .card-in .fig {
    width: 28rem;
  }
}
.jin-main-wrap .service-list .card-in .card-cont {
  padding: 5rem 4rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .service-list .card-in .card-cont {
    padding: 3.2rem 2.4rem;
  }
}
.jin-main-wrap .partner {
  margin-top: 36rem;
  padding: 0 4vw;
}
@media (max-width: 768px) {
  .jin-main-wrap .partner {
    margin-top: 16rem;
  }
}
.jin-main-wrap .partner .partner-company {
  display: grid;
  /* PC 기본 grid */
  grid-template-columns: repeat(5, 1fr);
  /* gap 처리 */
  /* 모바일 반응형 */
}
@media (max-width: 768px) {
  .jin-main-wrap .partner .partner-company {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
.jin-main-wrap .partner .partner-company img {
  width: 100%;
}
.jin-main-wrap .branding {
  position: relative;
  padding: 20% 0;
  text-align: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .branding {
    padding: 45% 2.4rem;
    gap: 2.4rem;
  }
}
.jin-main-wrap .branding .top {
  font-size: 4.2rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .branding .top {
    font-size: 1.8rem;
  }
}
.jin-main-wrap .branding .en {
  font-size: 4rem;
}
@media (max-width: 768px) {
  .jin-main-wrap .branding .en {
    font-size: 1.5rem;
  }
  .jin-main-wrap .branding .en p {
    display: inline;
  }
}
.jin-main-wrap .branding .bg {
  opacity: 0;
  will-change: opacity;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(/libs/img/main/bg_jin.png) left/cover no-repeat;
}
@media (max-width: 768px) {
  .jin-main-wrap .branding .bg {
    background-image: url("/libs/img/main/bg_jin_mo.png");
  }
}

.back-fade {
  opacity: 0;
  background-color: rgb(255, 255, 255); /* 원하는 배경색 */
  animation: backFadeIn 0.8s ease-out forwards; /* 애니메이션 실행 */
}

@keyframes backFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}