@charset "UTF-8";
body {
  font-family: "riant-display", "Pretendard", "LouvettePixel", sans-serif;
  padding: 0px;
  margin: 0px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

/* 💡 폰트가 로딩 중일 때 (Adobe Fonts 스크립트가 자동으로 붙여주는 클래스) */
.wf-loading .main-title {
  visibility: hidden;
  opacity: 0;
}

/* 💡 폰트 로딩이 완료되었을 때 */
.wf-active .main-title {
  visibility: visible;
  opacity: 1;
  /* 부드럽게 나타나길 원한다면 추가 */
  transition: opacity 0.5s ease-in;
}

/* 💡 혹시라도 폰트 로딩이 실패했을 때 (기본 폰트로라도 보여줌) */
.wf-inactive .main-title {
  visibility: visible;
  opacity: 1;
}

.web-page {
  /* 기본 설정 */
}
.web-page body, .web-page .main-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.web-page .main-container {
  position: relative;
  width: 100%;
  height: 100vh;
  /* 상단 큰 타이틀 */
}
.web-page .main-container .main-title {
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  right: 30px;
  top: -20px;
  font-family: "riant-display", sans-serif;
  font-weight: 400;
  font-size: 15vw;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  z-index: 100;
}
.web-page .main-container .gradient-bg {
  position: absolute;
  width: 100%;
  height: 362px;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, #FFFFFF 12.23%, rgba(255, 255, 255, 0.456349) 71.81%, rgba(255, 255, 255, 0) 100%);
  z-index: 5;
  pointer-events: none;
}
.web-page .main-container {
  /* 배경 가방 이미지 */
}
.web-page .main-container .background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./img/background3.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -10;
}
.web-page .main-container .video-box {
  position: absolute;
  width: 220px;
  height: 130px;
  left: 40px;
  top: 218px;
  z-index: 5;
  overflow: hidden;
}
.web-page .main-container .video-box video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border: none;
  outline: none;
}
.web-page .main-container .intro-text {
  position: absolute;
  width: 180px;
  height: 210px;
  left: 40px;
  top: 375px;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 100%;
  letter-spacing: -0.05em;
  color: #000000;
  z-index: 5;
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0.85);
}
.web-page .main-container .sticker-text {
  position: absolute;
  width: 180px;
  height: 210px;
  left: 40px;
  top: 508px;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 100%;
  letter-spacing: -0.05em;
  color: #000000;
  z-index: 5;
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0.85);
  text-decoration: underline;
  text-underline-offset: 0px;
  text-decoration-thickness: 1px;
}
.web-page .main-container {
  /* Contact Me */
}
.web-page .main-container .contact-me {
  position: absolute;
  left: 40px;
  top: 635px;
  font-family: "LouvettePixel", sans-serif; /* 폰트는 디자인에 맞춰 수정 가능 */
  font-size: 50px;
  font-style: italic;
  text-decoration: none;
  color: #000000;
  z-index: 5;
  cursor: pointer;
  letter-spacing: -0.03em;
  transition: all 0.2s ease;
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0.8);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
}
.web-page .main-container .contact-me:hover {
  transform: scaleX(0.9);
}
.web-page .main-container .contact-email {
  position: absolute;
  width: 180px;
  height: 210px;
  left: 40px;
  top: 675px;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 100%;
  letter-spacing: -0.05em;
  color: #000000;
  z-index: 5;
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0.85);
}
@keyframes sticker-loop {
  0% {
    opacity: 0;
    transform: rotate(var(--rotation)) scale(1.2);
  }
  5% {
    opacity: 1;
    transform: rotate(var(--rotation)) scale(1);
  }
  /* 💡 스티커가 온전히 붙어있는 구간 (전체 12초 중 약 9.6초) */
  80% {
    opacity: 1;
    transform: rotate(var(--rotation)) scale(1);
  }
  /* 💡 80% -> 85% 구간에서 빠르게 사라짐 (약 0.6초 동안 사라짐) */
  85% {
    opacity: 0;
    transform: rotate(var(--rotation)) scale(1);
  }
  /* 💡 85% -> 100% 구간은 아무것도 없는 상태 유지 (약 1.8초 동안 빈 화면) */
  100% {
    opacity: 0;
    transform: rotate(var(--rotation)) scale(1);
  }
}
.web-page .main-container .sticker.branding {
  position: absolute;
  width: 165px;
  left: 50%;
  top: 45%;
  z-index: 10;
  --rotation: 0.4deg;
  opacity: 0;
  /* 💡 전체 주기를 12초로 늘려 더 여유로운 느낌을 줍니다. */
  animation: sticker-loop 10s ease-in-out infinite;
  animation-delay: 0.4s;
  transition: transform 0.3s ease-out, opacity 0.2s ease;
}
.web-page .main-container .sticker.branding img {
  width: 100%;
  height: auto;
  display: block;
}
.web-page .main-container .sticker.branding:hover {
  animation-play-state: paused;
  opacity: 1 !important;
  transform: rotate(0.4deg) scale(1.1) !important;
  z-index: 50;
}
.web-page .main-container .sticker.editorial {
  position: absolute;
  width: 250px;
  left: 45%;
  top: 67.5%;
  z-index: 10;
  --rotation: 9.09deg;
  opacity: 0;
  /* 💡 전체 주기를 12초로 늘려 더 여유로운 느낌을 줍니다. */
  animation: sticker-loop 10s ease-in-out infinite;
  animation-delay: 0.8s;
  transition: transform 0.3s ease-out, opacity 0.2s ease;
}
.web-page .main-container .sticker.editorial img {
  width: 100%;
  height: auto;
  display: block;
}
.web-page .main-container .sticker.editorial:hover {
  animation-play-state: paused;
  opacity: 1 !important;
  transform: rotate(9.09deg) scale(1.1) !important;
  z-index: 50;
}
.web-page .main-container .sticker.contents {
  position: absolute;
  width: 220px;
  left: 63%;
  top: 62%;
  z-index: 10;
  --rotation: -9.03deg;
  opacity: 0;
  /* 💡 전체 주기를 12초로 늘려 더 여유로운 느낌을 줍니다. */
  animation: sticker-loop 10s ease-in-out infinite;
  animation-delay: 1.2s;
  transition: transform 0.3s ease-out, opacity 0.2s ease;
}
.web-page .main-container .sticker.contents img {
  width: 100%;
  height: auto;
  display: block;
}
.web-page .main-container .sticker.contents:hover {
  animation-play-state: paused;
  opacity: 1 !important;
  transform: rotate(-9.03deg) scale(1.1) !important;
  z-index: 50;
}
.web-page .main-container .sticker.web {
  position: absolute;
  width: 234px;
  left: 63%;
  top: 52%;
  z-index: 10;
  --rotation: 6.98deg;
  opacity: 0;
  /* 💡 전체 주기를 12초로 늘려 더 여유로운 느낌을 줍니다. */
  animation: sticker-loop 10s ease-in-out infinite;
  animation-delay: 1.6s;
  transition: transform 0.3s ease-out, opacity 0.2s ease;
}
.web-page .main-container .sticker.web img {
  width: 100%;
  height: auto;
  display: block;
}
.web-page .main-container .sticker.web:hover {
  animation-play-state: paused;
  opacity: 1 !important;
  transform: rotate(6.98deg) scale(1.1) !important;
  z-index: 50;
}/*# sourceMappingURL=web.css.map */