@media (max-width: 768px) {
    html {
        font-size: 10px !important;
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f0f8ff; /* 背景颜色 */
        background-size: cover;
    }

    .createProjectDiv {
        display: flex;
        flex-direction: column; /* 垂直排列子元素 */
        text-align: left; /* 文本居中 */
        font-size: 1rem; /* 字体大小 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
    }

    .createProjectDiv p {
        font-size: 1.3rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: 0.5rem 1rem 1rem 0.5rem; /* 添加上右下左间距 */
    }

    .createProIdInput {
        font-size: 1.3rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 67%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: -1rem 1rem 1rem 1rem; /* 添加上右下左间距 */
        background-color: #e4e4f1; /* 背景色 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
    }

    .createProNameSelect {
        font-size: 1.3rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 70%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: -1rem 1rem 1rem 1rem; /* 添加上右下左间距 */
        background-color: #e4e4f1; /* 背景色 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
    }

    .createProjectButton {
        font-size: 1.3rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        padding: 0.7rem 1.4rem; /* 内边距 */
        margin: 2rem 1rem 1rem 1rem; /* 添加上右下左间距 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .displayProjectDiv {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 垂直居中对齐 */
        align-items: flex-start; /* 水平靠左对齐 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 10px; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
    }

    .dynamic-div {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 12rem; /* 定义方形框的宽度 */
        height: auto; /* 定义方形框的高度 */
        background-color: #caefe3;
        margin: 1.4rem; /* 添加间距 */
        border: 1px solid #000; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 0.7rem 1.4rem; /* 内边距 */
    }

    .dynamic-b1 {
        width: 100%;
        padding: 0.5rem 3rem; /* 内边距 */
        margin: 0rem 0rem 0.5rem 0rem; /* 添加上右下左间距 */
        font-size: 1.2rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .dynamic-b2 {
        width: 100%;
        padding: 0.5rem 0.7rem; /* 内边距 */
        margin: 0.5rem 0rem 0rem 0rem; /* 添加上右下左间距 */
        font-size: 1.2rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .moreProjectDiv {
        font-size: 2rem; /* 字体大小 */
        color: #1d1e2c; /* 字体颜色 */
        width: auto; /* 定义方形框的宽度 */
        height: 2rem; /* 定义方形框的高度 */
        background-color: #caefe3;
        margin: 1.4rem; /* 添加间距 */
        border: 1px solid #000; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 0.7rem 1.4rem; /* 内边距 */
        display: flex; /* 启用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        cursor: pointer; /* 设置鼠标悬停时的样式 */
    }
}


@media (min-width: 768px) {
    html {
        font-size: 21px !important;
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem; /* 默认字体大小 */
        margin: 0;
        padding: 0;
        background-color: #f0f8ff; /* 背景颜色 */
        background-size: cover;
        min-width: 1500px;
    }

    .createProjectDiv {
        display: flex; /* 使用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        font-size: 1rem; /* 字体大小 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
    }

    .createProjectDiv p {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: 1rem 0rem 1rem 1rem; /* 添加上右下左间距 */
    }

    .createProIdInput {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 20%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: 1rem 1rem 1rem 0; /* 添加上右下左间距 */
        background-color: #e4e4f1; /* 背景色 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
    }

    .createProNameSelect {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 20%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: 1rem 1rem 1rem 0; /* 添加上右下左间距 */
        background-color: #e4e4f1; /* 背景色 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
    }

    .createProjectButton {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        margin: 1rem; /* 外边距 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .displayProjectDiv {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 垂直居中对齐 */
        align-items: flex-start; /* 水平靠左对齐 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 10px; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
    }

    .dynamic-div {
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        width: 12rem; /* 定义方形框的宽度 */
        height: auto; /* 定义方形框的高度 */
        background-color: #caefe3;
        margin: 1.4rem; /* 添加间距 */
        border: 1px solid #000; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 0.7rem 1.4rem; /* 内边距 */
    }

    .dynamic-b1 {
        padding: 0.5rem 0.7rem; /* 内边距 */
        margin: 0.5rem 0.5rem 0.5rem 0rem; /* 添加上右下左间距 */
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .dynamic-b2 {
        padding: 0.5rem 0.7rem; /* 内边距 */
        margin: 0.5rem 0rem 0.5rem 0.5rem; /* 添加上右下左间距 */
        font-size: 1rem; /* 字体大小 */
        color: #1e1f2f; /* 字体颜色 */
        background-color: #e4e4f1; /* 背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
    }

    .moreProjectDiv {
        font-size: 2rem; /* 字体大小 */
        color: #1d1e2c; /* 字体颜色 */
        width: 12rem; /* 定义方形框的宽度 */
        height: auto; /* 定义方形框的高度 */
        background-color: #caefe3;
        margin: 1.4rem; /* 添加间距 */
        border: 1px solid #000; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 0.7rem 1.4rem; /* 内边距 */
        display: flex; /* 启用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        cursor: pointer; /* 设置鼠标悬停时的样式 */
    }
}