/* RWD 設計 */
/* @media (max-width: 1440px) {
    .contact-us .card{
        padding: 30px;
    }

    .contact-us h5{
        font-size: 1.75rem;
    }
} */
 
@media (min-width: 1920px){
    .featured-item .row {
        height: 31.25vw;
    }
}

/* 筆電 */
@media (max-width: 1440px) and (min-width: 991px) {
    .featured-item .row {
        height: 450px;
    }

    .feature_1, .feature_2, .feature_3, .feature_4{

    }

    .featureTitle {
        font-size: 2rem;
    }

    .productSubTitle {
        font-size: 35px;
    }

    /* 筆電螢幕的NAV下拉展開後都要是橫向填滿 */
    .navbar .dropdown-menu {
        position: fixed !important; /* 固定定位，脫離父元素約束 */
        left: 0 !important; /* 從螢幕左邊緣開始 */
        right: 0 !important; /* 延伸到右邊緣 */
        width: 100vw !important; /* 全螢幕寬度 */
        top: 86px !important; /* 根據導航欄高度調整 */
        margin: 0 !important; /* 移除外邊距 */
        padding: 20px 0px !important; /* 內邊距 */
        box-sizing: border-box !important; /* 確保內邊距不影響寬度 */
        background: white !important; /* 白色背景 */
        z-index: 1000 !important; /* 確保在其他元素之上 */
        outline-offset: -0.5px; /* 控制 outline 与目标的偏移量 */
        border-radius: unset !important; /* 移除圓角邊框 */
        border-top: #000 solid 1px !important; /* 上邊框 */
    }
}

/* 手機橫向模式（<=812px，考慮橫向手機） */
@media only screen and (max-width: 812px) and (orientation: landscape) {
}

/* 高解析度手機（Retina或其他高DPI螢幕） */
@media only screen and (max-width: 992px) and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (max-width: 992px) and (min-resolution: 192dpi) {
}

/* 平板（<=992px） */
@media (max-width: 992px) {
    .row{
        margin: 0;
    }

    .dropdown-menu .dropdown-item{
        font-size: 21px;
    }
    
    .whats-hot-section{
        margin-left: 3rem;
    }

    .whats-hot-section .dropdown-header{
        padding-top: 0 !important;
    }

    /* #region -----Nav Bar 區塊樣式----- */
    .navbar {
        padding: 15px 30px;
    }

    .navbar-brand {
        font-size: 1.25rem;
        margin-right: 20px;
    }

    .band-container{
        padding: 1rem 1.5rem 1rem 2rem;
    }

    .navbar-nav:last-child{
        margin-top: 1vw;
        margin-left: 6vw !important;
    }

    .nav-item {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .nav-link {
        font-size: 0.875rem;
    }

    .dropdown-menu {
        width: 100%;
        padding: 10px 10px 10px 0;
    }

    .dropdown-header {
        font-size: 2rem;
        padding-right: 2rem;
    }

    .dropdown-item {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .dropdown-item-description {
        font-size: 0.625rem;
    }
    /* #endregion */

    /* #region -----搜尋區塊樣式----- */
    /* #endregion */

    /* #region -----Hero 區塊樣式----- */
    .hero {
        padding: 80px 0;
        min-height: 95vh;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-buttons{
        justify-content: center;
    }
    /* #endregion */

    /* #region -----Feature 區塊樣式----- */
    .featured{
        padding: 0 20px;
    }

    .featured-controls {
        margin-bottom: 1.25em;
        margin-right: 0; 
    }

    .featured-item .row{
        padding: 1rem;
    }
    
    #featuredSection-track{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .custom-control {
        top: 5px;
    }

    .feature_1, .feature_2, .feature_3, .feature_4{
        /* background-size: 100% 80%; */
    }
    
    .featureTitle{
        font-size: 2.25rem;
    }

    .featureContent{
        font-size: 1rem;
    }
    /* #endregion */

    /* #region -----Application 區塊樣式----- */
    .application-row{
        gap:1rem;
        flex-direction: column; /* 垂直排列 */
        flex-wrap: nowrap; /* 確保不換行，垂直堆疊 */
    }

    .application-card {
        width: 100%; /* 卡片寬度占滿螢幕 */
        height: 25vw; /* 預設收縮高度 */
        transition: height 0.5s ease; /* 高度過渡動畫 */
        display: flex;
        flex-direction: column; /* 確保內容垂直排列 */
    }

    .application-title{
        padding-left: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .applications .custom-container{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #appTitle{
        font-size: 2rem;
    }

    #app_text{
        text-align: center;
    }

    #appSubTitle{
        width: 100%;
    }

    .applications{
        padding-top: 30px !important;
        padding-bottom: 60px !important;
    }

    .applications .custom-container{
        margin-top: 2rem !important;
    }

    .cardTitle{
        font-size: 2rem !important;
    }

    .cardContent{
        font-size: 1.25rem !important;
    }

    /* 點擊展開的卡片 */
    .application-card.active {
        height: 50vw; /* 展開時的高度 */
    }

    .application-card:first-child{
        width: 100%;
    }

    /* 點擊時顯示 overlay */
    .application-card.active .application-overlay {
        opacity: 1 !important; /* 展開時顯示詳細內容 */
    }

    .application-card:hover .application-image {
        transform: none;
    }    

    .application-card.active .application-title {
        display: none; /* 隱藏原本的標題 */
    }
    .application-image {
        background-position: top;
        background-repeat: no-repeat;
    }

    /* 調整 overlay 內文字間距 */
    .application-overlay {
        height: 100vw; /* 展開時占下半部分高度 */
        opacity: 0; /* 預設隱藏 */
        transition: opacity 0.3s ease;
        padding-top: 30%;
        justify-content: flex-start; /* 內容從頂部開始 */
        background: linear-gradient(to top, #3333332e, #000000 60%, #000000 50%, #33333366 80%);
    }

    /* 收合時顯示的標題 */
    .application-title {
        position: absolute;
        bottom: 3vw;
        z-index: 1; /* 確保標題在圖片上方 */
        background: linear-gradient(to top, #3333332e, #000000 0%, #000000 0%, #ffffff00 50%);
    }

    .application-title h5 {
        font-size: 2rem !important; /* 標題字體大小調整 */
        margin: 0;
        color: white;
    }

    .application-card:not(.active) .cardContent {
        opacity: 0 !important;
    }
    
    .consumer-image{
        background-image: url('/images/index/bg_app_1_mobile.jpg');
    }
    
    .peripheral-image{
        background-image: url('/images/index/bg_app_2_mobile.jpg');
    }
    
    .network-image{
        background-image: url('/images/index/bg_app_3_mobile.jpg');
    }
    
    .automotive-image{
        background-image: url('/images/index/bg_app_4_mobile.jpg');
    }
    
    .medtech-image{
        background-image: url('/images/index/bg_app_5_mobile.jpg');
    }
    /* #endregion */

    /* #region -----Products 區塊樣式----- */
    .products{
        padding: 3rem 1rem;
    }

    .productTitle{
        font-size: 2rem;
    }

    .productContent{
        padding-left: 30px;
    }

    .products .mobile_content{
        display: block;
        margin-right: 55px;
        padding-bottom: 4px !important;
    }

    .product-item{
        padding: 0;
    }

    #product_cn_title{
        width: unset;
    }

    #productList .splide__slide{
        margin: 1.5rem !important;
        width: 85% !important;
    }

    .products .card-header .card-title{
        font-size: 2.5rem;
    }

    /* 顯示卡片文字，移除 hover 效果 */
    .products .card-text {
        /* font-size: 1.75rem !important; */
        opacity: 1; /* 直接顯示文字 */
        height: auto; /* 文字區域高度自適應 */
        margin-bottom: 0 !important; /* 與下方圖片保持間距 */
    }

    /* 圖片調整，移除 hover 向下移動效果 */
    .products .product-image {
        margin-top: 0; /* 移除負 margin */
        transform: none !important; /* 禁用 hover 時的移動效果 */
    }

    /* 右下角箭頭按鈕 */
    .products .btn_product {
        top: auto !important;
    }

    /* 改為由jquery動態控制 */
    /* 禁用 hover 效果 */
    /* .products .card:hover .product-image {
        transform: none !important; 
    } */

    .products .card:hover .card-text {
        opacity: 1; /* 文字保持顯示 */
    }

    /* #endregion */

    /* #region -----News 區塊樣式----- */
    /* #newsSection-track{
        padding-left: 1rem !important;
    }
    
    .news{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .news-controls{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .news .splide__slide{
        margin: 0.75rem !important;
        width: calc(30% - 10px) !important;
    }

    .news .card-body{
        height: 70vw;
    }

    .news .card-text{
        font-size: clamp(12px, 0.91vmax, 9999px);
        max-height: 50%;
        overflow-y: scroll;
    }

    .news .card-title{
        font-size: clamp(14px, 0.91vmax, 9999px);
        max-height: 30%;
    } */
    /* #endregion */

    /* #region -----Join Us 區塊樣式----- */
    .align-items-stretch{
        flex-direction: column-reverse !important;
    }

    .join-us-image img{
        max-height: 100% !important;
    }

    .join-us {
        padding: 0px 0;
    }

    .join-us-content{
        margin-top: 7rem;
        margin-bottom: 7rem;
    }

    .join-us h2 {
        font-size: 1.75rem;
        margin-bottom: 20px;
    }

    #joinContent {
        font-size: 1.5rem;
        margin-bottom: 3rem;
        line-height: 2.25rem;
        padding: 0 1rem;
    }
    /* #endregion */
}

/* 小平板或大手機（<=768px） */
@media only screen and (max-width: 768px) {
    /* #region -----Nav Bar 區塊樣式----- */
    .band-container{
        padding: 13px 10px 10px 30px;
    }

    .dropdown-header{
        font-size: 1rem;
        padding-right: 1.5rem;
    }

    .whats-hot-section{
        margin-left: 0;
        margin-top: 1rem;
    }

    .navbar-nav:last-child{
        margin-left: 4vw !important;
    }
    /* #endregion */

    /* #region -----搜尋區塊樣式----- */
    /* #endregion */

    /* #region -----Hero 區塊樣式----- */
    .hero {
        padding: 60px 0; /* 縮減上下內邊距 */
        aspect-ratio: unset; /* 移除固定比例，允許高度自適應 */
        align-items: center; /* 內容垂直居中 */
    }

    .hero-container {
        padding-top: 4vh !important; /* 減少頂部內邊距 */
        padding-left: 15px;
        padding-right: 15px;
    }

    #bannerVideo {
        object-fit: cover; /* 確保影片填滿容器 */
        height: 50%; /* 確保影片高度適應 */
    }

    .overlay {
        background: linear-gradient(to top, #3333332e, #000000 0%, #000000 50%, #33333366 70%);
    }

    #bannerTitle {
        font-size: 3.875rem; /* 30px / 16 = 1.875rem，進一步縮小標題 */
        line-height: 1.3;
        margin-bottom: 0px;
    }

    #bannerContent {
        font-size: 18px;
        line-height: normal;
        margin-bottom: 20px;
    }

    .hero-buttons {
        flex-direction: column; /* 按鈕垂直排列 */
        align-items: center; /* 按鈕居中 */
        gap: 15px; /* 按鈕間距 */
    }

    .hero-buttons .btn {
        font-size: 0.875rem; /* 14px / 16 = 0.875rem，縮小按鈕文字 */

        max-width: 200px; /* 限制最大寬度，避免過寬 */
    }

    #btn_video{
        background-color: unset !important;
    }

    #btn_video img {
        width: 16px; /* 縮小播放圖標 */
        height: auto;
        margin-bottom: 0; /* 移除底部偏移 */
    }
    /* #endregion */

    /* #region -----Feature 區塊樣式----- */
    .featured-item .row{
        padding: 0;
    }
    /* #endregion */

    /* #region -----Application 區塊樣式----- */
    .application-card.active{
        height: 60vw;
    }

    .application-card:first-child{
        width: 100% !important;
    }
    /* #endregion */

    /* #region -----Products 區塊樣式----- */
    .featured{
        margin-top: 1vh !important;
        margin-bottom: 40px !important;
    }

    .featured-item .row {
        height: 31.25vw;
        text-align: center;
        flex-direction: column-reverse; /* 文字在下，圖片在上 */
        padding-left: 0 !important; /* 移除左側內邊距 */
        align-items: flex-start !important;
    }

    .feature_1{
        background: linear-gradient(0deg, #0042FF -5.45%, #FFFFFF 128.75%);
    }
    .feature_2{
        background: linear-gradient(0deg, #EEF3F8 20.61%, #DDE8F4 81.91%);
    }
    .feature_3{
        background: linear-gradient(0deg, #000000 -29.69%, #0042FF 101.43%);
    }
    .feature_4{
        background: linear-gradient(0deg, #E5EDFA 20.61%, #CCDCF6 81.91%);
    }
    
    .custom-control {
        top: 10px !important; /* 箭頭位置非常靠近頂部 */
    }

    .carousel-control-prev.custom-control {
        right: 40px; /* 微調左箭頭位置 */
    }

    .carousel-control-next.custom-control {
        right: 0px; /* 微調右箭頭位置 */
    }
    
    .featureTitle {
        margin: 22px 0 20px 0;
        font-size: 1.25rem !important; 
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .featureContent {
        /* font-size: 0.75rem !important;  */
        margin-bottom: 30px;
        line-height: normal;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .feature_text{
        width: 100% !important;
        margin-top: 1vw;
        margin-bottom: 0vw;
    }

    .feature_img{
        width: 100% !important;
    }

    .feature_1{
        background: linear-gradient(101.72deg, #0042FF -5.45%, #FFFFFF 128.75%);
    }
    .feature_2{
        background: linear-gradient(165.22deg, #EEF3F8 20.61%, #DDE8F4 81.91%);
    }
    .feature_3{
        background: linear-gradient(99.94deg, #000000 -29.69%, #0042FF 101.43%);
    }
    .feature_4{
        background: linear-gradient(165.22deg, #E5EDFA 20.61%, #CCDCF6 81.91%);
    }

    .splide__slide__container .col-sm-4{
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 5px 5px 0 0;
    }

    .carousel-image {
        height: 17rem !important;
        width: 100% !important;
        min-height: auto;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background-position: center center !important;
        background-size: contain !important;
        margin: 0 auto !important;
    }

    .img_feature_1{
        /* height: 11.5rem !important; */
    }

    .featured-item .btn_more_white {
        margin-bottom: 30px;
    }

    .carousel-indicators {
        bottom: 0px !important;
    }

    .custom-pagination button {
        width: 10vw !important; /* 最小指示器寬度 */
        height: 2vw !important; /* 最小指示器高度 */
    }
    /* #endregion */

    /* #region -----News 區塊樣式----- */
    /* .news .card-title{
        overflow-y: scroll;
    }

    .btn_news{
        top: auto !important;
    } */
    /* #endregion */

    /* #region -----Join Us 區塊樣式----- */
    #joinTitle{
        font-size: clamp(48px, 3.5rem, 999px);
    }

    .join-us-content{
        margin-left: 0;
        max-width: 100%;
    }
    /* #endregion */

    /* #region -----Contact Us 區塊樣式----- */
    /* .contact-us{
        padding-bottom: 40px !important;
    }

    .contact-us .col-sm-12{
        padding-bottom: 5vw;
    } */
    /* #endregion */

    /* #region -----Footer 區塊樣式----- */
    /* #endregion */
}

/* 小型手機（<=576px） */
@media (max-width: 576px) {
    /* #region -----通用樣式----- */
    /* .custom-container{
        padding: 0 !important;
    } */
    
    .btn_more_white, .btn_more_blue {
        border: none;
        padding: 10px 15px; 
        font-size: 1rem; 
    }
    /* #endregion */

    /* #region -----Nav Bar 區塊樣式----- */
    .band-container{
        padding-left: 25px;
    }

    .navbar {
        padding: 10px 0px 0px 0px;
    }
    
    .navbar-brand {
        font-size: 1.125rem;
        margin-right: 3vw;
    }
    
    .dropdown-header{
        padding-right: 1.25rem;
    }
    
    .nav-link {
        font-size: 0.75rem;
    }
    
    .device-placeholder {
        width: 200px;
        height: 260px;
        margin-top: 20px;
    }

    #navbarNavSearch{
        height: 4rem;
        padding: 0.5rem 0 0 0;
    }
    /* #endregion */

    /* #region -----搜尋區塊樣式----- */
    /* #endregion */


    /* #region -----Hero 區塊樣式----- */
    .hero {
        padding: 10vh 0 0 0;
    }
    
    .hero-container {
        padding-top: 1vh !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #bannerTitle {
        font-size: 2.25rem;
        line-height: 1.3;
    }
    
    #bannerContent {
        padding: 20px 0px;
        font-size: 18px;
        line-height: normal;
        margin-bottom: 10px;
    }
    
    .hero-buttons .btn {
        margin-top: 2vw;
        font-size: 1rem; 
        text-align: center;
    }
    
    #btn_video img {
        margin-left: 1vw !important;
        margin-bottom: 1vw !important;
    }
    /* #endregion */


    /* #region -----Feature 區塊樣式----- */
    .featured{
        margin-top: 1vh !important;
        margin-bottom: 40px !important;
    }

    .featured-item .row {
        height: auto;
        text-align: center;
        flex-direction: column-reverse; /* 文字在下，圖片在上 */
        padding-left: 0 !important; /* 移除左側內邊距 */
        align-items: flex-start !important;
    }

    .feature_1{
        background: linear-gradient(0deg, #0042FF -5.45%, #FFFFFF 128.75%);
    }
    .feature_2{
        background: linear-gradient(0deg, #EEF3F8 20.61%, #DDE8F4 81.91%);
    }
    .feature_3{
        background: linear-gradient(0deg, #000000 -29.69%, #0042FF 101.43%);
    }
    .feature_4{
        background: linear-gradient(0deg, #E5EDFA 20.61%, #CCDCF6 81.91%);
    }
    
    .custom-control {
        top: 10px !important; /* 箭頭位置非常靠近頂部 */
    }

    .carousel-control-prev.custom-control {
        right: 40px; /* 微調左箭頭位置 */
    }

    .carousel-control-next.custom-control {
        right: 0px; /* 微調右箭頭位置 */
    }
    
    .featureTitle {
        margin: 22px 0 20px 0;
        font-size: 1.25rem !important; 
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .featureContent {
        margin-bottom: 30px;
        line-height: normal;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .feature_text{
        margin-top: 0;
        height: 20rem;
    }

    .splide__slide__container .col-sm-4{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-image {
        height: 15rem !important;
        width: 100% !important;
        background-size: cover !important;
        background-position: top !important;
        display: block !important;
    }

    .img_feature_1{
        background-image: url("/images/index/feature_1_mobile.jpg");
    }
    .img_feature_2{
        background-image: url("/images/index/feature_2_mobile.jpg");
    }
    .img_feature_3{
        background-image: url("/images/index/feature_3_mobile.jpg");
    }
    .img_feature_4{
        background-image: url("/images/index/feature_4_mobile.jpg");
    }

    .img_feature_1{
        /* height: 13rem !important; */
    }

    .feature_img{
        height: 245px;
    }

    .featured-item .btn_more_white {
        margin-bottom: 30px;
    }

    .carousel-indicators {
        bottom: 0px !important;
    }

    .custom-pagination button {
        width: 10vw !important; /* 最小指示器寬度 */
        height: 2vw !important; /* 最小指示器高度 */
    }

    /* #endregion */

    /* #region -----Application 區塊樣式----- */
    .applications{
        padding-top: 30px !important;
        padding-bottom: 60px !important;
    }

    .applications .custom-container{
        margin-top: 0 !important;
    }

    #app_text{
        text-align: center;
    }

    #appTitle{
        font-size: 18px !important; 
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #appSubTitle{
        font-size: 1.75rem !important; 
        line-height: 1.2 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .application-row {
        flex-direction: column; /* 垂直排列 */
        gap: 20px; /* 卡片間垂直間距 */
        flex-wrap: nowrap; /* 確保不換行，垂直堆疊 */
    }

    .application-card {
        width: 100%; /* 卡片寬度占滿螢幕 */
        height: 40vw; /* 預設收縮高度 */
        transition: height 0.3s ease; /* 高度過渡動畫 */
        display: flex;
        flex-direction: column; /* 確保內容垂直排列 */
    }

    /* 點擊展開的卡片 */
    .application-card.active {
        height: 105vw; /* 展開時的高度 */
    }

    /* 點擊時顯示 overlay */
    .application-card.active .application-overlay {
        opacity: 1 !important; /* 展開時顯示詳細內容 */
    }

    .application-card:first-child{
        width: 100%;
    }

    .application-card.active .application-title {
        display: none; /* 隱藏原本的標題 */
    }
    .application-image {
        background-position: top;
        background-repeat: no-repeat;
    }

    /* 調整 overlay 內文字間距 */
    .application-overlay {
        height: 200vw; /* 展開時占下半部分高度 */
        opacity: 0; /* 預設隱藏 */
        transition: opacity 0.3s ease;
        padding-top: 70%;
        justify-content: flex-start; /* 內容從頂部開始 */
        background: linear-gradient(to top, #3333332e, #000000 60%, #000000 50%, #33333366 80%);
    }

    .application-overlay h5{
        font-size: 1.25rem !important;
        width: 100%;
    }

    /* 收合時顯示的標題 */
    .application-title {
        position: absolute;
        bottom: 3vw;
        z-index: 1; /* 確保標題在圖片上方 */
        background: linear-gradient(to top, #3333332e, #000000 0%, #000000 0%, #ffffff00 50%);
        padding-left: 20px;
        padding-bottom: 20px;
    }

    .application-title h5 {
        font-size: 1.2rem !important;
        margin: 0;
        color: white;
    }

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

    .application-card:not(.active) .cardContent {
        opacity: 0 !important;
    }
    
    .consumer-image{
        background-image: url('/images/index/bg_app_1_mobile.jpg');
    }
    
    .peripheral-image{
        background-image: url('/images/index/bg_app_2_mobile.jpg');
    }
    
    .network-image{
        background-image: url('/images/index/bg_app_3_mobile.jpg');
    }
    
    .automotive-image{
        background-image: url('/images/index/bg_app_4_mobile.jpg');
    }
    
    .medtech-image{
        background-image: url('/images/index/bg_app_5_mobile.jpg');
    }

    /* #endregion */

    /* #region -----Products 區塊樣式----- */
    .products{
        height: auto !important;
        padding: 40px 0 !important;
    }

    .products .custom-container{
        margin-top: 0 !important;
    }

    .productTitle{
        font-size: 1rem !important;
    }

    .productSubTitle{
        font-size: 28px;
    }

    .productContent{
        font-size: 1rem !important;
        padding-left: 0;
    }

    #productList .splide__slide{
        margin-right: 20px !important;
        width: calc(100% - 20px) !important;
        margin-left: 10px !important;
    }

    .products .card-header{
        width: unset;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .products .card-body{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .products .card-body .card-text{
        padding: 1px;
        font-size: 1rem !important;
    }

    /* 調整卡片容器為橫向滑動，確保在標題下方 */
    .products .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 30px;
        scroll-behavior: smooth;
        margin-top: 0;
        height: 90% !important;
    }

    .products .card-header .card-title{
        font-size: 1.5rem;
    }

    .product-image img{
        margin-top: -10px !important;
    }

    /* 卡片樣式調整 */
    .products .card {
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 0 !important;
    }

    /* 顯示卡片文字，移除 hover 效果 */
    .products .card-text {
        opacity: 1; /* 直接顯示文字 */
        height: auto; /* 文字區域高度自適應 */
        margin-bottom: 20px; /* 與下方圖片保持間距 */
    }

    /* 圖片調整，移除 hover 向下移動效果 */
    .products .product-image {
        margin-top: 0; /* 移除負 margin */
        /* transform: none !important;  */
    }

    /* 右下角箭頭按鈕 */
    .products .btn_product {
        top: auto !important;
    }

    /* 改為由jquery動態控制 */
    /* 禁用 hover 效果 */
    /* .products .card:hover .product-image {
        transform: none !important; 
    } */

    .products .card:hover .card-text {
        opacity: 1; /* 文字保持顯示 */
    }

    /* 進度條樣式 */
    .products .row::after {
        content: '';
        display: block;
        width: 100%;
        height: 10px;
        background: #fff; /* 進度條背景色 */
        border-radius: 5px;
        margin-top: 10px;
        position: relative;
    }

    /* 進度條的動態填充部分 */
    .products .row::before {
        content: '';
        position: absolute;
        height: 10px;
        background: #0042FF; /* 進度條填充色 */
        border-radius: 5px;
        transition: width 0.3s ease; /* 平滑過渡效果 */
        width: 20%; /* 根據卡片數量動態調整 */
    }
    /* #endregion */

    /* #region -----News 區塊樣式----- */
    /* .news{
        padding: 60px 20px ;
        position: relative; 
    }

    .news-container{
        margin-top: 10vw !important;
    }

    #newsTitle{
        font-size: 2rem;
        margin-bottom: 0;
    }

    .news .card-title{
        font-size: clamp(18px, 0.91vmax, 9999px);
    }

    .news .card-text{
        font-size: clamp(16px, 0.91vmax, 9999px);
    }

    .news .btn_news {
        display: none; 
    }

    .splide__slide{
        margin-right: 20px !important;
    }
    
    #newsSection-track{
        padding-left: 0 !important;
    }

    .news-carousel {
        display: flex;
        flex-direction: row; 
        flex-wrap: nowrap; 
        overflow-x: auto;
        scroll-snap-type: x mandatory; 
        scroll-behavior: smooth; 
        -webkit-overflow-scrolling: touch; 
    }

    .carousel-item {
        padding-top: 0;
        padding-bottom: 80px;
        background: none;
    }

    .news .col-12 {
        flex: 0 0 100%; 
        max-width: 100%;
        scroll-snap-align: center;
        padding: 0 10px;
        display: inline-block; 
    }

    .news .card {
        height: auto; 
        min-height: 450px; 
        border-radius: 5px; 
    }

    .news .card-body {
        height: 350px; 
        padding: 20px; 
        text-align: start;
    }

    .news-controls {
        margin-bottom: 20px;
        margin-right: 0; 
        padding-left: 0;
        padding-right: 0;
    }

    .news .splide__slide{
        width: 100% !important;
        margin: 0 20px 0 0 !important;
    }

    .news-control-prev,
    .news-control-next {
        width: 30px;
        height: 30px;
        background-color: #0042FF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        z-index: 20;
        position: relative; 
    }

    .news .btn_learn_more{
        display: block;
        font-size: 1rem;
        position: absolute;
        bottom: 20px; 
    } */
    /* #endregion */

    /* #region -----Join Us 區塊樣式----- */
    .join-us {
        padding-top: 0;
        padding-bottom: 0;
    }

    .join-us p{
        margin-bottom: 20px;
    }
    
    .join-us-container{
        margin-bottom: 0vw auto; 
    }

    .join-us-content{
        max-width: 100%;
        margin-top: 40px;
        margin-bottom: 50px;
        margin-left: 0;
        padding: 0 20px;
    }

    #joinTitle{
        font-size: 1.75rem;
    }

    #joinContent{
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .join-us-image {
        padding: 0 !important; /* 移除內邊距 */
        height: auto !important; /* 移除固定高度，讓圖片自適應 */
    }

    .join-us-image img {
        object-fit: contain !important; /* 改為 contain，確保圖片完整顯示 */
        height: auto !important; /* 移除固定高度，讓圖片按比例縮放 */
        width: 100% !important; /* 圖片寬度占滿容器 */
        max-height: 300px !important; /* 限制最大高度，避免圖片過大 */
    }

    .align-items-stretch{
        flex-direction: column-reverse !important; /* 文字在下，圖片在上 */
    }
    
    .join-us .btn_more_white{
        font-size: 1.25rem;
    }
    /* #endregion */
}

@media screen and (min-width: 1536px) {
    .custom-control {
        top: 90px;
    }
}

@media screen and (min-width: 2560px) {
    .custom-control {
        top: 170px;
    }

    .carousel-indicators {
        bottom: 170px;
    }
}