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

/* 標題 */
.sections-title {
    font-family: 'Outfit', sans-serif;
    color: #004d4d;
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 子標題 */
.sections-subtitle {
    font-family: 'Outfit', sans-serif;
    color: #007979;
    font-weight: 700;
    font-size: 1.5rem;
}

.flagship-title {
    font-family: 'Outfit', sans-serif;
    color: #004d4d;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.product-tag {
    color: #007979; /* 圖片中的灰藍色 #71a9ad*/
    font-weight: 700;
    font-size: 2rem;
}

/* 內文 */
.sections-text {
    font-family: 'Outfit', sans-serif;
    color: #2c3e50;
    line-height: 1.8;
    font-size: 1.1rem;
}

.sections-list {
    /*list-style-type: disc;*/
    padding-left: 1.5rem;
    color: #2c3e50;
    line-height: 1.8;
}

.sections-list li::marker {
    color: #004d4d; /* 讓清單的小圓點顏色與標題一致 */
}


/* ---水平線 --- */
.divider-title-container {
    display: flex;
    align-items: center;
    text-align: center;
}

.divider-line {
    flex: 1;
    height: 1px;
    background-color: #004d4d;
}
.product-line{
    flex: 1;
    height: 1px;
    background-color: #009740;
}

/* 頁面:橫幅 */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 輕微壓暗圖片，確保白色文字清晰 */
}

/* 特殊文字樣式（橘色） */
.text-highlight-orange {
    color: #ff8c00;
    font-weight: 500;
}

.text-highlight-orange-link {
    text-decoration:none
    cursor: pointer;
}

.text-highlight-orange-link a {
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none; /* 預設不顯示底線 */
    transition: 0.3s;      /* 增加平滑過渡效果（選用） */
}

.text-highlight-orange-link a:hover {
    text-decoration: underline;
}

.text-highlight-orange-link a:visited, .text-highlight-orange-link a:active {
    color: #ff8c00;
}

/* 特殊文字樣式（粉紅/淡紅色） */
.text-highlight-pink {
    color: #f06292;
    font-weight: 500;
}

.text-highlight-pink-link {
    text-decoration:none;
    cursor: pointer;
}

.text-highlight-pink-link a {
    color: #f06292;
    font-weight: bold;
    text-decoration: none; /* 預設不顯示底線 */
    transition: 0.3s;      /* 增加平滑過渡效果（選用） */
}

.text-highlight-pink-link a:hover {
    text-decoration: underline;
}

.text-highlight-pink-link a:visited, .text-highlight-pink-link a:active {
    color: #f06292;
}

/* 特殊文字樣式（綠色） */
.text-highlight-green {
    color: green;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    line-height: 1.3em;
    text-transform: none;
}

.text-highlight-green-link {
    text-decoration:none;
    cursor: pointer;
}

.text-highlight-green-link a {
    color: green;
    font-weight: bold;
    text-decoration: none; /* 預設不顯示底線 */
    transition: 0.3s;      /* 增加平滑過渡效果（選用） */
}

.text-highlight-green-link a:hover {
    text-decoration: underline;
}

.text-highlight-green-link a:visited, .text-highlight-green-link a:active {
    color: green;
}

/* Brands 跑馬燈 */
.marquee-container {
    overflow: hidden;
    width: 100%;
    padding: 0px 0px 30px 0px;
    background: #fff;
}

.marquee-content {
    display: flex;
    width: max-content; /* 重要：讓寬度根據內容撐開 */
    animation: marquee-scroll 20s linear infinite; /* 品牌多，建議時間拉長 */
}

.marquee-item {
    flex: 0 0 auto;
    padding: 0 30px; /* 控制 Logo 之間的水平間距 */
    display: flex;
    align-items: center; /* 確保不同高度的 Logo 垂直置中 */
}

.marquee-item img {
    height: 60px; /* 統一高度，讓排版整齊 */
    width: auto;  /* 寬度自動縮放 */
    display: block;
    /*filter: grayscale(100%);*/ /* 統一成灰色更有企業形象感 */
    opacity: 0.6;
    transition: 0.3s;
}

.marquee-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 位移總長度的一半 */
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

/* accordion */
.accordion-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
  gap: 10px; /* 圖片間距 */
}

.accordion-item {
  flex: 1; /* 初始寬度平均分配 */
  background-size: cover;
  background-position: center;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 流暢的展開動畫 */
  cursor: pointer;
  border-radius: 8px;
}

.accordion-item:hover {
  flex: 5; /* 展開的比例，可依需求調整 */
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}

.accordion-item:hover .overlay {
  opacity: 1; /* 展開時才顯示文字 */
}

/* 遮罩內的標題預設樣式 */
.accordion-item .overlay h3 {
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}
.accordion-item a {
    text-decoration: none; /* 預設不顯示底線 */
}

/* 只有第一個項目：左上與右下圓角 */
.accordion-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* 只有最後一個項目：左上與右下圓角 */
.accordion-item:last-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-img-top {
    height: 250px;
    object-fit: cover; /* 確保圖片不變形地填滿區域 */
}