/* ==========================================
   基础变量定义 (方便后续维护)
   ========================================== */
:root {
  /* 嘉庚瓦橙红色系 */
  --primary-color: #E86A3E;
  --primary-dark: #C45228;
  --base-transition: all 0.3s ease;
  --fast-transition: all 0.2s ease;
}
/* ==========================================
   导航栏样式
   ========================================== */
#nav-list a {
  position: relative;
  border-bottom: 3px solid transparent;
  transition: var(--base-transition);
}

#nav-list a:hover,
#nav-list a.active {
  border-bottom-color: var(--primary-color);
}

#nav-list a.active {
  color: var(--primary-color);
}

/* ==========================================
   下拉菜单 (响应式)
   ========================================== */
@media (min-width: 1024px) {
  .dropdown-parent:hover .dropdown-menu {
    display: block;
  }
  
  .dropdown-parent:hover .dropdown-icon {
    transform: rotate(180deg);
    transition: var(--base-transition);
  }
}

@media (max-width: 1023px) {
  /* 移动端下拉菜单 */
  .dropdown-parent.active .dropdown-menu {
    display: block;
  }
  
  .dropdown-parent.active .dropdown-icon {
    transform: rotate(180deg);
    transition: var(--base-transition);
  }

  /* 移动端导航列表展开 */
  #nav-list.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    z-index: 1000;
  }
}

/* ==========================================
   分页组件
   ========================================== */
.pagination {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0;
  flex-wrap: wrap; /* 提前兼容移动端换行 */
  justify-content: center;
}

.pagination a,
.pagination span,
.pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: var(--fast-transition);
  font-size: 1rem;
}

.pagination a {
  color: #4b5563; /* gray-600 */
  background: #f9fafb; /* gray-50 */
  border: 1px solid #e5e7eb; /* gray-200 */
}

.pagination a:hover {
  background: #f3f4f6; /* gray-100 */
}

/* 当前页样式 */
.pagination span,
.pagination a[aria-current="page"] {
  color: white;
  background: var(--primary-color);
  border: 1px solid var(--primary-dark);
  font-weight: 600;
}

/* 移动端分页优化 */
@media (max-width: 640px) {
  .pagination a {
    &:first-child,
    &:last-child {
      min-width: auto;
      padding: 0 1rem;
    }

    &:not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
      display: none;
    }

    &:nth-child(2),
    &:nth-last-child(2) {
      display: inline-flex;
    }
  }
}

/* ==========================================
   装饰类样式 (标题/页脚)
   ========================================== */
/* 区块标题下划线 */
.section-title h2 {
  position: relative; /* 补全父级定位，避免伪元素脱离 */
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background-color: var(--primary-color);
}

/* 页脚标题下划线 */
.footer-title {
  position: relative; /* 补全父级定位 */
}

.footer-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--primary-color);
}

/* 页脚链接前置圆点 */
.footer-links a {
  position: relative; /* 补全父级定位 */
  padding-left: 12px; /* 给圆点预留空间 */
}

.footer-links a::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

/* ==========================================
   交互组件样式
   ========================================== */
/* 专业卡片切换 */
.major-card {
  display: none;
}

.major-card.active {
  display: flex;
  animation: fadeIn 0.3s ease; /* 增加淡入动画 */
}

/* FAQ 折叠面板 */
.faq-answer {
  display: none;
  transition: var(--base-transition);
}

.faq-item.active .faq-answer {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* FAQ 图标旋转 */
.faq-icon {
  transition: var(--base-transition); /* 补全过渡动画 */
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* 回到顶部按钮 */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: var(--base-transition);
  /* 硬件加速，提升动画流畅度 */
  transform: translateZ(0);
  will-change: opacity, visibility;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* ==========================================
   自定义样式优化
   ========================================== */
/* 隐藏滚动条 (兼容多浏览器) */
.major-tabs {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

.major-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* 标签按钮激活态 */
.tab-btn.tab-active {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 专业卡片图片缩放动画 */
.major-img {
  transition: transform 0.5s ease; /* 独立控制缩放动画，更丝滑 */
  transform: translateZ(0); /* 硬件加速 */
}

.major-card:hover .major-img {
  transform: scale(1.1);
}

/* 文章内容样式 */
.article-content p {
  margin-bottom: 10px;
}

.article-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================
   通用动画 (复用)
   ========================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 强制让内容区所有图片居中 */
div[style*="max-width: 100%; width: 100%"] img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.foot_new {
  height: 55px;
  width: 100%;
  max-width: 750px;
  box-sizing: border-box;
  padding: 5px 11px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 0 15px #ccc;
}

.foot_new a {
  display: block;
  height: 45px;
  line-height: 45px;
  width: calc((100% - 11px)/2);
  float: left;
  text-align: center;
  border-radius: 6px;
  font-size: 16px;
  overflow: hidden;
}

.foot_new a.zxzx {
  margin-right: 11px;
  color: #ffff00;
  background: #d60000;
}

.foot_new a.dhzx {
  color: #fff;
  background: #0c97ee;
}

.foot_new a i {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 27px;
}

.foot_new a.zxzx i {
  background: url('../skin/default/images/qqzx.gif') no-repeat center center;
}

.foot_new a.dhzx i {
  background: url('../skin/default/images/dhzx.png') no-repeat center center;
  background-size: 90% 90%;
  transform: translateY(-2px);
}

.foot_new a em {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #ffff00;
  font-size: 12px;
  font-style: normal;
  color: #d60000;
  border-radius: 50%;
  margin-top: 7px;
  margin-left: 2px;
}

.foot_new a span {
  color: #ff0 !important;
}

.foot_new a:last-child span {
  color: #fff !important;
}