@charset "utf-8";

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

html {
  overflow-x: hidden;
  font-size: 10px;
}

body {
  overflow: hidden;
  font: 1.5rem "Roboto", "Noto Sans KR", sans-serif;
  font-weight: 400;
  letter-spacing: -0.06em;
  color: #fff;
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-use-select: none;
  user-select: none;
}

body::-webkit-scrollbar {
  display: none;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  word-break: break-all;
}

table td,
table th {
  vertical-align: middle;
}

fieldset {
  border: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

a:focus {
  outline: none !important;
}

img,
video {
  border: 0;
  vertical-align: top;
}

img {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

address,
em,
cite {
  font-style: normal;
  font-weight: normal;
}

select,
textarea,
button,
input {
  font: 1.5rem "Roboto", "Noto Sans KR", sans-serif;
  outline: 0;
}

select {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 12em;
  padding: 0.7em 0.8em;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: url(/img/ico_arrow.png) no-repeat;
  background-color: #fff;
  background-size: 0.6em;
  background-position-x: calc(100% - 0.5em);
  background-position-y: 50%;
  font-size: 1.5rem;
}

select::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
}

select::-webkit-scrollbar-thumb {
  border-radius: 0.5em;
  background-color: #bbb;
}

::placeholder {
  font-weight: 400;
  color: #999;
}

textarea {
  width: 100%;
  padding: 0.6em;
  border: 1px solid #666;
  border-radius: 2px;
  background-color: transparent;
  outline: 0;
  cursor: text;
  resize: none;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

button img {
  vertical-align: middle;
}

input {
  border: 1px solid #666;
  border-radius: 2px;
  background-color: transparent;
}

input[type="text"],
input[type="tel"] {
  padding: 0.6em;
  outline: 0;
}

input[type="checkbox"] {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
}

input[type="checkbox"]:checked {
  border: none;
}

input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: url(/img/ico_chk.svg) no-repeat center / 100%;
}

label {
  font: 1.5rem "Roboto", "Noto Sans KR", sans-serif;
  cursor: pointer;
}

.blind {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  height: 0;
  text-indent: -9999px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* loading */
.loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8888;
}

.loader-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #eea412;
  z-index: -1;
  transition: top 1.2s linear 3.1s;
}

.loader-container:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #eea412;
  z-index: -1;
  transition: bottom 1.2s linear 3.1s;
}

.loader-container.done:before {
  top: -50%;
}

.loader-container.done:after {
  bottom: -50%;
}

.progress-br {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center;
}

.progress-br .progress__item {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.progress-br .progress__item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: -3px;
  margin-left: 0px;
  width: 50px;
  height: 50px;
  border-top: solid 10px #fff;
  border-right: solid 10px #fff;
  border-top-right-radius: 100%;
  transform-origin: left bottom;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.progress-br.float .progress__item:before {
  border-top-width: 50px;
  margin-top: 0px;
  height: 50px;
}

.progress-br.float.shadow:before {
  border-top-width: 50px;
  margin-top: -50px;
  height: 50px;
}

.progress-br.shadow:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 50px;
  width: 50px;
  height: 50px;
  border-top: solid 10px #6e912d;
  border-right: solid 10px #6e912d;
  border-top-right-radius: 100%;
  z-index: -1;
  transform-origin: left bottom;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.progress-br.shadow:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  color: #6e912d;
  text-align: center;
  line-height: 100px;
  border: 2px solid #6e912d;
  border-radius: 50%;
  margin: -50px 0 0 -0px;
  z-index: -1;
  transform-origin: center;
}

.progress-br.done .progress__item {
  opacity: 0;
  -webkit-animation: done 3.1s;
  animation: done 3.1s;
  transition: opacity 0.3s linear 3.1s;
}

.progress-br.done .progress__item:before {
  display: none;
}

.progress-br.done:before {
  display: none;
}

.progress-br.done:after {
  opacity: 0;
  animation: done 3.1s;
  -webkit-animation: done 3.1s;
  transition: opacity 0.15s linear 3.1s;
}

@-webkit-keyframes done {
  10% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(0.9);
  }

  30% {
    transform: scale(1.07);
  }

  40% {
    transform: scale(0.93);
  }

  50% {
    transform: scale(1.04);
  }

  60% {
    transform: scale(0.97);
  }

  80% {
    transform: scale(1.01);
  }

  90% {
    transform: scale(0.99);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes done {
  10% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(0.9);
  }

  30% {
    transform: scale(1.07);
  }

  40% {
    transform: scale(0.93);
  }

  50% {
    transform: scale(1.04);
  }

  60% {
    transform: scale(0.97);
  }

  80% {
    transform: scale(1.01);
  }

  90% {
    transform: scale(0.99);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.shadow {
  box-shadow: none !important;
}

/* btn */
.btn_area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  padding: 0.5em 0 0.6em;
  background-color: #eea412;
  border: 2px solid #eea412;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.3s;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

.btn--slide {
  --color: #eea412;
  --hover: #fff;
}

.btn--slide:hover {
  box-shadow: inset 11em 0 0 0 var(--hover);
  color: #eea412;
}