.banner-part-wcont,
.banner-part-hcont {
    position: absolute;
}
.banner-part-wcont object,
.banner-part-wcont img {
    width: 100%;
}
.banner-part-hcont object,
.banner-part-hcont img {
    height: 100%;
}
@media (min-width: 900px) {
    .only-desktop {
        display: block;
    }
    .only-mobile {
        display: none;
    }
    .banner-scale-cont {
        transition: transform 0.4s ease-in-out;
    }
    .banner-scale-cont:hover {
        transform: scale(1.2);
    }
    .board-small {
        width: 12.4vw; /* 238px */
        height: 25.94vw; /* 498px */
        top: 22.55vw; /* 433px */
        right: 2.63vw; /* 50.5px */
        z-index: 5;
    }

    .board-middle {
        width: 15.05vw; /* 289px */
        height: 19.22vw; /* 369px */
        top: 2.34vw; /* 45px */
        right: 2.66vw; /* 51px */
    }
    .board-large {
        width: 13.646vw;/*262px;*/
        height: 25.938vw; /*498px;*/
        top: 28.125vw; /* 540px;*/
        left: 8.229vw; /* 158px;*/
    }

    .bar-chart-small {
        width: 4.66vw; /* 89.4px */
        height: 3.65vw; /* 70px */
        top: 6.61vw; /* 127px */
        left: 26.41vw; /* 507px */
        z-index: 5;
    }

    .bar-chart-middle {
        width: 8.83vw; /* 169.5px */
        height: 6.91vw; /* 132.7px */
        top: 33.71vw; /* 647.3px */
        right: 12.61vw; /* 242.15px */
        z-index: 7;
    }
    .bar-chart-large {
        width: 10.495vw; /* 262px;*/
        height: 10.495vw; /* 498px;*/
        top: 43.594vw; /* 837px;*/
        right: 21.484vw; /* 412.5px;*/
        z-index: 15;
    }
    .circle-chart-small {
        width: 3.7vw; /* 71px */
        height: 3.28vw; /* 63px */
        top: 8.39vw; /* 161px */
        left: 40.36vw; /* 775px */
        z-index: 5;
    }

    .circle-chart-middle {
        width: 8.28vw; /* 158.9px */
        height: 7.24vw; /* 139.1px */
        top: 7.94vw; /* 152.57px */
        left: 58.5vw; /* 1123.45px */
        z-index: 3;
    }
    .circle-chart-large {
        width: 9.453vw; /* 181.5px;*/
        height: 8.411vw; /* 161.5px;*/
        top: 29.896vw; /* 574px;*/
        left: 22.708vw; /* 436px;*/
        z-index: 5;
    }

    .notebook {
        width: 38.72vw; 
        height: 35.91vw; 
        top: 1.95vw; 
        right: 6.1vw; 
    }
    .notebook-chart {
        width: 10.365vw; 
        height: 8.125vw; 
        top: 8.021vw; 
        right: 15.365vw; 
    }
    .notebook-bottom-data {
        width: 10.677vw; 
        height: 7.5vw; 
        top: 11.302vw; 
        right: 16.042vw; 
    }
    .notebook-left-panel {
        width: 3.49vw; 
        height: 9.219vw; 
        top: 3.281vw; 
        right: 26.563vw;
    }
    .notebook-right-panel {
        width: 4.167vw; 
        height: 5.833vw; 
        top: 13.125vw; 
        right: 11.042vw;
    }
    .lady {
        width: 8.477vw;
        height: 7.749vw;
        top: 16.107vw;
        right: 24.7vw;
    }

    .server {
        width: 12.415vw;
        height: 11.48vw;
        top: 9.5vw;
        left: 49.09vw; 
        z-index: 5;
    }
    .line3 {
        width: 22.344vw;
        height: 14.948vw;
        right: 3.177vw;
        top: 34.479vw;
        z-index: 6;
        overflow: hidden;
        animation-name: animateLine3;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear;
    }

    @keyframes animateLine3 {
        0% {
            height: 0; 
        }
        50% {
            height: 0; 
        }
        100% {
            height: 14.948vw; 
        }
    }


    .line1 {
        width: 13.464vw;  /* 260px */
        height: 5.156vw;  /* 99px */
        right: 55.938vw;   /* 500.5px */
        top: 4.922vw;     /* 94.5px */
        z-index: 3; 
        overflow: hidden; 
        animation-name: animateLine1;
        animation-duration: 5s;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear; 
    } 
    .line1 object{
        position: absolute;
        top: 0;
        right: 0;
    }
    @keyframes animateLine1 {
        0% {
            width: 0; 
        }
        60% {
            width: 0; 
        }
        100% {
            width: 13.464vw; 
        }
    }
    .line2 {
        width: 11.2vw;   /* 215px */
        height: 6.88vw;  /* 132px */
        right: 45.495vw;   
        top: 8.88vw;     /* 170.5px */
        z-index: 3;
        overflow: hidden; 
        animation-name: animateLine2;
        animation-duration: 3s;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear; 
    }
    .line2 object{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    @keyframes animateLine2 {
        0% {
            width: 0; 
        }
        33% {
            width: 0; 
        }
        100% {
            width: 11.2vw; 
        }
    }

    .line4 {
        width: 22.92vw;  /* 440px */
        height: 16.46vw; /* 316px */
        left: 30.16vw;   /* 579px */
        top: 16.41vw;    /* 315px */
        z-index: 3;
        overflow: hidden;
        animation-name: animateLine4;
        animation-duration: 5s;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear;
    }
    @keyframes animateLine4 {
        0% {
            height: 0; 
        }
        40% {
            height: 0; 
        }
        100% {
            height: 16.46vw;
        }
    }
}
@media (max-width: 899px) { 
    .only-desktop {
        display: none !important;
    }
    .only-mobile {
        display: block !important;
    }
    .mob-main-img {
        width: 100vw;
        height: 150vw;
        top: 43.55vw;
        right: 0;
        z-index: 5;
    }
    .mob-second-img {
        width: 33.333vw;
        height: 33.333vw;
        top: 174.55vw;
        right: 1vw;
        z-index: 15;
    }
}