.index_page { background: url(../img/index_background.png) no-repeat; min-height: 100vh; background-position-x: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0rem;}
.index_page .img_wrap { text-align: center; }
.index_page .img_wrap img { width: 60%; max-width: 30rem;}
.index_page .link { text-align: center; font-size: 1.7rem; display: block; width:80%; max-width: 35rem; margin: 0 auto; padding: 1.5rem 0; background: #0c53c7; color: #fff; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 15px;}

.spinner {
  margin: 100px auto 0;
  width: 100px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #034aa4;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -1.04s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.48s;
  animation-delay: -0.16s;
}

.spinner .bounce3 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.16s;
}
.spinner .bounce4 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* 모달 */
#wrap.on .modal {display: block}
.modal {display:none;position: fixed; min-height: 100vh;width: 100%; left: 0; right: 0; top: 0;z-index: 100;background: transparent;}
.modal .modal_bg {position: fixed;left: 0;top: 0;height: 100%;width: 100%;background: rgba(0,0,0,.3);}
.modal_con {background: #f1efef;max-width:400px;width: 85%;  top: 50%;left: 50%;position: absolute;transform: translate(-50%,-50%);display: flex;flex-direction: column;border-radius: .3rem;box-shadow: 0 0 .5rem rgba(0,0,0,.3);z-index: 101;}
.modal_con h3 {padding: 1.2rem;color: #0874f5;font-weight: bold; text-align: center;position:relative; margin-right: 0;display: block; font-size: 1.8rem;}
.modal_con h3 span {display: block;width: 1rem;position: absolute;top: 50%;right: 1rem;transform: translateY(-50%);}
.modal_con .modal_box {position: relative;background: #fff;margin: 0 1rem;padding: 2rem 0;margin-bottom: 1rem;}
.modal_con .modal_box img {width: 4rem;margin: 0 auto;display: block;margin-bottom: .5rem;}
#wrap .modal_con .modal_box p {font-size: 1.7rem;text-align: center;color: #333;margin-bottom: 5rem;padding: 1rem;}
.modal_con .modal_box > div {padding: 0 1rem;padding-top:0;position: absolute;bottom:1rem;width: 100%;display: flex;align-items: center;justify-content: center;gap: 1rem;}
.modal_con .modal_box button {font-size: 1.8rem;color: #fff;background: #0874f5;width: 100%;padding: 1rem;font-weight: bold;}
.modal_con .modal_box a {color: #0049a1;font-size: 1.8rem;display: block;margin-top: 1rem;}