.stage__back{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}
.desk{
    display: flex;
}
.mob{
    display: none;
}
.wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body{
    overflow: auto !important;
    position: static !important;
    height: auto !important;
}
.stage{
    width: 100%;
    
}
.stage__body{
    display: flex;
    align-items: center;
    gap: 92px;
    justify-content: center;
}
.stage__body-graph{
    width: 728.51px;
    height: 650px;
    position: relative;
    background: url(../images/graph.png) center no-repeat;
    background-size: cover;    
}

.stage__body-graph-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.stage__body-graph-item.active span{
    background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stage__body-graph-item.active p{
    background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stage__body-graph-item.active .images__white{
    opacity: 0;
}
.stage__body-graph-item.active .images__grad{
    opacity: 1;
}
.stage__body-graph-item:hover span{
    background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stage__body-graph-item:hover p{
    background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stage__body-graph-item:hover .images__white{
    opacity: 0;
}
.stage__body-graph-item:hover .images__grad{
    opacity: 1;
}
.stage__body-graph-item:nth-child(1){
    position: absolute;
    top: 123px;
    left: 108px;
}
.stage__body-graph-item:nth-child(2){
    position: absolute;
    top: 80px;
    right: 331px;
}
.stage__body-graph-item:nth-child(3){
    position: absolute;
    bottom: 335px;
    right: 177px;
}
.stage__body-graph-item:nth-child(4){
    position: absolute;
    bottom: 187px;
    left: 558px;
}
.stage__body-graph-item:nth-child(5){
    position: absolute;
    bottom: 62px;
    left: 413px;
}
.stage__body-graph-item:nth-child(6){
    position: absolute;
    top: 488px;
    right: 354px;
}
.stage__body-graph-item:nth-child(7){
    position: absolute;
    bottom: 90px;
    right: 543px;
}
.stage__body-graph-item:nth-child(8){
    position: absolute;
    bottom: 246px;
    left: 45px;
}
.stage__body-graph-item:nth-child(8) img{
    width: 46px !important;
    height: 40px !important;
}
.stage__body-graph-item:nth-child(9) img{
    width: 36px !important;
    height: 53px !important;
}
.stage__body-graph-item:nth-child(9){
    position: absolute;
    bottom: 239px;
    left: 273px;
}
.stage__body-graph-item-images{
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage__body-graph-item-images img{
    width: 48px;
    height: 48px;
    position: absolute;
    transition: all 0.3s ease;
}
.images__white{
    opacity: 1;
}
.images__grad{
    opacity: 0;
}
.stage__body-graph-item span{
    font-size: 18px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: center;
    color: #fff;
    margin-top: 8px;
    transition: all 0.5s ease;
}
.stage__body-graph-item p{
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
    color: #C5C5C5;
    transition: all 0.5s ease;
    text-transform: lowercase;
    max-width: 131px;
}

.stage__body-text{
    
}
.stage__body-text-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 660px;

}
.stage__body-text-item h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 22.7px;
    text-align: left;
    color: #F0F6FF;
    transition: all 0.3s ease;
}
.stage__body-text-item span{
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #C5C5C5;
    transition: all 0.3s ease;
}
.stage__body-text-item p{
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #F0F6FF;
    transition: all 0.3s ease;
}
.hid{
    opacity: 0;
    translate: 0 10%;
}


.none{
    display: none !important;
}

@media (max-width: 1920px) {
    html{
        font-size: calc(100vw / 1920);
    }


    .stage__back{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
    }
    .wrapper{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .stage{
        width: 100%;
    }
    .stage__body{
        display: flex;
        align-items: center;
        gap: 92rem;
        justify-content: center;
    }
    .stage__body-graph{
        width: 728.51rem;
        height: 650rem;
        position: relative;
        background: url(../images/graph.png) center no-repeat;
        background-size: cover;    
    }
    
    .stage__body-graph-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
        cursor: pointer;
    }
    .stage__body-graph-item.active span{
        background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .stage__body-graph-item.active p{
        background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .stage__body-graph-item.active .images__white{
        opacity: 0;
    }
    .stage__body-graph-item.active .images__grad{
        opacity: 1;
    }
    .stage__body-graph-item:hover span{
        background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .stage__body-graph-item:hover p{
        background: linear-gradient(90deg, #A237A1 3%, #4C5ED9 57.5%, #4C5ED9 93%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .stage__body-graph-item:hover .images__white{
        opacity: 0;
    }
    .stage__body-graph-item:hover .images__grad{
        opacity: 1;
    }
    .stage__body-graph-item:nth-child(1){
        position: absolute;
        top: 123rem;
        left: 108rem;
    }
    .stage__body-graph-item:nth-child(2){
        position: absolute;
        top: 80rem;
        right: 331rem;
    }
    .stage__body-graph-item:nth-child(3){
        position: absolute;
        bottom: 335rem;
        right: 177rem;
    }
    .stage__body-graph-item:nth-child(4){
        position: absolute;
        bottom: 187rem;
        left: 558rem;
    }
    .stage__body-graph-item:nth-child(5){
        position: absolute;
        bottom: 62rem;
        left: 413rem;
    }
    .stage__body-graph-item:nth-child(6){
        position: absolute;
        top: 488rem;
        right: 354rem;
    }
    .stage__body-graph-item:nth-child(7){
        position: absolute;
        bottom: 90rem;
        right: 543rem;
    }
    .stage__body-graph-item:nth-child(8){
        position: absolute;
        bottom: 246rem;
        left: 45rem;
    }
    .stage__body-graph-item:nth-child(8) img{
        width: 46rem !important;
        height: 40rem !important;
    }
    .stage__body-graph-item:nth-child(9) img{
        width: 36rem !important;
        height: 53rem !important;
    }
    .stage__body-graph-item:nth-child(9){
        position: absolute;
        bottom: 239rem;
        left: 273rem;
    }
    .stage__body-graph-item-images{
        width: 48rem;
        height: 48rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stage__body-graph-item-images img{
        width: 48rem;
        height: 48rem;
        position: absolute;

    }
    .stage__body-graph-item span{
        font-size: 18rem;
        font-weight: 400;
        line-height: 21.6rem;
        text-align: center;
        color: #fff;
        margin-top: 8rem;
        transition: all 0.5s ease;
    }
    .stage__body-graph-item p{
        font-size: 14rem;
        font-weight: 400;
        line-height: 16.8rem;
        text-align: center;
        color: #C5C5C5;
        transition: all 0.5s ease;
        max-width: 131rem;
    }
    
    .stage__body-text{
        
    }
    .stage__body-text-item{
        display: flex;
        flex-direction: column;
        gap: 20rem;
        width: 660rem;
    
    }
    .stage__body-text-item h2{
        font-size: 20rem;
        font-weight: 700;
        line-height: 22.7rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
    }
    .stage__body-text-item span{
        font-size: 18rem;
        font-weight: 700;
        line-height: 24rem;
        text-align: left;
        color: #C5C5C5;
        transition: all 0.3s ease;
    }
    .stage__body-text-item p{
        font-size: 16rem;
        font-weight: 400;
        line-height: 22rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
    }
    .hid{
        opacity: 0;
        translate: 0 10%;
    }
    
    
    .none{
        display: none !important;
    }
}


@media (max-width: 1024px) {
    html{
        font-size: calc(100vw / 512);
    }
    .wrapper{
        overflow: auto !important;
        height: auto !important;
    }
    .desk{
        display: none;
    }
    .mob{
        display: flex;
    }
    .stage{
        margin-top: 112rem;
        padding-bottom: 60rem;
    }
    .stage__body{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 62rem;
    }
    .stage__body-graph{
        width: 288rem;
        height: 256rem;
    }
    .stage__body-text-item{
        padding: 0 15rem;
        width: auto;
    }
    .stage__body-text-item h2{
        font-size: 16rem;
        font-weight: 700;
        line-height: 18rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
        max-width: 291rem;
    }
    .stage__body-text-item span{
        font-size: 14rem;
        font-weight: 700;
        line-height: 24rem;
        text-align: left;
        color: #C5C5C5;
        transition: all 0.3s ease;
        max-width: 291rem;
    }
    .stage__body-text-item p{
        font-size: 12rem;
        font-weight: 400;
        line-height: 16rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
        max-width: 291rem;
    }

    .stage__body-graph-item{
        gap: 3rem;
    }

    .stage__body-graph-item-images{
        width: 18rem;
        height: 18rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stage__body-graph-item-images img{
        width: 18rem;
        height: 18rem;
        position: absolute;

    }
    .stage__body-graph-item span{
        font-size: 8rem;
        font-weight: 400;
        line-height: 10rem;
        text-align: center;
        color: #fff;
        margin-top: 0rem;
        transition: all 0.5s ease;
    }
    .stage__body-graph-item p{
        font-size: 8rem;
        font-weight: 400;
        line-height: 10rem;
        text-align: center;
        color: #C5C5C5;
        transition: all 0.5s ease;
        max-width: 70rem;
    }

    .stage__body-graph-item:nth-child(1){
        position: absolute;
        top: 46rem;
        left: 29rem;
    }
    .stage__body-graph-item:nth-child(2){
        position: absolute;
        top: 26rem;
        right: 123rem;
    }
    .stage__body-graph-item:nth-child(3){
        position: absolute;
        bottom: 129rem;
        right: 68rem;
    }
    .stage__body-graph-item:nth-child(4){
        position: absolute;
        bottom: 74rem;
        left: 208rem;
    }
    .stage__body-graph-item:nth-child(5){
        position: absolute;
        bottom: 20rem;
        left: 156rem;
    }
    .stage__body-graph-item:nth-child(6){
        position: absolute;
        top: 198rem;
        right: 130rem;
    }
    .stage__body-graph-item:nth-child(7){
        position: absolute;
        bottom: 33rem;
        right: 211rem;
    }
    .stage__body-graph-item:nth-child(8){
        position: absolute;
        bottom: 97rem;
        left: 11rem;
    }
    .stage__body-graph-item:nth-child(8) img{
        width: 18rem !important;
        height: 16rem !important;
    }
    .stage__body-graph-item:nth-child(9) img{
        width: 18rem !important;
        height: 22rem !important;
    }
    .stage__body-graph-item:nth-child(9){
        position: absolute;
        bottom: 95rem;
        left: 102rem;
    }
    .footer{
        position: absolute;
        bottom: 0;
    }
}



@media (max-width: 640px) {
    html{
        font-size: calc(100vw / 320);
    }
    .wrapper{
        overflow: auto !important;
        height: auto !important;
    }
    .desk{
        display: none;
    }
    .mob{
        display: flex;
    }
    .stage{
        margin-top: 112rem;
        padding-bottom: 60rem;
    }
    .stage__body{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 62rem;
    }
    .stage__body-graph{
        width: 288rem;
        height: 256rem;
    }
    .stage__body-text-item{
        padding: 0 15rem;
        width: auto;
    }
    .stage__body-text-item h2{
        font-size: 16rem;
        font-weight: 700;
        line-height: 18rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
        max-width: 291rem;
    }
    .stage__body-text-item span{
        font-size: 14rem;
        font-weight: 700;
        line-height: 24rem;
        text-align: left;
        color: #C5C5C5;
        transition: all 0.3s ease;
        max-width: 291rem;
    }
    .stage__body-text-item p{
        font-size: 12rem;
        font-weight: 400;
        line-height: 16rem;
        text-align: left;
        color: #F0F6FF;
        transition: all 0.3s ease;
        max-width: 291rem;
    }

    .stage__body-graph-item{
        gap: 3rem;
    }

    .stage__body-graph-item-images{
        width: 18rem;
        height: 18rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stage__body-graph-item-images img{
        width: 18rem;
        height: 18rem;
        position: absolute;

    }
    .stage__body-graph-item span{
        font-size: 8rem;
        font-weight: 400;
        line-height: 10rem;
        text-align: center;
        color: #fff;
        margin-top: 0rem;
        transition: all 0.5s ease;
    }
    .stage__body-graph-item p{
        font-size: 8rem;
        font-weight: 400;
        line-height: 10rem;
        text-align: center;
        color: #C5C5C5;
        transition: all 0.5s ease;
        max-width: 70rem;
    }

    .stage__body-graph-item:nth-child(1){
        position: absolute;
        top: 46rem;
        left: 29rem;
    }
    .stage__body-graph-item:nth-child(2){
        position: absolute;
        top: 26rem;
        right: 123rem;
    }
    .stage__body-graph-item:nth-child(3){
        position: absolute;
        bottom: 129rem;
        right: 68rem;
    }
    .stage__body-graph-item:nth-child(4){
        position: absolute;
        bottom: 74rem;
        left: 208rem;
    }
    .stage__body-graph-item:nth-child(5){
        position: absolute;
        bottom: 20rem;
        left: 156rem;
    }
    .stage__body-graph-item:nth-child(6){
        position: absolute;
        top: 198rem;
        right: 130rem;
    }
    .stage__body-graph-item:nth-child(7){
        position: absolute;
        bottom: 33rem;
        right: 211rem;
    }
    .stage__body-graph-item:nth-child(8){
        position: absolute;
        bottom: 97rem;
        left: 11rem;
    }
    .stage__body-graph-item:nth-child(8) img{
        width: 18rem !important;
        height: 16rem !important;
    }
    .stage__body-graph-item:nth-child(9) img{
        width: 18rem !important;
        height: 22rem !important;
    }
    .stage__body-graph-item:nth-child(9){
        position: absolute;
        bottom: 95rem;
        left: 102rem;
    }
    .footer{
        position: absolute;
        bottom: 0;
    }
}