/* mpgs.css */  

html{
    margin: 0;  
    padding: 0;  
    width: 100%;   
}
.wai{
    margin: 0;  
    padding: 0;  
    background-color: none;
    /*border: 2px solid rgb(243, 9, 9);  */
    display: flex; /* 启用flex布局 */  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
    height: 100vh; /* 假设你想要在视口高度内垂直居中，可以根据需要调整 */  
    /* 你可能需要为flex容器添加一些额外的样式，如背景色等 */  

}





.carousel {  
    background-color: rgb(2, 243, 235);
    border: 2px solid rgb(217, 245, 7);  
    position: relative; /* 允许内部元素使用绝对定位 */  
    max-width: 900px; /* 轮播图的最大宽度 */  
    margin: auto; /* 水平居中 */  
    overflow: hidden; /* 隐藏超出容器宽度的内容 */  
    /* 如果需要，可以添加一些内边距或边框样式 */  
}  

/* 你可以添加响应式布局的‘媒体查询’来针对移动端进行样式调整 */  
@media (max-width: 768px) {  
    /* 对于小屏幕设备，你可以调整.carousel的样式或.flex-container的padding等 */  
    .wai, .carousel, .carousel-images {  
        margin: 0;  
        padding: 0;  
        width: 100%;  
    } 
}






.carousel-images {  
    /* ... 保持原有的Flexbox样式，用于水平排列图片 ... */  
    display: flex;  
    /* ... 可能还需要其他样式，如过渡效果等 ... */  
}  

.carousel-video,  
.carousel-image {  
    /* ... 图片的样式保持不变 ... */ 
    margin: 0;  
    padding: 0;
    height: auto; /* 保持宽高比 */  
    width: 100%;  
    display: none;  /* 默认隐藏所有图片和视频 */
    flex-shrink: 0;  
}  
  

  
.carousel-image.active {  
    display: block; /* 激活时显示 */  
}  


/* （2）透明按钮样式 */  
.carousel-button {  
    
    background-position: center center; /* 将图片居中显示 */ 
    background-size: cover; /* 或根据需要设置其他值，如 contain */ 
    position: absolute;  
    top: 50%;                           /* 按钮顶部对齐中心线*/
    transform: translateY(-50%);        /* 按钮对齐中心线 */
    cursor: pointer;                    /*悬停在元素上时的光标样式为手掌形*/
    background-color: rgba(0, 0, 0, 0);  /*rgba是颜色表示，红色0、绿色0、蓝色0,就是没有颜色，0.2是透明度*/
    color: white;                   /*按钮颜色*/
    border: none;                   /*边框线无*/
    padding: 10px 20px;          /*上下内边距10px，左右内边距20px  */
    z-index: 10;                 /* 置顶顺序，数值大的在最上面   */
}  
  
.prev {  
    background-image: url('1.png');
    left: 10px;  
}  
  
.next {  
    background-image: url('2.png');
    right: 10px;  
}  
  
.pages {  
    /* 绝对定位，相对于最近的已定位（非static）祖先元素（这里是.carousel） */ 
    text-align: center; /* 或其他您想要的样式 */  
    margin-top: 20px; /* 与图片或视频保持一定距离 */
    position: absolute;  
    bottom: 0px; /* 距离容器底部10px */  
    left: 50%; /* 水平居中的第一步 */  
    transform: translateX(-50%); /* 水平居中的第二步，向左移动自身宽度的50% */  
    /* 其他样式，如字体大小、颜色等 */  
    font-size: 8px;  
    color: #333;  
    /* 如果需要，可以添加一些内边距或背景色来美化 */  
    padding: 1px 1px;  
    background-color: rgba(255, 255, 255, 0.4); /* 半透明白色背景，可根据需要调整 */  
}