body {
   margin: 0;
   padding: 0;
 }

 .slideshow-container {
   position: relative;
   width: 100%;

   margin: auto;
   overflow: hidden;
 }

 .carousel-wrapper {
   display: flex;
   transition: transform 0.5s ease-in-out;
   width: 100%;

 }

 .slideshow-container .slide:first-child {
   padding-top: 150px;
 }

 .slideshow-container .slide:nth-child(3) {
   padding-top: 40px;
 }

 .slideshow-container .slide:nth-child(5) {
   padding-top: 150px;
 }

 .slide {
   min-width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   /* align-items: center; */
 }

 .slide img {
   width: 100%;

 }


 .prev,
 .next {
   position: fixed;
   /* position: absolute; */
   top: 50%;
   transform: translateY(-50%);
   font-size: 30px;
   font-weight: bold;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 16px 20px;
   cursor: pointer;
   border-radius: 5px;
   transition: all 0.3s ease;
   z-index: 10;
   border: none;
   outline: none;
 }

 .next {
   right: 20px;
 }

 .prev {
   left: 20px;
 }

 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
   transform: translateY(-50%) scale(1.1);
 }

 .prev:active,
 .next:active {
   transform: translateY(-50%) scale(0.95);
 }

 .dots {
   text-align: center;
   padding: 20px 0;
 }

 .dot {
   display: inline-block;
   width: 15px;
   height: 15px;
   background-color: #bbb;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
   margin: 0 5px;
 }

 .active,
 .dot:hover {
   background-color: #717171;
   transform: scale(1.2);
 }

 /* 响应式设计 */
 @media (max-width: 768px) {

   .prev,
   .next {
     font-size: 20px;
     padding: 12px 15px;
   }

   .dot {
     width: 12px;
     height: 12px;
   }
 }