.content {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}


p {
    margin-bottom: 2em;
    line-height: 1.8;
}



/* 默认隐藏汉堡菜单按钮 */
.hamburger {
    display: none;
}
.log a{
    color: rgb(0, 55, 255);
}


@media (min-width: 828px) {
    footer {
        text-align: center;
        padding: 20px;
        font-size: 0.9em;
        line-height: 1.5em;
        color: #333;
        border-top: 1px solid #ddd;
        background-color: #fff;
    }

    body {
        font-family: 
                    "Avenir",
                    "Helvetica Neue",
                    Arial, sans-serif;
        color: #333;
        background-color: #fff; 
        margin: auto;
    }
    body:lang(zh) {
        font-family: "PingFang SC", "Microsoft YaHei","Noto Sans CJK SC" sans-serif;
    }
    

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
    }

    /* 让整个 index 区块填充整个视口，并居中内容 */
    #index {
        background-image: url('/image/paris/par-12.jpeg'); /* 替换成你的背景图路径 */
        position: relative;
        height: 100vh; /* 让 #index 充满整个视口高度 */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content:center; /* 让内容垂直居中 */
        align-items: center; /* 让内容水平居中 */
        text-align: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: white;
        overflow: hidden;    
    }
    
    #index::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* 给背景增加 30% 的黑色遮罩 */
        z-index: 1;
        overflow: hidden;
    }
    
    
    /* 标题优化 */
    #index .title {
        font-size: 4.7em;
        font-weight:normal;
        line-height: 1.4em;
        justify-content: center;
        text-align: center;
        text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
        
        z-index: 2; /* 确保文字在遮罩上方 */
        
    }
    
    /* 文字说明 */
    #index .text {
        font-size: 1.5rem;
        max-width: 80%;
        color: white;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        line-height: 1.8em;
        z-index: 2; /* 确保文字在遮罩上方 */
        
    }
    #index .text a {

        color: #fff;
        text-decoration: underline;
    }
    

    :not(#index) > .title {
        font-size: 4em;
        font-weight: normal;
        margin-top: 2.5em;
        margin-bottom: 2.5em;
        margin-left: 1em;
        margin-right: 1em;
        text-align: center;
    }
    

    .subtitle {
        max-width: 90%;
        text-align: center;
        font-size: 3em;
        font-weight:normal;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    :not(#index) > .text {
        max-width: 1200px;
        flex: 1;
        text-align: center;
        margin: auto;
        margin-bottom: 1.5em;
        font-size: 1.5em;
        line-height: 1.8;
        color: #333;
        padding-left: 1em;
        padding-right: 1em;
        
        
    }

    

    .back-button {
        margin-top: 1em;
        margin-left: 1em;
        
        display: inline-block;
        font-size: 2em;
        font-weight: 450;
        color: #007AFF;
        background: transparent;
        border: none;
        cursor: pointer;
        text-decoration: none;
    }
    
    .back-button:hover {
        color: #0056b3;
    }
    
    /* iPhone返回箭头样式 */
    .back-button::before {
        content: "←";
        font-size: 1em;
        margin-right: 0.2em;
    }

    :not(#index) > .text a {

        color: #0000EE;
        text-decoration: underline;
    }

        
    
    .logo {
        font-size: 1.8em;
        font-weight: bold;
        margin-left: 2em;
        color: #333;
    }
    nav {
        display: flex;
        align-items: center;
    }
    
    nav a {
        text-decoration: none;
        color: #333;
        margin:1em;
        font-size: 1.3rem;
    }
    
    .avatar img{
        display: flex;
        justify-content: center; 
        margin: auto;
        border-radius: 50%;
        width: 300px;
        height: 300px;
        object-fit: cover;
        margin-top: 2em;
        margin-bottom: 2em;
    }


    nav a:hover {
        transition: transform 0.3s ease;
        transform: scale(1.2);
    }
    
    
    .lang-dropdown {
        font-size: 1.3em;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fff;
        color: #333;
        cursor: pointer;
        margin: 1em;
    }
    
    .lang-dropdown:hover {
        border-color: #333;
    }
    

    /*主站的图片样式CSS*/
    .index-photo {
        display: grid; /* 使用 CSS Grid 布局 */
        grid-template-columns: repeat(2, minmax(300px, 1fr)); /* 自动调整列数 */
        gap: 20px; /* 图片之间的间距 */
        padding: 20px;
        }   

    .index-photo img {
        width: 100%; 
        height: auto; 
        border-radius: 5px; /* 可选：圆角样式 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        transition: transform 0.3s ease; 
        }

    .index-photo img:hover {
        transform: scale(1.02); 
        }
    

    /*Gallery的图片样式CSS*/
    .gallery-cover {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 20px;
        padding: 20px;
        margin: 0 auto;
        max-width: 1500px;
        
    }

    .gallery-cover img {
        width: 100%; /* 图片占满网格单元 */
        height: auto; /* 保持宽高比 */
        border-radius: 5px; /* 可选：圆角样式 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        transition: transform 0.3s ease; 
        }

    .gallery-cover img:hover {
        transform: scale(1.02); 
        }

    .cat {
        font-size: 1.5em;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 与 .gallery-cover 保持一致 */
        gap: 20px; /* 保持与图片的间距一致 */
        margin-top: 0.5em;
        margin-bottom: 0.7em;
        text-align: flex-start; /* 文字居中 */
        margin-left: 0.5em;
        }


        
  

    .gallery-photo {
        display: flex; /* 使用 flexbox 布局 */
        flex-direction: row; /* 横向布局 */
        overflow-x: auto; /* 横向滚动 */
        gap: 5px; /* 图片之间的间距 */
        padding: 1.5em;
        scroll-behavior: smooth; /* 平滑滚动 */
        
    }
        
    .gallery-photo img {
        max-height: 42em; /* 图片最大高度 */
        height: auto; /* 保持比例 */
        cursor: pointer; /* 鼠标悬停时显示手型 */

    }
    
    
    
    .gallery-photo div span {
        
        bottom: 10px; 
        left: 10px; 
        text-align: left;
        
        background-color: rgba(0, 0, 0, 0.6); 
        color: white; 
        font-size: 0.9em; 
        padding: 5px 10px; 
        border-radius: 3px; 
        pointer-events: none; 
        white-space: normal;
        overflow: hidden;
        line-height: 2;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* 背景阴影 */
        
        
        
        

    } 
    

    .photo-viewer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8); /* 半透明背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        overflow: auto;
        scroll-behavior: smooth; /* 平滑滚动 */
    }

    .photo-viewer.hidden {
        display: none; /* 隐藏查看器 */
    }
        
    .photo-viewer img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* 保持图片比例 */
    }
        
    .photo-viewer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
            
    
    }
        
    
    
        /* 左箭头样式 */
    .arrow.left {
        position: absolute;
        top: 50%; /* 垂直居中 */
        left: 20px; /* 靠近容器左边 */
        transform: translateY(-50%); /* 垂直方向居中 */
        width: 2em; /* 按钮宽度 */
        height: 2em; /* 按钮高度 */
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
        color: white;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.3em; /* 箭头字体大小 */
        cursor: pointer;
        z-index: 2; /* 确保在图片之上 */
            
    }
    
        /* 右箭头样式 */
    .arrow.right {
        position: absolute;
        top: 50%; /* 垂直居中 */
        right: 20px; /* 靠近容器右边 */
        transform: translateY(-50%); /* 垂直方向居中 */
        width: 2em; /* 按钮宽度 */
        height: 2em; /* 按钮高度 */
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
        color: white;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.3em; /* 箭头字体大小 */
        cursor: pointer;
        z-index: 2; /* 确保在图片之上 */
            
    }
    
        
    .close-button {
        position: absolute;
        top: 1em;
        right: 2em;
        background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
        border: none;
        color: #ffffff;
        font-size: 1.5em;
        z-index: 2;
        cursor: pointer;
        text-align: center;
        justify-content: center;
        width: 1.5em; /* 按钮宽度 */
        height: 1.5em; /* 按钮高度 */
    }
        

}