@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: #fff;
 }

 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 / 140;
  max-width: calc(92vh * 100 / 140);
  margin: 0 auto;
  background: url('../img/main_bg.jpg?ver=1.0') no-repeat top center / contain;
  cursor: pointer;
}
.footer {
   margin: 0 auto;
   background: #dedede;
   color: #787878;
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px 20px;
   word-break: keep-all;
   line-height: 1.4;
   text-align: center;
}
.play_pin {
   position: absolute;
   bottom: 16%;
   left: 50%;
   transform: translateX(-50%);
   width: 73%;
   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: 73%;
   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 / 131;
  max-width: calc(92vh * 100 / 131);
  margin: 0 auto;
  background: url('../img/form_bg.jpg?ver=1.0') no-repeat top center / contain;
}
.form_wrap .cont {
   /*
   position: absolute;
   top: 65%;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   */
}
.form_wrap .cont .name {
   display: block;
   text-align: center;
   padding: 13px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 5px;
   background: #fff;
   color: #000;
   position: absolute;
    top: 59%;
    left: 34%;
    width: 52%;
}

.form_wrap .cont .tel_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
      position: absolute;
    top: 69%;
    left: 34%;
    width: 52%;
  }
  .form_wrap .cont .tel_wrap input {
    flex: 1;
    min-width: 0;
    padding: 12px;
    font-size: 28px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #000;
  }

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

  .form_wrap .cont .agree_wrap {
   text-align: center;
   width: 100%;
   position: absolute;
   top: 77%;
   left: 0;
   display: none;
  }
  .form_wrap .cont .agree_wrap label {
      font-size: 18px;
      color: #999;
      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%;
   }

   .loader_overlay {
   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0,0,0,0.6);

    justify-content: center;  /* 가로 중앙 */
    align-items: center;      /* 세로 중앙 */
    z-index: 9999;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

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

  .form_wrap {
     /* 
     aspect-ratio: 100 / 135;
    max-width: calc(92vh * 100 / 135);
    */
  }
  .form_wrap .cont {
   /*
   top: 56%;
   width: 90%;
   */
  }
  /*
  .form_wrap .cont .name {
      font-size: 18px;
    padding: 10px;
  }
  .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;
  }
   */
}