@charset "utf-8";
/* CSS Document */
/*div1*/
        /* --- 簡介區塊外圍 --- */
/*        .about-section {
            padding: 80px 0;
        }*/

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

        /* --- 副標題 --- */
        .about-subtitle {
            color: #0070c0;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 1px;
            margin-bottom: 25px;
        }

        /* --- 藍色分隔線 --- */
        .about-divider {
            width: 100%;
            max-width: 700px;
            height: 2px;
            background-color: #0070c0;
            margin-bottom: 40px;
        }

        /* --- 簡介內文 --- */
        .about-desc {
            color: #555555;
            font-size: 16px;
            line-height: 2;
            letter-spacing: 1.5px;
        }
        .responsive-video {
            margin-top: 30px;
            width: 100%;
            height: auto; /* 確保影片依照比例縮放 */
            display: block; /* 移除底部可能出現的空白間隙 */
        }
        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 768px) {
            .about-section {
                padding: 0px 15px 50px 15px; /* 手機版縮小上下內距，並增加左右安全距離 */
            }
            .about-title {
                font-size: 26px;
            }
            .about-subtitle {
                font-size: 16px;
            }
            .about-divider {
                width: 100%; /* 手機版讓線條長一點 */
            }
            .about-desc {
                text-align: justify; /* 手機版有時左右對齊會比較好看 */
            }
        }
/*div1 end*/
/*div2*/
        /* --- 圖片外框設定 (強制正圓形) --- */
        .feature-img-box {
            width: 100%;
            max-width: 260px; /* 限制最大寬度，避免在大螢幕時圖片過大 */
            aspect-ratio: 1 / 1; /* 強制 1:1 長寬比 */
            margin: 0 auto 30px auto; /* 水平置中並與下方文字保持距離 */
            border-radius: 50%; /* 裁切成圓形 */
            overflow: hidden;
            background-color: #e9ecef;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 微弱的立體陰影 */
        }

        .feature-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 確保圖片填滿圓形且不變形 */
            transition: transform 0.4s ease;
        }

        /* 滑鼠懸停圖片放大特效 */
        .feature-img-box:hover img {
            transform: scale(1.08);
        }

        /* --- 標題與分隔線 --- */
        .feature-title {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .feature-divider {
            height: 2px;
            width: 100%;
            margin-bottom: 20px;
        }
        .theme-blue,.theme-teal{
            max-width: 260px;   
            margin-left:auto; 
            margin-right:auto;         
        }
        /* 顏色主題：藍色 */
        .theme-blue .feature-title { color: #0070c0; }
        .theme-blue .feature-divider { background-color: #0070c0; }

        /* 顏色主題：湖水綠 */
        .theme-teal .feature-title { color: #6cb0a6; }
        .theme-teal .feature-divider { background-color: #6cb0a6; }

        /* --- 描述內文 --- */
        .feature-desc {
            color: #555555;
            font-size: 15px;
            line-height: 1.8;
            text-align: justify; /* 左右對齊讓段落看起來更整齊 */
            letter-spacing: 0.5px;
        }

/*div2 end*/
/*div3*/
        .gallery-section {
            padding: 0px 0;
            position: relative;
        }

        /* --- 圖片設定 --- */
        .swiper-slide {
            /* 這裡使用 aspect-ratio 固定圖片比例，您可依據真實照片比例調整 (例如 4/3) */
            aspect-ratio: 1 / 1; 
            overflow: hidden;
            background-color: #e9ecef;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 確保圖片填滿不變形 */
        }

        /* --- 客製化左右導覽按鈕 --- */
        .custom-swiper-prev,
        .custom-swiper-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 55px;
            height: 55px;
            background-color: #ffffff;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和的陰影 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            color: #6cb0a6; /* 湖水綠箭頭 */
            font-size: 24px;
            transition: all 0.3s ease;
        }

        .custom-swiper-prev:hover,
        .custom-swiper-next:hover {
            background-color: #6cb0a6;
            color: #ffffff; /* 滑鼠懸停時反白 */
        }

        /* 按鈕位置微調，讓它一半超出圖片邊緣 (符合設計圖) */
        .custom-swiper-prev {
            left: -70px;
        }
        .custom-swiper-next {
            right: -70px;
        }

        /* --- 手機版 (RWD) 調整 --- */
        @media (max-width: 991.98px) {
            /* 手機版時按鈕往內縮，避免超出螢幕產生橫向捲軸 */
            .custom-swiper-prev { left: 0px; }
            .custom-swiper-next { right: 0px; }
            
            /* 手機版按鈕可以稍微縮小 */
            .custom-swiper-prev, .custom-swiper-next {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
        }
/*div3 end*/
@media (min-width: 992px) {
.div3{
    padding-top:20px !important;     
}
}
@media (max-width: 991px) {
.div3{
    padding-top:20px !important;     
}
}