/* html, body {
    height: 100%;
    margin: 0;
    padding: 0;
} */

/* body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #000;
    color: #fff;
} */

/* main {
    flex: 1 0 auto;
} */

/* footer {
    flex-shrink: 0;
    padding: 60px 0;
    width: 100%;
    background-color: #000;
} */
/* 
.row{
    margin: 0;
} */

/* #region -----Hero 區塊樣式----- */
.hero {
    position: relative;
    width: 100%;
    padding: 150px 0;
    min-height: 80vh; /* 降低最小高度以適應手機 */
    display: flex;
    align-items: center; /* 垂直居中內容 */
    justify-content: center;
    overflow: hidden;
    background: transparent !important; /* 確保 hero 本身無背景色干擾 */
    flex-shrink: 0;
    aspect-ratio: 16/9; /* 移除固定比例，讓高度自適應 */
    margin-top: 70px;
}

.hero-container {
    padding-top: 4vh !important; 
    width: 100%;
}

#bannerTitle {
    color: white;
    font-size: 3.636vmax;
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
    line-height: 1.2;
    margin-bottom: 30px;
}

#bannerContent {
    color: white;
    font-size: 24px; /* 24px / 16 = 1.5rem */
    font-family: Funnel Sans;
    font-weight: 400;
    word-wrap: break-word;
    line-height: 1.2;
    margin-bottom: 40px;
}

#btn_video {
    color: white;
    font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    font-family: Funnel Sans;
    font-weight: 400;
    text-transform: capitalize;
    word-wrap: break-word;
    border: none;
}

#btn_video:hover {
    border: 1px solid white; /* 添加白色邊框 */
    background-color: transparent !important;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

#bannerVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保影片填滿容器並保持比例 */
    z-index: -1; /* 影片作為背景 */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background: linear-gradient(to right, #000000, #000000 0%, #000000 0%, #33333300 50%), 
                linear-gradient(to top, #3333332e, #000000 0%, #000000 15%, #33333366 25%); /* 半透明黑色遮罩，可調整透明度 */
    z-index: -1 !important; /* 遮罩層在影片之上，內容之下 */
}
/* #endregion */

/* #region -----Feature 區塊樣式----- */
.featured {
    position: relative;
    background-color: #000;  /* 從 style.css 整合 */
}

.feature_text{
    margin-top: 7rem;
    margin-bottom: 7rem;
}

.feature_1{
    /* background: linear-gradient(101.72deg, #0042FF -5.45%, #FFFFFF 128.75%); */
    background-image: url("/images/index/feature_bg_1.jpg");
}
.feature_2{
    /* background: linear-gradient(165.22deg, #EEF3F8 20.61%, #DDE8F4 81.91%); */
    background-image: url("/images/index/feature_bg_2.jpg");
}
.feature_3{
    /* background: linear-gradient(99.94deg, #000000 -29.69%, #0042FF 101.43%); */
    background-image: url("/images/index/feature_bg_3.jpg");
}
.feature_4{
    /* background: linear-gradient(165.22deg, #E5EDFA 20.61%, #CCDCF6 81.91%); */
    background-image: url("/images/index/feature_bg_4.jpg");
}

.feature_1, .feature_2, .feature_3, .feature_4{
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}

.img_feature_1{
    background-image: url("/images/index/feature_1.png");
}
.img_feature_2{
    background-image: url("/images/index/feature_2.png");
}
.img_feature_3{
    background-image: url("/images/index/feature_3.png");
}
.img_feature_4{
    background-image: url("/images/index/feature_4.png");
}

.align-items-center {
    border-radius: 5px !important;
}

.blackWord {
    color: black !important;
}

.whiteWord {
    color: white !important;
}

.carousel-item {
    background: black !important;
    padding: 80px 0;
}

.feature_text{
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.featureTitle {
    font-size: 2.75rem;
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
}

.featureContent {
    font-size: 16px;
    font-family: Funnel Sans;
    font-weight: 300;
    word-wrap: break-word;
    margin-top: 1rem;
}

.btn_feature {
    background-color: white;
    color: #0042FF;
    font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    font-family: Funnel Sans;
    font-weight: 400;
    text-transform: capitalize;
    word-wrap: break-word;
    margin-top: 1rem;
}

.featured-container {
    padding: 0;
}

.carousel-dragging {
    user-select: none; /* 防止拖曳時選取文字 */
    cursor: grabbing; /* 拖曳時顯示抓取游標 */
}

.custom-pagination {
    position: relative !important;
    bottom: unset !important;
    display: flex;
    justify-content: center;
    gap: 0;
}

.custom-pagination button {
    width: 50px !important;
    height: 10px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    border-radius: 0;
    background-color: white !important;
    margin: 0;
    border: none !important;
    transition: background-color 0.3s ease;
    opacity: 1 !important;
}

.custom-pagination .is-active {
    background-color: #0042FF !important;
    transform: unset !important;
}

.carousel-image {
    height: 30rem !important;
    min-height: 400px;/* 確保最小高度 */
    aspect-ratio: 16 / 9;/* 可根據圖片比例調整 */
    background-size: contain;
    background-repeat: no-repeat;
    display: none;
}

.featured-controls {
    position: relative;
    margin-bottom: 1rem;
    margin-right: 5%;
}

.featured-item .row {
    padding-left: 4%;
    height: 500px;
}

.carousel-control-prev.custom-control {
    right: 49px;
    left: auto;
}

.carousel-control-next.custom-control {
    right: 1px;
}

/* #endregion */

/* #region -----Application 區塊樣式----- */
.applications {
    padding: 80px 0;
    background-color: #000;
}

.applications .custom-container{
    padding-left: 1rem;
    padding-right: 1rem;
}

.application-title{
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
}

#appTitle{
    color: white;
    font-size: 1.5rem;
    font-family: Funnel Sans;
    font-weight: 400;
    word-wrap: break-word;
}

#appSubTitle{
    width: 600px;
    color: white;
    font-size: 2.525vmax;
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
    margin-bottom: 2rem;
}

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

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

.application-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap; /* 允許卡片換行 */
}

.application-card {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    width: 18rem;
    height: 600px;
    transition: width 0.2s linear, transform 0.2s ease;
    cursor: pointer;
}

.application-card:first-child {
    width: 650px;
}

.application-image {
    width: 100%;
    height: 100%;
    background-color: #333;
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
}

.application-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0F0F0F 16.92%, rgba(15, 15, 15, 0.00) 88.92%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 0.1s linear;
    padding: 20px 20px 30px 20px;
    text-align: left !important;
    z-index: 2;
}

/* card展開時的標題 */
.application-overlay h5 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    width: 650px;
}
/* card展開時的內文 */
.application-overlay p {
    font-size: 0.875rem;
    color: #b0b0b0;
    margin-bottom: 20px;
    width: auto;
}

.application-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.00) 77.85%, rgba(15, 15, 15, 0.30) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 0 20px 20px;
    z-index: 1;
    transition: opacity 0.1s ease;
}

.cardTitle{
    color: white;
    font-size: 1.25rem;
    font-family: Funnel Sans;
    font-weight: 400;
    word-wrap: break-word;
}

.cardContent{
    color: white;
    font-size: 1.125rem;
    font-family: Funnel Sans;
    font-weight: 400;
    word-wrap: break-word;
}

.consumer-image{
    background-image: url('/images/index/bg_app_1.jpg');
}

.peripheral-image{
    background-image: url('/images/index/bg_app_2.jpg');
}

.network-image{
    background-image: url('/images/index/bg_app_3.jpg');
}

.automotive-image{
    background-image: url('/images/index/bg_app_4.jpg');
}

.medtech-image{
    background-image: url('/images/index/bg_app_5.jpg');
}

/* 只有桌電才要效果 (因此不放在index_rwd) */
@media (min-width: 992px) {
    .application-card:hover .application-title {
        opacity: 0;
    }

    .application-card:first-child .application-title {
        opacity: 0;
    }

    .application-card:hover {
        width: 650px;
    }

    .application-card:hover .application-image {
        transform: scale(1);
    }

    .application-card:hover .application-overlay {
        opacity: 1;
    }

    .application-row:hover .application-card:first-child:not(:hover) {
        width: calc(25% - 10px);
    }

    .application-row:hover .application-card:first-child:not(:hover) .application-overlay {
        opacity: 0;
    }

    .application-row:hover .application-card:first-child:not(:hover) .application-title {
        opacity: 1;
    }

    .application-card:first-child .application-overlay {
        opacity: 1;
    }
}
/* #endregion */

/* #region -----Products 區塊樣式----- */
.products{
    margin-bottom: 0px !important;
    padding: 110px 83px;
    background-color: #0042FF;
}

.products .custom-container{
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.productTitle {
    font-size: 1.5rem; /* 24px / 16 = 1.5rem */
    font-family: Funnel Sans;
    font-weight: 400;
    line-height: 1;
}

.productSubTitle {
    font-size: 3rem; 
    font-family: Funnel Display;
    font-weight: 700;
    line-height: normal;
}

.mobile_content{
    display: none;
}

.product-item {
    padding: 17px;
}

.productContent {
    font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    font-family: Funnel Sans;
    font-weight: 300;
    padding-left: 0;
}

.card-head.product-firstcard {
    padding: 0 20px 0 0;
}

.products .card-header {
    padding: 20px 30px 0px 30px;
    text-align: left;
    background: transparent;
    border-bottom: none;
}

.products .card-header .card-title {
    font-size: 1.8rem; 
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
    text-align: center;
    margin: 0;
}

.products .card-body {
    padding: 0 0;
    text-align: left;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.products .card-body .card-text {
    height: 0;
    color: white;
    font-size: clamp(16px, 0.91vmax, 9999px);
    font-family: Funnel Sans;
    font-weight: 300;
    word-wrap: break-word;
    text-align: center;
    padding: 0 2rem;
    margin: 20px 0;
    transition: opacity 0.3s ease;
    line-height: 1.5;
}

#product_cn_title{
    width: auto;
    margin: 0 auto;
}

.products .card {
    border: none;
    border-radius: 5px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-image {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
    order: 2;
    transition: transform 0.3s ease;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 動畫效果 */
.products .card-text {
    opacity: 0;
    height: 0;
    transition: opacity 0.3s ease;
}

.products .card:hover .card-text {
    opacity: 1;
}

/* 按鈕樣式 */
.btn_product {
    right: 20px;
    bottom: 20px;
    top: auto;
    z-index: 2;
}

.btn_product:hover{
    border: none;
}

.products .card:hover .btn_product {
    background: white;
}

.products .card:hover .btn_product .bi {
    color: #0042FF;
}

.products .custom-pagination .is-active {
    background-color: #B1C5FF !important;
    transform: unset !important;
}
/* #endregion */

/* #region -----News 區塊樣式----- */
/* .news {
    padding: 90px 0 150px 0;
    background-color: #000;
}

#newsTitle {
    color: white;
    font-size: 2.525vmax;
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
    padding-left: 6.5%;
} */

/* 電腦版要維持橫向 */
/* .news-carousel {
    display: flex;
    flex-wrap: wrap; 
} */

/* .news .col-md-4 {
    flex: 0 0 33.333333%; 
    max-width: 33.333333%;
}

.news .card {
    background-color: white;
    border: none;
    border-radius: 10px;
    height: auto;
}

.news .card-body {
    background-color: white;
    padding: 20px;
    height: 38vh;
    border-radius: 0 0 5px 5px;
}

.news .card-category {
    color: black;
    font-size: 1rem; 
    font-family: Funnel Sans;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.48px;
    word-wrap: break-word;
}

.news .card-title {
    color: black;
    font-size: 1.25rem; 
    font-family: Funnel Sans;
    font-weight: 400;
    word-wrap: break-word;
    max-height: 27%;
    overflow: hidden;
    margin-bottom: 15px;
}

.news .card-text {
    color: black;
    font-size: 1rem; 
    font-family: Funnel Sans;
    font-weight: 300;
    word-wrap: break-word;
    max-height: 30%;
    overflow: hidden;
}

.news-image {
    height: 220px;
    border-radius: 5px 5px 0 0;
}

.news-controls {
    position: relative;
    margin-bottom: 30px;
    margin-right: 5%;
}

.news-controls .custom-control {
    position: static;
}

.news-container {
    padding: 0;
    max-width: unset;
}

.btn_news {
    right: 20px !important;
    bottom: 20px !important;
    top: auto !important;
    opacity: 1 !important;
}

.btn_news:hover {
    background-color: transparent;
    color: #0042FF;
    border: 1.5px solid var(--Primary-Blue, #0042FF);
}

.btn_news:hover .bi {
    color: #0042FF;
}

.btn_news .bi:hover {
    color: #0042FF;
}

.news .btn_learn_more {
    display: none;
} */

/* #endregion */

/* #region -----Join Us 區塊樣式----- */
.join-us {
    padding: 0px 0;
    background-color: #0042FF;
}

.join-us-content {
    max-width: 63%;
    margin-top: 10rem;
    margin-bottom: 10rem;
    margin-left: 6rem;
    line-height: normal;
}

.join-us p {
    margin-bottom: 40px;
} 

#joinTitle {
    color: white;
    font-size: 3.030vmax;
    font-family: Funnel Display;
    font-weight: 700;
    word-wrap: break-word;
}

#joinContent {
    color: white;
    font-size: 18px; /* 18px / 16 = 1.125rem */
    font-family: Funnel Sans;
    font-weight: 300;
    word-wrap: break-word;
}

.join-us-image {
    padding: 0; /* 移除圖片區域內間距 */
    height: auto; /* 確保圖片區域高度與左側一致 */
}

.join-us-image img {
    object-fit: cover; /* 圖片填滿容器，保持比例 */
    height: 100%; /* 確保圖片高度占滿 */
    width: 100%; /* 確保圖片寬度占滿 */
}

/* Product 區塊可點擊元素樣式 */
.clickable-product {
    cursor: pointer;
}

/* 產品圖片 hover 效果 */
.products .card .product-image.clickable-product:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}
/* #endregion */