/* 按钮 悬停 线条动画 */
.animated-btn-01 {
    position: relative;
    transition: transform 0.3s ease;
}

.animated-btn-01::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #666666;
    transition: width 0.5s ease-out, 
                left 0.5s ease-out; /* 多个过渡属性分行显示，更易读 */
}

.animated-btn-01:hover {
    transform: translateY(-1px);
}

.animated-btn-01:hover::after {
    width: 100%;
    left: 0;
}

/* 按钮 悬停 圆形扩大动画 */
.animated-btn-02 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 圆形扩展效果元素 */
.animated-btn-02::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 0;
    height: 0;
    background-color: #e60012; /* 补充冒号后空格 */
    border-radius: 50%;
    transform: translate(-10%, -50%);
    transition: width 0.6s ease, 
                height 0.6s ease; /* 长属性分行，逗号后加空格 */
    z-index: -1; 
}

.animated-btn-02:hover {
    color: #ffffff !important;
}

.animated-btn-02:hover::before {
    width: 400px;
    height: 400px;
}

/* 按钮 悬停 箭头移动 */
.animated-btn-03 {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.animated-btn-03 .btn-inner {
    display: inline-flex;
    align-items: center;
    transition: transform 0.4s ease;
}

.animated-btn-03 .btn-text {
    transition: transform 0.4s ease;
}

.animated-btn-03 .left-arrow {
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateX(-10px);
}

.animated-btn-03 .right-arrow {
    transition: all 0.4s ease;
    opacity: 1;
    transform: translateX(0);
}

/* Hover 效果 */
.animated-btn-03:hover .btn-inner {
    transform: translateX(18px);
}

.animated-btn-03:hover .left-arrow {
    opacity: 1;
    transform: translateX(0);
}

.animated-btn-03:hover .right-arrow {
    opacity: 0;
    transform: translateX(10px);
}


/* 按钮 悬停 箭头右移 */
.animated-btn-04 {
    transition: gap 0.4s ease; /* 关键：gap属性过渡动画 */
}
.animated-btn-04:hover {
    gap: 38px !important; /* 初始8px + 增加20px = 28px */
}


/* 开始 菜单控制 */
.my-nav-top-section .brxe-dropdown .brx-submenu-toggle span {
  font-weight: 400;
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}
.my-nav-top-section .brxe-dropdown:hover .brx-submenu-toggle span {
  color: #e60012;
}
.my-nav-top-section .brxe-dropdown .brx-submenu-toggle button {
  display: none;
}
.my-nav-top-section .brxe-dropdown .brx-dropdown-content {
  box-shadow: 0 10px 24px 0 rgba(149, 157, 165, 0.1);
  border-radius: 10px;
}
.my-nav-top-section .brxe-dropdown .brx-dropdown-content > li {
  border-bottom: 1px solid #f2f2f2;
}
.my-nav-top-section .brxe-dropdown .brx-dropdown-content > li > a {
  justify-content: center;
  padding: 10px 10px; /* 简写属性 */
  border-radius: 10px;
  margin: 6px;
  transition: background-color 0.3s ease; 
}
.my-nav-top-section .brxe-dropdown .brx-dropdown-content > li > a:hover {
  background-color: #fff100; 
}
/* 按钮 悬停 线条动画 */
.my-nav-top-section .brxe-dropdown {
    position: relative;
}

.my-nav-top-section .brxe-dropdown::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #e60012;
    transition: width 0.5s ease-out, 
                left 0.5s ease-out; /* 多个过渡属性分行显示，更易读 */
}

.my-nav-top-section .brxe-dropdown:hover::after {
    width: 100%;
    left: 0;
}

/* 结束 菜单控制 */

.backdrop-filter-01 {
backdrop-filter: blur(10px); /* 背景模糊 */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
}

.box-shadow-01 {
  box-shadow: rgba(150, 170, 180, 0.50) 0px 7px 30px -10px;
}
.box-shadow-02 {
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.box-shadow-03 {
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}