@media screen and (max-width: 767px) {
    .introduce-page-container {
        width: 100%;
        margin: 100px 0 0 0;
    }
    .area1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    .area1 > .content {
        width: calc(100% - 40px);
    }

    .area1 > .content > .doctor-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .area1 > .content > .doctor-container > .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area1 > .content > .doctor-container > .title > .cross-box {
        position: relative;
        width: 25px;
        height: 25px;
    }

    .area1 > .content > .doctor-container > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }
    .area1 > .content > .doctor-container > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area1 > .content > .doctor-container > .title > span {
        color: #e84c2e;
        font-size: 32px;
        font-weight: 700;
    }

    .area1 > .content > .doctor-container > .information {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        position: relative;
    }
    .area1 > .content > .doctor-container > .information > .icon {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .area1 > .content > .doctor-container > .information > .doctor-pic {
        width: calc(100% - 60px);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .area1 > .content > .doctor-container > .information > .doctor-pic > img {
        width: 100%;
    }

    .area1 > .content > .doctor-container > .information > .doctor-detail {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        font-weight: 700;
        color: #676767;
        padding: 20px;
        gap: 20px;
    }

    .area1 > .content > .doctor-container > .information > .doctor-detail > ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }
    .area1 > .content > .doctor-container > .information > .doctor-detail > div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .area1 > .content > .doctor-container > .information > .doctor-detail > div > p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    /* ----- */
    .area2 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    .area2 > .content {
        width: calc(100% - 40px);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .area2 > .content > .row-line {
        width: 100%;
        height: 1px;
        background-color: #d9d9d9;
    }
    /* ----- */
    .area3 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 60px 0 40px 0;
    }

    .area3 > .content {
        width: calc(100% - 40px);
    }

    .area3 > .content > .text1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
    }
    .area3 > .content > .text1 > .img-box {
        width: 100%;
    }
    .area3 > .content > .text1 > .img-box > img {
        width: 100%;
    }
    .area3 > .content > .text1 > p {
        font-weight: 700;
        line-height: 1.5;
        white-space: pre-line;
    }

    .area3 > .content > .text2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
    }
    .area3 > .content > .text2 > .img-box {
        width: 100%; /* 设置容器宽度 */
        flex: 1;
    }
    .area3 > .content > .text2 > .img-box > img {
        width: 100%;
        object-fit: cover; /* 保持图片比例并填充整个容器，可能会裁切部分图片 */
    }
        .area3 > .content > .text2 > p {
            font-weight: 700;
            line-height: 1.5;
            flex: 1;
            white-space: pre-line;
        }

    .area3 > .content > .text3 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
    }
        .area3 > .content > .text3 > p {
            font-weight: 700;
            line-height: 1.5;
            white-space: pre-line;
        }
}

@media screen and (min-width: 768px) {
    .index-container {
        width: 100%;
    }
    .area1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    .area1 > .content {
        width: calc(100% - 40px);
        max-width: 1280px;
    }

    .area1 > .content > .doctor-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .area1 > .content > .doctor-container > .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area1 > .content > .doctor-container > .title > .cross-box {
        position: relative;
        width: 25px;
        height: 25px;
    }

    .area1 > .content > .doctor-container > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }
    .area1 > .content > .doctor-container > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area1 > .content > .doctor-container > .title > span {
        color: #e84c2e;
        font-size: 32px;
        font-weight: 700;
    }
        .area1 > .content > .doctor-container > .information {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 200px;
            padding: 20px 0 0 50px;
            position: relative;
        }

            .area1 > .content > .doctor-container > .information > .doctor-pic {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                max-width: 350px;
            }
            .area1 > .content > .doctor-container > .information > .doctor-pic > img{
                width: 100%;
            }

    .area1 > .content > .doctor-container > .information > .doctor-pic > div {
        height: 100%;
    }

    .area1 > .content > .doctor-container > .information > .icon {
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        position: absolute;
        top: 0;
        left: 50px;
    }
    .area1 > .content > .doctor-container > .information > .icon > a > img {
        width: 100%;
    }

    .area1 > .content > .doctor-container > .information > .doctor-pic > div > img {
        max-width: 400px;
    }

    .area1 > .content > .doctor-container > .information > .doctor-detail {
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        font-weight: 700;
        color: #676767;
        /* padding: 20px; */
        gap: 20px;
    }
    .area1 > .content > .doctor-container > .information > .doctor-detail > ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }
    /* ----- */
    .area2 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 80px 0;
    }

    .area2 > .content {
        width: calc(100% - 40px);
        max-width: 1280px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .area2 > .content > .row-line {
        width: 100%;
        height: 1px;
        background-color: #d9d9d9;
    }
    /* ----- */
    .area3 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    .area3 > .content {
        width: calc(100% - 40px);
        max-width: 1280px;
    }

    .area3 > .content > .text1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
    }
    .area3 > .content > .text1 > .img-box {
        width: 100%;
    }
    .area3 > .content > .text1 > .img-box > img {
        width: 100%;
    }
        .area3 > .content > .text1 > p {
            font-weight: 700;
            line-height: 1.5;
            white-space: pre-line;
        }

    .area3 > .content > .text2 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
    }
    .area3 > .content > .text2 > .img-box {
        width: 100%; /* 设置容器宽度 */
        flex: 1;
    }
    .area3 > .content > .text2 > .img-box > img {
        width: 100%;
        object-fit: cover; /* 保持图片比例并填充整个容器，可能会裁切部分图片 */
    }
        .area3 > .content > .text2 > p {
            font-weight: 700;
            line-height: 1.5;
            flex: 1;
            white-space: pre-line;
        }

    .area3 > .content > .text3 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
    }
        .area3 > .content > .text3 > p {
            font-weight: 700;
            line-height: 1.5;
            white-space: pre-line;
        }
}