@import "./reset.css";
@import "./page1.css";
@import "./page2.css";
@import "./line.css";
@import "./../font/pretendardvariable.css";
@import "./../font/ds-digi.css";

/* Chrome, Safari, Edge, Opera에서 화살표 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox에서 화살표 제거 */
input[type="number"] {
  -moz-appearance: textfield;
}

html,
body {
  width: 100%;
  height: 100%;
  background: black;
}
body {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  font-family: "Pretendard";
}
button,
input {
  font-family: "Pretendard";
}
img {
  width: 100%;
  image-rendering: -moz-crisp-edges; /* firefox */
  image-rendering: -o-crisp-edges; /* opera */
  image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
  image-rendering: crisp-edges;
}
.warp {
  width: 1920px;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform-origin: top center;
}
/* ========== 키비쥬얼 ========== */
.keyvisual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .keyvisual .img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
} */
.keyvisual .ani {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ========== 상단 TAB MENU ========== */
.menu-fix {
  z-index: 3;
  position: fixed;
  display: flex;
  justify-content: center;
  background: black;
  transform-origin: top center;
}
.menu {
  width: 100%;
  display: flex;
  justify-content: center;
}
.menu_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 590px;
  height: 80px;
  background: black;
  font-size: 24px;
  font-weight: 700;
  color: #4174ff;
}
.menu_btn.active {
  background: #003ada;
  color: white;
}
.menu_btn.active:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: white;
}
/* ========== page ========== */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page .page_bg {
  margin-top: -1px;
}

/* ---------- 공유하기 ---------- */
.share-warp {
  position: absolute;
  opacity: 0;
  display: flex;
}
.share-warp button {
  width: 50%;
  height: 100%;
}

/* ---------- 이벤트 버튼 ---------- */
.event-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 377px;
  height: 69px;
  background: black;
  color: white;
  font-size: 24px;
  font-weight: 700;
  border-radius: 200px;
  font-family: "Pretendard";
}
.event-btn.active {
  background: #ff153c;
}
.event-btn.active::after {
  content: "";
  position: absolute;
  right: -24px;
  width: 64px;
  height: 27px;
  background: url(./../img/event_btn_label.svg) no-repeat center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3));
  animation: moveUpDown 0.9s ease-in-out infinite;
}

/* ---------- 하단 공지 ---------- */
.policy {
  position: absolute;
  white-space: nowrap;
}

.policy .text {
  color: white;
  font-weight: 300;
}
.policy .text.bold,
.policy .text .bold {
  font-weight: 600;
}
/* ---------- 팝업 영역 ---------- */
.popup_warp {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.popup_warp .popup {
  position: relative;
  display: flex;
  justify-content: center;
  width: 500px;
  height: 413px;
}
.popup_warp .popup .btn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 0;
  opacity: 0;
}
.popup_warp .popup .btn-submit {
  position: absolute;
  width: 420px;
  height: 70px;
  bottom: 40px;
  opacity: 0;
}
/* 로그인 팝업 */
.popup_warp .popup.popup-login {
  height: 330px;
}
.popup_warp .popup.popup-login .btn-submit {
  width: 360px;
}
.popup_warp .popup.popup-login .login-alert {
  position: absolute;
  top: 60px;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
}

/* PC */
@media screen and (min-width: 751px) {
  .keyvisual,
  .main,
  .menu-fix {
    width: 1920px;
  }
  .warp {
    transform: scale(80%);
  }
  .popup {
    transform: scale(80%);
  }
  .menu-fix {
    transform: scaleY(80%);
  }
  .menu-fix .menu {
    transform: scaleX(80%);
  }
  .mo {
    display: none !important;
  }
  /* ========== 키비쥬얼 ========== */
  .keyvisual {
    min-height: 930px;
  }
  /* ---------- 공유하기 ---------- */
  .share-warp {
    width: 254px;
    height: 132px;
  }

  /* ---------- 하단 공지 ---------- */
  .policy {
    width: 940px;
  }
  .policy .text {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.1px;
  }
  .policy .indent1 {
    text-indent: 16px;
  }
  .policy .indent2 {
    text-indent: 28px;
  }
}

/* MO */
@media screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }
  .keyvisual,
  .main,
  .menu-fix {
    width: 750px;
  }
  /* ========== 키비쥬얼 ========== */
  .keyvisual {
    min-height: 700px;
  }

  /* ---------- 팝업 영역 ---------- */
  .popup_warp .popup {
    width: 600px;
    height: 413px;
  }
  .popup_warp .popup .btn-submit {
    width: 502px;
  }
  /* 로그인 팝업 */
  .popup_warp .popup.popup-login .btn-submit {
    width: 502px;
  }
  /* ---------- 공유하기 ---------- */
  .share-warp {
    width: 218px;
    height: 123px;
  }

  /* ---------- 하단 공지 ---------- */
  .policy {
    width: 592px;
  }
  .policy .text {
    font-size: 16px;
    line-height: 26.1px;
    letter-spacing: 0.15px;
  }
  .policy .indent1 {
    text-indent: 13px;
  }
  .policy .indent2 {
    text-indent: 24px;
  }
}

@keyframes moveUpDown {
  0% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid black;
  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }
  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}
@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}