.show_s_ui {
    width: auto;
    height: 60vw !important;
    position: relative;
    overflow: hidden; /* 需要隐藏超出容器的部分 */
}

/* 基础样式部分，设置图片通用的样式 */
.show_s_ui > li {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 30; /* 默认 z-index，保持较高 */
    cursor: pointer;
    opacity: 0; /* 初始透明度为 0 */
    font-size: 40px;
    transition: transform 0.5s ease, opacity 0.5s ease; /* 添加平滑的动画效果 */
}

.left_btn, .right_btn {
    display: none;
}

/* 中间图片的样式，确保它处于顶层 */
.middel_shows {
    left: 35%;
    transform: translateX(-50%); /* 中心对齐 */
    opacity: 1;
    z-index: 50; /* 更高的 z-index 保证中间图片覆盖左右 */ 
}

/* 左边图片的样式，倾斜并缩小到 80% */
.left_shows {
    margin-top: 50%;
    left: 30%;
    opacity: 0.9;
    z-index: 20; /* 较低的 z-index 使其处于中间图片下方 */
    transform: translateX(-50%) rotate(-10deg) scale(0.9); /* 向左偏移，缩小并倾斜 */
}

/* 右边图片的样式，倾斜并缩小到 80% */
.right_shows {
    top: 100%;
    left: 70%;
    opacity: 0.9;
    z-index: 20; /* 较低的 z-index 使其处于中间图片下方 */
    transform: translateX(-50%) rotate(10deg) scale(0.9); /* 向右偏移，缩小并倾斜 */
}