/**
 * The global.css defines the style of the entire project,
 * ice.js will globally import this file by default.
 */
:root {
  --primary: #3178f6;
  --bg-primary: white;
}
@font-face {
  font-family: 'Poppins-tbj';
  src: url('https://pic-cdn-jp.tao-media.co/kf/Sf0060fc32d294ce5a49dc9014c04fe04G.ttf');
}
body {
  margin: 0;
  font-family: 'Poppins-tbj', 'Hiragino Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
}
p, h3 {
  padding: 0;
  margin: 0;
}
@keyframes funnyAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes funnyAppearMsite {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes appear2 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  50% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes appear3 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(-35px);
  }
}
@keyframes jumpUp {
  from {
    transform: translateY(300px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes jumpLeft {
  from {
    transform: translateX(300px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes expendLine {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.textFade .textFadeFlag {
    opacity: 0;
  }
.textFade .textFadeChild {
    display: inline-block;
    opacity: 0;
    animation: appear 1s forwards;
  }
.textFade.funnyText .textFadeChild {
      display: inline-block;
      opacity: 0;
      animation: funnyAppear 1s forwards;
    }
.textFade .textFadeChild:nth-child(1) {
    animation-delay: 0s;
  }
.textFade .textFadeChild:nth-child(2) {
    animation-delay: 0.1s;
  }
.textFade .textFadeChild:nth-child(3) {
    animation-delay: 0.2s;
  }
.textFade .textFadeChild:nth-child(4) {
    animation-delay: 0.3s;
  }
.textFade .textFadeChild:nth-child(5) {
    animation-delay: 0.4s;
  }
.textFade .textFadeChild:nth-child(6) {
    animation-delay: 0.5s;
  }
.textFade .textFadeChild:nth-child(7) {
    animation-delay: 0.6s;
  }
.textFade .textFadeChild:nth-child(8) {
    animation-delay: 0.7s;
  }

.textMsiteFade .textFadeFlag {
    opacity: 0;
  }

.textMsiteFade .textFadeChild {
    display: inline-block;
    opacity: 0;
    animation: appear 1s forwards;
  }

.textMsiteFade.funnyText .textFadeChild {
      display: inline-block;
      opacity: 0;
      animation: funnyAppearMsite 1s forwards;
    }


.firstStartWidthFlag {
  width: 16vw;
}
.startWidthLeftFlag {
  width: 0;
}
.startWidthRightFlag {
  width: 100vw;
}
.appear {
  animation: appear 0.5s forwards;
}
.appear2 {
  animation: appear2 0.5s forwards 1s;
}
.jumpUp {
  animation: jumpUp 1s forwards;
}
.jumpUpFlag {
  transform: translateY(300px);
  opacity: 0;
}
.jumpLeft {
  animation: jumpLeft 1s forwards;
}
.jumpLeftFlag {
  transform: translateX(300px);
  opacity: 0;
}
.expendLine {
  animation: expendLine 1s forwards;
}
@keyframes expandWidth {
  from {
    width: 0;
  }
  to {
    width: 30vw;
  }
}
@keyframes expandWidth2 {
  from {
    width: 10vw;
  }
  to {
    width: 46vw;
  }
}
@keyframes shrinkWidth {
  from {
    width: 100vw;
  }
  to {
    width: 70vw;
  }
}
.startWidth .startWidthLeft {
    animation: expandWidth 0.5s forwards;
  }
.startWidth .startWidthRight {
    animation: shrinkWidth 0.5s forwards;
  }
.startWidth .firstStartWidth {
    animation: expandWidth2 2s forwards;
  }
@keyframes scaleUp {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.dividerExpand {
  animation: scaleUp 1s forwards;
}
.titleMoveFlag {
  opacity: 0;
  transform: translateY(20px);
}
.titleMove {
  animation: funnyAppear 1s forwards;
}

@keyframes msiteAppear3 {
  0% {
    opacity: 0;
    transform: translateY(4.8vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* cover antd css */
.ant-modal-content {
  padding: 0 !important;
}
.ant-modal-header {
  padding: 16px 24px !important;
  border-bottom: 1px solid #E3E3DC !important;
}
.ant-modal-body {
  padding: 16px 24px !important;
}
.ant-modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #E3E3DC !important;
}