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

    body {
        color: #333; /* 字体颜色 */
        margin: 0;
        padding: 1rem;
        background-color: #f5f5f5; /* 背景色 */
        background-size: cover;
    }

    .designSearchDiv { /* 显示查询设计的根div */
        display: none;
    }

    .operateDiv { /* 查询div */
        text-align: center; /* 文本居中 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.5rem; /* 外边距 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .operateDiv h1 {
        font-size: 2.5rem; /* 使用像素单位 */
        text-align: center; /* 使内容居中 */
    }

    .operateDiv h1 a {
        color: #041e34; /* 字体颜色 */
        text-decoration: none;
    }

    .operateDiv input {
        width: 40%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        font-size: 0.7rem; /* 字体大小 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
        outline: none; /* 去掉默认的聚焦轮廓 */
    }

    .operateDiv button {
        padding: 0.7rem 1.4rem; /* 内边距 */
        font-size: 0.7rem; /* 字体大小 */
        color: white; /* 字体颜色 */
        background-color: #9d90f5; /* 按钮背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .hotwordDiv {
        display: flex; /* 使用 Flexbox 布局 */
        flex-wrap: wrap; /* 允许换行，如果容器宽度不足 */
        justify-content: center; /* 水平居中 */
        margin: 0.5rem 0.5rem -0.5rem 0.5rem;
    }

    .hotwordDiv p {
        font-size: 1rem; /* 使用像素单位 */
        color: #4c08f8;
        text-align: center; /* 使内容居中 */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
        cursor: pointer; /* 鼠标指针 */
    }

    .displayDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dynamic-newDiv {
        min-width: 86%;
        display: flex;
        flex-direction: column;
        background-color: #f0f8ff;
        border: 0.1rem solid #4682b4;
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 1.5rem;
    }

    .dynamic-newTitleDiv {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        border-radius: 0.2rem;
        background-color: #c8e3f1;
    }

    .dynamic-newTitleDiv a {
        font-size: 1.7rem;
        color: #1e1f2f;
        text-decoration: none;
        text-align: center;
    }

    .dynamic-newMainImgDiv {
        display: flex;
        justify-content: center;
        border-radius: 0.2rem;
        /*margin-bottom: 0.2rem;*/
    }

    .dynamic-newMainImgDiv img {
        max-width: 90%;
        height: auto;
        border-radius: 0.5rem;
    }

    .dynamic-newOverviewDiv {
        max-height: 40vh;
        display: flex;
        justify-content: center;
        text-align: justify;
        border-radius: 0.2rem;
        overflow-y: auto;
    }

    .dynamic-newOverviewDiv p {
        font-size: 1.5rem;
        color: #0e0e15;
        line-height: 1.5;
        padding: 0.2rem 0.8rem;
        margin: 0.2rem;
    }

    .displayMoreDiv { /* 更多按钮div */
        display: flex; /* 启用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        background-color: #ffffff; /* 背景颜色 */
        border: 0.1rem solid #ffffff; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .displayMoreButton {
        padding: 0.7rem 1.4rem; /* 内边距 */
        font-size: 0.8rem; /* 字体大小 */
        color: white; /* 字体颜色 */
        background-color: #9d90f5; /* 按钮背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .titleDiv {
        padding: 1rem;
        background-color: #f5f6f6; /* 头部背景颜色 */
    }

    .titleDiv h1{
        font-size: 2rem; /* 使用像素单位 */
        text-align: center; /* 内容水平居中 */
        padding: 1rem;
        margin: -1rem 0 -1rem 0; /* 添加上下间距 */
        color: #13186b;
    }

    .titleDiv h2{
        font-size: 1.5rem; /* 使用像素单位 */
        text-align: center; /* 内容水平居中 */
        padding: 1rem;
        color: #13186b;
    }

    .designDetailsDiv { /* 显示设计详情的根div */
        display: none;
    }

    .detailsDiv {
        display: flex;
        flex-direction: column; /* 垂直排列子元素 */
        align-items: center; /* 水平居中 */
        padding: 1rem;
        background-color: white;
        border-radius: 0.4rem;
        box-shadow: 0 0.2rem 0.5rem rgb(200, 227, 241);
    }

    .abstractDiv {
        width: 90%;
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .abstractDiv P {
        font-size: 1.3rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 0.2rem 1rem;
    }

    .videoDiv {
        width: 90%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        margin: 1rem 0; /* 添加上下间距 */
    }

    .videoDiv iframe {
        height: 30rem; /* 设置高度 */
        border: none; /* 不显示边框 */
        border-radius: 0.2rem;
    }

    .materialDiv, .functionDiv {
        width: 90%;
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .materialDiv h2, .functionDiv h2 {
        text-align: center; /* 水平居中 */
        font-size: 1.3rem; /* 设置字体大小 */
        margin: 0 0; /* 添加上下左右间距 */
        color: #212231; /* 设置字体颜色 */
    }

    .materialDiv ul, .functionDiv ol {
        font-size: 1.3rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 1rem 1rem 1rem -1rem; /* 上下外边距，左右外边距 */
    }

    .programDiv, .circuitryDiv, .inclusionDiv {
        width: 90%;
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .programDiv h2, .circuitryDiv h2, .inclusionDiv h2{
        text-align: center; /* 水平居中 */
        font-size: 1.3rem; /* 设置字体大小 */
        margin: 0 0; /* 添加上下左右间距 */
        color: #212231; /* 设置字体颜色 */
    }

    .programDiv p, .circuitryDiv p, .inclusionDiv p {
        font-size: 1.3rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 1rem 1rem 0rem 1rem; /* 上右下左外边距 */
    }

    .programDiv img, .circuitryDiv img, .inclusionDiv img {
        width: 90%;
        /*height: 500px; !* 设置高度 *!*/
        border-radius: 0.2rem;
        margin: 1rem 0.5rem; /* 添加上下左右间距 */
        display: inline-block; /* 使其能够使用 margin:auto */
    }

    .buyDiv {
        width: 90%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .buyBeforeP {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
        text-decoration: line-through;
    }

    .buyNowP {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
    }

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

    .downloadDiv {
        width: 90%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .downloadDiv p {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
    }

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

    .lookMoreDiv {
        width: 90%;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .lookMoreDiv a {
        color: #1f05bb;
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
    }
}


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

    body {
        color: #333; /* 字体颜色 */
        margin: 0;
        padding: 1rem;
        background-color: #f5f5f5; /* 背景色 */
        background-size: cover;
    }

    .designSearchDiv { /* 显示查询设计的根div */
        display: none;
    }

    .searchDiv { /* 查询div */
        text-align: center; /* 文本居中 */
        background-color: #f0f8ff; /* 背景颜色 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.5rem; /* 外边距 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
        font-family: Arial, sans-serif; /* 字体 */
        color: #333; /* 字体颜色 */
    }

    .operateDiv h1 {
        font-size: 2rem; /* 使用像素单位 */
        text-align: center; /* 使内容居中 */
    }

    .operateDiv h1 a {
        color: #041e34;
        text-decoration: none;
    }

    .operateDiv input {
        width: 40%; /* 设置输入框宽度 */
        padding: 0.6rem 0.7rem; /* 内边距 */
        font-size: 0.7rem; /* 字体大小 */
        border: 0.1rem solid #9ed3ef; /* 边框样式 */
        border-radius: 0.2rem; /* 圆角 */
        outline: none; /* 去掉默认的聚焦轮廓 */
        transition: border-color 0.3s; /* 边框颜色过渡效果 */
    }

    .operateDiv button {
        padding: 0.7rem 1.4rem; /* 内边距 */
        font-size: 0.7rem; /* 字体大小 */
        color: white; /* 字体颜色 */
        background-color: #9d90f5; /* 按钮背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        cursor: pointer; /* 鼠标指针 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .hotwordDiv {
        display: flex; /* 使用 Flexbox 布局 */
        flex-wrap: wrap; /* 允许换行，如果容器宽度不足 */
        justify-content: center; /* 水平居中 */
        margin: 0.5rem 0.5rem -0.5rem 0.5rem;
    }

    .hotwordDiv p {
        font-size: 1rem; /* 使用像素单位 */
        color: #4c08f8;
        text-align: center; /* 使内容居中 */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem;
        cursor: pointer; /* 鼠标指针 */
    }

    .displayDiv {
        display: flex;
        flex-direction: column; /* 垂直排列子元素 */
        align-items: center; /* 水平居中 */
    }

    .dynamic-newDiv { /* 动态创建div */
        width: 80%; /* 每个子div宽度为 */
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 水平居中 */
        border: 0.1rem solid #4682b4; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        background-color: #f0f8ff; /* 背景颜色 */
        padding: 1rem; /* 内边距 */
        margin: 1rem; /* 外边距 */
    }

    .dynamic-newTitleDiv {
        flex: 1 0 100%; /* 第一行占满整行 */
        display: flex;
        justify-content: center;
        border-radius: 0.2rem;
        background-color: #c8e3f1;
        padding: 0.5rem 0.7rem;
        margin: 0 2rem 1rem 2rem;
        transition: transform 0.3s, opacity 0.3s;
    }
    .dynamic-newTitleDiv:hover {
        transform: scale(1.01); /* 悬停时放大 */
        opacity: 0.9; /* 悬停时透明度变化 */
    }

    .dynamic-newTitleDiv a {
        font-size: 1.5rem;
        color: #1e1f2f;
        text-decoration: none;
        text-align: center;
    }

    .dynamic-newMainImgDiv {
        width: 48%;
        height: 40vh;
        display: flex;
        justify-content: center;
        margin: 0 0.2rem 0 0;
    }

    .dynamic-newMainImgDiv img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 保持比例，覆盖整个容器 */
        border-radius: 0.5rem;
    }

    .dynamic-newOverviewDiv {
        width: 48%;
        max-height: 40vh;
        display: flex;
        justify-content: center;
        overflow-y: auto; /* 超出内容时显示滚动条 */
        background-color: #e4eff5;
        border-radius: 0.5rem;
        margin: 0 0 0 0.2rem ;
    }

    .dynamic-newOverviewDiv p {
        font-size: 1.2rem;
        color: #0e0e15;
        line-height: 1.5;
        text-align: justify;
        padding: 0.2rem 0.8rem;
        margin: 0.2rem;
    }

    .displayMoreDiv { /* 更多按钮div */
        display: flex; /* 启用 Flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        background-color: #ffffff; /* 背景颜色 */
        border: 0.1rem solid #ffffff; /* 边框 */
        border-radius: 0.5rem; /* 圆角 */
        padding: 1rem; /* 内边距 */
        margin: 1.4rem; /* 外边距 */
        box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); /* 阴影效果 */
    }

    .displayMoreButton {
        font-size: 0.8rem; /* 字体大小 */
        color: white; /* 字体颜色 */
        cursor: pointer; /* 鼠标指针 */
        background-color: #9d90f5; /* 按钮背景色 */
        border: none; /* 无边框 */
        border-radius: 0.2rem; /* 圆角 */
        padding: 0.7rem 1.4rem; /* 内边距 */
    }

    .titleDiv {
        padding: 1rem;
        background-color: #f5f6f6; /* 头部背景颜色 */
    }

    .titleDiv h1{
        font-size: 2rem; /* 使用像素单位 */
        text-align: center; /* 内容水平居中 */
        padding: 1rem;
        margin: -1rem 0 -1rem 0; /* 添加上下间距 */
        color: #13186b;
    }

    .titleDiv h2{
        font-size: 1.5rem; /* 使用像素单位 */
        text-align: center; /* 内容水平居中 */
        padding: 1rem;
        color: #13186b;
    }

    .designDetailsDiv { /* 显示设计详情的根div */
        display: none;
    }

    .detailsDiv {
        max-width: 1440px;
        min-width: 768px;
        margin: auto;
        padding: 1rem;
        background-color: white;
        border-radius: 0.4rem;
        box-shadow: 0 0.2rem 0.5rem rgb(200, 227, 241);
    }

    .abstractDiv {
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .abstractDiv P {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 0.2rem 1rem;
    }

    .videoDiv {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        margin: 1rem 0; /* 添加上下间距 */
    }

    .videoDiv iframe {
        width: 50%;
        height: 34rem; /* 设置高度 */
        border: none; /* 不显示边框 */
        border-radius: 0.2rem;
    }

    .materialDiv, .functionDiv {
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .materialDiv h2, .functionDiv h2 {
        text-align: center; /* 水平居中 */
        font-size: 1.3rem; /* 设置字体大小 */
        margin: 0 0; /* 添加上下左右间距 */
        color: #212231; /* 设置字体颜色 */
    }

    .materialDiv ul, .functionDiv ol {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
    }

    .programDiv, .circuitryDiv, .inclusionDiv {
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #fafafa; /* 内容区背景 */
    }

    .programDiv h2, .circuitryDiv h2, .inclusionDiv h2{
        text-align: center; /* 水平居中 */
        font-size: 1.3rem; /* 设置字体大小 */
        margin: 0 0; /* 添加上下左右间距 */
        color: #212231; /* 设置字体颜色 */
    }

    .programDiv p, .circuitryDiv p, .inclusionDiv p {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: justify; /* 设置段落文本为两端对齐 */
        margin: 1rem 1rem 0rem 1rem; /* 上右下左外边距 */
    }

    .programDiv img, .circuitryDiv img, .inclusionDiv img {
        width: 70%;
        /*height: 500px; !* 设置高度 *!*/
        border-radius: 0.2rem;
        margin: 1rem 0.5rem; /* 添加上下左右间距 */
        display: inline-block; /* 使其能够使用 margin:auto */
    }

    .buyDiv {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .buyBeforeP {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
        text-decoration: line-through;
    }

    .buyNowP {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
    }

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

    .downloadDiv {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .downloadDiv p {
        font-size: 1rem; /* 设置字体大小 */
        line-height: 2; /* 设置行距 */
        text-align: center; /* 设置段落文本为居中对齐 */
        margin: 1rem 1rem; /* 上下外边距，左右外边距 */
    }

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

    .lookMoreDiv {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（可选） */
        text-align: center; /* 使子元素水平居中 */
        margin: 1rem 1rem;
        padding: 0.7rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        background-color: #ebeeee; /* 内容区背景 */
    }

    .lookMoreDiv a {
        color: #1f05bb;
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
    }
}