/* --Start banner--------------- */
.section-banner {
    margin-top: 61px;
    position: relative;
    height: 25vh;
    background: url(../img/news/page/banner2.webp) no-repeat center center/ cover scroll;
}

.section-banner .text-item {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.section-banner .item h2 {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    font-family: 'Noto Sans TC';
    letter-spacing: 2px;
    line-height: 1.5;
    position: relative;
    margin-bottom: 0;
    text-align: center;
}

@media (min-width: 992px) {
    .section-banner .item h2 {
        font-size: 30px;
    }

    .section-banner {
        height: 45vh;
        margin-top: 61px;
    }

}

@media (min-width: 1200px) {
    .section-banner {
        margin-top: 84px;
    }

}


/* --End banner--------------- */
/* START news ------------------------------ */
.section-news {
    padding: 50px 0;
    background: #fff;
}

.section-news .title-item {
    position: relative;
    display: block;
    margin-bottom: 30px;
    text-align: center;
}



.section-news .title-item h2 {
    font-size: 20px;
    font-family: 'Noto Sans TC';

    font-weight: 500;
    color: #2B3066;
    text-shadow: 0 0.1rem 1rem rgba(255, 255, 255, 0.205);
    letter-spacing: 2px;
    margin-bottom: 50px;
    position: relative;
}
@media (min-width: 576px) {

    .section-news .title-item h2 {
        font-size: 24px;
    }
    }
    @media (min-width: 1200px) {
        .section-news {
            padding: 100px 0;
        }

            .section-news .title-item h2 {
                font-size: 30px;
            }
    }


    .section-news .a-link {
        display: inline-block;
        text-align: center;
        color: #666666;
        transition: all 0.2s ease-in-out;
        font-size: 16px;
        font-weight: 400;
        padding: 10px 20px;
        border-bottom: 2px solid #c2c2c2;
    }

        .section-news .a-link + .a-link {
            margin-left: 10px;
        }

        .section-news .a-link.active {
            border-color: #d00f31;
        }

        .section-news .a-link:hover {
            color: #d00f31;
        }

    .section-news .item {
        transition: all 0.2s ease-in-out;
        background: #fff;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        display: block;
        height: 100%;
        position: relative;
    }



        .section-news .item .pic-item {
            position: relative;
            width: 100%;
            padding-bottom: 60%;
            overflow: hidden;
            border: 1px solid #eee;
        }

            .section-news .item .pic-item img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: all 0.2s ease-in-out;
                object-fit: contain;
            }


        .section-news .item .text-item {
            padding: 0 5px 20px;
            margin: 10px 0;
        }

            .section-news .item .text-item span {
                color: #666;
                display: block;
                padding: 0;
                position: absolute;
                bottom: 5px;
            }

            .section-news .item .text-item h3 {
                font-size: 18px;
                color: #3a3a3a;
                margin: 10px 0;
                transition: all 0.2s ease-in-out;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }



            .section-news .item .text-item p {
                color: #666;
                font-size: 16px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 0;
            }

        .section-news .item:hover .text-item h3 {
            color: #d00f31;
        }

    .section-news.video .item:hover .text-item h3 {
        color: #3d3d3d;
    }

    .section-news .item:hover .pic-item img {
        transform: scale(1.05);
    }


    .section-news .more-link {
        color: #fff;
        display: inline-block;
        background: url(../img/index/btn.webp) no-repeat center center/ 100% 100% scroll;
        border-radius: 5px;
        margin-top: 30px;
        padding: 10px 40px;
        transition: all 0.2s ease-in-out;
        text-transform: uppercase;
        font-size: 15px;
    }



        .section-news .more-link:hover {
            color: #E0002E;
            background: url(../img/index/btn-hover.webp) no-repeat center center/ 100% 100% scroll;
        }

    @media (min-width: 992px) {

        .section-news .item .text-item h3 {
            font-size: 20px;
        }

        .section-news .item .text-item {
            padding: 0 15px 20px;
        }
    }

    /* --End news--------------- */
    /* --Start content--------------- */
    .section-news-content {
        padding: 60px 0;
    }
@media (min-width: 576px) {
    .section-news-content {
        padding: 100px 0;
    }
}
    /* --End content--------------- */

    /* --Start solution--------------- */
    .section-solution {
        padding: 50px 0;
        background: #fff;
    }

        .section-solution .title-item {
            position: relative;
            display: block;
            text-align: center;
            margin-bottom: 30px;
        }



            .section-solution .title-item h2 {
                font-family: 'Noto Sans TC';
                font-weight: 500;
                color: #2B3066;
                font-size: 24px;
                text-shadow: 0 0.1rem 1rem rgba(255, 255, 255, 0.205);
                letter-spacing: 2px;
                margin-bottom: 50px;
                position: relative;
            }

    @media (min-width: 1200px) {
        .section-solution {
            padding: 100px 0;
        }

            .section-solution .title-item h2 {
                font-size: 30px;
            }
    }

    .section-solution .item {
        display: block;
        transition: all 0.2s ease-in-out;
        position: relative;
        background: url(../img/product/page/category-bg.webp) no-repeat center center/ 100% 100% scroll;
    }

        .section-solution .item .pic-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            overflow: hidden;
            margin: auto;
        }

            .section-solution .item .pic-item img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

        .section-solution .item h4 {
            font-size: 18px;
            color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease-in-out;
            padding: 20px 0;
            margin-bottom: 0;
        }

        .section-solution .item:hover {
            background: url(../img/product/page/category-bg-hover.webp) no-repeat center center/ 100% 100% scroll;
        }

            .section-solution .item:hover h4 {
                color: #fff;
            }

    .section-solution .text-item {
        background: #818588;
        color: #fff;
        padding: 20px 15px;
    }

        .section-solution .text-item a {
            transition: all 0.2s ease-in-out;
            color: #ccc;
        }

            .section-solution .text-item a:hover {
                color: #fff;
            }

    /* --End solution--------------- */

    /* --Start download--------------- */

    .section-download {
        padding: 60px 0;
        background: #fff;
        position: relative;
    }

    .section-download .title-item {
        position: relative;
        display: block;
        text-align: center;
        margin-bottom: 50px;
    }

        .section-download .title-item h2 {
            font-size: 20px;
            font-family: 'Noto Sans TC';
            font-weight: 500;
            color: #2B3066;
            letter-spacing: 2px;
            margin-bottom: 50px;
            position: relative;
        }
@media (min-width: 576px) {
    .section-download {
        padding: 100px 0;
    }

        .section-download .title-item h2 {
            font-size: 24px;
        }
}
    @media (min-width: 1200px) {
        .section-download {
            padding: 100px 0;
        }

            .section-download .title-item h2 {
                font-size: 30px;
            }
    }

    .section-download .item {
        box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
        background: #F9F9F9;
        display: block;
        padding: 10px 0;
        height: 100%;
    }

        .section-download .item .pic-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            overflow: hidden;
        }

            .section-download .item .pic-item img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                transition: all 0.2s ease-in-out;
            }

        .section-download .item:hover img {
            transform: scale(1.05);
        }

        .section-download .item .text-item {
            padding: 10px;
        }

            .section-download .item .text-item h3 {
                font-size: 18px;
                color: #2B3066;
            }

            .section-download .item .text-item p {
                color: #000;
                padding-left: 15px;
                margin-bottom: 0;
            }

            .section-download .item .text-item .contact-item {
                position: relative;
                color: #666666;
                padding-left: 10px;
            }

                .section-download .item .text-item .contact-item:after {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 80%;
                    background: #E0002E;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }

    .section-download .owl-carousel .owl-stage {
        padding: 100px 0;
    }


    .section-download .owl-dots {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

        .section-download .owl-dots .owl-dot {
            width: 13px;
            height: 13px;
            background: #c2c3c3;
            border-radius: 100%;
        }

            .section-download .owl-dots .owl-dot + .owl-dot {
                margin-left: 10px;
            }

            .section-download .owl-dots .owl-dot.active {
                background: #d00f31;
            }


    .section-download .news_carousel_slider .owl-next,
    .section-download .news_carousel_slider .owl-prev {
        position: absolute;
        justify-content: center;
        align-items: center;
        color: #E9E9E9;
        width: 40px;
        height: 100px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        opacity: 1;
        z-index: 3;
        transition: all 0.2s ease-in-out;
        display: none;
    }

    @media (min-width: 992px) {

        .section-download .news_carousel_slider .owl-next,
        .section-download .news_carousel_slider .owl-prev {
            display: block;
        }
    }

    .section-download .news_carousel_slider .owl-next:hover,
    .section-download .news_carousel_slider .owl-prev:hover {
    }

    .section-download .news_carousel_slider .owl-next .nav-button,
    .section-download .news_carousel_slider .owl-prev .nav-button {
        font-size: 30px;
    }

    .section-download .news_carousel_slider .owl-next {
        left: auto;
        right: 0;
        background: url(../img/index/arrow-l.webp) no-repeat center left /100% 100% scroll;
    }

    .section-download .news_carousel_slider .owl-prev {
        background: url(../img/index/arrow-r.webp) no-repeat center left /100% 100% scroll;
        left: 0%;
        right: auto;
    }

        .section-download .news_carousel_slider .owl-prev::after,
        .section-download .news_carousel_slider .owl-next::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #E9E9E9;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            font-size: 24px;
        }

        .section-download .news_carousel_slider .owl-prev::after,
        .section-download .news_carousel_slider .owl-next::after {
            content: "◂";
        }

    .section-download .news_carousel_slider .owl-next::after {
        content: "▸";
    }

    .section-download .news_carousel_slider .owl-prev:hover::after,
    .section-download .news_carousel_slider .owl-next:hover::after {
        color: #d00f31;
    }

    /* --End download--------------- */

    /* --Start support--------------- */
    .section-support {
        padding: 50px 0;
        background: #fff;
    }

        .section-support .title-item {
            position: relative;
            display: block;
            text-align: center;
        }



            .section-support .title-item h2 {
                font-size: 20px;
                font-family: 'Noto Sans TC';
                font-weight: 500;
                color: #2B3066;
                text-shadow: 0 0.1rem 1rem rgba(255, 255, 255, 0.205);
                letter-spacing: 2px;
                margin-bottom: 50px;
                position: relative;
            }
@media (min-width: 576px) {

    .section-support .title-item h2 {
        font-size: 24px;
    }
}
    @media (min-width: 1200px) {
        .section-support {
            padding: 100px 0;
        }

            .section-support .title-item h2 {
                font-size: 30px;
            }
    }


    .section-support .item {
        position: relative;
        display: block;
        transition: all 0.2s ease-in-out;
    }

        .section-support .item h3 {
            transition: all 0.2s ease-in-out;
            font-size: 18px;
            color: #666;
            font-weight: 300;
            margin: 10px 0;
            font-family: "Lato";
        }


        .section-support .item:hover h3 {
            color: #d00f31;
        }

        .section-support .item:hover .pic-item img {
            transform: scale(1.05);
        }

        .section-support .item .pic-item {
            position: relative;
            width: 100%;
            padding-bottom: 60%;
            overflow: hidden;
        }

    .section-support .pic-item::after {
        content: '';
        background: url(../img/news/page/video-overlay.svg) center center no-repeat;
        width: 100%;
        height: 100%;
        background-size: cover;
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .section-support .item .pic-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: all 0.2s ease-in-out;
        height: 100%;
        object-fit: cover;
    }

    .section-support .more-link {
        color: #fff;
        display: inline-block;
        background: url(../img/index/btn.webp) no-repeat center center/ 100% 100% scroll;
        border-radius: 5px;
        margin-top: 30px;
        padding: 10px 40px;
        transition: all 0.2s ease-in-out;
        text-transform: uppercase;
        font-size: 15px;
    }



        .section-support .more-link:hover {
            color: #E0002E;
            background: url(../img/index/btn-hover.webp) no-repeat center center/ 100% 100% scroll;
        }


    /* --End support--------------- */