@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,
    .container-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;
        background-color: var(--baseColorWhite);
    }

    .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);
    }

    .group5 {
        width: 100%;
        height: 20.6rem;
        position: relative;
    }

    .group5 span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .changeGroup5 span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .group5 span:nth-of-type(1) {
        background-image: url("../images/group/group5text.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 14rem;
        top: 4rem;
        left: calc(50% - 16.5rem);
    }

    .group6 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 25.8rem;
    }

    .group6 .swiper-wrapper .img {
        display: flex;
        justify-content: center;
    }

    .group6 .swiper-wrapper .img img {
        width: 100%;
        height: 20.8rem;
        margin: 0 auto;
    }

    .group6 #main-slider-pagination {
        bottom: 2.7rem;
    }

    .group6 #main-slider-pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        background-color: var(--baseColorWhite);
        border: 0.01rem solid #999999;
        border-radius: 5rem;
    }

    .group6 #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
        margin-left: 1.4rem;
    }

    .group6 #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 1rem;
        height: 1rem;
        border: none;
        background-color: var(--menuColor);
    }

    .group6 .main-slider__nav .swiper-button-next,
    .group6 .main-slider__nav .swiper-button-prev {
        display: none;
    }

    .group7 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 25.8rem;
    }

    .group7 .swiper-wrapper .img {
        display: flex;
        justify-content: center;
    }

    .group7 .swiper-wrapper .img img {
        width: 100%;
        height: 20.8rem;
        margin: 0 auto;
    }

    .group7 #main-slider-pagination {
        bottom: 2.7rem;
    }

    .group7 #main-slider-pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        background-color: var(--baseColorWhite);
        border: 0.01rem solid #999999;
        border-radius: 5rem;
    }

    .group7 #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
        margin-left: 1.4rem;
    }

    .group7 #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 1rem;
        height: 1rem;
        border: none;
        background-color: var(--menuColor);
    }

    .group7 .main-slider__nav .swiper-button-next,
    .group7 .main-slider__nav .swiper-button-prev {
        display: none;
    }

    .group8 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 29.1rem;
    }

    .group8 .swiper-wrapper .img {
        display: flex;
        justify-content: center;
    }

    .group8 .swiper-wrapper .img img {
        width: 100%;
        height: 20.8rem;
        margin: 0 auto;
    }

    .group8 #main-slider-pagination {
        bottom: 5.5rem;
    }

    .group8 #main-slider-pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        background-color: var(--baseColorWhite);
        border: 0.01rem solid #999999;
        border-radius: 5rem;
    }

    .group8 #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
        margin-left: 1.4rem;
    }

    .group8 #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 1rem;
        height: 1rem;
        border: none;
        background-color: var(--menuColor);
    }

    .group8 .main-slider__nav .swiper-button-next,
    .group8 .main-slider__nav .swiper-button-prev {
        display: none;
    }
}

@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;
    }

    .pc-group5 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 29.5rem;
    }

    .pc-group5 .text span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .pc-group5 .text span:nth-of-type(1) {
        background-image: url("../images/group/pcgroup5Text.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 108rem;
        height: 13.2rem;
        top: 11.4rem;
        left: calc(50% - 54rem);
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .pc-group6 {
        background-color: var(--baseColorWhite);
        position: relative;
        height: 61.7rem;
    }

    .pc-group6 .swiper-wrapper .img {
        /* width: 108rem;
        height: 55.9rem; */
        display: flex;
        justify-content: center;
    }

    .pc-group6 .swiper-wrapper .img img {
        width: 108rem;
        height: 55.9rem;
        margin: 0 auto;
    }

    .pc-group6 #main-slider-pagination {
        bottom: 2.9rem;
    }

    .pc-group6 #main-slider-pagination .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        background-color: var(--baseColorWhite);
        border: 0.01rem solid #999999;
        border-radius: 5rem;
    }

    .pc-group6 #main-slider-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
        margin-left: 1.4rem;
    }

    .pc-group6 #main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 1rem;
        height: 1rem;
        border: none;
        background-color: var(--menuColor);
    }

    .pc-group6 .main-slider__nav .swiper-button-next,
    .pc-group6 .main-slider__nav .swiper-button-prev {
        display: none;
    }

    .pc-group7 {
        background-color: var(--baseColorWhite);
        position: relative;
        /* height: 79.3rem; */
        height: 17.6rem;
    }

    .pc-group7 .text span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .pc-group7 .text span:nth-of-type(1) {
        background-image: url("../images/group/pcgroup7Bg.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 108rem;
        height: 55.9rem;
        top: 0rem;
        left: calc(50% - 54rem);
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

}