.service-main-nav {
    top: 8%;
}

.service-main-nav-ui {
    margin: 12vw 20vw 17vw 20vw;
}
.title-wrapper-ui {
    font-family: 'Sailec-Medium';
    font-size: 25px;
    color: white;
    padding-left: 0;
}
.ui-icon-ui,
.ui-icon-ui img {
    width: 81px;
    height: 79px;
    float: left;
    margin-right: 20px;
}
.ui-icon-ux,
.ui-icon-ux img {
    width: 81px;
    height: 81px;
    float: left;
    margin-right: 20px;

}
.ui-icon-int,
.ui-icon-int img {
    width: 55px;
    height: 89px;
    float: left;
    margin-right: 20px;

}
.ui-icon-brand,
.ui-icon-brand img {
    width: 81px;
    height: 68px;
    float: left;
    margin-right: 20px;

}
.ui-main-nav-item img {
    display: inline-block;
}
.ui-main-nav {
    grid-template-columns: 1.7fr 1fr;
}
/*.design-process {*/
/*    width: 70vw;*/
/*    top: 10vw;*/
/*}*/
/*.design-process-background {*/
/*    width: 65vw;*/
/*    height: 50vw;*/
/*}*/
/*.some-design-span {*/
/*    top: 5%;*/
/*    left: 21%;*/
/*    z-index: 9;*/
/*}*/
/*.design-process-wrapper {*/
/*    margin-top: 10%;*/
/*}*/
/*.ui-slider-text {*/
/*    top: 23vh;*/
/*    left: 41vw;*/
/*    width: 26vw;*/
/*    line-height: 2vw;*/
/*    text-align: left;*/
/*}*/
/*.one .title,*/
/*.two .title,*/
/*.tree .title {*/
/*    left: 18vw;*/
/*}*/
/*li {*/
/*    line-height: 13vh;*/
/*}*/
.title {
    text-align: left;
    /*line-height: 3vw;*/
    display: none;
}
/*#markupList {*/
/*    left: 0.5vw;*/
/*}*/
.text-list {
    position: relative;
    top: 47%;
}
.some-design-span {
    width: 26vw;
    top: 45%;
    left: 7%;
    display: block;
    position: relative;
}
.ui-slider-text {
    line-height: 2vw;
}
@media screen and (min-width: 1280px) and (max-width: 1920px) {
    .service-main-nav-item-p {
        top: 7rem;
    }
    .title-wrapper {
        top: 6%;
        left: -10%;
    }
    .design-process-background {
        width: 680px;
        height: 610px;
        /*bottom: 3vw;*/
    }
    .design-process {
        width: 760px;
        height: 470px;
        /*right: 14vw;*/
        /*top: 5vw;*/
        padding: 20px;
    }
    #markupList {
        left: -10px;
    }
    .image-list {
        position: absolute;
        bottom: 660px;
        left: -50px;
    }
    .tree .ui-slider-numeral {
        font-size: 100px;
        line-height: 84px;
        height: 94px;
    }
    .design-process li {
        height: 94px;
        line-height: 94px;
        display: block;
        width: 145px;

    }
    .one .title, .two .title, .tree .title {
        left: 276px;
        line-height: 45px;
    }
    .tree .title {
        top: 0;
    }
    .design-process-slider {
        position: absolute;
        bottom: unset;
    }
    /*.top-line {*/
    /*    height: 220px;*/
    /*    left: 152px;*/
    /*    top: 0;*/
    /*}*/
    /*.bottom-line {*/
    /*    top: 220px;*/
    /*    height: 220px;*/
    /*    width: 3px;*/
    /*    position: absolute;*/
    /*    left: 152px;*/
    /*}*/
    /*#topArrow,*/
    /*#bottomArrow {*/
    /*    -webkit-background-size: 48px;*/
    /*    background-size: 48px;*/
    /*    width: 48px;*/
    /*    height: 28px;*/
    /*}*/
    /*.block-arrow {*/
    /*    top: 185px;*/
    /*    left: 130px;*/
    /*}*/
}
@media screen and (min-width: 1024px) {

    .member-img-mob,
    .logo,
    #markupListMob,
    .design-process-slider-mob {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    main {
        width: 100%;
        overflow: hidden;
    }
    .logo img {
        display: block;
        width: 64px;
        height: 59px;
        position: absolute;
        top: 40px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    .ui-icon-ui,
    .ui-icon-ui img {
        /*width: 56px;*/
        /*height: 55px;*/
        width: 15vw;
        height: 8.3vh;
        margin-right: 10px;
    }
    .title-wrapper-ui {
        font-size: 15px;
        padding-left: 0;
        width: 10vw;
        display: inline-block;
    }
    .ui-main-nav-wrapper {
        margin: 0 auto;
        width: 95vw;
    }
    .ui-icon-ux,
    .ui-icon-ux img {
        /*width: 56px;*/
        /*height: 56px;*/
        width: 15vw;
        height: 8.4vh;
        margin-right: 10px;
    }
    .ui-icon-int,
    .ui-icon-int img {
        /*width: 38px;*/
        /*height: 56px;*/
        width: 10vw;
        height: 8.4vh;
        margin-right: 10px;
    }
    .ui-icon-brand,
    .ui-icon-brand img {
        /*width: 56px;*/
        /*height: 46px;*/
        width: 15vw;
        height: 7vh;
        margin-right: 10px;
    }
    .title-wrapper-ui-ux {
        width: 10vw;
    }
    .ui-main-nav-item {
        justify-self: center;
        width: 45vw;
    }
    .main-ui-title {
        font-size: 30px;
        padding-top: 15vh;
    }
    .some-design-span {
        font-size: 25px;
        top: -7%;
    }
    /*.design-process {*/
    /*    height: 71vw;*/
    /*    width: 90vw;*/
    /*    right: 23vw;*/
    /*}*/
    /*.design-process-background {*/
    /*    height: 109vw;*/
    /*    width: 72vw;*/
    /*}*/
    .ui-slider-text {
        font-size: 14px;
        top: 52vh;
        left: 5vw;
        max-width: unset;
        z-index: 90;
        display: block;
        width: 90vw;
        line-height: 3vh;
    }
    /*.design-process li {*/
    /*    height: 8vh;*/
    /*    line-height: 8vh;*/
    /*}*/
    /*.tree .ui-slider-numeral {*/
    /*    font-size: 70px;*/
    /*    line-height: 7vh;*/
    /*    height: 8vh;*/
    /*    display: block;*/
    /*}*/
    /*.two .ui-slider-numeral {*/
    /*    font-size: 40px;*/
    /*    opacity: .2;*/
    /*}*/
    /*.one .ui-slider-numeral {*/
    /*    font-size: 30px;*/
    /*    opacity: .2;*/
    /*}*/
    /*#markupListMob,*/
    /*#markupList {*/
    /*    top: 0;*/
    /*    position: absolute;*/
    /*    left: -0.5vw;*/
    /*    -webkit-transition: top 0.2s ease-out;*/
    /*    -moz-transition: top 0.2s ease-out;*/
    /*    -ms-transition: top 0.2s ease-out;*/
    /*    -o-transition: top 0.2s ease-out;*/
    /*    transition: top 0.2s ease-out;*/
    /*}*/
    .one .title, .two .title {
        font-size: 20px;
        font-family: 'Sailec-Light';
        color: #FFFFFF;
        opacity: .2;
        display: inline-block;
        position: absolute;
        left: 128px;
        width: 41vw;
    }
    .tree .title {
        font-size: 20px;
        font-family: 'Sailec-Light';
        color: #FFFFFF;
        display: inline-block;
        position: absolute;
        left: 128px;
        width: 41vw;
        top: 0;
        line-height: 3.45vh;
    }
    /*.block-arrow {*/
    /*    position: absolute;*/
    /*    top: -29vh;*/
    /*    left: 22.67vw;*/
    /*    line-height: 0;*/
    /*    width: max-content;*/
    /*    text-align: center;*/
    /*}*/
    #topArrow {
        background-image: url(../images/top-row.png);
        background-repeat: no-repeat;
        -webkit-background-size: 3.5vw;
        background-size: 6.5vw;
        background-position: center;
        width: 7.5vw;
        height: 5.5vw;
        cursor: pointer;
    }
    .arrows-circle {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
    }
    #bottomArrow {
        background-image: url(../images/bottom-row.png);
        background-repeat: no-repeat;
        -webkit-background-size: 3.5vw;
        background-size: 6.5vw;
        background-position: center;
        width: 7.5vw;
        height: 5.5vw;
        cursor: pointer;
    }
    .design-example-span {
        font-size: 25px;
        top: 0vh;
        width: 77vw;
    }
    /*.mg-img-1 {*/
    /*    display: inline-block;*/
    /*    width: 9vw;*/
    /*    height: 8vh;*/
    /*    position: relative;*/
    /*    left: -25vw;*/
    /*    top: 9vh;*/
    /*    transform: rotate(-25deg);*/
    /*}*/
    /*.background-circle {*/
    /*    width: 79vw;*/
    /*    height: 44.5vh;*/
    /*    background-color: #fff;*/
    /*    border-radius: 50%;*/
    /*    position: absolute;*/
    /*    top: 115px;*/
    /*    left: 10%;*/
    /*}*/
    /*.mg-img-1 img, .mg-img-3 img {*/
    /*    width: 80vw;*/
    /*    height: 48vh;*/
    /*    display: inline-block;*/
    /*}*/
    /*.mg-img-3{*/
    /*    display: inline-block;*/
    /*    width: 50vw;*/
    /*    height: 85vh;*/
    /*    position: relative;*/
    /*    !*left: 100px;*!*/
    /*    left: 75px;*/
    /*    top: -5vh;*/
    /*    transform: rotate(-25deg);*/
    /*}*/
    /*.main-work-button-ui {*/
    /*    top: 50vh;*/
    /*}*/
    .project-info-wrapper-ui {
        position: absolute;
        /* left: 96px; */
        left: 7vw;
        /* top: 61px; */
        top: 65vh;
    }
    .main-title {
        font-size: 5vw;
        opacity: 1;
        font-family: 'Sailec-Light';
        color: white;
    }
    .technology-bar {
        padding-left: 6vw;
        margin-top: 10vh;
    }
    .technology-bar span {
        font-size: 25px;
        margin-bottom: 2vh;
    }

    .bottom-bar {
        padding-left: 8vw;
        padding-top: 8vw;
        margin-top: 6vh;
    }
    .bottom-bar span {
        font-size: 21px;
    }
    .bottom-bar p {
        font-size: 14px;
        top: 2vw;
        margin-bottom: 4vh;
    }
    .some-button {
        margin-bottom: 4vh;
    }

    .service-main-nav-ui {
        margin: 12vw 10vw 17vw;
    }

    .service-main-nav {
        top: -4%;
    }
    .service-main-nav {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }
    .design-process-wrapper {
        margin-top: 15vh;
        /*display: none;*/
    }
    .service-main-nav-item:hover .service-main-nav-item-p {
        display: none;
    }

}
@media screen and (min-width: 400px) and (max-width: 420px) {

}
@media screen and (max-width: 320px) {


}
@media screen and (min-width: 1280px) and (max-width: 1280px) {

    .some-design-span {
        width: 344px;
        top: 45%;
        left: 3%;
    }
    .ui-slider-text {
        left: 3%;
    }

}
@media screen and (min-width: 1680px) and (max-width: 2500px) {

    .some-design-span {
        top: 30%;
        left: 10%;
    }
    .ui-slider-text {
        left: 10%;
        font-size: 17px;
    }
    .text-list {
        top: 32%;
    }
}