@charset "UTF-8";
@media screen and (max-width: 960px) {
  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  .marquee-content {
    display: inline-flex;
    /* 水平排列图片 */
    animation: scroll-left 15s linear infinite;
  }
  .marquee-image {
    width: 80px;
    height: 50px;
    margin-right: 10px;
    /* 图片间距 */
    vertical-align: middle;
    object-fit: contain;
    border-radius: 6px;
    padding: 6px;
  }
  /* 定义跑马灯动画 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    /* 从中间开始 */
    100% {
      transform: translateX(-50%);
    }
    /* 滚动到一半 */
  }
  .arrow-container {
    display: inline-block;
    perspective: 500.0px;
    /* 给箭头添加3D空间感 */
  }
  .arrow {
    width: 14.0px;
    height: 14.0px;
    background-color: transparent;
    border: solid black;
    border-width: 0 3.0px 3.0px 0;
    display: inline-block;
    padding: 1.5px;
    transform: rotate(45deg);
    /* 初始状态为斜向下的箭头 */
    transition: transform 0.6s ease;
    /* 平滑过渡效果 */
  }
  .arrowAct {
    width: 14.0px;
    height: 14.0px;
    background-color: transparent;
    border: solid #fff;
    border-width: 0 3.0px 3.0px 0;
    display: inline-block;
    padding: 1.5px;
    transform: rotate(225deg);
    /* 初始状态为斜向下的箭头 */
    transition: transform 0.6s ease;
    /* 平滑过渡效果 */
  }
  .takeBox {
    padding: 40.0px 0;
  }
  .lineNei {
    width: 100%;
    height: 56.0px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 3px 49px 9px rgba(0, 0, 0, 0.06);
    border-radius: 15.0px;
    cursor: pointer;
    padding: 0 14.0px;
    transition: all 0.6s ease;
    /* 平滑过渡效果 */
    margin-bottom: 12.5px;
    overflow: hidden;
  }
  .lineBox {
    margin: 8.0px 0;
    padding: 0 24.0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    height: 56.0px;
    box-shadow: inset 0 0 7.0px 0.0px #D1C4E9;
    overflow: hidden;
    /* 隐藏超出部分 */
    position: relative;
    border-radius: 15.0px;
    /* 圆角 */
    transition: background-color 0.3s ease;
    /* 可选：背景颜色平滑过渡 */
  }
  /* 初始状态的伪元素 */
  .lineBox::before {
    content: '';
    width: 463.0px;
    /* 和容器宽度一致 */
    height: 104.0px;
    /* 和容器高度一致 */
    background: linear-gradient(169deg, #B2EBF2 0%, #D1C4E9 100%);
    /* 渐变色块 */
    position: absolute;
    top: 0;
    left: -463.0px;
    /* 初始位置在左侧外 */
    transition: left 0.5s ease;
    /* 平滑过渡效果 */
    z-index: 1;
    /* 确保伪元素在内容下方 */
  }
  /* 鼠标悬停时的状态 */
  .lineBox:hover::before {
    left: 0;
    /* 移动到完全覆盖容器 */
  }
  /* 使用伪元素创建流动边框 */
  .workBox::before {
    content: '';
    position: absolute;
    top: -4.0px;
    /* 向上偏移以覆盖原始边框 */
    left: -4.0px;
    /* 向左偏移以覆盖原始边框 */
    right: -4.0px;
    /* 向右偏移以覆盖原始边框 */
    bottom: -4.0px;
    /* 向下偏移以覆盖原始边框 */
    background: linear-gradient(90deg, #F2EFF9, rgba(195, 189, 255, 0.35), #F2EFF9);
    background-size: 200% 100%;
    /* 背景大小 */
    animation: flowBorder 3s infinite linear;
    /* 动画 */
    z-index: -1;
    /* 确保伪元素在内容下方 */
  }
  /* 定义动画 */
  @keyframes flowBorder {
    0% {
      background-position: -100% 0;
      /* 初始位置 */
    }
    100% {
      background-position: 100% 0;
      /* 最终位置 */
    }
  }
  .workBox {
    padding: 32.0px 0;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会溢出 */
  }
  .workBox .line {
    width: 100%;
    height: 66.5px;
    border: 1px dashed #651FFF;
    position: relative;
  }
  .workBox .line .tag {
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    width: 146.0px;
    height: 42.0px;
    background: #FFFFFF;
    border-radius: 57.0px;
    text-align: center;
    line-height: 42.0px;
    font-size: 12.0px;
    position: absolute;
  }
  .workBox .how {
    width: 140.0px;
    height: 42.0px;
    background: #FFFFFF;
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    border-radius: 33.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.0px;
    margin: 0 auto;
    margin-bottom: 26.0px;
  }
  .workBox .how img {
    width: 16.0px;
    height: 22.0px;
    margin-left: 2.0px;
  }
  .workBox .gradient-text {
    font-size: 20.0px;
    text-align: center;
    background: linear-gradient(0deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: moveGradient 5s infinite ease-in-out alternate;
  }
  @keyframes moveGradient {
    0% {
      background: linear-gradient(0deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    100% {
      background: linear-gradient(9deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .group {
    padding: 16.0px 14.0px;
  }
  .group .groupBox {
    width: 100%;
    background-image: url("./img/group2Wap.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .group .groupBox .qBox {
    width: 280.0px;
    height: 200.0px;
    border-radius: 30.0px;
    background: #C3BDFF;
    background: #C3BDFF;
    padding: 25.0px 31.0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.0px;
  }
  .group .groupBox .qian {
    width: 100.0px;
    height: 30.0px;
    background: #FFFFFF;
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    border-radius: 10.0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.0px;
    position: relative;
    z-index: 2;
  }
  .group .groupBox .qian .dian {
    width: 10.0px;
    height: 10.0px;
    background: #C3BDFF;
    border-radius: 50%;
    margin-right: 8.0px;
  }
  .boxR {
    width: 151.0px;
    height: 151.0px;
    background: linear-gradient(180deg, #DAE2F6 0%, #EBF5FF 100%);
    border-radius: 30.0px;
    position: relative;
  }
  .boxR .ren {
    width: 100.0px;
    position: absolute;
    bottom: 0.0px;
    right: 20.0px;
  }
  /* 头像样式 */
  .avatar {
    position: absolute;
    width: 40.0px;
    height: 40.0px;
    background-color: #ccc;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }
  /* 气球悬浮动画 */
  .balloon {
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  /* 动画关键帧 */
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
      /* 浮动高度可以根据需求调整 */
    }
  }
  .webBox {
    width: 100%;
    padding: 20.0px 14.0px;
    background: url("./img/bei3.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
  .p1 {
    position: absolute;
    width: 296.0px;
    height: 354.0px;
    top: 0;
    right: -32.0px;
  }
  .p2 {
    position: absolute;
    width: 260.0px;
    height: 321.0px;
    top: 13.0px;
    left: 0.0px;
  }
  .p3 {
    position: absolute;
    width: 332.0px;
    height: 371.0px;
    top: 0.0px;
    left: -78.0px;
  }
  .gray {
    width: 110.0px;
    height: 116.0px;
    background: #F5F6F8;
    border-radius: 10.0px;
    padding: 7.0px;
    font-size: 9.0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }
  .gray:hover {
    box-shadow: 0 0 10.0px 0.0px #C3BDFF;
  }
  .gray img {
    width: 42.0px;
    height: 42.0px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 11.0px;
  }
  .grid .item {
    width: 100%;
    padding: 20.0px;
    position: relative;
    background-color: #fff;
    border-radius: 20.0px;
    transition: all 0.3s;
    cursor: pointer;
  }
  .grid .item:hover {
    box-shadow: 0 0 10.0px 0.0px #C3BDFF;
  }
  .grid .item .zn {
    width: 20.0px;
    height: 20.0px;
    position: absolute;
    right: 14.0px;
    bottom: 14.0px;
  }
  .grid .item img {
    width: 50.0px;
    height: 50.0px;
  }
  .label {
    cursor: pointer;
    padding: 6.0px;
    font-size: 12.0px;
    background: #FFFFFF;
    border-radius: 50.0px;
    margin: 5.5px;
  }
  .labelAct {
    cursor: pointer;
    padding: 6.0px;
    font-size: 12.0px;
    background: linear-gradient(315deg, #20DEFF 0%, #F31CFB 100%);
    color: #fff;
    border-radius: 50.0px;
    margin: 5.5px;
  }
  .btn {
    width: 120.0px;
    height: 38.0px;
    background: linear-gradient(315deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    font-size: 12.0px;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会超出容器 */
    z-index: 1;
    /* 确保内容在背景之上 */
  }
  /* 流光的伪元素 */
  .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    /* 调整起始位置 */
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    /* 调整透明度 */
    transform: rotate(45deg);
    filter: blur(15px);
    /* 增加模糊效果 */
    animation: moveGlow 2s ease-in-out infinite;
    /* 减少持续时间以加快切换速度 */
    z-index: -1;
    /* 让它在背景层 */
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
      /* 向上移动 */
    }
    100% {
      transform: translateY(0);
    }
  }
  .cBox {
    width: 270.0px;
    height: 80.0px;
    background: #5A45EF;
    margin-left: 7.0px;
    border-radius: 30.0px 0 0 0;
    padding: 16.0px;
    overflow: hidden;
    z-index: 2;
    position: relative;
  }
  .box {
    cursor: pointer;
    width: 162.0px;
    height: 42.0px;
    background: linear-gradient(315deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    box-shadow: 0.0px 10.0px 19.0px 0.0px #CBE2FF;
    border-radius: 3.0px;
    margin-top: 20.0px;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会超出容器 */
    z-index: 1;
    /* 确保内容在背景之上 */
  }
  /* 流光的伪元素 */
  .box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    /* 调整起始位置 */
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    /* 调整透明度 */
    transform: rotate(45deg);
    filter: blur(15px);
    /* 增加模糊效果 */
    animation: moveGlow 2s ease-in-out infinite;
    /* 减少持续时间以加快切换速度 */
    z-index: -1;
    /* 让它在背景层 */
  }
  @keyframes moveGlow {
    0% {
      left: -150%;
    }
    100% {
      left: 150%;
      /* 提高终点位置让移动更明显 */
    }
  }
  .box1 {
    width: 88.0px;
    height: 80.0px;
    background: #C3BDFF;
    padding: 10.0px 5.0px;
    margin-left: 9.0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 5.0px;
    position: relative;
  }
  .box1 .fang {
    width: 83.0px;
    height: 88.0px;
    position: absolute;
    bottom: 40.0px;
    animation: float 3s infinite ease-in-out;
  }
  .zi {
    position: absolute;
    left: 0;
  }
  .fei {
    position: absolute;
    width: 47.0px;
    height: 46.0px;
    right: 17.0px;
    top: 37.0px;
  }
  .fei2 {
    position: absolute;
    width: 96.0px;
    height: 44.0px;
    right: 0;
    top: 155.0px;
    animation: float 3.6s infinite ease-in-out;
  }
  .fei3 {
    position: absolute;
    width: 87.0px;
    height: 42.0px;
    right: 0;
    bottom: 20%;
    animation: float 2.3s infinite ease-in-out;
  }
  .phone {
    width: 100%;
    display: flex;
    justify-content: center;
    background: url(./img/bei2Wap.png) no-repeat;
    background-size: 100% 100%;
    background-position: left;
  }
}

@media screen and (min-width: 960px) {
  .actName {
    color: #5A45EF;
    font-weight: bold;
  }
  .hover {
    cursor: pointer;
    margin: 0 10px;
  }
  .hover:hover .line:after {
    width: 100%;
  }
  .hover .line {
    position: relative;
  }
  .hover .line:after {
    content: '';
    position: absolute;
    bottom: -12px;
    /* 调整此值以适应你的设计 */
    left: 0;
    width: 0;
    height: 1px;
    /* 下划线厚度 */
    background-color: #666666;
    transition: width 0.3s ease-in-out;
  }
  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin-top: 50.0px;
  }
  .marquee-content {
    display: inline-flex;
    /* 水平排列图片 */
    animation: scroll-left 15s linear infinite;
  }
  .marquee-image {
    width: 160px;
    height: 100px;
    margin-right: 25px;
    /* 图片间距 */
    vertical-align: middle;
    object-fit: contain;
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .marquee-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  /* 定义跑马灯动画 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    /* 从中间开始 */
    100% {
      transform: translateX(-50%);
    }
    /* 滚动到一半 */
  }
  .arrow-container {
    display: inline-block;
    perspective: 500.0px;
    /* 给箭头添加3D空间感 */
  }
  .arrow {
    width: 25.0px;
    height: 25.0px;
    background-color: transparent;
    border: solid black;
    border-width: 0 3.0px 3.0px 0;
    display: inline-block;
    padding: 1.5px;
    transform: rotate(45deg);
    /* 初始状态为斜向下的箭头 */
    transition: transform 0.6s ease;
    /* 平滑过渡效果 */
  }
  .arrowAct {
    width: 25.0px;
    height: 25.0px;
    background-color: transparent;
    border: solid #fff;
    border-width: 0 3.0px 3.0px 0;
    display: inline-block;
    padding: 1.5px;
    transform: rotate(225deg);
    /* 初始状态为斜向下的箭头 */
    transition: transform 0.6s ease;
    /* 平滑过渡效果 */
  }
  .takeBox {
    padding: 84px 0;
  }
  .lineNei {
    width: 100%;
    height: 90.5px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 3px 49px 9px rgba(0, 0, 0, 0.06);
    border-radius: 30.0px;
    cursor: pointer;
    padding: 0 45.0px;
    transition: all 0.6s ease;
    /* 平滑过渡效果 */
    margin-bottom: 25.0px;
    overflow: hidden;
  }
  .lineBox {
    margin-bottom: 59px;
    padding: 0 30.0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 463.0px;
    height: 104.0px;
    box-shadow: inset 0 0 7.0px 0.0px #D1C4E9;
    overflow: hidden;
    /* 隐藏超出部分 */
    position: relative;
    border-radius: 30.0px;
    /* 圆角 */
    transition: background-color 0.3s ease;
    /* 可选：背景颜色平滑过渡 */
  }
  /* 初始状态的伪元素 */
  .lineBox::before {
    content: '';
    width: 463.0px;
    /* 和容器宽度一致 */
    height: 104.0px;
    /* 和容器高度一致 */
    background: linear-gradient(169deg, #B2EBF2 0%, #D1C4E9 100%);
    /* 渐变色块 */
    position: absolute;
    top: 0;
    left: -463.0px;
    /* 初始位置在左侧外 */
    transition: left 0.5s ease;
    /* 平滑过渡效果 */
    z-index: 1;
    /* 确保伪元素在内容下方 */
  }
  /* 鼠标悬停时的状态 */
  .lineBox:hover::before {
    left: 0;
    /* 移动到完全覆盖容器 */
  }
  /* 使用伪元素创建流动边框 */
  .workBox::before {
    content: '';
    position: absolute;
    top: -4.0px;
    /* 向上偏移以覆盖原始边框 */
    left: -4.0px;
    /* 向左偏移以覆盖原始边框 */
    right: -4.0px;
    /* 向右偏移以覆盖原始边框 */
    bottom: -4.0px;
    /* 向下偏移以覆盖原始边框 */
    background: linear-gradient(90deg, #F2EFF9, rgba(195, 189, 255, 0.35), #F2EFF9);
    background-size: 200% 100%;
    /* 背景大小 */
    animation: flowBorder 3s infinite linear;
    /* 动画 */
    z-index: -1;
    /* 确保伪元素在内容下方 */
  }
  /* 定义动画 */
  @keyframes flowBorder {
    0% {
      background-position: -100% 0;
      /* 初始位置 */
    }
    100% {
      background-position: 100% 0;
      /* 最终位置 */
    }
  }
  .workBox {
    padding: 82.0px 0;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会溢出 */
  }
  .workBox .line {
    width: 1140.5px;
    height: 172.5px;
    border: 4.0px dashed #651FFF;
    position: relative;
  }
  .workBox .line .tag {
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    width: 420.0px;
    height: 100.0px;
    background: #FFFFFF;
    border-radius: 57.0px;
    text-align: center;
    line-height: 100.0px;
    font-size: 20.0px;
    position: absolute;
  }
  .workBox .how {
    width: 210.0px;
    height: 67.0px;
    background: #FFFFFF;
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    border-radius: 33.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20.0px;
    margin-bottom: 18.0px;
    margin: 0 auto;
  }
  .workBox .how img {
    width: 21.0px;
    height: 31.0px;
    margin-left: 5.0px;
  }
  .workBox .gradient-text {
    font-size: 48.0px;
    text-align: center;
    background: linear-gradient(0deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: moveGradient 5s infinite ease-in-out alternate;
  }
  @keyframes moveGradient {
    0% {
      background: linear-gradient(0deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    100% {
      background: linear-gradient(9deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .group {
    padding: 50.0px 0;
  }
  .group .groupBox {
    width: 818.0px;
    height: 753.0px;
    background-image: url("./img/group2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .group .groupBox .qBox {
    width: 484.0px;
    height: 361.0px;
    border-radius: 60.0px;
    background: #C3BDFF;
    padding: 50.0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16.0px;
  }
  .group .groupBox .qian {
    width: 240.0px;
    border-radius: 20.0px;
    height: 70.0px;
    background: #FFFFFF;
    box-shadow: 0px 9px 26px 0px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17.0px;
    position: relative;
    z-index: 2;
  }
  .group .groupBox .qian .dian {
    width: 14.0px;
    height: 14.0px;
    background: #C3BDFF;
    border-radius: 50%;
    margin-right: 18.0px;
  }
  .boxR {
    width: 382.0px;
    height: 432.0px;
    background: linear-gradient(180deg, #DAE2F6 0%, #EBF5FF 100%);
    border-radius: 30.0px;
    margin-left: 130.0px;
    position: relative;
  }
  .boxR .ren {
    width: 338.0px;
    height: 647.0px;
    position: absolute;
    bottom: -58px;
    right: 10.0px;
  }
  /* 头像样式 */
  .avatar {
    position: absolute;
    width: 40.0px;
    height: 40.0px;
    background-color: #ccc;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }
  /* 气球悬浮动画 */
  .balloon {
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  /* 动画关键帧 */
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-10px);
      /* 浮动高度可以根据需求调整 */
    }
  }
  .webBox {
    width: 100%;
    padding: 84px 0;
    background: url("./img/bei3.png") no-repeat;
    background-size: cover;
    background-position: center;
  }
  .p1 {
    position: absolute;
    width: 470.0px;
    height: 585.0px;
    top: 0;
    right: 0;
  }
  .p2 {
    position: absolute;
    width: 400.0px;
    height: 534.0px;
    top: 50.0px;
    right: 100.0px;
  }
  .p3 {
    position: absolute;
    width: 520.0px;
    height: 615.0px;
    top: 0;
  }
  .gray {
    width: 240.0px;
    height: 198.0px;
    background: #F5F6F8;
    border-radius: 10.0px;
    padding: 24.0px;
    font-size: 18.0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }
  .gray:hover {
    box-shadow: 0 0 10.0px 0.0px #C3BDFF;
  }
  .gray img {
    width: 60.0px;
    height: 60.0px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32.0px;
  }
  .grid .item {
    width: 100%;
    padding: 20.0px;
    height: 220.0px;
    position: relative;
    background-color: #fff;
    border-radius: 20.0px;
    transition: all 0.3s;
    cursor: pointer;
  }
  .grid .item:hover {
    box-shadow: 0 0 10.0px 0.0px #C3BDFF;
  }
  .grid .item .zn {
    width: 24.0px;
    height: 24.0px;
    position: absolute;
    right: 20.0px;
    bottom: 20.0px;
  }
  .grid .item img {
    width: 80px;
    height: 80px;
  }
  .label {
    cursor: pointer;
    padding: 12.0px 15.0px;
    font-size: 18.0px;
    background: #FFFFFF;
    border-radius: 50.0px;
    margin: 10.0px;
  }
  .labelAct {
    cursor: pointer;
    padding: 12.0px 15.0px;
    font-size: 18.0px;
    background: linear-gradient(315deg, #20DEFF 0%, #F31CFB 100%);
    color: #fff;
    border-radius: 50.0px;
    margin: 10.0px;
  }
  .btn {
    width: 189.0px;
    height: 67.0px;
    background: linear-gradient(315deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    font-size: 18.0px;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会超出容器 */
    z-index: 1;
    /* 确保内容在背景之上 */
  }
  /* 流光的伪元素 */
  .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    /* 调整起始位置 */
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.5);
    /* 调整透明度 */
    transform: rotate(45deg);
    filter: blur(15px);
    /* 增加模糊效果 */
    animation: moveGlow 2s ease-in-out infinite;
    /* 减少持续时间以加快切换速度 */
    z-index: -1;
    /* 让它在背景层 */
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
      /* 向上移动 */
    }
    100% {
      transform: translateY(0);
    }
  }
  .cBox {
    width: 65%;
    height: 285.0px;
    background: #5A45EF;
    margin-left: 60.0px;
    border-radius: 60.0px 0 0 0;
    padding: 46.0px;
    overflow: hidden;
    z-index: 2;
    position: relative;
  }
  .box {
    cursor: pointer;
    width: 240.0px;
    height: 67.0px;
    background: linear-gradient(315deg, #8978FF 0%, #5A45EF 51%, #250282 100%);
    box-shadow: 0.0px 10.0px 19.0px 0.0px #ffffff;
    border-radius: 3.0px;
    margin-top: 40.0px;
    position: relative;
    overflow: hidden;
    /* 确保伪元素不会超出容器 */
    z-index: 1;
    /* 确保内容在背景之上 */
  }
  /* 流光的伪元素 */
  .box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    /* 调整起始位置 */
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.5);
    /* 调整透明度 */
    transform: rotate(45deg);
    filter: blur(15px);
    /* 增加模糊效果 */
    animation: moveGlow 2s ease-in-out infinite;
    /* 减少持续时间以加快切换速度 */
    z-index: -1;
    /* 让它在背景层 */
  }
  @keyframes moveGlow {
    0% {
      left: -150%;
    }
    100% {
      left: 150%;
      /* 提高终点位置让移动更明显 */
    }
  }
  .box1 {
    width: 254.0px;
    height: 255.0px;
    background: #C3BDFF;
    padding: 25.0px 15.0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 15.0px;
    position: relative;
  }
  .box1 .fang {
    width: 246.0px;
    height: 259.0px;
    position: absolute;
    bottom: 120.0px;
    animation: float 3s infinite ease-in-out;
  }
  .zi {
    width: 50%;
    padding-left: 10%;
  }
  .zi .title {
    font-size: 72px;
  }
  .fei {
    position: absolute;
    width: 104.0px;
    height: 101.0px;
    right: 10%;
    top: 10%;
    animation: float 3.6s infinite ease-in-out;
  }
  .fei2 {
    position: absolute;
    width: 330.0px;
    height: 151.0px;
    right: 0;
    animation: float 3.6s infinite ease-in-out;
  }
  .fei3 {
    position: absolute;
    width: 286.0px;
    height: 138.0px;
    right: 0;
    bottom: 20%;
    animation: float 2.3s infinite ease-in-out;
  }
  .phone {
    flex: 1;
    background: url("./img/bei2.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 50.0px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-right: 20%;
  }
}

@media screen and (max-width: 1500px) {
  .zi {
    width: 50%;
    padding-left: 10%;
  }
  .zi .title {
    font-size: 48px;
  }
}