@charset "utf-8";
/*===============================================================================
File Name: Index_NewFeature.css
Editor: Sophia  
CreateDate: 2026/01/21
Description: 新版首頁模組；依賴 Index.css 基底
Scope: #LatestEvents /  #Solutions / #Carousel / #DomainServices / #About.about-wave-container
Load Order: Index.css → Index_NewFeature.css
================================================================================*/


/*===============================================================================
    .TitleArea 僅做全域樣式（低 specificity 優先），下層使用 #ID 選擇器覆蓋特殊區塊
=================================================================================*/
.TitleArea {
    text-align: center;
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
}

.TitleArea h1 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.TitleArea .Description {
    font-size: 1.125rem;
    margin: 0 auto;
    max-width: 800px;
    text-align: left;
    line-height: 1.6;
}

/* Description 描述樣式 - 單行置中對齊設定，適用於標題下的文字 */
.Description.is-centered {
    margin: 1rem auto 0;
    text-align: center;
}



/*===============================================================================
                最新消息區域 #LatestEvents (CHT)
=================================================================================*/

#LatestEvents {
    background: url('../../../images/Index/BG_Reservoir.jpg') center top / cover no-repeat;
    padding: 3.75rem 0 5rem;
    /* margin-top: 20px; */
    position: relative;
    overflow: hidden;
    min-height: 600px;
    box-sizing: content-box;
}

    #LatestEvents::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
            ellipse 900px 700px at 15% 50%, 
            rgba(0, 217, 255, 0.40) 0%, 
            rgba(0, 217, 255, 0.25) 25%,
            rgba(0, 217, 255, 0.10) 50%,
            transparent 75%
        );
        pointer-events: none;
        z-index: 1;
    }

    #LatestEvents::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
            ellipse 800px 600px at 85% 35%, 
            rgba(255, 179, 71, 0.30) 0%, 
            rgba(255, 138, 0, 0.15) 30%,
            rgba(255, 100, 0, 0.08) 50%,
            transparent 75%
        );
        pointer-events: none;
        z-index: 1;
    }

    #LatestEvents > section {
        position: relative;
        z-index: 2;
    }

    #LatestEvents > section::before {
        content: '';
        position: absolute;
        top: -3.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: calc(100% + 8.75rem);
        background: linear-gradient(
            180deg, 
            rgba(11, 79, 74, 0.65) 0%, 
            rgba(15, 23, 43, 0.55) 50%, 
            rgba(0, 79, 59, 0.65) 100%
        );
        pointer-events: none;
        z-index: -1;
    }

    #LatestEvents .TitleArea {
        margin-bottom: 3.125rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        #LatestEvents .TitleArea .TitleBadge {
            color: #5EE9B5;
            border: 0.8px solid rgba(0, 212, 146, 0.30);
            background: rgba(0, 188, 125, 0.10);
            box-shadow: 0 0 15px 0 rgba(16, 185, 129, 0.20);
            margin-bottom: 0;
        }

        #LatestEvents .TitleArea h1 {
            color: #fff;
            margin: 0.75rem 0 1rem;
            text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
        }

        #LatestEvents .TitleArea::after {
            content: '';
            display: block;
            width: 11rem;
            height: 1.5rem;
            background-image: 
                linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 212, 146, 0.6) 50%, rgba(0, 0, 0, 0) 100%),
                linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 212, 146, 0.6) 50%, rgba(0, 0, 0, 0) 100%),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.3334 13.3333C6.16277 13.3369 5.03357 12.9003 4.16975 12.1103C3.30592 11.3202 2.77058 10.2343 2.66989 9.06805C2.5692 7.90176 2.91053 6.74022 3.62617 5.81381C4.34181 4.88739 5.37949 4.26378 6.5334 4.06665C10.3334 3.33331 11.3334 2.98665 12.6667 1.33331C13.3334 2.66665 14.0001 4.11998 14.0001 6.66665C14.0001 10.3333 10.8134 13.3333 7.3334 13.3333Z" fill="%2300D492" fill-opacity="0.2" stroke="%2300D492" stroke-opacity="0.8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.33325 14C1.33325 12 2.56659 10.4267 4.71992 10C6.33325 9.68 7.99992 8.66667 8.66659 8" fill="%2300D492" fill-opacity="0.2"/><path d="M1.33325 14C1.33325 12 2.56659 10.4267 4.71992 10C6.33325 9.68 7.99992 8.66667 8.66659 8" stroke="%2300D492" stroke-opacity="0.8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-size: 4rem 1px, 4rem 1px, 1.5rem 1.5rem;
            background-repeat: no-repeat;
            background-position: left center, right center, center center;
            margin: 0 auto 0;
            opacity: 0.9;
        }

    #LatestEvents .grid-events {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr;
        grid-template-rows: auto auto;
        gap: 1.5rem;
        max-width: 75rem;
        margin: 0 auto;
        padding: 0 1.25rem;
    }

        #LatestEvents .grid-events .card-esg {
            grid-column: 1;
            grid-row: 1;
        }

        #LatestEvents .grid-events .card-video {
            grid-column: 1;
            grid-row: 2;
        }

        #LatestEvents .grid-events .card-social {
            grid-column: 2;
            grid-row: 1 / 3;
        }

        #LatestEvents .grid-events .card-hiring {
            grid-column: 3;
            grid-row: 1 / 3;
        }

/* #LatestEvents 專屬 卡片主題樣式 
-------------------------------------------*/
      /** 卡片主題色變數設定 
        -------------------------------------------------------- **/
         /* 人才招募卡片 - 綠色主題 */
        .card-hiring {
            --theme-rgb: 0, 212, 146;
            --theme-color: rgb(var(--theme-rgb));
        }
        
        /* 企業社會卡片 - 藍橙色主題 */
         .card-social {
            --theme-rgb: 118, 178, 235;
            --theme-color: rgb(var(--theme-rgb));
        }
       
         /* 影音新聞卡片 - 青色主題 */
          .card-video {
            --theme-rgb: 0, 217, 255;
            --theme-color: rgb(var(--theme-rgb));
        }
        
        /* ESG 活動卡片 - 橘色主題 */
          .card-esg {
            --theme-rgb: 251, 146, 60;
            --theme-color: rgb(var(--theme-rgb));
        }

    #LatestEvents .MyCard {
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 1.5rem;
        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.12), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
        #LatestEvents .MyCard:hover {
            transform: translateY(-0.5rem) !important;
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.25), 0 0.25rem 0.625rem rgba(0, 0, 0, 0.12);
        }
        
        #LatestEvents .MyCard.card-hiring:hover,
        #LatestEvents .MyCard.card-social:hover,
        #LatestEvents .MyCard.card-video:hover,
        #LatestEvents .MyCard.card-esg:hover {
            border-color: rgba(var(--theme-rgb), 0.5);
            /* 從 0.3 改 0.5 */
        }

 /* 卡片頂部上方光條 - 下列四種卡片單獨定義 */
    /* 人才招募卡片樣式參考以下空間 card-hiring::after */
    /* 企業社會卡片樣式參考以下空間 card-social::after */
    /* 影音新聞卡片樣式參考以下空間 card-video::after */
    /* ESG 活動卡片樣式參考以下空間 card-esg::after */

/* #LatestEvents 專屬 卡片標頭樣式 
-------------------------------------------*/
    #LatestEvents .MyCard .card-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

        #LatestEvents .MyCard .badge-icon {
            flex-shrink: 0;
            width: 1.75rem;
            height: 1.75rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
        }

            /* 人才招募卡片 - 綠色主題 */
            #LatestEvents .MyCard.card-hiring .badge-icon {
                background: rgba(var(--theme-rgb), 0.25);
            }

            /* 企業社會卡片 - 藍橙色主題 */
            #LatestEvents .MyCard.card-social .badge-icon {
                background: rgba(var(--theme-rgb), 0.25);
            }

            /* 影音新聞卡片 - 青色主題 */
            #LatestEvents .MyCard.card-video .badge-icon {
                background: rgba(var(--theme-rgb), 0.25);
            }
            /* ESG 活動卡片 - 橘色主題 */
            #LatestEvents .MyCard.card-esg .badge-icon {
                background: rgba(var(--theme-rgb), 0.25);
            }

            #LatestEvents .badge-icon svg {
                width: 0.875rem;
                height: 0.875rem;
            }

        #LatestEvents .MyCard .card-title {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.25rem;
        }

            #LatestEvents .MyCard .badge-text {
                font-size: 0.75rem;
                font-weight: 700;
                line-height: 0.78125rem;
                letter-spacing: 0.03125rem;
                text-transform: uppercase;
                color: rgb(230, 230, 230);
            }

            /* 卡片 badge 文字 - 主題色 */
            #LatestEvents .MyCard.card-hiring .badge-text,
             #LatestEvents .MyCard.card-social .badge-text,
              #LatestEvents .MyCard.card-video .badge-text,
               #LatestEvents .MyCard.card-esg .badge-text {
                color: rgba(var(--theme-rgb), 0.95);
            }

          

            #LatestEvents .MyCard .card-title h2 {
                font-size: 1.25rem;
                font-weight: 700;
                line-height: 1em;
                margin: 0 0 0 -2px;
                color: #fff;
            }

    #LatestEvents .MyCard .card-description {
        font-size: 1.15rem;
        font-weight: 500;
        line-height: 1.75; 
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 1.5rem;
        flex-grow: 0;
        padding: 1rem 1rem 1rem 1.25rem;
        background: rgba(255, 255, 255, 0.04);
        border-left: 3px solid rgba(var(--theme-rgb), 0.6);
        border-radius: 0 0.5rem 0.5rem 0;
        letter-spacing: 0.02em;
    }

        #LatestEvents .card-description .highlight {
            color: rgba(var(--theme-rgb), 1);
            font-weight: 500;
        }
                 #LatestEvents .MyCard .card-SubDescription {
                     font-size: 1rem;
                     line-height: 1.5em;
                     color: rgba(255, 255, 255, 0.95);
                     margin-bottom: 0.5rem;
        
                 }
        #LatestEvents .MyCard .card-SubDescription.addGap {
            margin-bottom: 1.5rem;
        }

/* #LatestEvents �q�� CTA ���s�˦� 
-------------------------------------------*/
#LatestEvents .MyCard-CTA {
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

    #LatestEvents .MyCard-CTA:hover {
        gap: 0.75rem;
    }

    #LatestEvents .MyCard-CTA:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

#LatestEvents .card-video-link:focus-visible {
    outline: 2px solid #fb923c;
    outline-offset: 4px;
    border-radius: 1rem;
}

    /* 內部連結 icon ( 右箭 ) - 使用遮罩著色 */
    #LatestEvents .MyCard-CTA.link-internal::after {
        content: '';
        width: 1rem;
        height: 1rem;
        background-color: rgba(255, 255, 255, 0.7);
        mask-image: url('../../../images/Index/icon_arrow_right.svg');
        -webkit-mask-image: url('../../../images/Index/icon_arrow_right.svg');
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        flex-shrink: 0;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    #LatestEvents .MyCard-CTA.link-internal:hover::after {
        background-color: rgba(255, 255, 255, 1);
        transform: translateX(0.25rem);
    }

    /* 外部連結 icon ( 外框 ) - 使用遮罩著色 */
    #LatestEvents .MyCard-CTA.link-external::after {
        content: '';
        width: 1rem;
        height: 1rem;
        background-color: rgba(255, 255, 255, 0.7);
        mask-image: url('../../../images/Index/icon_external_link.svg');
        -webkit-mask-image: url('../../../images/Index/icon_external_link.svg');
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        flex-shrink: 0;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    #LatestEvents .MyCard-CTA.link-external:hover::after {
        background-color: rgba(255, 255, 255, 1);
        transform: translate(0.125rem, -0.125rem);
    }




/* 人才招募卡片 */
#LatestEvents .MyCard.card-hiring {
    display: flex;
    flex-direction: column;
}
#LatestEvents .MyCard.card-hiring .card-description{
    color: rgba(255, 255, 255, 0.95);
    
}
 #LatestEvents .MyCard.card-hiring .card-description .highlight {
            color: #5ee9b5;
            font-weight: 500;
}
#LatestEvents .MyCard.MyCard.card-hiring:hover .card-description,
#LatestEvents .MyCard.MyCard.card-hiring:hover .card-description .highlight{
    font-weight: 600;
}


    /* 卡片頂部上方光條 */
    #LatestEvents .card-hiring::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.25rem;
        background: linear-gradient(90deg, 
             rgba(16, 185, 129, 0) 0%, 
            rgba(16, 185, 129, 0.5) 15%, 
            rgba(94, 233, 181, 0.7) 50%, 
            rgba(16, 185, 129, 0.5) 85%, 
            rgba(16, 185, 129, 0) 100%

        );
        border-radius: 1rem 1rem 0 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    #LatestEvents .card-hiring:hover::after {
        height: 0.25rem;
        background: linear-gradient(to right, rgb(52, 211, 153), rgb(6, 182, 212));
        box-shadow: 0 0 1.25rem rgba(52, 211, 153, 0.5), 
                    0 0 2.5rem rgba(6, 182, 212, 0.3);

    }

    /* 底部裝飾線 */
    /* #LatestEvents .card-hiring::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 11.5rem;
        height: 11.5rem;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none"><g opacity="0.05"><path d="M90 75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-24-30c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zm36 0c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zM78 15c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM42 93c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6z" fill="white"/></g></svg>');
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        pointer-events: none;
        opacity: 0.5;
    } */

    #LatestEvents .card-hiring ul {
        list-style: none;
        margin: 0 0 1.5rem;
        padding: 0;
    }

        #LatestEvents .card-hiring ul li {
            font-size: 0.9375rem;
            line-height: 1.6;
            color: rgb(255, 255, 255);
            padding: 0.25rem 0;
            padding-left: 1.5rem;
            position: relative;
        }

            #LatestEvents .card-hiring ul li::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #5EE9B5;
                box-shadow: 0 0 10px rgba(94, 233, 181, 0.5);
            }

    #LatestEvents .card-hiring .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

        #LatestEvents .card-hiring .tags span {
             font-size: 0.9375rem;
            font-weight: 500;
            line-height: 1.125rem;
            color: rgba(255, 255, 255, 0.95);
            display: inline-block;
             padding: 0.375rem 0.75rem;
            background: rgba(255, 255, 255, 0.08);
            border: 0.8px solid rgba(255, 255, 255, 0.15);
            border-radius: 0.25rem;
        }

    #LatestEvents .card-hiring .MyCard-CTA {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 3.125rem;
        padding: 0 0.875rem;
        background: linear-gradient(90deg, #006666 0%, #009689 100%);
        border-radius: 0.875rem;
        box-shadow: 0 0.625rem 0.9375rem 0 rgba(0, 79, 59, 0.3), 0 0.25rem 0.375rem 0 rgba(0, 79, 59, 0.3);
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25rem;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
        gap: 0;
        margin-top: auto;
        position: relative;
    }

        #LatestEvents .card-hiring .MyCard-CTA:hover {
            box-shadow: 0 0.9375rem 1.875rem 0 rgba(0, 79, 59, 0.45), 0 0.5rem 0.75rem 0 rgba(0, 79, 59, 0.35);
            transform: translateY(-0.125rem) scale(1.02);
            background: linear-gradient(90deg, #008888 0%, #00bfaf 100%);
        }

        #LatestEvents .card-hiring .MyCard-CTA:active {
            transform: translateY(0) scale(0.98);
        }

        /* 在著色後方加入背景圓點 */
        #LatestEvents .card-hiring .MyCard-CTA::before {
            content: '';
            position: absolute;
            right: 0.775rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1.375rem;
            height: 1.375rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: background 0.3s ease;
            z-index: 0;
        }

        #LatestEvents .card-hiring .MyCard-CTA:hover::before {
            transform: translateY(-0.7rem) scale(1.02);
            background: rgba(255, 255, 255, 0.3);
        }

        /* 確保著色遮罩在背景圓點之上 */
        #LatestEvents .card-hiring .MyCard-CTA.link-external::after {
            position: relative;
            z-index: 1;
        }

        /* Facebook 卡片 */

/* 企業社會卡片 - 上方漸層光條 */
    #LatestEvents .card-social::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.25rem;
        background: linear-gradient(90deg, 
            rgba(81, 162, 255, 0) 0%, 
            rgba(81, 162, 255, 0.4) 20%, 
            rgba(81, 162, 255, 0.6) 50%, 
            rgba(81, 162, 255, 0.4) 80%, 
            rgba(81, 162, 255, 0) 100%
        );
        border-radius: 1rem 1rem 0 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    #LatestEvents .card-social:hover::after {
        height: 0.25rem;
        background: linear-gradient(to right,rgb(81, 162, 255) , rgb(96, 96, 255));
        box-shadow: 0 0 1.25rem rgba(81, 162, 255, 0.5), 
                    0 0 2.5rem rgba(81, 162, 255, 0.3);
    }


    #LatestEvents .card-social .facebook-container {
        width: 100%;
        min-height: 26.25rem;
        border-radius: 0.75rem;
        overflow: hidden;
        margin-bottom: 1rem;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

        #LatestEvents .card-social .facebook-container .fb-page {
            border: none;
            width: 100%;
            height: 100%;
            min-height: 26.25rem;
            text-align: center;
        }
 
        #LatestEvents .card-social > div p {
            font-size: 0.9375rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 0.5rem;
            text-align: center;
        }

        #LatestEvents .card-social .MyCard-CTA {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            color: #FFFFFF;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 0.75rem 1.5rem;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
        }

            #LatestEvents .card-social .MyCard-CTA:hover {
                background: rgba(81, 162, 255, 1);
                border-color: rgba(81, 162, 255, 1);
                color: #FFFFFF;
                gap: 0.75rem;
                box-shadow: 0 0 20px rgba(81, 162, 255, 0.4);
            }

/* ========================================
   �ζ H�v���d���˦�
======================================== */


    #LatestEvents .card-video::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.25rem;
        background: linear-gradient(90deg, 
            rgba(0, 217, 255, 0) 0%, 
            rgba(0, 217, 255, 0.4) 20%, 
            rgba(0, 217, 255, 0.6) 50%, 
            rgba(0, 217, 255, 0.4) 80%, 
            rgba(0, 217, 255, 0) 100%
        );
        border-radius: 1rem 1rem 0 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    #LatestEvents .card-video:hover {
        transform: translateY(-0.5rem) !important;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.3), 0 0.25rem 0.625rem rgba(0, 0, 0, 0.15);
        border-color: rgba(251, 146, 60, 0.3);
    }

    #LatestEvents .card-video:hover::after {
        height: 0.25rem;
        background: linear-gradient(to right, #00d9ff, #0088ff);
        box-shadow: 0 0 1.25rem rgba(0, 217, 255, 0.5),
            0 0 2.5rem rgba(0, 217, 255, 0.3);
    }

#LatestEvents .card-video-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

#LatestEvents .card-video-wrapper {
    position: relative;
    height: 10.5rem;
    overflow: hidden;
    background: rgba(var(--theme-rgb), 0.05);
    border: 0.05rem solid rgba(var(--theme-rgb), 0.2);
    border-radius: 0.875rem;
    box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1),
                0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.1);
}

    #LatestEvents .video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #LatestEvents .card-video:hover .video-thumbnail {
        transform: scale(1.05);
    }

    #LatestEvents .video-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        opacity: 0.45; /* Default: more transparent */
    }

    #LatestEvents .video-play-overlay svg {
        width: 3.5rem; /* Reduced size */
        height: 3.5rem;
    }

    #LatestEvents .video-play-overlay svg circle {
        filter: drop-shadow(0px 0px 15px rgba(0, 217, 255, 0.4));
    }

        #LatestEvents .card-video:hover .video-play-overlay {
            transform: translate(-50%, -50%) scale(1.15);
            opacity: 1; /* Hover: restore original color and opacity */
        }

    #LatestEvents .video-overlay-text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: linear-gradient(to top, 
            rgba(0, 0, 0, 0.8) 0%, 
            rgba(0, 0, 0, 0.6) 50%, 
            rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }

        #LatestEvents .video-overlay-text .video-title {
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.406;
            color: #fff;
            margin: 0 0 0.25rem;
        }

        #LatestEvents .video-overlay-text .video-subtitle {
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.2;
            color: rgba(255, 255, 255, 0.95);
            margin: 0;
        }

/* ========================================
   ESG ����o�i�d���˦�
======================================== */
#LatestEvents .card-esg {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    #LatestEvents .card-esg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.25rem;
        background: linear-gradient(90deg, 
            rgba(251, 146, 60, 0) 0%, 
            rgba(251, 146, 60, 0.4) 20%, 
            rgba(251, 146, 60, 0.6) 50%, 
            rgba(251, 146, 60, 0.4) 80%, 
            rgba(251, 146, 60, 0) 100%
        );
        border-radius: 1rem 1rem 0 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    #LatestEvents .card-esg:hover {
        transform: translateY(-0.5rem) !important;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.3), 0 0.25rem 0.625rem rgba(0, 0, 0, 0.15);
        border-color: rgba(34, 197, 94, 0.3);
    }

    #LatestEvents .card-esg:hover::after {
        height: 0.25rem;
        background: linear-gradient(to right, #fb923c, #f59e0b);
        box-shadow: 0 0 1.25rem rgba(251, 146, 60, 0.5),
            0 0 2.5rem rgba(251, 146, 60, 0.3);
    }

#LatestEvents .card-esg-visual {
    position: relative;
    height: 14rem; /* Increased from 10.313rem to be more square-like */
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--theme-rgb), 0.1) 0%, rgba(var(--theme-rgb), 0.05) 100%);
    border: 0.05rem solid rgba(var(--theme-rgb), 0.2);
    border-radius: 0.875rem;
    box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1),
                0 0.25rem 0.375rem -0.25rem rgba(0, 0, 0, 0.1);
}

    #LatestEvents .esg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #LatestEvents .card-esg:hover .esg-image {
        transform: scale(1.05);
    }

   

    #LatestEvents .esg-overlay-text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: linear-gradient(to top, 
            rgba(0, 0, 0, 0.8) 0%, 
            rgba(0, 0, 0, 0.6) 50%, 
            rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }

        #LatestEvents .esg-overlay-text .esg-practice {
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.044rem;
            text-transform: uppercase;
            color: #ffd230;
            margin: 0 0 0.25rem;
            line-height: 1.094;
        }

        #LatestEvents .esg-overlay-text .esg-description {
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.406;
            color: #fff;
            margin: 0;
        }




#LatestEvents .card-esg .MyCard-CTA {
    margin: auto 0 0 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
}

    #LatestEvents .card-esg .MyCard-CTA:hover {
        background: var(--theme-color);
        border-color: var(--theme-color);
        color: #FFFFFF;
        gap: 0.75rem;
        box-shadow: 0 0 20px rgba(var(--theme-rgb), 0.4);
    }




/*===============================================================================
                ��װ϶� #Solutions (CHT)
================================================================================*/
#Solutions {
    background:
        radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.25) 0%, transparent 70%),
        linear-gradient(rgba(6, 182, 212, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, #0B1121 0%, #151e32 100%);
    background-size: 100% 100%, 50px 50px, 50px 50px, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 50px 50px, 50px 50px, 0 0; }
}

#Solutions::before {
    content: '';
    position: absolute;
    width: 1.25px;
    height: 1.25px;
    top: 100%;
    left: 0;
    background: transparent;
    box-shadow:
        8vw 20vh 0 0 rgba(6, 182, 212, 0.9),
        23vw 45vh 0 0 rgba(6, 182, 212, 0.7),
        47vw 10vh 0 0 rgba(168, 85, 247, 0.9),
        71vw 65vh 0 0 rgba(168, 85, 247, 0.7),
        92vw 35vh 0 0 rgba(16, 185, 129, 0.9),
        15vw 80vh 0 0 rgba(16, 185, 129, 0.8),
        38vw 5vh 0 0 rgba(6, 182, 212, 0.6),
        62vw 55vh 0 0 rgba(168, 85, 247, 0.8),
        85vw 25vh 0 0 rgba(16, 185, 129, 0.7),
        5vw 70vh 0 0 rgba(6, 182, 212, 0.8),
        29vw 15vh 0 0 rgba(168, 85, 247, 0.6),
        53vw 90vh 0 0 rgba(16, 185, 129, 0.9),
        77vw 40vh 0 0 rgba(6, 182, 212, 0.7),
        95vw 60vh 0 0 rgba(168, 85, 247, 0.8),
        12vw 30vh 0 0 rgba(16, 185, 129, 0.6),
        35vw 75vh 0 0 rgba(6, 182, 212, 0.9),
        59vw 50vh 0 0 rgba(168, 85, 247, 0.7),
        81vw 8vh 0 0 rgba(16, 185, 129, 0.8),
        18vw 85vh 0 0 rgba(6, 182, 212, 0.8),
        42vw 22vh 0 0 rgba(168, 85, 247, 0.9),
        66vw 95vh 0 0 rgba(16, 185, 129, 0.7),
        88vw 12vh 0 0 rgba(6, 182, 212, 0.6),
        3vw 68vh 0 0 rgba(168, 85, 247, 0.8),
        26vw 42vh 0 0 rgba(16, 185, 129, 0.9),
        51vw 78vh 0 0 rgba(6, 182, 212, 0.7),
        74vw 33vh 0 0 rgba(168, 85, 247, 0.8),
        96vw 58vh 0 0 rgba(16, 185, 129, 0.6),
        20vw 88vh 0 0 rgba(6, 182, 212, 0.9),
        44vw 18vh 0 0 rgba(168, 85, 247, 0.7),
        68vw 52vh 0 0 rgba(16, 185, 129, 0.8),
        /* Additional Particles Set 1 */
        10vw 25vh 0 0 rgba(6, 182, 212, 0.8),
        32vw 52vh 0 0 rgba(168, 85, 247, 0.7),
        55vw 15vh 0 0 rgba(16, 185, 129, 0.9),
        82vw 72vh 0 0 rgba(6, 182, 212, 0.6),
        98vw 42vh 0 0 rgba(168, 85, 247, 0.8),
        21vw 85vh 0 0 rgba(16, 185, 129, 0.7),
        41vw 8vh 0 0 rgba(6, 182, 212, 0.9),
        65vw 62vh 0 0 rgba(168, 85, 247, 0.6),
        89vw 28vh 0 0 rgba(16, 185, 129, 0.8),
        7vw 75vh 0 0 rgba(6, 182, 212, 0.7),
        31vw 18vh 0 0 rgba(168, 85, 247, 0.9),
        58vw 92vh 0 0 rgba(16, 185, 129, 0.6),
        79vw 45vh 0 0 rgba(6, 182, 212, 0.8),
        94vw 63vh 0 0 rgba(168, 85, 247, 0.7),
        /* Additional Particles Set 2 */
        14vw 33vh 0 0 rgba(6, 182, 212, 0.9),
        39vw 78vh 0 0 rgba(168, 85, 247, 0.8),
        61vw 55vh 0 0 rgba(16, 185, 129, 0.7),
        83vw 15vh 0 0 rgba(6, 182, 212, 0.6),
        19vw 87vh 0 0 rgba(168, 85, 247, 0.9),
        46vw 25vh 0 0 rgba(16, 185, 129, 0.8),
        69vw 98vh 0 0 rgba(6, 182, 212, 0.7),
        91vw 18vh 0 0 rgba(168, 85, 247, 0.6),
        4vw 65vh 0 0 rgba(16, 185, 129, 0.9),
        27vw 45vh 0 0 rgba(6, 182, 212, 0.8),
        56vw 82vh 0 0 rgba(168, 85, 247, 0.7),
        75vw 36vh 0 0 rgba(16, 185, 129, 0.9),
        99vw 61vh 0 0 rgba(6, 182, 212, 0.6);
    animation: particlesFloat 12s linear infinite;
    pointer-events: none;
}

@keyframes particlesFloat {
    0% { transform: translateY(0); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

#Solutions::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin: -300px 0 0 -300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

#Solutions .TitleArea {
    margin-bottom: 4rem;
    z-index: 1;
}

#Solutions .TitleArea h1 {
    color: #ffffff;
}

#Solutions .TitleArea .Description {
    color: #94a3b8;
}

.grid-solutions {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}

#Solutions .MyCard {
    position: relative;
    background:
        linear-gradient(rgba(var(--theme-rgb), 0.25), rgba(var(--theme-rgb), 0.25)) right 1.5rem bottom 1.5rem / 20px 2px no-repeat,
        linear-gradient(rgba(var(--theme-rgb), 0.25), rgba(var(--theme-rgb), 0.25)) right 1.5rem bottom 1.5rem / 2px 20px no-repeat,
        rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#Solutions .MyCard-CTA {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    text-decoration: none;
    align-self: flex-start;
    position: relative;
}

#Solutions .MyCard-CTA:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #000;
    box-shadow: 0 0 15px var(--theme-color);
}

#Solutions .MyCard-CTA.link-internal::after,
#Solutions .MyCard-CTA.link-external::after {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

#Solutions .MyCard-CTA.link-internal::after {
    mask-image: url('../../../images/Index/icon_arrow_right.svg');
    -webkit-mask-image: url('../../../images/Index/icon_arrow_right.svg');
}

#Solutions .MyCard-CTA.link-internal:hover::after {
    background-color: #000;
    transform: translateX(0.25rem);
}

#Solutions .MyCard-CTA.link-external::after {
    mask-image: url('../../../images/Index/icon_external_link.svg');
    -webkit-mask-image: url('../../../images/Index/icon_external_link.svg');
}

#Solutions .MyCard-CTA.link-external:hover::after {
    background-color: #000;
    transform: translate(0.125rem, -0.125rem);
}

#Solutions .MyCard-CTA svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
#Solutions .MyCard-CTA:hover svg { transform: translateX(4px); }

.solution-card {
    position: relative;
    background:
        linear-gradient(rgba(var(--theme-rgb), 0.25), rgba(var(--theme-rgb), 0.25)) right 1.5rem bottom 1.5rem / 20px 2px no-repeat,
        linear-gradient(rgba(var(--theme-rgb), 0.25), rgba(var(--theme-rgb), 0.25)) right 1.5rem bottom 1.5rem / 2px 20px no-repeat,
        rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(var(--theme-rgb), 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.solution-card>* { position: relative; z-index: 1; }

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5rem;
    border: 2px solid var(--theme-color);
    background: linear-gradient(135deg, var(--theme-color) 0%, transparent 50%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.solution-card:hover::before { opacity: 0.5; }

.solution-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--theme-color) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.solution-card:hover::after { opacity: 0.2; }

.solution-card:hover {
    transform: translateY(-12px) !important;
    border-color: var(--theme-color);
    background:
        linear-gradient(rgba(var(--theme-rgb), 0.5), rgba(var(--theme-rgb), 0.5)) right 1.5rem bottom 1.5rem / 20px 2px no-repeat,
        linear-gradient(rgba(var(--theme-rgb), 0.5), rgba(var(--theme-rgb), 0.5)) right 1.5rem bottom 1.5rem / 2px 20px no-repeat,
        rgba(18, 22, 40, 0.95);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--theme-rgb), 0.15),
        inset 0 0 20px rgba(var(--theme-rgb), 0.05);
}

.card-ai { --theme-rgb: 0, 210, 255; --theme-color: rgb(var(--theme-rgb)); color: var(--theme-color); }
.card-system { --theme-rgb: 138, 43, 226; --theme-color: rgb(var(--theme-rgb)); color: var(--theme-color); }
.card-uav { --theme-rgb: 0, 255, 204; --theme-color: rgb(var(--theme-rgb)); color: var(--theme-color); }

.solution-icon {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-card:hover .solution-icon {
    border-color: var(--theme-color);
    background: rgba(var(--theme-rgb), 0.1);
    box-shadow: 0 0 20px var(--theme-color);
}

.solution-icon svg {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 5px currentColor);
    transition: all 0.4s ease;
}

.solution-card:hover .solution-icon svg {
    filter: drop-shadow(0 0 10px currentColor);
    transform: scale(1.1);
}

.solution-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.solution-card h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

.card-description { font-size: 1rem; color: #cbd5e1; line-height: 1.7; margin-bottom: 1.5rem; flex-grow: 1; }
.card-features { list-style: none; margin-bottom: 1.5rem; }
.card-features li {
    color: #e2e8f0;
    font-size: 0.95rem;
    padding: 0.25rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.card-features li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-color);
    box-shadow: 0 0 10px var(--theme-color);
    flex-shrink: 0;
    color: var(--theme-color);
    font-size: 0.6rem;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    text-decoration: none;
    align-self: flex-start;
}

.card-link:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #000;
    box-shadow: 0 0 15px var(--theme-color);
}

.card-link svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.card-link:hover svg { transform: translateX(4px); }


/*===============================================================================
                精選專案 #Carousel (CHT)
================================================================================*/
#Carousel {
    background-color: #ffffff;
    background-image: url(../../../images/Index/BG_2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#Carousel .wrapper {
    padding-top: 4em;
    padding-bottom: 4em;
}

#Carousel .wrapper .swiper {
    width: 80%;
    padding: 1rem 3rem;
}

/* #Carousel TitleArea 樣式 */
#Carousel .TitleArea {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#Carousel .TitleArea h1 {
    color: #268EB5;
    font-size: 2rem;
    margin-bottom: 0;
}

#Carousel .TitleArea .Description {
    color: #475569;
}

#Carousel .TitleBadge {
    background: rgba(38, 142, 181, 0.1);
    color: #268EB5;
    border: 1px solid rgba(38, 142, 181, 0.3);
    box-shadow: 0 0 10px rgba(38, 142, 181, 0.15);
}

#Carousel .swiper-wrapper {
    margin: 0 0 2rem 0;
    box-sizing: border-box;
}

#Carousel .swiper-slide {
    position: relative;
    overflow: hidden;
}

#Carousel .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#Carousel .swiper-slide a {
    position: relative;
    overflow: hidden;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    height: 400px;
    background: transparent;
    transition: all 0.4s ease;
}

#Carousel .swiper-slide a::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
    opacity: 0;
    transition: opacity 0.5s ease-out 0s;
    z-index: -1;
}

#Carousel .swiper-slide a:hover::before { opacity: 1; }

#Carousel .swiper-slide a>div {
    overflow: hidden;
    margin-bottom: 1rem;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#Carousel .swiper-slide a:hover>div { height: 120px; }

#Carousel .swiper-slide h2,
#Carousel .swiper-slide h3 {
    font-size: 1.4rem;
    text-align: center;
    color: #268EB5;
    transition: color 0.5s ease 0s;
    max-width: unset;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.multiline_ellipsis {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: auto;
    color: #606060;
    line-height: 1.5em;
    transition: color 0.5s ease 0s;
}

#Carousel .swiper-slide a:hover h2,
#Carousel .swiper-slide a:hover h3 {
    color: #08e7de;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#Carousel .swiper-slide a:hover .multiline_ellipsis {
    color: #fff;
    -webkit-line-clamp: 9;
}

.swiper-button-next,
.swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 36%);
    color: #268EB5;
    opacity: 0.6;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1;
}

.swiper-pagination-bullet-active { background: #268EB5; }

/*===============================================================================
                模組專區 #DomainServices (CHT)
================================================================================*/
#DomainServices {
    /* 很在意在大同小異外觀是否統一時的背景色，在在意上面加了一層龜裂的紋路 */
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 85%, #E0F2FE 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.domain-bg-illustration {
    position: absolute;
    right: -0.1%;
    bottom: -0.1%;
    width: 60%;
    max-width: 1024px;
    opacity: 0.68; 
    z-index: -1;
    pointer-events: none;
    transition: all 0.5s ease;
    mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 100%);
}

.domain-bg-illustration img { width: 100%; height: auto; }

#DomainServices .TitleArea {
    margin-bottom: 4rem;
    z-index: 2;
}

#DomainServices .TitleBadge {
    background: rgba(8, 231, 222, 0.12);
    color: #067174;
    border: 1px solid rgba(8, 231, 222, 0.35);
    box-shadow: 0 0 10px rgba(8, 231, 222, 0.15);
    position: relative;
    overflow: hidden;
}

#DomainServices .TitleBadge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(8, 231, 222, 0.4), transparent);
    animation: tech-scan-x 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tech-scan-x { 0% { left: -100%; } 100% { left: 200%; } }

#DomainServices .TitleArea h1 {
    color: #0f172a;
    text-shadow: 0 2px 10px rgba(255,255,255,0.8);
}

#DomainServices .TitleArea .Description {
    color: #475569;
}

.domain-slider-wrapper {
    position: relative;
    max-width: 960px;
    margin: 0 0 0 5%;
    padding: 0 100px;
    z-index: 2;
    overflow: visible;
}

.slider-label {
    display: inline-block;
    background: linear-gradient(135deg, #0e5e87 0%, #08979c 100%);
    color: #fff;
    padding: 8px 24px;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 20px 20px 20px 0;
    box-shadow: 
        0 6px 20px rgba(14, 94, 135, 0.35),
        0 2px 8px rgba(8, 151, 156, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.slider-label-hint {
    display: inline-block;
    font-size: 0.875rem;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

.domain-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-top: 1.5px solid rgba(255, 255, 255, 1);
    border-bottom: 1.5px solid rgba(8, 151, 156, 0.2);
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
    box-sizing: border-box;
    box-shadow: 
        0 8px 32px rgba(15, 23, 42, 0.08),
        0 2px 8px rgba(14, 94, 135, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.domain-card::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #08e7de;
    box-shadow: 0 0 15px #08e7de, 0 0 30px #08e7de;
    transition: top 0s;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}

.domain-card:hover::before {
    top: 100%;
    opacity: 0.7;
    transition: top 2s ease-in-out, opacity 0.3s ease;
}

/*===============================================================================
                關於我們區塊 #About (CHT)
================================================================================*/
/* Override old floats for About title area to perfectly align and center new TitleBadge */
#About .TitleArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
    float: none;
    width: 100%;
}

#About .TitleArea h1 {
    float: none;
    width: auto;
    margin-bottom: 0;
}


.domain-card:hover::before {
    top: 100%;
    opacity: 0.7;
    transition: top 1.5s linear; 
}

#DomainServices .domainSwiper {
    padding: 30px 0 60px 0;
    overflow: hidden;
    position: relative;
}

#DomainServices .domainSwiper .swiper-wrapper { align-items: stretch; }

#DomainServices .domainSwiper .swiper-slide {
    width: 300px;
    height: auto;
    display: flex;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

#DomainServices .domainSwiper .swiper-slide .domain-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#DomainServices .domainSwiper .swiper-slide:not(.swiper-slide-active) {
    filter: blur(1.5px); 
    opacity: 0.45;
}

#DomainServices .domainSwiper .swiper-slide:not(.swiper-slide-active) .domain-card:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.6);
}

#DomainServices .domainSwiper .swiper-slide:not(.swiper-slide-active) .domain-card:hover::before {
    opacity: 0;
    transition: none;
}

.domain-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(8, 231, 222, 0.4); 
    box-shadow: 
        0 15px 35px rgba(14, 94, 135, 0.1),
        0 0 20px rgba(8, 231, 222, 0.15),
        inset 0 0 0 1px rgba(8, 231, 222, 0.25);
}

.domain-card:hover .card-img {
    transform: scale(1.15) translateY(-5px); 
}

.domain-card:hover .card-img::after { opacity: 0.9; animation: pulse 1.6s ease-in-out infinite; }

.domain-card .card-img {
     width: 156px;
    height: 156px;
    margin: 10px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; 
    border: none;          
    box-shadow: none;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.domain-card .card-img::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background: radial-gradient(circle, rgba(8, 151, 156, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.domain-services-cta {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.domain-services-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18rem;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0e5e87 0%, #08979c 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 28px rgba(14, 94, 135, 0.22), 0 4px 12px rgba(8, 151, 156, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.domain-services-cta-link::after {
    content: "\2192";
    margin-left: 0.75rem;
    font-size: 1.05rem;
    transition: transform 0.3s ease;
}

.domain-services-cta-link:hover,
.domain-services-cta-link:focus-visible {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(14, 94, 135, 0.28), 0 6px 18px rgba(8, 151, 156, 0.2);
    filter: saturate(1.05);
}

.domain-services-cta-link:hover::after,
.domain-services-cta-link:focus-visible::after {
    transform: translateX(4px);
}

.domain-services-cta-link:focus-visible {
    outline: 3px solid rgba(8, 231, 222, 0.35);
    outline-offset: 4px;
}

.domain-card .card-img img,
.domain-card .card-img svg {  width: 100%; height: 100%; object-fit: contain; }



.domain-card h3 {
    font-size: 1.3rem;
    color: #0f172a;
    margin: 12px 0 10px;
    letter-spacing: 0.02em;
}

.domain-card p {
    color: #1e293b;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    min-height: calc(1.4em * 3);
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}
.domain-card:hover p {
    color: #08979c; 
}

.domain-card .btn-arrow {
    width: 40px;
    height: 40px;
    margin: 14px auto 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0e5e87 0%, #08979c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 18px rgba(14, 94, 135, 0.25);
}

.domain-btn-prev,
.domain-btn-next {
    position: absolute;
    top: 42%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 
        0 10px 30px rgba(14, 94, 135, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(255, 255, 255, 0.9);
    color: #08979c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.domain-btn-prev::after,
.domain-btn-next::after { font-size: 22px; }
.domain-btn-prev { left: -10px; }
.domain-btn-next { right: -10px; }

.domain-btn-prev:hover,
.domain-btn-next:hover,
.domain-btn-prev:focus-visible,
.domain-btn-next:focus-visible {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(14, 94, 135, 0.35),
        0 5px 14px rgba(0, 0, 0, 0.12),
        0 0 0 4px rgba(8, 231, 222, 0.2);
}

.domain-btn-prev:active,
.domain-btn-next:active { transform: translateY(0) scale(0.98); }

/*===============================================================================
                About �s���i���G�� (CHT)
================================================================================*/
#About:has(.about-wave-container) {
    --bg-main: #FFFFFF; 
    --icon-main: #334155;
    --icon-accent: #08979c;
    position: relative;
    width: 100%;
    padding: 100px 0 160px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 加入一點點狀紋路背景，不要太明顯 */
    background: linear-gradient(to bottom, #FFFFFF 0%, #F8FAFC 100%);
    z-index: 1;
    overflow: hidden;
}

#About:has(.about-wave-container)::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("../../../images/Index/gis-bg-dense.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* 加上一點透明度讓背景透出且柔和，並透過混合模式 */
    opacity: 0.10;
    mix-blend-mode: multiply;
    z-index: -2;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
}

#About:has(.about-wave-container)::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 淡白射底，會與加精油，並透過淡入與同 */
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(241, 245, 249, 0.8) 100%);
    z-index: -1;
    display: block;
    pointer-events: none;
}

#About:has(.about-wave-container) .innerBoxs { padding-top: 5em; padding-bottom: 8em; }

#About:has(.about-wave-container) .TitleBadge{
    background: rgba(5, 218, 255, 0.12);
    color: #268eb5;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
#About:has(.about-wave-container) .TitleArea {
    z-index: 2;
    margin-bottom: 60px;
    float: none;
    text-align: center;
}

#About:has(.about-wave-container) .TitleArea h1 {
    width: 100%;
    float: none;
    color: #0f172a;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

#About:has(.about-wave-container) .TitleArea .Description {
    float: none;
    width: 100%;
    color: #334155;
}

.about-link:focus-visible { outline: 3px solid #268EB5; outline-offset: 8px; border-radius: 8px; }
.about-link:focus:not(:focus-visible) { outline: none; }

#About:has(.about-wave-container) .Decoration::before { opacity: 0.3; }

.about-wave-container {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 45px;
    margin-top: 40px;
    padding-bottom: 60px;
    position: relative;
    z-index: 2; 
    clear: both;
}

.about-item { flex: 1; max-width: 170px; text-align: center; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.about-link { text-decoration: none; display: block; }
.about-item:nth-child(even) { transform: translateY(25px); }
.about-item:nth-child(odd) { transform: translateY(-5px); }

.about-circle {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    position: relative;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-inner svg {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: transform 0.4s ease;
    transform: translateY(2px);
}

@keyframes svg-rotate-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes compass-magnetic {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
}
@keyframes handshake-pump {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(0.3deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(3px) rotate(-0.3deg); }
}
@keyframes svg-pulse-accent {
    0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 2px var(--icon-accent)); }
    50% { opacity: 1; filter: drop-shadow(0 0 10px var(--icon-accent)); }
}
@keyframes shield-pulse-energy {
    0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 2px var(--icon-main)); }
    50% { transform: scale(1.015); filter: brightness(1.15) drop-shadow(0 0 15px var(--icon-main)); }
}
@keyframes dot-flicker { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes star-spin-glow {
    0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 var(--icon-accent)); }
    50% { transform: scale(1.2) rotate(180deg); filter: drop-shadow(0 0 10px var(--icon-accent)); }
    100% { transform: scale(1) rotate(360deg); filter: drop-shadow(0 0 0 var(--icon-accent)); }
}
@keyframes esg-dot-glow { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }
@keyframes leaf-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.5deg); } }
@keyframes shield-steady-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 5px rgba(8, 151, 156, 0.2)); }
    50% { transform: scale(1.06); filter: brightness(1.2) drop-shadow(0 0 25px rgba(8, 151, 156, 0.6)); }
}
@keyframes shield-lock-confirm {
    0%, 70% { fill: var(--icon-accent); filter: none; }
    85% { fill: #48C6EF; filter: drop-shadow(0 0 12px #4AC29A); transform: scale(1.1); }
    100% { fill: var(--icon-accent); filter: none; }
}

.vision-icon path, .vision-icon g,
.security-icon path, .security-icon g,
.partner-icon path, .partner-icon g { transform-box: view-box; transform-origin: center; }
.esg-icon path:first-child { transform-box: fill-box; transform-origin: center bottom; }
.building-windows path { transform-box: fill-box; transform-origin: center; animation: svg-pulse-accent 3s ease-in-out infinite; }
.vision-small-needles { animation: svg-rotate-reverse 20s linear infinite; }
.vision-main-needle { animation: compass-magnetic 6s ease-in-out infinite; }
.handshake-left, .handshake-right, .handshake-center { animation: handshake-pump 3s ease-in-out infinite; }
.handshake-left { animation-delay: -0.2s; }
.handshake-right { animation-delay: 0s; }
.handshake-links { animation: svg-pulse-accent 2.5s ease-in-out infinite; }
.shield-frame { transform-box: fill-box; transform-origin: center; animation: shield-steady-pulse 4s ease-in-out infinite; }
.svg-accent { transform-box: fill-box; transform-origin: center; animation: shield-lock-confirm 4s ease-in-out infinite; }
.security-nodes circle { animation: dot-flicker 2.5s ease-in-out infinite; }
.security-nodes .node-1 { animation-delay: 0s; }
.security-nodes .node-2 { animation-delay: 0.5s; }
.security-nodes .node-3 { animation-delay: 1s; }
.security-nodes .node-4 { animation-delay: 1.5s; }
.security-nodes .node-5 { animation-delay: 2s; }
.esg-icon path:first-child { animation: leaf-sway 4s ease-in-out infinite; }
.esg-dots circle { animation: esg-dot-glow 2.2s ease-in-out infinite; }
.esg-dots .dot-1  { animation-delay: 0.0s; }
.esg-dots .dot-2  { animation-delay: 0.15s; }
.esg-dots .dot-3  { animation-delay: 0.3s; }
.esg-dots .dot-4  { animation-delay: 0.45s; }
.esg-dots .dot-5  { animation-delay: 0.6s; }
.esg-dots .dot-6  { animation-delay: 0.75s; }
.esg-dots .dot-7  { animation-delay: 0.9s; }
.esg-dots .dot-8  { animation-delay: 1.05s; }
.esg-dots .dot-9  { animation-delay: 1.2s; }
.esg-dots .dot-10 { animation-delay: 1.35s; }
.esg-dots .dot-11 { animation-delay: 1.5s; }

.about-item p {
    font-size: 1.5rem; 
    font-weight: 600;
    text-align: center;
    color: #1e293b;
    margin-top: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.about-item:nth-child(odd) { transform: translateY(-30px); }
.about-item:nth-child(even) { transform: translateY(30px); }
.about-item:hover { z-index: 10; }
.about-item:hover:nth-child(odd) { transform: translateY(-45px); }
.about-item:hover:nth-child(even) { transform: translateY(15px); }

.about-item:hover .about-circle {
    box-shadow: 
        0 0 0 1px rgba(0, 217, 255, 0.3),
        0 20px 40px rgba(0, 150, 255, 0.15);
    transform: scale(1.08);
}

.about-item:hover .about-circle::before { inset: -12px; border-color: rgba(0, 217, 255, 0.4); }
.about-item:hover .about-circle::after { inset: -22px; border-color: rgba(0, 217, 255, 0.2); }
.about-item:hover .circle-inner svg { transform: scale(1.15); }
.about-item:hover p { color: #268EB5; transform: translateY(5px); }



/*=========================================================================
     Media Query
  =========================================================================  */

/* ≥ 1201px ── 大螢幕 ──────────────────────────────────────────────────── */
@media only screen and (min-width: 1201px) {
    /* #LatestEvents */
    #LatestEvents .grid-events { grid-template-columns: 1fr 1fr 1.2fr; }
}

/* 768px ~ 1200px ── 平板橫向 ──────────────────────────────────────────── */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    /* #LatestEvents */
    #LatestEvents .grid-events { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    #LatestEvents .grid-events .card-hiring,
    #LatestEvents .grid-events .card-social,
    #LatestEvents .grid-events .card-video,
    #LatestEvents .grid-events .card-esg { grid-column: auto; grid-row: auto; }
    #LatestEvents .card-social .facebook-container { min-height: 24rem; }
    #LatestEvents .card-video-wrapper { height: 12rem; }
    #LatestEvents .card-esg-visual { height: 15rem; margin-bottom: 0.5rem; }
}

/* ≤ 1200px ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1200px) {
    /* #Solutions */
    .grid-solutions { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ≤ 1024px ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1024px) {
	.TitleArea .Description {
		margin: 0 auto;
		max-width: 85%;
	}
    /* #DomainServices */
    .domain-bg-illustration { width: 80%; opacity: 0.1; }
    .domain-slider-wrapper { padding: 0 75px; margin: 0 auto; overflow: visible; }
    .domain-btn-prev, .domain-btn-next { width: 48px; height: 48px; margin-top: -24px; }
    .domain-btn-prev::after, .domain-btn-next::after { font-size: 20px; }
    .domain-btn-prev { left: 5px; }
    .domain-btn-next { right: 5px; }

    /* #About */
    #About:has(.about-wave-container) { padding: 60px 0 80px 0; height: auto; }
    #About:has(.about-wave-container) .innerBoxs { padding-top: 2em; padding-bottom: 2em; }
    #About:has(.about-wave-container)::before { background-position: center top; background-size: cover; }
    .about-wave-container { flex-wrap: wrap; gap: 40px 20px; margin-top: 30px; padding-bottom: 0; justify-content: center; }
    .about-item { flex: 0 0 calc(33.33% - 20px); max-width: 200px; margin-bottom: 20px; }
    .about-item:nth-child(n) { transform: translateY(0) !important; }
    .about-item:hover:nth-child(n) { transform: translateY(-5px) !important; }
}

/* ≤ 768px ─────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {
    /* #DomainServices */
    #DomainServices { padding: 4rem 0; }
    #DomainServices .TitleArea h1 { font-size: 2rem; }
    .domain-slider-wrapper { padding: 0 60px; overflow: visible; }
    .domain-services-cta { margin-top: 0.5rem; }
    .domain-services-cta-link { min-width: 16rem; padding: 0.9rem 1.5rem; font-size: 0.95rem; }
    .domain-btn-prev, .domain-btn-next {
        width: 44px; height: 44px; margin-top: -22px;
        box-shadow:
            0 6px 20px rgba(14, 94, 135, 0.3),
            0 3px 8px rgba(0, 0, 0, 0.12),
            0 0 0 3px rgba(255, 255, 255, 0.85);
    }
    .domain-btn-prev::after, .domain-btn-next::after { font-size: 18px; }
    .domain-btn-prev { left: 8px; }
    .domain-btn-next { right: 8px; }
    .domain-bg-illustration { width: 100%; right: -10%; bottom: 0; }
    .domain-card { padding: 20px 12px; }
    .domain-card .card-img { width: 120px; height: 120px; margin: 10px auto 16px; }
    .domain-card p { min-height: calc(1.4em * 2.6); }

    /* #About */
    .about-item { flex: 0 0 calc(50% - 20px); }
}

/* ≤ 47.9375em (~767px) ── 手機 ─────────────────────────────────────────── */
@media only screen and (max-width: 47.9375em) {
    .TitleArea { padding: 0 1.5rem; box-sizing: border-box; }
    .TitleArea h1 { font-size: 2rem; }
    .TitleArea .Description { font-size: 1rem; }

     /* #Carousel */
    #Carousel .wrapper .swiper{
        padding: 1rem 2rem;
    }

    /* #LatestEvents */
    #LatestEvents .TitleArea h1 { font-size: 2rem; }
    #LatestEvents .grid-events { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 0.9375rem; }
    #LatestEvents .grid-events .card-hiring,
    #LatestEvents .grid-events .card-social,
    #LatestEvents .grid-events .card-video,
    #LatestEvents .grid-events .card-esg { grid-column: auto; grid-row: auto; }
    #LatestEvents .MyCard { padding: 1.25rem; }
    #LatestEvents .MyCard .card-title h2 { font-size: 1.125rem; }
    #LatestEvents .card-hiring ul li { font-size: 0.8125rem; }
    #LatestEvents .card-social .facebook-container { min-height: 21.875rem; }
    #LatestEvents .card-video .card-header,
    #LatestEvents .card-esg .card-header { padding: 1.25rem; }
    #LatestEvents .card-video-wrapper { height: 11rem; }
    #LatestEvents .video-overlay-text { padding: 0.75rem; }
    #LatestEvents .video-overlay-text .video-title { font-size: 1rem; }
    #LatestEvents .video-overlay-text .video-subtitle { font-size: 0.8125rem; }
    #LatestEvents .card-esg-visual { height: 10rem; }
    #LatestEvents .esg-overlay-text { padding: 0.5rem; }
    #LatestEvents .esg-overlay-text .esg-practice { font-size: 0.8125rem; }
    #LatestEvents .esg-overlay-text .esg-description { font-size: 1rem; }
    #LatestEvents .card-esg .MyCard-CTA { margin: 1rem 0 1.25rem; }

    /* #Solutions */
    #Solutions { padding: 3rem 0; }
    .grid-solutions { grid-template-columns: 1fr; padding: 0 1.5rem; gap: 1.5rem; }
    .solution-card { padding: 1.5rem; }
    .solution-card h2 { font-size: 1.5rem; }
    .solution-card h3 { font-size: 0.8rem; }
    #Solutions .MyCard-CTA { width: 100%; max-width: 260px; justify-content: center; align-self: center; }
}

/* 30em ~ 47.9375em ── Mobile Landscape ───────────────────────────────── */
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
    .TitleArea .Description { width: auto; }

    
}

/* ≤ 480px ─────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 480px) {
    /* #DomainServices */
    #DomainServices { padding: 3rem 0; }
    #DomainServices .TitleBadge { padding: 5px 12px; font-size: 0.75rem; letter-spacing: 1px; gap: 6px; margin-bottom: 16px; }
    #DomainServices .TitleBadge svg { width: 14px; height: 14px; }
    #DomainServices .TitleArea { padding: 0 1.25rem; }
    .domain-slider-wrapper { padding: 0 50px; margin-top: 2rem; }
    .domain-services-cta { padding: 0 1.25rem; }
    .domain-services-cta-link { width: 100%; min-width: 0; font-size: 0.9rem; letter-spacing: 0.04em; }
    .slider-label { font-size: 0.8rem; padding: 5px 16px; }
    .domain-btn-prev, .domain-btn-next { width: 44px; height: 44px; margin-top: -22px; }
    .domain-btn-prev::after, .domain-btn-next::after { font-size: 16px; }
    .domain-btn-prev { left: 3px; }
    .domain-btn-next { right: 3px; }
    .domain-card { padding: 18px 10px; }
    .domain-card .card-img { width: 110px; height: 110px; margin: 8px auto 14px; }
    .domain-card p { font-size: 1.15rem; line-height: 1.35; min-height: calc(1.35em * 2.4); }

    /* #About */
    #About:has(.about-wave-container) .TitleArea h1 { font-size: 2rem; }
    .about-wave-container { 
        gap: 40px; 
        flex-direction: column; 
        align-items: center;
    }
    .about-item { 
        flex: 0 0 100%; 
        max-width: 100%;       
        transform: none !important; 
        margin-bottom: 0;      
    }
    
    .about-item:nth-child(odd), 
    .about-item:nth-child(even) { 
        transform: none !important; 
    }
}

/* ≤ 29.9375em (~479px) ── Mobile Portrait ─────────────────────────────── */
@media only screen and (max-width: 29.9375em) {
    /* #LatestEvents */
    #LatestEvents .card-video .card-header,
    #LatestEvents .card-esg .card-header { padding: 0; }

    /* #Solutions */
    #Solutions .TitleArea .Description { display: none; }
}

/* ≤ 400px ─────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 400px) {
    /* #DomainServices */
    #DomainServices { padding: 2.5rem 0; }
    #DomainServices .TitleArea { padding: 0 1rem; }
    #DomainServices .TitleArea h1 { font-size: 1.35rem; line-height: 1.4; }
    #DomainServices .TitleArea .Description { font-size: 0.85rem; line-height: 1.65; }
    .domain-slider-wrapper { padding: 0 45px; }
    .slider-label { font-size: 0.8rem; padding: 5px 16px; }
}

/* prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #DomainServices .TitleBadge::after { animation: none; }
    .domain-card,
    .domain-card .card-img,
    .domain-btn-prev,
    .domain-btn-next { transition: none; }
    .domain-card:hover,
    .domain-card:focus-visible { transform: none; }
    .domain-card:hover .card-img { transform: none; }
    .domain-card:hover .card-img::after { animation: none; }
    .domain-card::before { display: none; }
}

/* prefers-contrast: high ─────────────────────────────────────────────── */
@media (prefers-contrast: high) {
    #DomainServices .TitleBadge { border: 2px solid #067174; background: rgba(8, 231, 222, 0.2); }
    .domain-card { border: 2px solid #0e5e87; }
    .domain-btn-prev,
    .domain-btn-next { border: 3px solid #0e5e87; }
}