@media screen and (min-width: 768px) {
    .box {
        background-color: #F6F7FA;
        display: flex;
        flex-direction: column;
        gap: 50px;

        .px-box {
            display: none;
        }

        .h1 {
            position: relative;

            .h1-po {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                background: rgba(105, 101, 101, .6);

                .h1-a {
                    position: relative;
                    height: 100%;

                    /* position: absolute; */
                    .h1-b {
                        height: 100%;
                        padding: 20px 0;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        box-sizing: border-box;
                        border-top-left-radius: 10px;
                        border-bottom-left-radius: 10px;
                        color: #ccc;
                    }

                    .h1-b-item {
                        height: calc(100% / 10);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        padding: 10px;
                        color: #fff;


                        &:hover {
                            background-color: #7545E8;
                            color: #fff;
                        }

                        &:hover .h1-ab {
                            display: flex;
                        }
                    }

                    .h1-ab {
                        height: 100%;

                        position: absolute;
                        top: 0;
                        left: 100%;
                        z-index: 2;
                        width: max-content;
                        background: #fff;
                        padding: 20px;
                        box-sizing: border-box;
                        margin-left: -1px;
                        border-top-right-radius: 10px;
                        border-bottom-right-radius: 10px;
                        display: none;
                        flex-direction: column;
                        flex-wrap: wrap;

                        .h1-ab-item {
                            height: calc(100% / 6);
                            display: flex;
                            align-items: center;
                            gap: 20px;
                            cursor: pointer;
                            padding: 10px;
                            color: #000000;
                            min-width: 130px;
                            flex-direction: column;

                            &:hover {
                                color: #7545E8;
                            }

                            .h1-ab-item-t {}
                        }
                    }
                }
            }


        }

        .f1 {

            background: url(./img/index/floo1bg.png) no-repeat;
            background-size: cover;
            background-color: #ffffff;

            .f1-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f1-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f1-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .advant-box {
                display: flex;
                flex-wrap: wrap;
                gap: 90px;


                .advant-item {
                    width: calc(100% / 3 - 90px);
                    margin-left: 20px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    gap: 30px;


                }
            }
        }

        .f2 {
            background-color: #ffffff;

            .f2-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f2-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f2-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f2-d {
                text-decoration: underline;
            }

            .services-box {
                /* display: flex;
                        flex-wrap: wrap;
                         */
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 90px;

                .services-item {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                }
            }
        }

        .f3 {
            height: 100%;
            background: url(../img/index/floo2bg.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            padding: 80px 0;

            .f3-a {
                font-size: 20px;
                color: #FFFFFF;
            }

            .f3-b {
                color: #F9C869;
                font-size: 30px;
                font-weight: 700;
                margin: 20px 0;
            }

            .f3-c {
                display: flex;
                gap: 30px;
                justify-content: center;

                .f3-c-text {
                    padding: 0 25px;
                    border-radius: 4px 4px 4px 4px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    line-height: 51px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    font-weight: 400;
                    font-size: 20px;
                }

                .f3-c-bt1 {
                    background: #723AFF;
                    color: #FFFFFF;
                    line-height: 51px;
                }

                .f3-c-bt2 {
                    background: #FFFFFF;
                    color: #723AFF;
                }
            }
        }

        .f4 {
            padding: 70px 10px;
            background-color: #ffffff;

            .f4-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f4-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f4-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f4-d {
                display: flex;
                gap: 50px;

                .f4-d-l {
                    width: 50%;

                    .f4-d-l-i {
                        margin-top: 30px;

                        .f4-b-box {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            flex-wrap: wrap;

                            .f4-i-t {
                                flex-shrink: 0;
                                background: #F8F8F8;
                                border-radius: 6px;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-size: 14px;
                                color: #606060;
                                line-height: 18px;
                                text-align: center;
                                padding: 10px 35px;
                                cursor: pointer;

                            }

                            .f4-i-t-act {
                                background: #723AFF;
                                color: #fff;
                            }
                        }

                    }
                }

                .f4-d-r {
                    display: flex;
                    flex: 1;
                    justify-content: center;
                }
            }
        }

        .f5 {
            text-align: center;
            padding: 70px 0;
            background-color: rgb(106, 77, 235);

            .f5-a {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 22px;
                color: #FFFFFF;
                line-height: 33px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f5-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 13px;
                color: #EBEBEB;
                line-height: 13px;
                text-align: left;
                font-style: normal;
                text-transform: none;

            }

            .f5-boder {
                display: flex;
                align-items: center;
                margin: 0 30px;
            }

            .f5-d {
                display: flex;
                justify-content: center;

                .f5-d-i {

                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
            }

            .phone-img {
                display: none;
            }
        }

        .f6 {
            padding: 80px 0;
            background-color: #fff;

            .f6-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f6-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f6-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f6-box {
                display: flex;
                gap: 50px;

                .f6-i {
                    flex: 1;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
                    border-radius: 9px 9px 9px 9px;
                    padding: 45px 25px 20px 25px;
                    transition: all 0.3s ease-in-out;

                    &:hover {
                        background-color: #7545E8;
                        cursor: pointer;
                        transform: scale(110%);


                        .f6-i-a {
                            color: #fff;
                        }

                        .f6-i-b {
                            color: #fff;
                        }

                        .f6-i-c {
                            color: #fff;
                        }

                        .f6-i-d {
                            color: #fff;
                        }
                    }

                    .f6-i-a {
                        color: #989898;
                        font-size: 12px;
                        font-weight: 600;
                    }

                    .f6-i-b {
                        color: #262626;
                        font-size: 16px;
                        font-weight: bold;
                        margin: 20px 0;
                    }

                    .f6-i-c {
                        color: #989898;
                        margin-bottom: 40px;
                    }

                    .f6-i-d {
                        color: #7545E8;
                        font-size: 12px;
                    }
                }
            }

        }

        .swiper-f6 {
            background-color: #ffffff;
            padding: 80px 0;

            .f6-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f6-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f6-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            /* 走马灯容器样式 */
            .marquee-container {
                width: 1200px;
                height: 200px;
                overflow: hidden;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

            /* 走马灯内容样式 */
            .marquee-content {
                display: flex;
                gap: 20px;
                position: absolute;
                top: 0;
                left: 0%;
                cursor: pointer;
                white-space: nowrap;

                &:hover {
                    transform: scale(110%);
                }

                img {
                    width: 200px;
                    height: 200px;
                }
            }

            /* 单个项目样式 */
            .marquee-item {
                width: 200px;
                height: 100px;
                background-color: #f0f0f0;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
            }
        }

        .f7 {
            padding: 80px 0;
            background-color: #F6F7FA;

            .f7-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f7-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f7-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .input-s {
                flex: 1;
                padding: 10px 0;
                padding-left: 25px;
            }

            .input-s1 {
                margin-top: 20px;
                width: 100%;
                min-height: 160px;
                padding: 20px;
            }

            .f7-btn {
                width: 300px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: #723AFF;
                border-radius: 8px 8px 8px 8px;
                color: #fff;
                margin-top: 40px;
            }
        }
    }
}



@media screen and (max-width: 768px) {
    .box {
        .h1-b-item {
            display: none;
        }

        .h1-ab {
            display: none;
        }


        .f1 {
            padding: 50px 16px;
            background: url(./img/index/floo1bg.png) no-repeat;
            background-size: cover;

            .f1-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f1-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f1-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .advant-box {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;

                .advant-item {
                    flex-shrink: 0;
                    width: calc(100%);
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    padding: 5px;
                    border-radius: 15px;
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
                }
            }
        }

        .f2 {

            padding: 50px 16px;

            .f2-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f2-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f2-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f2-d {
                text-decoration: underline;
            }

            .services-box {

                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;

                .services-item {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                }
            }
        }

        .f3 {
            height: 100%;
            background: url(../img/index/floo2bg.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            padding: 80px 16px;

            .f3-a {
                font-size: 20px;
                color: #FFFFFF;
            }

            .f3-b {
                color: #F9C869;
                font-size: 30px;
                font-weight: 700;
                margin: 20px 0;
            }

            .f3-c {
                display: flex;
                gap: 30px;
                flex-direction: column;
                justify-content: center;

                .f3-c-text {

                    padding: 0 25px;
                    border-radius: 4px 4px 4px 4px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    line-height: 51px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    font-weight: 400;
                    font-size: 20px;
                }

                .f3-c-bt1 {
                    margin: 0 auto;
                    width: 300px;
                    background: #723AFF;
                    color: #FFFFFF;
                    line-height: 51px;
                }

                .f3-c-bt2 {
                    margin: 0 auto;
                    width: 300px;
                    background: #FFFFFF;
                    color: #723AFF;
                }
            }
        }

        .f4 {
            padding: 50px 16px;

            .f4-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f4-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f4-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f4-d {
                display: flex;
                flex-direction: column;
                gap: 50px;

                .f4-d-l {
                    width: 100%;


                    .f4-d-l-i {
                        margin-top: 30px;

                        .f4-b-box {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            flex-wrap: wrap;

                            .f4-i-t {
                                flex-shrink: 0;
                                background: #F8F8F8;
                                border-radius: 6px;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-size: 14px;
                                color: #606060;
                                line-height: 18px;
                                text-align: center;
                                padding: 10px 35px;
                            }

                            .f4-i-t-act {
                                background: #723AFF;
                                color: #fff;
                            }
                        }

                    }
                }

                .f4-d-r {
                    display: flex;
                    flex: 1;
                    justify-content: center;
                }
            }
        }

        .f5 {
            text-align: center;
            padding: 50px 16px;
            background-color: rgb(106, 77, 235);

            .f5-a {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 22px;
                color: #FFFFFF;
                line-height: 33px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f5-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 13px;
                color: #EBEBEB;
                line-height: 13px;
                text-align: left;
                font-style: normal;
                text-transform: none;

            }

            .f5-boder {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0 30px;
            }

            .f5-d {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .f5-d-i {
                    display: flex;

                    align-items: center;
                    gap: 4px;
                }
            }

            .pc-img {
                display: none;
            }

            .phone-img {
                width: 30px;
                height: 50px;
            }
        }

        .f6 {
            padding: 50px 16px;

            .f6-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f6-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f6-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .f6-box {
                display: flex;
                flex-direction: column;
                gap: 50px;

                .f6-i {
                    flex: 1;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
                    border-radius: 9px 9px 9px 9px;
                    padding: 45px 25px 20px 25px;

                    &:hover {
                        background-color: #7545E8;
                        cursor: pointer;

                        .f6-i-a {
                            color: #fff;
                        }

                        .f6-i-b {
                            color: #fff;
                        }

                        .f6-i-c {
                            color: #fff;
                        }

                        .f6-i-d {
                            color: #fff;
                        }
                    }

                    .f6-i-a {
                        color: #989898;
                        font-size: 12px;
                        font-weight: 600;
                    }

                    .f6-i-b {
                        color: #262626;
                        font-size: 16px;
                        font-weight: bold;
                        margin: 20px 0;
                    }

                    .f6-i-c {
                        color: #989898;
                        margin-bottom: 40px;
                    }

                    .f6-i-d {
                        color: #7545E8;
                        font-size: 12px;
                    }
                }
            }

        }

        .swiper-f6 {
            padding: 80px 0;
            overflow: hidden;

            .f6-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f6-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f6-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            /* 走马灯容器样式 */
            .marquee-container {

                width: 1200px;
                height: 150px;
                overflow: hidden;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

            /* 走马灯内容样式 */
            .marquee-content {
                display: flex;
                gap: 20px;
                position: absolute;
                top: 0;
                left: 0%;
                white-space: nowrap;

                img {
                    width: 200px;
                    height: 200px;
                }
            }

            /* 单个项目样式 */
            .marquee-item {
                width: 50px;
                height: 100px;
                background-color: #f0f0f0;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
            }
        }

        .f7 {
            padding: 50px 16px;
            background-color: #F6F7FA;

            .f7-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f7-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f7-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
            }

            .input-s {
                flex: 1;
                padding: 10px 0;
                padding-left: 25px;
            }

            .input-s1 {
                margin-top: 20px;
                width: 100%;
                min-height: 160px;
                padding: 20px;
            }

            .f7-btn {
                width: 300px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: #723AFF;
                border-radius: 8px 8px 8px 8px;
                color: #fff;
                margin-top: 40px;
            }
        }
    }
}

/* 定义要展示动画的元素样式 */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}