@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;
}
.body_wrap .img_box {
   position: relative;
}
.body_wrap .img_box img {
   width: 100%;
}
.body_wrap .form_box {
   position: relative;
}
.body_wrap .form_box img {
   width: 100%;
}

.img_box{
   position:relative;
   width:100%;
}

.img_box img{
   width:100%;
   display:block;
}

.form_wrap {
   display: block;
   position: absolute;
   width: 84%;
   top: clamp(20px, 3vw, 36px);
   left: 8%;
   padding: clamp(14px, 2.5vw, 30px);
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid #e5d7c6;
   border-radius: 16px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
   z-index: 1;
   /* Keep responsive dimensions independent of the legacy resizeZoom script. */
   zoom: 1 !important;
}
.form_wrap input {
   display: block;
   width: 100%;
   height: clamp(44px, 6.34vw, 76px);
   min-width: 0;
   padding: 0 clamp(12px, 2.5vw, 30px);
   text-align: left;
   font-size: clamp(16px, 3vw, 36px);
   font-weight: 500;
   line-height: 1;
   background: #fff;
   color: #3c3128;
   border: 1px solid #b9a58d;
   border-radius: 8px;
}
.form_wrap input::placeholder {
   color: #756b60;
   opacity: 1;
}
.form_wrap input:focus {
   outline: 2px solid #c28a2c;
   outline-offset: -2px;
}
.form_wrap .tel_wrap {
    display: grid;
    width: 100%;
    height: clamp(44px, 6.34vw, 76px);
    margin-top: clamp(10px, 1.5vw, 18px);
    gap: clamp(6px, 1vw, 12px);
    grid-template-columns: 0.85fr 1fr 1fr;
  }
.form_wrap .tel_wrap input {
    height: 100%;
    padding: 0 6px;
    text-align: center;
  }


.btn_submit {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 84%;
   height: clamp(48px, 7vw, 84px);
   top: calc(clamp(20px, 3vw, 36px) + clamp(14px, 2.5vw, 30px) * 2 + clamp(44px, 6.34vw, 76px) * 2 + clamp(10px, 1.5vw, 18px) + 2px + clamp(12px, 2vw, 24px));
   left: 8%;
   background: #ffdc65;
   color: #30220d;
   border: 2px solid #e8b843;
   border-radius: 12px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   font-size: clamp(18px, 3vw, 36px);
   font-weight: 800;
   z-index: 1;
   cursor: pointer;
}
.btn_submit::before {
   content: "무료번호 신청하기";
}
.btn_submit:hover {
   background: #ffe58a;
}
.btn_submit:active {
   background: #f1c54a;
}
.footer {
   padding: 20px 20px;
   margin: 0 auto;
   background: #111;
   color: #d1d1d1;
   font-size: 15px;
   word-break: keep-all;
   line-height: 1.4;
   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;      /* 세로 중앙 */
    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) {
  .footer {
      font-size: 13px;
  }
}