@media (max-width: 512px) {
    --baseColorWhite: #FFFFFF;
    @keyframes fadeInMove {
        0% {
            opacity: 0;
            transform: translateY(5rem); /* 起始状态 */
        }
        100% {
            opacity: 1;
            transform: translateY(0); /* 结束状态 */
        }
    }
    @keyframes fadeInOpacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .page-list.case-wrapper {
        padding: 0;
    }

    .page-list-phone {
        background-color: var(--baseColorWhite);
    }

    .group0 {
        /*background-image: url("../images/group/groupBanner.png");*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*background-position: center;*/
        position: relative;
        height: 26.8rem;
        overflow: hidden; /* 隐藏超出的部分 */
    }

    .group0 .rellax-bg {
        position: absolute;
        top: 0rem;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/group/groupBanner.png");
        background-size: cover;
        background-position: center;
        z-index: 1; /* 确保背景在底层 */
    }

    .group0 .text {
        background-image: url("../images/group/grouptext.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 27rem;
        height: 8.2rem;
        position: absolute;
        top: calc(50% - 4.1rem);
        left: 3.6rem;
        z-index: 1; /* 确保背景在底层 */
    }

    .group1 {
        background-image: url("../images/group/group1Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 68rem;
        position: relative;
    }

    .group1 span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .changeGroup1 span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .group1 span:nth-of-type(1) {
        background-image: url("../images/group/group1text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 22rem;
        height: 8.2rem;
        top: 6.4rem;
        left: 3.6rem;
    }
    .group1 span:nth-of-type(2) {
        background-image: url("../images/group/group1text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 14rem;
        top: 17rem;
        left: 3.6rem;
    }
    .group1 span:nth-of-type(3) {
        background-image: url("../images/group/group1text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 30.4rem;
        height: 4.1rem;
        top: 35rem;
        left: 3.6rem;
    }
    .group1 span:nth-of-type(4) {
        background-image: url("../images/group/group1text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 19.6rem;
        top: 41.5rem;
        left: 3.6rem;
    }

    .group2 {
        background-image: url("../images/group/group2Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 26rem;
        position: relative;
    }

    .group3 {
        background-color: var(--baseColorWhite);
        width: 100%;
        /*position: relative;*/
    }

    .group3 span {
        display: block;
        /*position: absolute;*/
        opacity: 0;
    }

    .changeGroup3 span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .group3 span:nth-of-type(1) {
        background-image: url("../images/group/group3text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 32rem;
        height: 8.2rem;
        margin-top: 6rem;
        margin-left: 3.6rem;
        /*top: 6.4rem;*/
        /*left: 3.6rem;*/
    }

    .group3 span:nth-of-type(2) {
        background-image: url("../images/group/group3text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 16.8rem;
        margin-top: 2.4rem;
        margin-left: 3.6rem;
        /*top: 22.3rem;*/
        /*left: 3.6rem;*/
    }

    .group3 span:nth-of-type(3) {
        background-image: url("../images/group/group3text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 8.2rem;
        margin-top: 4rem;
        margin-left: 3.6rem;
        /*top: 30.3rem;*/
        /*left: 3.6rem;*/
    }

    .group3 span:nth-of-type(4) {
        background-image: url("../images/group/group3text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 16.8rem;
        margin-top: 2.4rem;
        margin-left: 3.6rem;
        margin-bottom: 4.7rem;
        /*top: 30.3rem;*/
        /*left: 3.6rem;*/
    }

    .group4 {
        background-image: url("../images/group/group4Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 43.2rem;
        position: relative;
    }

    .group4 span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .changeGroup4 span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .group4 span:nth-of-type(1) {
        background-image: url("../images/group/group4text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 3.6rem;
        height: 3.2rem;
        top: 6rem;
        left: 3rem;
    }
    .group4 span:nth-of-type(2) {
        background-image: url("../images/group/group4text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 32rem;
        height: 14rem;
        top: 11.4rem;
        left: calc(50% - 16rem);
    }
    .group4 span:nth-of-type(3) {
        background-image: url("../images/group/group4text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 3.6rem;
        height: 3.2rem;
        top: 26.1rem;
        right: 3rem;
    }

    .group4 span:nth-of-type(4) {
        background-image: url("../images/group/groupLogo.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 7rem;
        height: 6.4rem;
        bottom: 2.5rem;
        left: calc(50% - 3.5rem);
    }
}

@media (min-width: 512px) {
    .pc-group0 {
        /*background-image: url("../images/group/pcgroup0Bg.png");*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*background-position: center;*/
        position: relative;
        height: 61.3rem;
        overflow: hidden;
    }

    .pc-group0 .rellax-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/group/grbg1.jpg");
        background-size: cover;
        background-position: center;
        z-index: 0; /* 确保背景在底层 */
    }

    .pc-group0 .text {
        background-image: url("../images/group/pcgroup0Text.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 43.2rem;
        height: 12.96rem;
        position: absolute;
        top: 25.54rem;
        left: 16rem;
        z-index: 1; /* 确保背景在底层 */
    }

    .pc-group1 {
        background-image: url("../images/group/pcgroup1Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 85.7rem;
    }

    .pc-group1 .text span {
        display: block;
        position: absolute;
        opacity: 0;
        left: 18rem;
    }

    .changeGroupPC1 .text span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .pc-group1 .text span:nth-of-type(1) {
        background-image: url("../images/group/pcgroup1Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 28.4rem;
        height: 10rem;
        top: 8rem;
    }

    .pc-group1 .text span:nth-of-type(2) {
        background-image: url("../images/group/pcgroup1Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 85.4rem;
        height: 13.2rem;
        top: 23rem;
    }

    .pc-group1 .text span:nth-of-type(3) {
        background-image: url("../images/group/pcgroup1Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 39.8rem;
        height: 5.5rem;
        top: 44.2rem;
    }

    .pc-group1 .text span:nth-of-type(4) {
        background-image: url("../images/group/pcgroup1Text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 69.4rem;
        height: 22rem;
        top:53.7rem;
    }

    .pc-group2 {
        background-color: var(--baseColorWhite);
        background-image: url("../images/group/pcgroup2Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 92.9rem;
    }

    .pc-group3 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 75.8rem;
    }

    .pc-group3 .text span {
        display: block;
        position: absolute;
        opacity: 0;
        left: 18rem;
    }

    .changeGroupPC3 .text span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .pc-group3 .text span:nth-of-type(1) {
        background-image: url("../images/group/pcgroup3Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 61.6rem;
        height: 5.5rem;
        top: 8rem;
    }

    .pc-group3 .text span:nth-of-type(2) {
        background-image: url("../images/group/pcgroup3Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 106.4rem;
        height: 17.6rem;
        top: 17.6rem;
    }

    .pc-group3 .text span:nth-of-type(3) {
        background-image: url("../images/group/pcgroup3Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 63.6rem;
        height: 5.5rem;
        top: 43.2rem;
    }

    .pc-group3 .text span:nth-of-type(4) {
        background-image: url("../images/group/pcgroup3Text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 108rem;
        height: 13.2rem;
        top:52.6rem;
    }

    .pc-group4 {
        background-image: url("../images/group/pcgroup4Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 61.6rem;
    }

    .pc-group4 .text span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .pc-group4 .text span:nth-of-type(1) {
        background-image: url("../images/group/pcgroup4Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 5.6rem;
        height: 4.6rem;
        top: 12rem;
        left: 18rem;
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .pc-group4 .text span:nth-of-type(2) {
        background-image: url("../images/group/pcgroup4Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 54rem;
        height: 22rem;
        top: 16rem;
        left: calc(50% - 27rem);
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .pc-group4 .text span:nth-of-type(3) {
        background-image: url("../images/group/pcgroup4Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 5.6rem;
        height: 4.6rem;
        top: 34.5rem;
        right: 18rem;
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .pc-group4 .text span:nth-of-type(4) {
        background-image: url("../images/group/pcgroupLogo.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 7.8rem;
        height: 7rem;
        bottom: 8rem;
        left: calc(50% - 3.9rem);
        animation: fadeInMove 1s ease-in-out forwards;
    }

}