@charset "utf-8";
/* CSS Document */
/*banner*/

        /* --- 輪播主容器 --- */
        .hero-carousel {
            position: relative;
            background-color: #0f1724; /* 預設底色 */
            overflow: hidden;
            /* 依據您的需求調整 Banner 的高度 */
            min-height: 500px; 
            height: 60vh; 
        }

        /* --- 背景圖片 (現在是一整張包含深色斜邊的完整大圖) --- */
        .carousel-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* 填滿整個寬度 */
            height: 100%;
            object-fit: cover; /* 保持比例填滿 */
            /* 讓圖片縮放時以左中為基準，確保左側設計好的深色色塊不會被裁切掉 */
            object-position: center center; 
            z-index: 1;
        }

        /* --- 文字與內容區塊 --- */
        .carousel-caption-custom {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2; /* 浮在圖片上方 */
            display: flex;
            align-items: center;
        }
        
        .content-wrapper {
            /* 控制文字區塊與左邊的距離，對齊圖片中的深色區域 */
            padding-left: 8%; 
            max-width: 70%; /* 限制文字寬度，不讓它超過圖片左半邊 */
        }

        /* 主標題 */
        .main-title {
            color: #6cb0a6; /* 湖水綠 */
            font-size: clamp(1.5rem, 3vw, 2.8rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        /* 副標題 (左側白線) */
        .sub-title {
            color: #ffffff;
            font-size: clamp(0.9rem, 1.5vw, 1.35rem);
            font-weight: 600;
            line-height: 1.4;
            padding-left: 15px;
            border-left: 3px solid #ffffff;
            margin-bottom: 40px;
            letter-spacing: 1px;
        }

        /* 按鈕 */
        .btn-know-more {
            background-color: #0070c0; /* 藍色 */
            color: #ffffff;
            border: none;
            padding: 10px 25px;
            font-size: 15px;
            font-weight: 500;
            border-radius: 0;
            transition: background-color 0.3s;
        }
        .btn-know-more:hover {
            background-color: #005a9c;
            color: #ffffff;
        }

        /* --- 輪播指示器 (小方塊) --- */
        .carousel-indicators {
            margin-bottom: 2rem;
            justify-content: flex-start;
            padding-left: 8%;
            margin-left: 0;
            margin-right: 0;
            z-index: 3;
        }
        
        .carousel-indicators [data-bs-target] {
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.4);
            border: none;
            border-radius: 0; 
            margin: 0 6px;
            transition: all 0.3s;
        }

        .carousel-indicators .active {
            background-color: #ffffff;
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 991.98px) {
            .content-wrapper {
                max-width: 90%;
                padding-left: 5%;
            }
            .carousel-indicators {
                padding-left: 5%;
                justify-content: center;
            }
        }
/*banner end*/

/*div1*/
        /* --- 整個區塊的容器 --- */
        .intro-section {
            position: relative;
            background-color: #f8f9fa;
            /* 加上若有似無的電路板背景圖 (這裡用漸層模擬，您可替換真實背景) */
  /*          background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
            background-size: 20px 20px;
            overflow: hidden;
            min-height: 500px;*/
        }

        /* --- 左側圖片區塊與漸層淡出效果 --- */
        .intro-img-wrapper {
            position: relative;
            height: 100%;
            min-height: 350px;
        }
        
        .intro-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 利用 mask-image 讓圖片右側產生漸隱變透明的效果 */
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        }

        /* --- 右側文字內容區塊 --- */
        .intro-content {
            padding: 60px 40px 60px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        /* 主標題 */
        .intro-title {
            color: #0070c0; /* 藍色 */
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        /* 副標題 */
        .intro-subtitle {
            color: #0070c0;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
        }

        /* 藍色分隔線 */
        .intro-divider {
            width: 100%;
            height: 2px;
            background-color: #0070c0;
            margin-top: 15px;
            margin-bottom: 25px;
        }

        /* 內文描述 */
        .intro-desc {
            color: #555555;
            font-size: 15px;
            line-height: 1.8;
            letter-spacing: 1px;
            text-align: justify; /* 讓文字左右對齊 */
            margin-bottom: 40px;
        }

        /* 了解更多按鈕 */
        .btn-learn-more {
            background-color: #6cb0a6; /* 湖水綠 */
            color: #ffffff;
            border: none;
            padding: 10px 30px;
            font-size: 15px;
            letter-spacing: 1px;
            border-radius: 0; /* 直角 */
            align-self: flex-start; /* 讓按鈕靠左，不拉伸 */
            transition: background-color 0.3s;
        }
        
        .btn-learn-more:hover {
            background-color: #538e85;
            color: #ffffff;
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 991.98px) {
            .intro-img {
                /* 手機版改為往下漸隱 */
                -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
                mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
            }
            .intro-content {
                padding: 20px 30px 50px 30px;
            }
        }
/*div1 end*/
/*div2*/
        /* --- 最新消息列表容器 --- */
        .news-list-container {
            /*max-width: 1000px;*/
            margin: 0 auto;
            /* 列表最上方的頂線 */
            border-top: 1px solid #dddddd; 
        }

        /* --- 單筆消息項目 --- */
        .news-item {
            border-bottom: 1px solid #dddddd;
            transition: background-color 0.2s ease;
        }

        .news-item:hover {
            background-color: #f1f4f6; /* 滑鼠懸停時顯示淡淡的底色 */
        }

        .news-link {
            text-decoration: none;
            color: inherit;
            display: flex;
            align-items: center;
            padding: 20px 0;
            width: 100%;
        }

        .news-link:hover {
            color: inherit;
        }

        /* --- 日期 --- */
        .news-date {
            font-size: 16px;
            color: #666666;
            width: 140px; /* 固定寬度讓每個項目的日期對齊 */
            flex-shrink: 0;
        }

        /* --- 分類標籤 (Badge) --- */
        .news-badge {
            color: #ffffff;
            font-size: 15px;
            text-align: center;
            padding: 6px 0;
            width: 110px; /* 固定寬度讓標籤對齊 */
            flex-shrink: 0;
            margin-right: 40px; /* 與右側標題的間距 */
            letter-spacing: 2px;
        }

        /* 分類標籤顏色 */
        .badge-tech {
            background-color: #61a59a; /* 科技新知 (湖水綠) */
        }
        .badge-media {
            background-color: #a6a6a6; /* 媒體報導 (灰色) */
        }
        .badge-industry {
            background-color: #0070c0; /* 產業動態 (藍色) */
        }

        /* --- 標題 --- */
        .news-title {
            font-size: 16px;
            color: #555555;
            flex-grow: 1;
            /* 如果標題太長，超出的部分會變成 ... */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- 了解更多按鈕 --- */
        .btn-more-wrapper {
            margin-top: 40px;
            text-align: center;
        }

        .btn-more {
            color: #61a59a;
            background-color: transparent;
            border: 1px solid #61a59a;
            padding: 8px 40px;
            font-size: 15px;
            letter-spacing: 1px;
            border-radius: 0; /* 直角邊框 */
            transition: all 0.3s;
        }

        .btn-more:hover {
            background-color: #61a59a;
            color: #ffffff;
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 768px) {
            .news-link {
                flex-wrap: wrap; /* 允許換行 */
                padding: 15px 10px;
            }
            .news-date {
                width: auto;
                margin-bottom: 12px;
            }
            .news-badge {
                margin-left: auto; /* 讓標籤在手機版靠右對齊 */
                margin-right: 0;
                margin-bottom: 12px;
            }
            .news-title {
                width: 100%; /* 標題獨立佔滿第二行 */
                white-space: normal; /* 允許標題換行 */
            }
        }
/*div2 end*/
/*div3*/
        /* --- 產品卡片區塊 --- */
        .product-item {
            margin-bottom: 20px; /* 每個產品區塊下方的間距 */
        }

        /* --- 圖片白底相框效果 --- */
        .product-img-box {
            background-color: #ffffff; /* 純白底色 */
            padding: 0px; /* 產生白色邊框感 */
            text-align: center;
            margin-bottom: 15px;
            /* 讓圖片區塊保持一定的比例，避免圖片載入前排版跳動 */
            aspect-ratio: 4 / 3.2; 
            display: flex;
            align-items: center;
            justify-content: center;
            /* 加上非常輕微的陰影讓白框更立體 (可選) */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); 
        }

        .product-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 確保機台完整顯示不被裁切 */
        }

        /* --- 產品標題 --- */
        .product-title {
            color: #555555;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 1px;
            /* 避免標題太長換行破壞排版 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- More 連結 --- */
        .more-link {
            color: #6cb0a6; /* 湖水綠色 */
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            letter-spacing: 1px;
        }

        .more-link i {
            margin-left: 4px;
            font-size: 18px;
            transition: transform 0.2s; /* 箭頭動畫過渡 */
        }

        .more-link:hover {
            color: #4a8a81; /* 滑鼠懸停顏色加深 */
        }


/*div3 end*/
/*div4 */
        /* --- 共用卡片樣式 --- */
        .service-card {
            background-color: #ffffff;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 非常輕微的陰影，增加立體感 */
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: stretch; /* 讓內部左右區塊等高 */
        }

        /* --- 標題與分隔線共用樣式 --- */
        .service-title {
            color: #0070c0; /* 藍色標題 */
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
            letter-spacing: 1px;
            line-height: 1.3;
        }

        .service-divider {
            height: 2px;
            background-color: #92b8d4; /* 淺藍色分隔線 */
            width: 100%;
            margin-bottom: 20px;
        }

        .service-desc {
            color: #666666;
            font-size: 15px;
            line-height: 1.8;
            letter-spacing: 0.5px;
            text-align: justify;
        }

        /* --- 上方大卡片 (製程代工) --- */
        .card-large .text-box {
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .card-large .img-box {
            height: 100%;
            min-height: 300px;
        }
        .card-large .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 確保晶圓圖片填滿且不變形 */
        }

        /* --- 下方小卡片 (定制化/技術諮詢) --- */
        .card-small {
            flex-direction: row; /* 強制橫向排列 (左圖右文) */
        }
        .card-small .img-box {
            flex: 0 0 45%; /* 圖片佔 45% 寬度 */
            max-width: 45%;
        }
        .card-small .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .card-small .text-box {
            flex: 1; /* 文字佔剩下的 55% 寬度 */
            padding: 30px 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* 讓小卡片標題稍微小一點 */
        .card-small .service-title {
            font-size: 20px;
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 991.98px) {
            .service-card {
                flex-direction: column !important; /* 改為上下排列 */
                height: auto; /* 取消高度限制，讓內容自然撐開 */
            }
            
            /* 修正大卡片的手機版排版 */
            .card-large .text-box {
                padding: 30px 20px;
            }
            .card-large .img-box {
                /*height: 250px;*/
                order: -1; /* 讓圖片排在文字上方 */
            }

            /* 修正小卡片的手機版排版 (解決文字被吃掉的問題) */
            .card-small .text-box {
                padding: 30px 20px;
                flex: none !important; /* 解除原本的高度佔比限制 */
                width: 100%;
            }
            .card-small .img-box {
                flex: none !important; /* 解除 45% 的佔比限制 */
                max-width: 100%;
                width: 100%;
                /*height: 250px;*/
                order: -1;
            }
        }
/*div4 end*/
/*div5*/
        /* --- 區塊背景與主要容器 --- */
        .contact-banner {
            /* 模擬圖片中的藍綠色漸層背景 */
            background: linear-gradient(90deg, #91cebc 0%, #60aebd 35%, #2a83ac 75%, #1f729b 100%);
            padding: 20px 0;
        }

        /* --- 左側圖片 --- */
        .contact-img-wrapper {
            width: 100%;
            max-width: 350px; /* 限制圖片最大寬度 */
            height: 60px; /* 設定一個固定的高度，讓圖片呈現橫條狀 */
        }

        .contact-img-wrapper img {
            width: 100%;
        }

        /* --- 中間聯絡資訊文字 --- */
        .contact-info {
            color: #ffffff;
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            letter-spacing: 1px;
            /* 在電腦版時與左右元素保持距離 */
            margin: 0 30px; 
        }

        .contact-info p {
            margin-bottom: 0;
        }

        /* --- 右側聯絡我們按鈕 (雙層邊框效果) --- */
        .btn-contact-wrapper {
            /* 製作外層細邊框 */
            border: 4px solid rgba(255, 255, 255, 1);
            border-radius: 50px;
            padding: 1px;
            display: inline-block;
            flex-shrink: 0;
        }

        .btn-contact-inner {
            background-color: #ffffff;
            color: #61a59a; /* 湖水綠文字 */
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 2px;
            padding: 8px 30px;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .btn-contact-inner i {
            margin-left: 8px;
            font-size: 22px;
            transition: transform 0.2s ease;
        }

        .btn-contact-inner:hover {
            background-color: #f0f0f0;
            color: #4a8a81;
        }

        .btn-contact-inner:hover i {
            transform: translateX(4px); /* 滑鼠懸停時箭頭微動 */
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 768px) {
            .contact-banner {
                padding: 40px 0;
            }
            
            /* 手機版圖片微調 */
            .contact-img-wrapper {
                max-width: 210px; /* 讓圖片在手機版不要太寬 */
                margin-bottom: 45px; /* 與下方文字的間距 */
                height: 0px;
            }

            /* 手機版文字置中 */
            .contact-info {
                text-align: center;
                margin: 0 0 30px 0; /* 移除左右 margin，改為下方 margin */
                font-size: 15px; /* 字體稍微縮小 */
            }
        }
/*div5 end*/
/*div6*/
        /* ==============================
           圖文卡片外框 (強制正方形)
           ============================== */
        .tech-card {
            position: relative;
            width: 100%;
            /* ▼ 這行是維持正方形的關鍵 ▼ */
            aspect-ratio: 1 / 1; 
            overflow: hidden;
            background-color: #e9ecef;
        }

        /* ==============================
           圖片設定 (填滿且不變形)
           ============================== */
        .tech-card img {
            width: 100%;
            height: 100%;
            /* ▼ 讓圖片自動裁切填滿正方形，不會被壓扁 ▼ */
            object-fit: cover; 
            transition: transform 0.4s ease; 
            filter: brightness(0.8); /* 讓圖片亮度降到 50% */
        }

        /* 滑鼠移過去時的微放大特效 (不要的話可以刪掉) */
        .tech-card:hover img {
            transform: scale(1.05);
        }

        /* ==============================
           文字標題設定
           ============================== */
        .tech-title {
            position: absolute;
            top: 25px;
            left: 25px;
            color: #ffffff;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 2px;
            line-height: 1.35;
            margin: 0;
            z-index: 2;
            /* 較深的文字陰影，確保在白底圖片上也能看清文字 */
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
        }
/*div6 end*/
@media (min-width: 992px) {
.div3{
    padding:20px 0 0px 0 !important;     
}
}
@media (max-width: 991px) {
.div3{
    padding:20px 0 0px 0 !important;     
} 
}