/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 音乐播放器样式 */
.music-player {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(249, 242, 223, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.player-controls {
    display: flex;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    gap: 15px;
    box-sizing: border-box;
    flex-wrap: wrap; /* 允许换行以适应小屏幕 */
    justify-content: center; /* 居中对齐 */
}

.control-btn {
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.3s;
}

.control-btn:hover {
    background: #1a252f;
}

/* 播放按钮旋转动画 */
.rotate-animation {
    animation: rotateCircle 3s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.track-info {
    flex-grow: 1;
    min-width: 100px;
    font-size: 14px;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time-info {
    display: flex;
    align-items: center;
    gap: 0px;
    font-size: 12px;
    color: #7f8c8d;
    min-width: 80px;
    justify-content: flex-start;
    flex-shrink: 0; /* 防止时间信息被压缩 */
}

.time-separator {
    margin: 0 4px;
    color: #7f8c8d;
}

.progress-bar {
    flex-grow: 1;
    min-width: 150px;
    max-width: 400px;
}

/* 移动设备响应式设计 */
@media (max-width: 768px) {
    .player-controls {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 5px;
        width: 100%;
    }
    
    .control-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .track-info {
        min-width: 80px;
        font-size: 12px;
        text-align: center;
    }
    
    .time-info {
        font-size: 11px;
        min-width: 70px;
        justify-content: center;
    }
    
    .progress-bar {
        min-width: 100px;
        max-width: 200px;
        width: 40%;
    }
}

@media (max-width: 480px) {
    .player-controls {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        width: 100%;
    }
    
    .control-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .track-info {
        font-size: 11px;
        min-width: 70px;
    }
    
    .time-info {
        font-size: 10px;
        min-width: 60px;
    }
    
    .progress-bar {
        min-width: 80px;
        max-width: 150px;
        width: 50%;
    }
    
    .music-player {
        padding: 8px 10px;
    }
}

#audioPlayer {
    display: none;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f2df; /* 温暖的米黄色背景 */
    /* 创建更自然的草纸纹理效果 */
    background-image: 
        /* 创建噪声纹理 */
        radial-gradient(ellipse at 15% 25%, rgba(0, 0, 0, 0.02) 1.5%, transparent 2%),
        radial-gradient(ellipse at 85% 35%, rgba(0, 0, 0, 0.025) 1.8%, transparent 2.2%),
        radial-gradient(ellipse at 30% 65%, rgba(0, 0, 0, 0.022) 1.3%, transparent 1.8%),
        radial-gradient(ellipse at 70% 85%, rgba(0, 0, 0, 0.02) 1.6%, transparent 2.1%),
        radial-gradient(ellipse at 50% 15%, rgba(0, 0, 0, 0.015) 1.2%, transparent 1.7%);
    background-size: 300px 300px;
    padding-top: 70px; /* 为固定顶部播放器留出空间 */
    overflow-x: hidden; /* 防止水平滚动 */
}

.container {
    max-width: 100%; /* 限制最大宽度为100%以避免右侧溢出 */
    width: 100%; /* 使用100%宽度 */
    margin: 0 auto;
    padding: 20px;
    padding-top: 90px; /* 额外的顶部填充以避免内容被播放器遮挡 */
    box-sizing: border-box; /* 确保padding不增加总宽度 */
    overflow-x: hidden; /* 防止水平滚动 */
}

/* 通用相册节样式 */
.gallery-section {
    margin: 80px auto;
    padding: 20px 0;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 特定section的高度设置 - 高度为100px */
.gallery-section.specific-section {
    min-height: 10px; /* 改为最小高度以允许内容扩展 */
    height: auto; /* 自动调整高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible; /* 确保内容不会被裁剪 */
}

/* 特定section的高度设置 - 高度为1175px */
.gallery-section.specific-height {
    height: 1175px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin: 80px auto;
    overflow: visible; /* 确保内容不会被裁剪 */
}

/* 特定section的高度设置 - 高度为803px */
.gallery-section.specific-height-803 {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin: 80px auto;
    overflow: visible; /* 确保内容不会被裁剪 */
}

/* 特定section的高度设置 - 高度为780px */
.gallery-section.specific-height-800 {
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin: 80px auto;
    overflow: visible; /* 确保内容不会被裁剪 */
}

/* 特定section的自适应高度设置 */
.gallery-section.specific-height-550 {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin: 80px auto;
    overflow: visible; /* 确保内容不会被裁剪 */
    height: auto; /* 自动调整高度 */
    flex-direction: column; /* 确保内容垂直排列 */
}

/* 特定section的高度设置 - 高度为545px */
.gallery-section.specific-height-545 {
    height: 545px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin: 80px auto;
    overflow: visible; /* 确保内容不会被裁剪 */
}

/* 单张大图样式 - 无边框无阴影，适应纵向高分辨率图片 */
.single-image .image-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    overflow: visible; /* 确保没有隐藏任何部分 */
    max-width: 100%;
    width: 100%; /* 使用100%宽度 */
    height: auto; /* 让容器根据内容自适应 */
    display: flex; /* 使用flexbox居中 */
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 改为flex-start，让图片按实际高度排列 */
}

/* 特定section中特定尺寸的图片容器 - 用于1672*142像素的图片，适应100px高的容器 */
.specific-section .image-container.specific-size {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应图片 */
    min-height: 100px; /* 最小高度为100px */
    max-width: 1672px; /* 最大宽度为原始图片宽度 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* 确保容器本身居中 */
}

/* 特定section中特定尺寸的图片样式 - 用于1672*142像素的图片，适应100px高的容器 */
.specific-section .full-size-img.specific-img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应容器 */
    max-width: 1672px; /* 限制最大宽度为原始图片宽度 */
    max-height: 200px; /* 限制最大高度 */
    object-fit: contain; /* 确保图片完整显示 */
    margin: 0;
    display: block;
}

/* 针对特定section的响应式规则 */
@media (max-width: 768px) {
    .specific-section .image-container.specific-size {
        height: 70px; /* 在较小屏幕上减小高度 */
        width: 90vw; /* 宽度使用视口单位 */
    }
    
    .specific-section .full-size-img.specific-img {
        height: 70px; /* 在较小屏幕上减小高度 */
        max-width: 100%;
        width: auto;
    }
}

@media (max-width: 450px) {
    .specific-section .image-container.specific-size {
        height: 50px; /* 在很小的屏幕上进一步减小高度 */
        width: 95vw; /* 更宽的视口比例 */
    }
    
    .specific-section .full-size-img.specific-img {
        height: 50px; /* 在很小的屏幕上进一步减小高度 */
        max-width: 100%;
        width: auto;
    }
}

/* 一般情况下的特定尺寸图片容器 - 用于1672*142像素的图片 */
.single-image .image-container.specific-size {
    width: 100%;
    max-width: 1672px; /* 限制最大宽度为原始图片宽度 */
    height: auto; /* 自动调整高度以适应图片 */
    min-height: 36px; /* 最小高度以确保足够空间 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* 确保容器本身居中 */
}

/* 一般情况下的特定尺寸图片样式 - 用于1672*142像素的图片 */
.full-size-img.specific-img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应容器 */
    max-width: 1672px; /* 限制最大宽度为原始图片宽度 */
    max-height: 400px; /* 限制最大高度 */
    object-fit: contain;
    margin: 0;
    display: block;
}

.single-image .image-container:hover {
    transform: none !important; /* 强制移除悬停效果 */
}

.single-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.image-container {
    position: relative;
    overflow: visible; /* 改为visible，允许内容完全显示 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 100%;
}

/* 圆形容器样式 - 无边框无阴影 */
.image-container.circle {
    border-radius: 50%;
    box-shadow: none;
    aspect-ratio: 1/1; /* 1:1 宽高比适用于圆形图片 */
    overflow: visible; /* 确保圆形裁剪正确 */
}

/* 矩形容器样式 */
.image-container.rectangle {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* 移除固定宽高比，让容器适应图片实际尺寸 */
}

.image-container img {
    width: 100%;
    height: auto; /* 高度自适应，保持比例 */
    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
    display: block;
}

/* 特别针对圆形图片的样式 */
.image-container.circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 对圆形图片使用cover，确保填满圆形区域 */
    border-radius: 50%; /* 确保图片本身也是圆形 */
}

/* 专门为单张大图设置的图片样式 */
.single-image .image-container img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    max-width: 100%; /* 最大不超过容器 */
    height: auto; /* 高度自适应 */
    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
    max-height: 80vh; /* 限制最大高度为视口的80% */
    margin: 0 auto; /* 水平居中 */
    display: block;
}

.full-size-img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto;
    max-width: 100%;
    max-height: none; /* 移除最大高度限制，允许图片完全显示 */
    display: block;
    margin: 0 auto; /* 水平居中 */
    object-fit: contain; /* 确保图片完整显示，不被裁剪 */
}

.caption {
    margin-top: 15px;
    font-size: 16px;
    color: #666;
    font-style: italic;
}

/* 内容包装器 */
.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.text-content {
    flex: 1;
    min-width: 300px;
}

.text-content.right-align {
    text-align: right;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 20px; /* 在图片和文字之间增加空间 */
}

/* 在左右布局中固定文字区域宽度 */
.left-right .text-content,
.right-left .text-content {
    width: 40%;
    min-width: 200px; /* 减小最小宽度以适应小屏幕 */
}

/* 在小屏幕上调整文字区域宽度 */
@media (max-width: 768px) {
    .left-right .text-content,
    .right-left .text-content {
        min-width: 150px;
        width: 45%;
    }
}

@media (max-width: 450px) {
    .left-right .text-content,
    .right-left .text-content {
        min-width: 120px;
        width: 50%;
    }
    
    .content-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    
    .left-right .content-wrapper,
    .right-left .content-wrapper {
        transform: scale(1); /* 在小屏幕上取消缩放 */
    }
}

.text-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #2c3e50;
}

.text-content p {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.8;
}

/* 图片样式 */
.rectangular-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* 特定图片放大20% */
.right-left .image-container.rectangle .rectangular-img {
    transform: scale(1.2); /* 放大20% */
    transform-origin: center; /* 设置变换原点为中心 */
}

.circular-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover; /* 对圆形图片使用cover，确保填满圆形区域 */
}

/* 左图右文布局 */
.left-right .content-wrapper {
    flex-direction: row;
    transform: scale(0.85); /* 整体缩小到85% */
    transform-origin: center;
}

/* 右图左文布局 */
.right-left .content-wrapper {
    flex-direction: row-reverse;
    transform: scale(0.85); /* 整体缩小到85% */
    transform-origin: center;
}

/* 滑入动画样式 */
.slide-in-left,
.slide-in-right {
    opacity: 0;
    transition: all 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 初始位置 */
.slide-in-left {
    transform: translateX(-100px);
}

.slide-in-right {
    transform: translateX(100px);
}

/* 可见状态 */
.slide-in-left.visible,
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 动画延迟效果 */
.left-right .slide-in-left,
.right-left .slide-in-right {
    opacity: 0;
}

.left-right .slide-in-left.animate {
    animation: slideInLeft 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.right-left .slide-in-right.animate {
    animation: slideInRight 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 特定高度section中的图片调整 */
.specific-height .image-container.rectangle {
    width: 100%;
    height: auto; /* 自动调整高度以适应图片 */
    min-height: 500px; /* 设置最小高度以确保足够的显示空间 */
    aspect-ratio: auto; /* 取消固定宽高比 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* 改为visible以适应图片高度 */
}

.specific-height .image-container.rectangle img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应容器 */
    max-width: 100%;
    max-height: none; /* 移除最大高度限制，允许图片完全显示 */
    object-fit: contain; /* 确保图片完整显示 */
    border-radius: 8px;
}

/* 特定高度section中的图片调整 - 803px */
.specific-height-803 .image-container.rectangle {
    width: 100%;
    height: auto; /* 自动调整高度以适应图片 */
    min-height: 350px; /* 设置最小高度以确保足够的显示空间 */
    aspect-ratio: auto; /* 取消固定宽高比 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* 改为visible以适应图片高度 */
}

.specific-height-803 .image-container.rectangle img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应容器 */
    max-width: 100%;
    max-height: none; /* 移除最大高度限制，允许图片完全显示 */
    object-fit: contain; /* 确保图片完整显示 */
    border-radius: 8px;
}

/* 特定高度section中的图片调整 - 545px */
.specific-height-545 .image-container.rectangle {
    width: 100%;
    height: auto; /* 自动调整高度以适应图片 */
    min-height: 300px; /* 设置最小高度以确保足够的显示空间 */
    aspect-ratio: auto; /* 取消固定宽高比 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* 改为visible以适应图片高度 */
}

.specific-height-545 .image-container.rectangle img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度以适应容器 */
    max-width: 100%;
    max-height: none; /* 移除最大高度限制，允许图片完全显示 */
    object-fit: contain; /* 确保图片完整显示 */
    border-radius: 8px;
}

/* 特定高度section中的图片调整 - 自适应 */
.specific-height-550 .image-container.rectangle {
    width: 100%;
    max-width: 100%; /* 确保容器不会超出屏幕宽度 */
    height: auto; /* 自动调整高度 */
    min-height: 300px; /* 设置最小高度以确保足够的显示空间 */
    aspect-ratio: auto; /* 取消固定宽高比 */
    display: flex;
    align-items: flex-start; /* 改为flex-start，让图片按实际高度排列 */
    justify-content: center;
    overflow: visible; /* 改为visible以适应图片高度 */
}

.specific-height-550 .image-container.rectangle img {
    width: 100%; /* 使用100%宽度以响应式缩放 */
    height: auto; /* 自动调整高度 */
    max-width: 100%; /* 确保图片不会超出容器 */
    max-height: none; /* 移除最大高度限制，允许图片完全显示 */
    object-fit: contain; /* 确保图片完整显示 */
    border-radius: 8px;
}

/* 四个角滑入中央的动画 */
.four-corner-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin: 80px auto;
}

.four-corner-container {
    position: relative;
    width: 100%;
    max-width: 760px; /* 限制最大宽度以适应屏幕 */
    height: auto; /* 改为自动高度以适应内容 */
    min-height: 600px; /* 设置最小高度 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 30px;
    column-gap: 0px;
    place-items: center;
    margin: 0 auto; /* 居中显示 */
    box-sizing: border-box;
    overflow-x: hidden; /* 防止水平滚动 */
}

.corner-photo {
    width: 100%;
    max-width: 352px; /* 设置最大宽度以适应屏幕 */
    height: auto; /* 改为auto以适应图片比例 */
    min-height: 572px; /* 增加10%最小高度以适应3:4宽高比的图片 */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column; /* 改为列布局以容纳标题 */
    align-items: center;
    justify-content: flex-start; /* 标题在顶部 */
    position: relative;
    box-sizing: border-box;
}

.corner-photo img {
    width: 100%;
    height: 462px; /* 调整高度以实现3:4的宽高比 (352px:462px比例) */
    object-fit: cover; /* 使用cover以填充整个区域 */
    border-radius: 8px 8px 0 0; /* 上半部分圆角 */
    margin-top: 0px; /* 移除负边距，让图片下移 */
}

/* 照片标题样式 */
.photo-title {
    width: 100%;
    padding: 10px;
    background-color: rgba(249, 242, 223, 0.9); /* 与背景色匹配的半透明背景 */
    text-align: center;
    margin-top: auto; /* 将标题推到底部 */
}

.join-images-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

.photo-title2 {
    width: fit-content;
    padding: 10px;
    background-color: rgba(249, 242, 223, 0.9); /* 与背景色匹配的半透明背景 */
    text-align: center;
    margin-top: 10px; /* 在图片下方添加间距 */
    border-radius: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

.title-line1 {
    font-size: 24px; /* 增加字体大小 */
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.4; /* 增加行高以便于多行文字显示 */
    position: relative; /* 启用相对定位 */
    top: -5px; /* 向上移动3px */
}

.title-line3 {
    font-size: 24px; /* 增加字体大小 */
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.4; /* 增加行高以便于多行文字显示 */
    position: relative; /* 启用相对定位 */
    top: -5px; /* 向上移动3px */
}
.title-line4 {
    font-size: 20px;
    color: #555;
    font-weight: bold;
}
.title-line2 {
    font-size: 20px;
    color: #555;
    font-weight: bold;
}

/* 位置图标样式 */
.location-icon-img0 {
    width: 35px; /* 缩小图标宽度 */
    height: 50px; /* 缩小图标高度 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-right: 5px; /* 图标与文字之间留一点间距 */
    object-fit: contain; /* 确保图标按比例缩放 */
    display: inline-block; /* 确保样式生效 */
    max-width: 35px; /* 限制最大宽度 */
    max-height: 50px; /* 限制最大高度 */
    font-size: 0; /* 防止图片作为内联元素产生基线间隙 */
    line-height: 0; /* 防止图片作为内联元素产生基线间隙 */
    position: relative; /* 启用相对定位 */
    top: -5px; /* 向下移动5px */
}
.location-icon-img {
    width: 35px; /* 缩小图标宽度 */
    height: 50px; /* 缩小图标高度 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-right: 5px; /* 图标与文字之间留一点间距 */
    object-fit: contain; /* 确保图标按比例缩放 */
    display: inline-block; /* 确保样式生效 */
    max-width: 35px; /* 限制最大宽度 */
    max-height: 50px; /* 限制最大高度 */
    font-size: 0; /* 防止图片作为内联元素产生基线间隙 */
    line-height: 0; /* 防止图片作为内联元素产生基线间隙 */
    position: relative; /* 启用相对定位 */
    top: 15px; /* 向下移动，调整位置 */
}

/* 四角图片模块中的地点图标进一步缩小 */
.four-corner-gallery .location-icon-img {
    width: 25px; /* 进一步缩小图标宽度 */
    height: 35px; /* 进一步缩小图标高度 */
    max-width: 25px; /* 限制最大宽度 */
    max-height: 35px; /* 限制最大高度 */
    margin-right: 4px; /* 减少间距 */
    top: 0px; /* 调整垂直位置 */
}

.location-icon-img2 {
    width: 35px; /* 缩小图标宽度 */
    height: 50px; /* 缩小图标高度 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-right: 5px; /* 图标与文字之间留一点间距 */
    object-fit: contain; /* 确保图标按比例缩放 */
    display: inline-block; /* 确保样式生效 */
    max-width: 35px; /* 限制最大宽度 */
    max-height: 50px; /* 限制最大高度 */
    font-size: 0; /* 防止图片作为内联元素产生基线间隙 */
    line-height: 0; /* 防止图片作为内联元素产生基线间隙 */
    position: relative; /* 启用相对定位 */
    top: 0px; /* 向下移动 */
}

/* 四个角的初始位置 */
.slide-from-corner {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.top-left.slide-from-corner {
    transform: translate(-418px, -418px) rotate(-10deg); /* 调整偏移量以适应3:4宽高比的图片 */
}

/* 右上角照片向上移动50px */
.top-right.slide-from-corner {
    transform: translate(418px, -352px) rotate(10deg); /* 调整偏移量以适应3:4宽高比的图片 */
}

.bottom-left.slide-from-corner {
    transform: translate(-418px, 418px) rotate(-10deg); /* 调整偏移量以适应3:4宽高比的图片 */
}

.bottom-right.slide-from-corner {
    transform: translate(418px, 418px) rotate(10deg); /* 调整偏移量以适应3:4宽高比的图片 */
}

/* 滑入中央的动画 */
.slide-from-corner.animate {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

/* 重新定义动画，确保可以重复播放 */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 优雅淡入效果 - 从中心向外扩展 */
.elegant-fade-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.elegant-fade-element {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transform: scale(0.7) rotate(-10deg) translateY(50px);
    transition: opacity 0.8s linear, transform 0.8s linear; /* 使用transition替代animation */
}

/* 优雅淡入效果 - 触发状态 */
.elegant-fade-element.fade-active {
    opacity: 1;
    transform: scale(1) rotate(0) translateY(0);
}

/* 特定的单张大图展示模块 - 避免与上面的模块重叠 */
.gallery-section.single-image:last-of-type {
    margin-top: 80px; /* 增加上边距到80px */
}

/* 左右拼接图片模块样式 */
.join-images-section {
    padding: 20px 0;
    margin: 80px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.join-images-container {
    display: flex;
    width: 100%;
    max-width: 800px; /* 控制最大宽度 */
    position: relative;
    box-sizing: border-box;
}

.image-half {
    flex: 1;
    overflow: hidden;
    position: relative;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.half-img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/* 左侧图片滑入样式 */
.left-image {
    border-right: none; /* 移除拼接缝隙 */
}

.left-image.slide-in-left {
    transform: translateX(-100px);
    opacity: 0;
}

.left-image.slide-in-left.animate {
    transform: translateX(0);
    opacity: 1;
}

/* 右侧图片滑入样式 */
.right-image {
    border-left: none; /* 移除拼接缝隙 */
}

.right-image.slide-in-right {
    transform: translateX(100px);
    opacity: 0;
}

.right-image.slide-in-right.animate {
    transform: translateX(0);
    opacity: 1;
}





/* 心形特效样式 - 当拼接图片完成时显示多个心形特效 */
.heart-animation {
    position: absolute;  /* 绝对定位 */
    top: 50%;           /* 垂直居中 */
    left: 50%;          /* 水平居中 */
    transform: translate(-50%, -50%);  /* 精确居中 */
    opacity: 0;         /* 初始透明 */
    visibility: hidden; /* 初始隐藏 */
    z-index: 10;        /* 层级设置，确保显示在图片之上 */
    pointer-events: none; /* 避免影响页面交互 */
}

.heart-icon {
    position: absolute;              /* 绝对定位 */
    font-size: 60px;                /* 心形图标大小 */
    color: red;                     /* 红色心形 */
    opacity: 0;                     /* 初始透明 */
    top: 50%;                       /* 垂直居中 */
    left: 50%;                      /* 水平居中 */
    transform: translate(-50%, -50%) scale(0); /* 初始缩放为0，避免闪烁 */
    will-change: transform, opacity; /* 优化动画性能 */
}

/* 第一个心形动画 - 带有延迟效果 */
.heart-1 {
    animation: floatHeartLoop 2s ease-out infinite;  /* 循环漂浮动画 */
    animation-delay: 0.1s;                      /* 动画延迟 */
    opacity: 0;                                 /* 确保初始透明 */
}

/* 第二个心形动画 - 带有延迟效果 */
.heart-2 {
    animation: floatHeartLoop 2s ease-out infinite;  /* 循环漂浮动画 */
    animation-delay: 0.3s;                      /* 动画延迟 */
    opacity: 0;                                 /* 确保初始透明 */
}

/* 第三个心形动画 - 带有延迟效果 */
.heart-3 {
    animation: floatHeartLoop 2s ease-out infinite;  /* 循环漂浮动画 */
    animation-delay: 0.5s;                      /* 动画延迟 */
    opacity: 0;                                 /* 确保初始透明 */
}

/* 第四个心形动画 - 带有延迟效果 */
.heart-4 {
    animation: floatHeartLoop 2s ease-out infinite;  /* 循环漂浮动画 */
    animation-delay: 0.7s;                      /* 动画延迟 */
    opacity: 0;                                 /* 确保初始透明 */
}

/* 第五个心形动画 - 带有延迟效果 */
.heart-5 {
    animation: floatHeartLoop 2s ease-out infinite;  /* 循环漂浮动画 */
    animation-delay: 0.9s;                      /* 动画延迟 */
    opacity: 0;                                 /* 确保初始透明 */
}

@keyframes floatHeart {
    0% {
        transform: translate(-50%, -50%) scale(0) translateY(0);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.2) translateY(-20px);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1) translateY(-60px);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1) translateY(-80px);
        opacity: 0.7;
    }
    80% {
        transform: translate(-50%, -50%) scale(0.9) translateY(-90px);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) translateY(-100px);
        opacity: 0;
    }
}

@keyframes floatHeartLoop {
    0% {
        transform: translate(-50%, -50%) scale(0) translateY(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.2) translateY(-20px);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(1) translateY(-60px);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) translateY(-80px);
        opacity: 0.8;
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9) translateY(-90px);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) translateY(-100px);
        opacity: 0.6;
    }
}

.heart-animation.show {
    opacity: 1;
    visibility: visible;
}

@keyframes showHearts {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 响应式设计 - 强制保持桌面端布局 */
@media (max-width: 768px) {
    /* 强制保持桌面端的布局 */
    .content-wrapper {
        flex-direction: row !important;
    }
    
    
    
    .slide-in-right.animate {
        animation: slideInRight 1.5s ease-out forwards !important;
    }
    
    /* 保持四角布局但允许缩放 */
    .four-corner-container {
        width: 700px !important;
        height: 800px !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
    }
    
    .corner-photo {
        width: 264px !important; /* 增加10%宽度 */
        height: 385px !important; /* 增加10%高度 */
        max-width: 40vw !important;
        max-height: 40vh !important;
    }
    
    .corner-photo img {
        height: 308px !important; /* 增加10%图片高度 */
    }
    
    /* 确保四角图片的滑入动画在小屏幕上正常工作 */
    .top-left.slide-from-corner {
        transform: translate(-30vw, -30vw) rotate(-10deg) !important;
    }
    
    .top-right.slide-from-corner {
        transform: translate(30vw, -25vw) rotate(10deg) !important;
    }
    
    .bottom-left.slide-from-corner {
        transform: translate(-30vw, 30vw) rotate(-10deg) !important;
    }
    
    .bottom-right.slide-from-corner {
        transform: translate(30vw, 30vw) rotate(10deg) !important;
    }
    
    .slide-from-corner.animate {
        opacity: 1 !important;
        transform: translate(0, 0) rotate(0deg) !important;
    }
    
    /* 保持拼接图片布局不变 */
    .join-images-container {
        flex-direction: row !important;
    }
    
    .image-half {
        width: 50% !important;
        height: auto !important;
    }
    
    .half-img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* 保持标题文字大小不变 */
    .title-line1 {
        font-size: 24px !important;
    }
    
    .title-line2 {
        font-size: 20px !important;
    }
    
    .title-line3 {
        font-size: 24px !important;
    }
    
    .title-line4 {
        font-size: 20px !important;
    }
    
    /* 特定高度模块的标题响应式调整 */
    @media (max-width: 768px) {
        .title-line3 {
            font-size: 20px !important;
        }
        
        .title-line4 {
            font-size: 18px !important;
        }
    }
    
    @media (max-width: 450px) {
        .title-line3 {
            font-size: 18px !important;
        }
        
        .title-line4 {
            font-size: 16px !important;
        }
    }
    
    .location-icon-img {
        width: 35px !important;
        height: 50px !important;
    }
    
    .location-icon-img0 {
        width: 35px !important;
        height: 50px !important;
    }
    
    .location-icon-img2 {
        width: 35px !important;
        height: 50px !important;
    }
    
    /* 保持心形特效不变 */
    .heart-animation {
        transform: translate(-50%, -50%) !important;
    }
    
    .heart-icon {
        font-size: 60px !important;
    }
    
    /* 保持容器样式 */
    .container {
        padding: 20px !important;
    }
    
    .gallery-section {
        margin: 80px auto !important;
        padding: 20px 0 !important;
    }
    
    .image-container {
        width: 90vw !important;
        max-width: 800px !important;
    }
    
    .text-content {
        min-width: 160px !important;
    }
    
    /* 保持单张大图样式 */
    .single-image .image-container {
        width: 90vw !important;
        max-width: 800px !important;
    }
    
    /* 保持图片形状切换按钮显示 */
    .toggle-shape-btn {
        display: block !important;
    }
    
    /* 明确指定左图右文和右图左文的样式 */
    .left-right .content-wrapper {
        flex-direction: row !important;
        transform: scale(0.85) !important;
        transform-origin: center !important;
    }
    
    .right-left .content-wrapper {
        flex-direction: row-reverse !important;
        transform: scale(0.85) !important;
        transform-origin: center !important;
    }
    
    /* 强制保持图片容器样式 - 改进以允许适当缩放 */
    .image-container.rectangle {
        width: 800px !important;
        height: 600px !important;
        max-width: 90vw !important;
        max-height: 60vh !important;
    }
    
    .image-container.circle {
        width: 600px !important;
        height: 600px !important;
        max-width: 60vw !important;
        max-height: 60vh !important;
    }
    
    .rectangular-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .circular-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 调整标题文字大小以适应小屏幕 */
    .title-line1 {
        font-size: 24px !important;
    }
    
    .title-line2 {
        font-size: 20px !important;
    }
    
    .title-line3 {
        font-size: 24px !important;
    }
    
    .title-line4 {
        font-size: 20px !important;
    }
    
    /* 特定高度模块的标题响应式调整 */
    @media (max-width: 768px) {
        .title-line3 {
            font-size: 20px !important;
        }
        
        .title-line4 {
            font-size: 18px !important;
        }
    }
    
    @media (max-width: 450px) {
        .title-line3 {
            font-size: 18px !important;
        }
        
        .title-line4 {
            font-size: 16px !important;
        }
    }
    
    /* 针对小屏幕的文本尺寸调整 */
    @media (max-width: 768px) {
        .title-line1 {
            font-size: 20px !important;
        }
        
        .title-line2 {
            font-size: 18px !important;
        }
        
        .title-line3 {
            font-size: 20px !important;
        }
        
        .title-line4 {
            font-size: 18px !important;
        }
        
        h1 {
            font-size: 20px !important;
        }
        
        h4 {
            font-size: 16px !important;
        }
        
        p {
            font-size: 16px !important;
        }
    }
    
    @media (max-width: 450px) {
        .title-line1 {
            font-size: 18px !important;
        }
        
        .title-line2 {
            font-size: 16px !important;
        }
        
        .title-line3 {
            font-size: 18px !important;
        }
        
        .title-line4 {
            font-size: 16px !important;
        }
        
        h1 {
            font-size: 18px !important;
        }
        
        h4 {
            font-size: 14px !important;
        }
        
        p {
            font-size: 14px !important;
        }
    }
}
/* 针对超小屏幕(如手机)的额外样式确保布局一致性 */
@media (max-width: 450px) {
    /* 确保在超小屏幕上也保持桌面端的布局 */
    .content-wrapper {
        flex-direction: row !important;
    }
    
    .slide-in-right.animate {
        animation: slideInRight 1.5s ease-out forwards !important;
    }
    
    /* 保持四角布局但允许缩放 */
    .four-corner-container {
        width: 1200px !important;
        height: 1200px !important;
        max-width: 90vw !important;
        max-height: 90vw !important;
    }
    
    .corner-photo {
        width: 627px !important; /* 增加10%宽度 */
        height: 627px !important; /* 增加10%高度 */
        max-width: 45vw !important;
        max-height: 45vw !important;
    }
    
    /* 确保四角图片的滑入动画在小屏幕上正常工作 */
    .top-left.slide-from-corner {
        transform: translate(-45vw, -45vw) rotate(-10deg) !important;
    }
    
    .top-right.slide-from-corner {
        transform: translate(45vw, -40vw) rotate(10deg) !important;
    }
    
    .bottom-left.slide-from-corner {
        transform: translate(-45vw, 45vw) rotate(-10deg) !important;
    }
    
    .bottom-right.slide-from-corner {
        transform: translate(45vw, 45vw) rotate(10deg) !important;
    }
    
    .slide-from-corner.animate {
        opacity: 1 !important;
        transform: translate(0, 0) rotate(0deg) !important;
    }
    
    /* 保持拼接图片布局不变 */
    .join-images-container {
        flex-direction: row !important;
    }
    
    .image-half {
        width: 50% !important;
        height: auto !important;
    }
    
    .half-img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* 保持标题文字大小不变 */
    .title-line1 {
        font-size: 24px !important;
    }
    
    .title-line2 {
        font-size: 20px !important;
    }
    
    .title-line3 {
        font-size: 24px !important;
    }
    
    .title-line4 {
        font-size: 20px !important;
    }

    
    
    /* 特定高度模块的标题响应式调整 */
    @media (max-width: 768px) {
        .title-line3 {
            font-size: 20px !important;
        }
        
        .title-line4 {
            font-size: 18px !important;
        }
    }
    
    @media (max-width: 450px) {
        .title-line3 {
            font-size: 18px !important;
        }
        
        .title-line4 {
            font-size: 16px !important;
        }
    }
    
    .location-icon-img {
        width: 35px !important;
        height: 50px !important;
    }
    
    .location-icon-img0 {
        width: 35px !important;
        height: 50px !important;
    }
    
    .location-icon-img2 {
        width: 35px !important;
        height: 50px !important;
    }
    
    /* 保持心形特效不变 */
    .heart-animation {
        transform: translate(-50%, -50%) !important;
    }
    
    .heart-icon {
        font-size: 60px !important;
    }
    
    /* 保持容器样式 */
    .container {
        padding: 20px !important;
    }
    
    .gallery-section {
        margin: 0px auto !important;
        padding: 0px 0 !important;
    }
    
    .image-container {
        width: 90vw !important;
        max-width: 800px !important;
    }
    
    .text-content {
        min-width: 160px !important;
    }
    
    /* 保持单张大图样式 */
    .single-image .image-container {
        width: 90vw !important;
        max-width: 800px !important;
    }
    
    /* 保持图片形状切换按钮显示 */
    .toggle-shape-btn {
        display: block !important;
    }
    
    /* 明确指定左图右文和右图左文的样式 */
    .left-right .content-wrapper {
        flex-direction: row !important;
        transform: scale(0.85) !important;
        transform-origin: center !important;
    }
    
    .right-left .content-wrapper {
        flex-direction: row-reverse !important;
        transform: scale(0.85) !important;
        transform-origin: center !important;
    }
    
    /* 强制保持图片容器样式 - 改进以允许适当缩放 */
    .image-container.rectangle {
        width: 800px !important;
        height: 600px !important;
        max-width: 90vw !important;
        max-height: 60vh !important;
    }
    
    .image-container.circle {
        width: 600px !important;
        height: 600px !important;
        max-width: 60vw !important;
        max-height: 60vh !important;
    }
    
    .rectangular-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .circular-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* 针对小屏幕的文本尺寸调整 */
    @media (max-width: 768px) {
        .title-line1 {
            font-size: 20px !important;
        }
        
        .title-line2 {
            font-size: 18px !important;
        }
        
        .title-line3 {
            font-size: 20px !important;
        }
        
        .title-line4 {
            font-size: 18px !important;
        }
        
        h1 {
            font-size: 20px !important;
        }
        
        h4 {
            font-size: 16px !important;
        }
        
        p {
            font-size: 16px !important;
        }
    }
    
    @media (max-width: 450px) {
        .title-line1 {
            font-size: 18px !important;
        }
        
        .title-line2 {
            font-size: 16px !important;
        }
        
        .title-line3 {
            font-size: 18px !important;
        }
        
        .title-line4 {
            font-size: 16px !important;
        }

        .title-line5 {
            font-size: 16px !important;
        }
        
        h1 {
            font-size: 18px !important;
        }
        
        h4 {
            font-size: 14px !important;
        }
        
        p {
            font-size: 14px !important;
        }
    }
}

/* 添加之前嵌套的媒体查询作为独立的规则 */
@media (max-width: 768px) {
    .image-container.rectangle {
        width: 70vw !important;
        height: 50vw !important;
        max-width: 600px !important;
        max-height: 450px !important;
    }
    
    /* 特定高度模块的响应式调整 */
    .specific-height-803 .image-container.rectangle {
        width: 85vw !important;
        height: 600px !important;
        max-width: 85vw !important;
        max-height: 70vh !important;
    }
    
    .specific-height-803 .image-container.rectangle img {
        height: 600px !important;
        max-height: 70vh !important;
    }
    
    .image-container.circle {
        width: 50vw !important;
        height: 50vw !important;
        max-width: 450px !important;
        max-height: 450px !important;
    }
    
    /* 缩小整个内容包装器 */
    .content-wrapper {
        transform: scale(0.75) !important;
        transform-origin: center !important;
    }
    
    /* 针对小屏幕的四角图片尺寸调整 */
    .four-corner-container {
        width: 90vw !important;
        max-width: 600px !important;
        height: auto !important; /* 改为auto以适应内容 */
        max-height: 90vh !important;
    }

    .corner-photo {
        width: 40vw !important;
        max-width: 220px !important;
        height: auto !important;
        min-height: 370px !important; /* 调整小屏幕最小高度以适应3:4宽高比的图片 */
        max-height: 48.6vh !important; /* 回调10%的最大高度 */
    }
    
    /* 针对小屏幕的特定高度模块调整 */
    .specific-height-803 .image-container.rectangle {
        height: 500px !important; /* 调整容器高度 */
    }
    
    .specific-height-803 .image-container.rectangle img {
        height: 500px !important; /* 调整图片高度 */
    }
    
    .corner-photo img {
        height: 294px !important; /* 调整小屏幕高度以实现3:4的宽高比 */
        object-fit: cover !important;
    }
    
    .photo-title {
        padding: 8px !important;
        font-size: 0.9em !important;
    }
    
    .title-line1 {
        font-size: 20px !important; /* 减小字体 */
        margin-bottom: 2px !important;
    }
    
    .title-line2 {
        font-size: 16px !important; /* 减小字体 */
    }
    
    /* 针对小屏幕的特定高度模块调整 */
    .specific-height-550 .image-container.rectangle {
        max-width: 90vw !important;
    }
    
    .specific-height-550 .image-container.rectangle img {
        max-width: 90vw !important;
        max-height: 50vh !important;
    }
    
    .specific-section .image-container.specific-size {
        max-width: 90vw !important;
        height: 70px !important; /* 在较小屏幕上减小高度 */
    }
    
    .specific-section .full-size-img.specific-img {
        height: 70px !important; /* 在较小屏幕上减小高度 */
        max-width: 90vw !important;
    }
    
    /* 针对小屏幕的四角图片滑入动画调整 */
    .top-left.slide-from-corner {
        transform: translate(-31vw, -31vw) rotate(-10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .top-right.slide-from-corner {
        transform: translate(31vw, -25vw) rotate(10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .bottom-left.slide-from-corner {
        transform: translate(-31vw, 31vw) rotate(-10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .bottom-right.slide-from-corner {
        transform: translate(31vw, 31vw) rotate(10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .slide-from-corner.animate {
        opacity: 1 !important;
        transform: translate(0, 0) rotate(0deg) !important;
    }
}

@media (max-width: 450px) {
    .image-container.rectangle {
        width: 85vw !important;
        height: auto !important; /* 改为auto以适应图片实际高度 */
        max-width: 400px !important;
        max-height: none !important; /* 移除最大高度限制 */
    }
    
    /* 特定高度模块的超小屏幕响应式调整 */
    .specific-height-803 .image-container.rectangle {
        width: 90vw !important;
        height: 400px !important;
        max-width: 90vw !important;
        max-height: 60vh !important;
    }
    
    .specific-height-803 .image-container.rectangle img {
        height: 400px !important;
        max-height: 60vh !important;
    }
    
    .image-container.circle {
        width: 60vw !important;
        height: 60vw !important;
        max-width: 300px !important;
        max-height: 300px !important;
    }
    
    /* 进一步缩小整个内容包装器 */      
    .content-wrapper {
        transform: scale(0.6) !important;
        transform-origin: center !important;       
    }

    /* 针对超小屏幕的四角图片尺寸调整 */
    .four-corner-container {
        width: 90vw !important;
        max-width: 400px !important;
        height: auto !important; /* 改为auto以适应内容 */
        max-height: 90vh !important;
    }

    .corner-photo {
        width: 200px !important;
        height: auto !important;
        min-height: 260px !important; /* 调整超小屏幕最小高度以适应3:4宽高比的图片 */
        max-width: 40vw !important;
        max-height: 43.2vh !important; /* 回调10%的最大高度 */
    }
    
    /* 针对超小屏幕的特定高度模块调整 */
    .specific-height-803 .image-container.rectangle {
        height: 350px !important; /* 调整容器高度 */
    }
    
    .specific-height-803 .image-container.rectangle img {
        height: 350px !important; /* 调整图片高度 */
    }
    
    .corner-photo img {
        height: 210px !important; /* 调整超小屏幕高度以实现3:4的宽高比 */
        object-fit: cover !important;
    }
    
    .photo-title {
        padding: 6px !important;
        font-size: 0.8em !important;
    }
    
    .title-line1 {
        font-size: 16px !important; /* 进一步减小字体 */
        margin-bottom: 1px !important;
    }
    
    .title-line2 {
        font-size: 10px !important; /* 进一步减小字体 */
    }
    
    .location-icon-img {
        width: 35px !important;
        height: 50px !important;
        margin-right: 4px !important;
    }
    
    /* 针对超小屏幕的特定高度模块调整 */
    .specific-height-550 .image-container.rectangle {
        max-width: 95vw !important;
    }
    
    .specific-height-550 .image-container.rectangle img {
        max-width: 95vw !important;
        max-height: none !important; /* 移除最大高度限制 */
    }
    
    .specific-section .image-container.specific-size {
        max-width: 95vw !important;
        height: 50px !important; /* 在很小的屏幕上进一步减小高度 */
    }
    
    .specific-section .full-size-img.specific-img {
        height: 50px !important; /* 在很小的屏幕上进一步减小高度 */
        max-width: 95vw !important;
    }
    
    /* 针对超小屏幕的四角图片滑入动画调整 */
    .top-left.slide-from-corner {
        transform: translate(-25vw, -25vw) rotate(-10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .top-right.slide-from-corner {
        transform: translate(25vw, -20vw) rotate(10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .bottom-left.slide-from-corner {
        transform: translate(-25vw, 25vw) rotate(-10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .bottom-right.slide-from-corner {
        transform: translate(25vw, 25vw) rotate(10deg) !important; /* 调整偏移量以适应3:4宽高比的图片 */
    }
    
    .slide-from-corner.animate {
        opacity: 1 !important;
        transform: translate(0, 0) rotate(0deg) !important;
    }
}