.top-news {
    margin-top: 40px;
}

    .highlight {
        background-color: rgb(245, 249, 251);
        min-height: 500px;
        padding: 1rem !important;
    }
    .slider-for,
    .slider-nav {
        margin: 2rem auto;
        max-width: 1020px;
    }
    .slider-for {
        max-width: calc(1020px - 2rem);
        background-color: #fff;
        min-height: 400px;
    }
    /* top slider */
    .slider-for .slider-inner-container {
        display: flex;
    }
    .slider-for .content {
        width: 60%;
        height: 100%;
        padding: 2rem;
        font-size: 1.125rem;
    }
    .slider-for .content h2 {
        font-size: 1.75rem;
        font-weight: bold;
    }
    .slider-for .content span {
        font-size: .8rem;
        margin-bottom: 2rem;
        display: block;
    }
    .slider-for .content p {
        max-height: 112px;
        overflow: hidden;
        padding-left: 1rem;
        font-weight: 400;
        line-height: 1.75rem;
    }
    .slider-for .content a {
        margin-top: 2rem;
        display: block;
    }
    .slider-for .image {
        width: 40%;
        height: 100%;
        overflow: hidden;
        max-height: 400px;
    }
    .slider-for .image {
        background-color: rgb(245, 249, 251);
        overflow: hidden;
        position: relative;
    }
    /* nav-slider */
    .slider-nav .content {
        margin: 1rem;
        padding: 1rem 2rem;
        padding-bottom: 2rem;
        background-color: #fff;
    }
    .slider-nav h2 {
        font-size: 1.125rem;
        margin-bottom: 1.75rem;
    }
    .slider-nav span {
        font-size: .8rem;
    }
    @media (max-width: 1200px) {
        .slider-for {
            max-width: calc(800px - 2rem);
            min-height: auto;
        }
        .slider-for .image {
            display: none;
            visibility: hidden;
        }
        .slider-for .content {
            width: 100%;
        }
        .slider-nav {
            max-width: calc(768px + 2em);
            margin: -1rem auto;
        }
    }
    @media (max-width: 1010px) {
        .slider-for {
            max-width: 80%;
            min-height: auto;
        }
        .slick-dotted.slick-slider .slick-list {
            display: none;
        }
        .slick-prev:hover,
        .slick-prev:focus,
        .slick-next:hover,
        .slick-next:focus {
            margin: 0;
        }
        .slick-prev {
            left: -50px;
        }
        .slick-next {
            right: -50px;
        }
        .slick-dots {
            position: relative;
        }
        .slider-nav {
            margin: -2rem auto;
        }
    }