html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Serif TC', "Times New Roman", serif;
    overflow-x: hidden;
    color: #040000;
    background-image: url(../images/576029_body_bg.png);
    background-size: cover;
    background-attachment: fixed;
}

main {
    text-shadow: 1px 2px 1px #fff;
}

a {
    text-decoration: none;
}

.fs-18 {
    font-size: 1.125rem;
}

.text-justify {
    text-align: justify;
}

.text-warning {
    color: #d4942f !important;
}

.text-dark {
    color: #231815 !important
}

.text-danger {
    color: #b92d22 !important
}

.text-style-times {
    font-family: Georgia, "Times New Roman", Times, serif, "新細明體", "PMingLiU";
}

.bg-opacity-90 {
    --bs-bg-opacity: 0.9;
}

.z-01 {
    z-index: -1;
}

.show-content {
    height: 550px;
}

.show-content::-webkit-scrollbar {
    width: 12px;
}

.show-content::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #e4ddda;
}

.show-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #563837;
}

.social-icon .btn,
[href="#top"] {
    max-width: 60px;
}

.line {
    border-bottom: 2px dotted #4587ad;
    height: 1px;
}

h2::before {
    content: "◇";
    color: #FF9100;
    font-size: 40px;
    position: absolute;
    right: calc(100% - 20px);
    bottom: calc(100% - 20px);
}

h2::after {
    content: "◇";
    color: #325A8C;
    font-size: 30px;
    position: absolute;
    right: calc(100% - 31px);
    bottom: calc(100% - 10px);
}

.text-indent-2 {
    text-indent: 2.3rem;
}

.social-icon a,
a[href="#top"] {
    width: 80px
}

@media (max-width:991px) {
    header>div>.position-relative {
        position: static;
    }

    .offcanvas.offcanvas-top {
        height: 80vh;
    }

    hr {
        opacity: 1;
    }

}

@media (max-width:575px) {
    h2.display-5 {
        font-size: calc(1.425rem + 1.6vw);
    }

    main h2:before,
    main h2:after {
        margin: auto;
        position: static;
    }

    header h2.fs-3 {
        font-size: 1rem !important;
    }

    header h4.fs-5 {
        font-size: 1rem !important;
    }
}