/* Start:/technical-connection/style.css?176303127512872*/
:root {
    --block-h: 140px;
    --block-w: calc(1380px / 4);
}

@media (max-width: 1500px) {
    :root {
        --block-w: calc(1380px / 5);
    }
}


.bs-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bs-item {
    position: relative;
    padding: 20px;
    width: var(--block-w);
    height: var(--block-h);
}

.bs {
    background: #E9EBF0;
    border-radius: 20px;
    padding: 10px;
    font-size: 16px;
    line-height: 125%;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-orange {
    background: rgb(255 69 0 / 20%);
}

.bs-wrap {
    position: relative;
}

.bs-text {
    position: absolute;
    font-size: 14px;
    line-height: normal;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bs-item-4 .bs-text {
    top: 0;
    height: 100%;
    right: -20px;
}

.bs-item-6 .bs-text {
    top: -20px;
    right: 50%;
}

.bs-item-7 .bs-text,
.bs-item-9 .bs-text,
.bs-item-14 .bs-text,
.bs-item-15 .bs-text,
.bs-item-16 .bs-text {
    top: -20px;
    right: calc(50% + 10px);
    width: auto;
}

.bs-item-8 .bs-text {
    top: 50px;
    left: -40px;
}

.bs-item-10 .bs-text {
    top: -20px;
    left: 50%;
}

.bs-item-11 .bs-text {
    top: -20px;
    left: calc(50% + 10px);
    width: auto;
}

.bs-item-12 .bs-text {
    top: 50px;
    right: -40px;
}

.bs-item-13 .bs-text {
    top: -20px;
    right: 50%;
}

.bs-item-17 .bs-text {
    top: 30px;
    left: -20px;
}

@media (max-width: 1200px) {
    .bs-item-11 .bs-text {
        left: auto;
        right: calc(50% + 10px);
    }

    .bs-item-12 .bs-text {
        right: auto;
        left: -40px;
    }

    .bs-item-13 .bs-text {
        right: auto;
        left: 50%;
    }

    .bs-item-15 .bs-text {
        top: 50px;
        right: -40px;
        width: 40px;
    }

    .bs-item-17 .bs-text {
        left: auto;
        top: -20px;
        right: calc(50% + 10px);
    }
}

@media (max-width: 670px) {
    .bs-item-4 .bs-text br {
        display: none;
    }

    .bs-item-4 .bs-text {
        top: -20px;
        height: 40px;
        right: calc(50% + 10px);
        width: auto;
    }

    .bs-item-8 .bs-text,
    .bs-item-12 .bs-text {
        top: 20px;
        left: 0;
        width: 20px;
    }

    .bs-item-6 .bs-text,
    .bs-item-10 .bs-text,
    .bs-item-13 .bs-text {
        left: 50%;
        height: 20px;
    }

    .bs-item-15 .bs-text {
        top: -20px;
        left: calc(50% + 10px);
        right: auto;
        width: auto;
        height: 20px;
    }

    .bs-top-m,
    .bs-bottom-m {
        position: absolute;
        width: 1px;
        height: 20px;
        left: 50%;
        background: #35383A;
    }

    .bs-top-m {
        top: 0;
    }

    .bs-bottom-m {
        bottom: 0;
    }

    .bs-left-m,
    .bs-right-m {
        position: absolute;
        height: 1px;
        width: 20px;
        top: 50%;
        background: #35383A;
    }

    .bs-left-m {
        left: 0;
    }

    .bs-right-m {
        right: 0;
    }

    .bs-in-m::before {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid #35383A;
        position: absolute;
    }

    .bs-top-m.bs-in-m::before {
        bottom: 0;
        left: -4px;
    }

    .bs-bottom-m.bs-in-m::before {
        top: 0;
        left: -4px;
        transform: rotate(180deg);
    }

    .bs-left-m.bs-in-m::before {
        top: -4px;
        right: 0;
        transform: rotate(-90deg);
    }

    .bs-right-m.bs-in-m::before {
        top: -4px;
        left: 0;
        transform: rotate(90deg);
    }

    .bs-wrap-1::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-left: 1px solid #35383A;
        border-top: 1px solid #35383A;
        height: calc(var(--block-h) * 11);
        width: calc(var(--block-w) / 2);
        top: -70px;
        left: 0;
    }

    .bs-wrap-3::before,
    .bs-wrap-4::before,
    .bs-wrap-8::before,
    .bs-wrap-11::before,
    .bs-wrap-12::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-right: 1px solid #35383A;
        border-bottom: 1px solid #35383A;
        width: calc(var(--block-w) / 2);
        top: -70px;
        right: 0;
    }

    .bs-wrap-3::before {
        height: calc(var(--block-h) * 2 + 70px);
    }

    .bs-wrap-4::before {
        height: calc(var(--block-h) * 3 + 70px);
    }

    .bs-wrap-8::before {
        height: calc(var(--block-h) * 2 + 70px);
    }

    .bs-wrap-11::before {
        height: calc(var(--block-h) + 70px);
    }

    .bs-wrap-12::before {
        height: calc(var(--block-h) + 70px);
        top: 70px;
    }
}

@media (max-width: 1200px) and (min-width: 671px) {

    .bs-top-pda,
    .bs-bottom-pda {
        position: absolute;
        width: 1px;
        height: 20px;
        left: 50%;
        background: #35383A;
    }

    .bs-top-pda {
        top: 0;
    }

    .bs-bottom-pda {
        bottom: 0;
    }

    .bs-left-pda,
    .bs-right-pda {
        position: absolute;
        height: 1px;
        width: 20px;
        top: 50%;
        background: #35383A;
    }

    .bs-left-pda {
        left: 0;
    }

    .bs-right-pda {
        right: 0;
    }

    .bs-in-pda::before {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid #35383A;
        position: absolute;
    }

    .bs-top-pda.bs-in-pda::before {
        bottom: 0;
        left: -4px;
    }

    .bs-bottom-pda.bs-in-pda::before {
        top: 0;
        left: -4px;
        transform: rotate(180deg);
    }

    .bs-left-pda.bs-in-pda::before {
        top: -4px;
        right: 0;
        transform: rotate(-90deg);
    }

    .bs-right-pda.bs-in-pda::before {
        top: -4px;
        left: 0;
        transform: rotate(90deg);
    }

    .bs-list {
        align-items: flex-end;
        margin: 0 auto;
        max-width: calc(var(--block-w) * 2);
    }

    .bs-wrap-1 {
        display: flex;
        flex-direction: row-reverse;
    }

    .bs-wrap-1::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-top: 1px solid #35383A;
        border-left: 1px solid #35383A;
        height: calc(var(--block-h) * 7);
        width: var(--block-w);
        top: -70px;
        left: 0;
    }

    .bs-wrap-3 {
        display: flex;
        flex-direction: column-reverse;
    }

    .bs-wrap-3::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        width: 1px;
        height: 70px;
        bottom: 100%;
        left: 50%;
    }

    .bs-wrap-4 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .bs-wrap-4::before,
    .bs-wrap-8::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: 1px;
        width: var(--block-w);
        top: 0;
        left: calc(var(--block-w) / 2);
    }

    .bs-wrap-5 {
        position: absolute;
        top: 0;
        left: 0;
    }

    .bs-wrap-5-2 {
        position: absolute;
        top: calc(var(--block-h) * 3);
        left: 0;
    }

    .bs-wrap-6 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .bs-wrap-8 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .bs-wrap-9 {
        position: absolute;
        top: 0;
        left: 0;
    }

    .bs-wrap-9::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: var(--block-h);
        width: 1px;
        bottom: 70px;
        right: 0;
    }

    .bs-wrap-10::before,
    .bs-wrap-12::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: calc(var(--block-h) * 2);
        width: 1px;
        top: 70px;
        right: 0;
    }
}

@media (min-width: 1201px) {

    .bs-top,
    .bs-bottom {
        position: absolute;
        width: 1px;
        height: 20px;
        left: 50%;
        background: #35383A;
    }

    .bs-top {
        top: 0;
    }

    .bs-bottom {
        bottom: 0;
    }

    .bs-left,
    .bs-right {
        position: absolute;
        height: 1px;
        width: 20px;
        top: 50%;
        background: #35383A;
    }

    .bs-left {
        left: 0;
    }

    .bs-right {
        right: 0;
    }

    .bs-in::before {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid #35383A;
        position: absolute;
    }

    .bs-top.bs-in::before {
        bottom: 0;
        left: -4px;
    }

    .bs-bottom.bs-in::before {
        top: 0;
        left: -4px;
        transform: rotate(180deg);
    }

    .bs-left.bs-in::before {
        top: -4px;
        right: 0;
        transform: rotate(-90deg);
    }

    .bs-right.bs-in::before {
        top: -4px;
        left: 0;
        transform: rotate(90deg);
    }

    .bs-wrap-1 {
        display: flex;
        flex-direction: row-reverse;
        margin-left: calc(var(--block-w) * (-1));
    }

    .bs-wrap-3 {
        display: flex;
        flex-direction: column-reverse;
    }

    .bs-wrap-3::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        width: 1px;
        height: 70px;
        bottom: 100%;
        left: 50%;
    }

    .bs-wrap-4 {
        display: flex;
    }

    .bs-wrap-4::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: 1px;
        width: calc(var(--block-w) * 2);
        top: 0;
        left: calc(var(--block-w) / 2);
    }

    .bs-wrap-5::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-top: 1px solid #35383A;
        border-left: 1px solid #35383A;
        width: calc(var(--block-w) / 2 * 3);
        height: calc(var(--block-h) * 5);
        bottom: calc(100% - 210px);
        left: 0;
    }

    .bs-wrap-6 {
        display: flex;
        flex-direction: column;
    }

    .bs-wrap-6::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-top: 1px solid #35383A;
        border-right: 1px solid #35383A;
        width: calc(var(--block-w) / 2 * 3);
        height: calc(var(--block-h) * 6);
        bottom: calc(100% - 350px);
        right: 0;
    }

    .bs-wrap-7 {
        display: flex;
        justify-content: center;
    }

    .bs-wrap-8 {
        display: flex;
        flex-direction: row-reverse;
    }

    .bs-wrap-8::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: 1px;
        width: var(--block-w);
        top: 0;
        left: 50%;
    }

    .bs-wrap-9::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        background: #35383A;
        height: var(--block-h);
        width: 1px;
        top: 70px;
        left: 0;
    }

    .bs-wrap-10 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .bs-wrap-10::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-top: 1px solid #35383A;
        border-left: 1px solid #35383A;
        height: 70px;
        width: calc(var(--block-w) / 2);
        top: 70px;
        left: calc(var(--block-w) / 2);
    }

    .bs-wrap-11 {
        display: flex;
    }

    .bs-wrap-12 {
        display: flex;
        justify-content: flex-end;
    }

    .bs-wrap-13 {
        display: flex;
        justify-content: center;
    }

    .bs-wrap-13::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        border-bottom: 1px solid #35383A;
        border-right: 1px solid #35383A;
        height: 71px;
        width: calc(var(--block-w) / 2 + 1px);
        bottom: 69px;
        right: calc(var(--block-w) / 2 - 1px);
    }
}
/* End */
/* /technical-connection/style.css?176303127512872 */