.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

input {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

input:focus {
    border: none;
    box-shadow: none;
}

.common-box {
    width: 1200px;
    margin: 0 auto;
}

.top {
    position: relative;
    overflow: hidden; // 防止内容溢出

    width: 100%;
    height: 1066px;

    margin-top: 60px;

    video {
        height: 100%;
        width: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    // 添加遮罩层样式
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        // 可以选择添加半透明遮罩背景
        background: rgba(0, 0, 0, 0.52); // 半透明黑色遮罩

        .text {
            position: absolute;
            bottom: 400px;
            left: 355px;
            z-index: 2;

            .btn {
                border-radius: 12px;
                background: linear-gradient(90deg, rgba(87, 192, 254, 1) 0%, rgba(38, 80, 250, 1) 100%);

                box-sizing: border-box;
                padding: 26px 20px;

                text-align: center;
                font-size: 32px;
                letter-spacing: 0px;
                line-height: 27px;
                color: rgba(255, 255, 255, 1);

                cursor: pointer;
            }

            .text1 {
                font-size: 60px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 70px;
                color: rgba(255, 255, 255, 1);

                margin-top: 16px;
                margin-bottom: 30px;
            }

            .text2 {
                font-size: 32px;
                letter-spacing: 0px;
                line-height: 27px;
                color: rgba(255, 255, 255, 1);
            }
        }

        // 全屏按钮样式
        .fullscreen-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;

            padding: 10px 20px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            z-index: 2;

            &:hover {
                background: rgba(0, 0, 0, 0.8);
            }
        }
    }

    // video {
    //     height: 100%;
    //     width: 100%;
    //     object-fit: contain; // 保持比例并填满容器
    //     object-position: center; // 居中显示
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    // }

    // // 添加全屏按钮样式
    // .fullscreen-btn {
    //     position: absolute;
    //     bottom: 20px;
    //     right: 20px;

    //     padding: 10px 20px;
    //     background: rgba(0, 0, 0, 0.6);
    //     color: white;
    //     border-radius: 5px;
    //     cursor: pointer;
    //     font-size: 14px;
    //     z-index: 10;

    //     &:hover {
    //         background: rgba(0, 0, 0, 0.8);
    //     }
    // }
}

.content1 {
    background: url(../../../../images/site/wf_web02/pay/bg7.png) no-repeat;
    background-size: cover;

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        line-height: 58px;
        color: rgba(0, 0, 0, 1);

        margin-top: 36px;
        margin-bottom: 36px;
    }

    .box {
        display: flex;
        justify-content: center;

        padding-bottom: 28px;

        &-left {
            margin-right: 127px;

            .img {
                width: 510px;
                height: 512px;
            }
        }

        &-right {
            &-title {
                width: 228px;

                font-size: 35px;
                font-weight: 700;
                line-height: 43px;
                // 字体渐变色
                background: linear-gradient(90deg, rgba(87, 192, 254, 1) 0%, rgba(38, 80, 250, 1) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;

                margin-top: 114px;
            }

            .split {
                width: 91px;
                height: 3px;

                background: linear-gradient(90deg, rgba(87, 192, 254, 1) 0%, rgba(38, 80, 250, 1) 100%);

                margin: 27px 0;
            }

            &-desc {
                width: 385px;

                font-size: 24px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 37px;
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}

.content2 {
    background: url(../../../../images/site/wf_web02/pay/bg8.png) no-repeat;
    background-size: cover;

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        line-height: 58px;
        color: rgba(0, 0, 0, 1);

        margin-top: 66px;
    }

    .box {
        display: flex;
        justify-content: center;

        margin-top: 104px;

        padding-bottom: 70px;

        &-left {
            .list {
                margin-top: 54px;

                .item {
                    display: flex;

                    width: 593px;
                    height: 143px;

                    border-radius: 14px;
                    background: rgba(237, 244, 255, 1);
                    border: 1px solid rgba(0, 0, 0, 0);

                    box-sizing: border-box;
                    padding: 43px 11px;

                    margin-bottom: 32px;

                    &-img {
                        width: 64px;
                        height: 64px;

                        margin-right: 15px;
                    }

                    &-info {
                        &-text1 {
                            font-size: 20px;
                            font-weight: 500;
                            line-height: 29px;
                            color: rgba(15, 15, 15, 1);
                        }

                        &-text2 {
                            font-size: 18px;
                            font-weight: 500;
                            letter-spacing: 0px;
                            line-height: 26px;
                            color: rgba(87, 87, 87, 1);

                            margin-top: 6px;
                        }
                    }
                }
            }
        }

        &-right {
            margin-left: 53px;

            .img {
                width: 534px;
                height: 522px;
            }
        }
    }
}

.content3 {
    background: url(../../../../images/site/wf_web02/pay/bg9.png) no-repeat;
    background-size: cover;

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 58px;
        color: rgba(0, 0, 0, 1);

        margin-top: 61px;
        margin-bottom: 66px;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        margin-top: 34px;
        padding-bottom: 70px;

        .item-box {
            flex: 1 1 calc(25% - 10px); // 每行显示两个，减去间距的一半
            box-sizing: border-box;

            display: flex;
            justify-content: center;

            margin-bottom: 55px;
        }

        .item {
            width: 277px;
            height: 303px;

            border-radius: 20px;
            background: linear-gradient(151.98deg, rgba(224, 241, 255, 1) 0%, rgba(247, 251, 255, 1) 48.3%, rgba(225, 239, 255, 1) 100%);
            border: 2px solid rgba(255, 255, 255, 1);

            display: flex;
            flex-direction: column;
            align-items: center;

            &-img {
                width: 101px;
                height: 113px;

                margin-top: -25px;
            }

            &-title {
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 29px;
                color: rgba(69, 127, 255, 1);

                margin-bottom: 12px;
            }

            &-desc {
                width: 232px;

                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 29px;
                color: rgba(43, 43, 43, 1);
            }
        }
    }
}

.content4 {
    background: url(../../../../images/site/wf_web02/pay/bg8.png) no-repeat;
    background-size: cover;

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 58px;
        color: rgba(0, 0, 0, 1);

        margin-top: 67px;
        margin-bottom: 65px;
    }

    .box {
        display: flex;
        justify-content: center;

        padding-bottom: 114px;

        &-left {
            margin-right: 112px;

            .img {
                width: 409px;
                height: 523px;
            }
        }

        &-right {
            &-title {
                width: 559px;

                font-size: 35px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 50px;
                // 字体渐变色
                background: linear-gradient(90deg, rgba(87, 192, 254, 1) 0%, rgba(38, 80, 250, 1) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;

                margin-top: 114px;
                margin-bottom: 14px;
            }

            &-desc {
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 37px;
                color: rgba(51, 51, 51, 1);
            }
        }
    }
}