@media (min-width: 600px){
    body {
        font-family: 'Times New Roman', Times, serif;
        margin: 0;
        padding: 0;
        background-color: #f8f8f8;
        color: #333;
    }

    /* 修正标题的样式 */
    .container h1 {
    margin-left: 200px;
    margin-right: 200px;
    }
    
    .container h1 {
        font-size: 32px; /* 设置标题字体大小 */
        font-weight: bold; /* 设置标题字体加粗 */
        text-align: center; /* 标题居中 */
        margin-bottom: 20px;
    }


    .research-area {
        width: 100%;
        padding: 20px;

    }

    .project {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .project img {
        width:50%;
        margin-bottom: 50px;
        margin-right: 50px;
        margin-left: 40px;
        border: 1px solid #ddd; /* 可以添加边框来更好地分隔图片 */
    }

    .description {
        width: 60%;
        margin-right: 60px
    }

    .description h3 {
        font-size: 36px;
        margin-top: -40px;
        margin-bottom: 20px;
        font-family: 'Times New Roman', Times, serif;
        color: #333; /* 使用深灰色字体 */
    }

    .description p {
        font-size: 18px;
        line-height: 1.6;
        font-family: 'Times New Roman', Times, serif;
        color: #555; /* 使用浅灰色字体 */
    }

    /* 分隔线的样式 */
    .separator {
        border-bottom: 1px solid #ccc; /* 灰色横线 */
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .bottom {
        margin-top: 200px;
        height: 10vh;
        width: 100%;
    }

    .bottom div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 600px) {


    
    .container {
        width: 100%; /* 容器宽度设置为100% */
        display: flex;
        flex-direction: column;

        justify-content: center; /* 内容垂直居中 */
        box-sizing: border-box;
        padding: 0;
    }
    
    .research-area {
        width: 100%;
        box-sizing: border-box;
        padding: 20px; /* 内边距 */
    }
    
    .project {
        width: 100%;
        display: flex;
        flex-direction: column; /* 图片和文字垂直排列 */
        align-items: center; /* 居中对齐 */
        box-sizing: border-box;
        margin-bottom: 40px;
    }
    
    .project img {
        width: 90%; /* 设置图片宽度 */
        max-width: 600px; /* 最大宽度限制 */
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }
    
    .description {
        width: 90%;
        max-width: 600px; /* 限制最大宽度，避免内容太宽 */
        text-align: center; /* 内容居中 */
        box-sizing: border-box;
    }
    
    .description h3 {
        font-size: 24px; /* 字体大小适配手机 */
        margin-bottom: 10px;
        font-family: 'Times New Roman', Times, serif;
        color: #333;
    }
    
    .description p {
        font-size: 16px; /* 字体大小适配手机 */
        line-height: 1.6;
        font-family: 'Times New Roman', Times, serif;
        color: #555;
    }
    
    .separator {
        border-bottom: 1px solid #ccc; /* 分隔线 */
        margin-bottom: 30px;
        margin-top: 30px;
    }
    
    .bottom {
        margin-top: 200px;
        height: 10vh;
        width: 100%;
    }
    
    .bottom div {
        display: flex;
        justify-content: center;
        align-items: center;
    }





    .site_head {
        display: none;
    }

    .moHeader {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: black;
        width: 100%;
        height: 9vh;
        align-items: center;
    }

    .HeaderButton {
        border: 1px;
        border-radius: 15px;
        background-color: #333;
        height: 65%;
        width: 10%;
        margin-right: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .sanTiaoHengXian {
        width: 70%;
        height: 1px;
        border: 1px solid white;
        background-color: white;
        border-radius: 20px;
    }
    
    .sanTiaoHengXian2 {
        width: 70%;
        height: 1px;
        border: 1px solid white;
        background-color: white;
        border-radius: 20px;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .page {
        width: 100%;
        height: 100%;
    }

    .page li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3.5vh;
    }

    .page li a {
        color: #fff;
    }

    .top {
        font-size: 16px;
    }

    .info {
        margin: 50px 15%;
        width: 70%;
    }
}