@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  border: 0 none;
  background-color: transparent;
}

#header {
  border-bottom: 1px solid #9a9a9a
}

/*개발적용후 삭제*/
#section {
  position: relative;
}

body {
  min-width: auto;
  overflow: auto;
  background: #F1F3F8;
}

body.nosrcoll {
  overflow: hidden;
}

.inner {
  height: 100%;
}

.loading_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 999;
}

.loading_container .loading_wrap span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #0d818a;
  border-radius: 50%;
  animation: loading 1s 0s linear infinite;
}

.loading_container .loading_wrap span:nth-child(1) {
  animation-delay: 0s;
}

.loading_container .loading_wrap span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading_container .loading_wrap span:nth-child(3) {
  animation-delay: 0.4s;
}

.waiting_area {
  margin: 0 auto;
  padding: 50px 30px;
  min-width: 320px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 10px;
  font-family: 'notokr-regular', 'Apple SD Gothic Neo';
  box-sizing: border-box;
}

.waiting_area .logo_head {
  margin-bottom: 40px;
}

.waiting_area .logo_head img {
  max-width: 131px;
}

/* .waiting_area .logo_head {width:131px;height:33px;margin-bottom:40px;background:url(https://img.etoos.com/enp/front/main/2023/web/icon_logo.svg) no-repeat 50% 50%;background-size:contain;} */

.waiting_area .title {
  font-size: 2.4em;
  color: #222;
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.04em;
}

.waiting_area .title strong {
  font-weight: 'notokr-bold', 'Apple SD Gothic Neo';
}

.waiting_area .sub_title {
  margin-top: 15px;
  font-size: 1.4em;
  color: #888;
}

.waiting_area .waiting_end_message {
  text-align: center;
  color: red;
  font-size: 19px;
  display: none;
}

.waiting_area .waiting_sequence_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: clamp(280px, 100%, 400px);
  aspect-ratio: 1.823;
  min-height: 170px;
  text-align: center;
  padding: 0 30px;
  margin: 42px 0 32px 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.20);
}

.waiting_area .waiting_sequence_wrap .after_connected {
  display: none;
  width: 100%;
}

.waiting_area .waiting_sequence_wrap .waiting_name {
  margin-bottom: 5px;
}

.waiting_area .waiting_sequence_wrap .after_connected .waiting_end_time {
  margin-top: 3px;
  text-align: center;
  display: none;
  color: #848484;
}

.waiting_area .waiting_sequence_wrap .after_connected .waiting_description {
  margin-top: 8px;
  font-size: 1.3em;
  line-height: 130%;
  color: #999;
  display: none;
}

.waiting_area .waiting_sequence_wrap .progress_title {
  margin-right: 10px;
  display: inline-block;
  font-size: 1.6em;
  color: #666;
  vertical-align: 0px;
}

.waiting_area .waiting_sequence_wrap .progress_title .under-line {
  text-decoration: underline;
}

.waiting_area .waiting_sequence_wrap .after_connected div:nth-of-type(1) {
  display: inline-block;
  font: 900 3.4em/100% 'Inter', 'notokr-black', 'Apple SD Gothic Neo';
  color: #000;
  vertical-align: -4px;
}

.waiting_area .waiting_sequence_wrap .after_connected div:has(progress.progress_bar) {
  margin: 15px 0 30px;
  width: 100%;
}

.waiting_area .waiting_sequence_wrap .progress_bar::-moz-progress-bar {
  border-radius: 7.5px;
  background: #0AA1AD;
  transition: width 1.5s ease-in-out;
}

.waiting_area .mobile_alert_message {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.4em;
  font-weight: 600;
  color: #0C818B;
  line-height: 140%;
  display: none;
}

.waiting_area .bottom_txt_box .desc {
  font-size: 12px;
  color: #999;
}

/* 프로그래스 바 진행모션 */
.waiting_area .waiting_sequence_wrap .progress_bar {
  position: relative;
  overflow: hidden;
  appearance: none;
  width: 100%;
  height: 14px;
  border: none;
  border-radius: 7.5px;
  background: #ebebeb;
  background: linear-gradient(-45deg, #dbdcdc, #dbdcdc 25%, #ebebeb 25%, #ebebeb 50%, #dbdcdc 50%, #dbdcdc 75%, #ebebeb 75%, #ebebeb);
  background-size: 30px 30px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  -webkit-animation: test 1s linear infinite;
  -moz-animation: test 1s linear infinite;
  animation: test 1s linear infinite;
}

/* 크롬 */
.waiting_area .waiting_sequence_wrap .progress_bar::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #dbdcdc, #dbdcdc 25%, #ebebeb 25%, #ebebeb 50%, #dbdcdc 50%, #dbdcdc 75%, #ebebeb 75%, #ebebeb);
  background-size: 30px 30px;
  -webkit-animation: test 1s linear infinite;
  -moz-animation: test 1s linear infinite;
  animation: test 1s linear infinite;
  z-index: 1;
  border-radius: 7.5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

.waiting_area .waiting_sequence_wrap .progress_bar::-webkit-progress-bar {
  position: relative;
  overflow: hidden;
  appearance: none;
  width: 100%;
  height: 14px;
  border: none;
  border-radius: 7.5px;
  background: #ebebeb;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background: linear-gradient(-45deg, #dbdcdc, #dbdcdc 25%, #ebebeb 25%, #ebebeb 50%, #dbdcdc 50%, #dbdcdc 75%, #ebebeb 75%, #ebebeb);
  background-size: 30px 30px;
  -webkit-animation: test 1s linear infinite;
  -moz-animation: test 1s linear infinite;
  animation: test 1s linear infinite;
}

.waiting_area .waiting_sequence_wrap .progress_bar::-webkit-progress-value {
  position: relative;
  border-radius: 7.5px;
  background: #0AA1AD;
  transition: width 1.5s ease-in-out;
  z-index: 3;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

@keyframes test {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30px 0;
  }
}

@-webkit-keyframes test {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30px 0;
  }
}

@-ms-keyframes test {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30px 0;
  }
}

@-moz-keyframes test {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30px 0;
  }
}

@keyframes loading {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}