/* nav样式 */
.nav-link {
    position: relative;
}
.nav-link:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #4169E1;
    transition: width 0.3s ease;
}
.nav-link:hover:after {
    width: 100%;
}
/* 客服样式 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.floating-icon {
    animation: float 3s ease-in-out infinite;
  }
/* footer样式 */
  /* 渐变文字动画 */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .slogan-text {
  background: linear-gradient(135deg, 
    #3B82F6 10%,    /* 加强主色浓度 */
    #6366F1 30%,    /* 增加紫色过渡 */
    #8B5CF6 50%,    /* 加入更明显的紫色调 */
    #2563EB 70%,    /* 加深蓝色 */
    #1D4ED8 100%);  /* 使用更深的品牌蓝色 */
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;          /* 增加字重 */
  font-size: 1.4rem;          /* 调大字号 */
  letter-spacing: 1.2px;
  animation: gradientShift 1s ease infinite; 加快动画速度
  text-shadow: 0 2px 8px rgba(59,130,246,0.15); 使用同色系阴影
  padding: 0.3em 0.8em;       /* 增加内边距 */
  border-radius: 10px;
  position: relative;
  transition: all 0.3s ease;  添加过渡效果
}

/* 简化光泽效果 */
.slogan-text::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    30deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0) 80%
  );
  /* animation: shine 5s infinite; */
  opacity: 0.6; /* 降低光泽强度 */
}

@keyframes shine {
  0% { transform: translateX(-150%) rotate(25deg); }
  100% { transform: translateX(150%) rotate(25deg); }
}

/* 悬停增强效果 */
.slogan-text:hover {
  transform: scale(1.05);
  text-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
/* 模态框动画 */
#alertModal {
    transition: opacity 0.2s, visibility 0.2s;
}
#alertModal.active {
    display: flex !important;
}
/* #alertModal > div:last-child {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
} */
#alertModal.active > div:last-child {
    transform: scale(1);
    opacity: 1;
}
@media (max-width: 480px) {
    #alertModal > div:last-child {
        width: 90%;
        margin: 0 auto;
    }
}

#modalConfirm {
    transition: width 0.2s ease-in-out;
}