@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

* {
    font-family: 'Pretendard', sans-serif;
   box-sizing: border-box;
 }

 html, body {
    padding: 0;
    margin: 0;
    background: #000;
 }

 img {
    max-width: 100%;
    vertical-align: top;
 }

 .clearfix::before,
.clearfix::after {
   content: " ";
   display: table;
}

.clearfix::after {
   clear: both;
}

/* 크롬, 엣지, 사파리 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 파이어폭스 */
input[type=number] {
  -moz-appearance: textfield;
}

.body_wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.main_wrap {
   position: relative;
  width: 100%;
  aspect-ratio: 100 / 145;
  max-width: calc(92vh * 100 / 145);
  margin: 0 auto;
  background: url('../img/main_bg.jpg') no-repeat top center / contain;
}
.footer {
   height: 8vh;
   margin: 0 auto;
   background: #111;
   color: #fff;
   font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 20px;
   word-break: keep-all;
   line-height: 1.3;
   text-align: center;
}
.play_pin {
   position: absolute;
   bottom: 16%;
   left: 50%;
   transform: translateX(-50%);
   width: 66%;
   aspect-ratio: 100 / 103;
   background: url('../img/play_pin.png') no-repeat center / cover;
   z-index: 2;
}
.play_bg {
   position: absolute;
   bottom: 16%;
   left: 50%;
   transform: translateX(-50%);
   width: 66%;
   aspect-ratio: 100 / 103;
   background: url('../img/play_bg.png') no-repeat center / cover;
   z-index: 1;
   transform-origin: 50% 50%;
  will-change: transform;
}
.btn_play {
   position: absolute;
   width: 92%;
   left: 50%;
   bottom: 5%;
   transform: translateX(-50%);
   background: transparent;
   cursor: pointer;
   z-index: 3;
}

.form_wrap {
   display: none;
   position: relative;
  width: 100%;
  aspect-ratio: 100 / 115;
  max-width: calc(92vh * 100 / 115);
  margin: 0 auto;
  background: url('../img/form_bg.jpg?ver=1.0') no-repeat top center / contain;
}
.form_wrap .cont {
   position: absolute;
   top: 68%;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
}

.form_wrap .cont .tel_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  .form_wrap .cont .tel_wrap input {
    flex: 1;
    min-width: 0;
    padding: 10px;
    font-size: 28px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #fff;
    color: #000;
  }

  .form_wrap .cont .tel_wrap span {
    flex: 0 0 auto;
    font-size: 30px;
    color: #fff;
  }

  .form_wrap .cont .agree_wrap {
   margin-top: 20px;
   text-align: center;
  }
  .form_wrap .cont .agree_wrap label {
      font-size: 18px;
      color: #fff;
      vertical-align: middle;
  }
  .form_wrap .cont .agree_wrap input {
      margin: 0;
      padding: 0;
      vertical-align: middle;
  }

  .btn_form {
      position: absolute;
      width: 92%;
      left: 50%;
      bottom: 4%;
      transform: translateX(-50%);
      background: transparent;
      cursor: pointer;
      z-index: 1;
   }

   .btn_form input {
      width: 100%;
   }
@media screen and (max-width: 720px) {
  .main_wrap {
   aspect-ratio: 100 / 170;
   max-width: calc(92vh * 100 / 170);
  }
  .footer {
   font-size: 14px;
  }
  .play_bg {
   width: 90%;
   bottom: 13%;
  }
  .play_pin {
   width: 90%;
   bottom: 13%;
  }
  .btn_play {
   bottom: 4%;
  }

  .form_wrap {
      aspect-ratio: 100 / 125;
    max-width: calc(92vh * 100 / 125);
  }
  .form_wrap .cont {
   top: 64%;
   width: 90%;
  }
  .form_wrap .cont .tel_wrap input {
   font-size: 18px;
    padding: 10px;
  }

  .form_wrap .cont .agree_wrap {
   margin-top: 10px;
  }

  .form_wrap .cont .agree_wrap label {
   font-size: 14px;
  }
}

@media screen and (max-height: 720px) {
   .form_wrap .cont .tel_wrap input {
      font-size: 18px;
      padding: 10px;
   }

   .form_wrap .cont .agree_wrap {
      margin-top: 10px;
   }

   .form_wrap .cont .agree_wrap label {
      font-size: 14px;
   }
}