/* =========================================================
           About Us Page Styles (關於我們頁面樣式)
           Namespace: .yl-about- (避免與首頁衝突)
           ========================================================= */

        /* 基礎設定 */
        body {
            background-color: #fff; /* 預設背景 */
            margin: 0;
            padding: 0;
        }

        .yl-about-wrapper {
            padding: 200px 50px 100px;
            background-color: #fff;
            color: #333;
            font-family: 'Noto Sans TC', system-ui, -apple-system, sans-serif;
        }



/* =========================================================
   Page Banner Styles (內頁橫幅樣式)
   ========================================================= */
.yl-page-banner {
    position: relative;
    width: 100%;
    height: 400px; /* 電腦版高度 */
    background-image: url('../img/company-keyimg.png'); /* 請替換為您的背景圖 img/banner-bg.jpg */
    background-size: cover;
    background-position: center;
    
    /* 關鍵：頂部橘色邊框 */
  
    
    /* 避開導覽列高度 (依據之前的設定) */
   
}

/* 黑色半透明遮罩 (可選，讓文字在淺色背景上更清楚) */
.yl-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* 10% 黑色遮罩，比較自然 */
}

/* 內容容器 */
.yl-page-banner .container {
    position: relative; /* 確保內容在遮罩之上 */
    z-index: 2;
}

/* ABOUT US 大標題 */
.yl-banner-title {
    font-family: 'Noto Sans TC', sans-serif; /* 設計稿看起來像黑體，若要宋體可改 Noto Serif TC */
    font-weight: 700;
    font-size: 4rem;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}

/* 標語外層 (用來控制靠右) */
.yl-banner-tagline-wrapper {
    display: inline-block;
}

/* 橘色底標語 */
.yl-banner-tagline {
    background-color: #ff6c39;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 5px 25px; /* 上下左右留白 */
    letter-spacing: 3px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* =========================================================
   Banner RWD 響應式設定
   ========================================================= */
@media (max-width: 991px) {
    .yl-page-banner {
        height: 300px;
        margin-top: 70px; /* 手機版導覽列高度 */
    }
    
    .yl-banner-title {
        font-size: 3rem;
    }
    
    .yl-banner-tagline {
        font-size: 1.2rem;
        padding: 5px 15px;
    }
}

@media (max-width: 576px) {
    .yl-page-banner {
        height: 250px;
    }

    .yl-banner-title {
        font-size: 2.2rem;
    }

    .yl-banner-tagline {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
}

        /* 通用標題樣式 */
        .yl-about-title {
            font-family: 'Noto Serif TC', serif; /* 標題字體 */
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            color: #111;
            margin-bottom: 10px;
        }

        .yl-about-title-bar {
            width: 60px;
            height: 5px;
            background-color: #ff6c39; /* 企業橘色 */
            margin: 0 auto 40px;
        }

        /* 分隔線 */
        .yl-about-divider {
            border: 0;
            border-top: 1px solid #eee;
            margin: 80px 0; /* 加大間距 */
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Block 1: 介紹 --- */
        .yl-about-slogan {
			margin: 100px 0px 100px;
            text-align: center;
            font-size: 2.2rem;
            color: #ff6c39;
            font-weight: 700;            
            font-family: 'Noto Serif TC', serif;
            letter-spacing: 1px;
        }

   

        .yl-about-img {
            width: 100%;
            height: 100%;
            min-height: 300px; /* 確保高度 */
            display: block;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .yl-about-img-frame:hover .yl-about-img {
            transform: scale(1.05); /* 微幅放大特效 */
        }

   
        .yl-about-text p {
            margin-bottom: 25px;
        }

        /* --- Block 2: 企業識別 --- */
/* --- Logo 展示區塊樣式 --- */
        .yl-about-text-content {
            max-width: 900px;
            margin: 0 auto 60px;
            text-align: left;
        }

        .yl-about-subtitle {
            font-size: 1.3rem;
            font-weight: 700;
            color: #333;
            margin-top: 40px;
            margin-bottom: 10px;
            border-bottom: 2px solid #ff6c39; /* 改為橘色底線 */
            padding-bottom: 5px;
            display: inline-block;
            font-family: 'Noto Serif TC', serif;
        }

 .yl-about-logo-showcase {
            text-align: center;
            margin-top: 50px;
            background-color: #fafafa; /* 淺灰底色襯托 Logo */
            padding: 60px 20px;
            border-radius: 20px;
        }

        .yl-about-vertical-logo {
            /* 設定最大寬度，避免圖片過大 */
            max-width: 220px; 
            width: 100%;      /* 確保手機版自動縮放 */
            height: auto;     /* 維持原本比例 */
            margin-bottom: 40px; /* 與下方文字保持距離 */
            display: inline-block;
        }

        .yl-about-logo-desc {
            font-style: italic;
            color: #666;
            line-height: 1.8;
        }

        .yl-about-logo-desc .en {
            font-size: 0.95rem;
            margin-bottom: 25px;
            color: #888;
        }

        .yl-about-logo-desc .tw {
            font-size: 1.1rem;
            font-weight: 500;
            color: #444;
        }



        
        /* --- Block 3: 企業理念 (圓圈列表) --- */
        .yl-about-intro-text {
            max-width: 800px;
            margin: 0 auto 60px;
            line-height: 1.8;
            color: #555;
            font-size: 1.3rem;
        }

        .yl-about-values-list {
            display: flex;
            flex-direction: column;
            gap: 40px;
            max-width: 800px;
            margin: 0 auto;
        }

        .yl-value-item {
            display: flex;
            align-items: center;
            gap: 40px;
            padding: 10px;
            border-radius: 100px; /* 膠囊狀 hover 效果預備 */
            transition: background-color 0.3s ease;
        }
        
        .yl-value-item:hover {
            background-color: #fff8f5; /* 極淡的橘色背景 */
        }

        /* 圓圈樣式 */
        .yl-value-circle {
            width: 140px;
            height: 140px;
            flex-shrink: 0; 
            background: linear-gradient(135deg, #ff8e63 0%, #ff6c39 100%);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            box-shadow: 0 8px 20px rgba(255, 108, 57, 0.3);
            transition: transform 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .yl-value-circle::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid #fff;
            transform: scale(0.9);
            opacity: 0.3;
        }

        .yl-value-item:hover .yl-value-circle {
            transform: scale(1.1) rotate(5deg);
        }

        .yl-value-circle .title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 2px;
            font-family: 'Noto Serif TC', serif;
        }

        .yl-value-circle .eng {
            font-size: 0.8rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            opacity: 0.9;
            font-family: Arial, sans-serif;
        }

        .yl-value-desc {
            font-size: 1.35rem;
            font-weight: 500;
            color: #222;
            line-height: 1.4;
            font-family: 'Noto Serif TC', serif; /* 描述文字使用宋體增加質感 */
        }

        /* =========================================================
           RWD 響應式設定 (Mobile)
           ========================================================= */
        @media (max-width: 991px) {
            .yl-about-text {
                padding-left: 0;
                margin-top: 30px;
            }
        }

        @media (max-width: 768px) {
            .yl-about-slogan {
                font-size: 1.8rem;
				margin: 50px 0px 50px;
            text-align: center;
            
        
            }

            /* 區塊1: 圖片與文字間距 */
            .yl-about-img-frame {
                min-height: 250px;
            }

            /* 區塊3: 企業理念改為垂直堆疊置中 */
            .yl-value-item {
                flex-direction: column;
                text-align: center;
                gap: 20px;
                margin-bottom: 30px;
                border-radius: 20px;
            }

            .yl-value-circle {
                width: 120px;
                height: 120px;
            }

            .yl-value-circle .title {
                font-size: 1.5rem;
            }

            .yl-value-desc {
                font-size: 1.2rem;
            }
        }



/* =========================================
   1. 全域設定 (Global) - 適用所有裝置預設值
   ========================================= */
.yl-about-img-frame {
    width: 100%;
    overflow: hidden; /* 防止圖片溢出圓角 */
    border-radius: 30px; /* 預設圓角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 預設陰影 */
}

.yl-about-img {
    width: 100%;      /* 寬度佔滿容器 */
    height: auto;     /* 高度自動，保持比例 */
    display: block;   /* 消除圖片底部留白 */
    object-fit: cover; /* 確保填滿容器 (若有設高度限制時) */
}

.yl-about-text {
    color: #555;
    line-height: 1.8;
    text-align: justify; /* 左右對齊 */
}

.yl-about-text p {
    margin-bottom: 1.5rem;
}

/* =========================================
   2. 手機版設定 (Mobile) - 螢幕 < 768px
   ========================================= */
@media (max-width: 767.98px) {
    .yl-about-img-frame {
        /* 手機版可能希望圖片不要太高，或者滿版 */
        border-radius: 30px; 
        margin-bottom: 20px; /* 圖片與下方文字的距離 */
    }

    .yl-about-img {
        /* 如果希望手機版圖片有最大高度限制，可在此設定，例如：
           max-height: 300px; 
        */
    }

    .yl-about-text {
        font-size: 1.3rem; /* 手機版字體大小 */
        padding: 0 10px; /* 手機版左右留一點白邊 */
    }
}

/* =========================================
   3. 平板版設定 (Tablet) - 768px <= 螢幕 < 992px
   ========================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .yl-about-img-frame {
        /* 平板直立時，圖片通常也是堆疊在上方 */
        max-width: 80%; /* 讓圖片不要太寬，置中比較好看 */
        margin: 0 auto 30px auto; /* 上下左右置中 */
    }

    .yl-about-text {
        font-size: 1.4rem;
        padding: 0 20px;
    }
}

/* =========================================
   4. 電腦版設定 (Desktop) - 螢幕 >= 992px
   ========================================= */
@media (min-width: 992px) {
    .yl-about-img-frame {
        /* 電腦版圖片在左側，可以設定陰影更明顯 */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        border-radius: 60px;
        /* 增加滑鼠移過去的特效 (選擇性) */
        transition: transform 0.3s ease;
    }

    .yl-about-img-frame:hover {
        transform: scale(1.02); /* 滑鼠移入微微放大 */
    }

    .yl-about-text {
        font-size: 1.3rem; /* 電腦版字體稍大 */
        padding-left: 30px; /* ★重要：給予左側內距，讓文字不要緊貼圖片 */
    }
}

/* =========================================
   5. 超大螢幕設定 (Large Desktop) - 螢幕 >= 1400px
   ========================================= */
@media (min-width: 1400px) {
    .yl-about-text {
        font-size: 1.4rem; /* 大螢幕字體更大 */
        padding-left: 50px; /* 間距拉大 */
    }
}