/*--------------------------------------------------------------
# Font Import
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif+SC&family=Noto+Serif+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

/*--------------------------------------------------------------
# Define Variables
--------------------------------------------------------------*/
:root {
    --font-sans: 'Noto Sans TC','Noto Sans SC', 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif TC', 'Noto Serif SC', 'Noto Serif JP', serif;
    --font-emoji: 'Noto Color Emoji', sans-serif;
    --font-kalam: 'Kalam', cursive;
    --color-basic-rgb: 240, 240, 240;
    --figure-color-dark-rgb: 96, 6, 9;
    --figure-color-normal-rgb: 152, 0, 52;
    --figure-color-light-rgb: 254, 235, 205;
    --figure-color-sublight-rgb: 250, 240, 203;
    --navbar-height: 0px;
}

/*--------------------------------------------------------------
# Site Setting
--------------------------------------------------------------*/
body {
    font-family: var(--font-sans);
}

/*[data-bs-theme="dark"] a {
    color: deepskyblue;
}*/
/*--------------------------------------------------------------
# Function
--------------------------------------------------------------*/
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*--------------------------------------------------------------
# Anime
--------------------------------------------------------------*/
.zoom-in,
.zoom-in-lg,
.zoom-out {
    transition: .5s;
}

    .zoom-in:hover {
        transform: scale(1.05);
    }

    .zoom-in-lg:hover {
        transform: scale(1.5);
    }

    .zoom-out:hover {
        transform: scale(0.95);
    }

.anime-rotate-start-30:hover {
    transition: all .5s;
    transform: rotate(-30deg);
}

.anime-rotate-end-30:hover {
    transition: all .5s;
    transform: rotate(30deg);
}

.anime-editbar {
    padding-right: 1.5px;
    border-right: 1.5px solid transparent;
    animation: editbar 1s infinite;
}

@keyframes editbar {
    0%, 49.9%, 100% {
        border-right-color: rgba(0, 0, 0, .8);
    }

    50%, 99.9% {
        border-right-color: transparent;
    }
}

/*--------------------------------------------------------------
# Custom Paint
--------------------------------------------------------------*/
[data-bs-theme="light"] .latestnews {
    background-color: rgba(var(--figure-color-dark-rgb));
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

/*[data-bs-theme="dark"] .latestnews {
    background-color: rgba(var(--bs-secondary-rgb));
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}*/

.square-10 {
    width: 10rem;
    height: 10rem;
}

@media (min-width:992px) {
    .square-lg-10 {
        width: 10rem;
        height: 10rem;
    }
}

/*--------------------------------------------------------------
# Grid Layout Setting
--------------------------------------------------------------*/
.sidebar-start {
    grid-area: sidebar-start;
}

.main-wrapper {
    grid-area: main;
}

.sidebar-end {
    grid-area: sidebar-end;
    display: none !important;
}

@media (min-width: 992px) {
    .layout:has(.sidebar-start, .main-wrapper) {
        display: grid;
        grid-template-areas: "sidebar-start main";
        grid-template-columns: 3fr 9fr;
        gap: 1.5rem;
    }

    .layout:has(.sidebar-start .main-wrapper, .sidebar-end) {
        display: grid;
        grid-template-areas: "sidebar-start main sidebar-end";
        grid-template-columns: 3fr 6fr 3fr;
        gap: 1.5rem;
    }

    .sidebar-start {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--navbar-height) - 1.5rem);
        display: block !important;
        height: calc(100vh - var(--navbar-height) - .5rem);
        overflow-y: auto;
    }

    .sidebar-end {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--navbar-height) - 1.5rem);
        display: block !important;
        height: calc(100vh - var(--navbar-height) - .5rem);
        overflow-y: auto;
    }

    .main-wrapper {
        overflow: auto;
    }
}

/*--------------------------------------------------------------
# Navbar Class
--------------------------------------------------------------*/
/*[data-bs-theme="dark"] .banner {
    display: none !important;
}*/

.navbar-toggler:focus, .navbar-toggler:active, .btn-close:focus {
    outline: none;
    box-shadow: none;
}

.nav-overlay:hover:not(.active) {
    border-radius: .5em;
    background-color: rgba(255, 255, 255, .5);
}

.nav-overlay.active {
    border-bottom: 2px solid;
}

@media (min-width:992px) {
    .nav-lg-overlay:hover:not(.active) {
        border-radius: .5em;
        background-color: rgba(255, 255, 255, .5);
    }

    .nav-lg-overlay.active {
        border-bottom: 2px solid;
    }
}

/*--------------------------------------------------------------
# Card Class
--------------------------------------------------------------*/
/*[data-bs-theme="dark"] .card {
    --bs-border-opacity: 1;
    border-color: rgba(74, 74, 74, var(--bs-border-opacity)) !important;
    --bs-bg-opacity: 1;
    background-color: rgba(31, 31, 31, var(--bs-bg-opacity)) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    --bs-bg-opacity: 1;
    background-color: rgba(45, 46, 48, var(--bs-bg-opacity)) !important;
}

[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-image {
    --bs-bg-opacity: 1;
    background-color: rgba(63, 63, 63, var(--bs-bg-opacity)) !important;
}*/

/*--------------------------------------------------------------
# Dropdown Class
--------------------------------------------------------------*/
.dropdown-item:hover {
    background-color: rgba(255,255,255, .5) !important;
}

/*--------------------------------------------------------------
# Button Class
--------------------------------------------------------------*/
.btn-figure-normal {
    background: rgba(var(--figure-color-normal-rgb)) !important;
    border-color: rgba(var(--figure-color-normal-rgb)) !important;
    color: white !important;
}

    .btn-figure-normal:hover,
    .btn-figure-normal:active {
        background: rgba(var(--figure-color-dark-rgb)) !important;
        border-color: rgba(var(--figure-color-dark-rgb)) !important;
        color: white !important;
    }

.btn-outline-figure-normal {
    border-color: rgba(var(--figure-color-normal-rgb)) !important;
    color: rgba(var(--figure-color-normal-rgb)) !important;
}

    .btn-outline-figure-normal:hover,
    .btn-outline-figure-normal:active {
        border-color: rgba(var(--figure-color-dark-rgb)) !important;
        background-color: rgba(var(--figure-color-dark-rgb)) !important;
        color: white !important;
    }

/*[data-bs-theme="dark"] .btn-outline-figure-normal {
    border-color: rgba(var(--figure-color-light-rgb)) !important;
    color: rgba(var(--figure-color-light-rgb)) !important;
}*/

/*    [data-bs-theme="dark"] .btn-outline-figure-normal:hover,
    [data-bs-theme="dark"] .btn-outline-figure-normal:active {
        border-color: rgba(var(--figure-color-light-rgb)) !important;
        background-color: rgba(var(--figure-color-light-rgb)) !important;
        color: rgba(var(--figure-color-dark-rgb)) !important;
    }*/

/*--------------------------------------------------------------
# Tooltips
--------------------------------------------------------------*/
.custom-tooltip {
    --bs-tooltip-bg: rgba(var(--figure-color-dark-rgb));
    --bs-tooltip-color: var(--bs-white);
    word-break: keep-all !important;
}

/*--------------------------------------------------------------
# Height Class
--------------------------------------------------------------*/
.h-page {
    min-height: 500px !important;
    height: calc(100vh - var(--navbar-height)) !important;
}

@media (min-width:768px) {
    .h-md-page {
        min-height: 550px !important;
        height: calc(100vh - var(--navbar-height)) !important;
    }
}

@media (min-width:992px) {
    .h-lg-page {
        min-height: 600px !important;
        height: calc(100vh - var(--navbar-height)) !important;
    }
}

/*--------------------------------------------------------------
# Border Class
--------------------------------------------------------------*/
.border-figure-dark {
    --bs-border-opacity: 1;
    border-color: rgba(var(--figure-color-dark-rgb), var(--bs-border-opacity)) !important;
}

/*[data-bs-theme="dark"] .border-figure-dark {
    --bs-border-opacity: 1;
    border-color: rgba(90, 90, 90, var(--bs-border-opacity)) !important;
}*/

.border-figure-normal {
    --bs-border-opacity: 1;
    border-color: rgba(var(--figure-color-normal-rgb), var(--bs-border-opacity)) !important;
}

/*[data-bs-theme="dark"] .border-figure-normal {
    --bs-border-opacity: 1;
    border-color: rgba(223, 223, 223, var(--bs-border-opacity)) !important;
}*/

/*--------------------------------------------------------------
# Background Class
--------------------------------------------------------------*/
.bg-basic {
    background-color: rgba(var(--color-basic-rgb)) !important;
}

/*[data-bs-theme="dark"] .bg-basic {
    --bs-bg-opacity: 1;
    background-color: rgba(45, 46, 48, var(--bs-bg-opacity)) !important;
}*/

.bg-grid {
    background: linear-gradient(90deg, rgba(255, 255, 255) 5%, transparent 0), linear-gradient(rgba(255,255,255) 5%, transparent 0);
    background-color: rgba(var(--color-basic-rgb));
    background-size: 30px 30px;
}

.bg-figure-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--figure-color-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-figure-normal {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--figure-color-normal-rgb), var(--bs-bg-opacity)) !important;
}

.bg-figure-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--figure-color-light-rgb), var(--bs-bg-opacity)) !important;
}

/*[data-bs-theme="dark"] .bg-figure-light {
    --bs-bg-opacity: 1;
    background-color: rgba(31, 31, 31, var(--bs-bg-opacity)) !important;
}*/

.bg-figure-sublight {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--figure-color-sublight-rgb), var(--bs-bg-opacity)) !important;
}

/*[data-bs-theme="dark"] .bg-figure-sublight {
    --bs-bg-opacity: 1;
    background-color: rgba(45, 46, 48, var(--bs-bg-opacity)) !important;
}*/

@media (min-width:768px) {
    .bg-md-basic {
        background-color: rgba(var(--color-basic-rgb)) !important;
    }
}

@media (min-width:992px) {
    .bg-lg-figure-sublight {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--figure-color-sublight-rgb), var(--bs-bg-opacity)) !important;
    }
}

/*--------------------------------------------------------------
# Text Class
--------------------------------------------------------------*/
.text-basic {
    --bs-text-opacity: 1;
    color: rgba(0, 0, 0, var(--bs-text-opacity));
}

/*[data-bs-theme="dark"] .text-basic {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, var(--bs-text-opacity));
}*/

.text-figure-light {
    --bs-text-opacity: 1;
    color: rgba(var(--figure-color-light-rgb), var(--bs-text-opacity));
}

.text-figure-normal {
    --bs-text-opacity: 1;
    color: rgba(var(--figure-color-normal-rgb), var(--bs-text-opacity));
}

/*[data-bs-theme="dark"] .text-figure-normal {
    --bs-text-opacity: 1;
    color: rgba(223, 223, 223, var(--bs-text-opacity));
}*/

.text-figure-dark {
    --bs-text-opacity: 1;
    color: rgba(var(--figure-color-dark-rgb),var(--bs-text-opacity));
}

/*[data-bs-theme="dark"] .text-figure-dark {
    --bs-text-opacity: 1;
    color: rgba(223, 223, 223, var(--bs-text-opacity));
}*/

.collapse-text-figure {
    --bs-text-opacity: 1;
    color: rgba(var(--figure-color-normal-rgb), var(--bs-text-opacity));
}

    .collapse-text-figure:not(.collapsed) {
        --bs-text-opacity: 1;
        color: rgba(var(--figure-color-dark-rgb), var(--bs-text-opacity));
        font-weight: bold;
    }

/*[data-bs-theme="dark"] .collapse-text-figure {
    --bs-text-opacity: 1;
    color: rgba(223, 223, 223, var(--bs-text-opacity));
}*/

    /*[data-bs-theme="dark"] .collapse-text-figure:not(.collapsed) {
        --bs-text-opacity: 1;
        color: rgba(148, 148, 148, var(--bs-text-opacity));
        font-weight: bold;
    }*/

/*--------------------------------------------------------------
# Font Class
--------------------------------------------------------------*/
.ft-sans {
    font-family: var(--font-sans);
}

.ft-serif {
    font-family: var(--font-serif);
}

.ft-kalam {
    font-family: var(--font-kalam);
}

.ft-emoji {
    font-family: var(--font-emoji);
}

@media (min-width:768px) {
    .fs-md-5c {
        font-size: 1.125rem !important;
    }
}

/*--------------------------------------------------------------
# Padding Class
--------------------------------------------------------------*/
.pt-nav {
    padding-top: var(--navbar-height);
}

/*--------------------------------------------------------------
# Margin Class
--------------------------------------------------------------*/
.mt-nav {
    margin-top: var(--navbar-height);
}

@media (min-width:992px) {
    .mt-lg-nav {
        margin-top: var(--navbar-height);
    }
}

/*--------------------------------------------------------------
# Unknown Class
--------------------------------------------------------------*/
.input-hide-noselect {
    color: transparent;
}

.img-wrapper:has(.img-file[src=""]) {
    display: none !important;
}

.img-file[src=""] {
    display: none;
}

.rm-accordion-button.accordion-button:not(.collapsed)::after {
    background-image: unset;
}

.rm-accordion-button.accordion-button.collapsed::after {
    background-image: unset;
}

.rm-accordion-button.accordion-button:not(.collapsed) {
    background-color: unset;
}

@media (min-width: 992px) {
    .img-h-fluid-lg {
        max-height: 100%;
        width: auto;
    }
}

@media screen and (orientation: portrait) and (max-width:767px) {
}

@media screen and (orientation: landscape) and (max-width:767px) {

    .d-mobile-ol-none {
        display: none;
    }

    .d-mobile-ol-block {
        display: block !important;
    }
}

/*--------------------------------------------------------------
# Scrollbar
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hidden Search Bar Setting
--------------------------------------------------------------*/
.hidden-search-bar {
    width: 2em;
    height: 2em;
    border-radius: 50rem !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: center !important;
    transition: all 1s;
}

    .hidden-search-bar:focus,
    .hidden-search-bar[placeholder]:not(:placeholder-shown) {
        width: auto !important;
        background-position: 10px center !important;
        padding-left: 2.375rem !important;
    }

@media (min-width: 992px) {
    .hidden-search-bar:focus,
    .hidden-search-bar[placeholder]:not(:placeholder-shown) {
        width: auto !important;
        background-position: 10px center !important;
        padding-left: 2.375rem !important;
    }
}


/*--------------------------------------------------------------
# Search Bar Setting
--------------------------------------------------------------*/
.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    border: 1px solid;
    width: 100%;
    height: fit-content;
    transition: 0.25s;
}

    .search-bar i {
        display: flex;
    }

        .search-bar i.bi-search {
            padding-right: 0.25em;
        }

    .search-bar input {
        width: 100%;
        background: unset;
        border: unset;
    }

    .search-bar:hover input {
        outline: none;
    }

    .search-bar input:focus {
        outline: none;
    }

    .search-bar:hover,
    .search-bar:focus {
    }

    .search-bar:has(input:-webkit-autofill) {
        background-color: rgba(0,0,0,.3);
    }

    .search-bar input:-webkit-autofill,
    .search-bar input:-webkit-autofill:hover,
    .search-bar input:-webkit-autofill:focus,
    .search-bar input:-webkit-autofill:active {
        -webkit-background-clip: text;
        -webkit-text-fill-color: white !important;
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 20px 20px none;
    }

/*--------------------------------------------------------------
# Bookmark
--------------------------------------------------------------*/
@media (min-width: 991px) {
    .bookmark-left, .bookmark-right {
        height: calc(100vh - var(--navbar-height));
    }
}

/*--------------------------------------------------------------
# Custom Css
--------------------------------------------------------------*/
.latestnews-content a {
    font-weight: bold;
    text-decoration: underline green;
    word-break: break-all;
}

/*--------------------------------------------------------------
# float-title
--------------------------------------------------------------*/
.float-title-right {
}

/*--------------------------------------------------------------
# floating-label
--------------------------------------------------------------*/
[dir=rtl] .floating-label > input ~ label,
[dir=rtl] .floating-label > select + label {
    right: 0;
    left: auto !important;
}

[dir=rtl] .floating-label > input:not([placeholder]):not([value]) ~ label,
[dir=rtl] .floating-label > select + label {
    right: 0.5rem;
    left: auto !important;
}

.floating-label {
    position: relative;
}

    .floating-label > input ~ label,
    .floating-label > textarea ~ label,
    .floating-label > select + label {
        position: absolute;
        z-index: 5;
        max-width: calc(100% - $input-border-width * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        top: var(--bs-border-width);
        left: var(--bs-border-width);
        font-size: 1rem;
        padding: .295em .75em;
        color: gray;
        pointer-events: none;
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .floating-label > input::placeholder,
    .floating-label > textarea::placeholder {
        color: transparent;
        transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }

        .floating-label > input::placeholder ~ label,
        .floating-label > textarea::placeholder ~ label {
            color: gray;
        }

    .floating-label > input:focus::placeholder,
    .floating-label > textarea:focus::placeholder {
        color: gray;
    }

    .floating-label > input:focus ~ label,
    .floating-label > textarea:focus ~ label,
    .floating-label > select:focus + label {
        position: absolute;
        z-index: 5;
        max-width: calc(100% - $input-border-width * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 0.5rem;
        padding: 0 0.3rem;
        line-height: 1.25;
        color: inherit;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }

    .floating-label > input:focus ~ label,
    .floating-label > textarea:focus ~ label,
    .floating-label > select:focus + label {
        top: -0.65625rem;
        font-size: 0.875rem;
    }

    .floating-label > input:-webkit-autofill ~ label,
    .floating-label > textarea:-webkit-autofill ~ label,
    .floating-label > select:-webkit-autofill + label {
        position: absolute;
        z-index: 5;
        max-width: calc(100% - $input-border-width * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 0.5rem;
        padding: 0 0.3rem;
        line-height: 1.25;
        color: inherit;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }

    .floating-label > input:-webkit-autofill ~ label,
    .floating-label > textarea:-webkit-autofill ~ label,
    .floating-label > select:-webkit-autofill + label {
        top: -0.65625rem;
        font-size: 0.875rem;
    }

    .floating-label > input[placeholder]:not(:placeholder-shown) ~ label,
    .floating-label > textarea[placeholder]:not(:placeholder-shown) ~ label {
        position: absolute;
        z-index: 5;
        max-width: calc(100% - $input-border-width * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 0.5rem;
        padding: 0 0.3rem;
        line-height: 1.25;
        color: inherit;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }

    .floating-label > input[placeholder]:not(:placeholder-shown) ~ label,
    .floating-label > textarea[placeholder]:not(:placeholder-shown) ~ label {
        top: -0.65625rem;
        font-size: 0.875rem;
    }

    .floating-label > input:not([placeholder]):not([value]) ~ label,
    .floating-label > textarea:not([placeholder]):not([value]) ~ label,
    .floating-label > select ~ label,
    .floating-label > select ~ span ~ label,
    .floating-label > div ~ label {
        position: absolute;
        z-index: 5;
        max-width: calc(100% - $input-border-width * 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 0.5rem;
        padding: 0 0.3rem;
        line-height: 1.25;
        color: inherit;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }

    .floating-label > input:not([placeholder]):not([value]) ~ label,
    .floating-label > textarea:not([placeholder]):not([value]) ~ label,
    .floating-label > select ~ label,
    .floating-label > select ~ span ~ label,
    .floating-label > div ~ label {
        top: -0.65625rem;
        font-size: 0.875rem;
    }