/* ==================== 全局字体变量定义 ==================== */
:root {
  /* 大标题字体：50px 衬线字体 */
  --font_01: normal normal normal clamp(1.5rem, 4vw + 0.5rem, 3rem) / 1.34em cormorantgaramond-light, cormorantgaramond, 'cormorant garamond', serif;    
  /* 中等字体：22px 衬线字体 */
  --font_02: normal normal normal clamp(1rem, 2.0vw + 0.5rem, 1.4rem) / 1.41em cormorantgaramond-light, cormorantgaramond, 'cormorant garamond', serif;
  /* 小字体：14px 无衬线字体 */
  --font_03: normal normal normal clamp(0.875rem, 1.5vw + 0.5rem, 1rem) / 1.79em raleway, sans-serif;
}

/* ==================== 基础页面设置 ==================== */
html, body {
  margin: 0;                /* 去掉默认边距 */
  padding: 0;               /* 去掉默认内边距 */
  min-width: unset;         /* 移除限制 */
  overflow-x: hidden;       /* 隐藏水平滚动条 */
  width: 100%;              /* 宽度为100% */
  height: 100%;             /* 高度为100% */
}

/* ==================== 页眉主容器 ==================== */
#SITE_HEADER {
  --header-max-width: 100%;    /* 头部最大宽度变量 */
  --header-height: 100px;       /* 头部高度变量 */

  width: 100%;                  /* 设置头部宽度为100% */
  max-width: var(--header-max-width); /* 最大宽度受限于变量 */
  margin: 0 auto;              /* 居中显示 */
  display: flex;               /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 左右布局 */
  align-items: center;         /* 垂直居中对齐 */
  box-sizing: border-box;      /* 包含内边距和边框在内的宽度计算 */
}

header {
  background: #ffffff;    /* 背景颜色 */
  position: fixed;        /* 固定在视口顶部 */
  top: 0;                 /* 距离顶部为0 */
  left: 0;                /* 距离左侧为0 */
  z-index: 1000;          /* 确保在其他元素之上 */
  height: 100px;       /* 头部高度变量 */
}

main {
  margin-top: 100px;     /* 为了避免内容被固定头部遮挡，添加顶部内边距 */
}

/* ==================== 文本样式类 ==================== */
.ssc-text { 
  font: var(--font_01);  /* 应用大标题样式 */
}       
.ssc-medium-text { 
  font: var(--font_02);  /* 应用副标题样式 */
} 
.ssc-small-text { 
  font: var(--font_03);  /* 应用正文样式 */
}

/* ==================== 内容容器 ==================== */
.site-header01 {
  width: 100%;                  /* 内容容器宽度为100% */
  max-width: var(--header-max-width); /* 最大宽度与头部一致 */
  margin: 0 auto;              /* 保持与头部同宽居中 */
}

/* ==================== LOGO区域 ==================== */
#header-logo-section {
  flex: 0 1 auto;              /* 不允许伸缩 */
  display: flex;               /* 使用 Flexbox 布局 */
  align-items: center;         /* 垂直居中对齐 */
  gap: 10px;                   /* 元素间距 */
}

.header-logo {
  width: 94px;                 /* LOGO固定尺寸 */
  height: 80px;                /* LOGO高度 */
  object-fit: contain;         /* 保持比例，适应容器 */
  margin-left: 20px;          /* 左侧间距 */
}

/* 公司名称区域样式 */
.header-logo-coname {
  display: flex;               /* 使用 Flexbox 来并排显示子元素 */
  align-items: right;         /* 垂直居中对齐 */
}

.company-name {
  margin-left: 20px;          /* 左侧间距 */
  white-space: nowrap;        /* 禁止换行 */
  overflow: hidden;           /* 隐藏超出部分 */
  text-overflow: ellipsis;    /* 超出文本用省略号表示 */
  align-self: center;         /* 确保公司名称垂直居中 */  
}

/* ==================== 主导航容器 ==================== */
.main-nav-container {
  flex: 1;                    /* 使导航容器占据剩余空间 */
  display: flex;              /* 使导航容器成为 Flexbox 容器 */
  justify-content: flex-end;  /* 靠左对齐 */
  position: relative;         /* 定位上下文 */
}

/* ==================== 导航列表 ==================== */
.nav-list {
  display: flex;           /* 桌面设备上显示导航项 */
  position: static;       /* 确保在文档流中正常显示 */
  opacity: 1;                /* 初始透明度 */
  transition: opacity 0.8s ease; /* 过渡效果 */
  list-style: none;          /* 去掉列表样式 */
  padding: 0 10px 0 0; /* 修改处：添加右側內邊距 */
  margin: 0;                 /* 清除外邊距 */
  gap: 10px;                 /* 項目間距 (取代傳統 margin-right 方案) */
  align-items: left;       /* 垂直居中對齊項目 */
  justify-content: flex-start; /* 水平對齊方式：靠左對齊 */
  flex-wrap: nowrap;         /* 禁止項目換行 (保持單行排列) */
}

/* ==================== 導航項目 ==================== */
.nav-list li {
  position: relative;        /* 設置相對定位 (供子元素絕對定位參考) */
  /* 項目間距由父容器的 gap 屬性統一控制 */  
  font-size: min(1.7vw, 16px); /* 动态调整字体大小 */
  padding: 0 clamp(3px, 0.5vw, 8px); /* 动态间距 */
}

/* 最后一个导航项目不需要右侧间距 */
.nav-list li:last-child {
  margin-right: 0;           /* 最后一个项目不需要右侧间距 */
}

/* 去除链接下划线 */
a {
  text-decoration: none;      /* 去除链接的下划线 */
  color: #000;                /* 设置默认链接颜色为黑色 */
}

a:visited {
  color: #000;                /* 点击后链接颜色保持不变 */
}

/* ==================== 移动端菜单按钮 ==================== */
.mobile-menu-toggle {
  display: none;              /* 默认隐藏 */
  background: transparent;   /* 背景透明 */
  border: none;               /* 去掉边框 */
  cursor: pointer;            /* 鼠标指针样式 */
  padding: 5px;              /* 去掉内边距 */
  flex-direction: column;     /* 垂直排列条形 */
  z-index: 1001;             /* 确保在最顶层 */
}

/* ==================== 汉堡菜单条形样式 ==================== */
.hamburger-bar {
  display: block;             /* 显示每个条形 */
  width: 30px;                /* 条形宽度 */
  height: 2px;               /* 条形高度 */
  margin: 3px 0;             /* 条形之间的间距 */
  background-color: #333;    /* 条形颜色 */
  transition: transform 0.3s ease; /* 动画效果 */
  margin-right: 20px;        /* 设置右边距为20px */
}

#PAGES_CONTAINER {
  position: relative;         /* 设置相对定位 */
  display: flex;            /* 使用 Flexbox 以便自適應 */
  flex-direction: column;   /* 垂直排列 */
  align-items: stretch;     /* 使子元素自適應容器寬度 */
  overflow: hidden;         /* 隱藏滾動條 */         
  width: 100%;              /* 確保容器寬度為100% */
  height: auto;             /* 高度自動調整 */
  padding: 0;               /* 減少內邊距 */
}

.page-content01 {
  position: relative;         /* 使 overlay 可以绝对定位 */
  box-sizing: border-box;    /* 包括内边距在内的计算方式 */
}

.page-content01en {
  position: relative;         /* 使 overlay 可以绝对定位 */
  box-sizing: border-box;    /* 包括内边距在内的计算方式 */
}

.page-content02 {
  display: flex;              /* 使用 Flexbox 布局 */
  align-items: flex-start;  /* 垂直方向的對齊方式（頂部對齊） */
  justify-content: flex-start;  /* 水平方向的對齊方式（左側對齊） */
  font-family: Arial, sans-serif; /* 字体设置 */
  width: 100%;                /* 确保容器宽度为100% */
  max-width: 1200px;         /* 最大宽度限制 */
  height: auto;              /* 自动高度 */
  margin: 0 auto;            /* 居中 */
  background-color: rgb(255, 255, 255); /* 背景颜色 */
  position: relative;        /* 使 overlay 可以绝对定位 */
  box-sizing: border-box;    /* 包括内边距在内的计算方式 */
  padding: 20px;             /* 添加一些內邊距以防內容緊貼邊緣 */
}

.page-content03 {
  position: relative;         /* 使 overlay 可以绝对定位 */
  box-sizing: border-box;    /* 包括内边距在内的计算方式 */
  height: 280px;             /* 保持高度自适应 */
}

.responsive-image {
  width: 100%;               /* 使图片宽度为100% */
  max-height: 550px;         /* 设置图片最大高度为760px */
  height: 550px;              /* 保持高度自适应 */
  object-fit: cover;         /* 使图片覆盖容器且不变形 */
  object-position: center;    /* 图片以中心为基准对齐 */
}

.responsive01en-image {
  width: 100%;               /* 使图片宽度为100% */
  max-height: 550px;         /* 设置图片最大高度为760px */
  height: 550px;              /* 保持高度自适应 */
  object-fit: cover;         /* 使图片覆盖容器且不变形 */
  object-position: right;    /* 图片以中心为基准对齐 */
}

.overlay {
  position: absolute;        /* 绝对定位 */
  bottom: 0;                /* 覆盖到底部 */
  left: 0;
  width: 100%;              /* 宽度100% */
  height: 70%;              /* 高度为 70% */
  background-color: rgba(255, 255, 255, 0.443); /* 磨沙透明效果 */
  backdrop-filter: blur(5px); /* 添加模糊效果 */
  pointer-events: none;     /* 确保点击事件不被 overlay 捕获 */
}

.overlay-en {
  position: absolute;        /* 绝对定位 */
  bottom: 0;                /* 覆盖到底部 */
  left: 0;
  width: 100%;              /* 宽度100% */
  height: 80%;              /* 高度为 70% */
  background-color: rgba(255, 255, 255, 0.443); /* 磨沙透明效果 */
  backdrop-filter: blur(5px); /* 添加模糊效果 */
  pointer-events: none;     /* 确保点击事件不被 overlay 捕获 */
}

.text-content {
  flex-grow: 1;            /* 文字区域占据剩余空间 */
  margin-left: 10px;       /* 文字与图片之间的间距 */
  text-align: left;              /* 文本左對齊 */
}

.right-image {
    width: 250px;       /* 设置图片最大宽度 */ 
    height: auto;           /* 高度自适应 */
    margin-left: 2px;       /* 图片与文字的左边距 */
}

.title {
  position: absolute;       /* 绝对定位 */
  top: 0;                   /* 放置在顶部 */
  left: 50%;                /* 水平居中 */
  transform: translateX(-50%); /* 中心对齐 */
  color: #fff;             /* 文字颜色 */
  font-size: 5vw;          /* 使用视口宽度单位，使字体大小随屏幕宽度变化 */
  text-align: center;      /* 文字居中对齐 */
  z-index: 2;              /* 确保标题在 overlay 之上 */
  padding: 10px;           /* 添加内边距 */
  background: rgba(0, 0, 0, 0.5); /* 半透明背景，增强可读性 */
  white-space: nowrap;     /* 防止文本换行 */
  overflow: hidden;        /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 溢出文本显示省略号 */
}

.title01 {
  position: absolute;       /* 绝对定位 */
  top: 0px;                   /* 放置在顶部 */
  left: 50%;                /* 水平居中 */
  transform: translateX(-50%); /* 中心对齐 */
  color: #fff;             /* 文字颜色 */
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* 自適應字體大小 */
  text-align: center;      /* 文字居中对齐 */
  z-index: 2;              /* 确保标题在 overlay 之上 */
  padding: 10px;           /* 添加内边距 */
  background: rgba(0, 0, 0, 0.5); /* 半透明背景，增强可读性 */
  white-space: nowrap;     /* 防止文本换行 */
  overflow: hidden;        /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 溢出文本显示省略号 */
}

.title02 {
  position: absolute;       /* 绝对定位 */
  top: 10px;                /* 放置在顶部 */
  left: 50%;                /* 水平居中 */
  transform: translateX(-50%); /* 中心对齐 */
  color: #000000;           /* 文字颜色 */
  font-size: 24px;         /* 字体大小 */
  text-align: center;      /* 文字居中对齐 */
  z-index: 2;              /* 确保标题在 overlay 之上 */
  padding: 10px;           /* 添加内边距 */
  background: rgb(255, 255, 255); /* 半透明背景，增强可读性 */
  white-space: nowrap;     /* 防止文本换行 */
  overflow: hidden;        /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 溢出文本显示省略号 */
}

.quote {
  font-size: 78px !important;    /* 引号大小 */
  color: #0062b7 !important;     /* 引号颜色 */
  vertical-align: middle;        /* 垂直对齐 */
}

/* 分隔线样式 */
.divider-container01, .divider-container02 {
  margin: 5px 0; /* 上下边距 */
}

.divider01, .divider02 {
  border: none; 
  border-top: 1px solid #ccc; /* 分隔线样式 */
}

.title03 {
  position: absolute;            /* 绝对定位 */
  top: 0;                        /* 放置在顶部 */
  left: 50%;                     /* 水平居中 */
  transform: translateX(-50%);  /* 中心对齐 */
  color: #fff;                  /* 文字颜色 */
  font-size: clamp(20px, 3vw + 2px, 38px); /* 字体大小随屏幕宽度变化 */
  text-align: center;           /* 文字居中对齐 */
  z-index: 2;                   /* 确保标题在 overlay 之上 */
  padding: 10px;                /* 添加内边距 */
  background: rgba(0, 0, 0, 0.5); /* 半透明背景，增强可读性 */
  white-space: nowrap;          /* 防止文本换行 */
  overflow: hidden;             /* 隐藏溢出文本 */
  text-overflow: ellipsis;      /* 溢出文本显示省略号 */
  
 /* 小螢幕強制兩行完整顯示 */
 @media (max-width: 580px) {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 嚴格限制兩行 */
  -webkit-box-orient: vertical;
  line-height: 1.3;             /* 行高精準控制 */
  max-height: calc(1.3em * 2);  /* 行高 x 2 */
  overflow: visible;            /* 取消隱藏 */
  text-overflow: clip;          /* 禁用省略號 */
  word-break: break-word;       /* 智能換行 */
  font-size: min(6vw, 22px);    /* 動態縮小字體 */
  width: 70%;                   /* 增加換行機會 */
  transition: 0.2s;           /* 讓寬度變化更平滑 */
}
}

.title04 {
  position: absolute;            /* 绝对定位 */
  top: 50px;                    /* 放置在顶部 */
  left: 50%;                     /* 水平居中 */
  transform: translateX(-50%);  /* 中心对齐 */
  color: #000000;               /* 文字颜色 */
  font-size: clamp(20px, 3vw + 2px, 28px); /* 字体大小随屏幕宽度变化 */
  text-align: center;           /* 文字居中对齐 */
  z-index: 2;                   /* 确保标题在 overlay 之上 */
  padding: 10px;                /* 添加内边距 */
  background: rgb(255, 255, 255); /* 半透明背景，增强可读性 */
  white-space: nowrap;          /* 防止文本换行 */
  overflow: hidden;             /* 隐藏溢出文本 */
  text-overflow: ellipsis;      /* 溢出文本显示省略号 */
}

.indent {
  padding-left: 2em; /* 根据需要调整缩进 */
}

.description01 {
  position: absolute;          /* 绝对定位 */
  top: 32%;                   /* 距离顶部32% */
  bottom: 0%;                 /* 距离底部0% */
  left: 50%;                  /* 水平居中 */
  padding: 10px;              /* 内边距 */
  box-sizing: border-box;     /* 包括内边距在内的计算方式 */
  max-height: 100%;           /* 最大高度为容器高度的100% */
  transform: translateX(-50%); /* 中心对齐 */
  color: #000;                /* 文字颜色 */
  font-size: 18px;            /* 文字大小 */
  text-align: center;          /* 文字居中对齐 */
  z-index: 2;                 /* 确保描述在 overlay 之上 */
  background-color: rgba(255, 255, 255, 0.123); /* 背景颜色 */
  width: 100%;                /* 限制描述的最大宽度 */
  max-width: 680px;           /* 容器的固定宽度 */
  max-height: none;           /* 根据内容自动调整高度 */
  height: 320px;              /* 高度自动适应内容 */
  margin: 0 auto;             /* 确保容器在父元素中居中 */
  border-radius: 20px;        /* 设置圆角 */
  padding: 10px;              /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.description01en {
  position: absolute;          /* 绝对定位 */
  top: 32%;                   /* 距离顶部32% */
  bottom: 0%;                 /* 距离底部0% */
  left: 50%;                  /* 水平居中 */
  padding: 10px;              /* 内边距 */
  box-sizing: border-box;     /* 包括内边距在内的计算方式 */
  max-height: 100%;           /* 最大高度为容器高度的100% */
  transform: translateX(-50%); /* 中心对齐 */
  color: #000;                /* 文字颜色 */
  font-size: 18px;            /* 文字大小 */
  text-align: center;          /* 文字居中对齐 */
  z-index: 2;                 /* 确保描述在 overlay 之上 */
  background-color: rgba(255, 255, 255, 0.123); /* 背景颜色 */
  width: 100%;                /* 限制描述的最大宽度 */
  max-width: 680px;           /* 容器的固定宽度 */
  max-height: none;           /* 根据内容自动调整高度 */
  height: 320px;              /* 高度自动适应内容 */
  margin: 0 auto;             /* 确保容器在父元素中居中 */
  border-radius: 20px;        /* 设置圆角 */
  padding: 10px;              /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.parent-container {
  display: flex;               /* 使用 Flexbox 以便自适应 */
  justify-content: center;     /* 水平居中对齐内容 */
  align-items: center;         /* 垂直居中对齐内容 */
  width: 100%;                 /* 父容器的宽度 */
  height: 100%;                /* 父容器的高度 */
  position: relative;          /* 确保子元素可以使用绝对定位 */
}

.description02 {
  display: flex;               /* 使用 Flexbox 布局 */
  flex-direction: column;      /* 垂直排列每个项目 */
  background: rgba(0, 0, 0, 0.050); /* 背景颜色 */
  position: absolute;          /* 绝对定位 */
  top: 10%;                    /* 距离顶部10% */
  bottom: 5%;                  /* 距离底部5% */
  left: 50%;                   /* 水平居中 */
  padding: 10px;              /* 内边距 */
  box-sizing: border-box;     /* 包括内边距在内的计算方式 */
  transform: translateX(-50%); /* 中心对齐 */
  color: #000;                /* 文字颜色 */
  font-size: 18px;            /* 文字大小 */
  z-index: 2;                 /* 确保描述在 overlay 之上 */
  max-width: 100%;             /* 限制描述的最大宽度 */
  width: 700px;               /* 容器的固定宽度 */
  margin: 0 auto;             /* 确保容器在父元素中居中 */
}

.item {
  display: flex;              /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 将文本和图片分开 */
  align-items: flex-start;    /* 顶部对齐 */
  margin-bottom: 20px;        /* 每个项目的底部间距 */
}

/* 自定义滚动条样式 */
.description02::-webkit-scrollbar {
  width: 8px;               /* 滚动条宽度 */
}

.description02::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0); /* 滚动条轨道背景 */
  border-radius: 10px;       /* 圆角 */
}

.description02::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5); /* 滚动条滑块颜色 */
border-radius: 10px;       /* 圆角 */
}

.description02::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.7); /* 悬停时颜色变化 */
}

.description strong {
  font-weight: bold;          /* 设置为粗体 */
}

.left-aligned {
  text-align: left;           /* 左对齐文本 */
  margin: 0;                  /* 去除默认边距 */
  margin-right: 2px;          /* 文字与图片之间的间距 */
}

.divider-container01 {
  text-align: right;          /* 将容器内的内容靠右对齐 */
}

.divider01 {
  border: none;               /* 去除默认边框 */
  height: 2px;                /* 设置分隔线的高度 */
  background-color: #00000000; /* 设置分隔线颜色（透明） */
  width: 70%;                 /* 设置分隔线宽度 */
  z-index: 2;                 /* 确保分隔线在 overlay 之上 */
  margin: 10px auto;          /* 上下边距10px，水平居中 */
}

.description .divider01 {
  margin-left: auto;          /* 左边距自动，以实现右对齐 */
  margin-right: 0;            /* 右边距为0 */
}

.divider02 {
  border: none;               /* 去除默认边框 */
  height: 1px;                /* 设置分隔线的高度 */
  background-color: #000000;  /* 设置分隔线颜色 */
  width: 70%;                 /* 设置分隔线宽度 */
  z-index: 2;                 /* 确保分隔线在 overlay 之上 */
  margin: 10px auto;          /* 上下边距10px，水平居中 */
}

.description .divider02 {
  margin-left: auto;          /* 左边距自动，以实现右对齐 */
  margin-right: 0;            /* 右边距为0 */
}

.divider-container02 {
  text-align: center;         /* 将容器内的内容置中对齐 */
}

.learn-more-button {
  display: flex;             /* 使用 flexbox 布局 */
  align-items: center;       /* 垂直居中对齐 */
  background-color: #e0f7e0; /* 浅绿色背景 */
  border-radius: 50px;       /* 椭圆形效果 */
  width: 50px;              /* 按钮宽度 */
  padding: 5px 9px;          /* 内边距 */
  text-decoration: none;      /* 去除下划线 */
  color: #333;               /* 文字颜色 */
  font-size: 12px;           /* 文字大小 */
  transition: background-color 0.3s; /* 背景色过渡效果 */
}

.learn-more-button:hover {
  background-color: #c8e6c9;  /* 悬停时的背景色 */
}

.circle {
  width: 20px;                /* 小圆圈的宽度 */
  height: 20px;               /* 小圆圈的高度 */
  background-color: #4caf50;  /* 圆圈颜色 */
  border-radius: 50%;         /* 圆形效果 */
  margin-right: 10px;         /* 圆圈与箭头的间距 */
}

.arrow {
  margin-left: 3px;           /* 自动左边距，使箭头靠右 */
  font-size: 13px;            /* 箭头大小 */
}

.text {
  margin-left: 5px;           /* 文本与箭头的间距 */
}

#SITE_FOOTER {
  background-color: rgb(44, 44, 44); /* 设置背景颜色为黑色 */
  color: white;              /* 设置字体颜色为白色 */
  padding: 20px;             /* 内边距 */
  text-align: center;        /* 文本居中 */
}

.footer-nav a {
  color: white;              /* 设置链接颜色为白色 */
  margin: 0 10px;           /* 设置链接之间的间距 */
  text-decoration: none;     /* 移除链接下划线 */
  transition: all 0.3s;     /* 添加过渡效果 */
  display: inline-block;     /* 使链接成为块级元素，以便应用 transform */
}

.footer-nav a:hover {
  color: #787bad;           /* 悬停时改变颜色 */
  text-decoration: none;     /* 确保悬停时没有下划线 */
  transform: translateY(-2px); /* 悬停时上移 */
}

/* ==================== 辅助样式 ==================== */
/* 微交互动画样式链接悬停效果 */
.nav-link {
  display: inline-block;    /* 悬停效果或尝试停止 block */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 链接悬停过渡效果 */
}
.nav-link:hover {
  transform: translateY(-2px); /* 悬停时上移 */
  opacity: 0.9;               /* 悬停时透明度稍微降低 */
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .nav-list {
    background: rgba(30,30,30,0.95); /* 暗黑模式背景 */
    box-shadow: -4px 0 12px rgba(255,255,255,0.1); /* 阴影效果 */
  }
}

/* ==================== 现有CSS补充优化 ==================== */
/* 增加过渡动画 */
.item,
.right-image {
  transition: all 0.3s ease;
}

/* 图片响应式增强 */
.right-image {
  object-position: center;
  transition: transform 0.3s ease;
}

.right-image:hover {
  transform: scale(1.03);
}

/* 版权信息样式 */
.copyright {
  text-align: center;        /* 文本居中对齐 */
  display: flex;             /* 使用 flexbox */
  justify-content: center;    /* 水平居中 */
}

/* ==================== 响应式布局调整 ==================== */
/* 桌面端布局（≥769px）默认样式已包含在原有代码中 */

/* 移动端布局（≤768px） */
@media screen and (max-width: 768px) {
/* 导航栏调整 */
#SITE_HEADER {
  padding: 0 10px;         /* 设置头部左右内边距为10px */
  height: 80px;            /* 设置头部高度为80px */
}

.header-logo {
  width: 70px;             /* LOGO宽度设置为70px */
  height: 60px;            /* LOGO高度设置为60px */
  margin-left: 3px;        /* 左侧间距设置为3px */
}

.company-name {
  font-size: clamp(12px, 4vw, 16px) !important;  /* 设置响应式字体大小 */
  margin-left: 8px;          /* 左侧间距设置为8px */
  white-space: nowrap;        /* 禁止换行 */
  overflow: hidden;           /* 隐藏超出部分 */
  text-overflow: ellipsis;    /* 超出文本用省略号表示 */
  align-self: center;         /* 确保公司名称垂直居中 */  
}

/* 隐藏桌面导航项 */
.nav-list {
  position: fixed;          /* 固定定位 */
  top: 0;                   /* 从顶部开始 */
  left: 0;                  /* 左侧定位 */
  opacity: 0;                /* 初始透明度为0（隐藏） */
  width: 85%;               /* 占满大部分屏幕 */
  max-width: none;          /* 移除最大宽度限制 */
  flex-direction: column;   /* 垂直排列 */
  background: rgba(255, 255, 255, 0.961); /* 背景颜色和透明度 */
  backdrop-filter: blur(0.8px); /* 背景模糊效果 */
  box-shadow: -4px 0 12px rgba(0,0,0,0.1); /* 阴影效果 */    
  z-index: 1000;            /* 确保在最上层 */
  transform: translateY(0); /* 初始隐藏状态 */
  transition: transform 0.8s ease; /* 过渡效果 */
  padding: 0;                /* 去掉内边距 */
  margin: 0;                 /* 去掉外边距 */
}

/* 菜单项样式 */
.nav-list li {
  text-align: left; /* 左对齐更符合移动端习惯 */
  padding: 12px 15px; /* 设置内边距 */
  font-size: clamp(14px, 4.5vw, 16px);
}

/* 激活状态菜单 */
.nav-list.active {
  display: block;           /* 显示为块级元素 */
  opacity: 1;               /* 完全显示 */
  transform: translateY(0); /* 滑入显示 */
}

/* 显示移动菜单按钮 */
.mobile-menu-toggle {
  display: flex;           /* 移动端显示按钮 */
  margin-left: auto;      /* 靠右对齐 */
}

/* 汉堡按钮动画 */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg); /* 第一个条形旋转并向下移动 */
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;             /* 第二个条形隐形 */
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg); /* 第三个条形旋转并向上移动 */
}

main {
  margin-top: 80px;     /* 为了避免内容被固定头部遮挡，添加顶部内边距 */
}

#PAGES_CONTAINER {
  position: relative;         /* 设置相对定位 */
  display: flex;            /* 使用 Flexbox 以便自适应 */
  flex-direction: column;   /* 垂直排列 */
  align-items: stretch;     /* 使子元素自适应容器宽度 */
  overflow: hidden;         /* 隐藏滚动条 */         
  width: 100%;              /* 确保容器宽度为100% */
  height: auto;             /* 高度自动调整 */
  padding: 0;               /* 减少内边距 */
  box-sizing: border-box;     /* 包括内边距和边框在内的计算方式 */
}  
  
/* 确保父容器有明确的高度基准 */
.page-content01 {       /* 使子容器自适应剩余空间 */
  height: 550px !important; /* 根据实际需要调整基准高度 */
  min-height: 550px !important; /* 设置最小高度保障可视性 */
}  
  
/* 确保父容器有明确的高度基准 */
.page-content01en {       /* 使子容器自适应剩余空间 */
  height: 700px !important; /* 根据实际需要调整基准高度 */
  min-height: 700px !important; /* 设置最小高度保障可视性 */
}

.page-content02 {       /* 使子容器自适应剩余空间 */
  height: auto;                    /* 自动高度 */
  min-height: calc(100vh - 20px); /* 动态高度计算，减去头部 */
  background-color: rgba(255, 255, 255, 0); /* 背景颜色 */
  position: relative;              /* 使 overlay 可以绝对定位 */
  box-sizing: border-box;          /* 包括内边距在内的计算方式 */
  padding: 20px;                   /* 添加一些内边距以防内容紧贴边缘 */
  display: flex;                   /* 使用 Flexbox 布局 */
  flex-direction: column;          /* 垂直排列 */
  gap: 30px;                       /* 子元素间距 */
  align-items: stretch;            /* 使子元素自适应容器宽度 */
  justify-content: flex-start;     /* 确保子元素顶部对齐 */
}
  
.page-content03 {
  position: relative;         /* 作为绝对定位子元素的参考基准 */
  box-sizing: border-box;     /* 包含 padding 和 border 的尺寸计算 */
  height: 180px;          
  min-height: 180px;          /* 最小高度保障，内容多时自动扩展 */
  display: flex;              /* 启用弹性布局 */
  flex-direction: column;     /* 垂直排列子元素 */
  justify-content: start;     /* 强制内容从顶部开始排列 (关键属性) */
  align-items: stretch;       /* 子元素横向拉伸填满容器 */
}

/* 覆盖层精准定位 */
.overlay {
  height: 70% !important;
  bottom: 0 !important;
  top: auto !important; /* 清除可能存在的top定位 */
  backdrop-filter: blur(3px); /* 移动端适当减少模糊强度 */
}

/* 覆盖层精准定位 */
.overlay-en {
  height: 85% !important;
  bottom: 0 !important;
  top: auto !important; /* 清除可能存在的top定位 */
  backdrop-filter: blur(3px); /* 移动端适当减少模糊强度 */
}

/* 关联元素联动调整 */
.responsive-image {
  height: 550px !important;
  object-fit: cover !important;
}

.responsive01en-image {
  max-height: 700px !important;
  height: 700px !important;
  object-fit: cover !important;
}

/* 标题定位修正 */
.title01 {
  flex: 1;                  /* 使子容器自适应剩余空间 */
  font-size: clamp(26px, 5vw, 30px) !important;  /* 响应式字体 */
  line-height: 1.6 !important;                   /* 行高优化 */
  bottom: 100% !important; /* 高度调整 */
  top: 0 !important;
  transform: translateX(-50%) translateY(0) !important;
  position: absolute; /* 确保能够使用 bottom 属性 */
  left: 50%; /* 水平居中 */
  background-color: rgba(0, 0, 0, 0.256); /* 设置背景颜色为灰色 */
  padding: 0; /* 可选：添加内边距以改善视觉效果 */
  color: white; /* 可选：设置文本颜色以提高可读性 */
  text-align: center; /* 确保文本水平居中 */
  height: 45px !important;
}

.title02 {
  position: absolute;       /* 绝对定位 */
  top: 0;                /* 放置在顶部 */
  left: 50%;                /* 水平居中 */
  transform: translateX(-50%); /* 中心对齐 */
  color: #000000;           /* 文字颜色 */
  font-size: clamp(16px, 3vw + 2px, 30px) !important;  /* 响应式字体 */
  text-align: center;      /* 文字居中对齐 */
  z-index: 2;              /* 确保标题在 overlay 之上 */
  padding: 10px;           /* 添加内边距 */
  background: rgb(255, 255, 255); /* 半透明背景，增强可读性 */    
  white-space: normal;
  line-height: 1.3;             /* 行高精準控制 */
  max-height: calc(1.3em * 2);  /* 行高 x 2 */
  overflow: visible;            /* 取消隱藏 */
  text-overflow: clip;          /* 禁用省略號 */
  word-break: break-word;       /* 智能換行 */
  font-size: min(4vw, 22px);    /* 動態縮小字體 */
  width: 95%; 
  /* 現代瀏覽器備用方案 */
  @supports (line-clamp: 2) {
    display: block;
  }
}
}
  
/* 描述框动态定位 */
.description01 { /* 字体大小控制（新增部分） */
  font-size: clamp(16px, 4vw, 18px) !important;  /* 响应式字体 */
  line-height: 1.5 !important;                   /* 行高优化 */
  
/* 修正现有定位参数 */
left: 50% !important;                         /* 修正 left 参数 */
transform: translateX(-50%) translateY(0) !important;       /* 修正 transform 参数 */
  
    /* 保持原有其他参数 */
    position: relative !important; /* 设置相对定位，以便可以使用绝对定位的子元素。 */
    bottom: 72% !important; /* 将元素的底部设置在容器的 72% 位置。 */
    top: auto !important; /*  */
    width: 100% !important; /* 设置宽度为 100%。 */
    max-width: 100% !important; /* 限制最大宽度为 100%。 */
    height: 360px !important; /* 设置高度为 360px。 */
    max-height: 360px !important; /* 设置最大高度为 360px。 */
    margin: 20px 0 !important; /* 设置上下边距为 20px。 */
    padding: 20px 30px !important; /* 设置内边距，上下 20px，左右 30px。 */
    background-color: rgba(255, 255, 255, 0.123); /* 背景颜色 */
    }
  
/* 描述框动态定位 */
.description01en { /* 字体大小控制（新增部分） */
  /* 垂直居中核心設定 */
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: left !important;

  /* 修正定位衝突 */
  position: relative !important;
  top: auto !important;
  bottom: 88% !important;
  transform: translateX(-50%) !important;

  /* 尺寸優化 */
  width: 100% !important;
  height: 580px !important;
  box-sizing: border-box !important;

  /* 保留原有樣式 */
  font-size: clamp(16px, 4vw, 18px) !important;
  line-height: 1.5 !important;
  background-color: rgba(255, 255, 255, 0.123);
  padding: 20px 30px !important;
  margin: 20px 0 !important;
    }

  /* 核心事业模块布局重置 */
  .item {
    display: flex !important; /* 使用 Flexbox 布局。 */
    flex-direction: column !important; /* 垂直排列子元素。 */
    margin-bottom: 30px; /* 每个项目底部间距为 30px。 */
  }

  /* 设置文本内容区域的样式。 */
  .text-content {
    order: 1 !important; /*  */
    width: 100% !important; /*  */
    margin: 0 0 20px 0 !important; /*  */
    padding: 0 !important; /*  */
  }

  .right-image {
    order: 2 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .item .text-content {
    order: 1; /* 文本在上 */
    width: 100% !important;
    margin: 0 0 20px 0 !important;
  }

  .item img {
    order: 2; /* 图片在下 */
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .title04 {
    position: relative !important;    
    top: 0 !important;                    /* 放置在顶部 */
    left: 0 !important;
    transform: none !important;
    text-align: center !important;
    background: transparent !important;
    padding: 12px 0 !important;
    white-space: normal !important;
    line-height: 1.0;             /* 行高精準控制 */
    max-height: calc(1.0em * 2);  /* 行高 x 2 */
    overflow: visible;            /* 取消隱藏 */
    text-overflow: clip;          /* 禁用省略號 */
    word-break: break-word;       /* 智能換行 */
    font-size: min(4vw, 22px);    /* 動態縮小字體 */
    width: 95%; 
    /* 現代瀏覽器備用方案 */
    @supports (line-clamp: 2) {
      display: block;
    }
  }

  .description02 {
    display: block;                /* 确保为块级元素 */
    position: relative !important; /* 改为相对定位 */
    top: 45px !important;          /* 清除顶部定位 */
    max-width: auto;          /* 在小屏幕上使用更小的最大寬度 */
    font-size: 16px;         /* 調整字體大小 */
    height: auto !important;
    margin: 0 0;                /* 水平居中 */
  }

  /* 按钮样式优化 */
  .learn-more-button {
    margin-top: 15px !important;
    width: 95% !important;
    justify-content: flex-start !important;
  }  

.indent {
  padding-left: 0.6em; /* 根据需要调整缩进 */
}

/* 页脚优化 */
#SITE_FOOTER {
  padding: 30px 15px; /* 设置内边距 */
}

.footer-nav a {
  display: block; /* 设置链接为块级元素 */
  margin: 10px 0; /* 设置链接之间的间距 */
}

/* 分隔线调整 */
.divider01 {
  border: none;               /* 去除默认边框 */
  height: 2px;                /* 设置分隔线的高度 */
  background-color: #00000000; /* 设置分隔线颜色（透明） */
  width: 70%;                 /* 设置分隔线宽度 */
  z-index: 2;                 /* 确保分隔线在 overlay 之上 */
  margin: 10px auto;          /* 上下边距10px，水平居中 */
}

.divider02 {
  width: 90% !important; /* 设置分隔线宽度 */
}
  
@media screen and (min-width: 769px) {
  .page-content01 {
    height: 550px !important; /* 根据实际需要调整基准高度 */
    min-height: 550px !important; /* 设置最小高度保障可视性 */
  } 

  .page-content01en {
    height: 550px !important; /* 根据实际需要调整基准高度 */
    min-height: 550px !important; /* 设置最小高度保障可视性 */
  } 

  .page-content02 {       /* 使子容器自适应剩余空间 */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    position: relative !important; /* 移除绝对定位 */
    left: auto !important;
    transform: none !important;
    box-sizing: border-box;    /* 包括内边距在内的计算方式 */
    padding: 20px;             /* 添加一些內邊距以防內容緊貼邊緣 */
    flex-direction: column;      /* 垂直排列 */
    align-items: stretch;        /* 使子元素自适应容器宽度 */
  }

  /* 描述框动态定位 */
  .description01 { /* 字体大小控制（新增部分） */
    font-size: clamp(18px, 3vw, 18px) !important;  /* 响应式字体 */
    line-height: 1.6 !important;                   /* 行高优化 */
  
    /* 修正现有定位参数 */
    left: 50% !important;                         /* 修正 left 参数 */
    transform: translateX(-50%) translateY(0) !important;       /* 修正 transform 参数 */
  
    /* 保持原有其他参数 */
    position: relative !important;
    bottom: 72% !important;
    top: auto !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    max-height: 65% !important;
    margin: 20px 0 !important;
    padding: 30px !important;
    background-color: rgba(255, 255, 255, 0.123); /* 背景颜色 */
    }
  
    /* 描述框动态定位 */
    .description01en { /* 字体大小控制（新增部分） */
      /* 垂直居中核心設定 */
      display: flex !important;
      flex-direction: column;
      justify-content: center !important;
      align-items: left !important;
    
      /* 修正定位衝突 */
      position: relative !important;
      top: auto !important;
      bottom: 75% !important;
      transform: translateX(-50%) !important;
    
      /* 尺寸優化 */
      width: 100% !important;
      max-width: 1200px !important;
      height: 100% !important;
      max-height: 350px !important;
      box-sizing: border-box !important;
    
      /* 保留原有樣式 */
      font-size: clamp(16px, 4vw, 18px) !important;
      line-height: 1.5 !important;
      background-color: rgba(255, 255, 255, 0.123);
      padding: 20px 30px !important;
      margin: 20px 0 !important;
        }

  /* 修复描述容器定位 */
  .description02 {
    top: 45px;
    position: relative !important; /* 移除绝对定位 */
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: auto;               /* 高度自動適應內容 */
    margin: 0 auto !important;
  }

  /* 按钮样式优化 */
  .learn-more-button {
    margin-top: 15px !important;
    width: 35% !important;
    justify-content: flex-start !important;
  }  

  /* 重置项目容器布局 */
  .item {
    flex-direction: row !important; /* 强制水平排列 */
    justify-content: space-between !important;
    align-items: center !important; /* 垂直居中 */
    margin-bottom: 40px !important;
  }

  /* 文本容器优化 */
  .text-content {
    width: 60% !important; /* 文本占60%宽度 */
    margin-right: 5% !important;
    order: 1 !important; /* 确保文本在左 */
  }

  /* 图片容器优化 */
  .right-image {
    width: 35% !important; /* 图片占35%宽度 */
    max-width: 400px !important;
    order: 2 !important; /* 确保图片在右 */
    margin-left: 0 !important;
  }

  /* 清除移动端样式残留 */
  .item img {
    max-width: 400px !important;
    margin: 0 !important;
  }
}

#SITE_FOOTER {
  background-color: rgb(44, 44, 44); /* 设置背景颜色为黑色 */
  color: white;              /* 设置字体颜色为白色 */
  padding: 20px;             /* 内边距 */
  text-align: center;        /* 文本居中 */
}

.footer-nav a {
  color: white;              /* 设置链接颜色为白色 */
  margin: 0 10px;           /* 设置链接之间的间距 */
  text-decoration: none;     /* 移除链接下划线 */
  transition: all 0.3s;     /* 添加过渡效果 */
  display: inline-block;     /* 使链接成为块级元素，以便应用 transform */
}

.footer-nav a:hover {
  color: #787bad;           /* 悬停时改变颜色 */
  text-decoration: none;     /* 确保悬停时没有下划线 */
  transform: translateY(-2px); /* 悬停时上移 */
}