.imagetext {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 50px;           /* 定义容器高度，根据需要调整 */
}
 
 .colored-text {
     color: black; /* 设置文本颜色为黑色 */
     font-family: '黑体', sans-serif;
 }

 .carousel {
     display: flex;
     overflow: hidden;
     width: 100%;
     position: relative;
 }
 .images {
     display: flex;
     animation: scroll 20s linear infinite;
 }
 .images img {
     width: 240px; /* 每个图片宽度 */
     height: auto;
 }
 @keyframes scroll {
     0% { transform: translateX(0); }
     100% { transform: translateX(-100%); }
 }


/* 可点击放大的图片 */
.zoomable {
    max-width: 240px;
    width: 240px; /* 每个图片宽度 */
    height: auto;
    cursor: pointer; /* 鼠标悬浮时显示指针 */
}

/* 模态框样式 */
.modal {
    display: none; /* 默认隐藏模态框 */
    position: fixed; /* 固定定位，覆盖整个页面 */
    z-index: 1; /* 确保模态框显示在最上层 */
    padding-top: 100px; /* 模态框内内容距离顶部的距离 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 当内容溢出时显示滚动条 */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
}

/* 模态框内放大的图片 */
.modal-content {
    margin: auto; /* 居中对齐 */
    display: block; /* 块级显示 */
    width: 80%; /* 图片的宽度 */
    max-width: 700px; /* 最大宽度限制 */
}

/* 图片的缩放动画 */
.modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* 缩放动画 */
@keyframes zoom {
    from {
        transform: scale(0); /* 初始缩放为0 */
    }
    to {
        transform: scale(1); /* 缩放到1倍 */
    }
}

/* 关闭按钮样式 */
.close {
    position: absolute; /* 绝对定位 */
    top: 15px;
    right: 35px;
    color: #f1f1f1; /* 按钮颜色 */
    font-size: 40px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    cursor: pointer; /* 鼠标悬浮时显示指针 */
}

/* 鼠标悬浮时关闭按钮的样式 */
.close:hover {
    color: #bbb; /* 更改悬浮时的颜色 */
}