@charset "utf-8";

:root {
    --main-color: #970022;
    --main-light-color: #FFC9D2;
    --second-color: #595757;
    --third-color: #0a4e8f;
}

/* 引入字型 */
/*font-family: 'Noto Sans TC', sans-serif;*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');*/

body {
    background: #f6f7f6;
    /* background: #eeeeee; */
    padding-bottom: 0px !important;
}

a:hover {
    color: var(--main-color);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    background: var(--second-color);
    border-color: var(--second-color);
    color: #fff;
}

.btn.btn-default {
    color: var(--main-color);
    background: #fff;
    border: 1px solid var(--main-color);
    padding: 0.375rem 0.75rem;
}

    .btn.btn-default:before {
        display: none;
    }

    .btn.btn-default:hover,
    .btn.btn-default:focus,
    .btn.btn-default:active {
        color: #fff;
        background: var(--main-color);
    }

.active > .btn.btn-default {
    color: #fff;
    background: var(--main-color);
}

.btn.btn-icon {
    border-radius: 50%;
    padding: 7px 5px 5px 6px;
    line-height: 1em;
    text-align: center;
}

.btn.btn-small {
    padding: 7px 9px;
}

img {
    max-width: 100%;
}
/* header_搜尋框 */
.navbar .nav_other_box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

    .navbar .nav_other_box .cart_link_btn {
        width: 300px;
        height: 30px;
        display: inline-block;
        font-size: unset;
        background: url("../images/all/cart_link.png") no-repeat center center;
        background-size: 100%;
    }

.navbar .search {
    margin-left: 10px;
    position: absolute;
    bottom: 10px;
}

.navbar .search-area {
    background: unset !important;
}

.navbar .btn-search {
    width: 30px;
    height: 30px;
    display: inline-block;
    opacity: 0.7;
    font-size: unset;
}

    .navbar .btn-search img {
        filter: invert(100%) grayscale(100%) brightness(500%);
        -webkit-filter: invert(100%) grayscale(100%) brightness(500%);
    }

.navbar .search_box {
    /* display: none; */
    /* border-radius: 50px;
    overflow: hidden;
    border: 1px #bbbbbb solid; */
    position: relative;
}

    .navbar .search_box input {
        font-size: 0.9rem;
        color: var(--second-color);
        height: 35px;
        padding: 10px 15px;
        padding-right: 40px;
        border-radius: 50px !important;
        border: 1px #bbbbbb solid;
        width: 355px;
    }

        .navbar .search_box input::placeholder { /* CSS 3 標準 */
            color: #6b6b6b;
        }

        .navbar .search_box input::-webkit-input-placeholder { /* Chrome, Safari */
            color: #6b6b6b;
        }

        .navbar .search_box input:-ms-input-placeholder { /* IE 10+ */
            color: #6b6b6b;
        }

        .navbar .search_box input::-moz-placeholder { /* Firefox 19+ */
            color: #6b6b6b;
            opacity: 1;
        }

    .navbar .search_box .btn_search {
        width: 40px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        transition: .3s;
        text-align: center;
        margin: 0px;
        font-size: 1rem;
        position: absolute;
        right: 0px;
        top: 0px;
        /*filter: invert(100%) grayscale(100%) brightness(500%);
        -webkit-filter: invert(100%) grayscale(100%) brightness(500%);*/
        opacity: 0.6;
        color: #000;
    }

        .navbar .search_box .btn_search:hover {
            opacity: 1;
        }

/* header */
.header .navbar,
.is_scroll .header .navbar {
    background: rgba(255,255,255,1);
}

.navbar .navbar-brand {
    background: url("../images/all/logo.svg") no-repeat left center;
    background-size: contain;
    width: 196px;
    height: 55px;
    text-indent: -99999px;
    margin: 0px 0px 15px;
    margin-right: 4%;
}

.navbar .nav_all_btn {
    width: calc(92% - 615px);
}

    .navbar .nav_all_btn > ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        letter-spacing: 1px;
    }

.header .navbar-nav .nav-link {
    font-family: 'Noto Sans TC', sans-serif;
}

.header .navbar-nav > .nav-item.dropdown .overflow_box .nav-item {
    display: flex;
    flex-wrap: wrap;
}

    .header .navbar-nav > .nav-item.dropdown .overflow_box .nav-item > .nav-link {
        flex: 1 1 calc(100% - 24px);
    }

        .header .navbar-nav > .nav-item.dropdown .overflow_box .nav-item > .nav-link.arrow {
            display: block;
            position: relative;
            flex: 0 0 auto;
            width: 22px;
            border: 0;
            padding: 5px;
        }

    .header .navbar-nav > .nav-item.dropdown .overflow_box .nav-item .navbar-nav .nav-item .navbar-nav {
        flex: 1 1 100%;
        width: 100%;
    }
/* 父按鈕 */
.nav-item.dropdown.fadeup {
    position: unset;
}

    .nav-item.dropdown.fadeup > .nav-link {
        position: relative;
        padding: 15px 3px;
        font-size: 18px;
    }

    .nav-item.dropdown.fadeup:hover > .nav-link {
    }

.navbar-nav .nav-item {
    color: var(--second-color);
}

    .navbar-nav .nav-item:hover {
        color: var(--main-color);
    }

.bsnav-mobile .navbar {
    display: block;
}

.bsnav .navbar-nav .nav-item.active > .nav-link,
.bsnav .navbar-nav .nav-item:active:focus > .nav-link,
.bsnav .navbar-nav .nav-item:active > .nav-link,
.bsnav .navbar-nav .nav-item:focus > .nav-link,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item:active:focus > .nav-link,
.navbar-nav .nav-item:active > .nav-link,
.navbar-nav .nav-item:focus > .nav-link,
.navbar-nav .nav-item:hover > .nav-link {
    color: var(--main-color);
}

/* banner */
html.no-js .banner .slick {
    display: none;
}

    html.no-js .banner .slick img {
        opacity: 0;
        transition: all ease .5s;
    }

html.js .banner .slick {
    display: block;
}

    html.js .banner .slick img {
        opacity: 1;
        transition: all ease .5s;
    }

.banner .slick-dots {
    bottom: 10px;
}

    .banner .slick-dots li {
        margin: 0 1px;
    }

.banner .slick .slick-dots button {
    width: 11px;
    height: 11px;
    padding: 0px;
    background: #FFFFFF;
    /* border: 1px #FFFFFF solid; */
    opacity: 1;
}

.banner .slick .slick-dots .slick-active button {
    opacity: 1;
    background: var(--main-color);
}

.banner .slick .slick-arrow {
    width: 28px;
    height: 49px;
    margin: 0px 15px;
}

.banner .slick .slick-prev {
    background: url("../images/all/prev_btn.svg") no-repeat center center;
    background-size: 100%;
    left: calc(50% - 620px);
    transition: .3s;
}

.banner .slick .slick-next {
    background: url("../images/all/next_btn.svg") no-repeat center center;
    background-size: 100%;
    right: calc(50% - 620px);
    transition: .3s;
}

.banner .item {
    height: 406px;
    background-position: center center;
    background-repeat: no-repeat;
}

.breadcrumb {
    border-bottom: 1px solid #ddd;
    background: transparent;
    color: #888;
}

    .breadcrumb .breadcrumb {
        border-bottom: 0;
    }

    .breadcrumb a {
        color: #888;
    }

        .breadcrumb a:hover,
        .breadcrumb a:focus,
        .breadcrumb a:active {
            color: var(--main-color);
        }

.breadcrumb-item + .breadcrumb-item::before {
    color: #888;
}

.search-section {
    background: url(../images/product/search_bg.jpg) no-repeat center;
    background-size: cover;
    padding: 55px 0 25px;
}

    .search-section.more-gap {
        padding: 80px 0 55px;
    }

    .search-section .h1 {
        color: #fff;
    }

        .search-section .h1 .title {
            color: var(--main-color);
            font-weight: 900;
            line-height: 1.4em;
            margin: 15px 0 20px;
        }

            .search-section .h1 .title .white {
                color: #fff;
            }

        .search-section .h1 .sub {
            display: block;
            font-size: 1.375rem;
            font-weight: 400;
        }

    .search-section .note {
        color: #fff;
        max-width: 26em;
    }

        .search-section .note a {
            display: inline-block;
            margin: 0 5px;
            color: #fff;
            text-decoration: underline;
            text-decoration-color: transparent;
            text-underline-offset: 2px;
            transition: all ease .3s;
        }

            .search-section .note a:hover,
            .search-section .note a:focus,
            .search-section .note a:active {
                margin: 0 5px;
                color: #fff;
                text-decoration-color: #fff;
            }


    .search-section .search_box {
        position: relative;
        max-width: 470px;
        margin: 35px 0;
    }

        .search-section .search_box input {
            font-size: 1.15rem;
            color: var(--second-color);
            height: 63px;
            padding: 10px 15px;
            padding-right: 55px;
            border-radius: 0;
            border: 1px #bbbbbb solid;
            width: 100%;
        }

            .search-section .search_box input::placeholder {
                /* CSS 3 標準 */
                color: #6b6b6b;
            }

            .search-section .search_box input::-webkit-input-placeholder {
                /* Chrome, Safari */
                color: #6b6b6b;
            }

            .search-section .search_box input:-ms-input-placeholder {
                /* IE 10+ */
                color: #6b6b6b;
            }

            .search-section .search_box input::-moz-placeholder {
                /* Firefox 19+ */
                color: #6b6b6b;
                opacity: 1;
            }

        .search-section .search_box .btn_search {
            width: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            transition: .3s;
            text-align: center;
            margin: 0px;
            font-size: unset;
            position: absolute;
            transform: translateY(-50%);
            right: 20px;
            top: 50%;
            opacity: 1;
        }

            .search-section .search_box .btn_search:hover {
                opacity: .7;
            }

body:not(.home) .main .content > .bg {
    padding-top: 30px;
}

/*表單*/
.input-group .btn {
    line-height: 1.6em;
}

/* 共用 */
.content .kind-info {
    text-align: center;
    margin-bottom: 30px;
}

    .content .kind-info > .h2 {
        text-align: center;
        padding-bottom: 0;
        border-bottom: 0;
        font-family: 'Noto Sans TC', sans-serif;
        color: var(--main-color);
        font-weight: 700;
        font-size: 30px;
        letter-spacing: 2px;
        margin-bottom: 30px;
    }

    .content .kind-info > .my_title {
        margin-bottom: 15px;
    }

    .content .kind-info .kind {
        display: inline-block;
    }

        .content .kind-info .kind a {
            display: inline-block;
            line-height: 1em;
            font-size: 1rem;
            border: 1px solid var(--main-color);
            color: var(--main-color);
            padding: 8px 10px 6px;
            background: #fff;
        }

            .content .kind-info .kind a:hover {
                background-color: var(--main-color);
                color: #fff;
            }

    .content .kind-info .date {
        display: inline-block;
        color: #aaa;
        font-size: 1.125rem;
        margin-right: 10px;
    }

.main .side .wid {
    margin-top: 30px;
}

    .main .side .wid .h3 {
        color: var(--main-color);
        text-align: start;
        margin-bottom: 15px;
    }

        .main .side .wid .h3 .txt-tw {
            font-size: 1.25rem;
            border: 0;
            padding: 0;
        }

        .main .side .wid .h3 .txt-en {
            display: block;
            font-size: .5em;
            font-weight: 400;
            opacity: .5;
            color: var(--main-color);
        }


    .main .side .wid.wid-news .h3 {
        display: none;
    }

.main .side {
    /*margin-bottom: 25px;*/
}

    .main .side .nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

        .main .side .nav .filter-item {
            /* margin-left: 5px;
            margin-right: 5px;*/
            margin-bottom: 8px;
            flex: 1 1 auto;
            width: 100%;
        }

            .main .side .nav .filter-item + .filter-item {
                margin-top: 0;
            }

    .main .side .filter-title {
        background: transparent;
        /*border: 1px solid #ddd;*/
        padding: 0;
        color: #000;
        font-size: .9rem;
        line-height: 1em;
        transition: all ease .3s;
        position: relative;
        display: flex;
    }

        .main .side .filter-title:hover,
        .main .side .filter-title:focus,
        .main .side .filter-title:active,
        .main .side .filter-title.active {
            color: var(--second-color);
            background-color: rgb(240, 240, 240);
        }

            .main .side .filter-title:hover a,
            .main .side .filter-title:focus a,
            .main .side .filter-title:active a {
                color: var(--second-color);
            }

        .main .side .filter-title a {
            color: #000;
            display: block;
            padding: .75em .5em .65em;
            flex: 1 1 auto;
        }

            .main .side .filter-title a.collapsed-btn {
                flex: 0 0 auto;
                background: transparent;
                border: 0;
                padding: 15px;
                margin: 4px 0;
                z-index: 2;
                width: 1em;
                height: 1em;
                position: relative;
            }

                .main .side .filter-title a.collapsed-btn:before,
                .main .side .filter-title a.collapsed-btn:after {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    background: #999;
                    vertical-align: 0;
                    border: 0;
                    transform: translate(-50%,-50%);
                    transition: all ease .5s;
                    border-radius: 4px;
                }

                .main .side .filter-title a.collapsed-btn:before {
                    width: 15px;
                    height: 2px;
                }

                .main .side .filter-title a.collapsed-btn:after {
                    width: 2px;
                    height: 2px;
                    opacity: 0;
                }

                .main .side .filter-title a.collapsed-btn.collapsed {
                    /*transform: translateY(-50%) scaleY(-1);*/
                }

                    .main .side .filter-title a.collapsed-btn.collapsed:after {
                        /*transform: translateY(-50%) scaleY(-1);*/
                        height: 15px;
                        opacity: 1;
                    }

    .main .side .filter-content {
        border: 0;
    }

        .main .side .filter-content > ul {
            padding: 0 0 5px;
        }

        .main .side .filter-content ul li .filter-subtitle {
            position: relative;
            display: flex;
            padding-right: 10px;
            transition: all ease .3s;
        }

            .main .side .filter-content ul li .filter-subtitle ~ .ssub ul {
                padding: 0;
            }

            .main .side .filter-content ul li .filter-subtitle:hover,
            .main .side .filter-content ul li .filter-subtitle:focus,
            .main .side .filter-content ul li .filter-subtitle:active,
            .main .side .filter-content ul li .filter-subtitle.active {
                color: var(--second-color);
                background-color: rgb(240, 240, 240);
            }


        .main .side .filter-content ul li a {
            display: block;
            font-size: .9rem;
            padding: 5px 5px 5px 15px;
            flex: 1 1 auto;
            transition: all ease .3s;
        }

            .main .side .filter-content ul li a:hover,
            .main .side .filter-content ul li a:focus,
            .main .side .filter-content ul li a:active {
                color: var(--second-color);
                background-color: rgb(240, 240, 240);
            }

            .main .side .filter-content ul li a.collapsed-sub-btn {
                flex: 0 0 auto;
                display: block;
                font-size: 14px;
                line-height: 1em;
                padding: 5px;
                background: transparent;
                border: 0;
                padding: 10px;
                margin: 5px 0;
                z-index: 2;
                width: 1em;
                height: 1em;
                position: relative;
            }

                .main .side .filter-content ul li a.collapsed-sub-btn:before,
                .main .side .filter-content ul li a.collapsed-sub-btn:after {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    background: #999;
                    vertical-align: 0;
                    border: 0;
                    transform: translate(-50%,-50%);
                    transition: all ease .5s;
                    border-radius: 4px;
                }

                .main .side .filter-content ul li a.collapsed-sub-btn:before {
                    width: 10px;
                    height: 1px;
                }

                .main .side .filter-content ul li a.collapsed-sub-btn:after {
                    width: 1px;
                    height: 1px;
                    opacity: 0;
                }


                .main .side .filter-content ul li a.collapsed-sub-btn.collapsed {
                }


                    .main .side .filter-content ul li a.collapsed-sub-btn.collapsed:after {
                        height: 10px;
                        opacity: 1;
                    }

        .main .side .filter-content ul li ul li a {
            padding-left: 20px;
        }


    .main .side .nav.onesub .filter-item {
        flex: 0 0 auto;
        width: auto;
        margin-left: 5px;
        margin-right: 5px;
    }

    .main .side .nav.onesub .filter-title a {
        padding: .85em .85em .75em;
    }

/*
.side.filter-side {
    opacity: 1;
    transition: all .3s ease;
    width: 100%;
    display: block;
}

.side .content-filter-area .main-box {
    flex: 0 0 calc(100% - 250px);
    width: calc(100% - 250px);
}

.side .filter-title .collapsed-btn,
.side .filter-sidebar.multiple-collapse .collapsed-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #eaeaea;
    border: solid 1px #eaeaea;
}

.side .filter-item + .filter-item {
    margin-top: 10px;
}

.side .filter-content,
.side .filter-sidebar.multiple-collapse .collapse-content {
    border: solid 1px #eaeaea;
    border-top: none;
}

.side .filter-sidebar.multiple-collapse .main-nav-item {
    margin-bottom: 10px;
}

.side .filter-content.ssub {
    border: none;
}

.side .filter-content > ul {
    padding: 10px;
}

.side .filter-content ul li {
    font-size: 0.875rem;
}

.side .filter-sidebar.multiple-collapse .collapse-content .nav-link {
    padding: 5px 10px;
    font-size: .875rem;
}

.side .filter-sidebar.multiple-collapse .collapse-content .navbar-nav {
    padding-left: 30px;
    background: #f1f1f1;
}*/
.bg {
    padding: 40px 0px 30px;
}

.ratio-2x1 {
    --bs-aspect-ratio: 50%;
}

.ratio-3x4 {
    --bs-aspect-ratio: 135.65%;
}

.object-fit-contain,
.object-fit-cover {
    width: 100%;
    height: 100%;
    object-position: center;
}

.object-fit-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
}

.object-fit-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

.my_title {
    font-family: 'Noto Sans TC', sans-serif;
    text-align: center;
    color: var(--main-color);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

    .my_title.black {
        color: #3C3C3C;
    }

/* home_service */
.service_flex_box {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;
}

    .service_flex_box .service_box {
        width: calc(50% - 10px);
        background: #FFFFFF;
        transform: scale(1);
        transition: .3s;
    }

        .service_flex_box .service_box:hover {
            box-shadow: 0px 0px 12px -2px rgba(20%,20%,20%,0.3);
            transform: scale(1.02);
        }

        .service_flex_box .service_box:first-child {
            margin-right: 20px;
        }

        .service_flex_box .service_box .service_pic {
        }

            .service_flex_box .service_box .service_pic a {
                overflow: hidden;
                display: block;
            }

        .service_flex_box .service_box .service_info {
            text-align: center;
            font-family: 'Noto Sans TC', sans-serif;
        }

            .service_flex_box .service_box .service_info a {
                padding: 20px 35px;
                display: block;
            }

            .service_flex_box .service_box .service_info .service_title {
                text-align: center;
                font-weight: 600;
                font-size: 30px;
                letter-spacing: 2px;
                display: inline-block;
                color: #666666;
                transition: .3s;
                margin-bottom: 15px;
            }

        .service_flex_box .service_box:hover .service_info .service_title {
            /* color: var(--main-color); */
        }

        .service_flex_box .service_box.blue:hover .service_info .service_title {
            /* color: var(--third-color); */
        }

        .service_flex_box .service_box .service_info .service_title .s_line {
            width: 100%;
            height: 3px;
            display: block;
            background: var(--main-color);
        }

        .service_flex_box .service_box.blue .service_info .service_title .s_line {
            background: var(--third-color);
        }

        .service_flex_box .service_box .service_info .service_text {
            width: 100%;
            text-align: left;
            letter-spacing: 1px;
            line-height: 25px;
            font-size: 17px;
            font-weight: 400;
            margin-bottom: 15px;
            transition: .3s;
            color: #666666;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
            /* padding-right: 30px; */
            position: relative;
        }

        .service_flex_box .service_box:hover .service_info .service_text {
            /* color: #9f9fa0; */
        }

        .service_flex_box .service_box .service_info .service_arrow {
            text-align: right;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

            .service_flex_box .service_box .service_info .service_arrow img {
                background: #585756;
                border-radius: 50%;
                padding: 3px;
                width: 20px;
                transition: .3s;
            }

        .service_flex_box .service_box:hover .service_info .service_arrow img {
            background: #bbbbbb;
        }

/* home_pro_news */
.bg.pro_news_bg {
    padding-top: 0;
}

.pro_news ~ .my_title {
    margin-top: 30px;
}

.pro_news_box {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    /*flex-wrap: wrap;*/
    padding: 40px;
    background: #FFFFFF;
    margin-bottom: 30px;
    transition: .3s;
    transform: scale(1);
}

    .pro_news_box:hover {
        box-shadow: 0px 0px 12px -2px rgba(20%,20%,20%,0.3);
        transform: scale(1.02);
    }

    .pro_news_box:last-child {
        margin-bottom: 0px;
    }

    .pro_news_box .pro_news_pic {
        width: calc(52% - 40px);
        margin-right: 40px;
    }

    .pro_news_box.pic_right .pro_news_pic {
        margin-right: 0px;
        margin-left: 40px;
        order: 1;
    }

    .pro_news_box .pro_news_pic a {
        overflow: hidden;
        display: block;
        line-height: 0px;
        height: 100%;
    }

    .pro_news_box .pro_news_pic iframe {
        width: 100%;
        /* height: 20.5vw; */
        height: 19rem;
        max-width: 560px;
        max-height: 315px;
    }

    .pro_news_box .pro_news_info {
        width: 48%;
        position: relative;
    }

        .pro_news_box .pro_news_info a {
            display: block;
        }

        .pro_news_box .pro_news_info .pro_news_title {
            font-size: 26px;
            font-family: 'Noto Sans TC', sans-serif;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 15px;
            color: #666666;
            transition: .3s;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
        }

    .pro_news_box:hover .pro_news_info .pro_news_title {
        /* color: var(--main-color); */
    }

    .pro_news_box .pro_news_info .pro_news_text {
        color: #666666;
        font-size: 17px;
        line-height: 25px;
        font-weight: 400;
        letter-spacing: 1px;
        transition: .3s;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
    }

    .pro_news_box:hover .pro_news_info .pro_news_text {
        /* color: #9f9fa0; */
    }

.pro_news.reverse .pro_news_box:nth-child(even) .pro_news_pic {
    order: inherit;
    margin-right: 40px;
    margin-left: 0;
}

.pro_news.reverse .pro_news_box:nth-child(odd) .pro_news_pic {
    order: 1;
    margin-right: 0px;
    margin-left: 40px;
}

.pro-list {
    padding: 40px;
    background: #fff;
    margin-bottom: 60px;
}

    .pro-list .pro-list-item {
        transform: scale(1);
        transition: all ease .3s;
    }

        .pro-list .pro-list-item:hover,
        .pro-list .pro-list-item:focus,
        .pro-list .pro-list-item:active {
            box-shadow: 0px 0px 12px -2px rgb(51 51 51 / 30%);
            transform: scale(1.02);
        }

        .pro-list .pro-list-item .pic {
            border: 1px solid #eee;
        }

        .pro-list .pro-list-item .catalog {
            background: var(--second-color);
            color: #fff;
            text-align: center;
            font-size: 1rem;
            line-height: 1.2em;
            padding: 8px 10px;
        }

        .pro-list .pro-list-item .tag-list {
            position: absolute;
            left: -8px;
            top: 10px;
            right: 0;
        }

            .pro-list .pro-list-item .tag-list li {
                font-size: 14px;
                padding: 6px 8px 5px;
            }

        .pro-list .pro-list-item .info {
            padding: 10px 5px;
        }

            .pro-list .pro-list-item .info .writer {
                color: var(--bs-gray-dark);
                font-size: 1rem;
                font-weight: 700;
                margin-bottom: 5px;
            }

            .pro-list .pro-list-item .info .title {
                color: #3e3e3e;
                font-size: 1.125rem;
                line-height: 1.2em;
                height: 2.4em;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

    .pro-list.slick {
        padding: 40px 45px 20px;
        margin-bottom: 30px;
    }

        .pro-list.slick .pro-list-item {
            /*padding: 0 15px;*/
            margin: 10px 20px;
        }

        .pro-list.slick .slick-arrow {
            background: url(../../images/all/slick_arrow.svg) no-repeat center;
            background-size: contain;
        }

        .pro-list.slick .slick-prev {
            transform: translate(0, -50%) rotate(180deg);
            left: 15px;
        }

        .pro-list.slick .slick-next {
            right: 15px;
        }

.tag-list li {
    background: var(--main-color);
    color: #fff;
    font-size: 1rem;
    line-height: 1.2em;
    padding: 6px 8px 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}

.gallery-list .item {
    margin-bottom: 0;
}

    .gallery-list .item a {
        display: block;
    }

        .gallery-list .item a:hover {
            box-shadow: 0px 0px 12px -2px rgb(51 51 51 / 30%);
            transform: scale(1.02);
        }

    .gallery-list .item .item-detail {
        width: 100%;
        position: relative;
    }

    .gallery-list .item .info {
        padding: 10px 20px;
    }

    .gallery-list .item .title {
        margin-left: 0;
        margin-top: 5px;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #000;
        transition: .3s;
        white-space: normal;
        text-align: left;
    }

    .gallery-list .item .pic img {
        display: block;
        margin: 0 auto;
    }

    .gallery-list .item .info-box {
        margin-bottom: 10px;
    }

        .gallery-list .item .info-box .item {
            color: #000;
            padding-left: 5px;
            padding-right: 5px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
            margin-bottom: 5px;
        }

        .gallery-list .item .info-box .label {
            width: 5em;
            margin-right: 20px;
            flex: 0 0 5em;
            display: flex;
            justify-content: space-between;
            position: relative;
            font-weight: 700;
            /*color: var(--main-color);*/
            color: #666;
        }

            .gallery-list .item .info-box .label:after {
                content: ':';
                position: absolute;
                display: block;
                left: calc(100% + 5px);
                top: 0;
            }

            .gallery-list .item .info-box .label .word {
                flex: 1 1 100%;
                display: flex;
                justify-content: space-between;
            }

            .gallery-list .item .info-box .label .whitespace {
                width: 1em;
            }

/*.gallery-list.border .item .item-info {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}*/

.gallery-list[data-mode=mode1] .item .tag-list {
    position: absolute;
    left: -8px;
    top: 10px;
    right: 0;
    z-index: 1
}

.gallery-list[data-mode=mode1] .item .info {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;
    align-items: flex-start;
}

    .gallery-list[data-mode=mode1] .item .info .title {
        /*order: 2;*/
        margin-top: 5px;
        margin-bottom: 0;
        font-weight: 400;
        font-size: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        height: 4.5em;
        width: 100%;
    }

.gallery-list[data-mode=mode1] .item .info-box {
    /*order: 1;*/
    margin: 0;
    width: 100%
}

    .gallery-list[data-mode=mode1] .item .info-box .item {
        padding-left: 0;
        padding-right: 0;
        border-bottom: 0;
    }

        .gallery-list[data-mode=mode1] .item .info-box .item:not(.writer) {
            display: none !important;
        }

        .gallery-list[data-mode=mode1] .item .info-box .item.writer {
            color: var(--bs-gray-dark);
            font-size: 1rem;
            height: 1.4em;
            display: -webkit-box !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
            padding: 0;
            margin: 0;
            font-weight: 700;
        }

            .gallery-list[data-mode=mode1] .item .info-box .item.writer .label {
                /*display: none;*/
                float: left;
                width: auto;
                margin-right: 1em;
            }

/*.gallery-list.series[data-mode=mode1] .item .info-box .item:not(.series-name) {
    display: none !important;
}*/

.gallery-list.series[data-mode=mode1] .item .info-box .item.series-name {
    display: flex !important;
    color: var(--bs-gray-dark);
    font-size: 1rem;
    height: 2.8em;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-weight: 700;
}

    .gallery-list.series[data-mode=mode1] .item .info-box .item.series-name .label {
        display: none;
    }

.gallery-list[data-mode=mode2] .item .info {
    padding: 15px 0 15px 30px;
}

.gallery-list[data-mode=mode2] .item .title {
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /*height: 3em;*/
}

.gallery-list[data-mode=mode2] .item .item-info {
    display: flex;
    justify-content: flex-start;
    padding: 15px 20px;
}

    .gallery-list[data-mode=mode2] .item .item-info .pic {
        flex: 0 0 200px;
        max-width: unset;
    }

    .gallery-list[data-mode=mode2] .item .item-info .info {
        flex: 1 1 auto;
    }

.gallery-list.related[data-mode=mode2] .item .item-info .pic {
    flex: 0 0 160px;
}

.gallery-list.series .item .info-box .label {
    width: 6em;
    flex: 0 0 6em;
}

.gallery-list[data-mode=mode1].two_col .item .item-detail {
    padding: 5px;
}

.gallery-list[data-mode=mode1].two_col .item .item-info {
    display: flex;
}

.gallery-list[data-mode=mode1].two_col .item .pic {
    flex: 0 0 125px;
}

.gallery-list[data-mode=mode1].two_col .item .info {
    flex: 1 1 auto;
    margin-left: 10px;
    display: block;
}

    .gallery-list[data-mode=mode1].two_col .item .info .title {
        height: 1.5em;
        -webkit-line-clamp: 1;
        font-weight: 700;
        order: 1;
        margin-top: 0;
    }

.gallery-list[data-mode=mode1].two_col .item .info-box {
    order: 2;
    display: flex;
    flex-wrap: wrap;
}

    .gallery-list[data-mode=mode1].two_col .item .info-box .label {
        flex: 0 0 100%;
        width: 100%;
    }

    .gallery-list[data-mode=mode1].two_col .item .info-box .item:not(.writer) {
        display: block !important;
        font-size: 0.8rem;
        flex: 0 0 50%;
        padding-bottom: 0;
    }

    .gallery-list[data-mode=mode1].two_col .item .info-box .item.writer {
        height: 1.4em;
        font-weight: 400;
        margin-bottom: 10px;
    }

.search .gallery-list .item .info-box .label {
    width: 6em;
    flex: 0 0 6em;
}

.more_btn {
    position: absolute;
    font-weight: 500;
    color: #000000;
    bottom: 0px;
    left: 0px;
    transition: .3s;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-size: 18px;
}

.service_box .more_btn {
    position: unset;
    font-weight: 500;
    font-family: "微軟正黑體";
    margin-bottom: 10px;
}

.more_btn:hover,
.pro_news_box:hover .pro_news_info .more_btn {
    /* color: var(--main-color); */
}

.more_btn .more_icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("../images/all/more_btn_icon_hover.svg") no-repeat center center;
    background-size: 100%;
    transition: .3s;
    /* filter: invert(100%) grayscale(100%) brightness(-500%);
    -webkit-filter: invert(100%) grayscale(100%) brightness(-500%); */
}

.more_btn:hover .more_icon,
.pro_news_box:hover .pro_news_info .more_btn .more_icon {
    filter: unset;
    -webkit-filter: unset;
}

.quick-link {
}

    .quick-link .item {
        display: block;
        position: relative;
        background: #000;
        overflow: hidden;
        transition: all ease .3s;
        margin-bottom: 25px;
    }

        .quick-link .item:before,
        .quick-link .item:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50%;
            z-index: 1;
            transition: all ease .3s;
        }

        .quick-link .item:before {
            background: linear-gradient( to top, rgba(0,0,0,.8), transparent);
            opacity: 1;
        }

        .quick-link .item:after {
            background: linear-gradient( to top,rgba(154, 6, 40,.8), transparent);
            opacity: 0;
        }


        .quick-link .item .pic {
            opacity: .8;
            transition: all ease .3s;
        }

        .quick-link .item:hover,
        .quick-link .item:focus,
        .quick-link .item:active {
            transform: scale(1.02);
            box-shadow: 0px 0px 12px -2px rgb(51 51 51 / 30%);
        }

            .quick-link .item:hover:before,
            .quick-link .item:focus:before,
            .quick-link .item:active:before {
                opacity: 0;
            }

        .quick-link .item:after {
            background: linear-gradient( to top,rgba(154, 6, 40,.8), transparent);
            opacity: 0;
        }

        .quick-link .item:hover:after,
        .quick-link .item:focus:after,
        .quick-link .item:active:after {
            opacity: 1;
        }

        .quick-link .item:hover .pic,
        .quick-link .item:focus .pic,
        .quick-link .item:active .pic {
            opacity: 1;
        }

        .quick-link .item .title {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            padding: 15px 10px;
            text-align: center;
            color: #fff;
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            transition: all ease .3s;
            z-index: 2;
        }

        .quick-link .item:hover .title,
        .quick-link .item:focus .title,
        .quick-link .item:active .title {
        }

    .quick-link.only-pic {
    }

        .quick-link.only-pic .item:before,
        .quick-link.only-pic .item:after {
            display: none;
        }

        .quick-link.only-pic .item .pic {
            opacity: 1;
        }

.ezshare-box {
    margin: 0 auto;
}

    .ezshare-box ul {
        line-height: 1em;
    }

    .ezshare-box .ticon {
        font-size: 17px;
        line-height: 1em;
        display: inline-block;
        margin-top: 8px;
    }

    .ezshare-box a {
        border-radius: 50%;
        width: 32px;
        height: 32px;
    }

    .ezshare-box ul li.line a,
    .ezshare-box ul li.facebook a,
    .ezshare-box ul li.twitter a,
    .ezshare-box ul li.line a,
    .ezshare-box ul li.mail a,
    .ezshare-box ul li.linkedin a,
    .ezshare-box ul li.weibo a {
        background: var(--main-color);
        color: #fff;
    }

        .ezshare-box ul li.line a:before,
        .ezshare-box ul li.facebook a:before,
        .ezshare-box ul li.twitter a:before,
        .ezshare-box ul li.line a:before,
        .ezshare-box ul li.mail a:before,
        .ezshare-box ul li.linkedin a:before,
        .ezshare-box ul li.weibo a:before {
            background-color: var(--second-color);
        }

.slick .item > a {
    background: transparent;
    height: 100%;
}

.slick.st .slick-prev,
.slick.st .slick-next {
    background-size: contain !important;
    filter: brightness(0);
}

.slick.st .slick-prev {
    background: url("../images/all/prev_btn.svg") no-repeat center center;
}

.slick.st .slick-next {
    background: url("../images/all/next_btn.svg") no-repeat center center;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    background-color: var(--main-color);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--main-color);
}

.title-box .h3 {
    color: #000;
    font-weight: 900;
}

    .title-box .h3 .pro-name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.product-info-area .info-box {
    border: 0;
    padding: 0;
}

.product-info-area .item {
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

    .product-info-area .item:last-child {
        margin-bottom: 0;
    }

    .product-info-area .item .label {
        width: 6em;
        margin-right: 25px;
        flex: 0 0 6em;
        display: flex;
        justify-content: space-between;
        position: relative;
        font-weight: 700;
        /*color: var(--main-color);*/
        color: #666;
    }

        .product-info-area .item .label:before {
            display: none;
        }

        .product-info-area .item .label:after {
            content: ':';
            position: absolute;
            display: block;
            left: calc(100% + 5px);
            top: -.1em;
        }

        .product-info-area .item .label .word {
            flex: 1 1 100%;
            display: flex;
            justify-content: space-between;
        }

        .product-info-area .item .label .whitespace {
            width: 1em;
        }


.article-horizontal-grid .item {
    display: block;
    background: #fff;
    transition: all ease .3s;
    height: 100%;
}

    .article-horizontal-grid .item:hover,
    .article-horizontal-grid .item:focus,
    .article-horizontal-grid .item:active {
        box-shadow: 0px 0px 12px -2px rgb(51 51 51 / 30%);
        transform: scale(1.02);
    }

    .article-horizontal-grid .item a:hover .pic img {
        transform: scale(1);
    }

    .article-horizontal-grid .item .info {
        padding: 20px 25px;
        display: block;
        letter-spacing: 1px;
    }

        .article-horizontal-grid .item .info .title,
        .article-horizontal-grid .item .info .title a {
            color: #3e3e3e;
            font-size: 1.125rem;
            font-family: 'Noto Sans TC', sans-serif;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 5px;
            transition: .3s;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
            height: 3em;
        }

        .article-horizontal-grid .item .info .date {
            font-size: .8em;
            color: var(--main-color);
            line-height: 18px;
        }

        .article-horizontal-grid .item .info .kind a {
            border: 0;
            font-size: .8em;
            padding: 0;
            display: inline-block;
            color: #595757;
            white-space: nowrap;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-decoration-color: transparent;
            text-underline-offset: 4px;
        }

            .article-horizontal-grid .item .info .kind a:hover {
                color: var(--main-color);
                text-decoration-color: var(--main-color);
            }

        .article-horizontal-grid .item .info .desc {
            color: #666666;
            font-size: 1rem;
            line-height: 1.47em;
            height: 4.41em;
            font-weight: 400;
            letter-spacing: 1px;
            transition: .3s;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            white-space: normal;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .article-horizontal-grid .item .info .keyword li a {
            font-size: .8em;
        }

.keyword li:not(:last-child) {
    margin-right: 10px;
}

.keyword li a {
    display: inline-block;
    font-size: 1em;
    color: #595757;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
}

    .keyword li a:hover {
        color: var(--main-color);
        text-decoration-color: var(--main-color);
    }

    .keyword li a:before {
        content: '#';
        margin-right: 2px;
    }

.card {
}

.download-list li + li {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dotted #ddd;
}

.tab-area {
    border-top: 0;
}

    .tab-area .tab-title {
        margin-left: -5px;
        margin-right: -5px;
    }

        .tab-area .tab-title li {
            margin: 0 5px;
        }

        .tab-area .tab-title a {
            border: 1px solid #ddd;
            /*border: 0;*/
            font-size: 1.125rem;
            padding: 6px 17px 4px;
            background-color: #fff;
            color: #333;
            border-radius: 4px;
        }

            .tab-area .tab-title a:hover,
            .tab-area .tab-title a:focus,
            .tab-area .tab-title a:active,
            .tab-area .tab-title a.active {
                color: #fff;
                background: var(--main-color);
            }

        .tab-area .tab-title li:first-child a {
            border: 1px solid #ddd;
            /*border: 0;*/
        }

    .tab-area .tab-pane {
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

        .tab-area .tab-pane.no-bg {
            background: transparent;
            border: 0;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

.filter-box {
    display: flex;
    margin-bottom: 15px;
}

    .filter-box .filter-info {
        flex: 0 0 auto;
        width: auto;
        /*margin-right: 10px;*/
        font-size: .875rem;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .filter-box .filter-list {
        margin-bottom: 0;
    }

        .filter-box .filter-list a {
            border: 1px solid var(--main-color);
            padding: 5px;
            font-size: .9375rem;
            border-radius: 4px;
            color: var(--main-color);
        }

            .filter-box .filter-list a .icon {
                margin-left: 5px;
            }

            .filter-box .filter-list a:hover {
                background: var(--main-color);
                color: var(--bs-white);
            }

.editor > *:last-child {
    margin-bottom: 0;
}

.card-header {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1em;
    color: #000;
    padding: 0.75rem 1rem;
}

.page-link {
    min-width: 32px;
    text-align: center;
    padding: 0.25rem 0.5rem;
}

    .page-link:hover {
        background-color: var(--main-color);
        color: #fff;
    }

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border: 1px solid transparent;
}

/* footer */
footer {
}

.footer .footer_content {
    border-top: 1px #d3d3d3 solid;
    background: #FFFFFF;
    padding: 60px 0px 40px;
}

.footer_sitemap_flex {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;
    max-width: 850px;
    margin: auto;
    /*gap: 8px;*/
}

    .footer_sitemap_flex .footer_sitemap {
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 400;
        display: inline-block;
        /*margin: 0px 16px;*/
        padding: 0px 10px;
        flex: 0 0 16.66%;
        width: 16.6666666%;
    }

        .footer_sitemap_flex .footer_sitemap a {
            display: block;
            color: #666666;
            letter-spacing: 1px;
            font-size: 15px;
            line-height: 22px;
            transition: .3s;
        }

            .footer_sitemap_flex .footer_sitemap a.sitemap_title {
                color: #595757;
                font-weight: 700;
                font-size: 17px;
                margin-bottom: 3px;
            }

                .footer_sitemap_flex .footer_sitemap a:hover,
                .footer_sitemap_flex .footer_sitemap a.sitemap_title:hover {
                    color: var(--main-color);
                }

        .footer_sitemap_flex .footer_sitemap ul {
            margin-left: 6px;
        }

            .footer_sitemap_flex .footer_sitemap ul li {
                position: relative;
            }

                .footer_sitemap_flex .footer_sitemap ul li:before {
                    content: '';
                    display: block;
                    width: 4px;
                    height: 1px;
                    background-color: #595757;
                    position: absolute;
                    right: calc(100% + 2px);
                    top: .6em;
                }

                .footer_sitemap_flex .footer_sitemap ul li a {
                    font-size: 13px;
                }

.footer_flex_box {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 850px;
    margin: 55px auto 30px;
    /* border-top: 1px#d3d3d3 solid;
    padding-top: 50px; */
}

.footer_logo {
    width: 225px;
    height: 45px;
    display: inline-block;
    background: url("../images/all/logo.svg") no-repeat center center;
    background-size: contain;
    margin-bottom: 10px;
}

.footer_text {
    padding-left: 55px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    width: calc(100% - 280px);
}

    .footer_text .footer_title {
        font-size: 17px;
        letter-spacing: 2px;
        color: #595757;
        margin-bottom: 3px;
    }

    .footer_text .footer_s_text {
        color: #666666;
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 20px;
        display: inline-block;
        margin-right: 15px;
    }

        .footer_text .footer_s_text a {
            color: #666666;
            transition: .3s;
        }

            .footer_text .footer_s_text a:hover {
                color: var(--main-color);
            }

.copyright_box {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    letter-spacing: 1px;
    margin-right: 16px;
    text-align: center;
}

    .copyright_box span {
        display: inline-block;
    }

    .copyright_box .copyright {
    }

    .copyright_box .powered {
        font-size: 12px;
        color: #cfcfcf;
    }

    .copyright_box a {
        color: #cfcfcf;
    }

/*產品product*/
.product-pic .slider-nav {
    padding: 20px 25px;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/*搜尋search*/
body.search .content .kind-info {
    margin-bottom: 10px;
}

/* float */
.wid-float-section,
body.scroll-down .wid-float-section.mobile-animate {
    position: fixed;
    left: auto;
    right: 15px;
    bottom: 15px;
}

.wid-float-section {
    /*display: none;*/
}

    .wid-float-section ul {
        background: transparent;
    }

        .wid-float-section ul li {
            padding: 0;
        }

            .wid-float-section ul li + li {
                margin-top: 10px;
            }

            .wid-float-section ul li a {
                width: 6em;
                height: 6em;
                line-height: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                box-shadow: 0 0 10px rgba(0,0,0,.25);
            }

            .wid-float-section ul li.line a {
                background-color: #00B900;
                color: #fff;
            }

                .wid-float-section ul li.line a .bi {
                    margin: 0;
                }

                .wid-float-section ul li.line a:hover {
                    background-color: #17dd17;
                    color: #fff;
                }

                    .wid-float-section ul li.line a:hover .icon {
                        color: #fff;
                    }