.tips-overlay {
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;

    box-sizing: content-box;
    opacity: 1;
    z-index: 99998;
}

.tips {
    position: absolute;
    list-style: none;
}

.tips > .position {
    display: inline-block;
    border-radius: 5px;
    box-shadow: rgb(255 152 0 / 100%) 0px 0px 1px 2px, rgb(33 33 33 / 80%) 0px 0px 0px 5000px;
    transform: translate(-50%, 0%);
}

.tips > .content {
    background-color: #ff7b00;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 0 3px #ff7b00;
    position: absolute;
    color: #fff;
    margin-top: 12px;
    width: 180px;
}

#m-step-1.tips {
    top: 307px;
    left: 18%;
}

#m-step-1 > .position, #m-step-2 > .position {
    width: 30vw;
    height: 48px;
}

#m-step-1 > .content, #m-step-2 > .content {
    transform: translate(18vw, -130%);
}

#m-step-1 > .content::before, #m-step-2 > .content::before, #m-step-4 > .content::before {
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    left: -16px;
    border-right: 14px solid #ff7b00;
    border-top: 8px solid #ff7b0000;
    border-bottom: 8px solid #ff7b0000;
}

#m-step-2.tips {
    top: 374px;
    left: 18%;
}

#m-step-3.tips {
    top: 441px;
    left: 50%;
}

#m-step-3 > .position {
    width: 95vw;
    height: 13vh;
}

#m-step-3 > .content {
    transform: translate(-50%, -320%);
}

#m-step-3 > .content::before, #m-step-5 > .content::before {
    content: "";
    display: block;
    position: absolute;
    top: 52px;
    left: 82px;
    border-top: 14px solid #ff7b00;
    border-right: 8px solid #ff7b0000;
    border-left: 8px solid #ff7b0000;
}

#m-step-4.tips {
    top: 296px;
    left: 13%;
}

#m-step-4 > .position {
    width: 25vw;
    height: 130px;
}

#m-step-4 > .content {
    transform: translate(15vw, -212%);
}

#m-step-5.tips {
    top: 296px;
    left: 50%;
}

#m-step-5 > .position {
    width: 95vw;
    height: 200px;
}

#m-step-5 > .content {
    transform: translate(-50%, -580%);
}

#m-step-6.tips {
    top: 148px;
    left: 50%;
}

#m-step-6 > .position {
    width: 87vw;
    height: 34vh;
}

#m-step-6 > .content {
    transform: translate(-50%, -1110%);
}

#m-step-6 > .content::before {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 60px;
    border-top: 14px solid #ff7b00;
    border-left: 8px solid #ff7b0000;
    border-right: 8px solid #ff7b0000;
}

.next-btn {
    bottom: 10%;
    right: 20px;
    width: 90vw;
    text-align: right;
}

.next-btn > .btn-block {
    display: flex;
    justify-content: center;
}

.next-btn .next, .next-btn .done {
    font-size: 14px;
    padding: 8px 40px;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #fff;
    transition-duration: .5s;
}

.next-btn .next:hover, .next-btn .done:hover {
    text-decoration: none;
    background-color: #ff7b00;
    border: 1px solid #ff7b00;
    color: #fff;
}

.next-btn .back {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    padding: 8px 40px;
    border-radius: 20px;
    margin-right: 20px;
    background-color: rgba(7, 7, 7, 0.1);
    border: 1px solid #fff;
    transition-duration: .5s;
}

.next-btn .back:hover {
    text-decoration: none;
    background-color: #3d3d3d;
    border: 1px solid #3d3d3d;
    color: #fff;
}

.show-over-768{
    display: none;
}

@media (min-width: 360px) {
    #m-step-1 > .content, #m-step-2 > .content {
        transform: translate(20vw, -130%);
    }
    #m-step-2.tips {
        top: 384px;
    }

    #m-step-3.tips {
        top: 442px;
    }

    #m-step-4 > .position {
        width: 23vw;
    }

    #m-step-4.tips {
        left: 12%;
    }

}

@media (min-width: 414px) {

    #m-step-1.tips {
        top: 310px;
        left: calc(18% - 5px);
    }

    #m-step-2.tips {
        top: 391px;
        left: calc(17% - 5px);
    }

    #m-step-3.tips {
        top: 450px;
        left: calc(49% - 5px);
    }
    #m-step-3 > .content{
        transform: translate(-50%, -23vh);
    }
    #m-step-4 > .position {
        width: 22vw;
    }

    #m-step-4.tips {
        left: calc(11% - 5px);
    }
}
@media (min-width: 460px) {
    #m-step-1.tips {
        top: 311px;
        left: 17%;
    }
    #m-step-2.tips {
        top: 400px;
        left: 17%;
    }
    #m-step-3.tips {
        top: 455px;
        left: 49%;
    }
    #m-step-6 > .position {
        width: 87vw;
        height: 34vh;
    }
    #m-step-6 > .content {
        transform: translate(-50%, -45vh);
    }

}
@media (min-width: 520px) {
    #m-step-1.tips {
        top: 314px;
        left: 17%;
    }
    #m-step-2.tips {
        top: 414px;
    }
    #m-step-3.tips {
        top: 477px;
        left: 49%;
    }
    #m-step-6 > .position {
        width: 87vw;
        height: 39vh;
    }
    #m-step-6 > .content {
        transform: translate(-50%, -47vh);
    }
}

@media (min-width: 590px) {
    #m-step-1.tips {
        top: 320px;
        left: 16%;
    }
    #m-step-2.tips {
        top: 421px;
        left: 16%;

    }
    #m-step-3.tips {
        top: 494px;
        left: 49%;
    }
    #m-step-3 > .position{

        height: 15vh;
    }
    #m-step-3 > .content {
        transform: translate(-50%, -25vh);
    }
    #m-step-6 > .position {
        width: 87vw;
        height: 42vh;
    }
    #m-step-6 > .content {
        transform: translate(-50%, -50vh);
    }
}
@media (min-width: 680px) {
    #m-step-1.tips {
        top: 324px;
        left: 16%;
    }

    #m-step-2.tips {
        top: 437px;
        left: 16%;

    }
    #m-step-3.tips {
        top: 508px;
        left: 49%;
    }
    #m-step-3 > .position{

        height: 15vh;
    }
    #m-step-3 > .content {
        transform: translate(-50%, -25vh);
    }
    #m-step-6 > .position {
        width: 87vw;
        height: 45vh;
    }

    #m-step-6 > .content {
        transform: translate(-50%, -53vh);
    }
}

#pc-step-1 > .position {
    width: 112px;
    height: 52px;
}
#pc-step-2 > .position {
    width: 100px;
    height: 48px;
}
#pc-step-3 > .position {
    width: 100px;
    height: 48px;
}
#pc-step-4 > .position {
    width: 280px;
    height: 48px;
}
#pc-step-5 > .position {
    width: 400px;
    height: 118px;
}
@media (min-width: 769px) {
    .show-over-768 {
        display: block;
    }

    .hidden-low-768 {
        display: none;
    }

    .tips > .content {
        width: 250px;
        transform: translate(-50%, 0%);
    }

    .tips > .content::before {
        content: "";
        display: block;
        position: absolute;
        top: -12px;
        left: 120px;
        border-right: 8px solid #ff7b0000;
        border-left: 8px solid #ff7b0000;
        border-bottom: 14px solid #ff7b00;
    }

    #pc-step-1.tips {
        top: 148px;
        left: 28.5%;
    }
    #pc-step-1 > .position {
        width: 115px;
        height: 47px;
    }
    #pc-step-2.tips {
        top: 204px;
        left: 29.5%;
    }
    #pc-step-3.tips {
        top: 148px;
        left: 43.5%;
    }
    #pc-step-4.tips {
        top: 204px;
        left: 33%;
    }
    #pc-step-4 > .position {
        width: 146px;
        height: 47px;
    }
    #pc-step-5.tips {
        top: 120px;
        left: 74%;;
    }
    #pc-step-5 > .position {
        width: 255px;
        height: 79px;
    }
}
@media (min-width: 993px) {
    #pc-step-1.tips{

        left: 24.5%;
    }
    #pc-step-2.tips {
        top: 204px;
        left: 24.5%;
    }
    #pc-step-3.tips {
        top: 148px;
        left: 38.5%;
    }
    #pc-step-3 > .position {
        width: 93px;
        height: 48px;
    }
    #pc-step-4.tips {
        top: 204px;
        left: 27%;
    }
    #pc-step-4 > .position {
        width: 146px;
        height: 47px;
    }
    #pc-step-5.tips {
        top: 120px;
        left: 73%;
    }
    #pc-step-5 > .position {
        width: 320px;
        height: 89px;
    }
}
@media (min-width: 1200px) {

    .tips > .content {
        width: 250px;
        transform: translate(-50%, 0%);
    }

    .tips > .content::before {
        content: "";
        display: block;
        position: absolute;
        top: -12px;
        left: 120px;
        border-right: 8px solid #ff7b0000;
        border-left: 8px solid #ff7b0000;
        border-bottom: 14px solid #ff7b00;
    }

    #pc-step-1.tips {
        top: 148px;
        left: 30%;
    }
    #pc-step-2.tips {
        top: 204px;
        left: 32.5%;
    }
    #pc-step-2 > .position {
        width: 100px;
        height: 48px;
    }
    #pc-step-3.tips {
        top: 148px;
        left: 38.5%;
    }
    #pc-step-4.tips {
        top: 204px;
        left: 32%;
    }
    #pc-step-5.tips {
        top: 120px;
        left: 83%;
    }

    .next-btn {
        bottom: 150px;
        right: 200px;
        width: auto;
        text-align: right;
    }

    .next-btn > .next, .next-btn > .done {
        font-size: 18px;
        padding: 8px 50px;
    }

    .next-btn > .back {
        font-size: 18px;
        padding: 8px 50px;
    }

}