.scroll-animate.animated {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.scroll-animate2 {
  visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  -moz-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important ;
  backface-visibility: visible !important;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.scroll-animate2.animated {
  visibility: visible;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.font-fadeIn font {
  display: inline-block;
}

.scrolly {
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  backface-visibility: hidden;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*animate补充动画*/
@keyframes fadeInLeftSmall {
  from {
    opacity: 0;
    transform: translate3d(-1rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftSmall {
  animation-name: fadeInLeftSmall;
}

@keyframes fadeInRightSmall {
  from {
    opacity: 0;
    transform: translate3d(0.3rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightSmall {
  animation-name: fadeInRightSmall;
}

@keyframes fadeInDownSmall {
  from {
    opacity: 0;
    transform: translate3d(0%, -10px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDownSmall {
  animation-name: fadeInDownSmall;
}

@keyframes fadeOutDownSmall {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translate3d(0%, 10px, 0);
  }
}

.fadeOutDownSmall {
  animation-name: fadeOutDownSmall;
}

@keyframes fadeOutRightSmall {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translate3d(50px, 0px, 0);
  }
}

.fadeOutRightSmall {
  animation-name: fadeOutRightSmall;
}

@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    transform: translate3d(0%, 2rem, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1024px) {
  @keyframes fadeInUpSmall {
    from {
      opacity: 0;
      transform: translate3d(0%, 30px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.fadeInUpSmall {
  animation-name: fadeInUpSmall;
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    backface-visibility: hidden;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    backface-visibility: hidden;
  }
}

.scaleIn {
  animation-name: scaleIn;
}

.getGray {
  -webkit-filter: grayscale(100%);
  /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
  -moz-filter: grayscale(100%);
  /* 目前没有实现 */
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  /* CSS3 filter方式，标准写法*/
  /*filter: url(filters.svg#grayscale);*/
  /* Firefox 4+ */
  filter: gray;
  /* IE 6-9 */
}

.img-ani {
  transform: scaleX(0.5) scaleY(0.5) scaleZ(1) translate(0, 50%);
  transition: all 0.9s ease;
  opacity: 0;
}

.img-ani .img-child {
  transform: scaleX(1.5) scaleY(1.5) scaleZ(1);
  transition: all 1.5s ease;
}

.img-ani.go {
  transform: scaleX(1) scaleY(1) scaleZ(1) translate(0);
  opacity: 1;
}

.img-ani.go .img-child {
  transform: scaleX(1) scaleY(1) scaleZ(1) translate(0);
}

.bx {
  background-size: cover;
  background-position: center;
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ph .pic {
  position: absolute;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  left: -30px;
  top: -30px;
  backface-visibility: hidden;
}

@media screen and (orientation: portrait) {
  .ph .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    backface-visibility: hidden;
  }
}

@keyframes Tmouse {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    -o-transform: translateY(-12px);
    transform: translateY(-12px);
  }
}

@keyframes wave {
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loop2 {
  0% {
    transform: rotate(40deg);
  }

  100% {
    transform: rotate(400deg);
  }
}

@keyframes loop3 {
  0% {
    transform: rotate(80deg);
  }

  100% {
    transform: rotate(440deg);
  }
}

@keyframes loop4 {
  0% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(330deg);
  }
}

@keyframes fn3 {
  0% {
    opacity: 0;
    transform: matrix(1, 0.1, 0, 1, 0, 10);
  }

  100% {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

.fn3 {
  transform-origin: 0 50%;
  animation: fn3 1.2s cubic-bezier(0.49, 0.54, 0.16, 1);
  animation-fill-mode: both;
}

/* --------------------------------
  
  Keyframes
  
  -------------------------------- */
@-webkit-keyframes cd-reveal-left {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes cd-reveal-left {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes cd-reveal-right {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes cd-reveal-right {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes cd-hide-left {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes cd-hide-left {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes cd-hide-right {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes cd-hide-right {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes cd-clicked {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes cd-clicked {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes cir_right {
  from {
    clip-path: circle(12vw at 112% 50%);
  }

  to {
    clip-path: circle(12vw at 102% 50%);
  }
}

@keyframes cir_left {
  from {
    clip-path: circle(12vw at -12% 50%);
  }

  to {
    clip-path: circle(12vw at -2% 50%);
  }
}

@keyframes banner_in {
  0% {
    clip-path: ellipse(50% 50% at 50% 150%);
  }

  100% {
    clip-path: ellipse(100% 180% at 50% 150%);
  }
}

@keyframes banner_out {
  0% {
    clip-path: ellipse(100% 180% at 50% 150%);
  }

  100% {
    clip-path: ellipse(50% 50% at 50% 150%);
  }
}

@keyframes banner_appIn {
  0% {
    clip-path: ellipse(100% 50% at 50% 150%);
  }

  100% {
    clip-path: ellipse(180% 180% at 50% 150%);
  }
}

@keyframes banner_appOut {
  0% {
    clip-path: ellipse(180% 180% at 50% 150%);
  }

  100% {
    clip-path: ellipse(100% 50% at 50% 150%);
  }
}

@keyframes row5_in {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes r5_in {
  0% {
    transform: translate3d(-70vw, 36vw, 0) scale(1);
  }

  50% {
    transform: translate3d(-14vw, 6vw, 0) scale(1);
  }

  100% {
    transform: translate3d(-14vw, 6vw, 0) scale(3);
  }
}

@keyframes r5_out {
  0% {
    transform: translate3d(-14vw, 6vw, 0) scale(3);
  }

  50% {
    transform: translate3d(-14vw, 6vw, 0) scale(1);
  }

  100% {
    transform: translate3d(-70vw, 36vw, 0) scale(1);
  }
}

@keyframes slider {
  0% {
    opacity: 0;
    margin-left: -0.1rem;
  }

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes scrFn {
  0% {
    transform: translate3d(50vw, 42vh, 0) scale(0.9) rotate(0);
  }

  30% {
    transform: translate3d(50vw, 42vh, 0) scale(9) rotate(0);
  }

  100% {
    transform: translate3d(50vw, 42vh, 0) scale(54) rotate(20deg);
  }
}

@keyframes aboutFn {
  0% {
    -webkit-mask-size: 45.8%;
    -webkit-mask-position: 50% 40%;
  }

  30% {
    -webkit-mask-size: 458%;
    -webkit-mask-position: 50% 40%;
  }

  100% {
    -webkit-mask-size: 2738%;
    -webkit-mask-position: 52% 52%;
  }
}

@keyframes scrImg {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    backface-visibility: hidden;
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    backface-visibility: hidden;
  }
}

@keyframes scrOut {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  12% {
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    -ms-transform: translate3d(0, 20px, 0);
    backface-visibility: hidden;
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
    -o-transform: translate3d(0, 20px, 0);
    -ms-transform: translate3d(0, 20px, 0);
    backface-visibility: hidden;
    opacity: 0;
  }
}

@keyframes scrP1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    backface-visibility: hidden;
    opacity: 1;
  }

  8% {
    transform: translate3d(-5px, -7px, 0) scale(1.05);
    -webkit-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -moz-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -o-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -ms-transform: translate3d(-5px, -7px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }

  100% {
    transform: translate3d(-5px, -7px, 0) scale(1.05);
    -webkit-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -moz-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -o-transform: translate3d(-5px, -7px, 0) scale(1.05);
    -ms-transform: translate3d(-5px, -7px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }
}

@keyframes scrP2 {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  10% {
    transform: translate3d(7px, 5px, 0) scale(1.05);
    -webkit-transform: translate3d(7px, 5px, 0) scale(1.05);
    -moz-transform: translate3d(7px, 5px, 0) scale(1.05);
    -o-transform: translate3d(7px, 5px, 0) scale(1.05);
    -ms-transform: translate3d(7px, 5px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }

  100% {
    transform: translate3d(7px, 5px, 0) scale(1.05);
    -webkit-transform: translate3d(7px, 5px, 0) scale(1.05);
    -moz-transform: translate3d(7px, 5px, 0) scale(1.05);
    -o-transform: translate3d(7px, 5px, 0) scale(1.05);
    -ms-transform: translate3d(7px, 5px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }
}

@keyframes scrP3 {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  12% {
    transform: translate3d(-7px, -5px, 0) scale(1.05);
    -webkit-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -moz-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -o-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -ms-transform: translate3d(-7px, -5px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }

  100% {
    transform: translate3d(-7px, -5px, 0) scale(1.05);
    -webkit-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -moz-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -o-transform: translate3d(-7px, -5px, 0) scale(1.05);
    -ms-transform: translate3d(-7px, -5px, 0) scale(1.05);
    backface-visibility: hidden;
    opacity: 0;
  }
}

.scrTxt {
  animation-name: scrTxt;
}

@keyframes scrTxt {
  0% {
    transform: translate3d(50px, 10px, 0);
    -webkit-transform: translate3d(50px, 10px, 0);
    -moz-transform: translate3d(50px, 10px, 0);
    -o-transform: translate3d(50px, 10px, 0);
    -ms-transform: translate3d(50px, 10px, 0);
    backface-visibility: hidden;
    opacity: 0;
  }

  20% {
    transform: translate3d(0px, 0px, 0);
    -webkit-transform: translate3d(0px, 0px, 0);
    -moz-transform: translate3d(0px, 0px, 0);
    -o-transform: translate3d(0px, 0px, 0);
    -ms-transform: translate3d(0px, 0px, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  100% {
    transform: translate3d(0px, 0px, 0);
    -webkit-transform: translate3d(0px, 0px, 0);
    -moz-transform: translate3d(0px, 0px, 0);
    -o-transform: translate3d(0px, 0px, 0);
    -ms-transform: translate3d(0px, 0px, 0);
    backface-visibility: hidden;
    opacity: 1;
  }
}

@keyframes scrP4 {
  0% {
    transform: translate3d(-120px, 0px, 0px) rotate(-50deg);
  }

  30% {
    transform: translate3d(-120px, 0px, 0px) rotate(0deg);
  }

  100% {
    transform: translate3d(-120px, 0px, 0px) rotate(0deg);
  }
}

@keyframes scrP5 {
  0% {
    transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
  }

  58% {
    transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
  }

  100% {
    transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
  }
}

@keyframes scrP51 {
  0% {
    margin-left: 50%;
    letter-spacing: 0.6rem;
  }

  40% {
    margin-left: 0%;
    letter-spacing: 0px;
  }

  100% {
    margin-left: 0%;
    letter-spacing: 0px;
  }
}

@keyframes scrP6 {
  0% {
    transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
    letter-spacing: 1rem;
    opacity: 0;
  }

  58% {
    transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
    letter-spacing: 0px;
    opacity: 1;
  }

  100% {
    transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -webkit-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -moz-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -o-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    -ms-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
    backface-visibility: hidden;
    letter-spacing: 0px;
    opacity: 1;
  }
}

@keyframes scrP61 {
  0% {
    letter-spacing: 0.6rem;
    background-color: #ffffff;
  }

  40% {
    letter-spacing: 0px;
    background-color: rgba(255, 255, 255, 0);
  }

  100% {
    letter-spacing: 0px;
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes scrP7 {
  0% {
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
  }

  58% {
    transform: translate3d(-15vw, 0vw, 0);
    -webkit-transform: translate3d(-15vw, 0vw, 0);
    -moz-transform: translate3d(-15vw, 0vw, 0);
    -o-transform: translate3d(-15vw, 0vw, 0);
    -ms-transform: translate3d(-15vw, 0vw, 0);
    backface-visibility: hidden;
  }

  100% {
    transform: translate3d(-15vw, 0vw, 0);
    -webkit-transform: translate3d(-15vw, 0vw, 0);
    -moz-transform: translate3d(-15vw, 0vw, 0);
    -o-transform: translate3d(-15vw, 0vw, 0);
    -ms-transform: translate3d(-15vw, 0vw, 0);
    backface-visibility: hidden;
  }
}

@keyframes scrP8 {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    backface-visibility: hidden;
  }

  100% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    backface-visibility: hidden;
  }
}

@keyframes scrP9 {
  0% {
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
  }

  100% {
    transform: translate3d(-58%, 0vw, 0);
    -webkit-transform: translate3d(-58%, 0vw, 0);
    -moz-transform: translate3d(-58%, 0vw, 0);
    -o-transform: translate3d(-58%, 0vw, 0);
    -ms-transform: translate3d(-58%, 0vw, 0);
    backface-visibility: hidden;
  }
}

@keyframes scrP10 {
  0% {
    opacity: 0;
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
  }

  15% {
    opacity: 1;
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
  }

  25% {
    transform: translate3d(0px, 2.02rem, 0px);
    -webkit-transform: translate3d(0px, 2.02rem, 0px);
    -moz-transform: translate3d(0px, 2.02rem, 0px);
    -o-transform: translate3d(0px, 2.02rem, 0px);
    -ms-transform: translate3d(0px, 2.02rem, 0px);
    backface-visibility: hidden;
  }

  35% {
    transform: translate3d(0px, 2.02rem, 0px);
    -webkit-transform: translate3d(0px, 2.02rem, 0px);
    -moz-transform: translate3d(0px, 2.02rem, 0px);
    -o-transform: translate3d(0px, 2.02rem, 0px);
    -ms-transform: translate3d(0px, 2.02rem, 0px);
    backface-visibility: hidden;
  }

  50% {
    transform: translate3d(0.4rem, 4.04rem, 0px);
    -webkit-transform: translate3d(0.4rem, 4.04rem, 0px);
    -moz-transform: translate3d(0.4rem, 4.04rem, 0px);
    -o-transform: translate3d(0.4rem, 4.04rem, 0px);
    -ms-transform: translate3d(0.4rem, 4.04rem, 0px);
    backface-visibility: hidden;
  }

  100% {
    transform: translate3d(0.4rem, 4.04rem, 0px);
    -webkit-transform: translate3d(0.4rem, 4.04rem, 0px);
    -moz-transform: translate3d(0.4rem, 4.04rem, 0px);
    -o-transform: translate3d(0.4rem, 4.04rem, 0px);
    -ms-transform: translate3d(0.4rem, 4.04rem, 0px);
    backface-visibility: hidden;
  }
}

@keyframes scrP11 {
  0% {
    transform: translate3d(-20px, 0vw, 0);
    -webkit-transform: translate3d(-20px, 0vw, 0);
    -moz-transform: translate3d(-20px, 0vw, 0);
    -o-transform: translate3d(-20px, 0vw, 0);
    -ms-transform: translate3d(-20px, 0vw, 0);
    backface-visibility: hidden;
    opacity: 0;
  }

  15% {
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0vw, 0);
    -webkit-transform: translate3d(0, 0vw, 0);
    -moz-transform: translate3d(0, 0vw, 0);
    -o-transform: translate3d(0, 0vw, 0);
    -ms-transform: translate3d(0, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }
}

@keyframes scrP12 {
  0% {
    transform: translate3d(-20px, 0vw, 0);
    -webkit-transform: translate3d(-20px, 0vw, 0);
    -moz-transform: translate3d(-20px, 0vw, 0);
    -o-transform: translate3d(-20px, 0vw, 0);
    -ms-transform: translate3d(-20px, 0vw, 0);
    backface-visibility: hidden;
    opacity: 0;
  }

  25% {
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0vw, 0);
    -webkit-transform: translate3d(0, 0vw, 0);
    -moz-transform: translate3d(0, 0vw, 0);
    -o-transform: translate3d(0, 0vw, 0);
    -ms-transform: translate3d(0, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }
}

@keyframes scrP13 {
  0% {
    transform: translate3d(-20px, 0vw, 0);
    -webkit-transform: translate3d(-20px, 0vw, 0);
    -moz-transform: translate3d(-20px, 0vw, 0);
    -o-transform: translate3d(-20px, 0vw, 0);
    -ms-transform: translate3d(-20px, 0vw, 0);
    backface-visibility: hidden;
    opacity: 0;
  }

  40% {
    transform: translate3d(0vw, 0vw, 0);
    -webkit-transform: translate3d(0vw, 0vw, 0);
    -moz-transform: translate3d(0vw, 0vw, 0);
    -o-transform: translate3d(0vw, 0vw, 0);
    -ms-transform: translate3d(0vw, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0vw, 0);
    -webkit-transform: translate3d(0, 0vw, 0);
    -moz-transform: translate3d(0, 0vw, 0);
    -o-transform: translate3d(0, 0vw, 0);
    -ms-transform: translate3d(0, 0vw, 0);
    backface-visibility: hidden;
    opacity: 1;
  }
}

@keyframes scrP14 {
  0% {
    transform: translate3d(0vw, 0%, 0);
    -webkit-transform: translate3d(0vw, 0%, 0);
    -moz-transform: translate3d(0vw, 0%, 0);
    -o-transform: translate3d(0vw, 0%, 0);
    -ms-transform: translate3d(0vw, 0%, 0);
    backface-visibility: hidden;
  }

  100% {
    transform: translate3d(0, 90%, 0);
    -webkit-transform: translate3d(0, 90%, 0);
    -moz-transform: translate3d(0, 90%, 0);
    -o-transform: translate3d(0, 90%, 0);
    -ms-transform: translate3d(0, 90%, 0);
    backface-visibility: hidden;
  }
}

@keyframes loadFn {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    backface-visibility: hidden;
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    backface-visibility: hidden;
  }
}

.warp-header4 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9;
}

.disable-hover {
  pointer-events: none;
}

.font-fadeIn font {
  display: inline-block;
}

.scrolly {
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  backface-visibility: hidden;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*入场动画样式*/
.cssanimations .anim_emt,
.cssanimations .anim_group .anim_item {
  visibility: hidden;
}

.cssanimations .anim_emt.visb,
.cssanimations .anim_group .anim_item.visb {
  visibility: inherit;
}

.anim_emt.start {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.anim_emt.start.scale_up {
  -webkit-animation-name: mk_scale;
  animation-name: mk_scale;
}

.anim_emt.start.fade_in {
  -webkit-animation-name: mk_fade;
  animation-name: mk_fade;
}

.anim_emt.start.r_to_l {
  -webkit-animation-name: mk_right_to_left;
  animation-name: mk_right_to_left;
}

.anim_emt.start.l_to_r {
  -webkit-animation-name: mk_left_to_right;
  animation-name: mk_left_to_right;
}

.anim_emt.start.t_to_b {
  -webkit-animation-name: mk_top_to_bottom;
  animation-name: mk_top_to_bottom;
}

.anim_emt.start.b_to_t {
  -webkit-animation-name: mk_bottom_to_top;
  animation-name: mk_bottom_to_top;
}

.slide_anim {
  visibility: hidden;
}

.slide_anim.start {
  visibility: visible;
}

.slide_anim.b_to_t.start {
  -webkit-animation: mk_bottom_to_top 0.6s;
  animation: mk_bottom_to_top 0.6s;
}

.anim_emt.palx_img.start {
  overflow: hidden;
  -webkit-animation-name: tt_palx_wrap;
  animation-name: tt_palx_wrap;
}

.anim_emt.palx_img.start .img-wrap {
  -webkit-animation: tt_palx_img 0.6s;
  animation: tt_palx_img 0.6s;
}

@keyframes tt_palx_wrap {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes tt_palx_img {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes loader {
  to {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes loader_dash {
  from {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }

  to {
    stroke-dasharray: 100 150;
    stroke-dashoffset: -140;
  }
}

@keyframes line_w100 {
  to {
    left: 100%;
  }
}

@keyframes rotate_360 {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fade_out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade_in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade_out_in {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes mk_scale {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes mk_fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mk_left_to_right {
  0% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mk_right_to_left {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mk_bottom_to_top {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mk_top_to_bottom {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mk_spt {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.js-m {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}

.js-m.animate {
  opacity: 1;
  transform: translate(0, 0);
}

.js-m-2-1 {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}

.js-m-2-1.animate {
  opacity: 1;
  transform: translate(0, 0);
}

.a-del1 {
  animation-delay: 0.1s;
}

.a-del2 {
  animation-delay: 0.2s;
}

.a-del3 {
  animation-delay: 0.3s;
}

.a-del4 {
  animation-delay: 0.4s;
}

.a-del5 {
  animation-delay: 0.5s;
}

.a-del6 {
  animation-delay: 0.6s;
}

.a-del7 {
  animation-delay: 0.7s;
}

.a-del8 {
  animation-delay: 0.8s;
}

.a-del9 {
  animation-delay: 0.9s;
}

.a-del10 {
  animation-delay: 1s;
}

.a-dur1 {
  animation-duration: 0.3s;
}

.a-dur2 {
  animation-duration: 0.4s;
}

.a-dur3 {
  animation-duration: 0.5s;
}

.a-dur4 {
  animation-duration: 0.6s;
}

.a-dur5 {
  animation-duration: 0.7s;
}

.a-dur6 {
  animation-duration: 0.8s;
}

.a-dur7 {
  animation-duration: 0.9s;
}

.a-dur8 {
  animation-duration: 1s;
}

.a-dur9 {
  animation-duration: 1.1s;
}

.a-dur10 {
  animation-duration: 1.2s;
}

.a-dur11 {
  animation-duration: 1.3s;
}

.a-dur12 {
  animation-duration: 1.4s;
}

.a-dur13 {
  animation-duration: 1.5s;
}

.a-dur14 {
  animation-duration: 1.6s;
}

.a-dur15 {
  animation-duration: 1.7s;
}

.a-dur16 {
  animation-duration: 1.8s;
}

.a-dur17 {
  animation-duration: 1.9s;
}

.a-dur18 {
  animation-duration: 2s;
}

.t-del1 {
  transition-delay: 0.1s;
}

.t-del2 {
  transition-delay: 0.2s;
}

.t-del3 {
  transition-delay: 0.3s;
}

.t-del4 {
  transition-delay: 0.4s;
}

.t-del5 {
  transition-delay: 0.5s;
}

.t-del6 {
  transition-delay: 0.6s;
}

.t-del7 {
  transition-delay: 0.7s;
}

.t-del8 {
  transition-delay: 0.8s;
}

.t-del9 {
  transition-delay: 0.9s;
}

.t-del10 {
  transition-delay: 1s;
}

@keyframes fadeInUpabout {
  from {
    opacity: 0;
    transform: translate3d(0%, 80px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1024px) {
  @keyframes fadeInUpabout {
    from {
      opacity: 0;
      transform: translate3d(0%, 30px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.fadeInUpabout {
  animation-name: fadeInUpabout;
}

.fn1 {
    transition: all 0.5s;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
@keyframes fn1 {
  0% {
    opacity: 1;
    -webkit-transform: translateX(5rem);
    transform: translateX(5rem);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes fn3 {
  0% {
    opacity: 0;
    -webkit-transform: matrix(1, -0.1, 0, 1, 0, -20);
    transform: matrix(1, -0.1, 0, 1, 0, -20);
  }

  100% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

.fn3 {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: fn3 1.2s cubic-bezier(0.49, 0.54, 0.16, 1);
  animation: fn3 1.2s cubic-bezier(0.49, 0.54, 0.16, 1);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



.scrFx6 {
    animation-play-state: paused;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: calc(var(--go)* -1s);
    animation-timing-function: linear;
}


@keyframes sclimg {
  0% {
    transform: translate(50%);
    

  }

  20% {
    transform: translate(50%);
    

  }


  100% {
    transform: translate(0);
    
  }
}