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

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

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

    .pc-brand1 {
        position: relative;
        height: 82.3rem;
    }

    .pc-brand1 .text {
        position: relative;
        background: var(--baseColorWhite);
        height: 50.3rem;
    }

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

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

    .pc-brand1 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand1Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 5.6rem;
        height: 4.6rem;
        top: 4.6rem;
        left: 17.2rem;
    }

    .pc-brand1 .text span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand1Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 63rem;
        height: 4.7rem;
        top: 7.2rem;
        left: calc(50% - 31.5rem);
    }

    .pc-brand1 .text span:nth-of-type(3) {
        background-image: url("../images/brand/pcbrand1Text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 87rem;
        height: 22rem;
        top: 18.3rem;
        left: calc(50% - 43.5rem);
    }

    .pc-brand1 .text span:nth-of-type(4) {
        background-image: url("../images/brand/pcbrand1Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 5.6rem;
        height: 4.6rem;
        top: 37.2rem;
        right: 17.2rem;
    }

    .pc-brand1 .bg {
        /*position: absolute;*/
        /*bottom: 0;*/
        background-image: url("../images/brand/pcbrand1Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 32rem;
    }

    .pc-brand2 {
        position: relative;
        height: 78.2rem;
    }

    .pc-brand2 .text {
        background-image: url("../images/brand/pcbrand2Bg1.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 46.2rem;
    }

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

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

    .pc-brand2 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand2Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 60rem;
        height: 10rem;
        top: 8rem;
        left: 18rem;
    }

    .pc-brand2 .text span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand2Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 108rem;
        height: 13.2rem;
        top: 23rem;
        left: 18rem;
    }

    .pc-brand2 .bgBox {
        background-image: url("../images/brand/pcbrand2Bg2.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 32rem;
    }

    .pc-brand3 {
        background-image: url("../images/brand/pcbrand3Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 63.4rem;
    }

    .pc-brand3 .text {
        height: 100%;
        position: relative;
    }

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

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

    .pc-brand3 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand3Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 68rem;
        height: 11rem;
        top: 8rem;
        left: 18rem;
    }

    .pc-brand3 .text span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand3Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 42.6rem;
        height: 7rem;
        top: 23rem;
        left: 18rem;
    }

    .pc-brand3 .text span:nth-of-type(3) {
        background-image: url("../images/brand/pcbrand3Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 68.4rem;
        height: 15.6rem;
        top: 35.8rem;
        left: 18rem;
    }

    .pc-brand4 {
        background-image: url("../images/brand/pcbrand4Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 63.4rem;
    }

    .pc-brand4 .left {
        position: relative;
    }

    .pc-brand4 .left span, .pc-brand4 .right span {
        display: block;
        position: absolute;
        opacity: 0;
    }

    .changeBrandPC4 .left span, .pc-brand4 .right span {
        animation: fadeInMove 1s ease-in-out forwards;
    }

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

    .pc-brand4 .left span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand4Text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 43.2rem;
        height: 2.6rem;
        top: 8.4rem;
        left: 18rem;
    }

    .pc-brand4 .left span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand4Text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 21.2rem;
        height: 2.4rem;
        top: 15.4rem;
        left: 18rem;
    }

    .pc-brand4 .left span:nth-of-type(3) {
        background-image: url("../images/brand/pcbrand4Text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 21.5rem;
        height: 21.5rem;
        top: 33.1rem;
        left: 18rem;
    }

    .pc-brand4 .left span:nth-of-type(4) {
        background-image: url("../images/brand/pcbrand4Text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 7rem;
        height: 10rem;
        top: 42.8rem;
        left: 42.4rem;
    }

    .pc-brand4 .right span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand4Text5.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 62.36rem;
        height: 56.7rem;
        top: 3.5rem;
        right: 18rem;
    }

    .pc-brand5 {
        /*background-image: url("../images/brand/pcbrand5Bg.png");*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*background-position: center;*/
        position: relative;
        height: 32rem;
        overflow: hidden;
    }

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

    .pc-brand5 .text {
        height: 100%;
        position: relative;
    }

    .pc-brand5 .text span {
        display: block;
        position: absolute;
        background-image: url("../images/brand/pcbrand5Text.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 83rem;
        height: 11.4rem;
        top: calc(50% - 5.7rem);
        right: 28.5rem;
        opacity: 0;
    }

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

    .pc-brand6 {
        background-image: url("../images/brand/pcbrand6Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 44.4rem;
    }

    .pc-brand6 .text {
        height: 100%;
        position: relative;
    }

    .pc-brand6 .text span {
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100%;
        opacity: 0;
    }

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

    .pc-brand6 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand6Text1.png");
        width: 49rem;
        height: 25rem;
        top: 8rem;
        left: 18rem;
    }

    .pc-brand6 .text span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand6Text2.png");
        width: 49rem;
        height: 30rem;
        top: 8rem;
        right: 18rem;
    }

    .pc-brand7 {
        background-image: url("../images/brand/pcbrand7Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        height: 44.5rem;
    }

    .pc-brand7 .text {
        height: 100%;
        position: relative;
    }

    .pc-brand7 .text span {
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: 100%;
        opacity: 0;
    }

    .pc-brand7 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand7Text1.png");
        width: 43.9rem;
        height: 4.8rem;
        top: 12.1rem;
        left: calc(50% - 21.95rem);
    }

    .pc-brand7 .text span:nth-of-type(2) {
        position: absolute;
        left: calc(50% + 1.2rem);
        top: 13.1rem;
        background-image: url("../images/brand/pcbrand7Logo.png");
        width: 2.6rem;
        height: 2rem;
    }

    .changeBrandPC7 .text span:nth-of-type(1), .changeBrandPC7 .text span:nth-of-type(2) {
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .changeBrandPC7 .text span:nth-of-type(3) {
        animation: fadeInMove 1s ease-in-out forwards;
    }

    .pc-brand7 .text span:nth-of-type(3) {
        position: absolute;
        background-image: url("../images/brand/pcbrand7Text2.png");
        width: 52.4rem;
        height: 13.2rem;
        top: 21.2rem;
        left: calc(50% - 26.2rem);
    }

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

    .pc-brand8 .text {
        position: relative;
        height: 100%;
    }

    .pc-brand8 .text span {
        display: block;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        opacity: 0;
    }

    .pc-brand8 .text span:nth-of-type(1) {
        background-image: url("../images/brand/pcbrand8Text1.png");
        width: 78rem;
        height: 8.8rem;
        left: calc(50% - 39rem);
        top: 8rem;
    }

    .pc-brand8 .text span:nth-of-type(2) {
        background-image: url("../images/brand/pcbrand8Text2.png");
        width: 45.7rem;
        height: 11.4rem;
        margin-bottom: 8rem;
        left: 48.2rem;
        top: 20.8rem;
    }

    .pc-brand8 .text span:nth-of-type(3) {
        background-image: url("../images/brand/pcbrand8Logo.png");
        width: 7.8rem;
        height: 7rem;
        left: calc(50% - 2rem);
        bottom: 8rem;
    }

    .changeBrandPC8 .text span:nth-of-type(1), .changeBrandPC8 .text span:nth-of-type(2) {
        animation: fadeInMoveTop 1s ease-in-out forwards;
    }

    .changeBrandPC8 .text span:nth-of-type(3) {
        animation: fadeInMove 1s ease-in-out forwards;
    }

}

@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;
    }

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

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

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

    .brand1 {
        background-color: var(--baseColorWhite);
        /*width: 100%;*/
        /*height: 100vh;*/
        /*position: relative;*/

    }

    .brand1 .text {
        position: relative;
        height: 39.5rem;
    }

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

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

    .brand1 .text span:nth-of-type(1) {
        background-image: url("../images/brand/brand1yin1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 3rem;
        height: 3rem;
        top: 3rem;
        left: 3rem;
    }

    .brand1 .text span:nth-of-type(2) {
        background-image: url("../images/brand/brand1tex1.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 27rem;
        height: 8.2rem;
        top: 7rem;
        left: 3.6rem;
    }

    .brand1 .text span:nth-of-type(3) {
        background-image: url("../images/brand/brand1text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 22.4rem;
        top: 18.7rem;
        left: 3.6rem;
    }

    .brand1 .text span:nth-of-type(4) {
        background-image: url("../images/brand/brand1yin2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 3rem;
        height: 3rem;
        top: 42rem;
        right: 3rem;
    }

    .brand1 .bg {
        /*position: absolute;*/
        /*bottom: 0;*/
        background-image: url("../images/brand/brand1Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 32rem;
    }

    .brand2 {
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*background-position: center;*/
        /*width: 100%;*/
        /*height: 100vh;*/
        /*position: relative;*/
    }

    .brand2 .text {
        height: 44.7rem;
        background-image: url("../images/brand/brand2Bg1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
    }

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

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

    .brand2 .text span:nth-of-type(1) {
        background-image: url("../images/brand/brand2text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 12.3rem;
        top: 6.4rem;
        left: 3.6rem;
    }

    .brand2 .text span:nth-of-type(2) {
        background-image: url("../images/brand/brand2text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 32rem;
        height: 16.8rem;
        top: 22.3rem;
        left: 3.6rem;
    }

    .brand2 .bg {
        /*position: absolute;*/
        /*bottom: 0;*/
        background-image: url("../images/brand/brandBg2.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 26.8rem;
    }

    .brand3 {
        background-image: url("../images/brand/brand3Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 63.1rem;
        position: relative;
    }

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

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

    .brand3 span:nth-of-type(1) {
        background-image: url("../images/brand/brand3text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 12.3rem;
        top: 6.4rem;
        left: 3.6rem;
    }

    .brand3 span:nth-of-type(2) {
        background-image: url("../images/brand/brand3text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 27rem;
        height: 5.6rem;
        top: 22.3rem;
        left: 3.6rem;
    }

    .brand3 span:nth-of-type(3) {
        background-image: url("../images/brand/brand3text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 31rem;
        height: 26.4rem;
        top: 30.3rem;
        left: 3.6rem;
    }

    .brand4 {
        background-image: url("../images/brand/brand4Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 50.3rem;
        position: relative;
    }

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

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

    .brand4 span:nth-of-type(1) {
        background-image: url("../images/brand/brand4text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 27.4rem;
        height: 5.6rem;
        top: 3.6rem;
        left: 3.6rem;
    }

    .brand4 span:nth-of-type(2) {
        background-image: url("../images/brand/brand4text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 20rem;
        height: 4.8rem;
        top: 11.7rem;
        left: 3.7rem;
    }

    .brand4 span:nth-of-type(3) {
        background-image: url("../images/brand/brand4text3.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 4rem;
        height: 2.8rem;
        top: 13rem;
        left: 25.2rem;
    }

    .brand4 span:nth-of-type(4) {
        background-image: url("../images/brand/brand4text4.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 36.7rem;
        height: 32.2rem;
        top: 15.3rem;
        left: 1.6rem;
    }

    .brand5 {
        /*background-image: url("../images/brand/brand5Bg.png");*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*background-position: center;*/
        /*width: 100%;*/
        height: 40.2rem;
        position: relative;
        overflow: hidden;
    }

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

    .brand5 span {
        display: block;
        position: absolute;
        background-image: url("../images/brand/brand5text.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 16.4rem;
        top: calc(50% - 8.2rem);
        left: calc(50% - 16.5rem);
        opacity: 0;
        z-index: 1; /* 确保背景在底层 */
    }

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

    .brand6 {
        background-image: url("../images/brand/brand6Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 46rem;
        position: relative;
    }

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

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

    .brand6 span:nth-of-type(1) {
        background-image: url("../images/brand/brand6text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 14rem;
        top: 6.4rem;
        left: 3.6rem;
    }

    .brand6 span:nth-of-type(2) {
        background-image: url("../images/brand/brand6text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 16.8rem;
        bottom: 6.4rem;
        left: 3.6rem;
    }

    .brand7 {
        background-image: url("../images/brand/brand7Bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 26.8rem;
        position: relative;
    }

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

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

    .brand7 span:nth-of-type(1) {
        background-image: url("../images/brand/brand7text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 30rem;
        height: 4.1rem;
        top: 6.8rem;
        left: calc(50% - 15rem);
    }

    .brand7 span:nth-of-type(2) {
        background-image: url("../images/brand/brand7text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 8.2rem;
        bottom: 6.2rem;
        left: calc(50% - 16.5rem);
    }

    .brand8 {
        background-color: var(--baseColorWhite);
        width: 100%;
        height: 43.1rem;
        position: relative;
    }

    .brand8 span {
        display: block;
        position: absolute;
    }

    .brand8 span:nth-of-type(1) {
        background-image: url("../images/brand/brand8text1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 33rem;
        height: 8.4rem;
        top: 6.4rem;
        left: calc(50% - 16.5rem);
        opacity: 0;
    }

    .brand8 span:nth-of-type(2) {
        background-image: url("../images/brand/brand8text2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 30rem;
        height: 8.4rem;
        top: 18.4rem;
        left: calc(50% - 15rem);
        opacity: 0;
    }

    .changeBrand8 span:nth-of-type(1), .changeBrand8 span:nth-of-type(2),.changeBrand8 span:nth-of-type(3) {
        animation: fadeInMove 1s ease-in-out forwards;
    }

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

@media (max-width: 376px) {
    .brand5 .rellax-bg {
        top: -46.2rem;
    }
}