@charset "utf-8";

/* =========================================
   全域變數與基礎設定
   ========================================= */
:root {
    --brand-red: #ea2635;
    --text-dark: #333333;
    --text-gray: #666666;
    --font-main: "微軟正黑體", "Noto Sans TC", "Zen Old Mincho", serif;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    overflow-x: hidden; /* 防止水平捲軸 */
}

/* =========================================
   共用組件
   ========================================= */

/* 左側紅線標題 */
.section-header {
    border-left: 6px solid var(--brand-red);
    padding-left: 15px;
    margin-bottom: 3rem;
}

.section-header h2 {
    color: var(--brand-red);
    font-weight: 700;
    margin-bottom: 0.2rem;
    text-transform: capitalize;
    font-size: 2rem;
}

.section-header span {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
}

/* 圖片自適應 */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* =========================================
   各區塊樣式
   ========================================= */

/* 1. Hero Section (主視覺) */
.hero-section {
    background: url('../images/about-title-photo.png');
    background-size: cover;
    background-position: center;
    /* 改用 min-height 以適應不同內容長度 */
    min-height: 300px; 
    display: flex;
    align-items: center;
    color: white;
    position: relative;
    padding: 40px 0;
}
/* 增加黑色遮罩讓文字更清楚 (可選) */
.hero-section::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}
.hero-text {
    position: relative;
    z-index: 2;
}
.hero-text h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.hero-text p {
    color: #e72d2d; /* 原本是紅字，但在深色圖上建議白色，或維持 var(--brand-red) 並加文字陰影 */
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* 2. 關於我們 (About Us) */
.about-bot {
    margin-top: 80px;
    padding-bottom: 40px;
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.25rem; /* 1.4em 有點太大，建議微調 */
    color: #000000;
    text-align: justify; /* 左右對齊 */
}

.about-img-container {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

/* 3. 品牌標語 (Slogan) - 背景1 */

.slogan01{padding-top:0px }
.main-backgroud{ 
  background-image: url("#");
  background-repeat: no-repeat; /* 不重複 */ 
  background-position: 0px 0px; /* 水平0px，垂直100px */
  }


.slogan-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.slogan-font {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    color: #000;
}

.logo-eight {
    max-width: 300px;
    margin: 2rem auto;
    display: block;
}

.logo-caption {
    line-height: 1.8;
    font-size: 1.2rem;
    color: #555; /* 稍微深一點的灰，增加可讀性 */
    font-style: italic;
    max-width: 700px;
    margin: 20px auto 0;
}

/* 4. 品牌精神 (Spirit) - 背景2 */
.main-backgroud01{ 
  background-image: url("../../web/images/about-backgroud01.png");
  background-repeat: no-repeat; /* 不重複 */ 
  background-position: 0px 0px; /* 水平0px，垂直100px */
  }
.spirit01{padding: 0px 0px;}
.spirit-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #000;
}

.spirit-images {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.spirit-circle {
    /* 移除絕對定位，改為響應式容器 */
    width: 100%;
    max-width: 400px; /* 限制最大寬度 */
    position: relative;    
    overflow: hidden;

}

.spirit-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5. 品牌使命 (Mission) */
.mission-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.4;
}


/* 6. 核心價值 (Core Values) */
.value-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    background: #fff;
    border-radius: 50px 10px 10px 50px; /* 輕微造型 */
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
}

.value-circle {
    background-color: var(--brand-red);
    color: white;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2rem;
    box-shadow: 0 5px 15px rgba(234, 38, 53, 0.4);
    text-align: center;
}

.value-circle h4 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.value-circle span {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 5px;
}

.value-text {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-dark);
    padding-right: 15px;
}

/* =========================================
   RWD 媒體查詢 (Media Queries)
   ========================================= */

/* 平板與更小 (< 992px) */
@media (max-width: 991.98px) {
    .hero-text h1 { font-size: 2rem; }
    .slogan-title, .mission-title, .spirit-title { font-size: 2rem; }
    
    .about-bot { margin-top: 50px; }
    
    .value-item {
        margin-bottom: 2rem;
    }
	
	
	
}

/* 手機版 (< 768px) */
@media (max-width: 767.98px) {
    /* Header 調整 */
    .section-header {
        margin-bottom: 2rem;
        padding-left: 10px;
        border-left-width: 4px;
    }
    .section-header h2 { font-size: 1.8rem; }

    /* Hero */
    .hero-section { min-height: 250px; }
    .hero-text h1 { font-size: 1.8rem; }
    .hero-text p { font-size: 1.1rem; }

 

    /* 文字大小調整 */
    .about-text p, .slogan-font, .mission-font, .value-text {
        font-size: 1rem !important; /* 強制調整以適應手機 */
    }
    
    .slogan-title, .spirit-title, .mission-title {
        font-size: 1.6rem;
        text-align: center; /* 手機版標題置中可能較好看 */
    }
    
    .logo-caption {
        font-size: 1rem;
        padding: 0 15px;
    }

    /* 圖片容器 */
    .spirit-circle {
        max-width: 300px;
        margin: 0 auto 30px; /* 增加底部距離 */
    }

    /* 核心價值在手機版改為垂直排列或縮小圓圈 */
    .value-item {
        flex-direction: row; /* 保持橫向，但縮小尺寸 */
        align-items: flex-start; /* 文字靠上對齊 */
        margin-bottom: 2rem;
    }
    
    .value-circle {
        width: 90px;
        height: 90px;
        margin-right: 1rem;
    }
    
    .value-circle h4 { font-size: 1rem; }
    .value-circle span { font-size: 0.6rem; display: none; /* 空間不足時隱藏英文 */ }
    
    .value-text {
        font-size: 1rem;
        padding-top: 5px;
    }
}

@media (min-width: 1200px) {
 /* 3. 品牌標語 (Slogan) - 背景1 */

.slogan01{
	padding-top:100px 
	}
.main-backgroud{ 
  background-image: url("../../web/images/about-backgroud.png");
  background-repeat: no-repeat; /* 不重複 */ 
  background-position: 0px 0px; /* 水平0px，垂直100px */
  }




/* 4. 品牌精神 (Spirit) - 背景2 */
.main-backgroud01{ 
  background-image: url("../../web/images/about-backgroud01.png");
  background-repeat: no-repeat; /* 不重複 */ 
  background-position: 0px -50px; /* 水平0px，垂直100px */
  }
.spirit01
	{padding: 350px 380px;
	}


 }