* {
    box-sizing: border-box;
  }
   
  .carousel-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 15px;
  }
 
  .carousel-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;/* 把全部图片透明 */
    transition: opacity 1.5s ease-in-out;
    left: 0;
    right: 0;
  }
 
  .carousel-slide img.active {
    opacity: 1; /* 让其显示当前活动的图片，让具有active类名的第一张图片不透明度为一 */
  }
 
  .dots-container {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
  }
 
  .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #ddd;
    border-radius: 50%;
    transition: background-color 0.6s ease;
  }
 
  .dot.active {
    background-color: Blue;
  }
 
  /* 添加：左右按钮样式 */
  .prev-btn,
  .next-btn {
    position: absolute;
    bottom: 50%; /* 将底部位置设置为50%，以使其垂直居中 */
    transform: translateY(50%); /* 使用translateY(-50%)来调整垂直位置，使其完全居中 */
    display: flex;
    justify-content: center;
    align-items: center; /* 添加这个属性以确保按钮内部的内容也垂直居中 */
    width: 30px;
    height: 40px;
    opacity: 0.6;
    font-size: 20px;
    border: none;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
  }

  .prev-btn {
    left: 0;
    border-top-right-radius: 10px; /* 右上角圆角 */
    border-bottom-right-radius: 10px; /* 右下角圆角 */
  }

  .next-btn {
    right: 0;
    border-top-left-radius: 10px; /* 左上角圆角 */
    border-bottom-left-radius: 10px; /* 左下角圆角 */
  }
  
    /* 添加：左右按钮内的箭头动画 */
  @keyframes arrowAnimationLeft {
    0%, 100% {transform: translateX(0);}
    50% {transform: translateX(-5px);}
  }
  @keyframes arrowAnimationRight {
    0%, 100% {transform: translateX(0);}
    50% {transform: translateX(5px);}
  }
  .prev-btn::before {
    content: '〈';
    animation: arrowAnimationLeft 1s infinite;
  }
  .next-btn::before {
    content: '〉';
    animation: arrowAnimationRight 1s infinite;
  }
  
  /* 移动端轮播部分样式 */
  @media only screen and (max-width: 768px) {
    .carousel-container {
        height: 220px;
    }
    .carousel-slide img {
        height: 220px;
    }
  }