/* 导航按钮 */
.animation-button {
    width: 7rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.5s;
    text-decoration: none;
}
.animation-button span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.5s;
}
.animation-button span:after {
    content: '\00BB';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -1rem;
    transition: 0.5s;
}
.animation-button:hover span {
    padding-right: 1.25rem;
} 
.animation-button:hover span:after {
    opacity: 1;
    right: -0.25rem;
}

/* 文章转跳按钮 */
.animation-button-article {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    border: 1px solid #333333;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    font-size: 0.95rem;
    color: #212529;
    z-index: 1;
    text-decoration: none;
}
.animation-button-article:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
.animation-button-article:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #1d5098;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
.animation-button-article:hover {
    color: #ffffff;
    border: 1px solid #1d5098;
}
.animation-button-article:hover:before {
    top: -35%;
    background-color: #1d5098;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.animation-button-article:hover:after {
    top: -45%;
    background-color: #1d5098;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/* 循环滚动 */
#loop-scroll .scroll-item{margin-right: 1.25rem;}
#loop-scroll img{width: 4.5rem; height:4.5rem; object-fit: cover; box-shadow: 1px 1px 10px #00000011; border-radius: 1rem;}

/* 元素上下晃动 */
@keyframes updownBounce {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-15px);}
}
.animation-updown-bounce {animation: updownBounce 2s ease-in-out infinite;}

/* 导航栏（城市按钮） */
/* 基础样式重置与通用设置 */
.btn-77,
.btn-77 *,
.btn-77 :after,
.btn-77 :before,
.btn-77:after,
.btn-77:before {
  border: 0 solid;
  box-sizing: border-box;
}
/* 按钮基础样式 */
.btn-77 {
  -webkit-tap-highlight-color: transparent; /* 禁用移动端点击高亮 */
  -webkit-appearance: button; /* 使元素表现为按钮 */
  background-color: #3273b099; /* 半透明的蓝色背景 */
  background-image: none;
  color: #fff; /* 白色文字 */
  cursor: pointer; /* 鼠标悬停显示指针 */
  font-size: 0.95rem; /* 字体大小继承父元素 */
  line-height: 1.5; /* 行高 */
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff); /* WebKit 浏览器的遮罩 */
}
/* 特殊状态处理 */
.btn-77:disabled {
  cursor: default; /* 禁用状态下显示默认光标 */
}
.btn-77:-moz-focusring {
  outline: auto; /* Firefox 浏览器的聚焦样式 */
}
.btn-77 svg {
  display: block; /* SVG 元素块级显示 */
  vertical-align: middle; /* 垂直居中 */
}
.btn-77 [hidden] {
  display: none; /* 隐藏带有 hidden 属性的元素 */
}
/* 核心样式和动画 */
.btn-77 {
  -webkit-animation: pulse 2s infinite; /* WebKit 浏览器的脉冲动画 */
  animation: pulse 2s infinite; /* 标准脉冲动画，2秒循环一次 */
  border: 1px solid; /* 1px 边框 */
  border-radius: 999px; /* 非常大的值，确保按钮是圆形或圆角矩形 */
  box-shadow: 0 0 0 2em transparent; /* 初始透明阴影 */
  box-sizing: border-box;
  display: block; /* 块级元素 */
  font-weight: bold; /* 粗体 */
  -webkit-mask-image: none;
  overflow: hidden; /* 溢出隐藏 */
  position: relative;
  text-transform: uppercase; /* 文字大写 */
}
/* 脉冲动画定义 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}