@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

@font-face {
  font-family: 'poppinsthin'; /* 自定义字体名，后续引用用这个 */
  src: url('../fonts/Poppins-Thin.otf') format('opentype'); /* 路径 + 格式声明 */
  font-weight: normal; /* 字重：normal / bold / 100-900 */
  font-style: normal; /* 样式：normal / italic / oblique */
  font-display: swap; /* 字体加载策略：swap 优先显示备用字体 */
}











/* ==========================================
   1. 基础重置 (Reset) - 消除浏览器默认样式差异
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 宽高包含内边距和边框，更易布局 */
}

/* 统一字体和行高，提升可读性 */
body {
  font-family: 'Noto Sans TC', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  background-color: #2E2E2E;
}

/* 去除列表默认样式 */
ul, ol {
  list-style: none;
}

/* 去除链接默认下划线，统一颜色 */
a {
  text-decoration: none;
  color: #0066cc;
  transition: color 0.2s ease; /*  hover 过渡，更丝滑 */
}

a:hover {
  color: #004999;
}

/* 图片自适应 */
img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片底部默认空白 */
}

/* 按钮、输入框等元素统一光标样式 */
button, input, select, textarea {
  font-family: inherit; /* 继承全局字体 */
  font-size: inherit;
  cursor: pointer;
}

/* ==========================================
   2. 通用布局类
   ========================================== */
/* 容器：居中 + 限制最大宽度 */
.container {
  padding: 0 60px;
  max-width: 1920px;
  margin: 0 auto;
}

/* 行/列布局（简易 flex 版） */
.row {
  display: flex;
  flex-wrap: wrap; /* 屏幕变小时自动换行 */
}

.col {
  flex: 1;
}

/* 响应式：小屏幕下列占满整行 */
@media (max-width: 768px) {
  .col {
    flex: 0 0 100%;
  }
}

/* ==========================================
   3. 通用排版样式
   ========================================== */
/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.font-size-30{
 font-size: 30px;
 line-height: 50px;
 font-weight: 300;
}
.button{
    border:1px solid #666;
    padding: 10px 30px;
    font-size: 14px;
    border-radius: 50px;
    color: #fff;
    font-weight: 300;
    display: inline-block;
}




/* 段落和间距 */
p {
  margin-bottom: 16px;
}

/* 文本对齐类 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.display-inline-block{
    display: inline-block;
}
.display-flex{
    display: flex;
}
.flex-align-center{
    align-items: center;
}





/* ==========================================
   4. 按钮样式
   ========================================== */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

/* 不同类型按钮 */
.btn-primary {
  background-color: #0066cc;
  color: #fff;
}
.btn-primary:hover {
  background-color: #004999;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #545b62;
}

.btn-success {
  background-color: #28a745;
  color: #fff;
}
.btn-success:hover {
  background-color: #1e7e34;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}
.btn-danger:hover {
  background-color: #c82333;
}

/* 按钮尺寸 */
.btn-sm { padding: 4px 8px; font-size: 0.875rem; }
.btn-lg { padding: 12px 24px; font-size: 1.125rem; }

/* ==========================================
   5. 表单样式
   ========================================== */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

/* ==========================================
   6. 辅助类
   ========================================== */
/* 清除浮动（兼容旧版浏览器） */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 边距辅助类 */
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* 隐藏元素 */
.hidden {
  display: none !important;
}