@-webkit-keyframes slide-right-in {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-right-in {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-left-in {
  0% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-left-in {
  0% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-up-in {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-up-in {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes slide-down-in {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-down-in {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ufrontend-root .section1 .img-layer img {
  opacity: 0;
  -webkit-animation: slide-right-in 1s, fade-in 1s;
          animation: slide-right-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section1 .text-layer > span {
  opacity: 0;
  -webkit-animation: fade-in 1s 1s;
          animation: fade-in 1s 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section2 .img-layer, .ufrontend-root .section3 .img-layer, .ufrontend-root .section8 .section8_1 .img-layer {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
          animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section2 .text-layer, .ufrontend-root .section3 .text-layer, .ufrontend-root .section8 .section8_1 .text-layer {
  opacity: 0;
  -webkit-animation: slide-up-in 1s, fade-in 1s;
          animation: slide-up-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section4 .img-layer {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
          animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section4 .text-layer .title {
  opacity: 0;
  -webkit-animation: slide-up-in 1s, fade-in 1s;
          animation: slide-up-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section4 .text-layer .section4-item {
  opacity: 0;
  -webkit-animation: fade-in 1s;
          animation: fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section5 .title {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
          animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section7 .text-layer .title, .ufrontend-root .section7 .text-layer .bottom-text {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
          animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section7 .text-layer .bottom-text {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

.ufrontend-root .section8 .section8_2 .title {
  opacity: 0;
  -webkit-animation: slide-up-in 1s, fade-in 1s;
          animation: slide-up-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.ufrontend-root .section8 .section8_2 ul {
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
          animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
