@-webkit-keyframes slide-right-in {
  0% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-right-in {
  0% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-right-in1 {
  0% {
    -webkit-transform: translateX(400px);
            transform: translateX(400px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-right-in1 {
  0% {
    -webkit-transform: translateX(400px);
            transform: translateX(400px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-left-in {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-left-in {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slide-left-in1 {
  0% {
    margin-left: -200px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes slide-left-in1 {
  0% {
    margin-left: -200px;
  }
  100% {
    margin-left: 0px;
  }
}

@-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;
  }
}

@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: translateX(-70%) rotate(0deg);
            transform: translateX(-70%) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(-70%) rotate(1200deg);
            transform: translateX(-70%) rotate(1200deg);
  }
}

@keyframes rotate-in {
  0% {
    -webkit-transform: translateX(-70%) rotate(0deg);
            transform: translateX(-70%) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(-70%) rotate(1200deg);
            transform: translateX(-70%) rotate(1200deg);
  }
}

@-webkit-keyframes fade-in1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes fade-in1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes width-in {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(129);
  }
}

@keyframes width-in {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(129);
  }
}

@-webkit-keyframes width-in2 {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(27);
  }
}

@keyframes width-in2 {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(27);
  }
}

@-webkit-keyframes width-in3 {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(119);
  }
}

@keyframes width-in3 {
  0% {
    width: 0;
  }
  100% {
    width: px2rem(119);
  }
}

@-webkit-keyframes scale-in {
  0% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes scale-in {
  0% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes ball-in {
  0% {
    -webkit-transform: translateY(100px) rotate(-30deg);
            transform: translateY(100px) rotate(-30deg);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  100% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
}

@keyframes ball-in {
  0% {
    -webkit-transform: translateY(100px) rotate(-30deg);
            transform: translateY(100px) rotate(-30deg);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  100% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
}

.main .section2 .title p:nth-of-type(1), .main .section3 .title p:nth-of-type(1), .main .section4 .title p:nth-of-type(1), .main .section5 .title p:nth-of-type(1), .main .section6 .title p:nth-of-type(1), .main .section7 .title p:nth-of-type(1), .main .section8 .title p:nth-of-type(1), .main .section9 .title p:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section2 .title p:nth-of-type(2), .main .section3 .title p:nth-of-type(2), .main .section4 .title p:nth-of-type(2), .main .section5 .title p:nth-of-type(2), .main .section6 .title p:nth-of-type(2), .main .section7 .title p:nth-of-type(2), .main .section8 .title p:nth-of-type(2), .main .section9 .title p:nth-of-type(2) {
  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;
}

.main .section2 .circle div:nth-of-type(1), .main .section3 .circle div:nth-of-type(1), .main .section4 .circle div:nth-of-type(1), .main .section5 .circle div:nth-of-type(1), .main .section6 .circle div:nth-of-type(1), .main .section7 .circle div:nth-of-type(1), .main .section8 .circle div:nth-of-type(1), .main .section9 .circle div:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section2 .circle div:nth-of-type(2), .main .section3 .circle div:nth-of-type(2), .main .section4 .circle div:nth-of-type(2), .main .section5 .circle div:nth-of-type(2), .main .section6 .circle div:nth-of-type(2), .main .section7 .circle div:nth-of-type(2), .main .section8 .circle div:nth-of-type(2), .main .section9 .circle div:nth-of-type(2) {
  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;
}

.main .section1 .logo .box {
  opacity: 0;
  -webkit-animation: width-in 1s , fade-in 1s;
          animation: width-in 1s , fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .logo > img {
  opacity: 0;
  -webkit-animation: scale-in 1s, fade-in 1s;
          animation: scale-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .text > img {
  opacity: 0;
  -webkit-animation: slide-right-in1 1s, fade-in 1s;
          animation: slide-right-in1 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .text p:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .text p:nth-of-type(2) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .text p:nth-of-type(3) {
  opacity: 0;
  -webkit-animation: width-in3 1s , fade-in 1s;
          animation: width-in3 1s , fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section1 .text .line {
  opacity: 0;
  -webkit-animation: width-in2 1s , fade-in 1s;
          animation: width-in2 1s , fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section2 > p {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section2 > 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;
}

.main .section3 ul li > div:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section3 ul li > div:nth-of-type(2) {
  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;
}

.main .section4 ul li p:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section4 ul li p:nth-of-type(2) {
  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;
}

.main .section5 .top .box p {
  opacity: 0;
  -webkit-animation: slide-left-in1 1s, fade-in 1s;
          animation: slide-left-in1 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section5 ul li:nth-of-type(1), .main .section5 ul li:nth-of-type(3) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section5 ul li:nth-of-type(2), .main .section5 ul li:nth-of-type(4) {
  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;
}

.main .section6 ul li 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;
}

.main .section6 ul li p:nth-of-type(1) {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section6 ul li p:nth-of-type(2) {
  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;
}

.main .section7 .box > p {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section7 .box > 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;
}

.main .section7 .text p {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section8 > 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;
}

.main .section8 ul li div {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section8 ul li p {
  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;
}

.main .section9 ul li div {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .section9 ul li input {
  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;
}

.main .section9 ul li .btn {
  -webkit-animation: slide-left-in 1s,fade-in1 1s;
          animation: slide-left-in 1s,fade-in1 1s;
}

.main .footer .left p {
  opacity: 0;
  -webkit-animation: slide-left-in 1s, fade-in 1s;
          animation: slide-left-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main .footer .right {
  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;
}
/*# sourceMappingURL=animation.css.map */