.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);
            }
        }
    }
}

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

    padding-bottom: 139px;

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

    .option {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 849px;
        height: 75px;
        border-radius: 15px;
        background: linear-gradient(270deg, rgba(241, 249, 255, 1) 0%, rgba(214, 228, 255, 1) 100%);
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 5px 13px rgba(157, 210, 250, 0.2);

        box-sizing: border-box;
        padding: 0 34px;

        margin: 0 auto;

        &-item {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 107px;
            height: 42px;
            border-radius: 10px;
            color: rgba(0, 0, 0, 1);

            cursor: pointer;

            // 激活状态样式
            &.active {
                color: #fff;
                background: rgba(5, 81, 245, 1);
                border: 1px solid rgba(255, 255, 255, 1);
                box-shadow: inset 1px 1px 20px rgba(3, 211, 252, 1);
            }
        }
    }

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

        padding-bottom: 28px;

        margin-top: 53px;

        &-left {
            margin-right: 127px;

            .img {
                width: 436px;
                height: 517px;
            }
        }

        &-right {
            display: flex;

            &-img {
                .img {
                    width: 10px;
                    height: 442px;

                    margin-right: 14px;
                }
            }

            &-list {
                margin-top: -10px;

                &-item {
                    .text1 {
                        width: 72px;

                        font-size: 18px;
                        font-weight: 700;
                        letter-spacing: 0px;
                        color: rgba(41, 41, 41, 1);
                        line-height: 34px;

                        margin-bottom: 6px;

                        &.active {
                            background: linear-gradient(90deg, rgba(87, 192, 254, 1) 0%, rgba(38, 80, 250, 1) 100%);
                            -webkit-background-clip: text;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-fill-color: transparent;
                        }
                    }


                    .text2 {
                        height: 54px;

                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: 0px;
                        line-height: 27px;
                        color: rgba(32, 32, 32, 1);
                    }
                }
            }
        }
    }
}

.content2 {
    padding-bottom: 135px;

    .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;

        &-left {
            display: flex;

            margin-top: 22px;
            margin-right: 141px;

            .shu {
                width: 6px;
                height: 450px; // 3个item的总高度 (100px*3 + 20px*2)
                background-color: rgba(230, 244, 254, 1);
                border-radius: 3px;
                position: relative;
                margin-bottom: 20px;
                margin-right: 25px;

                &-slider {
                    width: 6px;
                    height: 100px;
                    background-color: rgba(3, 87, 255, 1);
                    border-radius: 3px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transition: top 0.3s ease; // 滑动动画
                }
            }

            .box-left-list {
                &-item {
                    padding: 20px;
                    border-radius: 10px;
                    cursor: pointer;
                    transition: background-color 0.3s ease;
                    margin-bottom: 60px;

                    .text1 {
                        font-size: 20px;
                        font-weight: 600;
                        margin-bottom: 10px;
                        color: #333;
                        transition: color 0.3s ease;
                    }

                    .text2 {
                        font-size: 16px;
                        color: #666;
                        line-height: 1.5;
                        transition: color 0.3s ease;
                    }

                    &:hover {
                        background-color: rgba(237, 244, 255, 0.5);
                    }

                    &.active {
                        background-color: rgba(237, 244, 255, 1);

                        .text1 {
                            color: rgba(3, 87, 255, 1);
                        }

                        .text2 {
                            color: rgba(31, 31, 31, 1);
                        }
                    }
                }
            }
        }

        &-right {
            .img {
                width: 611px;
                height: 597px;
            }
        }
    }

    .list {
        display: flex;

        .item {
            display: flex;
            width: 577px;
            height: 149px;
            border-radius: 15px;
            background: rgba(236, 244, 255, 1);
            border: 1px solid rgba(255, 255, 255, 1);

            padding: 20px 25px 0;

            margin: 0 25px;

            .icon {
                width: 70px;
                height: 70px;

                margin-right: 16px;
            }

            .text1 {
                font-size: 24px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 35px;
                color: rgba(0, 0, 0, 1);

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

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

.content3 {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 888px;

    padding: 24px 0 0;

    background: url('../../../../images/site/wf_web02/pay/bg12.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);
    }

    .desc {
        width: 773px;
        height: 74px;

        text-align: center;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 37px;
        color: rgba(87, 87, 87, 1);

        margin: 10px auto 50px;
    }

    .box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
            width: 800px;
            height: 563px;

            margin-left: -100px;
        }
    }
}

.content4 {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 10px 0 0;

    background: url('../../../../images/site/wf_web02/pay/bg13.png');
    background-repeat: no-repeat;
    background-position: center center;
    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);
    }

    .box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 9px;

        .img {
            width: 774px;
            height: 774px;
        }

        &-item {
            position: absolute;

            display: flex;

            width: 341px;
            height: 171px;
            border-radius: 15px;
            background: linear-gradient(117.02deg, rgba(245, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(224, 240, 255, 0.8) 100%);
            border: 1px solid rgba(255, 255, 255, 1);
            box-shadow: 0px 10px 10px rgba(54, 116, 251, 0.05);

            padding: 19px 16px 0;

            .icon {
                width: 58px;
                height: 58px;

                margin-right: 9px;
            }

            .text1 {
                font-size: 24px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 35px;
                color: rgba(48, 103, 251, 1);
            }

            .text2 {
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 23px;
                color: rgba(87, 87, 87, 1);
            }
        }
    }
}

.content5 {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 1137px;

    padding: 58px 0 0;

    background: url('../../../../images/site/wf_web02/pay/bg11.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);
    }

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

        margin-top: 69px;

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

            display: flex;
            justify-content: center;

            margin-bottom: 81px;
        }

        .item {
            width: 373px;
            height: 371px;
            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;

            box-sizing: border-box;
            padding: 0 36px;

            &-img {
                width: 114px;
                height: 128px;

                margin-top: -38px;
            }

            &-title {
                font-size: 24px;
                font-weight: 500;
                line-height: 35px;
                color: rgba(69, 127, 255, 1);

                margin-bottom: 8px;
            }

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

.content6 {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 1226px;

    padding: 75px 0px 0px;

    background: url('../../../../images/site/wf_web02/pay/bg10.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);
    }

    .box {
        position: relative;
        margin-top: 62px;

        .img1 {
            width: 1210px;
            height: 868px;
        }

        // .tips {
        //     position: absolute;

        //     display: flex;
        //     align-items: center;

        //     height: 30px;
        //     border-radius: 15px;
        //     background: linear-gradient(180deg, rgba(217, 230, 255, 1) 0%, rgba(235, 242, 252, 1) 100%);
        //     border: 1px solid rgba(255, 255, 255, 1);
        //     box-shadow: 0px 8px 15px rgba(76, 166, 253, 0.15);

        //     font-size: 12px;
        //     font-weight: 500;
        //     color: rgba(46, 46, 46, 1);

        //     box-sizing: border-box;
        //     padding: 5px 11px;

        //     .icon {
        //         width: 21px;
        //         height: 21px;

        //         margin-right: 4px;
        //     }
        // }

        .img {
            width: 378px;
            height: 221px;

            margin-top: 160px;
        }
    }
}