@font-face {
  font-family: 'NimbusSanTConBold';
  src: url("./fonts/nimbussantconbold-webfont.woff");
}

* {
  margin: 0;
  padding: 0;
}

.main-section {
  display: flex;
  height: 57vw; /* 960px */
}

.block {
  width: calc(100% / 3);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.block:nth-child(n+2):before {
  position: absolute;
  content: "";
  width: 1px;
  left: 0;
  height: 0;
  background-color: #B7E4F3;
}

.label-block {
  min-height: 3.9vw; /* 67px */
  width: auto;
  background-color: #0095A9;
  display: flex;
  align-items: center;
  padding: 0.6vw 3.57vw 0.6vw 1.79vw; /* 10px 60px 10px 30px */
  box-sizing: border-box;
  clip-path: polygon(0% 0%, calc(100% - 1.49vw) 0%, 100% 50%, calc(100% - 1.49vw) 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, calc(100% - 1.49vw) 0%, 100% 50%, calc(100% - 1.49vw) 100%, 0% 100%);
}

.b1 .label-block {
  max-width: 17vw; /* 280px */
}

.b2 .label-block {
  max-width: 19.5vw; /* 310px */
}

.b3 .label-block {
  max-width: 25.4vw; /* 410px */
}

.label-block span {
  font-family: NimbusSanTConBold;
  color: white;
  font-size: 2.6vw; /* 44px */
  position: relative;
  top: -4.76vw; /* -80px */
}

.blur {
  top: 13.69vw; /* 230px 13.96vw*/
  align-self: center;
  position: absolute;
  opacity: 0;
  animation-name: vision;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 1s;
}

.block.b2 .label-block, .block.b3 .label-block {
  display: none;
}

.block.b1 .label-block {
  position: relative;
  top: -4.76vw; /* -80px */
  animation-name: top-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.block.b1 .label-block span {
  animation-name: top-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
}


@keyframes top-down {
  to {
    top: 0;
  }
}

@keyframes vision {
  to {
    opacity: 1;
  }
}

.angry {
  position: absolute;
  top: 21.13vw; /* 355px */
  left: -29.76vw; /* -500px */
  animation-name: slide-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  width: 20.54vw;
  height: 26.79vw;
}

@keyframes slide-out {
  to {
    left: 3.57vw; /* 60px */
  }
}

.user-label {
  position: absolute;
  top: 24.16vw; /* 406px */
  width: 0;
  background-color: #D5EFF8;
  height: 3.75vw; /* 63px */
  border-radius: 2.02vw; /*34px*/
  right: 0;
  animation-name: slide-out-left;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-label span {
  font-family: NimbusSanTConBold;
  font-size: 2.14vw; /* 36px */
  min-width: 7.14vw; /* 120px */
}


@keyframes slide-out-left {
  to {
    width: 14.4vw; /* 242px */
  }
}

.cloud-block {
  position: absolute;
  top: 15.47vw; /*260px*/
  left: 10.12vw; /* 170px */
  height: 12.14vw; /* 204px */
  width: 21.55vw; /* 362px */  
  display: flex;
  align-items: flex-end;
  animation-name: cloud-up;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

.cloud-text-block {
  display: flex;
  align-items: center;
}

.cloud-text {
  position: absolute;
  font-family: NimbusSanTConBold;
  font-size: 2.14vw; /* 36px */
  top: 3.1vw; /* 52px */
  left: 3.1vw; /* 52px */
  max-width: 11.96vw; /* 201px */
  line-height: 2.02vw; /* 34px */
  display: flex;
  flex-wrap: wrap;
}

.cloud-text span {
  visibility: hidden;
  animation-name: letter-visible;
  animation-duration: 0.04s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.question {
  font-size: 6.3vw; /* 106px */
  font-family: NimbusSanTConBold;
  color: #A1BFCD;
  transform: rotate(8deg);
  position: absolute;
  top: 1.31vw; /* 22px */
  right: 2.32vw; /* 39px */
  opacity: 0;
  animation: 0.3s ease-in-out 4s forwards question-visible, 2s linear 4.3s infinite forwards shaker;
  /* animation-name: question-visible;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 4s; */
  display: block;
}

.cloud {
  width: 0%;
  height: 0%;
  animation-name: cloud-out;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

@keyframes cloud-out {
  to {
    height: 12.14vw; /* 204px */
    width: 21.55vw; /* 362px */
  }
}

@keyframes cloud-up {
  to {
    top: 8.51vw; /* 143px */
  }
}

@keyframes letter-visible {
  to {
    visibility: visible;
  }
}

@keyframes question-visible {
  to {
    opacity: 1;
  }
}

@keyframes shaker {
  20% {
    transform: rotate(2deg);
  }

  40% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(2deg);
  }

  80% {
    transform: rotate(8deg);
  }
}

.block.anima:before {
  animation-name: line;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes line {
  to {
    height: 100%;
  }
}

.block.anima .label-block {
  display: flex;
  position: relative;
  top: -4.76vw; /* -80px */
  animation-name: top-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
}

.block.anima .label-block span {
  animation-name: top-down;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
}

.blur2 {
  position: absolute;
  top: 4.49vw; /* 109px 6.49vw */
  left: 1.96vw; /* 33px */
  opacity: 0;
  width: 29.94vw;
  height: 48.33vw;
}

.block.anima .blur2 {
  animation-name: vision;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 2s;
}

.block.b2 {
  overflow: hidden;
}

.computer {
  position: relative;
}

.computer.c1 {
  left: -16.84vw; /* -283px */
  width: 14.29vw;
  height: 11.3vw;
}

.block.anima .computer.c1 {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 2.5s;
}

@keyframes computer-start {
  to {
    left: 0;
  }
}

.computer-block {
  display: flex;
  flex-direction: column;
  position: absolute;
}

.computer-block.b1 {
  top: 8.63vw; /* 145px */
  left: 0.89vw; /* 15px */
}

.item {
  display: flex;
  align-items: center;
  position: relative;
}

.round {
  width: 6.07vw; /* 102px */
  height: 6.07vw; /* 102px */
  background-color: #0775A0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: NimbusSanTConBold;
  font-size: 3.51vw; /* 59px */
  color: white; 
  margin-right: 0.89vw; /* 15px */
  position: relative;
}

.item-name {
  font-family: NimbusSanTConBold;
  font-size: 1.9vw; /* 32px */
  position: relative;
}

.item.i1 {
  top: -1.19vw; /* -20px */
}

.item.i1 .round {
  left: -7.74vw; /* -130px */
}

.block.anima .item.i1 .round,  .block.anima .item.i1 .item-name {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
}

.item.i1 .item-name {
  left: 26.79vw; /* 450px */
}


.computer-block.b2 {
  top: 11.01vw; /* 185px */
  left: 13.93vw; /* 234px */
}

.item.i2 {
  top: -1.19vw; /* -20px */
  left: 1.19vw; /* 20px */
}

.computer.c2 {
  left: 20.24vw; /* 340px */
  width: 18.15vw;
  height: 14.29vw;
}

.block.anima .computer.c2 {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 4s;
}

.item.i2 .round {
  left: -22.02vw; /* -370px */
}

.item.i2 .item-name {
  left: 11.9vw; /* 200px */
}

.block.anima .item.i2 .round, .block.anima .item.i2 .item-name {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 4.5s;
}

.computer-block.b3 {
  top: 30.36vw; /* 510px */
  left: 1.9vw; /* 20px */
}

.item.i3 {
  top: -3.57vw; /* -60px */
  left: 10.83vw; /* 182px */
}

.item.i3 .round {
  left: -19.04vw; /* -320px */
}

.item.i3 .item-name {
  width: 8.04vw; /* 135px */
  left: 14.88vw; /* 250px */
}

.computer.c3 {
  left: 32.74vw; /* 550px */
  width: 21.85vw;
  height: 17.38vw;
}

.block.anima .computer.c3 {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 5.5s;
}

.block.anima .item.i3 .round, .block.anima .item.i3 .item-name {
  animation-name: computer-start;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 6s;
}

.blur3 {
  position: absolute;
  top: 13.21vw; /* 306px 18.21vw*/
  left: 0.77vw; /* 13px */
  opacity: 0;
  height: 35.42vw;
  width: 31.85vw;
}

.block.anima .blur3 {
  animation-name: vision;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 2s;
}

.girl {
  position: absolute;
  top: 20.24vw; /* 340px */
  left: 33.93vw; /* 570px */
  width: 21.73vw;
  height: 27.38vw;
}

.block.anima .girl {
  animation-name: girl-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 2.5s;
}

@keyframes girl-out {
  to {
    left: 9.53vw; /* 160px */
  }
}

.cloud-block2 {
  position: absolute;
  top: 11.9vw; /* 200px */
  left: 3.33vw; /* 56px */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 16.66vw; /* 280px */
  height: 13.99vw; /* 253px */
}

.block.anima .cloud-block2 {
  animation-name: cloud-up2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 3s;
}

.cloud2 {
  width: 0;
  height: 0;
}

.block.block.anima .cloud2 {
  animation-name: cloud-out2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: 3s;
}

@keyframes cloud-out2 {
  to {
    width: 16.66vw; /* 280px */
    height: 13.99vw; /* 253px */
  }
}

@keyframes cloud-up2 {
  to {
    top: 8.51vw; /* 143px */
  }
}

.cloud-text-block2 {
  display: flex;
  align-items: center;
}

.cloud-text2 {
  position: absolute;
  font-family: NimbusSanTConBold;
  font-size: 2.14vw; /* 36px*/
  top: 3.39vw; /* 57px */
  left: 3.87vw; /* 65px */
  max-width: 6.12vw; /* 103px */
  line-height: 2.02vw; /* 34px */
  display: flex;
  flex-wrap: wrap;
}

.cloud-text2 span {
  visibility: hidden;
}

.block.anima .cloud-text2 span {
  animation-name: letter-visible;
  animation-duration: 0.04s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.exclamation {
  opacity: 0;
  font-size: 6.03vw; /* 106px */
  font-family: NimbusSanTConBold;
  color: #A1BFCD;
  transform: rotate(8deg);
  position: relative;
  top: -4.76vw; /* -80px */
  right: 4.34vw; /* 73px */
}

.block.anima .exclamation {
  animation: 0.3s ease-in-out 4.5s forwards question-visible, 2s linear 4.8s infinite forwards shaker;
  /* animation-name: question-visible;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 4.5s; */
  display: block;
}

.number-animation {
  animation-name: close-up;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes close-up {
  12% {
    transform: scale(1.3);
  }
  24% {
    transform: scale(1);
  }
}