@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap");

:root {
  /* Color styles */
  --color-neutral-50: rgba(255, 255, 255, 1);
  --color-neutral-75: rgba(253, 253, 253, 1);
  --color-neutral-100: rgba(248, 248, 248, 1);
  --color-neutral-200: rgba(229, 229, 231, 1);
  --color-neutral-300: rgba(211, 211, 215, 1);
  --color-neutral-400: rgba(174, 174, 180, 1);
  --color-neutral-500: rgba(140, 140, 148, 1);
  --color-neutral-600: rgba(105, 105, 113, 1);
  --color-neutral-700: rgba(67, 67, 73, 1);
  --color-neutral-800: rgba(33, 33, 35, 1);
  --color-neutral-900: rgba(0, 0, 0, 1);

  --color-primary-100: rgba(255, 235, 231, 1);
  --color-primary-200: rgba(255, 221, 214, 1);
  --color-primary-300: rgba(255, 205, 195, 1);
  --color-primary-400: rgba(255, 183, 169, 1);
  --color-primary-500: rgba(255, 155, 136, 1);
  --color-primary-600: rgba(255, 124, 101, 1);
  --color-primary-700: rgba(247, 92, 70, 1);
  --color-primary-800: rgba(234, 56, 41, 1);
  --color-primary-900: rgba(211, 21, 16, 1);
  --color-primary-1000: rgba(180, 0, 0, 1);
  --color-primary-1100: rgba(147, 0, 0, 1);
  --color-primary-1200: rgba(116, 0, 0, 1);
  --color-primary-1300: rgba(89, 0, 0, 1);
  --color-primary-1400: rgba(67, 0, 0, 1);

  --color-secondary-100: rgba(224, 242, 255, 1);
  --color-secondary-200: rgba(202, 232, 255, 1);
  --color-secondary-300: rgba(181, 222, 255, 1);
  --color-secondary-400: rgba(150, 206, 253, 1);
  --color-secondary-500: rgba(120, 187, 250, 1);
  --color-secondary-600: rgba(89, 167, 246, 1);
  --color-secondary-700: rgba(56, 146, 243, 1);
  --color-secondary-800: rgba(20, 122, 243, 1);
  --color-secondary-900: rgba(2, 101, 220, 1);
  --color-secondary-1000: rgba(0, 84, 182, 1);
  --color-secondary-1100: rgba(0, 68, 145, 1);
  --color-secondary-1200: rgba(0, 53, 113, 1);
  --color-secondary-1300: rgba(0, 39, 84, 1);
  --color-secondary-1400: rgba(0, 28, 60, 1);

  --color-semantic-info-600: rgba(89, 167, 246, 1);
  --color-semantic-info-700: rgba(56, 146, 243, 1);
  --color-semantic-info-800: rgba(20, 122, 243, 1);

  --color-semantic-positive-600: rgba(47, 184, 128, 1);
  --color-semantic-positive-700: rgba(21, 164, 110, 1);
  --color-semantic-positive-800: rgba(0, 143, 93, 1);

  --color-semantic-notice-600: rgba(246, 133, 17, 1);
  --color-semantic-notice-700: rgba(228, 111, 0, 1);
  --color-semantic-notice-800: rgba(203, 93, 0, 1);

  --color-semantic-negative-600: rgba(255, 124, 101, 1);
  --color-semantic-negative-700: rgba(247, 92, 70, 1);
  --color-semantic-negative-800: rgba(234, 56, 41, 1);

  --color-state-normal: rgba(var(--color-primary-800));
  --color-state-hover: rgba(var(--color-primary-900));
  --color-state-press: rgba(var(--color-primary-1000));

  --color-image-overlay-15: rgba(36, 36, 36, 0.15);

  --color-svg-filter-neutral-50: invert(100%) sepia(0%) saturate(0%)
    hue-rotate(80deg) brightness(250%) contrast(101%);
  --color-svg-filter-neutral-75: invert(100%) sepia(1%) saturate(7442%)
    hue-rotate(171deg) brightness(139%) contrast(98%);
  --color-svg-filter-neutral-100: invert(99%) sepia(25%) saturate(7378%)
    hue-rotate(193deg) brightness(136%) contrast(95%);
  --color-svg-filter-neutral-200: invert(100%) sepia(1%) saturate(4966%)
    hue-rotate(180deg) brightness(99%) contrast(82%);
  --color-svg-filter-neutral-300: invert(100%) sepia(1%) saturate(3685%)
    hue-rotate(183deg) brightness(94%) contrast(78%);
  --color-svg-filter-neutral-400: invert(80%) sepia(8%) saturate(142%)
    hue-rotate(201deg) brightness(88%) contrast(83%);
  --color-svg-filter-neutral-500: invert(67%) sepia(4%) saturate(470%)
    hue-rotate(201deg) brightness(83%) contrast(85%);
  --color-svg-filter-neutral-600: invert(43%) sepia(11%) saturate(246%)
    hue-rotate(202deg) brightness(91%) contrast(85%);
  --color-svg-filter-neutral-700: invert(24%) sepia(9%) saturate(350%)
    hue-rotate(201deg) brightness(97%) contrast(89%);
  --color-svg-filter-neutral-800: invert(10%) sepia(7%) saturate(344%)
    hue-rotate(201deg) brightness(97%) contrast(92%);
  --color-svg-filter-neutral-900: invert(0%) sepia(98%) saturate(1%)
    hue-rotate(65deg) brightness(92%) contrast(98%);

  /* Text-size styles */
  /* base size: 16px */
  --font-size-button: 0.875rem;
  --font-size-button-xs: 0.75rem;

  --font-size-desktop-display-1: 5.125rem;
  --font-size-desktop-display-2: 4.25rem;
  --font-size-desktop-display-3: 3.5rem;
  --font-size-desktop-heading-1: 3rem;
  --font-size-desktop-heading-2: 2.375rem;
  --font-size-desktop-heading-3: 2rem;
  --font-size-desktop-heading-4: 1.5rem;
  --font-size-desktop-heading-5: 1.25rem;
  --font-size-desktop-body-l: 1.125rem;
  --font-size-desktop-body-m: 1rem;
  --font-size-desktop-body-s: 0.875rem;
  --font-size-desktop-body-xs: 0.75rem;

  --font-size-mobile-heading-1: 2.375rem;
  --font-size-mobile-heading-2: 1.875rem;
  --font-size-mobile-heading-3: 1.625rem;
  --font-size-mobile-heading-4: 1.25rem;
  --font-size-mobile-heading-5: 1rem;
  --font-size-mobile-body-l: 1rem;
  --font-size-mobile-body-m: 0.875rem;
  --font-size-mobile-body-s: 0.75rem;

  /* Line-height styles */
  /* base size: 16px */
  --lineheight-button: 1.5rem;
  --lineheight-button-xs: 1.125rem;

  --lineheight-desktop-display-1: 7rem;
  --lineheight-desktop-display-2: 5.5rem;
  --lineheight-desktop-display-3: 5rem;
  --lineheight-desktop-heading-1: 4rem;
  --lineheight-desktop-heading-2: 3.5rem;
  --lineheight-desktop-heading-3: 3rem;
  --lineheight-desktop-heading-4: 2.5rem;
  --lineheight-desktop-heading-5: 2rem;
  --lineheight-desktop-body-l: 1.75rem;
  --lineheight-desktop-body-m: 1.5rem;
  --lineheight-desktop-body-s: 1.5rem;
  --lineheight-desktop-body-xs: 1.25rem;

  --lineheight-mobile-heading-1: 3rem;
  --lineheight-mobile-heading-2: 2.625rem;
  --lineheight-mobile-heading-3: 2.375rem;
  --lineheight-mobile-heading-4: 1.875rem;
  --lineheight-mobile-heading-5: 1.625rem;
  --lineheight-mobile-body-l: 1.625rem;
  --lineheight-mobile-body-m: 1.5rem;
  --lineheight-mobile-body-s: 1.25rem;

  /* Font-weight styles */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-exbold: 800;

  /* Shadow styles */
  --shadow-50-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.03);
}

/* Text styles preset */
.text-button {
  font-size: var(--font-size-button);
  line-height: var(--lineheight-button);
  font-weight: var(--font-weight-bold);
}

.text-button-xs {
  font-size: var(--font-size-button-xs);
  line-height: var(--lineheight-button-xs);
  font-weight: var(--font-weight-bold);
}

.text-desktop-display-1 {
  font-size: var(--font-size-desktop-display-1);
  line-height: var(--lineheight-desktop-display-1);
  font-weight: var(--font-weight-semibold);
}

.text-desktop-display-2 {
  font-size: var(--font-size-desktop-display-2);
  line-height: var(--lineheight-desktop-display-2);
  font-weight: var(--font-weight-semibold);
}

.text-desktop-display-3 {
  font-size: var(--font-size-desktop-display-3);
  line-height: var(--lineheight-desktop-display-3);
  font-weight: var(--font-weight-semibold);
}

.text-desktop-heading-1 {
  font-size: var(--font-size-desktop-heading-1);
  line-height: var(--lineheight-desktop-heading-1);
  font-weight: var(--font-weight-bold);
}

.text-desktop-heading-2 {
  font-size: var(--font-size-desktop-heading-2);
  line-height: var(--lineheight-desktop-heading-2);
  font-weight: var(--font-weight-bold);
}

.text-desktop-heading-3 {
  font-size: var(--font-size-desktop-heading-3);
  line-height: var(--lineheight-desktop-heading-3);
  font-weight: var(--font-weight-bold);
}

.text-desktop-heading-4 {
  font-size: var(--font-size-desktop-heading-4);
  line-height: var(--lineheight-desktop-heading-4);
  font-weight: var(--font-weight-bold);
}

.text-desktop-heading-5 {
  font-size: var(--font-size-desktop-heading-5);
  line-height: var(--lineheight-desktop-heading-5);
  font-weight: var(--font-weight-bold);
}

.text-desktop-body-l-r {
  font-size: var(--font-size-desktop-body-l);
  line-height: var(--lineheight-desktop-body-l);
  font-weight: var(--font-weight-regular);
}

.text-desktop-body-l-b {
  font-size: var(--font-size-desktop-body-l);
  line-height: var(--lineheight-desktop-body-l);
  font-weight: var(--font-weight-bold);
}

.text-desktop-body-m-r {
  font-size: var(--font-size-desktop-body-m);
  line-height: var(--lineheight-desktop-body-m);
  font-weight: var(--font-weight-regular);
}

.text-desktop-body-m-m {
  font-size: var(--font-size-desktop-body-m);
  line-height: var(--lineheight-desktop-body-m);
  font-weight: var(--font-weight-medium);
}

.text-desktop-body-m-sb {
  font-size: var(--font-size-desktop-body-m);
  line-height: var(--lineheight-desktop-body-m);
  font-weight: var(--font-weight-semibold);
}

.text-desktop-body-s-r {
  font-size: var(--font-size-desktop-body-s);
  line-height: var(--lineheight-desktop-body-s);
  font-weight: var(--font-weight-regular);
}

.text-desktop-body-s-m {
  font-size: var(--font-size-desktop-body-s);
  line-height: var(--lineheight-desktop-body-s);
  font-weight: var(--font-weight-medium);
}

.text-desktop-body-s-b {
  font-size: var(--font-size-desktop-body-s);
  line-height: var(--lineheight-desktop-body-s);
  font-weight: var(--font-weight-bold);
}

.text-desktop-body-xs-r {
  font-size: var(--font-size-desktop-body-xs);
  line-height: var(--lineheight-desktop-body-xs);
  font-weight: var(--font-weight-regular);
}

.text-desktop-body-xs-exb {
  font-size: var(--font-size-desktop-body-xs);
  line-height: var(--lineheight-desktop-body-xs);
  font-weight: var(--font-weight-exbold);
}

.text-mobile-heading-1 {
  font-size: var(--font-size-mobile-heading-1);
  line-height: var(--lineheight-mobile-heading-1);
  font-weight: var(--font-weight-bold);
}

.text-mobile-heading-2 {
  font-size: var(--font-size-mobile-heading-2);
  line-height: var(--lineheight-mobile-heading-2);
  font-weight: var(--font-weight-bold);
}

.text-mobile-heading-3 {
  font-size: var(--font-size-mobile-heading-3);
  line-height: var(--lineheight-mobile-heading-3);
  font-weight: var(--font-weight-bold);
}

.text-mobile-heading-4 {
  font-size: var(--font-size-mobile-heading-4);
  line-height: var(--lineheight-mobile-heading-4);
  font-weight: var(--font-weight-bold);
}

.text-mobile-heading-5 {
  font-size: var(--font-size-mobile-heading-5);
  line-height: var(--lineheight-mobile-heading-5);
  font-weight: var(--font-weight-bold);
}

.text-mobile-body-l-r {
  font-size: var(--font-size-mobile-body-l);
  line-height: var(--lineheight-mobile-body-l);
  font-weight: var(--font-weight-regular);
}

.text-mobile-body-l-b {
  font-size: var(--font-size-mobile-body-l);
  line-height: var(--lineheight-mobile-body-l);
  font-weight: var(--font-weight-bold);
}

.text-mobile-body-m-r {
  font-size: var(--font-size-mobile-body-m);
  line-height: var(--lineheight-mobile-body-m);
  font-weight: var(--font-weight-regular);
}

.text-mobile-body-m-m {
  font-size: var(--font-size-mobile-body-m);
  line-height: var(--lineheight-mobile-body-m);
  font-weight: var(--font-weight-medium);
}

.text-mobile-body-m-sb {
  font-size: var(--font-size-mobile-body-m);
  line-height: var(--lineheight-mobile-body-m);
  font-weight: var(--font-weight-semibold);
}

.text-mobile-body-s-r {
  font-size: var(--font-size-mobile-body-s);
  line-height: var(--lineheight-mobile-body-s);
  font-weight: var(--font-weight-regular);
}

.text-mobile-body-s-m {
  font-size: var(--font-size-mobile-body-s);
  line-height: var(--lineheight-mobile-body-s);
  font-weight: var(--font-weight-medium);
}

.text-mobile-body-s-b {
  font-size: var(--font-size-mobile-body-s);
  line-height: var(--lineheight-mobile-body-s);
  font-weight: var(--font-weight-bold);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 16px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

body,
input,
textarea,
select {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

main {
  width: 100%;
  max-width: 1240px;
  padding: 200px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 180px;
}

section {
  width: 100%;
  word-break: keep-all;
}

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

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: none;
}

ul,
li {
  list-style-type: none;
}

button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 8px 16px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;

  font-size: var(--font-size-button);
  line-height: var(--lineheight-button);
  font-weight: var(--font-weight-bold);

  &.solid {
    color: var(--color-neutral-50);
    background-color: var(--color-neutral-800);
    &:hover {
      background-color: var(--color-neutral-700);
    }
  }
  &.outline {
    color: var(--color-primary-800);
    border-style: solid;
    border-color: var(--color-primary-800);
    border-width: 1px;
    &:hover {
      background-color: var(--color-primary-100);
    }
  }
  &.noline {
    color: var(--color-primary-800);
    padding: 0;
    &:hover {
      color: var(--color-primary-900);
    }
  }
}

.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  color: transparent !important;
  background-position: center;
  background-size: 40px;
  background-repeat: no-repeat;
}

.swiper-button-prev {
  background-image: url("../images/icon/icon-chevron-left.svg");
}

.swiper-button-next {
  background-image: url("../images/icon/icon-chevron-right.svg");
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
}

.ql-container {
  font-family: inherit;
  font-size: inherit;
}