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

 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: 800px;
  margin: 0 auto;
}
.body_wrap .img_box {
   position: relative;
}
.body_wrap .img_box img {
   width: 100%;
}
.timer_box {
   display: none;
   position: absolute;
   width: 85%;
   height: 36%;
   bottom: 9.5%;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   color: #fff;
   line-height: 1;
}
.timer_box .inner {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
}
.timer_box h1, .timer_box h2 {
   padding: 0;
   margin: 0;
}
.timer_box h1 {
   font-size: 22px;
   text-shadow: 2px 2px 0 black;
}
.timer_box h2 {
   font-size: 24px;
   color: #faff5b;
   text-shadow: 2px 2px 0 black;
}
.timer_box h2 img {
   width: 24px !important;
   display: inline-block;
   vertical-align: middle;
   margin-top: -3px;
}
/*
.timer_box .timer_wrap {
   margin-top: 10px;
   display: inline-block;
   font-size: 32px;
   font-weight: 600;
   color: #FFFF00;
   background: rgba(255,255,255,0.2);
   padding: 12px 30px;
   border-radius: 10px;
   text-shadow: 3px 3px 0 black;
}
*/

.form_wrap {
   display: none;
   position: absolute;
   width: 74%;
   height: 34%;
   top: 30%;
   left: 20%;
}
.form_wrap input {
   display: block;
   width: 100%;
   height: 60px;
   text-align: center;
   padding: 0 20px;
   font-size: 32px;
   background: #fff;
   color: #000;
   border: 0;
   border-radius: 5px;
}

.form_wrap .tel_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
  }
  .form_wrap .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 .tel_wrap span {
    flex: 0 0 auto;
    font-size: 30px;
    color: #fff;
  }


.btn_submit {
   position: absolute;
   width: 74%;
   height: 19%;
   bottom: 7%;
   left: 50%;
   transform: translateX(-50%);
   background: transparent;
   z-index: 1;
   cursor: pointer;
}
.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;
}

.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;      /* 세로 중앙 */
}

/* 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) {
  .footer {
      font-size: 14px;
  }
}