@media screen and (max-height: 630px) {
  .form-right-btn {
    bottom: 45px !important;
  }

  .form-right .form-right-li {
    margin-top: 30px !important;
  }

  .float-form-dynamics .form-left,
  .float-form-dynamics .form-right {
    height: 550px !important;
  }

  .form-right .form-right-li>li {
    margin-bottom: 12px !important;
  }

}

/* 在这里添加针对1200px及以下屏幕宽度的样式规则 */

@media screen and (max-width: 1200px) {
  /* 头部 */

  /* nav */

  .navbar {
    display: flex;
    max-width: 1160px;
    height: 40px;
    align-items: center;
    padding: 0 26px;
    margin: 16px auto;
    font-size: 14px;
    font-weight: 400;
    overflow-x: auto;
  }

  /* .navbar .navbar-menu {
  width: max-content;
  display: flex;
  justify-content: space-between;
} */

  .navbar .navbar-list li {
    overflow: hidden;
    width: max-content;
    max-height: 40px;
    padding: 10px 2vw;
    cursor: pointer;
    text-align: center;
  }

  .navbar-sub .navbar-sub-group {
    width: 100vw;
  }

  /* footer */
  footer {
    position: relative;
    z-index: 3000;
    background: #fff;
  }

  .footer {
    width: 96vw;
    margin: 0 auto;
  }

  .footer-section {
    display: flex;
    padding-top: 50px;
  }

  .footer .footer-logo {
    width: 140px;
    height: 30px;
    object-fit: contain;
  }

  .footer a {
    color: #8b8b8b;
    font-size: 12px;
  }

  .footer a:hover {
    color: #0276ff;
  }

  .footer-contact {
    position: relative;
    margin-right: 4vw;
  }

  .footer-contact .wechat,
  .footer-contact .weibo {
    width: 24px;
    height: 19px;
    margin-top: 39px;
  }

  .footer-qrcode .qrcode-section {
    position: absolute;
    bottom: 7px;
    margin-top: 32px;
    border-radius: 4px;
  }

  .footer-qrcode .qrcode-section .qrcode-img {
    width: 84px;
    height: 84px;
    margin: 0 auto;
  }

  .footer-qrcode .qrcode-section .qrcode-desc {
    margin-top: 8px;
    color: #8b8b8b;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
  }

  .footer-link {
    width: 960px;
  }

  .footer-link .link-section {
    display: flex;
    justify-content: space-between;
  }

  .footer-link .link-section > li {
    line-height: 36px;
  }

  .footer-link a {
    display: block;
  }

  .footer-link .title {
    margin-bottom: 24px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
  }

  .footer-link .first-title {
    display: flex;
  }

  .footer-link .first-title > li:first-child {
    margin-right: 48px;
  }

  .footer-link .block-title > li:first-child {
    margin-bottom: 48px;
  }

  .footer-line {
    height: 1px;
    margin: 36px auto 24px auto;
    background: #d8d8d8;
  }

  .footer-safe {
    display: flex;
    justify-content: space-between;
  }

  .footer-safe .footer-beian {
    color: #8b8b8b;
    font-size: 13px;
  }

  .footer-safe .footer-orther {
    display: flex;
  }

  .footer-safe .footer-orther > a {
    margin-right: 1.4vw;
  }

  .switchLanguage{
    font-size:12px;
    margin-right:1.4vw;
  }

  .languageIcon{
    width:14px;
    height:14px;
  }

  .arrowDown{
    width:12px;
    height:12px;
  }

  .switchLanguage:hover .languageListWrap {
    top: -370%;
  }

  .footer-police > a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-police {
    margin: 16px auto 44px auto;
    float: right;
  }

  .footer-police a img {
    width: 14.4px;
    height: 16px;
    margin-right: 6.6px;
  }

  /* 悬浮框 */
  .float-frame {
    position: fixed;
    z-index: 9999;
    top: 70%;
    right: 17px;
  }

  .float-frame .online-service {
    width: 100px;
    height: 113px;
    background:
      url(../image/online-service.png)
      no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .float-frame .scroll-top {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-left: 50px;
    background: linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }

  .float-frame .scroll-top .scroll-top-img {
    width: 24px;
    height: 24px;
    background:
      url(../image/scroll-top.png)
      no-repeat;
    background-size: 100% 100%;
  }

  /* 专家免费服务 */
  .free-service {
    position: relative;
    height: 341px;
    background:
      url(../image/free-service.png)
      no-repeat center;
  }

  .free-service .free-service-guide {
    width: 1160px;
    padding-top: 110px;
    margin: 0 auto;
    color: #fff;
    letter-spacing: 0;
  }

  .free-service .free-service-title {
    height: 50px;
    font-size: 36px;
    font-weight: 600;
  }

  .free-service .free-service-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 300;
  }

  .free-service .free-service-btn {
    margin-top: 34px;
  }

  .free-service .free-service-btn > a {
    display: inline-block;
    width: 150px;
    padding: 11px 0;
    background: #02cfff;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
  }

  .free-service .free-service-btn > a:hover {
    background: #34d8ff;
  }

  /* 悬浮表单 */
  .form-layer {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(29, 33, 41, 0.6);
  }


  .form-checkbox-title {
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }


  .xm-select-solution {
    position: relative;
    width: 172px;
    height: 32px;
  }

  .form-checkbox-box xm-select {
    min-height: 32px;
    border: none;
    line-height: 32px;
  }

  .form-checkbox-box xm-select > .xm-tips {
    padding-left: 0;
    color: #333;
    font-size: 14px;
    font-weight: 400;
  }

  .form-checkbox-box xm-select .xm-label .xm-label-block {
    background-color: transparent !important;
  }

  .form-checkbox-box xm-select > .xm-label .xm-label-block > span {
    color: #0276ff !important;
  }

  .form-checkbox-box xm-select > .xm-label .xm-label-block > i {
    color: #333 !important;
  }

  .form-checkbox-box xm-select > .xm-label .scroll .label-content {
    padding-top: 0;
    padding-left: 0;
  }

  .form-checkbox-box xm-select > .xm-body .scroll-body {
    max-height: 350px !important;
  }


  .form-checkbox-box-active {
    border: 1px solid #0276ff;
  }

  .form-checkbox-box:hover {
    border: 1px solid #0276ff;
  }

  .form-checkbox-box .layui-form-checkbox,
  .form-checkbox-box .layui-form-radio {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    padding-top: 9px;
    margin: 0 0 0 10px;
  }

  .form-checkbox-box .layui-form-radio {
    display: flex;
    padding-top: 3px;
    color: #333;
    font-size: 14px;
  }

  .form-checkbox-box .layui-form-radio > i {
    font-size: 18px;
  }

  .form-checkbox-box .layui-form-radio:hover > *,
  .form-checkbox-box .layui-form-radioed,
  .form-checkbox-box.layui-form-radioed > div,
  .form-checkbox-box .layui-form-radioed > i {
    color: #0276ff;
  }

  .form-checkbox-box2 .layui-form-checkbox {
    width: auto !important;
  }

  .form-checkbox-box .layui-form-checkbox[lay-skin='primary'] > i {
    top: 9px;
  }

  .close-form {
    position: absolute;
    z-index: 10000;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background:
      url(
        ../image/icon-close.png
) no-repeat;
    background-size: contain;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
  }

  .float-form .form-left {
    width: 280px;
    height: 430px;
    padding-left: 48px;
    background:
      url(../image/form-left-bg.png)
      no-repeat center;
    background-size: cover;
    border-radius: 8px 0 0 8px;
  }

  .float-form .form-left-title {
    margin-top: 56px;
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .float-form .form-left-desc {
    margin-top: 13px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .float-form .left-guide-li {
    margin-top: 40px;
  }

  .float-form .left-guide-li > li {
    display: flex;
  }

  .float-form .left-guide-desc {
    margin-bottom: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .float-form .left-guide-li > li > img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }


  .float-form .form-right .remark-textarea {
    display: none;
  }

  .float-form-dynamics .form-right .remark-textarea {
    display: block;
  }

  .float-form-dynamics .form-left,
  .float-form-dynamics .form-right {
    height: 578px;
  }

  .float-form .form-right-show {
    display: block;
  }


  .form-right .form-right-li > li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .form-right .form-right-li .li-sub label {
    margin-right: 24px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .form-right .form-right-li .li-sub .letter {
    margin-right: -4px;
    letter-spacing: 28px;
  }

  .form-right .form-right-li .li-sub .letter2 {
    margin-right: 19px;
    letter-spacing: 6px;
  }

  .form-right .form-right-li .li-sub .letter3 {
    padding-left: 7.1px;
    margin-right: -4px;
    letter-spacing: 28px;
  }

  .form-right .form-right-li .limit-right {
    padding-left: 7px;
  }

  .form-right .form-right-li > li .require {
    color: #f91212ff;
    font-size: 14px;
    font-weight: 400;
  }


  .form-right .form-right-li > li .head-code-btn {
    position: absolute;
    right: 16px;
    width: 85px;
    height: 36px;
    border: none;
    background: transparent;
    color: #0276ff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
  }

  .form-right .form-right-li > li .head-time-btn {
    position: absolute;
    right: 16px;
    width: 85px;
    height: 34px;
    border: none;
    background: #fff;
    color: #999;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
  }

  .form-right .form-right-li > li .head-code-btn:hover {
    color: #3591ff;
  }

  .form-right .form-right-li > li input::placeholder {
    color: #c9cdd4;
  }

  .form-right .form-right-li > li .checkbox-section {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .checkbox-section .select-title {
    margin-top: 8px;
    margin-left: -7px;
  }

  .checkbox-section .select-type {
    margin-top: 16px;
  }

  .checkbox-section .select-type2 {
    margin-top: 24px;
  }

  .checkbox-section .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .checkbox-section .checkbox-group-li {
    display: flex;
    width: 128px;
    align-items: center;
    margin-top: 16px;
  }

  /* checkbox 样式重新定义 */
  .checkbox-section .checkbox-group-li .checkbox {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    outline: none;
  }

  .checkbox-section .checkbox-group-li .checkbox-label {
    cursor: pointer;
  }

  /* 自定义 checkbox 样式 */
  .layui-form-checkbox[lay-skin='primary']:hover > i {
    border-color: #0276ff;
  }

  .layui-form-checked[lay-skin='primary'] > i {
    border-color: #0276ff !important;
    background-color: #0276ff;
  }

  .form-right .form-right-li > li textarea {
    width: 360px;
    height: 74px;
    padding: 8px 16px;
    border: 1px solid #e5e6e9;
    border-radius: 4px;
    outline: none;
    resize: none;
  }

  .form-right .form-right-li > li textarea::placeholder {
    color: #c9cdd4;
  }

  .form-right .form-right-li .li-sub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


  .form-right-btn3:hover {
    color: #0276ff;
  }

  .form-right-btn3-2 {
    margin-top: 84px;
  }

  .form-right .form-right-li .form-link {
    color: #0276ff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .float-form .form-right .layui-input-affix {
    line-height: 36px;
  }

  .head-form-reset {
    display: none;
  }

  .float-form .form-right .success-icon {
    width: 64px;
    height: 64px;
    margin: 88px auto 0 auto;
    background:
      url(../image/form-left-success-icon.png)
      no-repeat center;
    background-size: cover;
  }

  .float-form .form-right .success-title {
    margin: 24px auto 0 auto;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 26px;
    text-align: center;
  }

  .float-form .form-right .success-desc {
    margin: 15px auto 0 auto;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 26px;
    text-align: center;
  }

  /* banner */
  .banner-bg-wrap {
    max-width: 1200px;
    height: 100%;
    background:
      url(../image/banner-bg-mini.png) no-repeat 0 0 / cover;
  }


  .banner-bg-purpose {
    background-image: url(../image/banner-purpose-bg.png);
  }

  .banner-item-title {
    margin: 0 auto;
  }

  .banner-bg-developer {
    max-width: 1200px;
    background: url(../image/banner-developer-bg-mid.png)no-repeat 0 0 / cover;
  }

  .banner-developer-wrap .banner-title1 {
    width: 960px;
    height: 96px;
    margin: 0 auto;
    background:
      url(../image/banner-developer-title1.png) no-repeat;
    background-size: contain;
  }

  .banner-developer-wrap .banner-title2 {
    width: 591px;
    height: 63px;
    margin: 0 auto;
    background:
      url(../image/banner-developer-title2.png) no-repeat;
    background-size: contain;
  }

  .circle1 {
    position: absolute;
    z-index: 3;
    top: 75px;
    right: -68px;
    width: 748px;
    height: 748px;
    animation: floatAnimation1 3s infinite alternate ease-in-out;
    background-image:
      linear-gradient(
        213deg,
        rgba(78, 151, 248, 0.8) 0%,
        rgba(88, 137, 249, 0.8) 18%,
        rgba(104, 249, 250, 0.8) 51%
      );
    border-radius: 50%;
    filter: blur(29px);
    opacity: 0.85;
  }

  .circle2 {
    position: absolute;
    z-index: 2;
    top: 218px;
    right: 150px;
    width: 779px;
    height: 779px;
    animation: floatAnimation2 3s infinite alternate ease-in-out;
    background-image:
      linear-gradient(
        233deg,
        rgba(78, 211, 248, 0.8) 14%,
        rgba(249, 88, 235, 0.8) 58%,
        rgba(194, 104, 250, 0.8) 87%
      );
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.61;
  }

  .circle3 {
    position: absolute;
    z-index: 1;
    top: -20px;
    right: 66px;
    width: 1249px;
    height: 1249px;
    background-image: linear-gradient(213deg, rgba(255, 255, 255, 0.8) 15%, rgba(88, 137, 249, 0.8) 18%);
    border-radius: 50%;
    filter: blur(50px);
  }

  .circle4 {
    position: absolute;
    z-index: 1;
    top: -317px;
    left: -66px;
    width: 735px;
    height: 735px;
    animation: floatAnimation4 3s infinite alternate ease-in-out;
    background-image: linear-gradient(46deg, rgba(78, 211, 248, 0.8) 0%, rgba(250, 104, 223, 0.8) 63%);
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.65;
  }

  @keyframes floatAnimation1 {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(0, -80px, 0);
    }
  }

  @keyframes floatAnimation2 {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(80px);
    }
  }

  @keyframes floatAnimation4 {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(50px, 100px, 0);
    }
  }

  .banner .dg-wrap {
    position: absolute;
    z-index: 10;
    top: 50px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap.dg-wrap-active {
    opacity: 1;
  }

  /* 背景动画斗拱 */
  .banner .dg-wrap .dg-img-1::after {
    position: absolute;
    z-index: 10;
    top: 240px;
    left: 230px;
    width: 70px;
    height: 500px;
    background:
      url(../image/dg-img-1.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-1::before {
    position: absolute;
    z-index: 12;
    top: 284px;
    left: 177px;
    width: 72px;
    height: 368px;
    background:
      url(../image/dg-img-1-2.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-1.dg-img-active::before,
  .banner .dg-wrap .dg-img-1.dg-img-active::after {
    opacity: 1;
  }

  .banner .dg-wrap .dg-img-2 {
    position: absolute;
    z-index: 11;
    top: 320px;
    left: 133px;
    width: 232px;
    height: 154px;
    background:
      url(../image/dg-img-2.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-3::after {
    position: absolute;
    z-index: 12;
    top: 247px;
    left: 198px;
    width: 188px;
    height: 127px;
    background:
      url(../image/dg-img-3.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-3::before {
    position: absolute;
    z-index: 14;
    top: 260px;
    left: 126px;
    width: 182px;
    height: 122px;
    background:
      url(../image/dg-img-3-2.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-4 {
    position: absolute;
    z-index: 13;
    top: 145px;
    left: 115px;
    width: 313px;
    height: 215px;
    background:
      url(../image/dg-img-4.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-5::after {
    position: absolute;
    z-index: 12;
    top: 95px;
    left: 260px;
    width: 207px;
    height: 206px;
    background:
      url(../image/dg-img-5.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-5::before {
    position: absolute;
    z-index: 14;
    top: 115px;
    left: 65px;
    width: 213px;
    height: 207px;
    background:
      url(../image/dg-img-5-2.png)
      no-repeat center;
    background-size: contain;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-6 {
    position: absolute;
    z-index: 15;
    top: 179px;
    left: 311px;
    width: 145px;
    height: 96px;
    background:
      url(../image/dg-img-6.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-7::before,
  .banner .dg-wrap .dg-img-7::after {
    position: absolute;
    z-index: 16;
    top: 79px;
    left: 372px;
    width: 128px;
    height: 90px;
    content: '';
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-7::before {
    background:
      url(../image/dg-img-7.png)
      no-repeat center;
    background-size: contain;
  }

  .banner .dg-wrap .dg-img-7::after {
    background:
      url(../image/dg-img-7-2.png)
      no-repeat center;
    background-size: contain;
  }

  .banner .dg-wrap .dg-img-7.dg-img-7-active::before {
    opacity: 0 !important;
  }

  .banner .dg-wrap .dg-img-7.dg-img-7-active::after {
    opacity: 1 !important;
  }

  .banner .dg-wrap .dg-img-8 {
    position: absolute;
    z-index: 13;
    top: 96px;
    left: 70px;
    width: 133px;
    height: 90px;
    background:
      url(../image/dg-img-8.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-9 {
    position: absolute;
    z-index: 18;
    top: 136px;
    left: 33px;
    width: 137px;
    height: 95px;
    background:
      url(../image/dg-img-9.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .banner .dg-wrap .dg-img-2.dg-img-active,
  .banner .dg-wrap .dg-img-3.dg-img-active::before,
  .banner .dg-wrap .dg-img-3.dg-img-active::after,
  .banner .dg-wrap .dg-img-4.dg-img-active,
  .banner .dg-wrap .dg-img-5.dg-img-active::before,
  .banner .dg-wrap .dg-img-5.dg-img-active::after,
  .banner .dg-wrap .dg-img-6.dg-img-active,
  .banner .dg-wrap .dg-img-7.dg-img-active::before,
  .banner .dg-wrap .dg-img-8.dg-img-active,
  .banner .dg-wrap .dg-img-9.dg-img-active {
    animation: slideDown 1s ease-in-out;
    opacity: 1;
  }

  @keyframes slideDown {
    0% {
      transform: translateY(-200%);
    }

    100% {
      transform: translateY(0);
    }
  }

  /* /////////////////// */
  .banner {
    position: relative;
    top: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    height: 576px;
    margin: 0 auto;

    /* background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/digital-payments/banner-bg.png) no-repeat center;
    z-index: 9; */
  }

  .banner #canvas-dg {
    position: absolute;
  }

  .banner .carousel-wrap {
    position: relative;
    z-index: 15;
    width: 100vw;
    height: 836px;
    margin: 0 auto;
  }

  .right-fixed {
    position: absolute;
    z-index: 200;
    top: 210px;
    right: 0;
    width: 52%;
    height: 500px;
  }

  .right-fixed-low {
    z-index: -1;
  }

  .banner-item {
    position: absolute;
    z-index: -1;
    left: 50%;
    display: flex;
    width: 90vw;
    min-width: 740px;
    min-height: 420px;
    box-sizing: border-box;
    margin: 176px auto 0;
    opacity: 0;
    transform: translateX(-50%);
  }

  .banner-item-active {
    z-index: 1;
    opacity: 1;
  }

  .banner-item .banner-item-left {
    width: 600px;
  }

  .banner-item .banner-title {
    margin-left: -6px;
  }

  .banner-item .banner-desc {
    margin-top: 5px;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 31px;
    white-space: inherit;
  }

  .banner-item .banner-item-right {
    width: 490px;
    flex: 0 0 auto;
  }

  .banner-item .banner-btn {
    width: 150px;
    height: 46px;
    bottom: 100px;
    background: #0276ff;
    border-radius: 4px;
  }

  .banner-item .banner-btn:hover {
    background: #3591ff;
  }

  .banner-item .banner-btn a {
    display: inline-block;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
  }

  /* banner 轮播 start */
  .banner .banner-item-active .banner-item-left {
    animation: bannerFadeIn 1.5s ease-in-out 0ms forwards;
  }

  .banner .banner-item-active .banner-item-right {
    animation: bannerFadeInUp 1.5s ease-in-out 0ms forwards;
  }

  /* banner 向上进入 */

  @keyframes bannerFadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 100px, 0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bannerFadeIn {
    0% {
      opacity: 0.1;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes bannerFadeOut {
    0% {
      opacity: 0.5;
    }

    100% {
      opacity: 0;
    }
  }

  .banner .banner-fade-out-up {
    animation: bannerFadeOut 1s ease-in-out 0ms forwards;
  }

  .banner .banner-fade-out-up .banner-item-left {
    animation: bannerFadeOut 1s ease-in-out 0ms forwards;
  }

  .banner .banner-fade-out-up .banner-item-right {
    animation: bannerFadeOutUp 1s ease-in-out 0ms forwards;
  }

  /* banner 向上飞出 */

  @keyframes bannerFadeOutUp {
    0% {
      opacity: 0.1;
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      transform: translateY(-100px);
    }
  }

  .banner .banner-fade-out-left {
    animation: bannerFadeOutLeft 0.8s ease-in-out 0ms forwards;
  }

  /* banner 轮播 end */

  /* banner slogan */
  .banner0-wrap {
    justify-content: center;
    margin: 228px auto 0;
  }

  .banner0-wrap .banner-item-left {
    width: 80%;
  }

  .banner0-wrap .banner-title1 {
    width: 59%;
    height: 15%;
    margin: 0 auto;
    background:
      url(../image/banner-slogan-title1.png)
      no-repeat;
    background-size: contain;
  }

  .banner0-wrap .banner-title2 {
    width: 100%;
    height: 15%;
    margin: 25px auto 0;
    background:
      url(../image/banner-slogan-title2.png)
      no-repeat;
    background-size: contain;
  }

  /* banner 第一屏 */
  .banner1-0-wrap .banner-item-left {
    width: 49%;
  }

  .banner1-0-wrap .banner-title {
    width: 50%;
    height: 145px;
    max-height: 110px;
    background:
      url(../image/banner1-0-title-mini.png)
      no-repeat;
    background-size: contain;
  }

  .banner1-0-wrap .banner-desc {
    width: 99%;
    letter-spacing: 4px;
    line-height: 24px;
    text-align: justify;
  }

  .banner1-0-wrap .banner-btn {
    margin-top: 22px;
  }

  .banner1-0-wrap .banner-item-right {
    margin-left: 10px;
    text-align: right;
  }

  .banner1-0-wrap #video1 {
    width: 100%;
    min-width: 443px;
    height: 80%;
  }

  /* banner 第二屏 */

  /* .banner1-wrap {
    width: 90vw;
    min-width: 900px;
    padding: 0 5vw;
    box-sizing: border-box;
  } */

  /* banner slogon */

  .banner-purpose-wrap{
    margin-top: 225px;
  }

  .banner-purpose-wrap .banner-item-left{
    width: 100%;
  }

  .banner-purpose-wrap .banner-title{
    width: 630px;
    height: 150px;
    margin: 0 auto;
  }

  .banner1-wrap .banner-item-left {
    width: 52%;
  }

  .banner1-wrap .banner-title {
    width: 70%;
    max-height: 120px;
    background:
      url(../image/banner1-title.png)
      no-repeat;
    background-size: contain;
  }

  .banner1-wrap .banner-desc {
    width: 72%;
  }

  .banner1-wrap .banner-btn {
    margin-top: 36px;
  }

  .banner1-wrap .code-wrap {
    position: relative;
    top: 12px;
    left: 0;
    width: 100%;
    min-width: 425px;
    height: 312px;
    background:
      url(../image/banner1-code-wrap.png)
      no-repeat left;
    background-size: contain;
    color: rgba(245, 251, 255, 0.8);
    font-size: 12px;
    line-height: 16px;
  }

  .banner1-wrap .code-wrap .typed-wrap {
    position: absolute;
    top: 16px;
    left: 40px;
  }

  .code-wrap .typed-cursor {
    opacity: 0;
  }

  .code-wrap .doinit {
    color: #29e9fc;
  }

  .code-wrap .type {
    color: #7e8bff;
  }

  .code-wrap .string {
    color: #8fd6ff;
  }

  .code-wrap .constant {
    color: #fdc373;
  }

  .banner1-wrap .code-wrap .typed-wrap div {
    height: 16px;
  }

  .banner1-wrap .code-img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 489px;
    background:
      url(../image/banner1-code.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
  }

  .banner1-wrap .code-img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 489px;
    background:
      url(../image/bg2.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
  }

  .banner1-wrap .code-img3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 489px;
    background:
      url(../image/bg12.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
  }

  /* code 首次出现 */
  .banner-show .banner1-wrap .code-img1 {
    animation: fadeInAndMoveY 1.5s ease-in-out 1000ms forwards;
    opacity: 0;
  }

  @keyframes fadeInAndMoveY {
    from {
      opacity: 0;
      transform: translateY(80px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .banner-show .banner1-wrap .point1 {
    animation: fadeIn 1s ease-in-out 2000ms forwards;
  }

  .banner-show .banner1-wrap .point2 {
    animation: fadeIn 1s ease-in-out 2500ms forwards;
  }

  .banner-show .banner1-wrap .point3 {
    animation: fadeIn 1s ease-in-out 3000ms forwards;
  }

  .banner1-wrap .code-img-active {
    left: 0;
    animation: codeFadeInRight 0.8s ease-in-out 0ms forwards;
    opacity: 1;
  }

  /* code 从右向左展示 */

  @keyframes codeFadeInRight {
    0% {
      opacity: 0;
      transform: translate3d(480px, 0, 0);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .banner-item .fade-out-left {
    animation: codeFadeOutLeft 1s ease-in-out 0ms forwards;
  }

  /* code 向左飞出 */

  @keyframes codeFadeOutLeft {
    0% {
      opacity: 0.9;
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      transform: translateX(-480px);
    }
  }

  .banner1-wrap .point1 {
    position: absolute;
    top: -24px;
    left: 70%;
    width: 79px;
    height: 79px;
    background:
      url(../image/banner1-icon1.png)
      no-repeat center;
    background-size: contain;
    opacity: 1;
  }

  .banner1-wrap .point2 {
    position: absolute;
    top: 146px;
    left: -44px;
    width: 66px;
    height: 66px;
    background:
      url(../image/banner1-icon2.png)
      no-repeat center;
    background-size: contain;
    opacity: 1;
  }

  .banner1-wrap .point3 {
    position: absolute;
    top: 234px;
    left: -44px;
    width: 66px;
    height: 66px;
    background:
      url(../image/banner1-icon3.png)
      no-repeat center;
    background-size: contain;
    opacity: 1;
  }

  /* banner 第二屏 */
  .banner2-wrap .banner-item-left {
    width: 40vw;
  }

  .banner2-wrap .banner-title {
    width: 100%;
    max-width: 400px;
    max-height: 100px;
    background:
      url(../image/banner2-title.png)
      no-repeat;
    background-size: contain;
  }

  .banner2-wrap .banner-desc {
    width: 86%;
    letter-spacing: 2px;
  }

  .banner2-wrap .banner-item-right {
    position: relative;
  }

  .banner2-wrap .img-left-wrap {
    position: absolute;
    z-index: 2;
    top: 42%;
    left: 0;
    width: 200px;
    min-width: 160px;
    height: 190px;
    min-height: 170px;
    background:
      url(../image/banner2-img1.png)
      no-repeat center;
    background-size: contain;
  }

  .banner2-wrap .img-left-wrap .animate-line {
    position: absolute;
    top: 57px;
    left: 33px;
    transform: scale(0.79);
  }

  .banner2-wrap .img-left-wrap .identifying {
    position: absolute;
    top: 20%;
    left: 31%;
    width: 30%;
    height: 20%;
    background:
      url(../image/banner2-img3.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
  }

  .banner2-wrap .img-left-wrap .shadow {
    position: absolute;
    top: 35%;
    left: 14%;
    width: 78%;
    height: 41%;
    background:
      url(../image/banner2-img4-1.png)
      no-repeat center;
    background-size: contain;
    opacity: 0;
  }

  .banner2-wrap .img-right-wrap {
    top: -10px;
    left: 15%;
    width: 400px;
    min-width: 395px;
    height: 83%;
    background:
      url(../image/banner2-img2.png)
      no-repeat left;
    background-size: contain;
  }

  .banner2-wrap .img-right-wrap .amount {
    position: absolute;
    z-index: 3;
    top: 94px;
    left: 40.5%;
    color: #fff;
    font-size: 14px;
  }

  /* banner 第三屏 */
  .banner3-wrap {
    min-height: 420px;
  }

  .banner3-wrap .banner-item-left {
    width: 48vw;
    min-width: 342px;
  }

  .banner3-wrap .banner-title {
    width: 77%;
    max-height: 130px;
    background:
      url(../image/banner3-title.png)
      no-repeat;
    background-size: contain;
  }

  .banner3-wrap .banner-desc {
    width: 76%;
  }

  .banner3-wrap .banner-item-right {
    position: relative;
  }

  .banner3-wrap .banner-item-right .img-bg-wrap {
    position: absolute;
    top: 10%;
    left: -5%;
    width: 100%;
    height: 100%;
  }

  .banner3-wrap .img-bg-wrap .img-bg {
    position: absolute;
    width: 90%;
    height: 80%;
    opacity: 1;
  }

  .banner3-wrap .img-bg-wrap .img-bg1 {
    z-index: 0;
    background:
      url(../image/banner3-img1.png)
      no-repeat center;
    background-size: contain;
  }

  .banner3-wrap .img-bg-wrap .img-bg2 {
    z-index: 1;
    background:
      url(../image/banner3-img2.png)
      no-repeat center;
    background-size: contain;
  }

  .banner3-wrap .img-bg-wrap .img-bg3 {
    z-index: 2;
    background:
      url(../image/banner3-img3.png)
      no-repeat center;
    background-size: contain;
  }

  .banner3-wrap .img-bg-wrap .img-bg4 {
    z-index: 3;
    background:
      url(../image/banner3-img4.png)
      no-repeat center;
    background-size: contain;
  }

  .banner3-wrap .banner-item-right .role-wrap {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 310px;
    width: 132px;
    height: 132px;
    background:
      url(../image/banner3-circle.png)
      no-repeat center;
    background-size: contain;
  }

  .banner3-wrap .banner-item-right .role-wrap .role-item {
    position: absolute;
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(249, 250, 251, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .banner3-wrap .banner-item-right .role-wrap .role-item-active {
    width: 60px;
    height: 60px;
    background: #0276ff;
    border-radius: 50%;
  }

  .banner3-wrap .role-item .role-img {
    width: 18px;
    height: 24px;
    margin-top: 15px;
    transition: all 0.3s ease;
  }

  .banner3-wrap .role-item-active .role-img {
    width: 21px;
    height: 30px;
    margin-top: 0;
  }

  .banner3-wrap .role-item .role-title {
    margin-top: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .banner3-wrap .role-item-active .role-title {
    opacity: 1;
  }

  /* .banner3-wrap .banner-item-right .role1 {
    left: 19.331px;
    top: 95.669px;
  }
  .banner3-wrap .banner-item-right .role2 {
    left: 95.669px;
    top: 95.669px;
  }
  .banner3-wrap .banner-item-right .role3 {
    left: 95.669px;
    top: 10.331px;
  }
  .banner3-wrap .banner-item-right .role4 {
    left: 19.331px;
    top: 10.331px;
  } */
  .banner3-wrap .banner-item-right .role1 {
    top: 112.669px;
    left: 19.331px;
  }

  .banner3-wrap .banner-item-right .role2 {
    top: 112.669px;
    left: 112.669px;
  }

  .banner3-wrap .banner-item-right .role3 {
    top: 19.331px;
    left: 112.669px;
  }

  .banner3-wrap .banner-item-right .role4 {
    top: 19.331px;
    left: 19.331px;
  }

  /* banner 第四屏 */
  .banner4-wrap {
    /* width: 96vw; */

    /* padding-right: 3vw; */
  }

  .banner4-wrap .banner-item-left {
    width: 35vw;
    min-width: 280px;
  }

  .banner4-wrap .banner-title {
    width: 92%;
    max-height: 110px;
    background:
      url(../image/banner4-title.png)
      no-repeat;
    background-size: contain;
  }

  .banner4-wrap .banner-item-right {
    /* position: relative; */
  }

  .banner4-wrap .banner-item-right .img-main-bg {
    position: absolute;
    top: 14px;
    width: 50vw;
    min-width: 560px;
    background:
      url(../image/banner4-bg.png)
      no-repeat center;
    background-size: contain;
  }

  .banner4-wrap .banner-item-right .robot-img {
    position: absolute;
    top: 46%;
    left: 11%;
    width: 24%;
    height: 39%;
    background:
      url(../image/banner4-img1.png)
      no-repeat center;
    background-size: contain;
  }

  .banner4-wrap .banner-item-right .bubble-img-left {
    position: absolute;
    top: 60%;
    left: 3%;
  }

  .banner4-wrap .banner-item-right .bubble-img-right {
    position: absolute;
    top: 50%;
    left: 28%;
  }

  .banner4-wrap .banner-item-right .bubble-content {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .banner4-wrap .banner-item-right .bubble-img-left .bubble-content {
    width: 62px;
    height: 23px;
    background:
      url(../image/banner4-img3.png)
      no-repeat center;
    background-size: contain;
  }

  .banner4-wrap .banner-item-right .bubble-img-right .bubble-content {
    width: 101px;
    height: 22px;
    background:
      url(../image/banner4-img2.png)
      no-repeat center;
    background-size: contain;
  }

  .banner4-wrap .banner-item-right .chat-bubble {
    position: absolute;
    z-index: 1;
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: #dde5f0;
    border-radius: 13px;
    grid-gap: 4px;
    grid-template-columns: repeat(3, 1fr);
    opacity: 0;
    transform-origin: 0 100%;
    transition: opacity 0.5s ease-in-out;
  }

  .banner4-wrap .banner-item-right .chat-bubble.chat-bubble-active {
    opacity: 1;
  }

  .banner4-wrap .banner-item-right .bubble-content.bubble-content-active {
    opacity: 1;
  }

  .banner4-wrap .banner-item-right .chat-bubble .chat-dot {
    width: 8px;
    height: 8px;
    animation: chat-dot-pulse 0.6s infinite;
    background: #727f96;
    border-radius: 50%;
  }

  .banner4-wrap .banner-item-right .chat-bubble .chat-dot:nth-of-type(2) {
    animation-delay: 0.1s;
  }

  .banner4-wrap .banner-item-right .chat-bubble .chat-dot:nth-of-type(3) {
    animation-delay: 0.2s;
  }

  @keyframes chat-dot-pulse {
    0% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.2;
      transform: scale(1.1);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* banner 轮播按钮 */
  .banner .carousel-nav-wrap {
    width: 90vw;
    margin: 0 auto;
  }

  .banner .carousel-nav {
    position: absolute;
    z-index: 15;
    top: 95%;
    display: flex;
  }

  .banner .carousel-nav li {
    width: 38px;
    padding: 8px 0;
    margin-right: 10px;
    cursor: pointer;
  }

  .banner .carousel-nav .indicator-item {
    width: 38px;
    height: 4px;
    background: #aab4c1;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.5s ease-in-out;
  }

  .banner .carousel-nav .indicator-item-active {
    background: #0276ff;
    opacity: 1;
  }

  /* main内容 */
  .main {
    margin: 0 auto;
  }

  .main-section-1 {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 415px;
    margin-top: -215px;
    background:
      url(../image/bg2.png)
      no-repeat center;
  }

  .main-section-1 ul {
    display: flex;
    width: 82%;
    justify-content: space-between;
    padding-top: 180px;
    margin: 0 auto;
  }

  .main-section-1 ul li {
    width: 23.52%;
    height: 150px;
    border-radius: 8px;
    box-shadow: 0 2px 16px 0 rgba(27, 81, 135, 0.08);
    cursor: pointer;
    transition: all 0.35s ease-in-out;
  }

  /* .main-section-1 ul li:first-of-type, */
  .main-section-1 ul li:hover {
    width: 23.52%;
    height: 214px;
    margin-top: -32px;
    background-image: linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    border-radius: 8px;
    box-shadow: 0 2px 16px 0 rgba(27, 81, 135, 0.0784313725);
    transition: all 0.3s ease-in-out;
  }

  .main-section-1 ul li .li-btn {
    position: relative;
    margin-top: 8px;
    color: #0276ff;

    /* display: none; */
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    opacity: 0;
    text-align: center;
    transition: all 0.5s ease-in-out;
  }

  .main-section-1 ul li:hover .li-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;

    /* text-align: center; */
    opacity: 1;
    transition: all 0.5s ease-in-out;
  }

  .main-section-1 ul li .li-btn i {
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-left: 1px;
    background:
      url(../image/jiantou.svg)
      no-repeat center;
    transition: all 0.5s ease-in-out;
  }

  .main-section-1 ul li:hover .li-btn i {
    margin-left: 8px;
    animation-duration: 2000ms;
    animation-name: headShake;
  }

  .main-section-1 ul li:nth-child(1) {
    background:
      url(../image/section1-bg13.png)
        no-repeat,
      linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    background-position: bottom;
    background-size: contain;
  }

  .main-section-1 ul li:nth-child(2) {
    background:
      url(../image/section1-bg22.png)
        no-repeat,
      linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    background-position: bottom;
    background-size: contain;
  }

  .main-section-1 ul li:nth-child(3) {
    background:
      url(../image/section1-bg32.png)
        no-repeat,
      linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    background-position: bottom;
    background-size: contain;
  }

  .main-section-1 ul li:nth-child(4) {
    background:
      url(../image/section1-bg42.png)
        no-repeat,
      linear-gradient(180deg, #ebf9fd 0%, #fff 100%);
    background-position: bottom;
    background-size: contain;
  }

  .section-title {
    color: #333;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  .main-section-1 .section-title {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 24px;
  }

  .main-section-1 .section-desc {
    color: #5f5f5f;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 24px;
    text-align: center;
  }

  .main-section-1 .section-desc > span {
    color: #0276ff;
    font-size: 18px;
    letter-spacing: 0.51px;
  }

  .main-section-1 .section-desc .num {
    display: inline-block;
    min-width: 38px;
    text-align: right;
  }

  .main-section-2 {
    position: relative;
    height: 1084px;
    padding-top: 126px;
    margin: 0 auto;
    font-size: 16px;
  }

  .main-section-2::before {
    position: absolute;
    top: 235px;
    right: 0;
    display: block;
    width: 280px;
    height: 485px;
    background:
      url(../image/section2-elliptic-bg.png)
      no-repeat;
    background-size: contain;
    content: '';
  }

  .main-section-2 .section-title {
    position: relative;
    width: 90vw;
    margin: 0 auto;
    font-size: 36px;
  }

  .main-section-2 .section-menu-wrap {
    position: relative;
    display: flex;
    width: 90vw;
    min-width: 620px;
    height: 738px;
    margin: 42px auto 0;
    border-radius: 0 8px 8px 0;
  }

  .main-section-2 .section-title::before {
    position: absolute;
    z-index: -1;
    top: -58px;
    right: 51px;
    display: block;
    width: 194px;
    height: 131px;
    background:
      url(../image/section2-title-bg.png)
      no-repeat;
    background-size: contain;
    content: '';
  }

  .main-section-2-show .section-menu-wrap {
    animation: changeShadow 1.2s ease-in-out forwards;
    background:
      url(../image/menu-content-bg.png)
      no-repeat;
    background-position: -16px center;
    background-size: cover;
  }

  @keyframes changeShadow {
    from {
      background-position: -16px center;
      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0);
      opacity: 0;
    }

    to {
      background-position: 0 center;
      box-shadow: 0 2px 16px 0 rgba(6, 59, 121, 0.0392156863);
      opacity: 1;
    }
  }

  .main-section-2 .content-item {
    position: absolute;
    left: 50%;
    width: calc(100% - 40px);
    transform: translateX(-50%);
  }

  .main-section-2 .first-level-menu {
    position: relative;
    z-index: 2;
    width: 19%;
    min-width: 150px;
    padding: 33px 20px;
    background: #072584;
    border-radius: 8px 0 0 8px;
    opacity: 0.2;
  }

  .main-section-2 .first-level-menu::after {
    position: absolute;
    top: 40px;
    right: 0;
    display: inline-block;
    width: 1.5px;
    height: 640px;
    background: rgba(67, 140, 245, 0.45);
    content: '';
  }

  .first-level-menu .first-level-item {
    position: relative;
    display: block;
    width: 100%;
    min-width: 78px;
    height: 108px;
    padding-left: 15px;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    transition: color 0.8s ease-in-out;
  }

  .first-level-menu .first-level-item:hover {
    background: rgba(20, 90, 235, 0.4);
  }

  .first-level-menu .first-level-item .item-line {
    position: absolute;
    z-index: 3;
    top: 0;
    right: -20px;
    width: 1.5px;
    height: 108px;
  }

  .first-level-menu .first-level-active .item-line {
    width: 1.5px;
    animation-duration: 5s;
    animation-name: showMenuLine;
    background: #4a85ff;
  }

  @-webkit-keyframes showMenuLine {
    0% {
      height: 0%;
    }

    to {
      height: 100%;
    }
  }

  .first-level-menu .menu-bg {
    position: absolute;
    z-index: -1;
    top: 33px;
    left: 20px;
    width: calc(100% - 40px);
    min-width: 100px;
    height: 108px;
    padding: 0 15px;
    background: #145aeb;
    border-radius: 8px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.0392156863);
    transition: top 0.5s ease-in-out;
  }

  .first-level-menu .first-level-name {
    position: absolute;
    top: 68px;
    margin: 0;
  }

  .first-level-menu img {
    position: absolute;
    top: 21px;
    left: 15px;
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 0;
    opacity: 0;
    transition: all 0.8s ease-in-out;
  }

  .first-level-menu .first-level-item .icon-white {
    opacity: 1;
  }

  .first-level-menu .first-level-active .icon-blue {
    opacity: 1;
  }

  .first-level-menu .first-level-active .icon-white {
    opacity: 0;
  }

  .first-level-menu .first-level-active,
  .first-level-menu .first-level-active:hover {
    position: relative;
    color: #fff;
  }

  .main-section-2 .first-level-active-line {
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 191px;
    width: 1px;
    height: 108px;
    background: rgba(7, 37, 132, 0.3);
    transition: top 0.5s ease-in-out;
  }

  .main-section-2 .second-level-menu {
    position: relative;
    z-index: 2;
    width: 21%;
    min-width: 150px;
    padding: 60px 16px;
    background: #072584;
    border-radius: 0 8px 8px 0;
    opacity: 0;
    transform: translateX(-16px);
  }

  .main-section-2-show .first-level-menu {
    animation: fadeInMenu 0.7s ease-in-out 50ms forwards;
  }

  .main-section-2-show .second-level-menu {
    animation: fadeInAndMove 0.7s ease-in-out 500ms forwards;
  }

  .main-section-2-show .guide-content-right {
    animation: fadeInAndMove 0.7s ease-in-out 1100ms forwards;
  }

  @keyframes fadeInMenu {
    0% {
      opacity: 0.2;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeInAndMove {
    0% {
      opacity: 0;
      transform: translateX(-16px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .second-level-menu .second-level-item {
    position: absolute;
    z-index: -1;
    width: calc(100% - 40px);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, z-index 0.5s ease-in-out;
  }

  .second-level-menu .second-level-item-active {
    z-index: 1;
    opacity: 1;
  }

  .second-level-menu .second-level-item .page-menu {
    margin-bottom: 48px;
    cursor: pointer;
  }

  .second-level-menu .second-level-item .page-menu .second-title {
    transform: translateX(0);
    transition: all 0.4s ease-in-out;
  }

  .second-level-menu .second-level-item .page-menu .second-title:hover {
    color: #fff;
  }

  .second-level-menu .second-level-item .second-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .second-level-menu .second-level-item .page-menu-active .second-title {
    color: #fff;
    font-weight: 600;
  }

  .second-level-menu .second-level-item .page-menu-active .second-title::after {
    display: inline-block;
    width: 20px;
    height: 20px;
    animation: fadeIn 0.6s ease-in-out 50ms forwards;
    background:
      url('../image/arrow-icon.svg')
      no-repeat;
    background-size: contain;
    content: '';
    opacity: 0;
  }

  .second-level-menu .second-level-item .second-desc {
    color: #5f5f5f;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }

  .main-section-2 .guide-content-right {
    position: relative;
    z-index: 2;
    height: 100%;
    flex: 1;
    padding: 38px 0;
    border-radius: 0 8px 8px 0;
    opacity: 0;
    -ms-overflow-style: none; /* IE 10+ */
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    transform: translateX(-16px);
  }

  .main-section-2 .guide-content-right::-webkit-scrollbar {
    display: none;
  }

  .main-section-2 .guide-content-right .page-item {
    position: absolute;
    z-index: -1;
    overflow: hidden;
    width: 100%;
    height: fit-content;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, z-index 0.5s ease-in-out;
  }

  .main-section-2 .guide-content-right .page-item .page-menu-icon {
    display: none;
  }

  .main-section-2 .guide-content-right .page-item-active {
    z-index: 1;
    opacity: 1;
  }

  .main-section-2 .guide-content-right .page-item .page-menu-icon {
    position: sticky;
    z-index: -1;
    bottom: 0;
    width: 258px;
    height: 231px;

    /* 60为父元素的padding左右相加值 ：258-(60) */
    margin-left: calc(100% - 198px);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, z-index 0.5s ease-in-out;
  }

  /* .main-section-2 .guide-content-right .page-item-active .page-menu-icon {
    z-index: 1;
    display: block;
    opacity: 1;
  } */

  .main-section-2 .guide-content-right .page-menu-icon img {
    width: 100%;
    height: 100%;
  }

  .main-section-2 .guide-content-right .content-title {
    margin-bottom: 16px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .main-section-2 .guide-content-right .content-desc {
    margin-bottom: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
  }

  .main-section-2 .guide-content-right .show-more {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.5019607843);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.5019607843);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
  }

  .main-section-2 .guide-content-right .page-item-active .show-more:hover i {
    animation-duration: 1500ms;
    animation-name: headShake;
  }

  .main-section-2 .guide-content-right .show-more i {
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-left: 8px;
    background:
      url(../image/arrow-icon1.svg)
      no-repeat center;
  }

  .main-section-2 .guide-content-right .detail-wrap {
    margin-top: 32px;
    margin-bottom: 40px;
  }

  .main-section-2 .guide-content-right .detail-wrap ul {
    display: flex;
    flex-wrap: wrap;
  }

  .guide-content-right .detail-wrap ul li {
    padding: 15px;
    margin-right: 0;
    margin-bottom: 16px;
    background-color: transparent;
    border-radius: 8px;
  }

  .guide-content-right .detail-wrap .detail-item-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }

  .guide-content-right .detail-wrap .detail-item-title {
    margin-bottom: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .guide-content-right .detail-wrap .detail-item-desc {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    text-overflow: ellipsis;
  }

  .guide-content-right .detail-wrap .desc-nowrap {
    white-space: nowrap;
  }

  .guide-content-right .detail-wrap .row3 li {
    width: 50%;
    min-height: fit-content;
    margin-bottom: 0;
  }

  .guide-content-right .detail-wrap .row4 li {
    width: 50%;
    min-height: fit-content;
    margin-bottom: 0;
  }

  .guide-content-right .detail-wrap .row2 li {
    width: 50%;
    min-height: fit-content;
    margin-bottom: 0;
  }

  @media screen and (max-width: 786px) {
    .guide-content-right .detail-wrap .row3 li {
      width: 100%;
    }

    .guide-content-right .detail-wrap .row4 li {
      display: flex;
      width: 100%;
      align-items: center;
    }

    .guide-content-right .detail-wrap .row4 li img {
      margin-right: 10px;
    }

    .guide-content-right .detail-wrap .row2 li {
      width: 100%;
    }
  }

  .main-section-3 {
    position: relative;
  }

  .main-section-3 .section-menu-wrap {
    width: 90vw;
    height: 668px;
    padding-top: 35px;
    margin: 0 auto;
  }

  .main-section-3::before {
    position: absolute;
    top: 60px;
    left: 0;
    display: block;
    width: 280px;
    height: 485px;
    background:
      url(../image/section3-elliptic-bg.png)
      no-repeat;
    background-size: contain;
    content: '';
  }

  .main-section-3 .section-title {
    position: relative;
    font-size: 36px;
  }

  .main-section-3 .section-title::before {
    position: absolute;
    z-index: -1;
    top: -67px;
    left: 210px;
    display: block;
    width: 198px;
    height: 131px;
    background:
      url(../image/section3-title-bg.png)
      no-repeat;
    background-size: contain;
    content: '';
  }

  .main-section-3 .section-banner {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 144px;
  }

  .main-section-3 .section-banner li {
    position: relative;
    z-index: 11;
    overflow: hidden;
    width: 32.2%;
    height: 460px;
    border: 2px solid #fff;
    background-image: url(../image/section3-li-bg.png);
    background-size: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease-in-out;
  }

  .main-section-3 .section-banner .section-banner-active {
    box-shadow: 0 24px 80px 0 rgba(6, 59, 121, 0.16);
  }

  .main-section-3 .section-banner li a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .main-section-3 .section-banner li .item-bg {
    transform: scale(1.1);
    transition: transform 0.3s ease;
  }

  .main-section-3 .section-banner li:hover .item-bg {
    transform: scale(1);
    transition: transform 0.3s ease;
  }

  .main-section-3 .section-banner .item-bg1 {
    height: 44%;
    background-image: url(../image/section3-img1.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .main-section-3 .section-banner .item-bg2 {
    height: 44%;
    background-image: url(../image/section3-img2.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .main-section-3 .section-banner .item-bg3 {
    height: 44%;
    background-image: url(../image/section3-img3.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .main-section-3 .section-banner-layer {
    position: relative;
    height: 56%;
    padding: 25px 18px;
  }

  .main-section-3 .section-banner-title {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
  }

  .main-section-3 .section-banner-desc {
    overflow: visible;
    height: 72px;
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
  }

  .main-section-3 .section-banner-more {
    position: absolute;
    bottom: 25px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
  }

  .main-section-3 .section-banner-more i {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-left: 8px;
    background:
      url(../image/arrow-icon1.svg)
      no-repeat center;
  }

  .main-section-3 a:hover i {
    animation-duration: 2000ms;
    animation-name: headShake;

    /* margin-left: 8px; */
  }

  .main-section-4-mini {
    position: relative;
    z-index: 1;
    width: 100vw;
    min-width: 906px;
    height: 114vw;
    min-height: 1060px;
    background:
      url()
      no-repeat center bottom / cover;
    background-color: #f1f4f4;
  }

  .main-section-4-mini .section-title {
    display: flex;
    flex-direction: column;
    padding-top: 4%;
    color: #333;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .main-section-4-mini .section-title-logo {
    width: 190px;
    height: 62.5px;
    margin-right: 32px;
  }

  .main-section-4-mini .section-title-text {
    width: 440px;
    margin-top: 4%;
    text-align: left;
  }

  .main-section-4-mini .section-position {
    width: 100%;
    height: 100%;
  }

  .main-section-4 .section-position {
    position: static;
  }

  /* 中屏的svg图形显示 */
  .main-section-4 .section-position .mediun-animate-line-box {
    display: block;
  }

  /* 大屏的svg图形隐藏 */

  .main-section-4-mini .section-position .animate-line-box {
    display: none;
  }

  .main-section-4-mini .section-position .top-icon-wrap {
    position: absolute;
    top: 24%;
    left: 50%;
    display: block;
    width: 610px;
    transform: translateX(-50%);
  }

  .main-section-4-mini .section-position .top-icon-wrap .icon-item-row {
    display: flex;
    margin-bottom: 12px;
  }

  .main-section-4-mini .section-position .section-animation-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main-section-4-mini .section-position .section-animation-wrap .section-animation1 {
    position: absolute;
    z-index: 4;
    top: 47.5%;
    left: 46.5%;
    width: 7%;
    height: 6%;
    min-height: 88px;
    background:
      url(../image/section4-animation1.png)
      no-repeat center/contain;
  }

  .main-section-4-mini .section-position .section-animation-wrap .section-animation2 {
    position: absolute;
    z-index: 3;
    top: 51.5%;
    left: 42%;
    width: 21%;
    height: 13%;
    background:
      url(../image/section4-animation2.png)
      no-repeat center/contain;
  }

  .main-section-4-mini .section-position .section-animation-wrap .section-animation3 {
    position: absolute;
    z-index: 2;
    top: 57.5%;
    left: 37%;
    width: 33%;
    height: 20%;
    background:
      url(../image/section4-animation3.png)
      no-repeat center/contain;
  }

  .main-section-4-mini .left-silk-ribbon {
    position: absolute;
    top: 266px;
    left: 201px;
    width: 38px;
    height: 148px;
    animation: left-silk-ribbon 5s ease-in-out infinite;
    background:
      url(../image/section4-animation4.svg)
      no-repeat center;
  }

  @keyframes left-silk-ribbon {
    0% {
      transform: translate(-20%, -10%) skew(-10deg, -5deg);
    }

    50% {
      transform: translate(20%, 10%) skew(10deg, 5deg);
    }

    100% {
      transform: translate(-20%, -10%) skew(-10deg, -5deg);
    }
  }

  .main-section-4-mini .right-silk-ribbon {
    position: absolute;
    top: 205px;
    left: 462px;
    width: 171px;
    height: 200px;
    animation: right-silk-ribbon 6s ease-in-out infinite;
    background:
      url(../image/section4-animation5.svg)
      no-repeat center;
  }

  @keyframes right-silk-ribbon {
    0% {
      transform: translate(-10%, -1%) skew(-10deg, 5deg);
    }

    50% {
      transform: translate(10%, 1%) skew(10deg, -5deg);
    }

    100% {
      transform: translate(-10%, -1%) skew(-10deg, 5deg);
    }
  }

  .main-section-4-mini .section-btn {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    color: #0276ff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .main-section-4-mini .section-btn-right {
    position: relative;
    top: 10px;
    left: 10px;
    margin-right: 32px;
  }

  .main-section-4-mini .btn-white {
    display: none;
  }

  .main-section-4-mini .circle-section {
    position: relative;
    width: 56px;
    height: 56px;
  }

  .main-section-4-mini .outer-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #0ff0fa;
    border-radius: 50%;
    opacity: 0;
  }

  .main-section-4-mini .inner-circle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid #0ff0fa;
    border-radius: 50%;
    opacity: 0;
  }

  .main-section-4-mini a img {
    width: 36px;
    height: 36px;
  }

  .main-section-4-mini .section-btn-1 {
    top: 48.5%;
    left: 49%;
  }

  .main-section-4-mini .section-btn-2 {
    top: 57.5%;
    left: 32.5%;
    flex-direction: row-reverse;
  }

  .main-section-4-mini .section-btn-3 {
    top: 66.5%;
    left: 60%;
  }

  .main-section-4-mini .section-btn-4 {
    top: 62.5%;
    left: 17.5%;
    width: 220px;
    justify-content: left;
    text-align: left;
  }

  .main-section-4-mini .section-btn-5 {
    top: 92.5%;
    left: 37%;
  }

  .main-section-4-mini .section-btn-6 {
    top: 91.5%;
    left: 70%;
  }

  .main-section-4-mini .right-icon-wrap {
    position: absolute;
    z-index: 11;
    top: 96px;
    right: 0;
    display: none;
  }

  .main-section-4-mini .right-icon-wrap .icon-item-row {
    display: flex;
    flex-wrap: wrap;
  }

  .main-section-4-mini .right-icon-wrap .icon-item-row > a {
    height: 72px;
    margin: 0 12px 12px 0;
  }

  @keyframes fadeInToBlue {
    from {
      background-color: #f4f5f5;
      opacity: 0.2;
    }

    to {
      background-color: #fff;
      opacity: 1;
    }
  }

  @keyframes fadeInToWhite {
    from {
      background-color: #fff;
      opacity: 0.2;
    }

    to {
      background-color: #f4f5f5;
      opacity: 1;
    }
  }

  @keyframes fadeOutBlue {
    from {
      display: block;
      opacity: 1;
    }

    to {
      display: none;
      opacity: 0;
    }
  }

  @keyframes fadeOutToBlue {
    from {
      background-color: #f4f5f5;
      opacity: 0.2;
    }

    to {
      background-color: #fff;
      opacity: 1;
    }
  }

  @keyframes fadeOutToWhite {
    from {
      background-color: #fff;
      opacity: 0.2;
    }

    to {
      background-color: #f4f5f5;
      opacity: 1;
    }
  }

  /* 线条动画样式 */
  .main-section-4-mini .animate-line1 {
    position: absolute;
    z-index: -1;
    top: 26.5%;
    left: 50%;
    width: 550px;
    height: 360px;
    color: #26d6ff;
    transform: translateX(-43%);
  }

  .main-section-4-mini .animate-line1 path {
    stroke-dasharray: 1200px;
    stroke-dashoffset: 1390px;
  }

  .main-section-4-mini .animate-line2 {
    position: absolute;
    z-index: -1;
    top: 32.4%;
    left: 50%;
    width: 580px;
    height: 440px;
    transform: translateX(-63.5%);
  }

  .main-section-4-mini .animate-line2 path {
    stroke-dasharray: 1400px;
    stroke-dashoffset: 1480px;
  }

  .main-section-4-mini .animate-line3 {
    position: absolute;
    z-index: -1;
    top: 38%;
    left: 50%;
    width: 700px;
    height: 470px;
    transform: translateX(-34%);
  }

  .main-section-4-mini .animate-line3 path {
    stroke-dasharray: 1420px;
    stroke-dashoffset: 1500px;
  }

  .main-section-4-mini .grid-wrap {
    position: relative;
    z-index: 11;
    overflow: hidden;
    width: 72px;
    height: 72px;
    border: 1px solid #d9dfe7;
    margin-right: 12px;
    background-color: #f4f5f5;
    border-radius: 8px;
    transition: background-color 1s ease-in-out;
  }

  .main-section-4-mini .block-wrap {
    overflow: hidden;
    width: 72px;
    height: 72px;
    border: 1px solid #d9dfe7;
    margin: 0 12px 12px 0;
    background: #f4f5f5;
    border-radius: 8px;
  }

  .main-section-4-mini .grid-wrap-active {
    overflow: hidden;
    width: 72px;
    height: 72px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(6, 59, 121, 0.1019607843);
  }

  .main-section-4-mini .icon-blue-wrap,
  .main-section-4-mini .icon-white-wrap {
    width: 72px;
    height: 72px;
  }

  .main-section-4-mini .icon-blue-wrap {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .main-section-4-mini .icon-white-wrap {
    opacity: 1;
    transition: opacity 1s ease-in-out;
  }

  .main-section-4-mini .grid-wrap .icon-blue-wrap {
    position: absolute;
    opacity: 0;
    text-align: center;
  }

  .main-section-4-mini .grid-wrap .icon-white-wrap {
    position: absolute;
    opacity: 1;
  }

  .main-section-4-mini .icon-white {
    width: 32px;
    height: 32px;
    margin: 10px auto 0;
  }

  .main-section-4-mini .grid-wrap-active .icon-blue-wrap {
    opacity: 1;
    text-align: center;
  }

  .main-section-4-mini .icon-blue {
    width: 32px;
    height: 32px;
    margin: 10px auto 0;
  }

  .main-section-4-mini .icon-title {
    margin-top: 4px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
  }

  .main-section-4 .icon1-5,
  .main-section-4 .icon2-1,
  .main-section-4 .icon2-2,
  .main-section-4 .icon3-5 {
    margin-left: 0;
  }

  .main-section-4 .icon3-2,
  .main-section-4-mini .icon2-3 {
    margin-left: 84px;
  }

  .main-section-5 {
    position: relative;
    z-index: 2;
    overflow: visible;
    height: 1948px;
    padding-top: 112px;
    background-color: #072584;
  }

  .main-section-5 .section-title {
    margin-top: 0;
    color: #0276ff;
    font-size: 72px;
    font-weight: 600;
    text-align: center;
  }

  .main-section-5 .section-desc {
    margin-top: 38px;
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  .main-section-5 .number-run {
    position: relative;
    z-index: 100;
    display: flex;
    overflow: hidden;
    width: 90%;
    height: 72px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .main-section-5 .number-run-li {
    position: relative;
    top: 0;
    width: 92px;
    max-width: 10%;
    height: 72px;
    opacity: 0;
  }

  .main-section-5 .number-run img {
    height: 100%;
    padding: 0 12px;
  }

  .main-section-5 .number-run-comma {
    width: 21.87px !important;
    padding: 45px 0 0 !important;
  }

  .main-section-5 .number-run-plus {
    width: 38.25px !important;
    height: auto !important;
    padding: 20px 0 0 !important;
  }

  .main-section-5 .service-wrap {
    display: flex;
    width: 90vw;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 52px;
  }

  .main-section-5 .service-wrap .service-item {
    position: relative;
    overflow: hidden;
    width: 48.2%;
    height: 380px;
    margin-bottom: 25px;
    border-radius: 8px;
    cursor: pointer;
  }

  .main-section-5 .service-wrap .service-item .service-item-layer {
    position: relative;
    width: 100%;
    height: 380px;
    background-image: linear-gradient(1deg, rgba(2, 118, 255, 0.44) 0%, rgba(2, 118, 255, 0.83) 73%);
    cursor: pointer;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
  }

  .main-section-5 .service-wrap .service-item-active .service-item-layer {
    opacity: 1;
  }

  .main-section-5 .service-wrap .service-item .info-wrap {
    position: absolute;
    top: 251px;
    left: 38px;
    transition: all 500ms ease-in-out;
  }

  .main-section-5 .service-wrap .service-item-active .info-wrap {
    position: absolute;
    top: 38px;
    left: 38px;
  }

  .main-section-5 .service-wrap .service-item .info-wrap .title {
    width: -moz-fit-content;
    width: fit-content;
    height: 25px;
  }

  .main-section-5 .service-wrap .service-item .info-wrap .title img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .main-section-5 .service-wrap .service-item .info-wrap .desc {
    width: 295px;
    margin-top: 19px;
    color: #fff;
    font-size: 21px;
  }

  .main-section-5 .service-wrap .service-item .show-more {
    position: absolute;
    bottom: -30px;
    left: 38px;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: all 500ms ease-in-out;
  }

  .main-section-5 .service-wrap .service-item .show-more i {
    display: inline-block;
    width: 10px;
    height: 8px;
    margin-left: 8px;
    background:
      url(../image/arrow-icon1.svg)
      no-repeat center;
    transition: all 0.5s ease-in-out;
  }

  .main-section-5 .service-wrap .service-item-active .show-more {
    position: absolute;
    bottom: 30px;
    left: 38px;
    opacity: 1;
  }

  .main-section-5 .service-wrap .service-item-active:hover .show-more i {
    animation-duration: 2000ms;
    animation-name: headShake;
  }

  @keyframes headShake {
    0% {
      transform: translateX(0);
    }

    6.5% {
      transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
      transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
      transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
      transform: translateX(2px) rotateY(3deg);
    }

    50% {
      transform: translateX(0);
    }
  }

  .main-section-5 .service-wrap li:nth-child(1) {
    background:
      url(../image/section5-img1.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-5 .service-wrap li:nth-child(2) {
    background:
      url(../image/section5-img2.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-5 .service-wrap li:nth-child(3) {
    background:
      url(../image/section5-img3.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-5 .service-wrap li:nth-child(4) {
    background:
      url(../image/section5-img4.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-5 .service-wrap li:nth-child(5) {
    background:
      url(../image/section5-img5.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-5 .service-wrap li:nth-child(6) {
    background:
      url(../image/section5-img6.png)
      no-repeat center;
    background-size: cover;
  }

  .main-section-6 {
    height: 1200px;
    margin-top: -582px;
    background:
      url(../image/section6-bg.png)
      no-repeat center;
  }

  .main-section-6 .contact-section {
    position: relative;
    z-index: 1;
    top: 720px;
    width: 92vw;
    height: 320px;
    margin: 0 auto;
    background:
      url()
      no-repeat center;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .main-section-6 .contact-form {
    position: absolute;
    margin-left: 64px;
  }

  .main-section-6 .contact-form .form-title {
    margin-top: 56px;
    font-size: 36px;
    font-weight: 600;
  }

  .main-section-6 .contact-form .form-desc {
    margin-top: 24px;
  }

  .main-section-6 .contact-form .form-btn {
    margin-top: 56px;
  }

  .main-section-6 .contact-form .form-btn > a {
    display: inline-block;
    width: 150px;
    padding: 11px 0;
    background: #fff;
    border-radius: 4px;
    color: #0276ff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
  }

  .main-section-6 .contact-form .form-btn > a:hover {
    color: #3591ff;
  }

  .main-section-6 .contact-section .contact-guide {
    position: absolute;
    top: -64px;
    left: calc(100% - 470px);
    width: 400px;
    height: 420px;
    background:
      url()
      no-repeat center / contain;
  }

  .main-section-6 .contact-section .contact-guide-move {
    animation: contact-guide-move 1.5s ease-in-out;
  }

  * {
    box-sizing: border-box;
  }

  /* 动画 */
  .diy-fadeInUp .top-move {
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-name: move1;
    animation-timing-function: linear;
  }

  .diy-fadeInUp .middle-move {
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-name: move2;
    animation-timing-function: linear;
  }

  .diy-fadeInUp .bottom-move {
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-name: move3;
    animation-timing-function: linear;
  }

  @keyframes move1 {
    0% {
      top: 46.5%;
    }

    50% {
      top: 47.5%;
    }

    100% {
      top: 46.5%;
    }
  }

  @keyframes move2 {
    0% {
      top: 50.5%;
    }

    50% {
      top: 51.5%;
    }

    100% {
      top: 50.5%;
    }
  }

  @keyframes move3 {
    0% {
      top: 56.5%;
    }

    50% {
      top: 57.5%;
    }

    100% {
      top: 56.5%;
    }
  }

  @keyframes contact-guide-move {
    0% {
      transform: translateX(3%);
    }

    100% {
      transform: translateX(0);
    }
  }
}