@charset "UTF-8";

@keyframes bear {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 0px 100%;
  }

  100% {
    background-position: 0 0;
  }
}
.longPng {
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      width: 20rem;
      height: 20rem;
      background-image: url([[${site.templates+'/indexImg/centerLogoGif.png'}]]);
      background-size:100% auto;
      animation: bear 3.5s steps(37) infinite;
    }
@keyframes centerFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
    z-index: 9;
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
    z-index: 9;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    z-index: 9;
  }
}

@keyframes leftTopScale {
  0% {
    opacity: 0;
    transform: scale(0.1);
    top: -1.875rem;
    left: -1.5625rem;
  }

  85% {
    opacity: 1;
    transform: scale(1.1);
    top: calc(-7.125rem * 1.1);
    left: calc(-23.625rem * 1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    top: -7.125rem;
    left: -23.625rem;
  }
}

@keyframes leftBottomScale {
  0% {
    opacity: 0;
    transform: scale(0.1);
    top: -2.1875rem;
    left: -6.5625rem;
  }

  85% {
    opacity: 1;
    transform: scale(1.1);
    top: calc(13.875rem * 1.1);
    left: calc(-21.875rem * 1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    top: 13.875rem;
    left: -21.875rem;
  }
}

@keyframes rightTopScale {
  0% {
    opacity: 0;
    transform: scale(0.1);
    top: -4.6875rem;
    left: 0rem;
  }

  85% {
    opacity: 1;
    transform: scale(1.1);
    top: calc(-7.25rem * 1.1);
    left: calc(17.5rem * 1.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    top: -7.25rem;
    left: 17.5rem;
  }
}

@keyframes rightBottomScale {
  0% {
    opacity: 0;
    transform: scale(0.1);
    top: -2.5rem;
    left: -2.1875rem;
  }

  85% {
    opacity: 1;
    transform: scale(1.1);
    top: calc(12.9375rem * 1.1);
    left: calc(15.6875rem * 1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    top: 12.9375rem;
    left: 15.6875rem;
  }
}

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

  100% {
    opacity: 1;
  }

}

.centerFade {
  position: relative;
  z-index: 9;
  animation: centerFade 2s ease-in-out;
  animation-fill-mode: forwards;
}

.titleFade {
  animation: titleFades 2s ease-in-out 1s;
  animation-fill-mode: forwards;
}

.leftTopAnimate {
  transform-origin: center center;
  animation: leftTopScale 2s ease-in-out 0.8s;
  animation-fill-mode: forwards;
}

.leftBottomAnimate {
  transform-origin: center center;
  animation: leftBottomScale 2s ease-in-out 0.6s;
  animation-fill-mode: forwards;
}

.rightTopAnimate {
  transform-origin: center center;
  animation: rightTopScale 2s ease-in-out 0.2s;
  animation-fill-mode: forwards;
}

.rightBottomScale {
  transform-origin: center center;
  animation: rightBottomScale 2s ease-in-out 0.4s;
  animation-fill-mode: forwards;
}

@keyframes scaleAnimation {

  /* 初始缩放为原来的0.1 */
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  65% {
    transform: scale(1.1);
  }

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

@keyframes shakeLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0.4375rem);
    /* 这里可以调整左右晃动的距离 */
  }
}

@keyframes shakeRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-0.4375rem);
    /* 这里可以调整左右晃动的距离 */
  }
}

@keyframes rotatePointer {
  0% {
    transform: rotateZ(-120deg);
  }

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

.scale .jt-left-top {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards
}

.scale .jt-left-top .animateContainer {
  animation: shakeRight 1.5s infinite alternate 2.1s;
}

.scale .jt-left-bottom {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards;
}

.scale .jt-left-bottom .animateContainer {
  animation: shakeRight 1.5s infinite alternate 2.1s;
}
.scale .jt-right-top {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards;
}
.scale .jt-right-top .animateContainer {
  animation: shakeLeft 1.5s infinite alternate 2.1s;
}
.scale .jt-right-bottom {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards;
}
.scale .jt-right-bottom .animateContainer {
  animation: shakeLeft 1.5s infinite alternate 2.1s;
}
.scale .jy-centerImg {
  opacity: 1 !important;
  animation: scaleAnimation 1.5s ease-in-out;
}
.scale .JY-leftImg {
  animation: scaleAnimation 1.5s ease-in-out 0.3s forwards, shakeLeft 1.5s infinite alternate 2.1s;
}

.scale .JY-rightImg {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards, shakeRight 1.5s infinite alternate 2.1s;
}

.scale .rotatePointer {
  animation: rotatePointer 1s ease-in-out 2s;
  animation-fill-mode: forwards;
}

@keyframes removeMask {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
    display: none;
  }
}

.scale .ja-centerImg {
  opacity: 1 !important;
  animation: scaleAnimation 1.5s ease-in-out;
}

.scale .JA-leftImg {
  animation: scaleAnimation 1.5s ease-in-out 0.3s forwards, shakeLeft 1.5s infinite alternate 2.4s;
}

.scale .JA-rightTopImg {
  animation: scaleAnimation 1.5s ease-in-out 0.6s forwards, shakeRight 1.5s infinite alternate 2.4s;
}

.scale .JA-rightBottomImg {
  animation: scaleAnimation 1.5s ease-in-out 0.9s forwards, shakeRight 1.5s infinite alternate 2.4s;
}

.scale .mask {
  transform-origin: right center;
  animation: removeMask 3.5s ease-in-out 0.9s forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes contractUp {
  from {
    height: 22.85rem;
    margin-top: 2rem;
  }

  to {
    height: 0rem;
    margin-top: 0;
  }
}

@keyframes contractDown {
  from {
    height: 0rem;
    margin-top: 0;
  }

  to {
    height: 22.85rem;
    margin-top: 2rem;
  }
}

.contract {
  animation: fade-in 0.5s ease-in-out forwards, contractDown 0.5s ease-in-out forwards;
}

.contractClose {
  animation: fade-out 0.5s ease-in-out forwards, contractUp 0.5s ease-in-out forwards;
}

@keyframes disApearLeftImg {
  0% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes scaleImg-jt {
  0% {
    height: 9.875rem;
  }

  100% {
    height: 6.25rem;
  }
}

@keyframes removeDiv {
  0% {
    top: 50%;
    left: 50%;
  }

  100% {
    top: 5rem;
    left: 3rem;
  }
}

.function-card-item-Jt:hover .function-card-iconContaienr {
  animation: removeDiv 0.5s ease-in-out forwards;
}

.function-card-item-Jt:hover .function-card-iconContaienr p {
  opacity: 0;
}

.function-card-item-Jt:hover {
  background: url("../JT-Child/functionItemBackground.png") no-repeat center center;
  background-size: 100% 100%;
}

.function-card-item-Jt:hover .svg-image {
  animation: scaleImg-jt 0.8s ease-in-out forwards;
}

.function-card-item-Jt:hover .function-card-itemMes {
  animation: fade-in 0.5s ease-in-out forwards;
}

@keyframes scaleImg-ja {
  0% {
    height: 9.875rem;
  }

  100% {
    height: 6.25rem;
    top: 5.5rem;
    left: 4rem;
  }
}

.function-card-item-Ja:hover .function-card-iconContaienr p {
  animation: fade-out 0s ease-in-out forwards;
}

.function-card-item-Ja:hover .function-card-iconContaienr {
  animation: scaleImg-ja 0.8s ease-in-out forwards;
}

.function-card-item-Ja:hover {
  background: url("../JA-Child/functionItemBackground.png") no-repeat center center;
  background-size: 100% 100%;
}

.function-card-item-Ja:hover .function-card-itemMes {
  animation: fade-in 0.5s 0.1s ease-in-out forwards;
}

@keyframes scaleImg-jy {
  0% {
    height: 9.875rem;
  }

  100% {
    height: 6.375rem;
    top: 11rem;
    left: 10.5rem;
  }
}

@keyframes scaleImg-jy-p {
  0% {
    bottom: 3rem;
    opacity: 1;
    padding-left: 0;
  }

  100% {
    bottom: 8rem;
    opacity: 0;
  }
}

@keyframes inlineP {
  0% {
    left: 50%;
    transform: translateX(-50%);
  }

  100% {
    left: 6%;
    transform: translateX(0);
  }
}

.function-card-item-Jy:hover .function-card-iconContaienr span {
  animation: scaleImg-jy-p 0.5s ease-in-out forwards;
}

.function-card-item-Jy:hover .function-card-iconContaienr .inlineP {
  animation: inlineP 0.5s ease-in-out forwards;
}

.function-card-item-Jy:hover {
  background: url("../JY-Child/functionItemBackground.png") no-repeat center center;
  background-size: 100% 100%;
}

.function-card-item-Jy:hover .svg-image {
  animation: scaleImg-jy 0.5s ease-in-out forwards;
}

.function-card-item-Jy:hover .function-card-itemMes {
  animation: fade-in 0.5s ease-in-out forwards;
}

@keyframes suspendedWidthUp {
  0% {
    left: 0.85rem;
  }

  100% {
    left: 1.7rem;
    margin-top: 1rem;
  }
}

@keyframes suspendedWidthDown {
  0% {
    left: 1.7rem;
    margin-top: 1rem;
  }

  100% {
    left: 0.85rem;
    margin-top: 0;
  }
}

.suspendedWidthUp {
  animation: suspendedWidthUp 0.3s 0.5s ease-in-out forwards;
}

.suspendedWidthDown {
  animation: suspendedWidthDown 0.3s ease-in-out forwards;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.transformTitleOne {
  animation: slide-up 1s ease-in-out forwards;
}