/* 左侧 */
.contact-us {
  width: 442px;
  height: 524px;
  margin-right: 82px;
}

.contact-us .title-cn {
  font-size: 6rem;
  color: #000;
  margin-bottom: 8px;
}

.contact-us .title-en {
  font-size: 3.5rem;
  color: #666;
  margin-bottom: 30px;
}

.contact-us .title-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 58px;
  line-height: 26px;
}

.contact-us-bot {
  width: 255px;
  height: 67px;
  box-sizing: border-box;
  font-size: 24px;
  color: #fff;
}

.contact-bot-blue{
  background: #0071f5;
  padding: 18px 20px;
  cursor: pointer;
}

.contact-us-bot-img {
  width: 31px;
  height: 31px;
}

/* 右侧 */
.nine-grid {
  width: 524px;
  height: 524px;
  row-gap: 16px;
  flex-wrap: wrap;
}
@media screen and (min-width: 1440px) {
  .nine-grid {
    margin-left: 210px;
  }
  .mask {
    --aboutGap: 50% + 105px + 456px;
  }
}
@media screen and (max-width: 1440px) {
  .nine-grid {
    margin-left: 0;
  }
  .mask {
    --aboutGap: 50% + 456px;
  }
}
.box-grey{
  width: fit-content;
  height: fit-content;
  background-color: #e1e1e1;
}

.nine-grid .box {
  opacity: 0;
  width: 164px;
  height: 164px;
  background-color: #fff; 
  
}

.nine-grid .one-1 {
  /* transition: all 1s; */
  background-color: #0071F5;
  padding: 16px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
}

.nine-grid .one-2>img {
  width: 62px;
  height: 73px;
}

.nine-grid .two-1 {
  width: 344px;
  height: 164px;
}

.nine-grid .two-2 {
  color: #fff;
  background-color: #0D35C9;
  font-size: 24px;
  color: #fff;
  padding: 16px;
  box-sizing: border-box;
}

.nine-grid .three-2 {
  color: #fff;
  background-color: #4FCCF5;
}

.nine-grid .three-1>img {
  width: 88px;
  height: 58px;
}

.nine-grid .three-3>img {
  width: 75px;
  height: 36px;
}

/* 方块 */
#about .mask {
  position: absolute;
  transform: translate(-50%, -50%);
}
#about .mask {
  animation: showAboutMask 1s linear both;
}
#about.to-small .mask {
  animation: hideAboutMask 1s linear both;
}

/* 方块中的 logo */
#about .mask img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#about .mask img {
  animation: showAboutLogo 1s linear both;
}
#about.to-small .mask img {
  animation: hideAboutLogo 1s linear both;
}

/* 动画：方块 */
@keyframes hideAboutMask {
  0% {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
  }
  /* 50% {
    top: 50%;
    left: 50%;
    width: 164px;
    height: 164px;
    background-color: rgba(255, 255, 255, 1);
  } */
  100% {
    top: calc(50% + 176px);
    left: calc(var(--aboutGap));
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes showAboutMask {
  100% {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
  }
  /* 50% {
    top: 50%;
    left: 50%;
    width: 164px;
    height: 164px;
    background-color: rgba(255, 255, 255, 1);
  } */
  0% {
    top: calc(50% + 176px);
    left: calc(var(--aboutGap));
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 动画：方块中的 logo */
@keyframes hideAboutLogo {
  0% {
    width: 425px;
    height: 205px;
  }
  /* 50% {
    width: 75px;
    height: 36px;
  } */
  100% {
    width: 0;
    height: 0;
  }
}

@keyframes showAboutLogo {
  100% {
    width: 425px;
    height: 205px;
  }
  /* 50% {
    width: 75px;
    height: 36px;
  } */
  0% {
    width: 0;
    height: 0;
  }
}

.step-1{
  transition: all 0.5s 1.5s;
  opacity: 0;
}
.step-1.show{
  transition: all 0.5s 0s;
  opacity: 1;
}

.step-2{
  transition: all 0.5s 1s;
  opacity: 0;
}
.step-2.show{
  transition: all 0.5s 0.5s;
  opacity: 1;
}

.step-3{
  transition: all 0.5s 0.5s;
  opacity: 0;
}
.step-3.show{
  transition: all 0.5s 1s;
  opacity: 1;
}
.step-4{
  transition: all 0.5s 0s;
  opacity: 0;
}
.step-4.show{
  transition: all 0.5s 1.5s;
  opacity: 1;
}
.about-span-mask-span{
  display: flex;
  /* transform: translateY(105%); */
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.52, 0.01, 0, 1) 0s;
}

.about-span-mask{
  overflow: hidden;
}

.span-step-1{
  transform: translateY(105%);
  transition-delay: 1.5s;
}

.span-step-1.show{
  transform: translateY(0);
  transition-delay: 0s;
}
.span-step-2{
  transform: translateY(105%);
  transition-delay: 1s;
}
.span-step-2.show{
  transform: translateY(0);
  transition-delay: 0.5s;
}
.span-step-3{
  transform: translateY(105%);
  transition-delay: 0.5s;
}
.span-step-3.show{
  transform: translateY(0);
  transition-delay: 1s;
}
.span-step-4{
  transform: translateY(105%);
  transition-delay: 0s;
}
.span-step-4.show{
  transform: translateY(0);
  transition-delay: 1.5s;
}