@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  scroll-behavior: smooth;
}

.service.event.detail .bbs-detail.innerfull .cont.full {
  overflow: unset !important;
}

.event-info-diy {
  margin: 0 auto;
  width: 1140px;
}

section {
  overflow-x: hidden;
  margin: 0 auto;
  font-family: "pretendard";
}

section .pro-container {
  position: absolute;
  width: 1140px;
  transform: translateX(-50%);
  left: 50%;
}

section .quick-slide {
  width: 1040px;
  overflow-x: hidden;
  margin: 0 auto;
}

section .quick-slide .swiper-wrapper {
  width: 900%;
  height: auto;
}

section .quick-slide .swiper-slide {
  flex-shrink: 1;
  width: 268px;
  height: 100%;
  overflow: hidden;
  text-align: left;
}

.product-list .thumb {
  background-color: transparent;
  border: none;
}

section.section01 {
  margin: 0 auto;
  position: relative;
}

section.section01 > div {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
}

section.section01 .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30.54%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1140px;
  gap: 17.2%;
}

section.section01 .btn-container button {
  width: 25.7%;
  height: 66px;
  position: relative;
}

section.section01 .pro-item {
  position: absolute !important;
  max-width: 580px !important;
  top: 38.5%;
}

section.section01 button.button-1,
section.section01 button.button-2,
section.section01 button.button-3 {
  width: 18%;
  height: 74px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

section.section01 button.button-1 {
  top: 59.9%;
}

section.section01 button.button-2 {
  top: 74.6%;
  width: 21%;
}

section.section01 button.button-3 {
  top: 89.7%;
}

section.section01 .pro-container {
  top: 95.3%;
}

/* 선물대전 애니메이션 */
.gift-handwriting__svg {
  position: absolute;
  top: 4.2%;
  left: 51.3%;
  transform: translateX(-50%);
  width: min(100%, 657px);
  aspect-ratio: 657 / 167;
}

.gift-handwriting__svg,
.gift-handwriting__svg > img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  max-width: 657px;
}

#kv-handwriting-fixed .kv-fixed-stroke {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#kv-handwriting-fixed .kv-fixed-finish {
  animation: kv-fixed-finish 5s linear infinite;
}
@keyframes kv-fixed-0 {
  0%,
  0.000000% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  0.001000% {
    opacity: 1;
  }
  4.439650%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-1 {
  0%,
  4.932945% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  4.933945% {
    opacity: 1;
  }
  7.070554%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-2 {
  0%,
  7.308066% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  7.309066% {
    opacity: 1;
  }
  9.116812%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-3 {
  0%,
  9.317784% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  9.318784% {
    opacity: 1;
  }
  12.935277%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-4 {
  0%,
  13.337221% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  13.338221% {
    opacity: 1;
  }
  18.599028%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-5 {
  0%,
  19.183673% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  19.184673% {
    opacity: 1;
  }
  20.992420%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-6 {
  0%,
  21.193392% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  21.194392% {
    opacity: 1;
  }
  24.646453%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-7 {
  0%,
  25.030126% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  25.031126% {
    opacity: 1;
  }
  27.167736%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-8 {
  0%,
  27.405248% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  27.406248% {
    opacity: 1;
  }
  30.200583%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-9 {
  0%,
  30.511176% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  30.512176% {
    opacity: 1;
  }
  31.826628%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-10 {
  0%,
  31.972789% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  31.973789% {
    opacity: 1;
  }
  34.932556%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-11 {
  0%,
  35.261419% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  35.262419% {
    opacity: 1;
  }
  37.399028%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-12 {
  0%,
  37.636540% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  37.637540% {
    opacity: 1;
  }
  42.076190%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-13 {
  0%,
  42.569485% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  42.570485% {
    opacity: 1;
  }
  44.542663%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-14 {
  0%,
  44.761905% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  44.762905% {
    opacity: 1;
  }
  49.365986%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-15 {
  0%,
  49.877551% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  49.878551% {
    opacity: 1;
  }
  53.823907%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-16 {
  0%,
  54.262391% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  54.263391% {
    opacity: 1;
  }
  55.577843%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-17 {
  0%,
  55.724004% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  55.725004% {
    opacity: 1;
  }
  59.670360%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-18 {
  0%,
  60.108844% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  60.109844% {
    opacity: 1;
  }
  62.575316%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-19 {
  0%,
  62.849368% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  62.850368% {
    opacity: 1;
  }
  66.466861%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-20 {
  0%,
  66.868805% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  66.869805% {
    opacity: 1;
  }
  68.841983%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-21 {
  0%,
  69.061224% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  69.062224% {
    opacity: 1;
  }
  70.705539%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-22 {
  0%,
  70.888241% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  70.889241% {
    opacity: 1;
  }
  74.670165%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-23 {
  0%,
  75.090379% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  75.091379% {
    opacity: 1;
  }
  80.023324%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes kv-fixed-finish {
  0%,
  80.571429% {
    opacity: 0;
  }
  85.714286%,
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #kv-handwriting-fixed .kv-fixed-stroke {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
  #kv-handwriting-fixed .kv-fixed-finish {
    animation: none !important;
    opacity: 1 !important;
  }
}