@keyframes breathe {
  to {
    transform: scale(0.9);
  }
}
@keyframes rotate {
  to {
    transform: rotate(359deg);
  }
}
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 135vw;
}

.bg-wrap {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.bg-wrap .bg-line {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../img/bg-line.svg") rgba(237, 238, 243, 0.5) repeat top 2% left 4.2%;
  background-size: 7.7%;
}
.bg-wrap .bg-1 {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 15%;
}
.bg-wrap .bg-2 {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 49%;
}
.bg-wrap .bg-3 {
  position: absolute;
  display: block;
  top: 60%;
  left: 0;
  width: 18%;
  transform: translateY(-50%);
}
.bg-wrap .bg-4 {
  position: absolute;
  display: block;
  bottom: 0;
  left: 23%;
  width: 54%;
}
.bg-wrap .bg-5 {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 8%;
}

.kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 3% 0;
}
.kv .bg-dark-1,
.kv .bg-dark-2,
.kv .bg-dark-3,
.kv .bg-dark-4 {
  pointer-events: none;
  z-index: -1;
  display: block;
  position: absolute;
  width: 25%;
  opacity: 0.75;
}
.kv .bg-dark-1 {
  top: 0;
  left: 0;
}
.kv .bg-dark-2 {
  top: 0;
  right: 0;
  transform: scale(-1, 1);
}
.kv .bg-dark-3 {
  left: 0;
  bottom: 0;
  transform: scale(1, -1);
}
.kv .bg-dark-4 {
  right: 0;
  bottom: 0;
  transform: scale(-1, -1);
}
.kv .logos {
  display: block;
  width: 40%;
}
.kv .kv-robot {
  display: block;
  width: 95%;
  height: 60%;
  margin: 1rem 0;
  background: url("../img/kv-robot.png") no-repeat center center;
  background-size: contain;
}
.kv .kv-title {
  display: block;
  width: 60%;
}
.kv .btn-start {
  display: block;
  width: 50%;
  margin-top: 1.5rem;
  animation: breathe 1s infinite alternate;
}

.info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.info .info-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding-top: 15%;
}
.info h2 {
  font-weight: 500;
  font-size: 2rem;
}
.info form {
  width: 55%;
  margin: 1rem auto;
}
.info .btn-next {
  display: block;
  width: 45%;
  margin-top: 3rem;
  filter: grayscale(1) brightness(1.5);
}
.info .btn-next.active {
  filter: none;
}

.upload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.upload .upload-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.upload h2 {
  font-weight: 500;
  font-size: 2rem;
}
.upload h3 {
  font-weight: 500;
  font-size: 1rem;
}
.upload .photo-block {
  position: relative;
  width: 62%;
  margin: 0.5rem 0;
}
.upload .photo-block .full-photo {
  position: absolute;
  width: 70%;
  padding-top: 106%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.upload .photo-block .photo-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.upload .btn-upload-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  gap: 5%;
  width: 100%;
  margin-top: 2rem;
}
.upload .btn-upload-flex a {
  display: block;
}
.upload .btn-upload-flex a:not(.active) {
  filter: grayscale(1) brightness(1.5);
}

.buffer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.buffer .buffer-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.buffer .buffer-wrap img {
  display: block;
  width: 55%;
}
.buffer .buffer-wrap h2 {
  font-size: 2rem;
  font-weight: 500;
  margin-top: 1rem;
  animation: breathe 1s infinite alternate;
}

.fail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fail .fail-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.fail .fail-wrap article {
  position: relative;
  width: 75%;
  padding-top: 65%;
  margin: auto;
  background: url("../img/fail-bg.png") no-repeat center center;
  background-size: contain;
}
.fail .fail-wrap article h2 {
  position: absolute;
  font-size: 2rem;
  font-weight: 500;
  top: 43%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.fail .fail-wrap article a {
  position: absolute;
  width: 62%;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(25%);
}

.done {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.done .done-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.done .done-wrap .done-block {
  position: relative;
  width: 62%;
}
.done .done-wrap .done-block p {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  border: 0.25rem solid #c7000a;
  border-top-color: transparent;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  animation: rotate 1s linear infinite;
}
.done .done-wrap .done-block .done-photo {
  position: absolute;
  width: 70%;
  padding-top: 106%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.done .done-wrap .done-block img {
  position: relative;
}
.done .done-wrap h2 {
  font-size: 2rem;
  font-weight: 500;
  margin-top: 0.5rem;
}
.done .done-wrap .btn-download {
  position: relative;
  display: block;
  width: 50%;
  margin: 1rem 0 1rem 0;
}
.done .done-wrap .btn-download .done-check {
  pointer-events: none;
  display: none;
  position: absolute;
  right: -20%;
  top: 30%;
  width: 15%;
  animation: check 1.5s forwards;
}
@keyframes check {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  25%, 75% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%);
  }
}
.done .done-wrap .logos {
  display: block;
  width: 35%;
}

.privacy {
  display: none;
  z-index: 9;
  color: #000;
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  background: #FFF;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
}
.privacy .privacy-wrap {
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: justify;
}
.privacy .privacy-close {
  display: block;
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 2rem;
  filter: brightness(0) invert(1);
}/*# sourceMappingURL=index.css.map */