@charset "UTF-8";
/**********
max-width
***********/
/**********
breakpoints
**********/
/**********
font-size
**********/
/**********
color
**********/
/**********
shadow
**********/
/**********
breakpoints
**********/
/**********
shadow
**********/
/**********
reset
**********/
/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default margin */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Anchor reset */
a {
  text-decoration: none;
  color: inherit;
}

/* Button reset */
button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* Input & textarea */
input,
textarea,
select {
  font: inherit;
  border: none;
  outline: none;
}

/* Image */
img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Body defaults */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Remove animations for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body.no-scroll {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

/* =========================
inner
========================= */
.inner {
  width: 100%;
  height: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4rem;
}
.inner.horizontal {
  flex-direction: row;
}

/* =========================
section
========================= */
section .inner {
  padding: 7.5rem 2rem;
}
@media (max-height: 900px) {
  section .inner {
    padding: 2rem 4rem;
  }
}
@media (max-width: 500px) {
  section .inner {
    padding: 5rem 2rem;
  }
}
section.full-section {
  min-height: 100vh;
}
section.full-section .inner {
  justify-content: center;
}

/**********
header
**********/
.header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #E6E8ED;
  position: fixed;
  top: 0;
  z-index: 99999 !important;
}
.header .inner {
  min-height: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.header .logo img {
  height: 1.6rem;
  transition: height 0.3s ease;
}
.header .nav {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.header .nav .nav-list {
  display: flex;
  gap: 1.8rem;
  font-weight: 500;
  font-size: 1.1rem;
}
@media (max-width: 768px) {
  .header .nav .nav-list {
    display: none;
  }
}
.header .nav .nav-list li.on {
  color: #1641FF;
}
.header .nav-toggle-btn {
  flex-shrink: 0;
  display: block;
  position: relative;
  width: 25px;
  height: 18px;
  display: none;
}
@media (max-width: 768px) {
  .header .nav-toggle-btn {
    display: block;
  }
}
.header .nav-toggle-btn .bar {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: all 0.3s ease;
  border-radius: 5px;
}
.header .nav-toggle-btn .top {
  top: 0;
}
.header .nav-toggle-btn .bottom {
  bottom: 0;
}
.header .responsive-nav {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 80px;
  left: 0;
  background-color: #f7f7f7;
  transition: height 0.3s ease;
  z-index: 100;
}
.header .responsive-nav .nav-list {
  font-size: 2rem;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
.header.responsive-nav-open .logo {
  pointer-events: none;
}
.header.responsive-nav-open .responsive-nav {
  height: 100%;
}
.header.responsive-nav-open .nav-toggle-btn .top {
  transform: translateY(8px) rotate(45deg);
}
.header.responsive-nav-open .nav-toggle-btn .bottom {
  transform: translateY(-8px) rotate(-45deg);
}

/**********
footer
**********/
.footer {
  background-color: #222;
  color: #8d949e;
  font-size: 13px;
}
.footer .inner {
  flex-direction: row;
  align-items: center;
  height: 100%;
}
.footer .footer-top {
  border-bottom: 1px solid #8d949e;
}
.footer .footer-top .inner {
  gap: 2.5rem;
  min-height: 50px;
}
.footer .footer-bottom .inner {
  align-items: flex-start;
  padding: 30px 4rem;
  height: 100%;
  min-height: 230px;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.footer .footer-bottom .inner .logo-box {
  flex-shrink: 0;
}
.footer .footer-bottom .inner .company-info-box {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 123px;
}
.footer .footer-bottom .inner .company-info-box .info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer .footer-bottom .inner .company-info-box .info .separator {
  margin: 0 10px;
}
.footer .footer-bottom .inner .link-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer .footer-bottom .inner .link-box a {
  display: block;
  padding: 10px 20px;
  min-height: 40px;
  background-color: #383838;
  color: #8d949e;
  border-radius: 50px;
}
.footer .footer-bottom .inner .link-box a:has(img) {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .footer-bottom .inner .link-box a:has(img) img {
  display: block;
  width: 40%;
  height: 40%;
  object-fit: contain;
  object-position: center;
}

/*******************
글자 단위 좌우 슬라이딩
*******************/
.splitting-text {
  text-align: center;
  overflow: hidden;
}
.splitting-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(var(--side) * 150px));
}
.splitting-text.is-visible .char, .is-visible .splitting-text .char {
  animation: gatherIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 0.05s);
}
@keyframes gatherIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*******************
상,하,좌,우 나타나는 애니메이션
*******************/
.to-left,
.to-right,
.to-top,
.to-bottom {
  opacity: 0;
}
.to-left.to-left,
.to-right.to-left,
.to-top.to-left,
.to-bottom.to-left {
  transform: translateX(50px);
}
.to-left.to-right,
.to-right.to-right,
.to-top.to-right,
.to-bottom.to-right {
  transform: translateX(-50px);
}
.to-left.to-top,
.to-right.to-top,
.to-top.to-top,
.to-bottom.to-top {
  transform: translateY(40px);
}
.to-left.to-bottom,
.to-right.to-bottom,
.to-top.to-bottom,
.to-bottom.to-bottom {
  transform: translateY(-40px);
}
.to-left.is-visible, .is-visible .to-left,
.to-right.is-visible,
.is-visible .to-right,
.to-top.is-visible,
.is-visible .to-top,
.to-bottom.is-visible,
.is-visible .to-bottom {
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}
.to-left.is-visible.to-left, .is-visible .to-left.to-left,
.to-right.is-visible.to-left,
.is-visible .to-right.to-left,
.to-top.is-visible.to-left,
.is-visible .to-top.to-left,
.to-bottom.is-visible.to-left,
.is-visible .to-bottom.to-left {
  animation-name: slideFromRight;
}
.to-left.is-visible.to-right, .is-visible .to-left.to-right,
.to-right.is-visible.to-right,
.is-visible .to-right.to-right,
.to-top.is-visible.to-right,
.is-visible .to-top.to-right,
.to-bottom.is-visible.to-right,
.is-visible .to-bottom.to-right {
  animation-name: slideFromLeft;
}
.to-left.is-visible.to-top, .is-visible .to-left.to-top,
.to-right.is-visible.to-top,
.is-visible .to-right.to-top,
.to-top.is-visible.to-top,
.is-visible .to-top.to-top,
.to-bottom.is-visible.to-top,
.is-visible .to-bottom.to-top {
  animation-name: slideFromBottom;
}
.to-left.is-visible.to-bottom, .is-visible .to-left.to-bottom,
.to-right.is-visible.to-bottom,
.is-visible .to-right.to-bottom,
.to-top.is-visible.to-bottom,
.is-visible .to-top.to-bottom,
.to-bottom.is-visible.to-bottom,
.is-visible .to-bottom.to-bottom {
  animation-name: slideFromTop;
}
@keyframes slideFromRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideFromLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideFromBottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideFromTop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*******************
상,하,좌,우 및 Scale 애니메이션
*******************/
.to-top-scale,
.to-bottom-scale,
.to-left-scale,
.to-right-scale {
  opacity: 0;
  position: relative;
}
.to-top-scale.to-top-scale,
.to-bottom-scale.to-top-scale,
.to-left-scale.to-top-scale,
.to-right-scale.to-top-scale {
  position: relative;
  top: 100px;
  transform: scale(0.8);
  transform-origin: bottom center;
}
.to-top-scale.to-bottom-scale,
.to-bottom-scale.to-bottom-scale,
.to-left-scale.to-bottom-scale,
.to-right-scale.to-bottom-scale {
  position: relative;
  transform: scale(0.8);
  transform-origin: top center;
}
.to-top-scale.to-left-scale,
.to-bottom-scale.to-left-scale,
.to-left-scale.to-left-scale,
.to-right-scale.to-left-scale {
  position: relative;
  transform: scale(0.8);
  transform-origin: center right;
}
.to-top-scale.to-right-scale,
.to-bottom-scale.to-right-scale,
.to-left-scale.to-right-scale,
.to-right-scale.to-right-scale {
  position: relative;
  transform: scale(0.8);
  transform-origin: center left;
}
.to-top-scale.is-visible, .is-visible .to-top-scale,
.to-bottom-scale.is-visible,
.is-visible .to-bottom-scale,
.to-left-scale.is-visible,
.is-visible .to-left-scale,
.to-right-scale.is-visible,
.is-visible .to-right-scale {
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  animation-fill-mode: forwards;
}
.to-top-scale.is-visible.to-top-scale, .is-visible .to-top-scale.to-top-scale,
.to-bottom-scale.is-visible.to-top-scale,
.is-visible .to-bottom-scale.to-top-scale,
.to-left-scale.is-visible.to-top-scale,
.is-visible .to-left-scale.to-top-scale,
.to-right-scale.is-visible.to-top-scale,
.is-visible .to-right-scale.to-top-scale {
  animation-name: slideUpWithScale;
}
.to-top-scale.is-visible.to-bottom-scale, .is-visible .to-top-scale.to-bottom-scale,
.to-bottom-scale.is-visible.to-bottom-scale,
.is-visible .to-bottom-scale.to-bottom-scale,
.to-left-scale.is-visible.to-bottom-scale,
.is-visible .to-left-scale.to-bottom-scale,
.to-right-scale.is-visible.to-bottom-scale,
.is-visible .to-right-scale.to-bottom-scale {
  animation-name: slideDownWithScale;
}
.to-top-scale.is-visible.to-left-scale, .is-visible .to-top-scale.to-left-scale,
.to-bottom-scale.is-visible.to-left-scale,
.is-visible .to-bottom-scale.to-left-scale,
.to-left-scale.is-visible.to-left-scale,
.is-visible .to-left-scale.to-left-scale,
.to-right-scale.is-visible.to-left-scale,
.is-visible .to-right-scale.to-left-scale {
  animation-name: slideLeftWithScale;
}
.to-top-scale.is-visible.to-right-scale, .is-visible .to-top-scale.to-right-scale,
.to-bottom-scale.is-visible.to-right-scale,
.is-visible .to-bottom-scale.to-right-scale,
.to-left-scale.is-visible.to-right-scale,
.is-visible .to-left-scale.to-right-scale,
.to-right-scale.is-visible.to-right-scale,
.is-visible .to-right-scale.to-right-scale {
  animation-name: slideRightWithScale;
}
@keyframes slideUpWithScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideDownWithScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideLeftWithScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideRightWithScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**********
페이지 공통
**********/
html {
  font-family: "Pretendard", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
}
@media (max-width: 768px) {
  html {
    font-size: 0.9375rem;
  }
}
@media (max-width: 500px) {
  html {
    font-size: 0.875rem;
  }
}

* {
  word-break: keep-all;
  line-height: 1.8;
}

/* font */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}
main {
  padding-top: 80px;
  padding-bottom: 100px;
  overflow-x: clip;
}

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  min-width: 0;
}

.flex-box {
  display: flex;
  width: 100%;
}

.align-right {
  text-align: right !important;
}

/* 그림자 */
.has-shadow {
  filter: drop-shadow(31.226px 31.226px 15.613px rgba(196, 208, 221, 0.4));
}
@media (max-width: 768px) {
  .has-shadow {
    filter: drop-shadow(10px 10px 7px rgba(196, 208, 221, 0.3));
  }
}
@media (max-width: 500px) {
  .has-shadow {
    filter: drop-shadow(4px 4px 7px rgba(196, 208, 221, 0.3));
  }
}

.has-shadow-left {
  filter: drop-shadow(-31.226px 31.226px 15.613px rgba(196, 208, 221, 0.4));
}
@media (max-width: 768px) {
  .has-shadow-left {
    filter: drop-shadow(-10px 10px 7px rgba(196, 208, 221, 0.3));
  }
}
@media (max-width: 500px) {
  .has-shadow-left {
    filter: drop-shadow(-4px 4px 7px rgba(196, 208, 221, 0.3));
  }
}

/* form */
.input-text {
  padding: 11px 10px;
  border: 1px solid #e6e8ed;
  border-radius: 5px;
  width: 100%;
}
.input-text::placeholder {
  color: #bcbcbc;
}

input.input-text {
  max-height: 40px;
}

textarea.input-text {
  resize: none;
}

.search-box {
  position: relative;
}
.search-box .input-text {
  padding: 10px 20px;
  border-radius: 50px;
  max-height: 50px;
}
.search-box .search-btn {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  right: 0;
  transform: translate(-100%, -50%);
}
.search-box .search-btn img {
  object-fit: contain;
}

.div-wrapper {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.div-wrapper .label-text {
  min-width: 110px;
  font-weight: 500;
}
.div-wrapper .input-box {
  flex-grow: 1;
  width: 100%;
}

.selection-wrapper {
  display: flex;
  align-items: center;
  gap: 6rem;
  font-size: 1rem;
  font-weight: 500;
}
@media (max-width: 500px) {
  .selection-wrapper {
    gap: 3.8rem;
  }
}
.selection-wrapper label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.selection-wrapper label input {
  cursor: pointer;
}
.selection-wrapper label img {
  flex-shrink: 0;
  width: auto;
  height: 20px;
}

.button {
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 10px;
  gap: 0.6rem;
  padding: 0 1.12rem;
  min-height: 3.75rem;
}
.button img {
  width: 30px;
  height: auto;
}
.button.gray.outline {
  border: 2px solid #E6E8ED;
}

.button-box {
  display: flex;
  justify-content: center;
}

.tab-container .tab-btn-container {
  border-bottom: 1px solid #e6e8ed;
  box-shadow: 0 1px 5px 0 #c7cad4;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(13vw, 12.5rem);
  background-color: #fff;
  position: sticky;
  top: 80px;
  left: 0;
  z-index: 10;
}
.tab-container .tab-btn-container .tab-btn {
  font-size: 1.2rem;
  height: 100%;
  position: relative;
  padding: 0 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.tab-container .tab-btn-container .tab-btn.on::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.3rem;
  background-color: #000;
  position: absolute;
  bottom: 0;
}
.tab-container .tab-panel {
  display: none;
}
.tab-container .tab-panel.on {
  display: block;
}

.text-red {
  color: #db2777;
}

.text-blue {
  color: #1641ff;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
.gap-40 {
  gap: 2.5rem !important;
}

.align-left {
  align-self: flex-start !important;
  text-align: left !important;
}

.sub-visual {
  height: 400px;
}
.sub-visual .inner {
  padding-top: 0;
  padding-bottom: 0;
  justify-content: center;
}
.sub-visual .inner .title-text-wrapper {
  gap: min(1.5vw, 1.25rem);
}
.sub-visual .inner .title-text-wrapper .gradient-text {
  font-weight: 600;
  font-size: 2.5rem;
}
.sub-visual .inner .title-text-wrapper .description-text {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.8rem;
}
.sub-visual.full-section {
  height: 100vh;
}

.title-text-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.title-text-wrapper.align-left {
  align-self: flex-start;
  text-align: left;
}
.title-text-wrapper.with-border {
  padding-bottom: 2.5rem;
  border-bottom: 0.25rem solid #000;
}
.title-text-wrapper .gradient-text {
  background: linear-gradient(90deg, #7A5CFF 0%, #5564FF 50%, #2F6BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  font-weight: 500;
  font-size: 1.75rem;
}
.title-text-wrapper .gradient-text.green {
  background: linear-gradient(90deg, #12BDDF 12%, #25AAB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-text-wrapper h2,
.title-text-wrapper h3 {
  font-size: 2.5rem;
  font-weight: 400;
  word-break: keep-all;
}
.title-text-wrapper h2.q-text,
.title-text-wrapper h3.q-text {
  font-size: 1.8rem;
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.title-text-wrapper h2.q-text .num-text,
.title-text-wrapper h3.q-text .num-text {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50%;
  background-color: #494C55;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .title-text-wrapper h2.q-text,
  .title-text-wrapper h3.q-text {
    font-size: 1.8rem !important;
  }
}
@media (max-width: 768px) {
  .title-text-wrapper h2,
  .title-text-wrapper h3 {
    font-size: 1.8rem !important;
  }
}
.title-text-wrapper h2 strong,
.title-text-wrapper h3 strong {
  font-weight: 600;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .res-fs-md {
    font-size: 1.6rem !important;
  }
}
@media (max-width: 500px) {
  .res-fs-md {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .res-fs-sm {
    font-size: 1.5rem !important;
  }
}
@media (max-width: 500px) {
  .res-fs-sm {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 768px) {
  .res-fs-xs {
    font-size: 1.1rem !important;
  }
}
@media (max-width: 500px) {
  .res-fs-xs {
    font-size: 1rem !important;
  }
}

/* badge */
.badge-box {
  display: flex;
  gap: 0.6rem;
}

.badge {
  padding: 0.7rem 1rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  min-width: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge.blue {
  border: 1px solid #6070FF;
  color: #6070FF;
}

/* 페이지네이션 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6.25rem;
}
.pagination-container .pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pagination-container .pagination .page-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-width: 2.75rem;
  height: 2.75rem;
  gap: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #F1F1F1;
  color: #333;
  font-weight: 600;
  cursor: pointer;
}
.pagination-container .pagination .page-item:hover {
  background-color: #eee;
}
.pagination-container .pagination .page-item.active {
  background-color: #DADEE5;
}
.pagination-container .pagination .page-item.active button {
  color: #fff;
}
.pagination-container .pagination .page-item.arrow {
  padding: 0;
}
.pagination-container .pagination .page-item button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}
.pagination-container .pagination .page-item button img {
  width: 1.37rem;
  height: auto;
}
.pagination-container .pagination .pagination-ellipsis {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

/*# sourceMappingURL=main.css.map */