.section_1 {
    padding-bottom: 1000px;

    .row_2 {
        padding-top: 80px;
        position: relative;
        display: none;

        /* &:before {
            top: 20px;
            left: -20px;
            right: -20px;
            height: 20px;
            content: '';
            position: absolute;
            background-size: contain;
            background-repeat: repeat-x;
            background-image: url(../images/roadBg3.jpg);
        } */
    }
}

.eachFinanceWrap {
    padding-top: 40px;
    position: relative;

    &:before {
        top: 0;
        left: calc(25% - 6px);
        right: calc(25% - 6px);
        height: 50px;
        content: '';
        margin: auto;
        border-radius: 20px;
        position: absolute;
        border: 2px solid var(--green);
        border-bottom: 0;
    }
}

.eachFinance {
    min-height: 260px;
}

.protocolBoxWrap {
    .protocolHead {
        display: flex;
        align-items: center;
    }

    .eachAcc .accCont {
        display: none;
    }

    .eachAcc:first-child .accCont {
        display: block;
    }

    .eachAcc {
        position: relative;
        border-radius: 10px;
        box-shadow: 0 0 10px var(--greenDk);

        &:not(:last-child) {
            margin-bottom: 30px;

            &:after {
                left: 0;
                right: 0;
                width: 60px;
                z-index: -1;
                content: '';
                margin: auto;
                height: 20px;
                bottom: -19px;
                position: absolute;
                background-color: var(--greenDk);
                clip-path: polygon(100% 0, 0 0, 50% 100%);
            }
        }

        .numTxt {
            font-size: 14px;
            color: #ffffff;
            padding: 5px 25px;
            margin-right: 15px;
            border-radius: 5px;
            display: inline-block;
            background: #5aba48;
        }

        .accTrigger {
            cursor: pointer;
            padding: 8px 20px;
            transition: 0.6s;
            border-radius: 10px;

            &.active {
                border-radius: 10px 10px 0 0;
            }
        }

        .accCont {
            padding: 0px 20px 15px;
            background-color: #fff;
            border-radius: 0 0 20px 20px;

            &:before {}
        }
    }
}

.capacityWrap {
    .eachBox {
        padding-left: 70px;
        position: relative;

        &:not(:last-child) {
            margin-bottom: 30px;
        }

        &:before {
            bottom: 5px;
            top: 80px;
            left: 15px;
            width: 2px;
            content: '';
            position: absolute;
            border: 2px dashed #becabe;
        }

        .numTxt {
            top: 0;
            left: 0;
            width: 50px;
            font-size: 70px;
            font-weight: 700;
            line-height: 0.9;
            position: absolute;
            background: -webkit-linear-gradient(90deg, #8fcb8100 0%, #8fcb81 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

.impactList {
    display: flex;
    align-items: center;
    justify-content: space-between;

    li {
        width: calc(33.33% - 30px);

        .impactBox {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding-left: 40px;
            padding-right: 40px;

            &:before {
                top: 0;
                left: -4px;
                bottom: 0;
                width: 12px;
                height: 80px;
                content: '';
                margin: auto;
                position: absolute;
                border-radius: 5px;
            }

            .arrowBox {
                top: 50%;
                z-index: 2;
                width: 60px;
                height: 60px;
                right: -30px;
                display: flex;
                border-radius: 50%;
                position: absolute;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                transform: translateY(-50%);
                border: 2px solid #939598;

                span {
                    width: 30px;
                    height: 40px;
                    display: block;
                    right: -5px;
                    position: relative;
                    border: 1px solid #939598;
                    clip-path: polygon(0 0, 0% 100%, 100% 50%);
                }
            }

            &.box_064b44 {
                &:before {
                    background-color: #064b44;
                }

                .arrowBox {
                    span {
                        background-color: #064b44;
                    }
                }
            }

            &.box_59ba47 {
                &:before {
                    background-color: #59ba47;
                }

                .arrowBox {
                    span {
                        background-color: #59ba47;
                    }
                }
            }
        }
    }
}

.box {
    position: relative;

    &.box_9 {
        padding-bottom: 600px !important;

        &:before {
            top: 0;
            left: -30px;
            right: -30px;
            bottom: 0;
            content: '';
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom center;
            background-image: url(../images/safety/box_9_bg.png);
        }

        &:after {
            top: 0;
            left: -30px;
            right: -30px;
            bottom: 0;
            content: '';
            position: absolute;
            background-image: linear-gradient(180deg, #dce4f1 35%, #dce4f100 100%);
        }

        .topRowRoad {
            z-index: 1;
            position: relative;
        }
    }

    &.box_11 {
        &:before {
            top: 0;
            bottom: 0;
            left: -30px;
            right: -30px;
            content: '';
            position: absolute;
            background-color: #e6f3e4;
        }
    }

    .focusline_section {
        .resView {
            display: none;
        }

        .focuslineWrap {
            padding-top: 20px;
            .focusContainer_sm {
                flex-wrap: wrap;
                width: 320vw;
                display: flex;
                /* padding-bottom: 200px; */
                align-items: flex-end;
            }

            .focusLineImg {
                padding-top: 60px;
                position: relative;

                &:before {
                    top: 0px;
                    left: -30px;
                    right: -30px;
                    height: 20px;
                    content: '';
                    position: absolute;
                    background-size: contain;
                    background-repeat: repeat-x;
                    background-image: url(../images/roadBg5.jpg);
                }
            }

            .focusList {
                z-index: 100;
                position: relative;

                .li {
                    display: flex;
                    position: relative;
                    align-items: center;
                    margin-right: 50px;

                    .focusListWrap {
                        width: 25vw;

                        .focusContBox {
                            min-height: 400px;
                            .focusImg {
                                width: 100%;
                                height: 250px;
                                overflow: hidden;
                                text-align: center;
                                border-radius: 20px;
                                margin-bottom: 15px;

                                img {
                                    width: 100%;
                                    object-position: top;
                                }

                                h5 {}
                            }
                        }

                        .focusBox {
                            height: 200px;
                            display: flex;
                            text-align: center;
                            position: relative;
                            align-items: flex-end;
                            justify-content: center;

                            &:before,
                            &:after {
                                content: '';
                                position: absolute;
                                background-color: #555858;
                            }

                            &:before {
                                left: 0;
                                right: 0;
                                width: 2px;
                                bottom: 60px;
                                margin: auto;
                                height: 140px;
                            }

                            &:after {
                                top: 0;
                                left: 0;
                                right: 0;
                                width: 10px;
                                height: 10px;
                                margin: auto;
                                border-radius: 50%;
                            }

                            span {
                                width: 80px;
                                height: 80px;
                                padding: 10px;
                                font-size: 50px;
                                border-radius: 50%;
                                position: relative;
                                align-items: center;
                                display: inline-flex;
                                margin-bottom: -50px;
                                justify-content: center;
                                background-color: #fff;
                                border: 2px solid var(--green);

                                &:before {
                                    left: 0;
                                    right: 0;
                                    top: -35px;
                                    width: 10px;
                                    height: 10px;
                                    margin: auto;
                                    content: '';
                                    border-radius: 50%;
                                    position: absolute;
                                    background-color: #555858;
                                }
                            }
                        }
                    }

                    &:nth-child(odd) {
                        .focusListWrap {
                            .focusBox {
                                span {
                                    color: var(--green);
                                }
                            }
                        }
                    }

                    &:nth-child(even) {
                        .focusListWrap {
                            .focusBox {
                                span {
                                    color: var(--greenDk);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Responsive */
@media (max-width: 1768px) {
    .section_1 {
        padding-bottom: 800px;
    }
}

@media (max-width: 1600px) {
    .section_1 {
        padding-bottom: 420px;
    }

    h3,
    .h3 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .box {
        &.box_9 {
            padding-bottom: 400px !important;
        }

        .focusline_section {
            .focuslineWrap {
                .focusList {
                    .li {
                        .focusListWrap {
                            .focusContBox {
                                .fz_24 {
                                    font-size: 20px !important;
                                }

                                .focusImg {
                                    height: 220px;
                                }
                            }

                            .focusBox {
                                height: 110px;

                                &::before {
                                    height: 60px;
                                    bottom: 45px;
                                }

                                span {
                                    width: 65px;
                                    height: 65px;
                                    font-size: 40px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1440px) {

    h3,
    .h3 {
        font-size: 24px;
    }

    h5,
    .h5 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .fz_28 {
        font-size: 24px !important;
    }

    .impactList {
        li {
            .impactBox {
                padding-left: 20px;
                padding-right: 30px;

                .arrowBox {
                    width: 42px;
                    height: 42px;
                    right: -20px;

                    span {
                        width: 20px;
                        height: 30px;
                        display: block;
                        right: -3px;
                    }
                }
            }
        }
    }

    .fz_40 {
        font-size: 30px !important;
    }

    h4,
    .h4 {
        font-size: 20px !important;
        margin-bottom: 12px;
    }

    .box {
        .focusline_section {
            .focuslineWrap {
                .focusList {
                    .li {
                        .focusListWrap {
                            .focusContBox {
                                min-height: 290px;
                                .fz_24 {
                                    font-size: 16px !important;
                                }

                                .focusImg {
                                    height: 170px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1280px) {
    .box {
        .focusline_section {
            .focuslineWrap {
                .focusList {
                    .li {

                        margin-right: 30px;

                        .focusListWrap {
                            .focusBox {
                                height: 85px;

                                &::before {
                                    height: 36px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .fz_28 {
        font-size: 20px !important;
    }

    h6,
    .h6 {
        font-size: 17px;
    }

    .protocolBoxWrap {
        .eachAcc {
            .accTrigger {
                font-size: 16px !important;
            }
        }
    }

    .box {
        &.box_9 {
            padding-bottom: 200px !important;
        }

        &.box_11 {
            padding-bottom: 100px !important;
        }

        .focusline_section {
            .focuslineContainer {
                display: none;
            }

            .resView {
                display: block;

                .focuslineWrap {
                    .focusSlick {
                        .slick-list {
                            padding-bottom: 100px;
                        }

                        .slick-track {
                            display: flex;
                            align-items: flex-end;
                        }

                        .focusSlide {
                            padding: 0 10px;

                            .focusListWrap {
                                height: 412px;
                            }

                            .focusContBox {
                                .focusImg {
                                    width: 100%;
                                    height: 240px;
                                    overflow: hidden;
                                    text-align: center;
                                    border-radius: 20px;
                                    margin-bottom: 15px;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                .fz_24 {
                                    font-size: 16px !important;
                                    min-height: 80px;
                                }
                            }

                            .focusBox {
                                height: 85px;
                                display: flex;
                                text-align: center;
                                position: relative;
                                align-items: flex-end;
                                justify-content: center;

                                &:before,
                                &:after {
                                    content: '';
                                    position: absolute;
                                    background-color: #555858;
                                }

                                &:before {
                                    left: 0;
                                    right: 0;
                                    width: 2px;
                                    bottom: 45px;
                                    margin: auto;
                                    height: 36px;
                                }

                                &:after {
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    width: 10px;
                                    height: 10px;
                                    margin: auto;
                                    border-radius: 50%;
                                }

                                span {
                                    width: 65px;
                                    height: 65px;
                                    padding: 10px;
                                    font-size: 40px;
                                    border-radius: 50%;
                                    position: relative;
                                    align-items: center;
                                    display: inline-flex;
                                    margin-bottom: -50px;
                                    justify-content: center;
                                    background-color: #fff;
                                    border: 2px solid var(--green);

                                    &:before {
                                        left: 0;
                                        right: 0;
                                        top: -35px;
                                        width: 10px;
                                        height: 10px;
                                        margin: auto;
                                        content: '';
                                        border-radius: 50%;
                                        position: absolute;
                                        background-color: #555858;
                                    }
                                }
                            }

                            &:nth-child(odd) {
                                .focusBox {
                                    span {
                                        color: var(--green);
                                    }
                                }
                            }

                            &:nth-child(even) {
                                .focusBox {
                                    span {
                                        color: var(--greenDk);
                                    }
                                }
                            }
                        }
                    }

                    .focusLineImg {
                        margin-top: -30px;
                    }

                    .slick-arrow {
                        width: 50px;
                        height: 50px;
                        border: none;
                        border-radius: 50%;
                        background-color: #064B44;
                        position: absolute;
                        font-size: 0;
                        cursor: pointer;
                        top: auto;
                        bottom: -95px;
                        left: calc(50% - 60px);
                        transform: translateY(-50%);
                        transition: all 0.5s;
                        z-index: 2;

                        &::after {
                            content: '';
                            position: absolute;
                            background-image: url(../images/home/left-arrow.png);
                            background-repeat: no-repeat;
                            background-size: contain;
                            width: 30px;
                            height: 20px;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            transition: all 0.5s;
                        }

                        &.slick-next {
                            left: auto;
                            right: calc(50% - 60px);

                            &::after {
                                background-image: url(../images/home/right-arrow.png);
                            }
                        }

                        &.slick-disabled {
                            opacity: 0.5;
                            pointer-events: none;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1140px) {
    .box {
        &.box_9 {
            &:after {
                background-image: linear-gradient(180deg, #dce4f1 70%, #dce4f100 100%);
            }
        }
    }
}

@media (max-width: 1024px) {
    .section_1 {
        background-image: unset !important;
        padding-top: 50px;
        padding-bottom: 0px;

        .row_2 {
            display: block;
            padding-top: 30px;

            .col_1 {
                img {
                    display: block;
                    height: 400px;
                    width: 100%;
                    object-fit: cover;
                }
            }
        }
    }

    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusListWrap {
                                height: 460px;
                            }

                            .focusContBox {
                                .focusImg {
                                    height: 300px;
                                }

                                .fz_24 {
                                    min-height: 65px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    section {
        overflow: hidden;
    }

    h6,
    .h6 {
        font-size: 14px;
    }

    .section_1 {
        .row_1 {
            .col_1 {
                .greenBg3 {
                    &.p_30 {
                        padding: 20px;
                    }
                }
            }
        }
    }

    .eachFinance {
        min-height: 190px;
        text-align: center;
        padding: 12px;
        padding-top: 25px;
    }

    .capacityWrap {
        .eachBox {
            padding-left: 50px;

            .numTxt {
                width: 40px;
                font-size: 60px;
            }
        }
    }

    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusContBox {
                                .fz_24 {
                                    font-size: 14px !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {

    h3,
    .h3 {
        font-size: 22px;
    }

    .fz_28 {
        font-size: 18px !important;
    }

    .section_1 {
        .row_2 {
            .col_1 {
                img {
                    height: 300px;
                }
            }
        }
    }

    .protocolBoxWrap {
        .eachAcc {
            .numTxt {
                padding: 5px 20px;
                margin-right: 12px;
            }

            .accTrigger {
                font-size: 14px !important;
            }

            &:not(:last-child) {
                &:after {
                    width: 36px;
                    height: 15px;
                    bottom: -15px;
                }
            }
        }
    }

    .impactList {
        flex-wrap: wrap;
        gap: 30px;

        li {
            width: 100%;

            .impactBox {
                height: auto;
                min-height: 100px;

                &:before {
                    width: 10px;
                    height: 60px;
                    left: 0;
                }

                .arrowBox {
                    right: auto;
                    left: 50%;
                    top: auto;
                    bottom: -20px;
                    transform: translateX(-50%) rotate(90deg);
                }
            }
        }
    }

    .fz_40 {
        font-size: 20px !important;
    }
}

@media (max-width: 767px) {
    .wid_1b2 {
        width: 100%;
    }

    .imgBox {
        &.wid_1b2 {
            width: 100%;
        }
    }

    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusListWrap {
                                height: auto;
                            }

                            .focusContBox {
                                .fz_24 {
                                    min-height: auto;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .eachFinance {
        &.wid_1b2 {
            width: calc(50% - 10px);
        }
    }

    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusContBox {
                                .focusImg {
                                    height: 440px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 640px){
    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusContBox {
                                .focusImg {
                                    height: 370px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 575px) {

    h3,
    .h3 {
        font-size: 20px;
    }

    h4,
    .h4 {
        font-size: 18px !important;
    }

    h5,
    .h5 {
        font-size: 16px !important;
    }

    .section_1 {
        .row_2 {
            .col_1 {
                img {
                    height: auto;
                }
            }
        }
    }

    .eachFinanceWrap {
        flex-direction: column;
        gap: 40px;

        &:before {
            content: normal;
        }
    }

    .eachFinance {
        width: 100% !important;
        min-height: auto;

        &:not(:last-child) {
            &::after {
                content: '';
                position: absolute;
                width: 2px;
                height: 30px;
                bottom: -30px;
                left: 50%;
                transform: translateX(-50%);
                background-color: var(--green);
            }
        }
    }

    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            .focusContBox {
                                .focusImg {
                                    height: 340px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .box {
        .focusline_section {
            .resView {
                .focuslineWrap {
                    .focusSlick {
                        .focusSlide {
                            padding: 0 5px;

                            .focusContBox {
                                .focusImg {
                                    height: 270px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}