* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f5f5f5;
  font-family: 等线, Arial, Helvetica, sans-serif;
}
#container {
  width: 100%;
  height: 100%;
}
/* 顶部区域 - 自适应高度 */
#top {
  width: 100%;
  height: 20vw;
  max-height: 270px;
  display: flex;
}
#top1 {
  flex: 0 0 20vw;
  max-width: 270px;
  height: 100%;
  background-color: black;
  background-image: url(../images/fender_logo.svg);
  background-repeat: no-repeat;
  background-size: 75% 75%;
  background-position: center center;
}
#top2 {
  flex: 1;
  height: 100%;
  background-color: navy;
}
#top2_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ========== 原有样式 + 整合特效样式 ========== */
#nav {
  width: 100%;
  height: 6vh;
  min-height: 45px;
  background-color: #222;
  text-align: center;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#nav ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  height: 100%;
}
#nav ul li {
  height: 100%;
  width: clamp(80px, 12vw, 115px);
  list-style: none;
  float: left;
  position: relative;
  /* 关键：固定一级li的高度基准，二级菜单基于这个高度定位 */
}
#nav ul li a {
  color: white;
  text-shadow: 2px 2px 10px black;
  width: 100%;
  text-decoration: none;
  display: block;
  line-height: 6vh;
  min-height: 40px;
  position: relative;
  transition: color 0.2s ease;
}

/* ========== 特效1：hover 下划线从中间展开 ========== */
#nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: tomato;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
#nav ul li a:hover::after {
  width: 60%;
}

/* ========== 特效2：下拉菜单轻微上移展开 + 修复重叠 ========== */
#nav ul li ul {
  visibility: hidden;
  opacity: 0;
  transform: translateY(3px);
  position: absolute;
  top: 100%; /* 基于一级li的100%高度定位，不受line-height影响 */
  left: 0;
  width: 100%;
  /* 独立过渡，不依赖父级 */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  /* 关键：取消继承的height，避免被一级菜单高度影响 */
  height: auto;
}
#nav ul li ul li {
  width: 100%;
  height: 40px;
  /* 二级li高度固定，不受一级收缩影响 */
}
#nav ul li ul li a {
  border: 1px solid black;
  border-top: none;
  line-height: 40px; /* 二级链接行高固定 */
  font-size: 15px;
  background-color: hsla(0, 0%, 20%, 0.9);
  /* 关键：取消继承的min-height和line-height */
  min-height: unset;
}
#nav ul li a:hover {
  color: tomato;
}
#nav ul li ul li a:hover {
  background-color: hsla(0, 3%, 15%, 0.9);
}
#nav ul li:hover ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ========== 特效3：滚动高度微缩 + 背景加深 ========== */
#nav.scroll-shrink {
  height: 5vh;
  min-height: 40px;
  background-color: #1a1a1a;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}
/* 只调整一级链接的行高，二级不受影响 */
#nav.scroll-shrink > ul > li > a {
  line-height: 5vh;
}
#footer {
  display: flex;
  width: 100%;
  padding: clamp(20px, 2.5vw, 30px); /* 内边距从 40-60px 缩小到 20-30px */
  background: linear-gradient(135deg, #222, #111);
  color: #fff;
  margin-top: 3vh; /* 顶部间距从 5vh 缩小到 3vh */
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}
#mtc {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2;
  color: #ddd;
  text-align: center;
  margin-bottom: clamp(15px, 2vw, 20px); /* 底部间距从 30-40px 缩小到 15-20px */
}
/* 署名与版权 - 保持原有样式 */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#sign {
  font-size: clamp(16px, 2vw, 18px);
  color: #fff;
  font-family: 楷体, serif;
}
.footer-copyright {
  margin-left: auto;
  font-size: clamp(12px, 1.2vw, 14px);
  color: #aaa;
}
a {
  text-decoration: none;
  color: inherit;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .carousel-item {
    flex-direction: column;
    padding: clamp(10px, 3vw, 20px);
  }
  .item-text,
  .item-img {
    width: 100%;
    height: 50%;
  }
  .item-img img {
    max-height: 80%;
  }
  /* 移动端内容项改为纵向排列 */
  .left-item {
    flex-direction: column;
    text-align: center;
  }
  .item-img-sm {
    width: 100%;
    max-width: 200px;
  }
  /* 移动端 footer 改为纵向 */
  .footer-bottom {
    flex-direction: column;
    gap: 15px;
  }
}