.introduction-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;

    &-title {
        position: absolute;
        top: 52rpx;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        // color: rgba(255, 235, 59, 0.95);
        color: rgb(255, 255, 255, 0.9);
        font-size: 40rpx;
        font-weight: bold;
        width: 100%;
        // margin-top: 52rpx;
    }

    .tip-box {
        height: 96rpx;
        border-radius: 50rpx;
        background: rgba(255, 255, 255, 0.2);
        border: 4rpx solid rgba(147, 211, 51, 1);
        transition: all 0.4s;
        position: absolute;

        &--first {
            top: 114rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 680rpx;
            height: 96rpx;

            &.android {
                top: 116rpx;
            }
        }

        &--second {
            top: 244rpx;
            left: 48rpx;
            width: 96rpx;
            height: 96rpx;

            &.android {
                top: 248rpx;
                left: 52rpx;
            }
        }

        &--third {
            top: 244rpx;
            left: 252rpx;
            width: 96rpx;
            height: 96rpx;

            &.android {
                top: 246rpx;
                left: 260rpx;
            }
        }

        &--fourth {
            top: 682rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 712rpx;
            height: 710rpx;
        }
    }

    .tip-text {
        // color: rgba(255, 235, 59, 0.95);
        color: rgb(255, 255, 255, 0.9);
        font-size: 32rpx;
    }

    .btn-area {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        transition: all 0.4s;

        &.fourth {
            top: 420rpx;
        }

        .btn-next-step {
            border-radius: 28rpx;
        }

    }

    .step-box {
        transition: all 0.4s;

        &.first-step {
            position: absolute;
            top: 130rpx;
            left: 0;
            width: 100%;

            &.android {
                top: 138rpx;
            }

            .guide-icon {
                position: absolute;
                top: 48rpx;
                left: 106rpx;
                width: 22px;
                height: 39px;
                opacity: 1;
            }

            .tip-text {
                position: absolute;
                top: 138rpx;
                left: 110rpx;
                width: 550rpx;
                height: 94rpx;
                line-height: 46rpx;
            }
        }

        &.second-step {
            position: absolute;
            top: 290rpx;
            left: 164rpx;
            width: 100%;

            &.android {
                top: 294rpx;
                left: 164rpx;
            }

            .guide-icon {
                position: absolute;
                top: 0;
                left: 0;
                width: 22px;
                height: 39px;
                transform: rotate(-64.28deg);
            }

            .tip-text {
                position: absolute;
                top: 46rpx;
                left: 44rpx;
                line-height: 46rpx;
            }
        }

        &.third-step {
            position: absolute;
            top: 290rpx;
            left: 342rpx;
            width: 100%;

            &.android {
                top: 294rpx;
                left: 342rpx;
            }

            .guide-icon {
                position: absolute;
                top: 0;
                left: 0;
                width: 22px;
                height: 39px;
                transform: rotate(-64.28deg);
            }

            .tip-text {
                position: absolute;
                top: 46rpx;
                left: 44rpx;
                line-height: 46rpx;
            }
        }

        &.fourth-step {
            position: absolute;
            top: 550rpx;
            left: 40rpx;
            width: 100%;

            .guide-icon {
                position: absolute;
                top: 60rpx;
                left: 26rpx;
                width: 44rpx;
                height: 78rpx;
                transform: rotate(180deg);
            }

            .tip-text {
                position: absolute;
                top: 0;
                left: 0rpx;
                line-height: 46rpx;
            }
        }
    }



    /* .first-step {
        position: absolute;
        top: 128rpx;
        left: 0;
        width: 100%;

        .guide-icon {
            position: absolute;
            top: 48rpx;
            left: 106rpx;
            width: 22px;
            height: 39px;
            opacity: 1;
        }

        .tip-text {
            position: absolute;
            top: 138rpx;
            left: 110rpx;
            width: 550rpx;
            height: 94rpx;
            line-height: 46rpx;
        }
    }

    .second-step {
        position: absolute;
        top: 288rpx;
        left: 164rpx;
        width: 100%;

        .guide-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 39px;
            transform: rotate(-64.28deg);
        }

        .tip-text {
            position: absolute;
            top: 46rpx;
            left: 44rpx;
            line-height: 46rpx;
        }
    }

    .third-step {
        position: absolute;
        top: 288rpx;
        left: 342rpx;
        width: 100%;

        .guide-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 22px;
            height: 39px;
            transform: rotate(-64.28deg);
        }

        .tip-text {
            position: absolute;
            top: 46rpx;
            left: 44rpx;
            line-height: 46rpx;
        }
    }

    .fourth-step {
        position: absolute;
        top: 550rpx;
        left: 76rpx;
        width: 100%;

        .guide-icon {
            position: absolute;
            top: 60rpx;
            left: 20rpx;
            width: 44rpx;
            height: 78rpx;
            transform: rotate(180deg);
        }

        .tip-text {
            position: absolute;
            top: 0;
            left: 0rpx;
            line-height: 46rpx;
        }
    } */

}