body {
    font-family: Arial, sans-serif;
}

.popup {
    display: none; /* 默认隐藏弹窗 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 半透明背景，遮住背景内容 */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保弹窗在其他内容之上 */
}

.popup-content {
    position: relative;
    width: 941px; /* 设置与图片宽度相同 */
    height: 500px; /* 设置与图片高度相同 */
    background-color: white;
    padding: 0; /* 移除内边距，以便图片能够完全显示 */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 确保内容不溢出 */
}

.popup-link {
    display: block; /* 使链接填充弹窗内容 */
    width: 100%; /* 链接宽度填充弹窗 */
    height: 100%; /* 链接高度填充弹窗 */
}

.popup-image {
    width: 100%; /* 图片宽度填充弹窗 */
    height: 100%; /* 图片高度填充弹窗 */
    object-fit: cover; /* 确保图片按比例填充弹窗 */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px; /* 增加字体大小 */
    width: 50px; /* 增加按钮宽度 */
    height: 50px; /* 增加按钮高度 */
    display: flex; /* 使用 flexbox 对齐 */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white; /* 修改关闭按钮的颜色为白色 */
    background: rgba(0, 0, 0, 0.5); /* 半透明背景色 */
    border-radius: 50%; /* 圆形按钮 */
    border: none; /* 移除边框 */
    text-align: center; /* 文本居中对齐 */
}

/* 手机端适配 */
@media (max-width: 768px) {
    .popup-content {
        width: 90%; /* 宽度调整为视口宽度的 90% */
        height: auto; /* 高度自适应内容 */
        max-width: 90%; /* 最大宽度设置为视口宽度的 90% */
    }

    .close-btn {
        font-size: 30px; /* 较小的字体大小 */
        width: 40px; /* 较小的按钮宽度 */
        height: 40px; /* 较小的按钮高度 */
        top: 5px; /* 按钮距离顶部的位置调整 */
        right: 5px; /* 按钮距离右侧的位置调整 */
    }
}