.flower-spirit {
  position: relative;
  height: 1231px;
}

.flower-spirit .flower-list li:first-child {
  position: absolute;
  left: 10px;
  top: 200px;
}

.flower-spirit .flower-list li:nth-child(2) {
  position: absolute;
  left: 247px;
  top: 200px;
}

.flower-spirit .flower-list li:nth-child(3) {
  position: absolute;
  left: 485px;
  top: 200px;
}

.flower-spirit .flower-list li:nth-child(4) {
  position: absolute;
  left: 10px;
  top: 520px;
}

.flower-spirit .flower-list li:nth-child(5) {
  position: absolute;
  left: 247px;
  top: 520px;
}

.flower-spirit .flower-list li:nth-child(6) {
  position: absolute;
  left: 485px;
  top: 520px;
}

.flower-spirit .flower-list li:nth-child(7) {
  position: absolute;
  left: 247px;
  top: 840px;
}

.flower-spirit .card {
  perspective: 1000px; /* 设置透视距离 */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flower-spirit .card-one .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-1.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-one .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-1.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-two .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-2.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-two .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-2.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-three .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-3.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-three .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-3.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-four .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-4.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-four .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-4.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-five .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-5.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-five .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-5.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-six .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-6.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-six .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-6.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.flower-spirit .card-seven .card-back {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-back-7.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.flower-spirit .card-seven .card-front {
  position: absolute;
  width: 220px;
  height: 307px;
  background: url(../image/section5/card-front-7.png) no-repeat;
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  z-index: 2;
  transition: transform 0.6s ease-in-out; /* 设置过渡效果 */
}

.card.is-flipped .card-front {
  transform: rotateY(0deg); /* 点击后翻转正面 */
}

.card.is-flipped .card-back {
  transform: rotateY(180deg); /* 点击后翻转背面 */
}

.flower-spirit .butterfly-list li:first-child {
  position: absolute;
  left: 75px;
  top: 1050px;
  background: url(../image/section5/butterfly-1.png) no-repeat;
  background-size: 100%;
  width: 114px;
  height: 119px;
  animation: butterfly-float 3.5s ease-in-out infinite;
}

.flower-spirit .butterfly-list li:nth-child(2) {
  position: absolute;
  right: 50px;
  top: -15px;
  background: url(../image/section5/butterfly-2.png) no-repeat;
  background-size: 100%;
  width: 95px;
  height: 91px;
  animation: butterfly-float 3s ease-in-out infinite;
}

.flower-spirit .butterfly-list li:nth-child(3) {
  position: absolute;
  right: 85px;
  top: 890px;
  background: url(../image/section5/butterfly-3.png) no-repeat;
  background-size: 100%;
  width: 136px;
  height: 159px;
  animation: butterfly-float 5s ease-in-out infinite;
}

@keyframes butterfly-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}