/*鼠标悬停动画 */

/* 当鼠标悬停在图标信息框上时触发动画 */
/* 详细图标摇晃动画 */
.icon-info-box .rounded-2xl:hover {
  background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
  -webkit-animation: info-shake-bounce .5s alternate !important;
  -moz-animation: info-shake-bounce .5s alternate !important;
  -o-animation: info-shake-bounce .5s alternate !important;
  animation: info-shake-bounce .5s alternate !important;
}

/* 小图标摇晃动画 */
.icon-small-box .rounded-2xl:hover {
  background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
  -webkit-animation: small-shake-bounce .5s alternate !important;
  -moz-animation: small-shake-bounce .5s alternate !important;
  -o-animation: small-shake-bounce .5s alternate !important;
  animation: small-shake-bounce .5s alternate !important;
}

/* 定义摇详细图标晃弹跳动画的关键帧 */
@keyframes info-shake-bounce {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(2.5deg);
  }

  85% {
    transform: rotate(-2.5deg);
  }
}

/* 定义摇小图标晃弹跳动画的关键帧 */
@keyframes small-shake-bounce {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(5deg);
  }

  85% {
    transform: rotate(5deg);
  }
}

/* 自定义footer */
.footer {
  color: #ffffff;
  left: 50%;
  width: 100%;
  height: auto;
  min-height: 50px;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 1.8;
}
  display: flex;  /* 使用弹性盒子布局 */
  justify-content: center;  /* 在主轴上居中对齐 */
  align-items: center;  /* 在交叉轴上居中对齐 */
  flex-direction: column;  /* 设置主轴为垂直方向，使子元素纵向排列 */
  line-height: 1.8;  /* 行高为1.8倍 */
  pointer-events: none;  /* 不接受鼠标事件 */
}