/* 深色模式切換按鈕樣式 */
.dark-mode-toggle {
    position: fixed;
    right: 0; /* 緊貼右側 */
    top: 50%; /* 距離頂部 50% */
    width: 50px;
    height: 50px;
    background-color: #6868AC; /* 按鈕顏色 */
    border-radius: 25px 0 0 25px; /* 左上和左下圓角 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加陰影 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
}

.dark-mode-toggle i {
    font-size: 20px;
    color: #fff;
}

/* 夜間模式切換樣式 */
body.dark-mode {
    --mainColor: #F7C600;
    --subColor: #4D4D8C;
    --menuTxt: #BCC0C5;
    --pageTxt: #E0E5E9;

    /* Bootstrap 色碼 */
    --bs-primary: #F2B800;
    --bs-secondary: #F1C40F;
    --bs-success: #F2B800;
    --bs-warning: #B0B0B0;
    --bs-danger: #E74C3C;
    --bs-light: #B59B6D;
    --bs-dark: #F8F9FA;
    --bs-info: #17a2b8;
    --bs-body-color: #E0E5E9;

    /* 灰色系列 */
    --bs-gray-100: #212529;
    --bs-gray-200: #343a40;
    --bs-gray-300: #495057;
    --bs-gray-400: #6c757d;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
}

body.dark-mode .dark-mode-toggle {
    background-color: #FFE602;
}

body.dark-mode .dark-mode-toggle i {
    color: black;
}

body.dark-mode header {
    background: #6868AC;
}

body.dark-mode .nav-list-items .nav-list-item a {
    color: var(--pageTxt);
}

body.dark-mode .btnStyle:hover {
    border:1px solid #FFE602;
}

body.dark-mode .pagination>li a {
    color: #fff;
}

body.dark-mode .pagination>li.on a {
    background: #6868AC !important;
    color: #fff;
}

body.dark-mode .announce-zone .container .announcement-push-block.d-flex.justify-content-center .announce-box.align-items-center {
    color: #fff !important;
    background-color: rgb(104 104 172 / 30%);
    border: 1px solid #6868AC;
    border-right: none;
    transition: .5s;
}

.announce-box {
    transition: .5s;
}

#prevButton, #nextButton {
    transition: .5s;
}

body.dark-mode .announce-zone .container .announcement-push-block.d-flex.justify-content-center .announce-box.align-items-center .icon {
        filter: grayscale(100%) invert(100%);
        transition: filter 0.5s;
}

body.dark-mode .announce-zone .container .announcement-push-block.d-flex.justify-content-center .push-p.d-flex.align-items-center.m-auto .p-detail:hover {
    background-color: #6868AC !important;
    color: var(--pageTxt);
}

body.dark-mode .mainTit {
    color: #FFE602;
}

body.dark-mode .gsc-search-button-v2 svg {
    fill: #fff !important;
}

body.dark-mode .gsc-search-button-v2:hover svg {
    fill: #212529 !important;
}


body.dark-mode .gsc-search-button-v2 svg:hover {
    fill: #212529 !important;
}

body.dark-mode .gsc-search-button-v2:hover {
    border-color: #6868AC;
    background-color: #fff;
}

body.dark-mode .gsc-search-button-v2:focus {
    border-color: #6868AC;
    background-color: #fff;
}

body.dark-mode .gsc-search-button-v2 {
    border-color: #6868AC;
    background-color: #6868AC;
}

body.dark-mode .hot-key a {
    color: #FFE602;
}

body.dark-mode .container-fluid.p-0 .announce-zone .container .announcement-push-block.d-flex.justify-content-center .push-button-block.d-flex.flex-column button {
    background-color: rgb(104 104 172 / 30%) !important;
    color: #fff !important;
    border-color: #6868AC !important;
}

body.dark-mode .container-fluid.p-0 .announce-zone .container .announcement-push-block.d-flex.justify-content-center .push-button-block.d-flex.flex-column button:hover {
    background-color: rgb(104 104 172 / 30%) !important;
    border: 1px solid #6868AC !important;
}

body.dark-mode .caseTab__item[aria-selected="true"] {
    background: #6868AC;
    color: #fff !important;
}

body.dark-mode a:focus, button:focus, input:focus, select:focus, textarea:focus, .spotImgNav__box:focus {
    outline: 3px dotted var(--subColor)!important;
  }

body.dark-mode .mainTit--black {
    color:var(--pageTxt);
}

body.dark-mode {
    background-color: var(--bs-gray-100);
}

body.dark-mode .main-title {
    color: #FFE602;
}

body.dark-mode .nav-t-container-bar a {
    color: var(--pageTxt);
}

body.dark-mode .nav-t-container-bar a:hover {
    color: #000;
}

body.dark-mode .nav-t-container-font-size .font-size {
    color: var(--pageTxt);
}

body.dark-mode .nav-image {
    filter: invert(1); /* 將黑色反轉為白色 */
}

body.dark-mode .main-title {
    color: #FFE602;
}

body.dark-mode .nav-link.text-center {
    color: var(--pageTxt);
}

body.dark-mode .nav-link.text-center:hover .nav-text {
    color: #212529 !important;
}

body.dark-mode .nav-link.text-center.default-menu {
    color: #3D444F !important;
}

body.dark-mode .nav-text:hover {
    color: #000;
}

body.dark-mode .nav-text:active {
    color: #000;
}

body.dark-mode .text-black-50 {
    color: var(--pageTxt) !important;
}


body.dark-mode .nav-b-item:last-of-type:before {
    background: var(--pageTxt);
}

body.dark-mode .dark-mode-toggle i {
    color: black;
}

.page-number {
    margin-bottom: 50px;
}

body.dark-mode .foot-link-block a {
    color: var(--pageTxt);
}

body.dark-mode .foot-link-block a:hover {
    color: #6868AC;
}

.banner-box {
    margin-top: 50px;
}

body.dark-mode .banner {
    background: #6868AC;
}

body.dark-mode .overlay {
    background-color: #6868AC;
}

body.dark-mode .main-title.h2 {
    color: #FFE602;
}

body.dark-mode .btnStyle {
    color: #fff;
    background-color: #6868AC;
    border: 1px solid #6868AC;
}

body.dark-mode .btnStyle:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid #6868AC;
}

body.dark-mode .changeBox.active {
    color: #fff !important;
    background-color: #6868AC;
}

body.dark-mode .tw-title {
    color: #fff;
}

body.dark-mode .en-title {
    color: #fff;
}

body.dark-mode .sm-title {
    color: var(--pageTxt);
}

body.dark-mode .ans-box label {
    color: var(--pageTxt);
}

body.dark-mode .gridZone .text-center {
    color: var(--pageTxt);
}

body.dark-mode .btn-style {
    background-color: #6868AC;
    border: 1px solid #6868AC;
    color: #fff;
}

body.dark-mode .btn-style:hover {
    background-color: #fff;
    border: 1px solid #6868AC;
    color: #000;
}

body.dark-mode .txt-mid span {
    color: var(--pageTxt);
}

body.dark-mode .txt-mid a {
    color: #FFE602;
}

body.dark-mode .event-name {
    color: var(--pageTxt);
}

body.dark-mode .event-intro {
    color: var(--pageTxt);
}

body.dark-mode .detailName-en {
    color: #fff;
}

body.dark-mode .detail-content.txt a {
    color: var(--pageTxt);
}

body.dark-mode .detail-content.txt p {
    color: var(--pageTxt);
}

body.dark-mode .text-end .date {
    color: var(--pageTxt);
}

body.dark-mode #C {
    color: var(--pageTxt);
}

body.dark-mode .foot-link-right a {
    color: var(--pageTxt);
}

body.dark-mode .foot-link-right a .icon {
    background-color: var(--pageTxt);
}

.box-name {
    color: #212529;
}

body.dark-mode .news-list a {
    color: var(--pageTxt);
}

body.dark-mode .news-list span {
    color: var(--pageTxt);
}

body.dark-mode .nav-list-item-link:before {
    background: var(--pageTxt);
}

body.dark-mode .nav-list-item:last-child .nav-list-item-link:after {
    background: var(--pageTxt);
}

body.dark-mode .box-left a {
    background: #6868AC;
    color: var(--pageTxt);
    border: 1px solid #6868AC;
}

body.dark-mode .box-left a:hover {
    background: #fff;
    color: #6868AC;
    border: 1px solid #6868AC;
}

body.dark-mode .box-name {
    color: #000;
}

body.dark-mode .en {
    color: #000;
}

body.dark-mode .breadCrumbs .item a {
    color: var(--bs-gray-500);
}


body.dark-mode .breadCrumbs-block .breadCrumbs .item:after {
    color: var(--bs-gray-500);
}

body.dark-mode .breadCrumbs-block .breadCrumbs .item.active a {
    color: var(--bs-light);
}

.galleryInfo {
    background-color: transparent;
}

.galleryBox__inner .num {
    color: #212529;
}

body.dark-mode .galleryBox__inner .num {
    color: var(--bs-gray-500);
}

body.dark-mode .nav-list-item a:hover {
    color: var(--subColor);
}

.detailName {
    color: #212529;
}

body.dark-mode .detailName {
    color: var(--pageTxt);
}

hr {
    color: var(--bs-gray-700);
}

body.dark-mode hr {
    color: var(--menuTxt);
}

body.dark-mode .detailContent p {
   color: var(--pageTxt);
}

body.dark-mode .infoBtm .tags {
    color: #FFE602 !important;
}

body.dark-mode .infoBtm .tags a {
    color: #FFE602 !important;
}

body.dark-mode .galleryBox .galleryBox__inner .galleryInfo .infoBtm .tags a {
    color: #1F4F7F !important;
}

body.dark-mode .underline {
    color: #FFE602;
}

body.dark-mode .news-list span:hover {
    color: var(--bs-gray-100);
    background-color: #FFE602;
}

body.dark-mode .news-list p:hover {
    color: var(--bs-gray-100);
    background-color: #FFE602;
}

body.dark-mode .searchResult.container .gridZone.example-research.container.gridZone--end .galleryBox .galleryBox__inner .galleryInfo .txt p {
    color: #212529 !important;
}

.smTit {
    color: #212529;
}

body.dark-mode .smTit {
    color: var(--pageTxt);
}

.text-center small {
    color: #212529;
}

body.dark-mode .text-center small {
    color: var(--pageTxt);
}

.ansBox label {
    color: #212529;
}

body.dark-mode .ansBox label {
    color: var(--pageTxt);
}

.txt--mid span {
    color: #212529;
}

body.dark-mode .txt--mid span {
    color: var(--pageTxt);
}

figure {
    color: #212529;
}

body.dark-mode figure {
    color: var(--pageTxt);
}

.caseName {
    color: var(--pageTxt);
}

body.dark-mode .caseName {
    color: var(--pageTxt);
}

.otherBtn i{
    color: #212529;
}

body.dark-mode .otherBtn i {
    color: var(--pageTxt);
}

body.dark-mode .otherBtn {
    color: var(--pageTxt) !important;
}

.caseIntro {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-mode .caseIntro {
    background: rgba(255, 255, 255, 0.8);
}

.caseTit strong {
    color: #212529;
}

body.dark-mode .caseTit strong {
    color: var(--pageTxt);
}

body.dark-mode .txt strong {
    color: var(--pageTxt);
}

body.dark-mode .tabChangeBtn {
    color: var(--pageTxt) !important;
}

.caseName {
    color: #212529;
}

.gridZone p strong {
    color: #212529;
}

body.dark-mode .gridZone p strong {
    color: var(--pageTxt);
}

.article-p {
    color: #212529;
}

body.dark-mode .article-p {
    color: var(--pageTxt);
}

body.dark-mode .tags .mt-2 {
    color: var(--pageTxt);
}

.listStyle li {
    color: #212529;
}

body.dark-mode .listStyle li {
    color: var(--pageTxt);
}

body.dark-mode .listStyle li a {
    color: var(--pageTxt);
}

.notFoundTitle h1 {
    color: #212529;
}

body.dark-mode .event-tab-item {
    color: var(--pageTxt);
}

body.dark-mode .bannerBox .text-center {
    color: var(--pageTxt) !important;
}

body.dark-mode .gray {
    color: var(--pageTxt) !important;
}

.gallery-info .date {
    color: #212529 !important;
}

body.dark-mode .MsoTableGrid td {
    border-color: var(--pageTxt) !important;
}

body.dark-mode .newsLink span {
    color: var(--pageTxt);
}

body.dark-mode .newsLink p {
    color: var(--pageTxt);
}

body.dark-mode .newsLink p:hover {
    background-color: #FFE602;
    color: #212529;
}

body.dark-mode .nav-list-items {
    border-bottom: 1px solid rgb(255 255 255 / 30%);
}

body.dark-mode .gallery-box .gallery-info .list-name {
    color: #212529;
}

body.dark-mode .gallery-box .gallery-info .txt {
    color: #212529;
}

body.dark-mode .gridZone--end .galleryBox .galleryBox__inner .galleryInfo {
    color: #212529;
}

body.dark-mode .caseTit strong {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .articleContent .container .children-article-content.mt-5.txt p strong {
    color: var(--pageTxt);
}

.blockHeight .articleContent .container .children-article-content.mt-5.txt .Standard strong span {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .searchResult .container .gridZone.default.gridZone--end .galleryBox .galleryBox__inner .galleryInfo .date {
    color: #212529;
}

body.dark-mode .blockHeight .searchResult .container .gridZone.default.gridZone--end .galleryBox .galleryBox__inner .galleryInfo .txt.d-flex.justify-content-between p {
    color: #212529;
}

body.dark-mode .blockHeight .articleContent .container .children-article-content.mt-5.txt ul li span {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .articleContent .container .children-article-content.mt-5.txt .children-article-content.mt-5.txt .ftn5 .MsoFootnoteText {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .articleContent .container .children-article-content.mt-5.txt p span {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .articleContent .container .children-article-content table tr td span {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight  .articleContent .container .detailContent.txt table thead tr th {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight  .articleContent .container .detailContent.txt table tbody tr td {
    color: var(--pageTxt);
}

body.dark-mode .blockHeight .articleContent .container .detailContent.txt table td span {
    color: var(--pageTxt) !important;
}

body.dark-mode .galleryBox.container .galleryBox__inner .galleryInfo .content-button-container p {
    color: var(--pageTxt) !important;
}

body.dark-mode .block-height .container .grid-zone.gridZone--news .news-box .news-list li a .date {
    color: var(--pageTxt) !important;
}

body.dark-mode .blockHeight .articleContent .detailContent.txt ul li {
    color: var(--pageTxt) !important;
}

body.dark-mode .blockHeight .articleContent .detailContent.txt ol li {
    color: var(--pageTxt) !important;
}

body.dark-mode .block-height .container .grid-zone.gridZone--news .news-box .news-list li a .date:hover {
    color: #212529 !important;
}

body.dark-mode .block-height .container .slider.single-item.banner-style.slick-initialized.slick-slider .slick-list.draggable .tip-slick-track .tip-banner-box .banner-box-inner .box-right .txt {
    color: var(--pageTxt) !important;
}

body.dark-mode .blockHeight .articleContent .container .txt ol li {
    color: var(--pageTxt) !important;
}

body.dark-mode .bg-normal {
    color: #212529;
}

body.dark-mode .video-content {
    background-color: #fff;
}

body.dark-mode .box-left .en {
    color: #212529;
}

body.dark-mode .box-right .txt {
    color: var(--pageTxt);
}

body.dark-mode .gridBox--video {
    background-color: #fff;
}

body.dark-mode .detailContent ol li span {
    color: var(--pageTxt);
}

body.dark-mode li::marker {
    color: var(--pageTxt);
}

body.dark-mode .gsc-control-cse {
    background-color: none;
    border: none;
}

/* dark-mode 的樣式 */
body.dark-mode .banner-style .slick-next {
    background-color: #6868AC; /* 紫色背景 */
}

body.dark-mode .banner-style .slick-next:before {
    filter: invert(1); /* 將圖片顏色反轉 */
}

/* dark-mode 的樣式 */
body.dark-mode .banner-style .slick-prev {
    background-color: #6868AC; /* 紫色背景 */
}

body.dark-mode .banner-style .slick-prev:before {
    filter: invert(1); /* 將圖片顏色反轉 */
}

body.dark-mode .attachment ul li {
    background-color: rgb(104 104 172 / 30%);
}

body.dark-mode .attachment ul li:hover {
    background-color: rgb(104 104 172 / 50%);
}

body.dark-mode .attachment a {
    color: var(--pageTxt) !important;
}

body.dark-mode .caseContent__inner .txt p {
    color: var(--pageTxt);
}

body.dark-mode .caseContent__inner .txt li {
    color: var(--pageTxt);
}

body.dark-mode .footer-info a:hover {
    color: #212529;
    background-color: #fff;
}

body.dark-mode .searchResult.container .articleSearch .gridZone.article-search.container.gridZone--end .galleryBox .galleryBox__inner .galleryInfo .txt.article-txt.d-flex.justify-content-between.mb-2 p {
    color: #212529;
}

body.dark-mode .searchResult .container .gridZone.gridZone--start .galleryBox.container .galleryBox__inner .galleryInfo .txt p {
    color: var(--pageTxt);
}

body.dark-mode .searchResult.container .gridZone.gridZone--start .galleryBox.container .galleryBox__inner .galleryInfo .txt.d-flex.justify-content-between.align-items-center p {
    color: var(--pageTxt);
}

body.dark-mode .accesskey {
    color: #fff;
}

body.dark-mode .display-button {
    color: #fff;
    border: 1px solid #fff;
}

.breadCrumbs-block .breadCrumbs .item.active a {
    color: #6868AC !important;
}

body.dark-mode .newsLink .date:hover {
    background-color: #FFE602;
    color: #212529;
}

body.dark-mode .detailContent.txt figcaption span {
    color: var(--pageTxt);
}

body.dark-mode .detailContent.txt mark strong {
    color: #000;
}

body.dark-mode .pw-post-body-paragraph img {
    filter: invert(1); /* 將圖片顏色反轉 */
}

body.dark-mode table h4 strong {
    color: #000 !important;
}

body.dark-mode table p strong a {
    color: #000 !important;
}

body.dark-mode table pre {
    color: #000 !important;
}

body.dark-mode .nav-b-container .nav-text:hover {
    color: #212529;
}

body.dark-mode .nav-b-container .nav-text:active {
    color: #212529 !important;
}

#goTop {
    color: #000 !important;
}

#goTop:hover {
    background-color: #d9d9d9 !important;
}

body.dark-mode .nav-b-container .nav-text:hover {
    color: #333;
}

body.dark-mode .searchResult.container .boxLeft .boxName {
    color: #000;
}

body.dark-mode .gsc-completion-container .gssb .gsq table td {
    color: #333 !important;
}

body.dark-mode .blockHeight .container .listStyle.listStyle--line.listStyle--type-none li a:hover {
    background-color: rgba(104, 104, 172, 0.6);
}

body.dark-mode .blockHeight .container .listStyle.listStyle--line.listStyle--type-none li a .links-date {
    background-color: #6868AC;
    color: #fff;
}

body.dark-mode .blockHeight .container .listStyle.listStyle--line.listStyle--type-none li a p {
    color: var(--pageTxt) !important;
}

.caseIntro {
    background-color: rgb(255 255 255 / 80%) !important;
}

body.dark-mode .caseIntro .caseLeft .bigTxt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseLeft .txt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseRight .bigTxt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseRight .caseList li span {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .txt p {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .date {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .infoBtm .tags a {
    color: #1F4F7F !important;
}

.tagSearch .bannerBox .btnStyle--white {
    color: #000 !important;
    background: #FFE602;
}

body.dark-mode .gsc-completion-container span {
    color: #212529 !important;
}

@media (max-width: 900px) {
    body.dark-mode .nav-b-container {
        background-color: #6868AC;
    }
}