@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica", "Arial", "PingFang TC", "黑體-繁", "微軟正黑體", sans-serif;
    color: #4A4A4A;
    background-color: #F5FCFD;
    letter-spacing: 0.1em;
    font-size: 18px;
}

a {
    text-decoration: none;
    color: #001526;
    display: block;
}

    a:hover {
        text-decoration: none;
    }

    a:visited {
        color: #001526;
    }

.article-context a,
.topic-introduce a {
    display: inline !important;
}

input, textarea {
    padding: 10px 10px 9px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
}

ul, ol, dl, p {
    margin-bottom: 0;
}

    ul li, ol li, dl li, p li {
        list-style: none;
    }

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: whitesmoke;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: gainsboro;
    }

.loader {
    position: relative;
    height: 100px;
}

    .loader::after {
        content: "";
        display: block;
        width: 30px;
        height: 30px;
        border: 5px solid #001526;
        border-radius: 100%;
        border-bottom-color: #F5FCFD;
        -webkit-animation: spin 1s infinite;
        animation: spin 1s infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
        transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
        transform: rotate(0deg) translate(-50%, -50%);
    }

    100% {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
        transform: rotate(360deg) translate(-50%, -50%);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
        transform: rotate(0deg) translate(-50%, -50%);
    }

    100% {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
        transform: rotate(360deg) translate(-50%, -50%);
    }
}

.btn {
    padding: 6px 12px;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #4A4A4A;
}

    .btn:hover {
        opacity: 0.8;
    }

    .btn > div {
        color: #ffffff;
    }

.flex-column-align-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.btn-primary {
    background-color: #001526;
    border: 1px solid #001526;
    color: #ffffff;
}

    .btn-primary:hover {
        background-color: #014099;
        border: 1px solid #014099;
        color: #ffffff;
    }

.smallGrayText {
    color: #808080;
    font-size: 15px;
    padding: 8px;
}

.pagination .page-item {
    cursor: pointer;
}

    .pagination .page-item .page-link {
        background-color: transparent;
        color: #014099;
    }

    .pagination .page-item.active .page-link {
        background-color: #014099;
        color: #ffffff;
    }

.list-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

    .list-pagination > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .list-pagination .pagination-item {
        padding: 8px 10px;
        color: #014099;
        cursor: pointer;
        min-width: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 40px;
    }

        .list-pagination .pagination-item.active {
            color: #001526;
        }

        .list-pagination .pagination-item.dynamic-item {
            color: #808080;
        }

        .list-pagination .pagination-item:hover:not(.active) {
            background-color: #f5f5f5;
        }

header {
    background-color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 20px;
}

    header > div {
        max-width: 1800px;
        padding: 0;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    header .header-top-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

        header .header-top-right > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
        }

    header .navbar {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding: 0 10px;
        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    }

    header .navbar-top, header #navbarCollapse {
        max-width: 1800px;
    }

    header .navbar-top {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    header .navbar-toggler {
        border: none;
        padding: 10px;
        font-size: 25px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: none;
    }

    header #navbarCollapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
        margin: 0 auto;
    }

    header .mobile-display-only, header .iknow-hamburger, header .nav-other-link {
        display: none;
    }

    header .iknow-logo {
        padding: 20px 0 0;
    }

    header .date-time-panel {
        padding: 5px 0;
        height: 37px;
    }

    header .header-link-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        font-size: 18px;
        padding: 3px 10px;
        border: 1px solid #D5DFEC;
        background-color: #eeeeee;
        border-top: none;
        border-radius: 0px 0px 10px 10px;
    }

        header .header-link-block li {
            list-style: none;
        }

            header .header-link-block li:not(:last-child) {
                border-right: 1px solid #D5DFEC;
            }

            header .header-link-block li a, header .header-link-block li span {
                cursor: pointer;
                display: block;
                padding: 0 8px;
                color: #014099;
            }

    header .iknow-nav {
        padding: 5px 0;
    }

        header .iknow-nav .navbar-nav {
            font-size: 20px;
            font-weight: bold;
            border: 1px solid #cccccc;
            border-radius: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        header .iknow-nav .nav-item {
            border-right: 1px solid #cccccc;
            position: relative;
            list-style: none;
            padding: 3px 10px;
        }

            header .iknow-nav .nav-item .nav-item-angle {
                display: none;
                position: absolute;
                right: 10px;
                top: 0px;
                padding: 0px 10px;
                cursor: pointer;
                font-size: 25px;
                color: #001526;
            }

            header .iknow-nav .nav-item.nav-item-end {
                border-right: none;
            }

            header .iknow-nav .nav-item a.nav-link {
                padding: 2px 5px;
                color: #4A4A4A;
                cursor: pointer;
                display: block;
            }

            header .iknow-nav .nav-item.active, header .iknow-nav .nav-item:hover {
                background-color: #001526;
            }

                header .iknow-nav .nav-item.active > a.nav-link, header .iknow-nav .nav-item:hover > a.nav-link {
                    color: #ffffff;
                }

                header .iknow-nav .nav-item.active .nav-sub-menu, header .iknow-nav .nav-item:hover .nav-sub-menu {
                    display: block;
                }

                    header .iknow-nav .nav-item.active .nav-sub-menu .nav-item, header .iknow-nav .nav-item:hover .nav-sub-menu .nav-item {
                        border-right: none;
                    }

    header .nav-sub-menu {
        display: none;
        position: absolute;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        background-color: #f5f5f5;
        padding: 5px 0;
        color: #222222;
        left: 0;
        top: 30px;
        margin-top: 4px;
        z-index: 10;
    }

        header .nav-sub-menu .nav-item a.nav-link {
            display: block;
            padding: 5px 20px;
            color: #001526;
        }

            header .nav-sub-menu .nav-item a.nav-link:hover {
                background-color: #001526;
                color: #ffffff;
            }

        header .nav-sub-menu::before {
            content: "";
            display: block;
            position: absolute;
            height: 5px;
            width: 100%;
            top: -5px;
            left: 0;
        }

    header .mobile-newsletter-banner {
        padding: 70px 10px 10px;
        width: 100%;
        background-image: -webkit-gradient(linear, left top, right top, from(#014099), to(#001526));
        background-image: linear-gradient(to right, #014099, #001526);
        text-align: center;
    }

        header .mobile-newsletter-banner div {
            font-size: 22px;
            color: #ffffff;
        }

footer {
    padding-top: 60px;
}

    footer .subscribe-newsletter, footer .organization {
        padding: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        footer .subscribe-newsletter > div, footer .organization > div {
            max-width: 1800px;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

    footer .subscribe-newsletter {
        background-color: #7e8490;
    }

        footer .subscribe-newsletter .btn-subscribe-newsletter {
            color: #f5f5f5;
            border: 1px solid #f5f5f5;
            padding: 10px 20px;
            font-size: 22px;
            border-radius: 5px;
            margin-bottom: 10px auto;
            background-color: #001526;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            footer .subscribe-newsletter .btn-subscribe-newsletter:hover {
                background-color: #003159;
            }

            footer .subscribe-newsletter .btn-subscribe-newsletter svg {
                margin-right: 10px;
            }

    footer .organization {
        font-size: 14px;
        background-color: #DADADA;
        color: #4A4A4A;
    }

        footer .organization > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
        }

        footer .organization .organization-logo {
            -ms-flex-preferred-size: 250px;
            flex-basis: 250px;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            padding-top: 20px;
        }

        footer .organization .organization-info {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
        }

            footer .organization .organization-info > div {
                -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
                padding-left: 20px;
            }

        footer .organization a {
            color: #4A4A4A;
        }

            footer .organization a:hover {
                opacity: 0.9;
            }

            footer .organization a:visited {
                color: #4A4A4A;
            }

.iknow-carousel {
    background-color: #fff;
    position: relative;
}

    .iknow-carousel .carousel-bottom {
        position: absolute;
        bottom: 0;
        border: 1px solid transparent;
    }

    .iknow-carousel > div {
        max-width: 1400px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 600px;
        overflow: hidden;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .iknow-carousel .carousel-item-images {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        height: 600px;
    }

        .iknow-carousel .carousel-item-images > div {
            position: absolute;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
            z-index: 1;
            opacity: 0;
            min-width: 100%;
            height: 600px;
        }

            .iknow-carousel .carousel-item-images > div.active {
                z-index: 2;
                opacity: 1;
            }

        .iknow-carousel .carousel-item-images img {
            max-height: 600px;
            -o-object-fit: cover;
            object-fit: cover;
            width: 100%;
            height: 600px;
        }

    .iknow-carousel .carousel-item-labels {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 370px;
        height: 600px;
        overflow-y: auto;
        padding-left: 10px;
        margin-left: -10px;
    }

        .iknow-carousel .carousel-item-labels::-webkit-scrollbar {
            width: 0;
        }

        .iknow-carousel .carousel-item-labels > div {
            background-color: rgba(2, 115, 115, 0.7);
            min-height: 600px;
        }

            .iknow-carousel .carousel-item-labels > div > div {
                border-bottom: 1px solid #027373;
                padding: 5px 10px;
            }

                .iknow-carousel .carousel-item-labels > div > div a {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    color: #fff;
                }

                .iknow-carousel .carousel-item-labels > div > div.active {
                    background-color: #001526;
                    position: relative;
                }

                    .iknow-carousel .carousel-item-labels > div > div.active::before {
                        content: "";
                        display: block;
                        width: 0;
                        height: 0;
                        position: absolute;
                        border: 10px solid transparent;
                        border-left: none;
                        border-right-color: #001526;
                        left: -10px;
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
                    }

                    .iknow-carousel .carousel-item-labels > div > div.active a {
                        color: #ffffff;
                    }

.social-share-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 50;
    left: 10px;
    top: 210px;
}

    .social-share-bar .share-bar-btn {
        display: block;
        border-radius: 50px;
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
        cursor: pointer;
    }

.aichat-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 50;
    right: 20px;
    bottom: 110px;
}

    .aichat-bar .aichat-bar-btn {
        display: block;
        border-radius: 50px;
        width: 100px;
        height: 100px;
        margin-bottom: 8px;
        cursor: pointer;
    }

        .social-share-bar .share-bar-btn img, .aichat-bar .aichat-bar-btn img {
            width: 100%;
        }

        .social-share-bar .share-bar-btn:hover img, .aichat-bar .aichat-bar-btn:hover img {
            opacity: 0.8;
        }

    .social-share-bar div.share-bar-btn, .aichat-bar div.aichat-bar-btn {
        margin-top: 30px;
    }



main .main-content {
    position: relative;
    margin: 0 auto;
    max-width: 1800px;
    padding: 30px 20px;
}

main .breadcrumb {
    background-color: transparent;
    padding: 0 0 15px;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    font-size: 16px;
}

    main .breadcrumb .breadcrumb-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        main .breadcrumb .breadcrumb-item::after {
            content: ">";
            font-size: 14px;
            color: #808080;
        }

        main .breadcrumb .breadcrumb-item:last-child::after {
            content: "";
        }

        main .breadcrumb .breadcrumb-item a {
            color: #808080;
        }

main .column-main {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

main .column-side {
    -ms-flex-preferred-size: 400px;
    flex-basis: 400px;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 40px;
}

    main .column-side .article-list .block-title {
        border-bottom: 1px solid #b3b3b3;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    main .column-side .article-list-item {
        border-bottom: 1px solid #b3b3b3;
        margin-bottom: 15px;
    }

main .content-article .column-main {
    padding-left: 50px;
}

main .content-topic .column-side, main .content-patent .column-side, main .content-member .column-side, main .content-member .iknow-ai-chat-article {
    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
    padding-left: 0;
}

    main .content-topic .column-side .topic-introduce, main .content-patent .column-side .topic-introduce, main .content-member .column-side .topic-introduce, main .content-member .column-side .iknow-ai-chat-article {
        display: none;
    }

main .content-topic .column-main, main .content-patent .column-main, main .content-member .column-main {
    padding-left: 20px;
    padding-right: 0px;
}

main .content-patent .column-side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

main .content-patent .column-main {
    padding-left: 40px;
}

.content-homepage > div > div {
    margin-top: 40px;
}

.content-homepage .new-article-12 > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.content-homepage .new-article-12 .article-card {
    width: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
}

    .content-homepage .new-article-12 .article-card .article-title h5 {
        font-size: 22px;
    }

.content-homepage .feature-chart-article {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px 30px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

    .content-homepage .feature-chart-article .article-card {
        border-bottom: none;
    }

    .content-homepage .feature-chart-article .article-hightchart-container {
        -ms-flex-preferred-size: 600px;
        flex-basis: 600px;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

.content-homepage .graphic-card-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 -10px;
}

.content-homepage .article-list {
    padding-right: 20px;
}

.highcharts-description {
    text-align: center;
}

.login-form {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 20px 30px;
    border-radius: 20px;
    background-color: #ffffff;
    border: 1px solid #b3b3b3;
}

    .login-form h2 {
        font-size: 26px;
    }

    .login-form h5 {
        font-size: 18px;
    }

    .login-form p {
        color: #808080;
        font-size: 15px;
    }

    .login-form .login-form-field {
        padding: 10px 0;
    }

        .login-form .login-form-field .btn {
            width: 100%;
            font-size: 20px;
            margin-bottom: 20px;
        }

    .login-form .error-msg {
        color: #FF0000;
        font-size: 18px;
    }

    .login-form a {
        color: #014099;
        display: inline-block;
    }

    .login-form .facebook-login-btn, .login-form .google-login-btn {
        width: 100%;
        background-color: #1877F2;
        padding: 8px 30px;
        color: #ffffff;
        border-radius: 4px;
        border: none;
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
        cursor: pointer;
    }

    .login-form .google-login-btn {
        background-color: #FF0000;
    }

    .login-form .custom-checkbox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 8px;
    }

        .login-form .custom-checkbox input {
            width: 25px;
        }

.category-introduce, .login-introduce {
    border-bottom: 2px solid #b3b3b3;
    padding-bottom: 13px;
    margin-bottom: 20px;
}

    .category-introduce h2, .login-introduce h2 {
        font-size: 26px;
    }

    .category-introduce .category-introduce-text, .login-introduce .category-introduce-text {
        padding-top: 5px;
        border-top: 2px solid #b3b3b3;
    }

.topic-introduce {
    margin-bottom: 20px;
}

    .topic-introduce h2 {
        font-size: 26px;
        font-weight: 700;
    }

.news-introduce {
    border-bottom: 4px dotted #000;
    padding: 0px 0 10px 0;
    margin: 0 0 20px 0;
}

    .news-introduce p {
        color: #808080;
        font-size: 18px;
    }

.news-period {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 700;
}

.news-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start; /* 新增：短欄不被拉到跟長欄等高 */
}

    .news-block .news-category-row {
        flex-basis: 33%;
        min-width: 0; /* 新增：長標題不撐爆欄寬 */
    }

    .news-block .news-category-group-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .news-block .news-category-group-title h3 {
            font-size: 22px;
            margin-bottom: 0;
        }

        .news-block .news-category-group-title .image-clip {
            width: 30px;
            padding-bottom: 30px;
            background-color: transparent;
        }


/* 若原本靠 column-count 時期的 break-inside 撐版，可以拿掉了 */
.news-category-group {
    break-inside: auto;
}

@media (max-width: 900px) {
    .news-block {
        flex-direction: column;
    }
}

.news-block .news-category-sub-group {
    margin: 10px;
}

    .news-block .news-category-sub-group h4 {
        display: inline-block;
        font-size: 22px;
        padding: 3px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #fff;
    }

    .news-block .news-category-sub-group a {
        display: block;
        margin-bottom: 8px;
    }

        .news-block .news-category-sub-group a h5 {
            font-size: 18px;
            margin-bottom: 0;
        }

        .news-block .news-category-sub-group a p {
            font-size: 14px;
            color: #808080;
        }

.category-filter {
    margin-bottom: 40px;
}

    .category-filter ul {
        width: 100%;
        border-bottom: 2px solid #b3b3b3;
        padding-bottom: 15px;
        margin-bottom: 20px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

        .category-filter ul h5 {
            margin-bottom: 0;
        }

        .category-filter ul li {
            list-style: none;
            cursor: pointer;
        }

    .category-filter .category-filter-subcategory h5 {
        font-size: 18px;
        color: #014099;
    }

    .category-filter .category-filter-subcategory p {
        font-size: 13px;
        color: #808080;
        text-align: center;
    }

    .category-filter .category-filter-subcategory li {
        border: 2px solid #014099;
        margin-right: 10px;
        padding: 5px 20px 3px;
        border-radius: 50px;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

        .category-filter .category-filter-subcategory li:hover, .category-filter .category-filter-subcategory li.active {
            background-color: #014099;
        }

            .category-filter .category-filter-subcategory li:hover h5, .category-filter .category-filter-subcategory li:hover p, .category-filter .category-filter-subcategory li.active h5, .category-filter .category-filter-subcategory li.active p {
                color: #ffffff;
            }

    .category-filter .category-filter-years {
        height: 180px;
        position: relative;
        overflow-x: scroll;
        padding-left: 20px;
    }

        .category-filter .category-filter-years::before {
            content: "請選取年份";
            position: absolute;
            width: 30px;
            left: 0px;
            color: red;
            font-weight: bold;
        }

        .category-filter .category-filter-years p {
            font-size: 13px;
            text-align: center;
        }

        .category-filter .category-filter-years h5 {
            font-size: 13px;
            text-align: center;
            font-weight: bold;
        }

        .category-filter .category-filter-years li {
            position: relative;
            -ms-flex-preferred-size: 65px;
            flex-basis: 65px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            padding-bottom: 20px;
        }

            .category-filter .category-filter-years li:hover div, .category-filter .category-filter-years li.active div {
                background-color: #014099;
            }

        .category-filter .category-filter-years div {
            width: 20px;
            background-color: #808080;
            margin: 0 auto;
        }

        .category-filter .category-filter-years h5 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }

        .category-filter .category-filter-years p {
            height: 20px;
        }

    .category-filter .years-stroke {
        cursor: default;
        position: absolute;
        height: 160px;
        width: 100%;
        top: 8px;
        left: 0;
        z-index: -10;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .category-filter .years-stroke span {
            width: 100%;
            height: 1px;
            background-color: #e6e6e6;
            margin-top: 19px;
        }

.graphic-card-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.graphic-card-container {
    -ms-flex-preferred-size: 16.5%;
    flex-basis: 16.5%;
}

.graphic-card {
    margin: 0 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

    .graphic-card .image-clip {
        padding-bottom: 67.5%;
    }

    .graphic-card .graphic-title {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
        background-image: linear-gradient(transparent, black);
        background-color: #7B7B7B;
    }

        .graphic-card .graphic-title h3 {
            color: #ffffff;
            font-size: 25px;
            font-weight: 700;
            text-align: center;
            margin: 0;
        }

    .graphic-card .graphic-card-position {
        position: absolute;
        top: -149px;
    }

.pc-row-mobile-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.fb-page {
    width: 340px;
    -ms-flex-preferred-size: 340px;
    flex-basis: 340px;
}

.article-list {
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
    margin-bottom: 40px;
}

    .article-list ul li {
        list-style: none;
    }

    .article-list .article-title {
        font-size: 18px;
    }

.article-list-item {
    margin-bottom: 10px;
    border-bottom: 4px dotted #b3b3b3;
}

    .article-list-item .article-title {
        margin: 0;
    }

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

        .article-list-item a:hover {
            opacity: 0.8;
        }

.article-list-with-border .article-card.vertical-card {
    border-bottom: 4px dotted #b3b3b3;
}

h3.block-title {
    margin-bottom: 15px;
    font-weight: 700;
}

    h3.block-title div {
        font-size: 24px;
        line-height: 24px;
        color: #222222;
        padding: 0 8px;
        border-left: 5px solid #001526;
        font-weight: 700;
    }

.article-title {
    font-size: 18px;
}

.article-date {
    font-size: 15px;
    color: #808080;
}

.related-website {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 -20px;
}

    .related-website > div {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        width: 25%;
        padding: 10px 20px;
        max-width: 250px;
    }

    .related-website a {
        display: block;
    }

        .related-website a:hover {
            opacity: 0.8;
        }

        .related-website a img {
            width: 100%;
        }

.image-clip {
    width: 100%;
    height: 0;
    padding-bottom: 52%;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

    .image-clip img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .image-clip:hover img {
        -webkit-transform: translate(-50%, -50%) scale(1.1);
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }

.article-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-bottom: 2px solid #b3b3b3;
    padding: 0 0 10px;
    margin-bottom: 15px;
}

    .article-card.vertical-card {
        padding: 10px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        border-bottom: none;
        margin-bottom: 0;
    }

        .article-card.vertical-card .article-image {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1;
        }

        .article-card.vertical-card .article-content {
            padding: 0;
        }

    .article-card > div {
        margin-bottom: 5px;
    }

    .article-card a {
        display: block;
        color: inherit;
    }

    .article-card .article-content {
        padding: 0 10px;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }

    .article-card .article-image {
        border: 1px solid #cccccc;
        border-radius: 10px;
        overflow: hidden;
        -ms-flex-preferred-size: 35%;
        flex-basis: 35%;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .article-card .article-category {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        margin-bottom: 0;
    }

        .article-card .article-category > a {
            background-color: #001526;
            border-radius: 4px;
            color: #ffffff;
            padding: 1px 5px;
        }

            .article-card .article-category > a:hover {
                opacity: 0.8;
            }

    .article-card .article-title {
        color: #222222;
    }

        .article-card .article-title h5 {
            font-size: 22px;
            padding-top: 3px;
            word-break: break-all;
            font-weight: 700;
        }

            .article-card .article-title h5:hover {
                opacity: 0.8;
            }

    .article-card .article-date-view-num {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 15px;
        color: #808080;
    }

        .article-card .article-date-view-num span {
            margin-right: 15px;
        }

    .article-card .article-tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .article-card .article-tags .article-tag {
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
            display: inline-block;
        }

            .article-card .article-tags .article-tag div, .aichat-tags {
                background-color: #014099;
                color: #fff;
                cursor: pointer;
                padding: 0 7px;
                border-radius: 5px;
                margin-bottom: 5px;
                margin-right: 3px;
                display: inline-block;
            }

                .article-card .article-tags .article-tag div:hover, .aichat-tags:hover {
                    opacity: 0.8;
                }

        .article-card .article-tags.block-article-tags .article-tag div {
            background-color: #808080;
        }

    .article-card .article-description {
        color: #000000;
    }

.article-post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 40px;
}

    .article-post .article-title h2 {
        font-size: 36px;
        color: #222222;
        border-bottom: 1px solid #000;
        font-weight: bolder;
    }

    .article-post .article-tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 10px 0 10px 0;
        padding: 0 0 5px 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .article-post .article-tags .article-tag {
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
            display: inline-block;
        }

            .article-post .article-tags .article-tag div {
                background-color: #014099;
                color: #fff;
                cursor: pointer;
                padding: 0 7px;
                border-radius: 5px;
                margin-bottom: 5px;
                margin-right: 3px;
                display: inline-block;
            }

                .article-post .article-tags .article-tag div:hover {
                    opacity: 0.8;
                }

    .article-post .article-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #808080;
        border-bottom: 1px solid #000;
    }

    .article-post .article-date-view-num {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 15px;
        color: #808080;
        margin-left: 30px;
    }

    .article-post .article-publish-date {
        margin-right: 10px;
    }

    .article-post .article-image .image-clip:hover img {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }

.article-context {
    padding-top: 20px;
    color: #000000;
}

    .article-context a {
        color: #000000;
    }

    .article-context table {
        margin: 0 auto;
    }

    .article-context ul, .article-context ol {
        margin: 16px 0;
        padding: 0 0 0 40px;
    }

        .article-context ul li, .article-context ol li {
            list-style-type: disc;
        }


.follow-up-report {
    margin-bottom: 20px;
}

    .follow-up-report > h4 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .follow-up-report > div {
        border-left: 2px solid #cdcdcd;
        padding-left: 20px;
    }

    .follow-up-report .follow-up-report-block {
        padding-bottom: 10px;
    }

        .follow-up-report .follow-up-report-block > h5 {
            background-color: #014099;
            display: inline-block;
            padding: 2px 8px;
            color: #ffffff;
            font-size: 17px;
        }

        .follow-up-report .follow-up-report-block .single-report {
            margin-bottom: 15px;
            padding-left: 10px;
            position: relative;
        }

            .follow-up-report .follow-up-report-block .single-report::before, .follow-up-report .follow-up-report-block .single-report::after {
                content: "";
                display: block;
                position: absolute;
            }

            .follow-up-report .follow-up-report-block .single-report::before {
                width: 20px;
                height: 2px;
                background-color: #cdcdcd;
                top: 10px;
                left: -20px;
            }

            .follow-up-report .follow-up-report-block .single-report::after {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background-color: #014099;
                top: 6px;
                left: -25px;
            }

            .follow-up-report .follow-up-report-block .single-report .single-report-position {
                position: absolute;
                top: -149px;
            }

            .follow-up-report .follow-up-report-block .single-report > h3 {
                font-size: 18px;
                color: #222222;
                margin-bottom: 2px;
                cursor: pointer;
            }

                .follow-up-report .follow-up-report-block .single-report > h3:hover {
                    color: #014099;
                }

            .follow-up-report .follow-up-report-block .single-report > span {
                font-size: 15px;
                color: #808080;
            }

            .follow-up-report .follow-up-report-block .single-report > div {
                padding: 20px;
                background-color: #D5DFEC;
                display: none;
            }

.article-declaration {
    border: 1px solid #222222;
    color: #222222;
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 40px;
}

    .article-declaration h5 {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .article-declaration ol {
        padding-left: 25px;
    }

.recommend-list {
    margin-bottom: 20px;
}

    .recommend-list > div {
        margin: 0 -10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

        .recommend-list > div .article-card {
            -ms-flex-preferred-size: 33%;
            flex-basis: 33%;
        }

            .recommend-list > div .article-card h5 {
                font-size: 18px;
            }

.topic-group {
    margin-bottom: 20px;
    position: relative;
}

    .topic-group .topic-group-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        height: 30px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 10px;
    }

        .topic-group .topic-group-title .image-clip {
            width: 30px;
            padding-bottom: 30px;
        }

            .topic-group .topic-group-title .image-clip:hover img {
                opacity: 1;
                -webkit-transform: translate(-50%, -50%) scale(1);
                transform: translate(-50%, -50%) scale(1);
            }

        .topic-group .topic-group-title h3 {
            padding-left: 10px;
            font-size: 30px;
            margin-bottom: 0;
            font-weight: 700;
        }

    .topic-group .topic-group-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -20px;
    }

        .topic-group .topic-group-content .graphic-card-container {
            width: 33%;
            -ms-flex-preferred-size: 33%;
            flex-basis: 33%;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            margin-bottom: 20px;
        }

        .topic-group .topic-group-content .graphic-card {
            margin: 0 20px;
        }

        .topic-group .topic-group-content .graphic-updateDate {
            text-align: center;
            color: #808080;
            font-size: 14px;
            margin-top: 5px;
        }

    .topic-group .topic-group-position {
        position: absolute;
        top: -149px;
    }

.topic-nav li {
    list-style: none;
    position: relative;
    cursor: pointer;
}

.topic-nav .topic-nav-sub {
    display: none;
    position: absolute;
    background-color: #ffffff;
    padding: 10px 20px;
    width: 200px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    top: 25px;
    left: 150px;
    z-index: 50;
}

    .topic-nav .topic-nav-sub li {
        text-align: center;
        padding: 5px 10px;
        color: #4A4A4A;
    }

        .topic-nav .topic-nav-sub li:hover {
            opacity: 0.8;
        }

.topic-nav .topic-nav-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #014099;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
}

    .topic-nav .topic-nav-title .image-clip {
        width: 20px;
        padding-bottom: 20px;
    }

        .topic-nav .topic-nav-title .image-clip:hover img {
            opacity: 1;
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
        }

    .topic-nav .topic-nav-title h5 {
        font-size: 18px;
        margin-bottom: 0;
        padding-left: 5px;
    }

.topic-nav > li {
    margin-bottom: 10px;
}

    .topic-nav > li:hover .topic-nav-sub {
        display: block;
    }

.figure-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .figure-block .infinite-scroll-component {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .figure-block .article-card {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

.patent-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 20px 0 30px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 20px;
}

    .patent-card .patent-card-image {
        -ms-flex-preferred-size: 150px;
        flex-basis: 150px;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

        .patent-card .patent-card-image img {
            width: 100%;
        }

    .patent-card .patent-card-content {
        padding-left: 20px;
    }

    .patent-card .patent-card-date {
        color: #808080;
        padding-bottom: 5px;
        font-size: 14px;
    }

        .patent-card .patent-card-date h5 {
            font-size: 24px;
            font-weight: 700;
        }

.patent-entrance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 20px;
}

    .patent-entrance > div {
        margin: 0 0 20px;
    }

        .patent-entrance > div a {
            display: block;
            border: 1px solid #808080;
            border-radius: 10px;
            overflow: hidden;
        }

        .patent-entrance > div img {
            width: 100%;
        }

.content-category .patent-entrance > div {
    max-width: 200px;
}

.timeline-block {
    position: relative;
    overflow: hidden;
}

.compare-groups {
    position: absolute;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    z-index: -1;
    padding-left: 20px;
}

    .compare-groups .compare-group {
        -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
        position: relative;
        padding: 30px 10px 0;
    }

        .compare-groups .compare-group div {
            background-color: #ffffff;
            height: 1000000px;
        }

        .compare-groups .compare-group span {
            position: absolute;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            background-color: #808080;
            font-size: 22px;
            padding: 3px 8px;
            color: #ffffff;
        }

.timeline-content {
    padding: 40px 0px;
    margin-left: 10px;
    border-left: 1px solid #808080;
}

    .timeline-content h4 {
        color: #ffffff;
        background-color: #014099;
        display: inline-block;
        padding: 3px 5px;
        font-size: 18px;
        margin-left: 10px;
    }

    .timeline-content .timeline-group-news {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .timeline-content .timeline-group-news a {
            -ms-flex-preferred-size: 28%;
            flex-basis: 28%;
            margin-bottom: 10px;
        }

            .timeline-content .timeline-group-news a h5 {
                font-size: 18px;
                margin-bottom: 0;
            }

            .timeline-content .timeline-group-news a p {
                font-size: 14px;
                color: #808080;
            }

            .timeline-content .timeline-group-news a.one-column {
                -ms-flex-preferred-size: 98%;
                flex-basis: 98%;
            }

        .timeline-content .timeline-group-news > div {
            height: 1px;
            position: relative;
            left: -5px;
            margin-top: 10px;
            background-color: #808080;
        }

            .timeline-content .timeline-group-news > div::before, .timeline-content .timeline-group-news > div::after {
                content: "";
                display: block;
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 10px;
                top: -5px;
            }

            .timeline-content .timeline-group-news > div::before {
                left: 0;
            }

            .timeline-content .timeline-group-news > div::after {
                right: 0;
            }

        .timeline-content .timeline-group-news .timeline-group-0 {
            -ms-flex-preferred-size: 3%;
            flex-basis: 3%;
        }

            .timeline-content .timeline-group-news .timeline-group-0::before, .timeline-content .timeline-group-news .timeline-group-0::after {
                background-color: #1C95C4;
            }

        .timeline-content .timeline-group-news .timeline-group-1 {
            -ms-flex-preferred-size: 36%;
            flex-basis: 36%;
        }

            .timeline-content .timeline-group-news .timeline-group-1::before, .timeline-content .timeline-group-news .timeline-group-1::after {
                background-color: #F5A623;
            }

        .timeline-content .timeline-group-news .timeline-group-2 {
            -ms-flex-preferred-size: 69%;
            flex-basis: 69%;
        }

            .timeline-content .timeline-group-news .timeline-group-2::before, .timeline-content .timeline-group-news .timeline-group-2::after {
                background-color: #7ED321;
            }

.content-newsletter .newsletter-news .news-block .news-category-row {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

.newsletter-title-block {
    margin-bottom: 30px;
    padding: 0px 0 14px 0;
    border-bottom: 1px solid #000;
    text-align: center;
}

    .newsletter-title-block h2 {
        font-size: 30px;
        font-weight: 700;
    }

.newsletter-content-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    max-width: 500px;
    border-radius: 50px;
    border: 1px solid #001526;
    overflow: hidden;
    margin-top: 20px;
}

    .newsletter-content-switch > div {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        text-align: center;
        padding: 5px;
        font-size: 22px;
        font-weight: 700;
        cursor: pointer;
    }

        .newsletter-content-switch > div.active {
            background-color: #001526;
            color: #ffffff;
        }

.newsletter-articles-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .newsletter-articles-block .article-card {
        -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
    }

        .newsletter-articles-block .article-card .article-image {
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }

.table-scroll-position {
    position: absolute;
    top: -160px;
}

.iknow-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(245, 245, 245, 0.5);
    z-index: 9999;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .iknow-modal.modal-show {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .iknow-modal > div {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 700px;
        max-height: 500px;
        overflow: hidden;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 20px;
        -webkit-box-shadow: 0 0 10px gainsboro;
        box-shadow: 0 0 10px gainsboro;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

        .iknow-modal > div .modal-header, .iknow-modal > div .modal-footer {
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            border-bottom: none;
        }

            .iknow-modal > div .modal-header h3, .iknow-modal > div .modal-footer h3 {
                font-size: 24px;
            }

        .iknow-modal > div .modal-body {
            overflow-y: auto;
        }

            .iknow-modal > div .modal-body > p {
                margin-bottom: 10px;
                line-height: 1.5;
            }

        .iknow-modal > div .modal-header {
            -ms-flex-preferred-size: 40px;
            flex-basis: 40px;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            font-size: 18px;
            color: #222222;
        }

            .iknow-modal > div .modal-header .btn-close {
                font-size: 25px;
                color: #c2c2c2;
                cursor: pointer;
            }

                .iknow-modal > div .modal-header .btn-close:hover {
                    color: darkgray;
                }

        .iknow-modal > div .modal-footer {
            -ms-flex-preferred-size: 55px;
            flex-basis: 55px;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            padding-top: 20px;
            border-top: none;
        }

            .iknow-modal > div .modal-footer .btn {
                margin-left: 10px;
            }

    .iknow-modal .error-msg {
        color: #FF0000;
        font-size: 16px;
    }

.search-bar-block {
    position: relative;
    width: 350px;
}

    .search-bar-block .search-bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .search-bar-block .search-btn {
        background-color: #001526;
        color: #ffffff;
        padding: 0px 5px;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .search-bar-block .search-recommend {
        position: absolute;
        width: 100%;
        z-index: 999;
    }

    .search-bar-block .search-recommend-list {
        padding: 10px;
        background-color: #f5f5f5;
    }

        .search-bar-block .search-recommend-list > div {
            cursor: pointer;
        }

.news-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-bottom: 10px;
}

    .news-search > div {
        -ms-flex-preferred-size: 200px;
        flex-basis: 200px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        margin-right: 15px;
    }

    .news-search .btn-group {
        -ms-flex-preferred-size: 150px;
        flex-basis: 150px;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

        .news-search .btn-group > div:first-child {
            margin-right: 10px;
        }

@media screen and (max-width: 1200px) {
    .iknow-carousel > div {
        height: 400px;
    }

    .iknow-carousel .carousel-item-images {
        height: 400px;
    }

        .iknow-carousel .carousel-item-images img {
            height: 400px;
        }

    .iknow-carousel .carousel-item-labels {
        height: 400px;
        width: 250px;
    }

        .iknow-carousel .carousel-item-labels > div {
            min-height: 400px;
        }
}

@media screen and (max-width: 1000px) {
    .iknow-carousel > div {
        height: 350px;
    }

    .iknow-carousel .carousel-item-images {
        height: 350px;
    }

        .iknow-carousel .carousel-item-images img {
            height: 350px;
        }

    .iknow-carousel .carousel-item-labels {
        height: 350px;
        width: 200px;
    }

        .iknow-carousel .carousel-item-labels > div {
            min-height: 350px;
        }
}

@media screen and (max-width: 768px) {
    #iknow-header {
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .iknow-carousel {
        display: none;
    }

    .search-bar-block {
        width: 100%;
        margin-bottom: 15px;
    }

        .search-bar-block .search-recommend {
            display: none;
        }

    .iknow-modal > div {
        width: 90%;
    }

    .main-content .table-scroll-position {
        top: -110px;
    }

    .main-content .pagination .page-link {
        padding: 8px;
    }

    .main-content .content-list-panel {
        margin-bottom: 40px;
    }

    .main-content .pc-row-mobile-column {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .main-content .pc-row-mobile-column > div {
            width: 100%;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

        .main-content .pc-row-mobile-column .fb-page {
            text-align: center;
        }

        .main-content .pc-row-mobile-column .article-list {
            margin-bottom: 40px;
        }

    .main-content .graphic-card-row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .main-content .graphic-card-row .graphic-card-container {
            width: 50%;
            -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
            margin: 0 0 20px;
        }

    .main-content .related-website > div {
        width: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 230px;
    }

    .main-content .article-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-preferred-size: normal;
        flex-basis: normal;
        border-bottom: none;
    }

        .main-content .article-card .article-image {
            width: 100%;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

        .main-content .article-card .article-description {
            display: none;
        }

        .main-content .article-card .article-content {
            padding: 0;
        }

    .main-content .column-side {
        padding: 0;
    }

    .main-content .social-share-bar {
        position: static;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        margin-bottom: 10px;
    }

        .main-content .social-share-bar .share-bar-btn {
            margin-bottom: 0;
            margin-top: 0;
            margin-right: 8px;
        }

    .main-content .article-post img {
        width: 100% !important;
        height: auto !important;
    }

    .main-content .article-post .article-info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .main-content .follow-up-report .follow-up-report-block .single-report .single-report-position {
        top: -80px;
    }

    .main-content .recommend-list {
        margin-bottom: 40px;
    }

        .main-content .recommend-list > div .article-card {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

    .main-content .topic-group-content {
        margin: 0 -10px;
    }

        .main-content .topic-group-content .graphic-card-container {
            width: 50%;
            -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
        }

        .main-content .topic-group-content .graphic-card {
            margin: 0 10px;
        }

    .main-content .topic-nav {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-bottom: 20px;
    }

        .main-content .topic-nav > li {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            margin-right: 10px;
        }

            .main-content .topic-nav > li:hover .topic-nav-sub {
                display: none;
            }

        .main-content .topic-nav .topic-nav-title {
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
        }

    .main-content .patent-card .patent-card-image {
        -ms-flex-preferred-size: 80px;
        flex-basis: 80px;
    }

    .main-content .news-search {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .main-content .news-search > div {
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
            margin-bottom: 10px;
            margin-right: 5px;
        }

    .main-content.content-article .column-main {
        padding-left: 0px;
    }

    .content-homepage .new-article-12 > div {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .content-homepage .new-article-12 .article-card {
        width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

        .content-homepage .new-article-12 .article-card:nth-child(9), .content-homepage .new-article-12 .article-card:nth-child(10), .content-homepage .new-article-12 .article-card:nth-child(11), .content-homepage .new-article-12 .article-card:nth-child(12) {
            display: none;
        }

    .content-homepage .feature-chart-article {
        padding: 20px 10px;
    }

        .content-homepage .feature-chart-article .article-description {
            display: block;
        }

        .content-homepage .feature-chart-article .article-hightchart-container {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

    .content-topic .pc-row-mobile-column .column-main {
        padding-left: 0;
    }

        .content-topic .pc-row-mobile-column .column-main .topic-introduce {
            display: none;
        }

    .content-topic .pc-row-mobile-column .column-side .topic-introduce {
        display: block;
    }

    .content-patent .pc-row-mobile-column .column-side, .content-category .pc-row-mobile-column .column-side {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .content-patent .pc-row-mobile-column .column-main, .content-category .pc-row-mobile-column .column-main {
        padding-left: 0;
    }

    .content-patent .patent-entrance, .content-category .patent-entrance {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-right: -10px;
        margin-left: -10px;
        margin-top: 0;
    }

        .content-patent .patent-entrance > div, .content-category .patent-entrance > div {
            -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            padding: 10px;
        }

    .content-figure .figure-block .article-card {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .content-news .news-block .news-category-row {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .content-news .news-block .news-category-group {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .content-news .timeline-block .compare-groups {
        display: none;
    }

    .content-news .timeline-block .timeline-content .timeline-group-news a {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .content-news .timeline-block .timeline-content .timeline-group-news > div {
        -ms-flex-preferred-size: 3%;
        flex-basis: 3%;
    }

    .content-newsletter .newsletter-articles-block {
        margin-bottom: 30px;
    }

        .content-newsletter .newsletter-articles-block .article-card {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

    .content-newsletter .newsletter-news .news-block .news-category-group {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    header .pc-display-only {
        display: none;
    }

    header .mobile-display-only {
        display: block;
    }

    header .navbar-toggler {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    header .iknow-logo {
        padding: 10px 0;
    }

        header .iknow-logo img {
            width: 180px;
        }

    header .iknow-nav {
        background: #f5f5f5;
        padding: 10px;
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        height: calc(100vh - 60px);
        overflow: auto;
        z-index: 1000;
    }

        header .iknow-nav .navbar-nav {
            border: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            width: 100%;
            min-height: calc(100vh - 60px);
        }

        header .iknow-nav .nav-item {
            border-right: none;
            border-bottom: 1px solid #cccccc;
            padding: 3px 10px;
        }

            header .iknow-nav .nav-item .nav-item-angle {
                display: block;
            }

            header .iknow-nav .nav-item a.nav-link, header .iknow-nav .nav-item span.nav-link {
                padding: 5px 10px;
            }

            header .iknow-nav .nav-item.active, header .iknow-nav .nav-item:hover {
                background-color: #f5f5f5;
            }

                header .iknow-nav .nav-item.active > a.nav-link, header .iknow-nav .nav-item:hover > a.nav-link {
                    color: #4A4A4A;
                }

                header .iknow-nav .nav-item.active .nav-sub-menu, header .iknow-nav .nav-item:hover .nav-sub-menu {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                }

        header .iknow-nav .nav-sub-menu {
            width: 100%;
            position: static;
            padding: 0 0 10px;
            margin: 0;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            header .iknow-nav .nav-sub-menu .nav-item {
                border: none;
                font-weight: normal;
                -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
                width: 50%;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                -webkit-box-flex: 0;
                -ms-flex-positive: 0;
                flex-grow: 0;
            }

                header .iknow-nav .nav-sub-menu .nav-item .nav-link {
                    color: #4A4A4A;
                }

    footer .organization {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        footer .organization div {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
            width: 100%;
        }

        footer .organization .organization-logo {
            margin-bottom: 20px;
        }

        footer .organization .organization-info > div {
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
            width: 100%;
            padding-left: 0;
        }
}


/* 基本框架 */
.iknow-ai-chat {
    min-height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
    margin: 20px auto;
    padding: 10px;
    max-width: 1200px;
    line-height: 30px;
}

    .iknow-ai-chat ul li, .iknow-ai-chat ol li, .iknow-ai-chat dl li, .iknow-ai-chat p li {
        list-style-type: disc; /* 符號為實心圓 */
        margin: 0; /* 移除外距 */
        padding-bottom: 3px;
    }

    .iknow-ai-chat ul, .iknow-ai-chat ol {
        list-style-type: disc; /* 符號為實心圓 */
        padding-left: 20px; /* 控制左邊縮排 */
        margin: 0; /* 移除外距 */
    }

        .iknow-ai-chat ul ul, .iknow-ai-chat ol ol {
            padding-left: 20px; /* 子列表多一層縮排 */
        }

    .iknow-ai-chat h1, .iknow-ai-chat h2, .iknow-ai-chat h3, .iknow-ai-chat h4, .iknow-ai-chat h5, .iknow-ai-chat h6 {
        padding-bottom: 5px;
    }

/* 輸入UI */
.iknow-ai-chat-query {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

    .iknow-ai-chat-query textarea {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 16px;
        /*font-size: 22px;*/
        max-width: 50vw;
        overflow-y: hidden;
    }

    .iknow-ai-chat-query button {
        width: 40px;
        height: 40px;
        border: none;
        color: #007bff;
        border-radius: 50%;
        cursor: pointer;
    }

        .iknow-ai-chat-query button:hover {
            background-color: #ccc;
            color: white;
        }

.iknow-ai-chat-user,
.iknow-ai-chat-system {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    width: 100%;
    font-weight: bold;
}

    /* 共同樣式：文字區 */
    .iknow-ai-chat-user .text,
    .iknow-ai-chat-system .text {
        max-width: 80%; /* 防止訊息過長 */
        padding: 8px 12px;
        border-radius: 10px;
        line-height: 1.5;
        word-break: break-word;
        flex: none;
    }

    /* 共同樣式：圖片 */
    .iknow-ai-chat-user img,
    .iknow-ai-chat-system img {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }

/* ----------------------------- */
/*   使用者提問（右邊）               */
/* ----------------------------- */
.iknow-ai-chat-user {
    justify-content: flex-end; /* 整個 li 內容靠右 */
    text-align: right; /* 文字靠右 */
}

    .iknow-ai-chat-user .text {
        background: #d1ecff;
        margin-left: auto; /* 推動文字靠右 */
    }

/* ----------------------------- */
/*   系統回答（左邊）                 */
/* ----------------------------- */
.iknow-ai-chat-system {
    justify-content: flex-start; /* 全部靠左 */
    text-align: left; /* 文字靠左 */
}

    .iknow-ai-chat-system .text {
        background: #f1f1f1;
        margin-right: auto; /* 推動文字靠左 */
    }


/* 資料來源 */
.iknow-ai-chat-article {
    padding-top: 20px;
    padding-left: 0px !important;
    padding-right: 30px;
    min-height: 80vh;
    max-height: 80vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .pc-row-mobile-column {
        flex-direction: column;
    }

    .column-main {
        order: 1;
    }

    .column-side {
        order: 2;
        width: 100%;
    }
}

.blinking-text {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.5;
    }
}

.ai-loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    border: 3px solid #ddd;
    border-top: 3px solid #555;
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes ai-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.quote {
    padding-top: 20px;
}