/* 弹出图片容器样式 */
.image-modal
{
    display: none;/* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}/* 弹窗容器 */
.container
{
    display: flex;
    position: relative;
    max-width: 100%;/* 限制最大宽度 */
    max-height: 100%;/* 限制最大高度 */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}/* 图片轮播容器 */
#swiper, #swiper2, #swiper3, #swiper4
{
    position: relative;
    display: flex;
    box-sizing: border-box;
    list-style: none;
    align-items: center;
    overflow: hidden;
}/* 每张图片样式 */
.item
{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;/* 使用父容器的高度 */
    flex-shrink: 0;
    background-color: #eee;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    transition: transform .2s ease-out;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0);
    overflow: hidden;
    display: flex;
}/* 上一张、下一张按钮样式 */
#prev-btn, #next-btn, #prev-btn2, #next-btn2, #prev-btn3, #next-btn3, #prev-btn4, #next-btn4
{
    cursor: pointer;
    position: absolute;/* 确保可以自由定位 */
    top: 50%;/* 垂直居中 */
    transform: translateY(-50%);/* 调整居中对齐 */
    z-index: 1100;/* 确保不被图片或其他元素覆盖 */
    font-size: 40px;
    color: #fff;
    background: rgba(0,0,0,.5);/* 半透明背景 */
    padding: 15px;
    border-radius: 50%;/* 圆形按钮 */
    border: none;
}
#prev-btn, #prev-btn2, #prev-btn3, #prev-btn4
{
    left: 20px;/* 距离左侧一定距离 */
}
#next-btn, #next-btn2, #next-btn3, #next-btn4
{
    right: 20px;/* 距离右侧一定距离 */
}/* 鼠标悬停样式 */
#prev-btn:hover, #next-btn:hover, #prev-btn2:hover, #next-btn2:hover, #prev-btn3:hover, #next-btn3:hover, #prev-btn4:hover, #next-btn4:hover
{
    background: rgba(255,255,255,.7);
    color: #000;
}/* 关闭按钮 */
.close-btn
{
    position: absolute;/* 确保按钮相对于父容器定位 */
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,.5);/* 背景色便于可视化 */
    padding: 10px;
    border-radius: 50%;
    z-index: 1100;/* 提高层级，确保在最顶层 */
    transition: color .3s,background .3s;
}
.close-btn:hover
{
    color: #f00;
    background: rgba(255,255,255,.7);
}/* 防止多个弹窗重叠，确保各自独立显示 */
#imageModal, #imageModal2, #imageModa3, #imageModal4
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);/* 半透明背景 */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}