@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

* {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

body {
    background-color: #FFF;
    background-image: url(../img/banner-bg.png);
    background-repeat: no-repeat;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

html.small {
    font-size: 0.9rem;
}

html.medium {
    font-size: 1.1rem;
}

html.large {
    font-size: 1.25rem;
}

a {
    color: #1A1B1E;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #4A5565;
}

a:active {
    text-decoration: none;
    color: #4A5565;
}

.color-bar {
    height: 10px;
    background: #ECB49D;
}

hr {
    color: #B2B2B2;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multiline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tripleline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.form-check {
    min-height: 2.2rem;
}

.other-check {
    margin-left: 2px;
}

.fs--1 {
    font-size: 0.8rem;
}

.fc-white {
    color: #FFF;
}

.fc-gray {
    color: #C9C9C9;
}

.fc-purple {
    color: #2229B5;
}

.fc-ored {
    color: #F56962;
}

.fc-blue {
    color: #7BB8E0;
}

.fc-darkblue {
    color: #38536D;
}

.fc-yellow {
    color: #F9D440;
}

.fc-red {
    color: red;
}

.fc-orange {
    color: #ED6F30;
}

.fc-green {
    color: #2DA7A4;
}

.fc-darkgray {
    color: #535353;
}

.bg-green {
    background-color: #2DA7A4;
}

.bg-gray {
    background-color: #FCFCFD;
}

.bg-yellow {
    background-color: #FFF9E1;
}

.bg-orange {
    background-color: #DE764C;
}

.bg-transparent {
    background-color: transparent;
}

.bg-lightpink {
    background-color: #FFF3F5;
}

.bg-purple {
    background-color: #8D2ECE !important;
}

.btn-primary {
    color: #FFF;
    background-color: #ED6F30;
    border-color: #ED6F30;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #FFF;
    background-color: #af3e06;
    border-color: #af3e06;
}

.btn-outline-primary {
    color: #ED6F30;
    border-color: #ED6F30;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: #d34b07;
    border-color: #d34b07;
}

.btn-outline-secondary {
    color: #000;
}

.btn {
    font-size: 1.05rem;
}

.btn-main {
    color: #000;
    background-color: #FFE775;
    border-color: #FFE775;
}

.btn-main:hover,
.btn-main:focus {
    color: #38331A;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn-main02 {
    color: #000;
    background: #FFE77542;
    border: 1px solid #FBD72A
}

.btn-main02:hover,
.btn-main02:focus {
    color: #000;
    background-color: #FBD72A;
    border-color: #FBD72A;
}

.form-control,
.form-select,
textarea {
    border: 1.17px solid #BDBDBD;
    border-radius: 12px;
    box-shadow: 0px 2.34px 11.72px -5.86px #00000040;
    padding: 0.75rem 0.75rem;
}

/*modal*/
.modal-header {
    background-color: #FDD469;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
}

.modal-header .modal-title {
    color: #000;
}

.modal-header .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-content {
    border-radius: 23px;
}

.nw-linkbox {
    list-style: none;
    display: flex;
    justify-content: center;
}

.nw-linkbox li a {
    color: #707070;
}

.nw-linkbox li::after {
    content: "|";
    color: #A8A8A8;
    position: relative;
    margin-left: 6px;
    margin-right: 6px;
}

.nw-linkbox li:nth-last-child(1)::after {
    content: none;
}

/*table*/
.table-main {
    --bs-table-bg: #FFF5CE;
    --bs-table-striped-bg: #ddd9c6;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #DDDDDD;
}

.table-main02 {
    --bs-table-bg: #FFF0E1;
    --bs-table-striped-bg: #ddd9c6;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #DDDDDD;
}

.table-main03 {
    --bs-table-bg: #F4F7FA;
    --bs-table-striped-bg: #ddd9c6;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #7B8C9D;
    border-color: #F4F7FA;
}

.table-block {
    border: 1px solid #E6E8EC;
    border-radius: 18px;
    padding: 16px;
    background-color: #FCFCFD;
}

.table-responsive>.table {
    white-space: nowrap;
}

@media (max-width:768px) {

    /*表格*/
    .table-rwd {
        min-width: 100%;
    }

    tr.tr-only-hide {
        display: none !important;
    }

    .table-rwd tr {
        display: block;
        margin-top: 15px;
    }

    .table-rwd td {
        background-color: #FFF;
        border-radius: 3px;
        text-align: left;
        font-size: 1rem;
        overflow: hidden;
        width: 100%;
        display: block;
        margin-left: 0;
        padding: 10px;
        border: 0;
    }

    .table-rwd tr.table-danger td {
        background-color: #f8d7da;
    }

    .table-rwd td {
        border-left: #BFBFBF 1px solid;
        border-right: #BFBFBF 1px solid;
    }

    .table-rwd td:first-child {
        border-top: #BFBFBF 1px solid;
        border-left: #BFBFBF 1px solid;
        border-right: #BFBFBF 1px solid;
    }

    .table-rwd td:last-child {
        border-bottom: #BFBFBF 1px solid;
        border-left: #BFBFBF 1px solid;
        border-right: #BFBFBF 1px solid;
    }

    .table-rwd td:before {

        content: attr(data-th) " : ";

        display: inline-block;
        text-transform: uppercase;
        font-weight: bold;
        margin-right: 15px;
        color: #000;
    }
}

/*RWD 表格2*/
@media (max-width: 768px) {
    .table-rwd02 thead {
        display: none;
    }

    .table-rwd02 tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .table-rwd02 td {
        display: block;
        text-align: left;
        position: relative;
        padding-left: 1.5rem;
        border-top: none;
        border-bottom: 1px solid #eee;
    }

    .table-rwd02 td[data-th="服務地區"] {
        display: block;
        text-align: left;
        padding-left: 6.5rem;
        position: relative;
        border-top: none;
        border-bottom: 1px solid #eee;
    }

    .table-rwd02 td::before {
        content: attr(data-th);
        position: absolute;
        left: 0rem;
        top: 0.5rem;
        font-weight: bold;
        color: #6c757d;
        display: none;
    }

    .table-rwd02 td[data-th="志工服務運用單位"] {
        font-weight: bold;
        font-size: 1.2rem;
        padding-left: 1rem;
        border-bottom: none;
    }

    /* Icon 設定 */
    .table-rwd02 td[data-th="服務地區"]::before {
        content: "\f3c5　"attr(data-th) " : ";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        display: block;
    }

    .table-rwd02 td[data-th="聯絡方式"]::before {
        content: "\f095  ";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        display: inline-block;
    }

    .table-rwd02 td[data-th="詳細資訊"] {
        padding-left: 1rem;
        border-bottom: none;
        text-align: center;
    }

}

/*nav&tab*/
.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: #FFFFFF70;
    border: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #565656;
    font-size: 1.1rem;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #262626;
    background-color: #fff;
    border-bottom: 4px solid #DE764C;
    font-weight: bold;
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
}

.form-check-input:checked {
    background-color: #F07C00;
    border-color: #F07C00;
}

/*pagination*/

.pagination {
    border-radius: 20px;
}

.page-link {
    color: #4D4101;
}

.page-link:hover {
    color: #FFF;
    background-color: #E6855D;
}

.page-link.active {
    color: #FFF;
    background-color: #E6855D;
}

.checkEye,
.checkEye01,
.checkEye02,
.checkEyeAuth {
    position: absolute;
    right: 30px;
}

/*========================*/
/*========= 首頁  ========*/
/*========================*/

/*===== Header =====*/

#myHeader {
    top: 0;
    transition: 0.3s;
    z-index: 999;
    background-color: #FFF;
    width: 100%;
}

.small-header {
    background: #FFFFFF;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.topLinks .slink {
    font-size: 0.85rem;
    color: #6D6D6D;
    text-decoration: none;
}

.topLinks .slink::after {
    content: "|";
    color: #6D6D6D;
    margin-right: 8px;
    margin-left: 8px;
}

.topLinks .slink:nth-last-child(1)::after {
    content: "";
}

.topLinks .slink:hover {
    color: #D86739;
    font-weight: 700;
    text-decoration: none;
}

#navbarNav a {
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: 500;
    color: #2D3642;
    position: relative;
    z-index: 1;
    margin-right: 8px;
}

#navbarNav a:hover {
    font-weight: 900;
}

#navbarNav .-color01>a::before {
    content: "";
    width: 8px;
    height: 25px;
    margin: 0 auto;
    background-color: #AFD1F2;
    transform: skewX(-20deg);
    position: absolute;
    left: 4%;
    top: 18%;
    z-index: -1;
}

#navbarNav .-color01 .dropdown-menu {
    border-top: 3px solid #AFD1F2;
}

#navbarNav .-color02>a::before {
    content: "";
    width: 8px;
    height: 25px;
    margin: 0 auto;
    background-color: #D7BBEA;
    transform: skewX(-20deg);
    position: absolute;
    left: 4%;
    top: 18%;
    z-index: -1;
}

#navbarNav .-color02 .dropdown-menu {
    border-top: 3px solid #D7BBEA;
}

#navbarNav .-color03>a::before {
    content: "";
    width: 8px;
    height: 25px;
    margin: 0 auto;
    background-color: #FFE0C5;
    transform: skewX(-20deg);
    position: absolute;
    left: 4%;
    top: 18%;
    z-index: -1;
}

#navbarNav .-color03 .dropdown-menu {
    border-top: 5px solid #FFE0C5;
}

#navbarNav .-color04>a::before {
    content: "";
    width: 8px;
    height: 25px;
    margin: 0 auto;
    background-color: #FFCCD3;
    transform: skewX(-20deg);
    position: absolute;
    left: 4%;
    top: 18%;
    z-index: -1;
}

#navbarNav .-color04 .dropdown-menu {
    border-top: 3px solid #FFCCD3;
}

#navbarNav .-color05>a::before {
    content: "";
    width: 8px;
    height: 25px;
    margin: 0 auto;
    background-color: #F5D63D;
    transform: skewX(-20deg);
    position: absolute;
    left: 4%;
    top: 18%;
    z-index: -1;
}

#navbarNav .-color05 .dropdown-menu {
    border-top: 3px solid #F5D63D;
}

#navbarNav .-cus a {
    color: #EF6E38;
    border: 2px solid #EF6E38;
    border-radius: 25px;
    padding: 8px 20px;
    display: block;
}

#navbarNav .-cus a:hover {
    color: #FFF;
    border: 2px solid #EF6E38;
    background-color: #EF6E38;
}

#headernav {
    background-color: #FFF;
}

@media (min-width: 992px) {
    #headernav {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 992px) {

    #navbarNav .-color01 > a::before,
    #navbarNav .-color02 > a::before,
    #navbarNav .-color03 > a::before,
    #navbarNav .-color04 > a::before,
    #navbarNav .-color05 > a::before,
    #navbarNav .-color06 > a::before {
        content: "";
        left: 2%;
    }

}

/*===== MENU =====*/
#navbarNav .-color01 .dropdown-menu a:hover {
    background-color: #afd1f2;
}

#navbarNav .-color02 .dropdown-menu a:hover {
    background-color: #D7BBEA;
}

#navbarNav .-color03 .dropdown-menu a:hover {
    background-color: #FFE0C5;
}

#navbarNav .-color04 .dropdown-menu a:hover {
    background-color: #FFCCD3;
}

#navbarNav .-color05 .dropdown-menu a:hover {
    background-color: #F5D63D;
}

/*===== MENU END =====*/

/*字級大小*/
header a.word_level {
    background-color: #EAEAEA;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 30px;
    color: #8E8E93;
    overflow: hidden;
    text-decoration: none;
}

header a.word_level.active {
    background-color: #FDD469;
    font-weight: bold;
    color: #000000;
}

header a.word_level.small {
    font-size: 90%;
}

header a.word_level.large {
    font-size: 110%;
}


/*======= BANNER =======*/
.cus-my {
    margin-bottom: 20px;
}

.carousel-control-next,
.carousel-control-prev {
    opacity: 1;
    bottom: -20%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 2rem;
    height: 2rem;
    background-color: #ECB49D;
    border-radius: 50%;
}

.carousel-control-next {
    justify-content: flex-end;
}

.carousel-control-prev {
    justify-content: flex-start;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23723217'%3e%3cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23723217'%3e%3cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3e%3c/svg%3e");
}


/*=====  index共用  =====*/

.section {
    z-index: 50;
    margin-top: 30px;
}

.section.-first {
    position: relative;
}

.circle {
    position: absolute;
    left: 0;
    bottom: 10%;
}

.section.-second {}

.section.-third {
    position: relative;
    padding-bottom: 100px;
}

.circle02 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 185px;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

/*===== CTA Button=====*/

.Cta-btn {
    position: fixed;
    z-index: 1001;
    right: 1%;
    bottom: 11%;
}

.Cta-btn a {
    position: relative;
    right: 5px;
    text-align: center;
    display: block;
    margin-bottom: 15px;
    transition: 0.3s;
}

.cta-img-item img {
    transform: scale(1);
    transition: transform 0.3s ease;
}


.cta-img-item:hover img {
    animation: shakeScale 0.5s ease-in-out;
}

@keyframes shakeScale {
    0% {
        transform: scale(1.08) rotate(0deg);
    }

    25% {
        transform: scale(1.08) rotate(5deg);
    }

    50% {
        transform: scale(1.08) rotate(-5deg);
    }

    75% {
        transform: scale(1.08) rotate(5deg);
    }

    100% {
        transform: scale(1.08) rotate(0deg);
    }
}

/*===== back to top=====*/
#gotopbutton {
    display: inline-block;
    width: 40px;
    height: 65px;
    background: url(../img/nw-gotop.png) no-repeat center;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 2%;
    display: block;
    width: 80px;
    text-align: center;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#gotopbutton:hover {
    cursor: pointer;
    font-weight: 700;
}

#gotopbutton.show {
    opacity: 1;
    visibility: visible;
}

/*=====  訊息公告 =====*/

.leftBox,
.rightBox {
    border-radius: 10px;
    padding: 30px 35px;
    background: linear-gradient(180deg, #FFFFFF 62.05%, #FFF0E1 116.44%);
    position: relative;
    border: 1px solid #D9D9D9;
}

.title-icon {
    position: absolute;
    left: 3%;
    top: 5%;
    z-index: 0;
}

.title-text {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: bold;
}

.leftBox .list-group-item,
.rightBox .list-group-item {
    background-color: transparent;
    border: 0;
    line-height: 2.2rem;
    border-bottom: 1px solid #E8E8E8;
}

.leftBox .card-tag {
    font-size: 0.9rem;
    color: #1A1311;
    background-color: #E6E6E6;
    border-radius: 8px;
    padding: 0px 3px;
    margin-left: 10px;
}

.rightBox .card-tag {
    font-size: 0.9rem;
    color: #BD482B;
    background-color: #FFF0E1;
    border-radius: 8px;
    padding: 0px 3px;
    margin-right: 10px;
}

.iconBox {
    background-image: url(../img/icon/news.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 50px;
    min-height: 50px;
}

.list-group-item .title {
    font-weight: normal;
}

.list-group-item a:hover .iconBox {
    background-image: url(../img/icon/news-hover.png);
}

.list-group-item a:hover .title {
    color: #9B5416;
}

.leftBox .list-group-item .title,
.rightBox .list-group-item .title {
    width: 100%
}

.leftBox .list-group-item div.d-flex,
.rightBox .list-group-item div.d-flex {
    width: calc(100% - 30px);
}

/*======  召募活動訊息  ======*/
.recruitBox {
    border-radius: 10px;
    padding: 40px 35px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 247, 225, 0.5) 100%);
    position: relative;
    border: 1px solid #D9D9D9;
}

.recruitBox .section-title {
    height: auto;
}

.recruitBox .title-icon {
    position: absolute;
    left: 1%;
    top: 5%;
    z-index: 0;
}

.recruitList .card {
    margin-top: 8px;
    border-radius: 18px;
    border: 1px solid #E6E8EC;
    padding: 10px;
    margin-bottom: 8px;
    background: #FCFCFD;
}

.recruitList a:hover .card {
    border-color: #6b6b6b;
}

.recruitList .card-title {
    position: relative;
}

/*.recruitList .card-title .tag {
    background-color: #12873B;
    border-radius: 4px;
    padding: 4px 8px;
    color: #FFF;
    position: absolute;
    top: 0;
    right: 0;
}*/

.recruitList .card-title .unit {
    color: #141416;
    font-size: 1.15rem;
    font-weight: 700;
    height: 66px;
}

.recruitList .description {
    color: #003585;
    font-weight: 700;
    height: 60px;
}

.recruitList .card-quota {
    color: #003585;
    font-weight: 700;
    display: flex;
    justify-content: space-around;
}

.recruitList .card-quota .amount {
    color: #000000;
    font-weight: 700;
    font-size: 1.2rem;
    display: inline-block;
}

.recruitList .carousel-indicators [data-bs-target] {
    background-color: gray;
}

.imgBTN {
    border: 2px solid transparent;
    display: block;
    border-radius: 10px;
}

.imgBTN:hover {
    border: 2px solid #CA644A;

}

.swiper .carousel-control-next,
.swiper .carousel-control-prev {
    opacity: 1;
    bottom: 0%;
}

.swiper .swiper-pagination {
    bottom: var(--swiper-pagination-bottom, -8px);
}

.swiper .swiper-pagination .swiper-pagination-bullet {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: gray;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

.swiper .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}



/*======  新北市志願服務推廣中心簡介  ======*/
.introductionBox {
    border-radius: 10px;
    padding: 40px 35px 00px 35px;
    background: linear-gradient(180deg, #FFFFFF 62.05%, #EAF5FF 116.44%);
    position: relative;
    border: 1px solid #D9D9D9;
    background-image: url(../img/introBG.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/*======  Footer  ======*/

.footer-above {
    background-color: #FFF0E1;
}

.footer-above .slink {
    color: #565656;
}

.footer-above .f-title {
    color: #565656;
    font-size: 1.3rem;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
}

.footer-above .f-link {
    color: #565656;
}

.footer-above .f-link:hover {
    text-decoration: underline;
}

.footer-below .slink {
    color: #000000;
    white-space: nowrap;
}

.footer-below .slink:hover {
    text-decoration: underline;
}

.footer-text span {
    margin-right: 15px;
}

.linkgp-icon span {
    margin-right: 5px;
}

.footer-text {
    color: #565656;
}

.footer-below {
    background-color: #E8B49F;
    padding: 8px 0;
    font-size: 0.9rem;
}

.footer-below .slink::after {
    content: "|";
    margin: 0 4px;
    color: #000;
}

.footer-below .slink:last-child::after {
    content: "";
}

.linkgp-icon {
    display: flex;
    gap: 8px;
    margin-top: 0.5rem;
}

.linkgp-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* 各平台 hover 顏色 */
/* LINE */
.linkgp-icon .line:hover {
    background-color: #06C75533;
}

/* FB */
.linkgp-icon .facebook:hover {
    background-color: #3b599833;
}

/* YouTube */
.linkgp-icon .youtube:hover {
    background-color: #FF000033;
}

/* IG */
.linkgp-icon .instagram:hover {
    background-color: #C1358433;
}

/* Site */
.linkgp-icon .site:hover {
    background-color: #9A786A33;
}

.linkgp-icon img {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.linkgp-icon img:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) brightness(1.2);
}


/*========================*/
/*===== index - RWD  =====*/
/*========================*/

/* laptop */
@media (max-width: 1440px) {}

/* laptop */
@media (max-width: 1366px) {}

@media (max-width: 1280px) {

    .topLinks .slink::after {
        margin-right: 5px;
        margin-left: 5px;
    }

    #navbarNav .nav-item img {
        max-width: 120px;
    }

}

@media (max-width: 1024px) {

    #navbarNav a {
        font-size: 1rem;
    }

    .cus-my {
        margin-bottom: 20px;
    }

    .introductionBox {
        padding: 40px 35px 40px 35px;
    }
}

/* tablets */
@media (max-width: 992px) {
    #navbarNav a {
        padding: .5rem 1rem;
        line-height: 1.5;
        border-bottom: 0;
    }

    #navbarNav a:hover {
        border-bottom: 0;
    }

    .footer-above .f-link {
        text-align: center;
    }

    .footer-above .f-title::after {
        margin-left: 43%;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 2rem;
        height: 2rem;
    }

}

@media (max-width: 768px) {

    #navbarNav a {
        font-size: 1.1rem;
    }

    #navbarNav .nav-item img {
        max-width: 165px;
    }

    .footer-above .f-title {
        text-align: center;
    }

    .recruitBox {
        padding: 20px 20px;
    }

    .recruitBox .title-icon {
        left: 1%;
        top: 1%;
    }

    .introductionBox {
        padding: 30px 15px 30px 15px;
    }
}


/* phones */
@media (max-width: 576px) {

    .navbar-brand img {
        width: 75%;
    }

    .section-title {
        height: 80px;
        background-position: bottom;
    }

    .footer-above .f-title {
        font-size: 1.1rem;
        font-weight: 700;
    }

    #navbarNav .topLinks.-inpnmode a {
        font-size: 1rem;
    }

    .cus-my {
        margin-top: 5%;
        margin-bottom: 20px;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 2rem;
        height: 2rem;
    }

    .carousel-control-next,
    .carousel-control-prev {
        bottom: -40%;
    }

    .introductionBox {
        padding: 40px 10px 40px 10px;
    }

    .leftBox,
    .rightBox {
        padding: 30px 20px;
    }

    .Cta-btn {
        bottom: 14%;
    }

    .cta-img-item img {
        width: 70px;
    }
}

/*===========================*/
/*===== index - RWD  END=====*/
/*===========================*/

/*======= INNER PAGE =======*/
.innerPage {
    background-image: unset;
}

.inner-bg {
    background-image: url('../img/bread-bg.png');
    background-size: 100% 50%;
    background-position: top;
    background-repeat: no-repeat;
    padding: 1% 0 2% 0;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .inner-bg {
        padding: 25px 0 40px 0;
    }
}

@media (max-width: 576px) {
    .inner-bg {
        padding: 25px 0 25px 0;
    }
}

.breadcrumb li,
.breadcrumb li a,
.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before {
    color: #4D4101;
}

.inner-title {
    font-size: 2rem;
    color: #4D4101;
    font-weight: bold;
}

@media (max-width: 576px) {
    .inner-title {
        font-size: 1.8rem;
    }
}

.inner-block {
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9EA 100%);
    padding: 30px 25px;
    margin-top: 20px;
}

.inner-block02 {
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #FFF;
    padding: 30px 25px;
    margin-top: 20px;
}

@media (max-width: 768px) {

    .inner-block,
    .inner-block02 {
        padding: 15px 15px;
    }
}

.inner-content {
    padding-left: 30px;
}

@media (max-width: 768px) {
    .inner-content {
        padding-left: 15px;
    }
}

@media (max-width: 576px) {
    .inner-content {
        padding-left: initial;
    }
}

/*內頁 左邊menu*/
.sub-menu {
    margin-bottom: 15px;
}

.sub-menu .nav-link {
    color: #000000;
    text-align: center;
    margin-bottom: 5px;
}

.sub-menu .nav-link.active {
    background-color: #FFEC90;
    border-radius: 50rem
}

.page-title {
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}

.page-title .text {
    font-size: 2rem;
    font-weight: bold;
    color: #000000;
}

.page-title .title-icon {
    position: absolute;
    left: -3%;
    top: -37%;
    z-index: -1;
}

@media (max-width: 1024px) {
    .page-title .title-icon {
        position: absolute;
        left: -4%;
        top: -37%;
        z-index: -1;
    }
}

@media (max-width: 576px) {
    .page-title .title-icon {
        position: absolute;
        left: -8%;
        top: -37%;
        z-index: -1;
    }
}


.sub-content {
    padding-left: 60px;
    border-left: 1px solid #C9C9C9;
}

@media (max-width: 1024px) {
    .sub-content {
        padding-left: 15px;
        border-left: 0;
    }
}

@media (max-width: 576px) {
    .sub-content {
        padding-left: 6px;
    }
}

.btn-tab {
    border: 1px solid #DE764C;
    background-color: #FFF;
    color: #DE764C;
}

.btn-tab:hover {
    border: 1px solid #DE764C;
    background-color: #DE764C;
    color: #FFF;
}

.btn-tab.active {
    border: 1px solid #DE764C;
    background-color: #DE764C;
    color: #FFF;
}

/*======= 志工專區 - 待辦事項-教育訓練報名(日期) =======*/
.table-block .tag01 {
    background-color: #AFD1F2;
    color: #020202;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.table-block .tag02 {
    background-color: #FFE775;
    color: #020202;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.step-btn {
    height: 60px;
    background-image: url('../img/arrow-white.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
    line-height: 60px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.step-btn.active {
    background-image: url('../img/arrow-orange.png');
    color: white;
}

.step-content-box {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .step-btn {
        font-size: 0.9rem;
        height: 50px;
        line-height: 50px;
    }

    .step-btn span {
        display: none;
    }
}

@media (max-width: 576px) {
    .step-btn {
        font-size: 0.75rem;
        height: 50px;
        line-height: 50px;
    }
}


/*======= 教育訓練 =======*/
.trainingList .card {
    border-color: #E6E8EC;
    border-radius: 16px;
    margin-bottom: 24px;
}

.trainingList .card-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    font-size: 2rem;
    font-weight: bolder;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

@media (max-width: 576px) {
    .trainingList .card-left {
        font-size: 1.5rem;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 16px;
    }

    .trainingList .card-left {
        flex-direction: row;
        padding: 10px;
    }
}

.trainingList .card-left.color01 {
    background-color: #FFF0E1;
    color: #D95D2A;
}

.trainingList .card-left.color02 {
    background-color: #D8EBFF;
    color: #467DB2;
}

.trainingList .card-left.color03 {
    background-color: #FFF5CF;
    color: #A28A18;
}

.trainingList .card-left.color04 {
    background-color: #C0F6EA;
    color: #15725E;
}

.trainingList .card-left.color05 {
    background-color: #EED4FF;
    color: #9643CE;
}

.trainingList .card-left.color06 {
    background-color: #FFE8CE;
    color: #BE741B;
}


.trainingList .card-right {
    padding: 16px;
}

.trainingList .iconlist {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #38536D;
    font-weight: bold;
}

.trainingList .iconlist.style02 {
    color: #525252;
    font-weight: normal;
}

.trainingList .yellow-icon {
    color: #8E7D2C;
    background-color: #FFE775;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainingList .card-title {
    font-weight: bolder;
    font-size: 1.3rem;
    margin-bottom: 30px;
}

/*======== 教育訓練end ========*/

/*========教育訓練-內容 ========*/
.content-list {
    list-style: none;
    display: flex;
    align-items: center;
    color: #141416;
    padding: 0;
}

.content-list li::after {
    content: "|";
    margin-left: 8px;
    margin-right: 8px;
    color: #BABABA;
}

.content-list li:nth-last-child(1)::after {
    content: none;
}

@media (max-width: 576px) {
    .content-list {
        flex-direction: column;
        align-items: start;
    }

    .content-list li::after {
        content: none;
    }
}

.bg-primary {
    background-color: #2C6CAE !important;
}

.paperdownload-list {
    display: flex;
    flex-wrap: wrap;

}

.paperdownload-list a {
    color: #000;
    font-weight: 700;
    background-color: #FFE77542;
    border: 1px solid #FBD72A;
    border-radius: 50px;
    padding: 6px 12px;
    margin-right: 12px;
    margin-bottom: 12px;
}

.paperdownload-list a:hover {
    background-color: #FBD72A;
}

/*======== 教育訓練-內容end ========*/

/*======== 網站導覽 ========*/
.guide-tag {
    color: #D86739;
    border-radius: 4px;
    padding: 2px 8px;
    border: 2px solid #D86739;
}

.sitemap-block .card {
    border-radius: 18px;
    background-color: #FCFCFD;
}

.sitemap-block {
    font-size: 1.2rem;
    font-weight: bold;
}

.sitemap-block ul {
    list-style-type: none;
    padding-left: 0;
}

.sitemap-block li {
    padding: 12px;
    border-bottom: 1px solid #70707070;
}

.sitemap-block li:last-child {
    border-bottom: 0;
}

.sitemap-block a:hover {
    color: #e96b36;
}

/*======= 機關與運用單位簡介 =======*/

.bureaucard {
    border: 1px solid #D4D4D4;
    padding: 0;
    border-radius: 18px;
}

.bureaucard .leftPart {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.bureaucard .rightPart {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

@media (max-width: 576px) {
    .bureaucard .leftPart {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        border-bottom-left-radius: 0;
    }

    .bureaucard .rightPart {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 18px;
        border-bottom-left-radius: 18px;
    }
}


.bureaucard .title {
    color: #141416;
    font-weight: bold;
    font-size: 1.6rem;
    padding-bottom: 5px;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    box-sizing: border-box;
}

.bureaucard .info {
    margin-top: 15px;
}

.bureaucard .btnTitle {
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFF;
}

.bureaucard .leftPart .tagBox .tag {
    display: inline-block;
}

.bureaucard .tagBox .orangebg-tag {
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    color: #FFF;
    background-color: #DE764C;
    border: 1px solid #DE764C;
    padding: 4px 8px;
    margin-right: 8px;
}

.bureaucard .leftPart {
    background: #FCFCFD;
}

.bureaucard:hover .leftPart {
    border: 1px solid #DE764C;
}

/*======= 運用單位簡介內頁 =======*/
.tag-box {
    display: flex;
    flex-wrap: wrap;
}

.tag-box .tag {
    display: inline-block;
}

.tag-box .orangebg-tag {
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    color: #FFF;
    background-color: #DE764C;
    border: 1px solid #DE764C;
    padding: 4px 8px;
    margin-right: 8px;
}

.tag-box .bluebg-tag {
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    color: #FFF;
    background-color: #2C6CAE;
    border: 1px solid #2C6CAE;
    padding: 4px 8px;
    margin-right: 8px;
}

/*======= 訊息公告 =======*/
.announcement-item .date,
.announcement-item .unit {
    font-weight: normal;
}

.announcement-item .title {
    font-weight: 600;
}

.announcement-item .date::after {
    content: "　｜　";
}

.announcement-item {
    position: relative;
}

.announcement-item.bookmark .inner-block {
    border-color: #D86739;
}

.announcement-item.bookmark::after {
    content: "";
    width: 30px;
    height: 50px;
    background: url("../img/icon/bookmark-solid.svg") no-repeat;
    position: absolute;
    right: 5%;
    top: 0%;
    display: inline-block;
}

.tag-box .date::after {
    content: "　｜　";
}

@media (max-width: 576px) {
    .tag-box .date::after {
        content: "";
    }

    .announcement-item.bookmark::after {
        right: 0%;
        top: 0%;
        background-size: contain;
        width: 20px;
    }
}

.download-file .item {
    padding: 15px 10px;
    border-bottom: 1px solid #707070;
}

/*======== 申請成為運用單位 =======*/
#accordionApply .accordion-item {
    margin-bottom: 30px;
    border: 0;
}

#accordionApply .accordion-body {
    border: 1px solid #E6E8EC;
    border-top: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

#accordionApply .accordion-button {
    color: #404040;
    font-weight: bold;
    font-size: 1.3rem;
    background-color: #FFE775;
    border: 1px solid #FFE775;
    border-radius: 18px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

#accordionApply .accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: #DE764C;
    border: 1px solid #DE764C;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#accordionApply .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#accordionApply .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

/*======== 我要當志工 =======*/
.list-item {
    position: relative;
    border: 1px solid #E6E8EC;
    border-radius: 10px;
    background: #FCFCFD;
    padding: 30px 25px;
    margin-top: 20px;
}

@media (max-width: 576px) {
    .list-item {
        padding: 20px 15px;
    }
}

.list-item .title {
    color: #141416;
    font-weight: bold;
    font-size: 1.6rem;
    padding-bottom: 5px;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    box-sizing: border-box;
}

.list-item .btn-block {
    position: absolute;
    right: 2%;
    bottom: 10%;
}

.list-item .unit,
.list-item .weekday {
    font-size: 1.1rem;
    font-weight: 500;
    color: #4D4D4D;
}

.list-item i {
    width: 20px;
    text-align: center;
}

.list-item .amount span {
    font-size: 1.1rem;
    font-weight: 500;
    color: #DE764C;
}

.amount .headcount {
    display: inline;
    font-size: 1.6rem;
    margin-left: 5px;
    margin-right: 5px;
}

.amount .headcount .tag {
    background-color: #FFF0E1;
    border-radius: 3px;
    color: #4A4A4A;
    padding: 4px 8px;
    margin-right: 5px;
    font-size: 1.1rem;
}

.amount .headcount .text {
    font-size: 0.9rem;
    color: #828282;
    margin-left: 5px;
}

@media (max-width: 767px) {
    .list-item .btn-block {
        position: unset;
        margin-top: 15px;
    }

    .amount .headcount {
        display: block;
        margin-left: 0;
    }
}

/*======= 召募說明 =======*/
.description-block {
    font-size: 1.2rem;
    color: #4D4D4D;
}

.description-block .amount {
    display: inline-flex;
    align-items: center;
    background-color: #F4F5F6;
    border-radius: 20px;
    padding: 4px 16px;
}

.description-block .amount .title {
    color: #0F418C;
    font-weight: 700;
    margin-right: 4rem;
}

.description-block .headcount {
    font-size: 1.2rem;
    color: #58595B;
}

.description-block .headcount .number {
    font-weight: bold;
    color: #58595B;
    font-size: 1.8rem;
}

.description-block div img {
    width: 20px;
    height: auto;
    margin-right: 15px;
}

@media (max-width: 767px) {
    .description-block {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .description-block .amount {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .description-block .amount .title {
        margin-right: 0;
        margin-top: 0.5rem;
    }
}

/*======== 資源補給站 - 常見問答 ========*/
#accordionApply ul li {
    margin-bottom: 15px;
}

/*======= 精彩時刻 - 影音專區 ========*/
.video-item .title {
    font-size: 1.8rem;
    font-weight: bold;
}

.video-item .date,
.video-item .unit {
    font-size: 1.1rem;
    color: #141416;
}

.video-item .description {
    font-size: 1.1rem;
    color: #4D4D4D;
}

.video-item .img-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
}

a:hover .video-item .inner-block {
    border-color: #DE764C;
}

/*======= 精彩時刻 - 電子相簿 ========*/
.album-block .card {
    border-radius: 12px;
    padding: 15px;
    position: relative;
}

.album-block .card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
}

.album-block .card-title {
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 700;
}

.album-block a:hover .card {
    border-color: #DE764C;
}

.album-block .card-tag {
    position: absolute;
    top: 5%;
    right: 5%;
    background-color: #2C6CAE;
    color: #FFF;
    padding: 8px 6px;
    border-radius: 4px;
}

/*======= 精彩時刻 - 電子刊物 ========*/
.publication-block .card {
    border-radius: 12px;
    padding: 15px;
}

.publication-block .card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 12px;
}

.publication-block .card-title {
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 700;
}

.publication-block a:hover .card {
    border-color: #DE764C;
}

/*======== 志工專區 待辦事項 ========*/
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.calendar-header .calendar-title {
    font-size: 2rem;
    color: #1E1E1E;
}

.calendar-tag {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
}

@media (max-width: 576px) {
    .calendar-header {
        justify-content: center;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .calendar-header .calendar-title {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

.calendar-tag li {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.calendar-tag .blue {
    color: #007DBA;
}

.calendar-tag .green {
    color: #51BB4B;
}

.calendar-tag .purple {
    color: #8D2ECE;
}

.calendar-tag .red {
    color: #B81329;
}


.calendar-tag .tag-green,
.calendar-tag .tag-blue,
.calendar-tag .tag-purple,
.calendar-tag .tag-red,
.tips-tag.tag-green,
.tips-tag.tag-blue,
.tips-tag.tag-purple,
.tips-tag.tag-red {
    width: 10px;
    height: 10px;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 3px;
}

.calendar-tag .tag-green,
.tips-tag.tag-green {
    background-color: #51BB4B;
}

.calendar-tag .tag-blue,
.tips-tag.tag-blue {
    background-color: #007DBA;
}

.calendar-tag .tag-purple,
.tips-tag.tag-purple {
    background-color: #8D2ECE;
}

.calendar-tag .tag-red,
.tips-tag.tag-red {
    background-color: #B81329;
}

.calendar-box {
    background-color: #FFF;
}

.calendar-box td {
    position: relative;
    height: 150px;
    max-width: 50px;
}

.calendar-date {
    color: #303030;
    position: absolute;
    right: 5px;
    top: 5px;
}

.table-bordered {
    border: 1px solid #dfdfdf;
}

td.null .calendar-date {
    color: #bfbfbf;
}

td.istoday {
    background-color: #FFFADF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.calendar-box thead {
    background-color: #FFF;
    color: #272526;
    text-align: center;
    vertical-align: middle;
}

.tips-tag.tag-green,
.tips-tag.tag-blue,
.tips-tag.tag-purple,
.tips-tag.tag-red {
    position: absolute;
    left: 10%;
    top: 25%;
    font-size: 1.1rem;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 4px;
}

.tabletag-blue {
    border-radius: 4px;
    padding: 4px 20px;
    background-color: #2C6CAE;
    color: #FFF;
    white-space: nowrap;
}

.tabletag-purple {
    border-radius: 4px;
    padding: 4px 20px;
    background-color: #8D2ECE;
    color: #FFF;
    white-space: nowrap;
}

.tabletag-red {
    border-radius: 4px;
    padding: 4px 20px;
    background-color: #B81329;
    color: #FFF;
    white-space: nowrap;
}

/*======= 待辦事項 - 教育訓練報名V2 =======*/
#accordionApply .accordion-button .acc-tag {
    display: none;
}

#accordionApply .accordion-button:not(.collapsed) .acc-tag {
    display: inline-block;
    background-color: #FFF;
    color: #DE764C;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 8px;
}

@media (max-width: 576px) {
    #accordionApply .accordion-button:not(.collapsed) .acc-tag {
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

.activity-item>div {
    margin-bottom: 10px;
}

/*========志工專區 - 待辦事項-月曆-排班燈箱 ========*/
.timeline {
    list-style: none;
    padding-left: 0;
}

.timeline>li {
    position: relative;
}

.timeline-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 24px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1rem;
}

.timeline-content.morning {
    border-left: 3px #FFF7E0 solid;
}

.timeline-content.middle {
    border-left: 3px #FFD291 solid;
}

.timeline-content.night {
    border-left: 3px #B7B7B7 solid;
}

.timeline-tag01 {
    color: #2A2A2A;
    background-color: #FFEC90;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 5px;
}

.timeline-tag02 {
    color: #2A2A2A;
    background-color: #F39000;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 5px;
}

.timeline-tag03 {
    color: #FFF;
    background-color: #353535;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 5px;
}

.timeline-box {
    position: relative;
}

.timeline-content.morning:before {
    content: '';
    width: 15px;
    height: 15px;
    background: #FDD469;
    position: absolute;
    left: 37px;
    top: 23px;
    border-radius: 100%;
}

.timeline-content.middle:before {
    content: '';
    width: 15px;
    height: 15px;
    background: #F39000;
    position: absolute;
    left: 37px;
    top: 23px;
    border-radius: 100%;
}

.timeline-content.night:before {
    content: '';
    width: 15px;
    height: 15px;
    background: #353535;
    position: absolute;
    left: 37px;
    top: 23px;
    border-radius: 100%;
}

@media (max-width: 768px) {
    .timeline-box {
        padding-left: 43px;
    }

    .timeline-content:before {
        left: 37px;
    }

    .timeline-content {
        flex-direction: column;
    }
}

/*======== 志工專區 個人相關紀錄 ========*/

.sq-tabletag-blue {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #D8EBFF;
    color: #467DB2;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.sq-tabletag-purple {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #EED4FF;
    color: #9643CE;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.sq-tabletag-red {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #FFF0E1;
    color: #D95D2A;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.sq-tabletag-yellow {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #FFF5CF;
    color: #A28A18;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.sq-tabletag-green {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #C0F6EA;
    color: #15725E;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

.sq-tabletag-gray {
    border-radius: 6px;
    padding: 10px 10px;
    background-color: #d3d3d3;
    color: #6c757d;
    font-weight: 700;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {

    .sq-tabletag-blue,
    .sq-tabletag-purple,
    .sq-tabletag-red,
    .sq-tabletag-yellow,
    .sq-tabletag-green,
    .sq-tabletag-gray {
        display: inline-flex;
        flex-direction: row;
    }
}


/*======== 志工專區 個人資料維護 ========*/
.dropdown-checkboxes {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    padding: 10px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background-color: #fff;
}

.dropdown-checkboxes.show .dropdown-menu {
    display: block;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 38px;
    background-color: #f8f9fa;
}

.selected-tag {
    background-color: #e2e6ea;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.dropdown-toggle::after {
    float: right;
    margin-top: 10px;
}

/*===== 0728 調整 =====*/
.search-icon-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

/* 搜尋列（預設收起） */
.search-bar {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    background-color: rgb(97, 91, 80);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    z-index: 999;
}

.search-bar.-mobile {
    top: 75px;
}

.search-bar.active {
    max-height: 120px;
    /* 根據實際內容高度調整 */
}

.search-bar form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px;
}

.search-bar input {
    width: 50%;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
}

.search-bar.-mobile input {
    width: 100%;
    border: 1px solid #333;
}

.search-bar button {
    padding: 10px 16px;
    background-color: white;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-bar.-mobile button {
    border: 1px solid #333;
}

.search-icon-btn i {
    transition: transform 0.3s ease;
}

.search-icon-btn.open i {
    transform: rotate(90deg);
}

/*--- 遮罩 ---*/
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/*--- 搜尋結果 ---*/

.resultItem {
    margin-bottom: 30px;
}

.resultItem .resultTitle {
    font-size: 1.2rem;
    color: #af3e06;
}

.resultItem .resultURL {
    color: #4D4101;
}

.editor-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.carousel-inner .carousel-item {
    height: auto !important;
}

.carousel-inner img {
    position: relative;
    left: auto;
    right: auto;
    transform: translate(0);
}

#loginModal .d-grid small {
    font-size: 1.2rem;
}

.form-label {
    font-weight: bold;
    font-size: 1.2rem;
}

@media (max-width: 1200px) {
    .website_title .fs-3 {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 577px) {
    .website_title .fs-5 {
        text-align: center;
    }

    .navbar-brand {
        width: 100%;
        margin: 0;
    }

    .navbar-toggler {
        position: absolute;
        top: 5px;
    }
}

@media (max-width: 380px) {
    .website_title .fs-3 {
        font-size: 1.2rem !important;
    }
}

.infotmation-link a {
    display: flex;
    align-items: flex-end;
    color: #0B4D5D;
    text-decoration: none;
}

.inputWithin {
    position: relative;
}

    /*眼睛在input內右邊*/
    .inputWithin .icon {
        position: absolute;
        right: 0.625em;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.250em;
    }

.for_accessibility a {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 9999;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    overflow: hidden;
    color: #000;
}

    .for_accessibility a:focus {
        width: auto;
        height: auto;
        padding: 6px;
        background-color: #fff;
        overflow: visible;
    }