@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: 1000px;
  margin: 0 auto;
}

.main_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 100;
  max-width: calc(92vh * 100 / 100);
  margin: 0 auto;
  background: url('../img/main_bg.jpg') no-repeat top center / contain;
  cursor: pointer;
}
.main_cover {
  position: absolute;
    width: 33.8%;
    aspect-ratio: 100 / 100;
    top: 51%;
    left: 18.1%;
    background: url(../img/main_cover.jpg) no-repeat top center / 100% 100%;
    overflow: hidden;
}

.main_cover canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.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;
}

.form_wrap {
   display: none;
   position: relative;
  width: 100%;
  aspect-ratio: 100 / 100;
  max-width: calc(92vh * 100 / 100);
  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: 8px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    /* border: 1px solid #ccc; */
    border: 0;
    border-radius: 5px;
    background: #fff;
    color: #2c150b;
    position: absolute;
    top: 64.7%;
    left: 39.5%;
    width: 40.8%;
}

.form_wrap .cont .tel_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
      position: absolute;
        top: 72.3%;
        left: 39.7%;
    width: 40%;
  }
  .form_wrap .cont .tel_wrap input {
    flex: 1;
    min-width: 0;
    padding: 3px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    border: 2px solid #a2885e;
    border-radius: 20px;
    background: #fff;
    color: #2c150b;

  }

  .form_wrap .cont .tel_wrap span {
    flex: 0 0 auto;
    font-size: 34px;
    font-weight: 600;
    color: #2c150b;
  }

  .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;
  }

  .form_wrap button[type='submit'] {
    position: absolute;
   width: 61%;
    height: 11%;
    left: 50%;
    top: 80.5%;
    transform: translateX(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1;
  }


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

  /*
  .main_wrap {
   aspect-ratio: 100 / 160;
   max-width: calc(92vh * 100 / 160);
  }
  
  .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;
  }
   */
}