/* 页脚样式 */
/* 草 */
@font-face {
  font-family: 'MiSans-Bold';
  /* 统一字体家族名称，通过weight区分 */
  src: url('/fonts/subset/MiSans-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MiSans-Demibold';
  /* 统一字体家族名称，通过weight区分 */
  src: url('/fonts/subset/MiSans-Demibold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MiSans-Medium';
  /* 字体名称，后续调用使用 */
  src: url('/fonts/subset/MiSans-Medium.woff2') format('woff2');
  /* 字体文件路径 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* 优化字体加载体验 */
}

@font-face {
  font-family: 'MiSans-Light';
  /* 字体名称，后续调用使用 */
  src: url('/fonts/subset/MiSans-Light.woff2') format('woff2');
  /* 字体文件路径 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* 优化字体加载体验 */
}

/* 全局重置与字体 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.footer {
  --footer-min-height: 400px;
  z-index: 2;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera/Edge */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  user-select: none;
  /* 标准语法 */
  height: 50vh;
  min-height: var(--footer-min-height);
  width: 100vw;
  /* 背景色 */
  background-color: #000000;
  /* 防内容溢出 */
  overflow: hidden;
  /* 子容器居中 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  display: flex;
  position: relative
}

/* 内容主容器 */
.footer-content {
  height: 70%;
  width: 93.75%;
  /* 背景色 */
  background-color: #00000000;
  /* 防内容溢出 */
  overflow: hidden;
  position: relative; /* 绝对定位 */
}

/* 联系方式主容器 */
.footer-content-contact {
  height: auto;
  width: auto;
  max-width: 370px;
  /* 背景色 */
  background-color: #00000000;
}

/* 联系方式-tel */
.footer-content-contact-tel {
  /* 调用自定义字体 */
  font-family: 'MiSans-Medium', sans-serif;
  /* 字号 */
  font-size: 15px;
  /* 行高 */
  line-height: 15px;
  color: #ffffff;
  /* 间距 */
  padding: 0px 0;
}

/* 联系方式-号码 */
.footer-content-contact-tel-a {
  /* 调用自定义字体 */
  font-family: 'MiSans-Bold', sans-serif;
  /* 字号 */
  font-size: 47px;
  /* 行高 */
  line-height: 40px;
  color: #ffffff;
  /* 间距 */
  padding: 0px 0;
}

/* 联系方式-地址 */
.footer-content-contact-add {
  /* 调用自定义字体 */
  font-family: 'MiSans-Demibold', sans-serif;
  /* 字号 */
  font-size: 30px;
  /* 行高 */
  line-height: 30px;
  color: #ffffff;
  /* 间距 */
  padding: 15px 0;
}

/* 快捷链接主容器 */
.footer-content-link {
  /* 换行设置 */
  display: flex;
  /* 左对齐 */
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: auto;
  width: 370px;
  background-color: #00000000;
  /* 间距 */
  margin: 60px 0px 0px 0px;
}

/* 快捷链接-单列 */
.footer-content-link-column {
  display: flex;
  flex-direction: column;
  /* 垂直间距 */
  gap: 0px;
  height: auto;
  width: auto;
  width: 200px;
  background-color: #00000000;
}

/* 快捷链接-单个按钮 */
.footer-content-link-column-a {
  text-decoration: none;
  font-family: 'MiSans-Light', sans-serif;
  font-size: 18px;
  color: #ffffff;
  transition: color 0.2s ease;
  outline: none;
  /* 核心修改：将链接从块级改为行内元素，仅包裹文字 */
  display: inline-block;
  /* 确保点击范围严格跟随文字宽度 */
  width: fit-content;
  /* 可选：鼠标悬浮时显示手型，符合交互习惯 */
  cursor: pointer;
}

/* 光标悬浮效果 */
.footer-content-link-column-a:hover {
  color: #808080;
}

.footer-content-divider {
  /* 1. 绝对定位 */
  position: absolute;
  
  /* 2. 距离父级顶部 250px */
  top: 250px;
  
  /* 3. 横向铺满父级 */
  left: 0;
  right: 0;
  
  /* 4. 核心：实现 0.5px 高度（兼容性写法） */
  height: 1px;
  background-color: #ffffff00; /* 颜色按需修改，例如 #e5e5e5 */
  transform: scaleY(0.5); /* 垂直缩放 0.5 倍，物理像素更细 */
  transform-origin: top; /* 防止缩放后位置偏移 */
}

/* 社交媒体图标主容器 */
.footer-content-icon {
  position: absolute;
  top: 0;
  right: 0;

  /* 内部 2行4列 网格 */
  display: grid;
  grid-template-rows: 36px 36px;
  /* 2行，每行高度36px */
  grid-template-columns: repeat(4, 36px);
  /* 4列，每列36px */
  gap: 15px;
  /* 行列间距都 15px（你要的间距）*/
}

/* 图标容器尺寸与样式 */
.footer-content-icon-a {
  fill: #ffffff;
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 35px;
  /* 让字体图标垂直居中 */
  text-align: center;
  overflow: hidden;
  /* 防止内容溢出 */
  /* 关键：强制内容等比缩放，不拉伸、不变形 */
  object-fit: contain;
}

/* QR码主容器 */
.footer-content-qr {
  position: absolute;
  right: 0;
  top: calc(100px + 44px); /* 右上角高度 + 间距 */

  /* 一行 4 列 */
  display: grid;
  grid-template-columns: repeat(3, 82px);
  gap: 15px; /* C 之间间距 */
}

.footer-content-qr-a {
  width: 82px;
  height: 82px;
  background: rgba(255, 255, 255, 0);
}

.footer-content-qr-t {
  margin: 0;
  text-align: center;    /* 横向居中 */
  margin-top: 10px;     /* 与 C 间距 10px */
  font-size: 12px;      /* 字号 12px */
  color: #ffffff;
}

/* 备案与版权信息 */
/* 底部备案信息主容器 */
.footer-content-info {
  position: absolute;
  bottom: 25px;
  /* 与父容器底部 25px 边距 */
  left: 50%;
  /* 横向居中第一步 */
  transform: translateX(-50%);
  /* 横向居中第二步 */
  text-decoration: none;
  width: 93.75%;
  font-family: 'MiSans-Light', sans-serif;
  font-size: 14px;
  color: rgb(255, 255, 255);
  /* 间距 */
  margin: 30px 0px 0px 0px;
}

.footer-content-info-c {
  text-decoration: none;
  font-family: 'MiSans-Light', sans-serif;
  font-size: 14px;
  color: #8a8a8a;
  transition: color 0.2s ease;
  outline: none;
  /* 核心修改：将链接从块级改为行内元素，仅包裹文字 */
  display: inline-block;
  /* 确保点击范围严格跟随文字宽度 */
  width: fit-content;
  /* 间距 */
  margin: 0px 0px 0px 0px;
}

.footer-content-info-a {
  text-decoration: none;
  font-family: 'MiSans-Light', sans-serif;
  font-size: 14px;
  color: #8a8a8a;
  transition: color 0.2s ease;
  outline: none;
  text-align: left; /* 文字/内容靠左 */
  /* 核心修改：将链接从块级改为行内元素，仅包裹文字 */
  display: inline-block;
  /* 确保点击范围严格跟随文字宽度 */
  width: fit-content;
  /* 可选：鼠标悬浮时显示手型，符合交互习惯 */
  cursor: pointer;
  /* 间距 */
  margin: 0px 0px 0px 15px;
}

/* 光标悬浮效果 */
.footer-content-info-a:hover {
  color: #d4d4d4;
}

.footer.is-animated {
  transform: translateY(80px);
  will-change: transform;
}

.footer.is-animated .footer-content-contact,
.footer.is-animated .footer-content-link,
.footer.is-animated .footer-content-divider,
.footer.is-animated .footer-content-icon,
.footer.is-animated .footer-content-qr {
  opacity: 0;
  transform: translateY(48px);
  will-change: transform, opacity;
}

.footer.is-animated .footer-content-info {
  opacity: 0;
  transform: translateX(-50%) translateY(48px);
  will-change: transform, opacity;
}

/* 移动端适配 */
@media (max-width: 1080px) {

  /* 主容器 */
  .footer {
    --footer-min-height: 600px;
    height: 75vh;
    width: 100vw;
    /* 背景色 */
    background-color: #000000;
    /* 防内容溢出 */
    overflow: hidden;
    /* 子容器居中 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    display: flex;
    position: relative
  }

  /* 内容主容器 */
  .footer-content {
    height: 86%;
    width: 93.75%;
    /* 背景色 */
    background-color: #00000000;
    /* 防内容溢出 */
    overflow: hidden;
    position: relative;
    /* 绝对定位 */
  }
  /* 联系方式-tel */
  .footer-content-contact-tel {
    /* 调用自定义字体 */
    font-family: 'MiSans-Medium', sans-serif;
    /* 字号 */
    font-size: 15px;
    /* 行高 */
    line-height: 15px;
    color: #ffffff;
    /* 间距 */
    padding: 0px 0;
  }

  /* 联系方式-号码 */
  .footer-content-contact-tel-a {
    /* 调用自定义字体 */
    font-family: 'MiSans-Bold', sans-serif;
    /* 字号 */
    font-size: 37px;
    /* 行高 */
    line-height: 40px;
    color: #ffffff;
    /* 间距 */
    padding: 0px 0;
  }

  /* 联系方式-地址 */
  .footer-content-contact-add {
    /* 调用自定义字体 */
    font-family: 'MiSans-Demibold', sans-serif;
    /* 字号 */
    font-size: 20px;
    /* 行高 */
    line-height: 22px;
    color: #ffffff;
    /* 间距 */
    padding: 15px 0;
  }

  /* 快捷链接主容器 */
  .footer-content-link {
    /* 换行设置 */
    display: flex;
    /* 左对齐 */
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: auto;
    width: 370px;
    background-color: #00000000;
    /* 间距 */
    margin: 35px 0px 0px 0px;
  }

  /* 快捷链接-单列 */
  .footer-content-link-column {
    display: flex;
    flex-direction: column;
    /* 垂直间距 */
    gap: 0px;
    height: auto;
    width: auto;
    width: 200px;
    background-color: #00000000;
  }

  /* 快捷链接-单个按钮 */
  .footer-content-link-column-a {
    text-decoration: none;
    font-family: 'MiSans-Light', sans-serif;
    font-size: 16px;
    color: #ffffff;
    transition: color 0.2s ease;
    outline: none;
    /* 核心修改：将链接从块级改为行内元素，仅包裹文字 */
    display: inline-block;
    /* 确保点击范围严格跟随文字宽度 */
    width: fit-content;
    /* 可选：鼠标悬浮时显示手型，符合交互习惯 */
    cursor: pointer;
  }
  
  /* 分割线 */
  .footer-content-divider {
    /* 1. 绝对定位 */
    position: absolute;
    /* 2. 距离父级顶部 250px */
    top: 235px;
    /* 3. 横向铺满父级 */
    left: 0;
    right: 0;
    /* 4. 核心：实现 0.5px 高度（兼容性写法） */
    height: 1px;
    background-color: #ffffff36;
    /* 颜色按需修改，例如 #e5e5e5 */
    transform: scaleY(0.5);
    /* 垂直缩放 0.5 倍，物理像素更细 */
    transform-origin: top;
    /* 防止缩放后位置偏移 */
  }
  
  /* 社交媒体图标主容器 */
  .footer-content-icon {
    position: absolute;
    top: 260px;
    /* 距离上方容器 36px */
    left: 0;
    /* 相对父级靠左对齐 */
  
    /* 内部 2行4列 网格 */
    display: grid;
    grid-template-rows: 36px 36px;
    /* 2行，每行高度36px */
    grid-template-columns: repeat(4, 36px);
    /* 4列，每列36px */
    gap: 15px;
    /* 行列间距都 15px（你要的间距）*/
  }
  
  /* QR码主容器 */
  .footer-content-qr {
    position: absolute;
    top: 370px;
    /* 距离上方容器 36px */
    left: 0;
    /* 相对父级靠左对齐 */
  
    /* 行列 */
    display: grid;
    grid-template-columns: repeat(3, 82px);
    gap: 15px;
  }
  
  /* 备案与版权信息 */
  /* 底部备案信息主容器 */
  .footer-content-info {
    position: absolute;
    bottom: 15px;
    /* 与父容器底部 25px 边距 */
    left: 50%;
    /* 横向居中第一步 */
    transform: translateX(-50%);
    /* 横向居中第二步 */
    text-decoration: none;
    width: 93.75%;
    font-family: 'MiSans-Light', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0);
    /* 间距 */
    margin: 30px 0px 0px 0px;
  }
  
  .footer-content-info-c {
    text-decoration: none;
    font-family: 'MiSans-Light', sans-serif;
    font-size: 12px;
    color: #8a8a8a;
    transition: color 0.2s ease;
    outline: none;
    /* 核心修改：将链接从块级改为行内元素，仅包裹文字 */
    display: inline-block;
    /* 确保点击范围严格跟随文字宽度 */
    width: fit-content;
    /* 间距 */
    margin: 0px 0px 0px 0px;
  }
  
  .footer-content-info-a {
    text-decoration: none;
    font-family: 'MiSans-Light', sans-serif;
    font-size: 12px;
    color: #8a8a8a;
    transition: color 0.2s ease;
    outline: none;
    text-align: left;
    display: block; 
    /* 确保点击范围严格跟随文字宽度 */
    width: fit-content;
    /* 可选：鼠标悬浮时显示手型，符合交互习惯 */
    cursor: pointer;
    /* 间距 */
    margin: 0px 0px 0px 0px;
  }
}

/* 手机端沿用紧凑布局，但单独保留内容高度下限，便于独立适配。 */
@media (max-width: 600px) {
  .footer {
    --footer-min-height: 600px;
  }
}