/* hero section css*/

:root{
    --container-max-width: 1206px;
    --container-pad: 153px; /* desktop side padding */
}

@media(max-width:1366px){
    :root{ --container-pad: 76px; }
}
@media(max-width:1024px){
    :root{ --container-pad: 48px; }
}
@media(max-width:768px){
    :root{ --container-pad: 16px; }
}

.hero-section{
    width: 100%;
    height: 720px;
    margin: 120px auto 120px;
    overflow: hidden;
    position: relative;
}

#lottie-container{
    height: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#lottie-container svg{
        width: auto !important;
}

/* Hero content overlay */
.hero-content{
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* let lottie interaction pass through */
}
.hero-inner{
    pointer-events: auto;
    text-align: center;
    max-width: 1100px;
    padding: 24px;
}
.hero-title{
    color: var(--black, #000);
    font-family: "Noto Sans TC";
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 12px;
}
.hero-subtitle{
    color: rgba(0,0,0,0.7);
    font-family: "Noto Sans TC";
    font-size: 20px;
    margin: 0 0 20px;
}
.hero-cta{ 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

@media(max-width:1366px){
    .hero-title{ font-size:48px; }
}
@media(max-width:1024px){
    .hero-section{ height:480px; }
    .hero-title{ font-size:40px; }
    .hero-subtitle{ font-size:18px; }
}
@media(max-width:768px){
    .hero-section{ height:360px; }
    .hero-title{ font-size:28px; }
    .hero-subtitle{ font-size:16px; }
}

@media(max-width:1366px){
    .hero-section{
        margin: 144px auto 48px;
        height: 480px;
    }
}

@media(max-width:1024px){
    .hero-section{
        margin: 96px auto 64px;
        height: 480px;
    }
}

@media(max-width:768px){
    .hero-section{
        margin: 120px auto 48px;
        height: 360px;
}
}

@media(max-width:540px){
    .hero-section{
        margin: 96px auto 48px;
        height: 240px;
}
}



/* Core Value Section*/

.core-value-section{
    display: flex;
    max-width: 1366px;
    margin:0px auto 80px;
    padding: 0 var(--container-pad);
    flex-direction: column;
    gap: 24px;
}

.core-value-section .titlebox{
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.core-value-section .titlebox .title{
    align-self: stretch;
    color: var(--black, #000);
    font-family: "Noto Sans TC";
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.core-value-section .titlebox .subtitle{
    align-self: stretch;
    color: var(--black-40, rgba(0, 0, 0, 0.40));
    font-family: "Noto Sans TC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.core-value-section .list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.core-value-section .list .item{
    display: flex;
    padding: 48px 36px;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    border-radius: 8px;
    background: var(--white, #FFF);
}

.core-value-section .list .item img{
    width: 200px;
    height: 200px;
    margin-bottom: 28px;
}

.core-value-section .list .item h3{
    margin-bottom: 12px;
}

.core-value-section .list .item p{
    color: var(--black-60, rgba(0, 0, 0, 0.60));
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
    line-height: 140%; /* 22.4px */
}



@media(max-width:1366px){
    .core-value-section{
        margin:0px auto 80px;
        padding: 0 var(--container-pad);
        gap: 24px;
    }
    .core-value-section .titlebox .title{
        font-size: 36px;
        font-weight: 500;
    }
    .core-value-section .titlebox .subtitle{
        font-size: 20px;
        font-weight: 400;
    }

}
@media(max-width:1024px){
    .core-value-section{
        margin:0px auto 64px;
        padding: 0 var(--container-pad);
        gap: 24px;
    }
    .core-value-section .titlebox .title{
        font-size: 32px;
    }
    .core-value-section .titlebox .subtitle{
        font-size: 18px;
    }
    .core-value-section .list .item img{
        width: 160px;
        height: 160px;
        margin-bottom: 20px;
    }
    .core-value-section .list .item p{
        font-size: 16px;
    }

}
@media(max-width:768px){
    .core-value-section{
        margin:0px auto 48px;
        padding: 0 var(--container-pad);
        gap: 24px;
    }
    .core-value-section .titlebox .title{
        font-size: 32px;
        text-align: center;
    }
    .core-value-section .titlebox .subtitle{
        font-size: 18px;
        text-align: center;
    }
    .core-value-section .list{
        flex-direction: column;
    }
    .core-value-section .list .item{
        padding:24px;
    }

}
@media(max-width:540px){
    .core-value-section{
        margin:0px auto 24px;
    }
    .core-value-section .titlebox .title{
        font-size: 24px;
    }
    .core-value-section .titlebox .subtitle{
        font-size: 16px;
    }
}

.core-belief-section{
    width: 100%;
    background-color: #FEF9E6;
    margin-bottom: 80px;
}

.core-belief-section .wrap{
    display: flex;
    flex-direction: row;
    align-items: start;
    max-width: 1366px;
    margin: 0 auto;
    padding: 48px var(--container-pad);
    gap: 96px;
}

.core-belief-section .wrap .titlebox{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    white-space: nowrap;
}

.core-belief-section .wrap .titlebox .title{
    align-self: stretch;
    color: var(--black, #000);
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.core-belief-section .wrap .titlebox .subtitle{
    align-self: stretch;
    color: var(--black-40, rgba(0, 0, 0, 0.40));
    font-family: "Noto Sans TC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.core-belief-section .wrap .col{
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}

.core-belief-section .wrap .col .text-wrap{
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 20px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.80);
    margin-bottom: 48px;
}

.core-belief-section .wrap .col .list{
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.core-belief-section .wrap .col .item{
    display: flex;
    padding: 48px 36px;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    background: var(--main-light-3, #FBEEB3);
}

.core-belief-section .wrap .col .item img{
    width: 100px;
    height: 100px;
    margin-bottom: 28px;
}

.core-belief-section .wrap .col .item h3{
    color: var(--main-dark-6, #181400);
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 125%; /* 30px */
    margin-bottom: 12px;
}

.core-belief-section .wrap .col .item p{
    color: var(--main-dark-6, #181400);
    text-align: center;
    font-size: 16px;
    font-weight: 350;
    line-height: 140%; /* 22.4px */
}

    /* Core-belief responsive tweaks */
    @media(max-width:1366px){
        .core-belief-section .wrap{ gap: 120px; padding: 48px var(--container-pad); }
        .core-belief-section .wrap .titlebox .title{ font-size: 36px; }
        .core-belief-section .wrap .titlebox .subtitle{ font-size: 20px; }
        .core-belief-section .wrap .col .item{ padding: 24px; width: 100%; }
    }
    @media(max-width:1024px){
        .core-belief-section .wrap{
            flex-direction: column;
            gap: 32px;
            padding: 32px var(--container-pad);
            align-items: center;
        }
        .core-belief-section .wrap .col .text-wrap{ gap: 20px; font-size: 18px;}
        .core-belief-section .wrap .titlebox{ white-space: normal; text-align: center; }
        .core-belief-section .wrap .col{ width: 100%; }
        .core-belief-section .wrap .col .item{ padding: 16px; width: 100%; }
        .core-belief-section .wrap .col .item img{ width: 80px; height: 80px; margin-bottom: 16px; }
        .core-belief-section .wrap .titlebox .title{ font-size: 32px; }
        .core-belief-section .wrap .titlebox .subtitle{ font-size: 18px; }
    }
    @media(max-width:768px){
        .core-belief-section .wrap .col .text-wrap{ gap: 20px; font-size: 16px;}
        .core-belief-section .wrap{ padding: 24px var(--container-pad); gap: 24px; }
        .core-belief-section .wrap .col .item p{ font-size: 14px;}
        .core-belief-section .wrap .col .item h3{ font-size: 18px;}
        .core-belief-section .wrap .titlebox .title{ font-size: 32px; text-align: center; }
        .core-belief-section .wrap .titlebox .subtitle{ font-size: 18px; text-align: center; }
        .core-belief-section .wrap .col .item{ padding: 16px; }
    }
    @media(max-width:540px){
        .core-belief-section .wrap{ padding: 16px var(--container-pad); gap: 16px; }
        .core-belief-section .wrap .titlebox .title{ font-size: 24px; }
        .core-belief-section .wrap .col .item img{ width: 64px; height: 64px; margin-bottom: 12px; }
        .core-belief-section .wrap .col .list{ flex-direction: column; gap: 16px;}
        .core-belief-section .wrap .col .list .item{flex-direction: row; align-items: flex-start;}
        .core-belief-section .wrap .col .item h3{ flex-shrink: 0;}
        .core-belief-section .wrap .col .item p{ padding-left: 24px; text-align: left;}
        .core-belief-section .wrap .col .item img{display: none;}
    }


/* Frame 2337 - Finance / Transparency cards */
.finance-section{
    width: 100%;
    background: transparent;
    margin-bottom: 80px;
    position: relative;
    overflow: visible; /* ensure decorative arcs are not clipped */
}
.finance-inner{
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 48px var(--container-pad);
    display: flex;
    gap: 92px;
    align-items: flex-start;
    position: relative;
    overflow: visible;
}
.finance-left{
    width: 366px;
    position: relative;
}
.finance-decor{
    position: absolute;
    /* positioned relative to .finance-inner */
    width: 813px; /* svg natural width */
    height: auto;
    left: -640px; /* nudge to the left so arcs sit outside the content */
    top: -120px; /* move up so the full arc is visible within the section */
    transform-origin: center center;
    z-index: -1;
    pointer-events: none;
}
.section-title{
    position: relative;
    z-index: 1;
}
.section-title h2{
    color: #1A1A1A;
    font-family: "Noto Sans TC";
    font-size: 48px;
    font-weight: 500;
    margin: 0 0 8px;
}
.section-sub{
    color: rgba(0,0,0,0.4);
    font-size: 20px;
    margin: 0;
}
.finance-cards{
    width: 519px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.card{
    display: flex;
    gap: 24px;
    align-items: center;
    background: #ffffff;
    padding: 24px 16px;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.03);
}
.card-icon{ width: 120px; height: 120px; flex: 0 0 120px; }
.card-icon img{ width: 100%; height: 100%; object-fit: contain; display:block }
.card-body h3{
    margin: 0 0 8px; color: #1A1A1A; font-size: 20px; font-weight: 500;
}
.card-body p{
    margin: 0 0 12px; color: rgba(0,0,0,0.6); font-size: 16px; line-height:1.4;
}
.card-link{
    color: rgba(0,0,0,0.6); font-size: 16px; text-decoration: underline; display:inline-flex; align-items:center; gap:8px;
}

.card-link .link-arrow{
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0; /* left of text so no left margin */
}

@media(max-width:1024px){
    .finance-inner{ padding-left: 48px; padding-right: 24px; gap: 48px; }
    .section-title h2{ font-size: 36px; }
    .finance-decor{ top:-40px; width: 720px;left: -580px;}
    .finance-cards{ width: 100%; }
}
@media(max-width:768px){
    .finance-section{margin-bottom: 48px;}
    .finance-inner{ flex-direction: column; padding: 32px var(--container-pad); align-items: center; }
    .finance-left{ width:100%; text-align:center }
    .finance-decor{ top: 0px;  width: 802px; left: -400px;}    
    .section-title h2{ font-size: 28px;}
    .card-body p, .card-body h3{ text-align: center; }
    .card-body p{ margin-bottom: 24px; }
    .finance-cards{ width:100% }
    .card-link{ justify-content: center; width: 100%;}
    .card-icon{ width: 80px; height: 80px; flex: 0; }
    .card{ flex-direction: column; }
}

@media(max-width:540px){
    .finance-decor{ top: 0px;  width: 540px; left: -320px;}   
}

/* Global Brand section (infinite marquee) */
.global-brand-section{
    width: 100%;
    padding: 120px 0 80px;
}
.brand-inner{
    /* constrain to the same content frame used by .finance-inner */
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-pad); /* keep breathing room that matches page layout */
    display: flex;
    flex-direction: column;
    align-items: center; /* center the top area */
    gap: 48px;
}
.brand-top{ display:flex; flex-direction:column; gap:16px; width:100%; align-items:center; text-align:center }
.brand-title{ font-family: "Noto Sans TC"; font-size: 40px; color: #1A1A1A; margin: 0 0 8px; }
.brand-sub{ color: #1A1A1A; margin: 0; font-size: 18px; line-height: 140%; }
.brand-bottom{ width:100%; overflow: hidden }

.brand-cta{ margin-top: 8px; align-self: center }
.brand-marquee{ display:flex; flex-direction:column; gap:18px; position: relative; width: 100%; overflow: hidden; }
.brand-marquee .marquee-track{ width: 100%; }
.brand-marquee .marquee-track img{ display: inline-block; width: auto;}
.brand-marquee{ position: relative; width: 100%; overflow: hidden; }
.marquee-track{ display: flex; gap: 80px; align-items: center; }
.marquee-track img{ width: 160px; height: 60px; object-fit: cover; display:block; border-radius: 6px; }

/* Duplicate track will scroll continuously; animation translates the first track width */
.marquee-track{ will-change: transform; }
.brand-marquee .marquee-track{ animation: marquee var(--marquee-duration, 18s) linear infinite; }
.brand-marquee .marquee-track[aria-hidden="true"]{ animation-delay: -9s; }

.brand-marquee:hover .marquee-track{ animation-play-state: paused; }

@keyframes marquee{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

@media(max-width:1024px){
    .brand-inner{ padding: 0 var(--container-pad); gap: 24px; }
    .brand-title{ font-size: 32px }
    .marquee-track img{ width: 140px; height: 52px }
}
@media(max-width:768px){
    .global-brand-section  { padding: 48px 0 48px; }
    .brand-inner{ flex-direction: column; padding: 0 var(--container-pad); }
    /* remove fixed width on brand-top for small screens and add breathing space */
    .brand-top{ text-align: center; width: auto; padding-bottom: 24px; }
    .brand-title{ font-size: 28px }
    .brand-sub{ margin-bottom: 8px }
    .brand-cta{ margin-top: 8px }
    .brand-bottom{ padding-bottom: 24px }
    .marquee-track img{ width: 120px; height: 45px }
}