html {
    scroll-behavior: smooth;
}

iframe {
    width: 100%;
}

.text-gray-81 {
    color: #818181;
}

.text-gray-89 {
    color: #898989;
}

.text-gray-57 {
    color: #575757;
}

.text-gray-71 {
    color: #717171;
}

.text-blue-6a {
    color: #6a80a9;
}

.text-blue-5c {
    color: #5c73a1;
}

.text-red-fe {
    color: #fe5b5b;
}

.text-green-30 {
    color: #30b5a6;
}

.text-green-2f {
    color: #2fb5a5;
}

.text-brown-3f {
    color: #3f3f3f;
}

.text-orange-ee {
    color: #eebc41;
}

.bg-red-fe {
    background-color: #fe5b5b;
}

.bg-gray-f0 {
    background-color: #f0f0f0;
}

.bg-orange-fd {
    background-color: #fdf7e7;
}

.bg-orange-ee {
    background-color: #eebc41;
}

.bg-blue-5c {
    background-color: #5c73a1;
}

.bg-green-31 {
    background-color: #31b5a5;
}

.bg-green-db {
    background-color: #dbf0db;
}

.bg-gray-eb {
    background-color: #ebebeb;
}

.text-justify {
    text-align: justify;
}

.fs-14 {
    font-size: 0.875rem !important;
}

.fs-22 {
    font-size: 1.375rem;
}

.btn:active,
.btn:hover {
    border: 0 !important;
}

.btn:active,
.btn:hover,
.btn:active *,
.btn:hover * {
    color: #fff;
}

.colon::after {
    content: "：";
}

.nt-dollar::before {
    content: "NT$";
}

.logo {
    width: 100%;
    max-width: 330px;
}

.dot-b {
    left: -4%;
    top: 34%;
}

.dot-g {
    top: -100px;
    left: 15%;
}

.dot-y-s {
    right: 5%;
    top: 0;
}

.dot-y {
    top: 4%;
    left: -2%;
}

.percentCount {
    font-family: inherit !important;
}

.proggress {
    background-color: #ff8282 !important;
}

.proggress,
.progressbar {
    border-radius: 5px !important;
}

.percentCount::before {
    content: "倒數";
}


.on-site-visit {
    top: 37px;
    right: calc(100% + 1rem);
}

.support-mini {
    top: 50%;
    right: calc(100% + 1rem);
}

.number-people-served {
    top: 37px;
    left: 100%;
}

.donor {
    top: 55%;
    left: calc(100% - 1rem);
}

#free-service .col img {
    height: 110px;
}

.social-icon a {
    width: 55px;
    height: 55px;
    font-size: 27.5px;
    line-height: 55px;
}

.prev-btn {
    right: calc(100% - 20px)
}

.next-btn {
    left: calc(100% - 20px)
}

.customer-service {
    width: 100%;
    max-width: 80px;
}

.slick-prev::before,
.slick-next::before {
    font-family: 'icomoon' !important;
    font-size: 4rem;
    color: #898989;
}

.slick-prev::before {
    content: "\e900" !important;
}

.slick-next::before {
    content: "\e901" !important;
}

.slick-next {
    right: -5px;
}

.slick-prev {
    left: -50px;
}

.owl-dots {
    display: none;
}

@media only screen and (min-width: 768px) {
    #regular-donation .owl-nav {
        /*position: absolute;*/
        /*top: 50px;*/
    }

    #regular-donation .owl-prev,
    #regular-donation .owl-next {
        position: absolute;
        font-size: 4rem;
        color: #898989;
        margin-top: 160px;
    }

    #regular-donation .owl-prev {
        left: -25px;
    }

    #regular-donation .owl-next {
        right: -25px;
    }
    #volunteer-list .owl-nav {
        /*position: absolute;*/
        /*top: 50px;*/
    }

    #volunteer-list .owl-prev,
    #volunteer-list .owl-next {
        position: absolute;
        font-size: 4rem;
        color: #898989;
        margin-top: 160px;
    }

    #volunteer-list .owl-prev {
        left: -25px;
    }

    #volunteer-list .owl-next {
        right: -25px;
    }
}

#cooperative-enterprise .owl-nav {
    position: absolute;
    top: 0;
}

#cooperative-enterprise .owl-prev,
#cooperative-enterprise .owl-next {
    position: absolute;
    font-size: 4rem;
    color: #898989;
}

#cooperative-enterprise .owl-prev {
    left: -25px;
}

#cooperative-enterprise .owl-next {
    right: -25px;
}

.row .owl-stage-outer {
    padding: 0 !important;
}

.navbar-toggler-icon {
    width: 1.7em;
    height: 1.7em;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

#activity-reports .owl-item .card > a > div.mb-2 {
    height: 200px;
    overflow-y: hidden;
}
.icon-volunteer-new {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
}

@media (max-width: 500px) {
    .icon-volunteer-new {
        position: absolute;
        top: 0;
        right: 110px;
        width: 40px;
        height: 40px;
    }

    .red-dot {
        position: absolute;
        top: 16px;
        left: 35px;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        z-index: 10;
    }
}