@import "./reset.css";
@import "./../font/pretendardvariable.css";
@import "./../font/ds-digi.css";
@import "./../font/NanumSquareNeo.css";

:root {
  --pc-width-px: 1500px;
  --mo-width-px: 750px;
  --pc-width-num: 1500;
  --mo-width-num: 750;
}

/* 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: #0d173d;
}
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;
}
button {
  background: none;
  border: none;
  outline: none;
  font-size: 0px;
}

/* 공통 스타일 */
.hidden {
  display: none !important;
}
.show {
  display: flex !important;
}
.warp {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform-origin: top center;
}
.btn {
  position: absolute;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 0px;
  background-color: none;
}
/* ========== 탑 배너 ========== */
.top_banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ========== 컨텐츠 ========== */
.contents {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  top: -1px;
}
/* ========== 푸터 ========== */
.footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* ========== 플로팅 버튼 ========== */
.floating {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  bottom: 0;
  z-index: 50;
}
.share_btns {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(./../img/pc/share_btns.jpg) no-repeat center;
  background-size: contain;
  background-repeat: no-repeat;
}
.share_btns > button {
  width: 50%;
  height: 100%;
}
/* ========== 팝업 ========== */
.popup_warp {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}
.popup {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.popup > .popup_close_btn {
  position: absolute;
  top: 0;
  right: 0;
}
.popup > .popup_action_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/************************* PC ************************/
@media screen and (min-width: 768px) {
  :root {
    zoom: 0.7;
  }
  .main {
    width: var(--pc-width-px);
  }
  /* ========== top banner ========== */
  .top_banner > .top_banner_bg {
    width: 100%;
    height: 1175px;
    background: url(./../img/pc/top_banner.jpg) no-repeat center;
    background-size: cover;
  }
  /* ---------- 컨텐츠 ---------- */
  .contents > .contents_bg {
    width: 100%;
    aspect-ratio: 1500 / 3643;
    background: url(./../img/pc/contents.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .contents > .contents_bg.end {
    width: 100%;
    aspect-ratio: 1500 / 3643;
    background: url(./../img/pc/contents_end.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* ---------- footer ---------- */
  .footer > .footer_bg {
    width: 100%;
    aspect-ratio: 1500 / 811;
    background: url(./../img/pc/footer.jpg) no-repeat center;
    background-size: cover;
    margin-bottom: 92px;
  }
  /* ---------- floating ---------- */
  .floating {
    width: var(--pc-width-px);
    height: 110px;
  }
  .floating > .floating_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 540px;
    height: 80px;
    background: url(./../img/pc/floating_btn.jpg) no-repeat center;
    background-size: contain;
  }
  .floating > .floating_btn > .share_btns {
    width: 241px;
    height: 127px;
    right: 0;
    top: 0;
    transform: translate(0, -120%);
  }
  /* 100원 구매하러 가기 */
  .floating > .floating_btn > .floating_100won {
    width: 80%;
    height: 100%;
  }
  /* 공유하기 */
  .floating > .floating_btn > .floating_share {
    width: 20%;
    height: 100%;
  }
  /* ---------- buttons ---------- */
  /* 구독하러가기 버튼 */
  .buy_standard_btn {
    top: 1750px;
    width: 515px;
    height: 100px;
  }
  /* 응모하기 버튼 */
  .gift_btn {
    top: 3114px;
    width: 522px;
    height: 100px;
  }
  /* ---------- popup ---------- */
  .goto_login {
    width: 600px;
    height: 348px;
    background: url(./../img/popup/goto_login.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_login > .popup_action_btn {
    bottom: 51px;
    width: 300px;
    height: 82px;
  }
  .goto_myticket {
    width: 600px;
    height: 433px;
    background: url(./../img/popup/goto_myticket.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_myticket > .popup_action_btn {
    bottom: 51px;
    width: 300px;
    height: 82px;
  }
  .goto_myinfo {
    width: 600px;
    aspect-ratio: 1200 / 1300;
    background: url(./../img/popup/goto_myinfo.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_myinfo > .popup_action_btn {
    bottom: 52px;
    width: 299px;
    height: 82px;
  }
  .goto_ticket_purchase {
    width: 600px;
    height: 433px;
    background: url(./../img/popup/goto_ticket_purchase.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_ticket_purchase > .popup_action_btn {
    bottom: 51px;
    width: 300px;
    height: 82px;
  }
  .qr_show {
    width: 600px;
    height: 766px;
    background: url(./../img/popup/qr_show.jpg) no-repeat center;
    background-size: cover;
  }
  .popup > .popup_close_btn {
    width: 100px;
    height: 100px;
  }
}

/************************* MO ************************/
@media screen and (max-width: 767px) {
  :root {
    zoom: 1;
  }
  .main {
    width: 100%;
  }

  /* ========== top banner ========== */
  .top_banner > .top_banner_bg {
    width: 100%;
    aspect-ratio: var(--mo-width-num) / 1177;
    background: url(./../img/mo/top_banner.webp) no-repeat center;
    background-size: cover;
  }
  /* ---------- 컨텐츠 ---------- */

  .contents > .contents_bg {
    width: 100%;
    aspect-ratio: var(--mo-width-num) / 3643;
    background: url(./../img/mo/contents.jpg) no-repeat center;
    background-size: cover;
  }
  .contents > .contents_bg.end {
    width: 100%;
    aspect-ratio: var(--mo-width-num) / 3643;
    background: url(./../img/mo/contents_end.jpg) no-repeat center;
    background-size: cover;
  }
  /* ---------- footer ---------- */

  .footer > .footer_bg {
    width: 100%;
    aspect-ratio: var(--mo-width-num) / 811;
    background: url(./../img/mo/footer.jpg) no-repeat center;
    background-size: cover;
    margin-bottom: calc((150 / var(--mo-width-num)) * 100%);
  }
  /* ---------- floating ---------- */
  .floating {
    width: 100%;
    aspect-ratio: var(--mo-width-num) / 150;
  }
  .floating > .floating_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((610 / var(--mo-width-num)) * 100%);
    aspect-ratio: 610 / 100;
    background: url(./../img/mo/floating_btn.jpg) no-repeat center;
    background-size: contain;
  }
  .floating > .floating_btn > .share_btns {
    width: calc((241 / 610) * 100%);
    aspect-ratio: 241 / 127;
    right: 0;
    top: 0;
    transform: translate(0, -130%);
  }
  /* 100원 구매하러 가기 */
  .floating > .floating_btn > .floating_100won {
    width: 80%;
    height: 100%;
  }
  /* 공유하기 */
  .floating > .floating_btn > .floating_share {
    width: 20%;
    height: 100%;
  }
  /* ---------- buttons ---------- */
  /* 구매하러가기 버튼 */
  .buy_standard_btn {
    top: calc((360 / var(--mo-width-num)) * 100%);
    width: calc((514 / var(--mo-width-num)) * 100%);
    height: calc((22 / var(--mo-width-num)) * 100%);
  }
  /* 응모하기 버튼 */
  .gift_btn {
    top: calc((640 / var(--mo-width-num)) * 100%);
    width: calc((514 / var(--mo-width-num)) * 100%);
    height: calc((22 / var(--mo-width-num)) * 100%);
  }

  /* ---------- popup ---------- */
  .goto_login {
    width: calc((600 / var(--mo-width-num)) * 100%);
    aspect-ratio: 600 / 348;
    background: url(./../img/popup/goto_login.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_login > .popup_action_btn {
    bottom: 14%;
    width: 50%;
    height: 25%;
  }
  .goto_myticket {
    width: calc((600 / var(--mo-width-num)) * 100%);
    aspect-ratio: 600 / 433;
    background: url(./../img/popup/goto_myticket.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_myticket > .popup_action_btn {
    bottom: 12%;
    width: 50%;
    height: 19%;
  }
  .goto_myinfo {
    width: calc((600 / var(--mo-width-num)) * 100%);
    aspect-ratio: 1200 / 1300;
    background: url(./../img/popup/goto_myinfo.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_myinfo > .popup_action_btn {
    bottom: 7%;
    width: 51%;
    height: 14%;
  }
  .goto_ticket_purchase {
    width: calc((600 / var(--mo-width-num)) * 100%);
    aspect-ratio: 600 / 433;
    background: url(./../img/popup/goto_ticket_purchase.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_ticket_purchase > .popup_action_btn {
    bottom: 11%;
    width: 50%;
    height: 20%;
  }
  .goto_alarm {
    width: calc((600 / var(--mo-width-num)) * 100%);
    aspect-ratio: 600 / 560;
    background: url(./../img/popup/goto_alarm.jpg) no-repeat center;
    background-size: cover;
  }
  .goto_alarm > .popup_action_btn {
    bottom: 9%;
    width: 50%;
    height: 15%;
  }
  .popup > .popup_close_btn {
    width: calc((100 / var(--mo-width-num)) * 100%);
    aspect-ratio: 100 / 100;
  }
}