/* ============================================
   base.css  reset + 基础样式
   作用：抹平浏览器差异 + 基础排版
   ============================================ */

/* ---------- CSS 变量：所有颜色/间距/字体集中管理 ---------- */

:root {
  /* ========== 主题色 ========== */
  --color-primary:        #005bad;   /* 主题色（导航/底部背景） */
  --color-primary-light:  #3a85c4;   /* 主题色浅色（mega menu 背景）TODO: 你调 */
  --color-border-bottom:  #001f5a;   /* 底部底边颜色 */

  /* ========== 背景与文字 ========== */
  --color-bg-main:        #ffffff;   /* 页面主背景 */
  --color-text-main:      #333333;   /* 文字主色 */

  /* ========== 布局尺寸 ========== */
  --header-height:        80px;      /* 顶部导航高度（pc.css / mobile.css 按断点覆盖）*/

  /* ========== 字号梯度 ========== */
  --fs-12: 12px;   /* 辅助说明 */
  --fs-14: 14px;   /* 次要正文 */
  --fs-16: 16px;   /* 基础正文 */
  --fs-18: 18px;
  --fs-20: 20px;   /* 小标题 */
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;   /* 大标题 */
  --fs-40: 40px;
  --fs-48: 48px;   /* Banner 标题 */

  /* ========== 字体族 ========== */
  --font-cn: "Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;

  /* ========== 容器 ========== */
  --container-width:  1260px;   /* 内容最大宽度 */
  --container-pad-pc: 20px;     /* PC 端左右内边距 */
  --container-pad-mb: 16px;     /* 移动端左右内边距 */
}

/* ============================================
   reset：抹平浏览器差异
   ============================================ */

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-cn);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;             /* 去掉圆点 */
}

a {
  color: inherit;
  text-decoration: none;        /* 去掉下划线 */
}

img, picture, video, canvas, svg {
  display: block;
  /* max-width: 100%; */
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================
   容器：外层 100% 壳 + 内层 1260px 居中
   ============================================ */

/* 外层壳：占满屏幕，可放背景色/边框/装饰 */
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg-main);
}

/* 内层容器：1260 居中 */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ============================================
   布局工具类：flex
   命名规则：.flex_<方向>_<主轴>_<交叉轴>
   方向：row | column
   主轴（justify）：start | center | end | between | around | evenly
   交叉轴（align）： start | center | end | stretch | baseline
   ============================================ */

/* ---------- flex + row（横向）---------- */
.flex_row_start_start    { display: flex; flex-direction: row; justify-content: flex-start;   align-items: flex-start;   }
.flex_row_start_center   { display: flex; flex-direction: row; justify-content: flex-start;   align-items: center;       }
.flex_row_start_end      { display: flex; flex-direction: row; justify-content: flex-start;   align-items: flex-end;     }
.flex_row_start_stretch  { display: flex; flex-direction: row; justify-content: flex-start;   align-items: stretch;      }
.flex_row_start_baseline { display: flex; flex-direction: row; justify-content: flex-start;   align-items: baseline;     }

.flex_row_center_start   { display: flex; flex-direction: row; justify-content: center;       align-items: flex-start;   }
.flex_row_center_center  { display: flex; flex-direction: row; justify-content: center;       align-items: center;       }
.flex_row_center_end     { display: flex; flex-direction: row; justify-content: center;       align-items: flex-end;     }
.flex_row_center_stretch { display: flex; flex-direction: row; justify-content: center;       align-items: stretch;      }
.flex_row_center_baseline{ display: flex; flex-direction: row; justify-content: center;       align-items: baseline;     }

.flex_row_end_start      { display: flex; flex-direction: row; justify-content: flex-end;     align-items: flex-start;   }
.flex_row_end_center     { display: flex; flex-direction: row; justify-content: flex-end;     align-items: center;       }
.flex_row_end_end        { display: flex; flex-direction: row; justify-content: flex-end;     align-items: flex-end;     }
.flex_row_end_stretch    { display: flex; flex-direction: row; justify-content: flex-end;     align-items: stretch;      }
.flex_row_end_baseline   { display: flex; flex-direction: row; justify-content: flex-end;     align-items: baseline;     }

.flex_row_between_start  { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;   }
.flex_row_between_center { display: flex; flex-direction: row; justify-content: space-between; align-items: center;       }
.flex_row_between_end    { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;     }
.flex_row_between_stretch{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch;      }
.flex_row_between_baseline{display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;     }

.flex_row_around_start   { display: flex; flex-direction: row; justify-content: space-around;  align-items: flex-start;   }
.flex_row_around_center  { display: flex; flex-direction: row; justify-content: space-around;  align-items: center;       }
.flex_row_around_end     { display: flex; flex-direction: row; justify-content: space-around;  align-items: flex-end;     }
.flex_row_around_stretch { display: flex; flex-direction: row; justify-content: space-around;  align-items: stretch;      }
.flex_row_around_baseline{ display: flex; flex-direction: row; justify-content: space-around;  align-items: baseline;     }

.flex_row_evenly_start   { display: flex; flex-direction: row; justify-content: space-evenly;  align-items: flex-start;   }
.flex_row_evenly_center  { display: flex; flex-direction: row; justify-content: space-evenly;  align-items: center;       }
.flex_row_evenly_end     { display: flex; flex-direction: row; justify-content: space-evenly;  align-items: flex-end;     }
.flex_row_evenly_stretch { display: flex; flex-direction: row; justify-content: space-evenly;  align-items: stretch;      }
.flex_row_evenly_baseline{ display: flex; flex-direction: row; justify-content: space-evenly;  align-items: baseline;     }

/* ---------- flex + column（纵向）---------- */
.flex_column_start_start    { display: flex; flex-direction: column; justify-content: flex-start;   align-items: flex-start;   }
.flex_column_start_center   { display: flex; flex-direction: column; justify-content: flex-start;   align-items: center;       }
.flex_column_start_end      { display: flex; flex-direction: column; justify-content: flex-start;   align-items: flex-end;     }
.flex_column_start_stretch  { display: flex; flex-direction: column; justify-content: flex-start;   align-items: stretch;      }
.flex_column_start_baseline { display: flex; flex-direction: column; justify-content: flex-start;   align-items: baseline;     }

.flex_column_center_start   { display: flex; flex-direction: column; justify-content: center;       align-items: flex-start;   }
.flex_column_center_center  { display: flex; flex-direction: column; justify-content: center;       align-items: center;       }
.flex_column_center_end     { display: flex; flex-direction: column; justify-content: center;       align-items: flex-end;     }
.flex_column_center_stretch { display: flex; flex-direction: column; justify-content: center;       align-items: stretch;      }
.flex_column_center_baseline{ display: flex; flex-direction: column; justify-content: center;       align-items: baseline;     }

.flex_column_end_start      { display: flex; flex-direction: column; justify-content: flex-end;     align-items: flex-start;   }
.flex_column_end_center     { display: flex; flex-direction: column; justify-content: flex-end;     align-items: center;       }
.flex_column_end_end        { display: flex; flex-direction: column; justify-content: flex-end;     align-items: flex-end;     }
.flex_column_end_stretch    { display: flex; flex-direction: column; justify-content: flex-end;     align-items: stretch;      }
.flex_column_end_baseline   { display: flex; flex-direction: column; justify-content: flex-end;     align-items: baseline;     }

.flex_column_between_start  { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;   }
.flex_column_between_center { display: flex; flex-direction: column; justify-content: space-between; align-items: center;       }
.flex_column_between_end    { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;     }
.flex_column_between_stretch{ display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;      }
.flex_column_between_baseline{display: flex; flex-direction: column; justify-content: space-between; align-items: baseline;     }

.flex_column_around_start   { display: flex; flex-direction: column; justify-content: space-around;  align-items: flex-start;   }
.flex_column_around_center  { display: flex; flex-direction: column; justify-content: space-around;  align-items: center;       }
.flex_column_around_end     { display: flex; flex-direction: column; justify-content: space-around;  align-items: flex-end;     }
.flex_column_around_stretch { display: flex; flex-direction: column; justify-content: space-around;  align-items: stretch;      }
.flex_column_around_baseline{ display: flex; flex-direction: column; justify-content: space-around;  align-items: baseline;     }

.flex_column_evenly_start   { display: flex; flex-direction: column; justify-content: space-evenly;  align-items: flex-start;   }
.flex_column_evenly_center  { display: flex; flex-direction: column; justify-content: space-evenly;  align-items: center;       }
.flex_column_evenly_end     { display: flex; flex-direction: column; justify-content: space-evenly;  align-items: flex-end;     }
.flex_column_evenly_stretch { display: flex; flex-direction: column; justify-content: space-evenly;  align-items: stretch;      }
.flex_column_evenly_baseline{ display: flex; flex-direction: column; justify-content: space-evenly;  align-items: baseline;     }