body{
    background: url(../image/bj.jpg) #f5f5f5 top center no-repeat;
    height: 100%;  
    margin: 0;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-direction: column; /* 改为列方向排列 */  
}
.image-container {
    padding-top: 40px;
    width: 80%; /* 举例，容器宽度为视窗宽度的80% */  
    margin: 0 auto; /* 上下边距为0，左右自动居中 */  
    display: flex;  
    flex-direction: column; /* 改为列方向排列 */  
}  
.image-container img {  
    display: block; /* 防止图片下方出现间隙 */  
    margin: 10px auto; /* 上下边距为10px，左右自动居中 */  
    max-width: 100%; /* 确保图片宽度不超过容器宽度 */  
    height: auto; /* 保持图片的原始宽高比 */  
} 
/* 弹出图片的容器样式 */  
.popup {  
    display: none; /* 默认隐藏 */  
    position: fixed; /* 固定定位 */  
    z-index: 1; /* 置于顶层 */  
    left: 0;  
    top: 0;  
    width: 100%; /* 宽度100% */  
    height: 100%; /* 高度100% */  
    overflow: auto; /* 如果需要滚动条 */  
    background-color: rgb(0,0,0); /* 背景色 */  
    background-color: rgba(0,0,0,0.9); /* 黑色，但带有透明度 */  
}  
  
.popup img {  
    margin: auto;  
    display: block;  
    width: 80%;  
    max-width: 700px;  
}  
  
/* 弹出图片上的关闭按钮样式 */  
.close {  
    position: absolute;  
    top: 15px;  
    right: 35px;  
    color: #f1f1f1;  
    font-size: 40px;  
    font-weight: bold;  
    transition: 0.3s;  
}  
  
.close:hover,  
.close:focus {  
    color: #bbb;  
    text-decoration: none;  
    cursor: pointer;  
}

.clickable-area {  
    color: white;  
    text-align: center;  
    cursor: pointer;  
    border-radius: 5px;  
}