/* ===================================================================
   1.  浏览器默认样式
   =================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 去掉链接、列表、表格、表单默认样式 */
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, button, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }

/* 图片不溢出容器 */
img, picture { max-width: 100%; display: block; }

/* 禁止文本选中高亮（可选） */
::selection { background-color: #b3d4fc; color: #000; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* ===================================================================
   2. 全局基础元素字体 & 背景
   =================================================================== */
@font-face {
 font-family: 'NotoSans-regular';
 src: url(../fonts/NotoSansCJKjp-Regular.otf);
}
@font-face {
 font-family: 'NotoSans-bold';
 src: url(../fonts/NotoSansCJKjp-Bold.otf);
}
@font-face {
  font-family: 'NotoSans-medium';
  src: url(../fonts/NotoSansCJKjp-Medium.otf);
}
@font-face {
  font-family: 'NotoSerif-regular';
  src: url(../fonts/NotoSerifCJKjp-Regular.otf);
}
@font-face {
  font-family: 'NotoSerif-medium';
  src: url(../fonts/NotoSerifCJKjp-Medium.otf);
}
@font-face {
  font-family:"NotoSerif-black";
  src: url(../fonts/NotoSerifCJKjp-Black.otf);
}
body {
  font-family: 'NotoSans-regular' , sans-serif;
  line-height: 1.5;
  background-color: #fff;
  color: #333;
  min-height: 100vh;
  overflow-x: hidden;
}
/* ===================================================================
   3. CSS 自定义属性：方便用 vw 直接取值
   =================================================================== */
:root {
  /* 将 1vw 缓存到 --vw 里，使用时写 var(--vw) */
  --vw: 1vw;
  /* 也可以定义常用间距、色值等变量 */
  --space-sm: 0.8rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;

  --color-primary: #0070f3;
  --color-text: #333;
  --color-bg: #fff;
}

/* ===================================================================
   4. 常用辅助类（可按需增删）
   =================================================================== */
/* 水平垂直居中 */
.u-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 隐藏滚动条（移动端常用） */
.u-hide-scrollbar {
  -ms-overflow-style: none;  /* IE10+ */
  scrollbar-width: none;     /* Firefox */
}
.u-hide-scrollbar::-webkit-scrollbar {
  display: none;             /* Safari 和 Chrome */
}

/* 按钮基础样式 */
button {
  cursor: pointer;
  font-size: 1.4rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.4rem;
  background-color: var(--color-primary);
  color: #fff;
  transition: opacity 0.2s ease;
}
button:hover {
  opacity: 0.85;
}
/* 文字尺寸基准值 */
html {
 font-size: 16px;
}
h1 {
 font-size: 2rem; /* 32px */
}
p {
 font-size: 1rem; /* 16px */
}
/* ===================================================================
   5. 媒体查询更改根元素字体大小
   =================================================================== */
/* 中等屏幕 */
@media (max-width: 1440px) {
 html {
 font-size: 16px;
 }
}
/* 平板 */
@media (max-width: 1024px) {
 html {
  font-size: 14px;
 }
}
/* 手机 */
@media (max-width: 768px) {
 html {
  font-size: 12px;
 }
}