/******************* 添加动画 *******************/
#bgm.play {
  animation: music 1.5s linear infinite;
}
.swiper-slide-active.page1 .company {
  animation: bounceInDown 1s 1.5s backwards;
}
.swiper-slide-active.page1 .bg_image .joinus {
  animation: in_fall 1.5s 1.5s ease-out backwards, in_float 3s 3s infinite alternate;
}
.swiper-slide-active.page1 .bg_image .load_circle {
  animation: load_circle 1.5s both;
}
.swiper-slide-active.page1 .bg_image .bg_around {
  animation: in_fall 1s 1.5s ease backwards, in_float 4s 2.5s ease-out infinite alternate;
}
.swiper-slide-active.page1 .bg_image .joinTeam {
  animation: in_fall 1.5s 1.5s ease backwards, in_float 3s 3s ease-out infinite alternate;
}
.swiper-slide-active.page1 .bg_box img:nth-child(1) {
  animation: in_fall 1.4s 1.5s ease-out backwards, in_float1 5s 2.9s linear infinite alternate;
}
.swiper-slide-active.page1 .bg_box img:nth-child(2) {
  animation: in_fall 1.4s 1.5s ease-out backwards, in_float2 6s 2.9s linear infinite alternate;
}
.swiper-slide-active.page1 .bg_box img:nth-child(3) {
  animation: in_fall 1.4s 1.5s ease-out backwards, in_float4 5s 2.9s linear infinite alternate;
}
.swiper-slide-active.page1 .bg_box img:nth-child(4) {
  animation: in_fall 1.4s 1.5s ease-out backwards, in_float2 6s 2.9s linear infinite alternate;
}
.swiper-slide-active.page1 .enter {
  animation: fadeInUp 1s 1s backwards;
}
.swiper-slide-active.page2 .company i,
.swiper-slide-active.page3 .company i,
.swiper-slide-active.page4 .company i,
.swiper-slide-active.page5 .company i,
.swiper-slide-active.page6 .company i {
  animation: fadeInRight 0.6s 1s backwards;
}
.swiper-slide-active.page2 .company p,
.swiper-slide-active.page3 .company p,
.swiper-slide-active.page4 .company p,
.swiper-slide-active.page5 .company p,
.swiper-slide-active.page6 .company p {
  animation: fadeInRight 0.6s 1s backwards;
}
.swiper-slide-active.page2 .company p.company_intro,
.swiper-slide-active.page3 .company p.company_intro,
.swiper-slide-active.page4 .company p.company_intro,
.swiper-slide-active.page5 .company p.company_intro,
.swiper-slide-active.page6 .company p.company_intro {
  animation: fadeInRight 0.7s 1s backwards;
}
.swiper-slide-active.page2 article,
.swiper-slide-active.page3 article,
.swiper-slide-active.page4 article,
.swiper-slide-active.page5 article,
.swiper-slide-active.page6 article {
  animation: fadeInRight 0.5s backwards;
}
.swiper-slide-active.page2 nav,
.swiper-slide-active.page3 nav,
.swiper-slide-active.page4 nav,
.swiper-slide-active.page5 nav,
.swiper-slide-active.page6 nav {
  animation: fadeInUp 0.8s 0.8s backwards;
}
.swiper-slide-active.page4 section,
.swiper-slide-active.page5 section {
  animation: clipPath 1.5s 0.5s backwards;
}
.swiper-slide-active.page2 .bg_box i:nth-child(1) {
  animation: fadeInRight 0.6s 0.6s backwards, Move4 6s 1.2s linear infinite alternate;
}
.swiper-slide-active.page2 .bg_box i:nth-child(2) {
  animation: fadeInRight 0.6s 0.6s backwards, Move1 8s 1.2s linear infinite alternate;
}
.swiper-slide-active.page2 .bg_box i:nth-child(3) {
  animation: fadeInRight 0.6s 0.6s backwards, Move8 14s 1.2s linear infinite alternate;
}
.swiper-slide-active.page3 .bg_box i:nth-child(1) {
  animation: fadeInRight 0.6s 0.6s backwards, Move6 15s 1.2s linear infinite alternate;
}
.swiper-slide-active.page3 .bg_box i:nth-child(2) {
  animation: fadeInRight 0.6s 0.6s backwards, show_bgfloat3 8s 1.2s linear infinite alternate;
}
.swiper-slide-active.page3 .bg_box i:nth-child(3) {
  animation: fadeInRight 0.6s 0.6s backwards, Move7 8s 1.2s linear infinite alternate;
}
.swiper-slide-active.page4 .bg_box i:nth-child(1) {
  animation: fadeInRight 0.6s 0.6s backwards, Move5 6s 1.1s linear infinite alternate;
}
.swiper-slide-active.page4 .bg_box i:nth-child(2) {
  animation: fadeInRight 0.6s 0.6s backwards, Move4 6s 1.1s linear infinite alternate;
}
.swiper-slide-active.page5 .bg_box i:nth-child(1) {
  animation: fadeInRight 0.6s 0.6s backwards, Move5 6s 1.1s linear infinite alternate;
}
.swiper-slide-active.page5 .bg_box i:nth-child(2) {
  animation: fadeInRight 0.6s 0.6s backwards, Move4 10s 1.1s linear infinite alternate;
}
.swiper-slide-active.page5 .bg_box i:nth-child(3) {
  animation: fadeInRight 0.6s 0.6s backwards, Move8 12s 1.1s linear infinite alternate;
}
.swiper-slide-active.page6 .bg_box i:nth-child(1) {
  animation: fadeInRight 0.6s 0.6s backwards, Move9 8s 1.1s linear infinite alternate;
}
.swiper-slide-active.page6 .bg_box i:nth-child(2) {
  animation: fadeInRight 0.6s 0.6s backwards, show_bgfloat2 6s 1.1s linear infinite alternate;
}
.swiper-slide-active.page6 .bg_box i:nth-child(3) {
  animation: fadeInRight 0.6s 0.6s backwards, Move1 6s 1.1s linear infinite alternate;
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes load_circle {
  0% {
    -webkit-transform: scale(0) translateY(0);
    transform: scale(0) translateY(0);
  }
  50% {
    -webkit-transform: scale(7) translateY(0);
    transform: scale(7) translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0) translateY(0);
    transform: scale(0) translateY(0);
    opacity: 1;
  }
}
@keyframes in_fall {
  0% {
    -webkit-transform: translateY(-25.7185rem);
    transform: translateY(-25.7185rem);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(1.4815rem);
    transform: translateY(1.4815rem);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem);
  }
  to {
    -webkit-transform: translateY(0.2rem);
    transform: translateY(0.2rem);
  }
}
@keyframes in_float {
  0% {
    -webkit-transform: translateY(0.2rem);
    transform: translateY(0.2rem);
  }
  to {
    -webkit-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem);
  }
}
@keyframes in_float1 {
  0% {
    -webkit-transform: translate3d(0, 0.2rem, 0);
    transform: translate3d(0, 0.2rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-0.3rem, -0.2rem, 0);
    transform: translate3d(-0.3rem, -0.2rem, 0);
  }
}
@keyframes in_float2 {
  0% {
    -webkit-transform: translate3d(0, 0.2rem, 0);
    transform: translate3d(0, 0.2rem, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0.5rem, 0);
    transform: translate3d(0, 0.5rem, 0);
  }
}
@keyframes in_float4 {
  0% {
    -webkit-transform: translate3d(0, 0.2rem, 0);
    transform: translate3d(0, 0.2rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-0.1rem, -0.15rem, 0);
    transform: translate3d(-0.1rem, -0.15rem, 0);
  }
}
@keyframes show_bgfloat2 {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    -webkit-transform: translate3d(0.3rem, 0.4rem, 0);
    transform: translate3d(0.3rem, 0.4rem, 0);
  }
}
@keyframes show_bgfloat3 {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    -webkit-transform: translate3d(-0.6rem, 0.6rem, 0);
    transform: translate3d(-0.6rem, 0.6rem, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(1000%, 0, 0);
    transform: translate3d(1000%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes clipPath {
  from {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}
@keyframes Move1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.2rem, 0);
    transform: translate3d(0, 0.2rem, 0);
  }
  to {
    -webkit-transform: translate3d(-0.1rem, -0.2rem, 0);
    transform: translate3d(-0.1rem, -0.2rem, 0);
  }
}
@keyframes Move4 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0.2rem, 0.2rem, 0);
    transform: translate3d(0.2rem, 0.2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0.4rem, 0.5rem, 0);
    transform: translate3d(0.4rem, 0.5rem, 0);
  }
}
@keyframes Move5 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(-0.2rem, -0.2rem, 0);
    transform: translate3d(-0.2rem, -0.2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Move6 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(-0.8rem, 1.2rem, 0);
    transform: translate3d(-0.8rem, 1.2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Move7 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(-0.4rem, 0.3rem, 0);
    transform: translate3d(-0.4rem, 0.3rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Move8 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(-0.8rem, -0.2rem, 0);
    transform: translate3d(-0.8rem, -0.2rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Move9 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0.5rem, 0.1rem, 0);
    transform: translate3d(0.5rem, 0.1rem, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes music {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}