@charset "UTF-8";

@import url(common.css);
@import url(editor.css);

/*
 * Goal: For custom styling on a special contribution page, it is recommended to use both of the following selectors:
 *
 * 1. `.civicrm-contribute-sp`
 *    Although this selector is more intuitive and concise, it has two drawbacks due to its reliance on JavaScript:
 *    a. There is a gap period before this class is added.
 *    b. The selector may fail if JavaScript does not function properly.
 *
 * 2. `body:has(script[data-contribution-page-type="special"])`
 *    This selector is purely CSS-based, thus it does not have the drawbacks of `.civicrm-contribute-sp`.
 *    The `:has()` pseudo-class is supported by modern browsers. For compatibility, check https://caniuse.com/css-has.
 *
 * The reason for recommending the use of both selectors is to enhance user experience on modern browsers.
 *
 * Usage Example:
 * Hiding the main menu in the header of a special contribution page.
 *
 * CSS Code:
 *
 * .civicrm-contribute-sp .header .main-menu,
 * body:has(script[data-contribution-page-type="special"]) .header .main-menu {
 *   display: none;
 * }
 *
 */

/* *SECTION - Fixed */

.navbar-toggler-right {
    order: unset;
}

.slick-track::before,
.slick-track::after,
.row::before,
.row::after {
    content: unset;
}

@media (min-width: 560px) {

    .path-frontpage .node .field--type-image,
    .node .field--type-image {
        float: unset;
        margin: unset;
        margin-bottom: 2rem;
        img{
            width: 100%;
        }
    }
}

@media (min-width: 1200px) {
    .node__content {
        font-size: 1rem;
    }
}

.clearfix {
    &::after,
    &::before {
        content: unset;
    }
}

.field--type-image img,
.field--name-field-user-picture img {
    margin: unset;
}

*:target {
    scroll-margin-top: var(--smt, 250px);
}

.toolbar-fixed {
    &*:target {
        scroll-margin-top: calc(var(--smt) + 40px);
    }

    &.toolbar-tray-open {
        &*:target {
            scroll-margin-top: calc(var(--smt) + 80px);
        }
    }
}

.d-grid{
    padding: unset !important;
    margin: unset !important;
}

nav:not(.tabs){
    .nav-link{
        padding: unset;
        color: var(--color-gray-dark);
        &:hover{
            color: inherit;
        }
    }
}

/* *!SECTION */

/* *SECTION - Layout */

html {
    font-size: 16px;
}

body {
    color: var(--color-gray-dark);
    font-size: 15px;
    line-height: 1.5;
    @media (min-width:768px) {
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: 0.03em;
    }
}

html,
body {
    overflow-x: clip;
}

.page {
    background-color: var(--color-bg);

    .header {
        background-color: var(--color-bg);
        border-bottom: unset;
    }
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: unset;
}

.desktop {
    display: none !important;
}

@media (min-width: 1200px) {
    .mobile {
        display: none !important;
    }

    .desktop {
        display: block !important;
    }
}

@media (min-width: 1700px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1600px;
        padding-inline: unset;
    }
}

/* *ANCHOR - Header */

.scrolled{
    .header{
        position: fixed;
        top: var(--drupal-displace-offset-top);
        left: 0;
        z-index: 10;
        width: 100%;
        background-color: var(--color-bg);
        box-shadow: 0px 1px 5px 0px #00000040;
    }    
}

.header{
    .navbar{
        padding-block: unset;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: clamp(0.75rem, calc(0.034rem + 3.053vw), 1.5rem); /* min: 12px, max: 24px */;
    }
    .site-logo-img{
        width: clamp(13.688rem, calc(9.334rem + 18.575vw), 18.25rem); /* min: 219px, max: 292px */;
    }
    #block-block-donate{
        text-align: right;
        @media (min-width:1200px) {
            order: 3;
        }        
    }
    button.navbar-toggler{
        &:not(.collapsed){
            .navbar-toggler-icon{
                background-image: url(image/icon-close.svg);
            }
        }
    }
}

/* *ANCHOR - Main */

body{
    /* *ANCHOR - Node */
    &.path-node:not(.node--type-layout, .node--type-service, .node--type-news, &:has(.alternating)){
        .row-offcanvas{
            max-width: 1320px;
            margin-inline: auto;
        }
    }
    /* *ANCHOR - Sidebar */
    &.layout-one-sidebar{
        .main{
            .row-offcanvas{
                gap: 12px 60px;
                > *{
                    background-color: white;
                    border-radius: 30px;
                    box-shadow: 1px 2px 3px 0px #00000026;
                }
                .sidebar{
                    padding-top: 16px;
                    padding-bottom: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */
                    padding-inline: clamp(1.25rem, calc(0.415rem + 3.562vw), 2.125rem); /* min: 20px, max: 34px */
                }
            }
            @media (min-width: 768px) {
                background: url(image/bg-02.svg) no-repeat left 0 top 382px;
                .main-content{
                    order: 0 !important;
                    padding-top: clamp(1.5rem, calc(0.546rem + 4.071vw), 2.5rem); /* min: 24px, max: 40px */
                    padding-bottom: clamp(2rem, calc(1.046rem + 4.071vw), 3rem); /* min: 32px, max: 48px */
                    padding-inline: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */
                }
                .sidebar{
                    width: 22.12%;
                    align-self: self-start;
                    position: sticky;
                    left: 0;
                    top: calc(100px + var(--drupal-displace-offset-top, 0px));
                }
            }
        }
    }
}

/* *ANCHOR - Footer */

.site-footer {
    background: unset;
    .site-footer-inner{
        & > div{
            padding-inline: clamp(1rem, calc(-1.372rem + 10.122vw), 8.75rem); /* min: 16px, max: 140px */;
            .region{
                width: unset;
                padding: unset;
                margin: unset;
            }
        }
        .site-footer__top{
            color: white;
            background-color: var(--color-gray-dark);
            border-radius: clamp(3.125rem, calc(0.466rem + 11.345vw), 7.5rem); /* min: 50px, max: 120px */;
            padding-top: clamp(2rem, calc(1.088rem + 3.89vw), 3.5rem); /* min: 32px, max: 56px */
            padding-bottom: clamp(2.5rem, calc(1.588rem + 3.89vw), 4rem); /* min: 40px, max: 64px */
            display: grid;
            row-gap: 2rem;
            @media (min-width:992px) {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 60px;
            }
            .region-footer-second{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 32px 16px;
                @media (min-width:992px) {
                grid-template-columns: 1fr;
                }
            }
        }
        .site-footer__bottom{
            margin-top: clamp(1rem, calc(0.696rem + 1.297vw), 1.5rem); /* min: 16px, max: 24px */;
            .region-footer-fifth{
                display: grid;
                grid-template-columns: 1fr auto;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;
                a#top{
                    color: var(--color-gray-dark);
                    border: 1px solid var(--color-gray-dark);
                    border-radius: 57px;
                    font-weight: 500;
                    font-size: 13px;
                    letter-spacing: 3%;
                    padding: 5px 8px;
                    @media (max-width: 768px) {
                        position: fixed;
                        right: 16px;
                        bottom: 16px;
                        border: 1px solid #23181533;
                        border-radius: 16px;
                        box-shadow: 0px 1px 4px 0px #00000026;
                        background-color: var(--color-bg);
                        &::before{
                            content: '';
                            display: block;
                            width: 24px;height: 24px;
                            background: url(image/icon-arrow-up.svg) no-repeat center top;
                        }
                    }
                }
            }
        }
    }
    .block{
        margin: unset;
        padding: unset;
        border: unset;
        h2.block-title{
            color: white;
            font-size: 16px;
            text-align: left;
            border-bottom: unset;
            margin-bottom: 10px;
        }
        .content{
            color: unset;
            font-size: 15px;
            padding: unset;
        }
        &#block-logo-footer{
            #brand-text{
                font-size: 1rem;
                color: var(--color-bg);
            }
        }
    }
    nav.menu--social {
        margin-top: 32px;
        & ul.nav {
            .nav-link{
                color: white;
                padding: unset;
            }
        }
    }
    form{
        &#newsletter{
            .form-box{
                width: 100%;
                border: 1px solid white;
                input{
                    color: white;
                }
            }
        }
    }
}

/* *!SECTION */

/* *SECTION - Menu */

/* *ANCHOR - Main */

#CollapsingNavbar {
    @media (max-width: 1199px) {
        grid-column: 1/-1;
        padding-bottom: 128px;
    }

    /* *ANCHOR - Search box */
    #block-search{
        .content{
            display: block !important;
            .search-form{
                .form-item{
                    width: 100%;
                }
                input.form-search{
                    padding: 15px 52px;
                    background: var(--color-bg) url(image/icon-search.svg) no-repeat left 23px center;
                    border-color: var(--color-gray-dark);
                    border-radius: 57px;
                }
                .form-actions{
                    display: none;
                }
            }
        }
        &.active{
            display: block !important;
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 100;
        }
    }

    button.search{
        font-size: 0 !important;
        color: transparent !important;
        display: block;
        width: 24px;height: 24px;
        background: url(image/icon-search.svg) no-repeat 0 0;
        border: unset;
        /* margin-right: 24px; */
        &.deactive{
            background-image: url(image/icon-close.svg);
        }
    }
    /* *ANCHOR - Mobile */
    nav.menu--main{
        ul.nav{
            row-gap: 5px;
            li.nav-item{
                &.dropdown{
                    justify-content: start;
                }
                .nav-link, .nav-link-{
                    color: var(--color-gray-dark);
                }
                .nav-link{
                    font-size: 17px;
                    font-weight: 600;
                }
                .nav-link-{
                    font-size: 16px;
                }
                @media (max-width: 1200px) {
                    ul.dropdown-menu{
                        background: transparent;
                        border-width: 1px 0;
                        border-color: var(--color-gray-dark);
                        border-radius: unset;
                        padding-block: 16px 0;
                        li.dropdown-item{
                            padding: unset;
                            margin-bottom: 1em;
                        }
                    }
                }
            }
            /* *ANCHOR - Desktop */
            @media (min-width: 1200px){
                column-gap: clamp(0.875rem, calc(-2.5rem + 4.5vw), 2rem); /* min: 14px, max: 32px */
                align-items: center;
                li.nav-item{
                    .nav-link{
                        padding-inline: unset;
                        &:hover, &.active, &.is-active{
                            text-decoration: underline;
                            text-decoration-color: var(--color-primary);
                            text-decoration-thickness: 4px;
                            text-underline-offset: 5px;
                        }
                    }
                    ul.dropdown-menu{
                        left: 50%;
                        transform: translateX(-50%);
                        padding: 20px 8px;
                        background-color: white;
                        border-radius: 15px;
                        box-shadow: 0px 4px 5px 0px #00000040;
                        .nav-link-{
                            font-size: 17px;
                            font-weight: 500;
                            padding-inline: unset;
                        }
                    }
                }
            }
        }
    }
    /* *ANCHOR - Language */
    #block-language-menu{
        select.language{
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background: transparent !important;
            border-radius: 57px !important;
            border-color: transparent !important;
            text-align: right !important;
        }
        @media (max-width:1199px) {
            margin-top: 40px;
            .content{
                display: flex;
                justify-content: space-between;
                align-items: center;
                &::before{
                    content: '語言';
                }
                select.language{
                    padding: 10px 20px;
                    border: 1px solid var(--color-gray-dark);
                }
            }
        }
    }
}

.dropdown-toggle::after {}

/* *ANCHOR - Social */

nav.menu--social{
    ul.nav{
        display: grid;
        grid-template-rows: repeat(4, auto);
        grid-auto-flow: column;
        gap: 10px;
        a{
            display: flex;
            align-items: center;
            gap: 8px;
            &::before{
                content: '';
                display: block;
                width: 20px;height: 20px;
                background: url(image/icon-soc-fb.svg) no-repeat center center;
            }
            &.ig::before{
                background-image: url(image/icon-soc-ig.svg);
            }
            &.yt::before{
                background-image: url(image/icon-soc-yt.svg);
            }
            &.line::before{
                background-image: url(image/icon-soc-line.svg);
            }
        }
    }
}

/* *!SECTION */

/* *SECTION - Entity & Element */

/* *ANCHOR - Element */

a:not(.btn) {
    color: var(--color-gray-dark);
    font-weight: 500;
    &:hover {
        text-decoration: none;
    }
}

/* *ANCHOR - Video iframe */

.oembed-provider-youtube{
    iframe{
        height: auto;
        aspect-ratio: 16/9;
    }
}

/* *ANCHOR - Entity */


.btn{
    padding-block: 13px;
    border-radius: 44px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.btn-primary{
    background-color: var(--color-primary);
}

.btn-yellow{
    color: var(--color-gray-dark);
    background-color: var(--color-yellow);
    padding-block: clamp(0.688rem, calc(0.33rem + 1.527vw), 1.063rem); /* min: 11px, max: 17px */;
    &.donate{
        font-size: clamp(0.875rem, calc(0.696rem + 0.763vw), 1.063rem); /* min: 14px, max: 17px */;
        padding-block: clamp(0.625rem, calc(0.506rem + 0.509vw), 0.75rem); /* min: 10px, max: 12px */;
        padding-inline: clamp(0.75rem, calc(-0.443rem + 5.089vw), 2rem); /* min: 12px, max: 32px */;
    }
}

.entity-more {
    a {
        display: inline-block;
        border-radius: 57px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }
    &.arrow a{
        padding-right: 50px;
        background: url(image/icon-more.svg) no-repeat right center / 42px auto;
    }
    &.primary a{
        background-color: var(--color-primary);
        color: white;
        border-radius: 40px;
        padding-block: clamp(0.688rem, calc(0.21rem + 2.036vw), 1.188rem); /* min: 11px, max: 19px */;
        padding-inline: clamp(1.5rem, calc(0.546rem + 4.071vw), 2.5rem); /* min: 24px, max: 40px */;
    }
    &.yellow a{
        color: var(--color-gray-dark);
        background-color: var(--color-yellow);
        padding-block: clamp(0.688rem, calc(0.33rem + 1.527vw), 1.063rem); /* min: 11px, max: 17px */;
        padding-inline: clamp(5.156rem, calc(3.158rem + 8.524vw), 7.25rem); /* min: 82.5px, max: 116px */;
    }
}

.entity-img {
    img {
        width: 100%;
    }

    &.round {
        img {
            border-radius: 50%;
        }
    }
}

.trim{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entity-title {
    &,
    & a {
        color: var(--color-gray-dark);
        font-size: var(--font-size-h3);
        font-weight: 700;
        line-height: 1.2;
    }
    &.trim{
        -webkit-line-clamp: 2;
    }
    &.underline{
        &::after{
            display: block;
            content: '';
            width: 16px;height: 3px;
            background-color: var(--color-primary);
            margin-top: 9px;
        }
    }
    &.h1{
        font-size: var(--font-size-h1);
    }
}

.entity-subtitle{
    font-size: var(--font-size-subtitle);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-primary);
}

.entity-body {
    color: var(--color-gray-dark);
    &.trim{
        -webkit-line-clamp: 3;
    }
}

.entity-footer {
    margin-top: 24px;
}

.entity-date {
    color: var(--color-gray-dark);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.field--name-field-tags ul.links a,
.entity-tag {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    padding: 0 12px 2px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    color: white;
    background-color: var(--color-primary);
}

.entity-service-tag a{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary) !important;
}

.entity-file{
    a{
        display: block;
        width: 40px;height: 40px;
        font-size: 0;
        color: transparent;
        background: url(image/icon-arrow-right.svg) no-repeat center center;
    }
}

.entity-edit a {
    background-color: white;
    padding-inline: 8px;
    border-radius: 16px;
    border: 1px solid var(--color-gray-dark);
    font-size: 0.8em;
}

.views-field{
    & + .views-field:not([class*="views-field-fieldset"]){
        &:has(.btn),
        &:has(.entity-more){
            margin-top: clamp(1rem, calc(0.523rem + 2.036vw), 1.5rem); /* min: 16px, max: 24px */;
        }
        &:has(.entity-more.arrow){
            margin-top: clamp(0.5rem, calc(0.023rem + 2.036vw), 1rem); /* min: 8px, max: 16px */
        }
        &:has(.entity-body){
            margin-top: 1em;
        }
        &:has(.entity-date){
            margin-top: clamp(0.5rem, calc(0.023rem + 2.036vw), 1rem); /* min: 8px, max: 16px */;
            margin-bottom: 8px;
        }
    }
}

/* *ANCHOR - Share */

.addtoany_list {
    transform: translateY(calc(100% + 10px));
    @media (min-width: 768px) {
        transform: translateY(calc(100% + 60px));
    }
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    &::before{
        content: '分享';
    }
    a {
        background: transparent url(image/icon-share-fb.svg) no-repeat center center / contain;
        margin-left: 8px;
        padding: unset;
        span.a2a_svg {
            background-color: unset !important;

            svg {
                display: none;
            }
        }
        &.a2a_button_line {
            background-image: url(image/icon-share-line.svg);
        }
        &.a2a_button_x {
            background-image: url(image/icon-share-x.svg);
        }
        /* &.a2a_button_copy_link {
            background-image: url(images/btn-link.svg);
        } */
    }
}

/* *ANCHOR - Card */

.card{
    border-radius: clamp(1.875rem, calc(0.086rem + 7.634vw), 3.75rem); /* min: 30px, max: 60px */;
    overflow: hidden;
    .card-body{
        padding-inline: clamp(1rem, calc(0.523rem + 2.036vw), 1.5rem); /* min: 16px, max: 24px */;
        padding-top: clamp(1.25rem, calc(1.011rem + 1.018vw), 1.5rem); /* min: 20px, max: 24px */;
        padding-bottom: clamp(1.25rem, calc(0.654rem + 2.545vw), 1.875rem); /* min: 20px, max: 30px */;
        .entity-body{
            font-size: 15px;
            line-height: 1.5;
        }
        .btn{
            width: 100%;
            max-width: 300px;
        }
    }
}

/* *ANCHOR - Entity List */

.entity-list{
    ul.d-grid{
        grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr) );
        gap: 40px 60px;
    }
    &.column-3{
        ul.d-grid{
            grid-template-columns: 1fr;
            row-gap: 16px;
            @media (min-width:1200px){
                grid-template-columns: repeat(3, minmax(306px, 355px));
                gap: 10px;
                justify-content: space-between;
            }
        }   
    }
    &.column-6{
        ul.d-grid{
            grid-template-columns: repeat(2, 1fr);
            gap: 16px 45px;
            @media (min-width:768px){
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
            }
            @media (min-width:1200px){
                grid-template-columns: repeat(6, 1fr);
            }
        }   
    }
    &.alternating{
        ul.d-grid{
            grid-template-columns: 1fr;
            row-gap: clamp(2rem, calc(0.33rem + 7.125vw), 3.75rem); /* min: 32px, max: 60px */;
            li.d-grid{
                @media (min-width:768px) {
                    grid-template-columns: 47% 1fr;
                    gap: 32px 60px;
                    align-items: center;
                    &:nth-child(2n+1){
                        grid-template-columns: 1fr 47%;
                        & > .views-field:first-child{
                            order: 2;
                        }
                    }
                }
            }
        }
    }
}

.narrow{
    max-width: 1320px;
    margin-inline: auto;
}


/* *ANCHOR - Block */

.block {
    .block-subtitle,
    h2.block-title::before{
        color: var(--color-primary);
        font-size: var(--font-size-subtitle);
        font-weight: bolder;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
    }
    h2.block-title {
        color: var(--color-gray-dark);
        font-size: clamp(1.5rem, calc(1.023rem + 2.036vw), 2rem); /* min: 24px, max: 32px */
        line-height: 1.2;
        letter-spacing: 0.02em;
        margin-top: 0;
        margin-bottom: clamp(0.75rem, calc(0.034rem + 3.053vw), 1.5rem); /* min: 12px, max: 24px */
    }
    .text-content{
        margin-bottom: clamp(1rem, calc(-0.431rem + 6.107vw), 2.5rem); /* min: 16px, max: 40px */;
        .views-field-body{
            font-size: clamp(0.938rem, calc(0.818rem + 0.509vw), 1.063rem); /* min: 15px, max: 17px */
        }
    }
}

.main-content,
.featured-bottom{
    .block{
        h2.block-title{
            text-align: center;
            &.news::before{
                content: 'News & Stories';
            }
            &.partner::before{
                content: 'News & Stories';
            }
            &.faq::before{
                content: 'FAQ';
            }
            &.video::before{
                content: 'Related Videos';
            }
            &.podcast::before{
                content: 'Podcast';
            }
            &.application::before{
                content: 'Application Form';
            }
        }
    }
}

.sidebar{
    .block{
        margin: unset;
        h2.block-title{
            font-size: 20px;
            padding-bottom: clamp(0.5rem, calc(0.023rem + 2.036vw), 1rem); /* min: 8px, max: 16px */
            border-bottom: 1.5px solid var(--color-gray-dark-light);
            margin-bottom: 24px;
            @media (max-width:768px) {
                text-align: center;
                border-bottom: unset;
                position: relative;
                &:not(.is-open){
                    padding: unset;
                    margin-bottom: unset;
                }
                &::before{
                    content: '';
                    display: block;
                    width: 25px;height: 25px;
                    background: url(image/icon-arrow-down.svg) no-repeat center center / contain;
                    position: absolute;
                    top: 5px;
                    right: 0;
                }
                &.is-open{
                    &::before{
                        transform: scale(-1);
                    }
                }
                &::after{
                    content: '';
                    display: block;
                    width: 16px;height: 3px;
                    background-color: var(--color-primary);
                    margin-top: 9px;
                    margin-inline: auto;
                }
            }
        }
        ul.menu{
            padding-left: 1rem;
            display: grid;
            row-gap: 1em;
            margin-bottom: unset;
            li{
                list-style-type: disc;
                &::marker{
                    color: var(--color-primary);
                    font-size: 1.2em;
                }
                a{
                    font-weight: 700;
                    line-height: 1;
                    &:hover, &.is-active{
                        color: var(--color-primary);
                    }
                }
                ul.menu{
                    margin-top: 1em;
                    li::marker{
                        color: var(--color-primary);
                        font-size: 1.2em;
                    }
                }
            }
        }
    }
}

/* *ANCHOR - CP: Title Block */

.name-cp{
    .view-content{
        text-align: center;
        max-width: 645px;
        margin-inline: auto;
    }
}

/* *ANCHOR - Form */

form{
    &#newsletter{
        .form-box{
            border: 1px solid var(--color-gray-dark);
            border-radius: 57px;
            padding: 4px 4px 4px 20px;
            margin-bottom: 10px;
            display: inline-flex;
            &:has(input:focus-within){
                border-color: var(--color-primary);
            }
            input{
                flex: 1;
                background-color: transparent;
                border: unset;
                color: var(--color-gray-dark);
                &:focus-visible{
                    outline: none;
                }
            }
            button{
                padding: 11px 24px;
            }
        }
        .form-note{
            font-size: 0.9em;
        }
    }
}

.layout{
    form{
        max-width: 870px;
        margin-inline: auto;
        background-color: white;
        border-radius: 30px;
        padding: 40px 32px;
        box-shadow: 1px 2px 3px 0px #00000026;
        .form-required::after{
            content: '*';
            color: var(--color-primary);
            background: unset;
            vertical-align: unset;
        }
        label{
            font-weight: 400;
            margin-bottom: 8px;
        }
        .form-text,
        .form-select,
        .form-control{
            padding: 12px 20px;
            border: 1px solid var(--color-gray-dark);
            border-radius: 57px;
            &.form-textarea{
                border-radius: 30px;
            }
        }
        .form-actions{
            text-align: center;
            margin-top: 24px;
            .btn-primary{
                padding-inline: 116px;
            }
        }
    }
}

.crm-container-md{
    form{
        max-width: 870px;
        margin-inline: auto;
        background-color: white;
        border-radius: 30px;
        padding: 40px 32px;
        box-shadow: 1px 2px 3px 0px #00000026;
        .crm-section{
            .label{
                line-height: 45px;
            }
            &:has(.form-radio){
                .label{
                    line-height: 26px;
                }
            }
            label{
                font-weight: 400;
                .crm-marker{
                    color: var(--color-primary);
                }
            }
            .crm-form-elem{
                &.dateplugin input.dateplugin,
                select.form-select,
                input[type="text"]{
                    &, &:hover{
                        padding: 12px 20px;
                        border: 1px solid var(--color-gray-dark) !important;
                        border-radius: 57px !important;
                    }
                    &:focus-visible{
                        outline: 2px solid var(--color-primary) !important;
                        box-shadow: 1px 1px 8px 1px var(--color-primary) !important;
                    }
                }
                .form-textarea{
                    border-radius: 30px;
                }
            }
            .crm-form-readonly,
            .dateplugin{
                &::after {
                    top: 15px;
                    right: 10px;
                }
            }
        }
        .form-submit{
            background-color: var(--color-primary);
            padding: 13px !important;
            border-radius: 44px;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }
    }
}

/* *ANCHOR - Webform */

.webform-name{
    .webform-flexbox{
        .webform-name__last{
            order: -1;
        }
    }
}

/* *ANCHOR - Pager */

ul.pagination {
    align-items: center;
    gap: 5px;
    li.page-item {
        .page-link {
            line-height: 1;
            background-color: unset;
            border: unset;
            width: 40px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        a.page-link {
            &:not([title=""]) {
                font-size: 0;
                color: transparent;
                background: url(image/icon-arrow-end.svg) no-repeat center center;
            }
            &[title="移至第一頁"] {
                transform: scaleX(-1);
            }
            &[title^="到"] {
                background-image: url(image/icon-arrow-right.svg);
            }
            &[title="到上一頁"] {
                transform: scaleX(-1);
            }
        }

        &.active {
            span.page-link {
                color: white;
                background-color: var(--color-primary);
            }
        }
    }
}

/* *ANCHOR - Accordion */

.ui-accordion{
    max-width: 870px;
    margin-inline: auto;
    .view-content{
        & > .views-row{
            counter-reset: question;
            & > .views-row{
                counter-increment: question;
                &:not(:first-child){
                    margin-top: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */
                }
            }
        } 
    }
    .ui-accordion-header,
    .ui-widget-content{
        padding-block: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */
        padding-inline: clamp(0.75rem, calc(0.034rem + 3.053vw), 1.5rem); /* min: 12px, max: 24px */
        border-radius: 30px;
        box-shadow: 1px 2px 3px 0px #00000026;
    }
    .ui-accordion-header{
        background-color: white;
        border: unset;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: flex-start;
        column-gap: clamp(0.5rem, calc(0.023rem + 2.036vw), 1rem); /* min: 8px, max: 16px */
        &::before{
            /* content: 'Q'counter(question); */
            content: counter(question);
            color: white;
            font-family: 'EB Garamond';
            font-size: clamp(0.938rem, calc(0.759rem + 0.763vw), 1.125rem); /* min: 15px, max: 18px */
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            width: clamp(1.875rem, calc(1.279rem + 2.545vw), 2.5rem); /* min: 30px, max: 40px */
            aspect-ratio: 1/1;
            background: var(--color-primary);
            border-radius: 50%;
        }
        &::after{
            content: '';
            display: block;
            width: 24px;height: 24px;
            background: url(image/icon-arrow-down.svg) no-repeat 0 0 / contain;
        }
        &.ui-accordion-header-active{
            border: unset;
            &::after{
                transform: scale(-1);
            }
        }
        .entity-title{
            font-size: var(--font-size-h4);
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.03em;
        }
    }
    /* &.name-recruitment{
        .ui-accordion-header{
            &::before{
                content: counter(question);
            }
        }
    } */
    .ui-widget-content{
        margin-top: clamp(0.5rem, calc(0.261rem + 1.018vw), 0.75rem); /* min: 8px, max: 12px */
        background-color: var(--color-blue-light);
    }
}

/* *ANCHOR - Views */

.more-link{
    a{
        font-size: 16px;
        font-weight: 600 !important;
        display: inline-block;
        padding: 8px 72px 8px 0;
        background: url(image/icon-more.svg) no-repeat right center;
    }
}

/* *ANCHOR - Slick */

.slick{
    .entity-img img{
        width: 100%;
    }
    .slick__arrow {
        & .slick-arrow {
            width: 40px;
            height: 40px;
            background: url(image/icon-next.svg) no-repeat 0 0 / contain;
    
            &::before {
                content: unset;
            }
    
            &.slick-prev {
                transform: scaleX(-1) translateY(-50%);
            }
        }
    }
    ul.slick-dots{
        margin: unset;
        padding: unset;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
        button{
            display: block;
            width: 8px;height: 8px;
            background-color: rgba(35, 24, 21, 0.35);
            border-radius: 50%;
            &::before{
                content: unset;
            }
        }
        li{
            all: unset;
            &.slick-active{
                button{
                    width: 10px;height: 10px;
                    background-color: var(--color-bg);
                    border: 2px solid var(--color-gray-dark);
                }
            }
        }
    }
}

/* *ANCHOR - Slide frontpage animation */

.name-slide {
    &.front {
        & .slick {
            & .slide {
                .layout-left {
                    text-align: center;
                    opacity: 0;
                    transform: translateX(-50px);
                    transition: none;
                }
                &.slick-current.slick-active .layout-left {
                    animation: slideInFromLeft 0.6s ease-out forwards;
                }

                @media (min-width: 1200px) {
                    display: flex;
                    gap: 10%;

                    .layout-right {
                        order: 2;
                    }

                    .layout-left {
                        width: 29%;
                        max-width: 473px;
                        text-align: unset;
                    }
                }

                .slide-image {
                    position: relative;
                    padding-inline: 11% 6%;

                    &>div {
                        display: inline-block;
                        border-radius: 50%;
                        border: 8px solid var(--color-bg);

                        img {
                            border-radius: 50%;
                        }

                        &:not(.img-center) {
                            position: absolute;
                            width: clamp(5.813rem, calc(0.67rem + 21.096vw), 13.75rem);
                            /* min: 93px, max: 220px */
                            ;
                            aspect-ratio: 1/1;
                            border-radius: 50%;
                            background-color: var(--color-yellow);
                        }

                        &.img-tr {
                            top: 15%;
                            right: 0;
                            opacity: 0;
                            transform: translate(50px, -50px);
                            transition: none;
                        }

                        &.img-bl {
                            bottom: 15%;
                            left: 0;
                            background-color: var(--color-primary);
                            opacity: 0;
                            transform: translate(-50px, 50px);
                            transition: none;
                        }
                    }
                }
                &.slick-current.slick-active {
                    .img-tr {
                        animation: slideInFromTopRight 0.6s ease-out forwards;
                    }
                    .img-bl{
                        animation: slideInFromBottomLeft 0.6s ease-out forwards;
                    }
                }
            }
        }
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideInFromTopRight {
    from {
        opacity: 0;
        transform: translate(50px, -50px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes slideInFromBottomLeft {
    from {
        opacity: 0;
        transform: translate(-50px, 50px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* *ANCHOR - Slider */

.slider{
    max-width: 1424px;
    margin-inline: auto;
    position: relative;
    &.name-partner{
        .slick__arrow{
            top: 50px;
            transform: unset;
        }
    }
    .slick-list {
        @media (min-width: 1200px){
            padding-inline: 40px 0;
        }
    }
    .slide{
        margin-right: clamp(1rem, calc(-1.624rem + 11.196vw), 3.75rem); /* min: 16px, max: 60px */;
    }
    .slick--optionset--slide-2-3{
        .slide{
            @media (max-width:768px) {
                width: 265px !important;
            }
        }
    }
    .slick-dotted.slick-slider {
        margin-bottom: 25px;
    }

    ul.slick-dots{
        position: unset;
        margin-top: clamp(1.875rem, calc(1.279rem + 2.545vw), 2.5rem); /* min: 30px, max: 40px */;
    }
    @media (max-width: 1200px){
        .slick__arrow{
            top: unset;
            bottom: 5px;
            width: 250px;
            left: 50%;
            transform: translateX(-50%);
            .slick-arrow{
                width: 24px;height: 24px;
            }
        }
        .more-link{
            text-align: center;
        }
    }
    @media (min-width: 1200px){
        .more-link{
            position: absolute;
            top: -76px;
            right: 60px;
        }
    }
}

/* *!SECTION */

/* *SECTION - Frontpage */

.path-frontpage {
    .node__content{
        .layout{
            margin-bottom: clamp(2.5rem, calc(0.115rem + 10.178vw), 5rem); /* min: 40px, max: 80px */
        }
    }
    #support{
        background: url(image/bg-slide.png) no-repeat right top / 100%;
        @media (min-width:768px) {
            background-size: auto;
        }
        @media (min-width:1200px) {
            background-size: 67% auto;
        }
        @media (min-width:1400px) {
            .container{
                background: url(image/shape-01.svg) no-repeat left 8.5% top 32.5%,
                            url(image/shape-02.svg) no-repeat right 8.6% top 36%,
                            url(image/shape-02.svg) no-repeat left 0 bottom 24%,
                            url(image/shape-03.svg) no-repeat right 0 bottom 16%;
            }
        }
        /* *ANCHOR - Slideshow */
        .name-slide.front{
            .slick{
                .slick__arrow{
                    width: 155px;
                    height: 40px;
                    top: unset;
                    left: unset;
                    transform: unset;
                    right: 0;
                    bottom: 77px;
                }
                ul.slick-dots{
                    bottom: 77px;
                    right: 40px;
                    width: 60px;height: 40px;
                    counter-reset: number;
                    &::after {
                        content: ' / ' counter(number, decimal-leading-zero);
                        position: absolute;
                        right:0;
                        top: 5px;
                    }
                    li{
                        counter-increment: number;
                        position: absolute;
                        left:0;
                        top: 5px;
                        &.slick-active{
                            &::before {
                                content: counter(number, decimal-leading-zero);
                            }
                        }
                        button{ display: none;}
                    }
                }
            }
            .layout-left{
                margin-top: 24px;
                &::before{
                    content: '';
                    display: block;
                    width: 16px;height: 3px;
                    background-color: var(--color-primary);
                    margin-inline: auto;
                    margin-bottom: clamp(0.5rem, calc(0.023rem + 2.036vw), 1rem); /* min: 8px, max: 16px */;
                }
                @media (min-width:1200px) {
                    margin-top: 10%;
                    &::before{
                        margin-inline: 0 auto;
                    }
                    position: relative;
                    &::after{
                        content: '';
                        display: block;
                        width: 14px;height: 82px;
                        background: url(image/icon-scroll.svg) no-repeat 0 0;
                        position: absolute;
                        left: 0;
                        bottom: 64px;
                    }
                }
                .entity-more{
                    margin-top: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */;
                }
            }
        }
        /* *ANCHOR - Donate */
        .block:has(.name-cp){
            margin-top: 40px;
            margin-bottom: clamp(1rem, calc(-0.431rem + 6.107vw), 2.5rem); /* min: 16px, max: 40px */
        }
    }
    /* *ANCHOR - Bottom */
    #bottom{
        @media (min-width:1400px) {
            background: url(image/shape-04.svg) no-repeat left 0 top 37%,
                        url(image/shape-05.svg) no-repeat right 0 bottom 24%;
        }
        .layout__region + .layout__region,
        #partner{
            margin-top: clamp(2.5rem, calc(-1.078rem + 15.267vw), 6.25rem); /* min: 40px, max: 100px */;
        }
        /* *ANCHOR - Impact */
        #impact{
            padding-inline: 24px;
            padding-top: clamp(2rem, calc(0.569rem + 6.107vw), 3.5rem); /* min: 32px, max: 56px */;
            padding-bottom: clamp(2rem, calc(-0.863rem + 12.214vw), 5rem); /* min: 32px, max: 80px */;
            background: var(--color-primary) url(image/bg-impact.png) no-repeat 0 0 / cover;
            border-radius: clamp(3.125rem, calc(1.136rem + 8.485vw), 7.5rem); /* min: 50px, max: 120px */;
            .text-content{
                .block-title, .views-field-body{
                    color: white;
                }
                .block-subtitle{
                    color: var(--color-yellow);
                }
            }
            .name-impact{
                max-width: 1192px;
                margin-inline: auto;
                li{
                    text-align: center;
                    background-color: var(--color-bg);
                    box-shadow: 1px 1px 3px 0px #00000033;
                    border-radius: clamp(1.875rem, calc(0.682rem + 5.089vw), 3.125rem); /* min: 30px, max: 50px */;
                    padding-top: clamp(0.75rem, calc(-0.92rem + 7.125vw), 2.5rem); /* min: 12px, max: 40px */;
                    padding-bottom: clamp(1.25rem, calc(-0.42rem + 7.125vw), 3rem); /* min: 20px, max: 48px */;
                    position: relative;
                    .views-field-info{
                        font-size: clamp(1rem, calc(0.94rem + 0.254vw), 1.063rem); /* min: 16px, max: 17px */
                        line-height: 1;
                        background-color: var(--color-yellow);
                        position: absolute;
                        top:5px;
                        left: clamp(0.313rem, calc(0.074rem + 1.018vw), 0.563rem); /* min: 5px, max: 9px */;
                        padding: 10px clamp(1.25rem, calc(1.011rem + 1.018vw), 1.5rem); /* min: 20px, max: 24px */
                        border-top-left-radius: clamp(1.688rem, calc(0.316rem + 5.852vw), 3.125rem); /* min: 27px, max: 50px */;
                        border-bottom-right-radius: clamp(1.688rem, calc(0.316rem + 5.852vw), 3.125rem); /* min: 27px, max: 50px */;
                    }
                    .entity-logo{
                        margin-bottom: clamp(0.563rem, calc(0.026rem + 2.29vw), 1.125rem); /* min: 18px, max: 9px */;
                        img{
                            width: clamp(1.5rem, calc(0.546rem + 4.071vw), 2.5rem); /* min: 24px, max: 40px */
                        }
                    }
                    .entity-number{
                        display: inline-block;
                        font-size: clamp(3.125rem, calc(2.857rem + 1.143vw), 4rem); /* min: 50px, max: 64px */;
                        font-family: "EB Garamond";
                        font-weight: 700;
                        line-height: 1;
                        position: relative;
                        .unit{
                            font-size: clamp(0.75rem, calc(0.636rem + 0.485vw), 1rem); /* min: 12px, max: 16px */;
                            font-weight: 400;
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            transform: translateX(100%);
                            padding-left: 4px;
                        }
                    }
                }
            }
        }
        /* *ANCHOR - Partner */
        #partner{
            background-color: var(--color-blue-light);
            border-radius: clamp(3.125rem, calc(1.136rem + 8.485vw), 7.5rem); /* min: 50px, max: 120px */;
            padding-top: clamp(2rem, calc(0.864rem + 4.848vw), 4.5rem); /* min: 32px, max: 72px */;
            padding-bottom: clamp(2.5rem, calc(1.591rem + 3.879vw), 4.5rem); /* min: 40px, max: 72px */;
            padding-inline: 17px;
            .slide{
                margin-right: clamp(1rem, calc(0.631rem + 1.576vw), 1.813rem); /* min: 16px, max: 29px */
            }
        }
    }
}


/* *!SECTION - Frontpage */

/* *SECTION - Section */

/* *ANCHOR - Banner */

.featured-top{
    &:has(#block-banner-service){
        #block-banner-1,
        #block-banner-2{
            display: none;
        }
    }
    &:has(#block-banner-2){
        #block-banner-1{
            display: none;
        }
    }
}

.region-featured-bottom-first{
    &:has(#block-cta-2){
        #block-cta-1{
            display: none;
        }
    }
}

.banner{
    height: clamp(9.375rem, calc(3.409rem + 25.455vw), 22.5rem); /* min: 150px, max: 360px */;
    border-radius: clamp(3.125rem, calc(1.136rem + 8.485vw), 7.5rem); /* min: 50px, max: 120px */;
    overflow: hidden;
    padding: unset;
    .block-inner{
        height: 100%;
        padding-block: clamp(3.125rem, calc(1.818rem + 5.576vw), 6rem); /* min: 50px, max: 96px */;
        padding-inline: clamp(1.5rem, calc(0.364rem + 4.848vw), 4rem); /* min: 24px, max: 64px */;
        background: linear-gradient(270deg, rgba(0, 91, 171, 0.5) 0%, var(--color-primary) 52.88%);
        @media (min-width:1024px) {
            background: linear-gradient(270deg, transparent, transparent 43%, var(--color-primary) 58%, var(--color-primary) 100%);            
        }
        .entity-subtitle{
            color: var(--color-yellow);
            margin-bottom: 9px;
        }
        .entity-title{
            color: white;
            font-size: var(--font-size-h2);
        }
        .entity-body{
            margin-top: 1em;
            color: var(--color-blue-light);
            line-height: 1.8;
            width:36%;
            max-width: 585px;
            @media (max-width:1024px) {
                display: none;
            }
        }
    }
    &.cta{
        .block-inner{
            background: 
            linear-gradient(135deg, rgba(255, 255, 255, 0.7) 3.68%, rgba(255, 255, 255, 0) 26%),
            linear-gradient(270deg, rgba(0, 91, 171, 0.5) 0%, var(--color-yellow) 52.88%);
            @media (min-width:1024px) {
                background: 
                linear-gradient(135deg, rgba(255, 255, 255, 0.7) 3.68%, rgba(255, 255, 255, 0) 26%),          
                linear-gradient(270deg, transparent, transparent 43%, var(--color-yellow) 57%, var(--color-yellow) 100%);
            }
            .entity-title, .entity-body{
                color: var(--color-gray-dark);
            }
        }
    }
}

/* *ANCHOR - Submenu */
.views-exposed-form {
    .form-item {
        width: 100%;
    }
}

.bef-links {
    ul {
        list-style: none;
        display: grid;
        grid-auto-flow: column;
        justify-content: flex-start;
        gap: 1rem;
        padding: unset;
        margin: unset;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid var(--color-gray-dark-light);
        li a {
            display: block;
            color: var(--color-gray-dark);
            font-size: 18px;
            font-weight: 500;
            padding: 4px 16px 16px;
            white-space: nowrap;
            position: relative;
            &.bef-link--selected,
            &:hover {
                font-weight: 700px;
                &::after{
                    content: '';
                    display: block;
                    width: 100%;height: 4px;
                    background: var(--color-primary);
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    border-radius: 4px;
                }
            }
        }
    }
}

main .block-menu {
    margin-bottom: 67px;

    ul.navbar-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 48px;

        li {
            a.nav-link {
                font-size: 20px;
                font-weight: 500;
                color: var(--color-gray-dark);

                &.active {
                    font-size: 28px !important;
                    font-weight: 700 !important;
                    letter-spacing: 1px;
                    border-bottom: 6px solid var(--color-raptor);
                    padding-block: 0;
                }
            }
        }
    }
}


/* *ANCHOR - submenu shadow */

.bef-links ul{
    overflow-x: auto;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.bef-links ul.has-scroll-shadow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
    pointer-events: none;
}


/* *ANCHOR - History */

.name-history{
    .history-toc-menu{
        position: sticky;
        top: calc(75px + var(--drupal-displace-offset-top, 0px));
        left: 0;
        z-index: 5;
        ul{
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            gap: 1.5em;
            background-color: white;
            padding: 20px;
            border-radius: 30px;
            box-shadow: 1px 2px 3px 0px #00000026;
            max-width: 100%;
            overflow-x: auto;
            &::before{
                content: 'Year';
                color: color-mix(in srgb, var(--color-primary) 70%, transparent);
                font-family: 'EB Garamond';
                font-size: clamp(1.5rem, calc(1.216rem + 1.212vw), 2.125rem); /* min: 24px, max: 34px */
                font-style: italic;
            }
            li{
                a{
                    font-size: clamp(1.5rem, calc(1.216rem + 1.212vw), 2.125rem); /* min: 24px, max: 34px */
                    font-family: 'EB Garamond';
                    letter-spacing: 0.08em;
                    line-height: 1;
                    &.active{
                        font-weight: 700;
                        border-bottom: 4px solid var(--color-primary);
                    }
                }
            }
        }
    }
    .view-content{
        h3{
            font-size: 40px;
            font-family: 'EB Garamond';
            text-align: center;
            clear: both;
            letter-spacing: 0.03em;
            margin-block: unset;
        }
        ul.list-unstyled{
            padding-block: 32px;
            position: relative;
            &::before{
                content: '';
                display: block;
                width: 1px;height: 100%;
                background-color: color-mix(in srgb, var(--color-gray-dark) 60%, transparent);
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
            li.card:not(:first-child){
                margin-top: 40px;
            }
        }
    }
    @media (min-width:1200px) {
        .view-inner{
            display: grid;
            grid-template-columns: 162px 1fr;
        }
        .history-toc-menu{
            align-self: self-start;
            ul{
                grid-auto-flow: row;
                justify-content: center;
            }
        }
        .view-content{
            max-width: 874px;
            margin-inline: auto;
            ul{
                &::after{
                    content: '';
                    display: table;
                    clear: both;
                }
                li.card{
                    max-width: 377px;
                    &.is-odd{
                        float: left;
                    }
                    &.is-even{
                        float: right;
                    }
                    &:not(:first-child){
                        margin-top: 150px;
                        & + .is-odd,
                        & + .is-even{
                            margin-top: 75px;
                        }
                    }
                }
            }
        }
    }
}

/* *ANCHOR - Service */

.name-service{
    &.column-6{
        .entity-title{
            margin-top: clamp(0.625rem, calc(0.148rem + 2.036vw), 1.125rem); /* min: 10px, max: 18px */;
            a{
                font-size: 17px;
                padding-right: 20px;
                background: url(image/icon-arrow-right.svg) no-repeat right center;
            }
        }
    }
    &.alternating{
        ul.d-grid{
            row-gap: unset;
        }
        li.d-grid{
            .entity-img{
                position: relative;
                background: url(image/shape-01.svg) no-repeat right 25% top / 160px 131px;
                padding-top: 32px;
                @media (min-width: 768px){
                    padding-top: unset;
                    padding-bottom: clamp(2rem, calc(0.33rem + 7.125vw), 3.75rem) !important; /* min: 32px, max: 60px */;
                    background-position: right bottom;
                }
                @media (min-width: 1200px){
                    background-size: 350px 288px;
                }
                img{
                    width: clamp(10rem, calc(-11.35rem + 91.094vw), 32.375rem); /* min: 160px, max: 518px */;
                    aspect-ratio: 1/1;
                }
            }
            &:nth-child(2n){
                .entity-img{
                    background-image: url(image/shape-04.svg);
                    background-position: left 25% top;
                    @media (min-width: 768px){
                        background-position: left bottom;
                    }
                }
            }
            @media (min-width: 1200px) {
                &:nth-child(2n+1){
                    padding-left: 15% !important;
                    grid-template-columns: 1fr 57% !important;
                }
                &:nth-child(2n){
                    grid-template-columns: 57% 1fr !important;
                    padding-right: 15% !important;
                    .entity-img{
                        text-align: right;
                    }
                }
            }
            .entity-title{
                margin-block: 12px;
            }
            .entity-body{
                margin-bottom: 8px;
                line-height: 1.5;
            }
            @media (max-width: 768px) {
                text-align: center;
                .entity-title::after{
                    margin-inline: auto;
                }          
            }
        }
    }
}

/* *ANCHOR - News */

.name-news{
    .card-body{
        padding-top: clamp(1rem, calc(0.761rem + 1.018vw), 1.25rem); /* min: 16px, max: 20px */
        padding-inline: clamp(1rem, calc(0.523rem + 2.036vw), 1.5rem); /* min: 16px, max: 24px */
        padding-bottom: 24px;
        .entity-date{
            color: color-mix(in srgb, var(--color-gray-dark) 60%, transparent);
        }
        .entity-body.trim{
            -webkit-line-clamp: 2;
        }
    }
    /* *ANCHOR - News/Podcast*/
    &.podcast{
        .view-content{
            max-width: 870px;
            margin-inline: auto;
            .entity-row{
                margin-bottom: 32px;
                padding: 24px;
                background-color: white;
                border-radius: 30px;
                box-shadow: 1px 2px 3px 0px #00000026;
                &:last-child{
                    margin-bottom: unset;
                }
                &:nth-child(2n){
                    background-color: var(--color-blue-light);
                }
                .entity-row-inner{
                    display: grid;
                    @media (min-width:768px) {
                        grid-template-columns: 180px 1fr;
                    }
                    gap: 24px;
                    background: url(image/icon-podcast.svg) no-repeat right top;
                    .entity-img{
                        img{
                            border-radius: 24px;
                        }
                    }
                }
            }
        }
    }
}

#block-podcast{
    padding-top: 100px;
    background: url(image/bg-01.svg) no-repeat center 0;
}

/* *ANCHOR - Partner */

.name-partner{
    .entity-logo{
        background-color: white;
        min-height: clamp(4.438rem, calc(3.898rem + 2.303vw), 5.625rem); /* min: 71px, max: 90px */
        border: 1px solid #2318151A;
        border-radius: clamp(1rem, calc(0.602rem + 1.697vw), 1.875rem); /* min: 16px, max: 30px */;
        padding-block: clamp(0.656rem, calc(0.358rem + 1.273vw), 1.313rem); /* min: 10.5px, max: 21px */
        padding-inline: clamp(1.156rem, calc(0.631rem + 2.242vw), 2.313rem); /* min: 18.5px, max: 37px */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* *ANCHOR - Join */

.layout.join{
    @media (min-width: 1200px){
        background: url(image/bg-02.svg) repeat-y left top 200px;
    }
    .block-webform{
        margin-top: 100px;
    }
}

/* *ANCHOR - Donate */

.name-donate{
    .entity-img{
        aspect-ratio: 400/225;
        img{
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
        }
    }
}

/* *ANCHOR - Contribute */

.name-contribute{
    max-width: 870px;
    margin-inline: auto;
    margin-top: 40px;
    .entity-row-inner{
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2em;
        border-bottom: 1px solid var(--color-gray-dark);
        padding-block: 1em;
    }
}


/* *!SECTION - Section */

/* *SECTION - Term */

.page-vocabulary-tags{
    h1.title{
        text-align: center;
        margin-bottom: 1em;
    }
}

/* *!SECTION - Term */

/* *SECTION - Node */

body.path-node {
    .main-content{
        h1.title{
            font-size: var(--font-size-h2);
            padding-bottom: clamp(1rem, calc(0.523rem + 2.036vw), 1.5rem); /* min: 16px, max: 24px */
            margin-bottom: clamp(1.5rem, calc(1.023rem + 2.036vw), 2rem); /* min: 24px, max: 32px */
            border-bottom: 1.5px solid var(--color-gray-dark-light);
        }
    }
}

.node {
    .field--name-field-tags{
        ul.links{
            margin: 2em 0 1em;
            padding: unset;
            display: inline-flex;
            
        }
    }
    .inline__links{
        clear: both;
    }
}

/* *ANCHOR - Service */

.node--type-service{
    .layout{
        &:not(:last-child){
            margin-bottom: clamp(2.5rem, calc(0.795rem + 7.273vw), 6.25rem); /* min: 40px, max: 100px */;
        }
        @media (min-width: 768px) {
            &#book{
                margin-bottom: unset;
            }
        }
    }
    .name-video{
        .entity-video{
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            .media{
                &::after{
                    content: '';
                    display: block;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
                    position: absolute;
                    inset: 0;
                }
                .media__icon{
                    width: clamp(2rem, calc(1.165rem + 3.562vw), 2.875rem); /* min: 32px, max: 46px */
                    height: auto;
                    aspect-ratio: 1/1;
                    background: url(image/icon-play.svg) no-repeat center center / cover;
                    visibility: visible;
                    opacity: 1;
                    margin: unset;
                    transform: translate(-50%, -50%);
                    &::before, &::after{
                        content: unset;
                    }
                }
            }
        }
        .entity-title{
            margin-top: clamp(1rem, calc(0.523rem + 2.036vw), 1.5rem); /* min: 16px, max: 24px */
        }
    }
    .name-cta{
        background-color: var(--color-blue-light);
        border-radius: clamp(3.125rem, calc(1.136rem + 8.485vw), 7.5rem); /* min: 50px, max: 120px */;
        padding-top: clamp(2rem, calc(1.091rem + 3.879vw), 4rem); /* min: 32px, max: 64px */
        padding-bottom: clamp(2.5rem, calc(1.364rem + 4.848vw), 5rem); /* min: 40px, max: 80px */
        padding-inline: clamp(1.625rem, calc(-0.939rem + 10.939vw), 10rem); /* min: 26px, max: 160px */;
        ul.d-grid{
            @media (min-width: 992px){
                grid-template-columns: repeat(3, 1fr);
            }
            gap: 32px 100px;
            li{
                text-align: center;
                .entity-img{
                    img{
                        width: 26px;
                        aspect-ratio: 1/1;
                    }
                }
                .entity-title{
                    margin-top: clamp(0.5rem, calc(0.261rem + 1.018vw), 0.75rem); /* min: 8px, max: 12px */
                }
            }
        }
    }
}

/* *ANCHOR - News */

.node--type-news{
    .row-offcanvas{
        @media (min-width: 1200px){
            background: url(image/bg-02.svg) no-repeat left 0 top 382px / contain;
        }
    }
    .content-inner{
        max-width: 968px;
        margin-inline: auto;
        background-color: white;
        border-radius: 30px;
        box-shadow: 1px 2px 3px 0px #00000026;
        padding-top: clamp(1.5rem, calc(0.546rem + 4.071vw), 2.5rem); /* min: 24px, max: 40px */
        padding-bottom: clamp(2rem, calc(1.046rem + 4.071vw), 3rem); /* min: 32px, max: 48px */
        padding-inline: clamp(1rem, calc(0.046rem + 4.071vw), 2rem); /* min: 16px, max: 32px */
    }
}

/* *ANCHOR - Page */

.node--type-page{
    .field--name-body{
        max-width: 968px;
        margin-inline: auto;
    }
}


/* *!SECTION - Node */

/* *SECTION - CRM */

.crm-container-md{
    div.status{
        background-color: var(--color-primary);
    }
    #printer-friendly,
    .crm-custom-data-view:has(td[id*="mu_kuan_ye_xiang_xi_she_ding"]){
        display: none;
    }
}

/* *!SECTION - CRM */

/* *NOTE - The End */