.section5 {
       position: relative;
   }

   .Box5 {
       position: relative;
   }

   .Box5Img {
       position: relative;
       z-index: 1;
   }

   .Box5Img .imgBox {
       position: relative;
       display: none;
       overflow: hidden;
   }

   .Box5Img .imgBox.cur {
       display: block;
   }

   .Box5Img .imgBox h1 {
       font-size: 48px;
       line-height: 1;
       color: #FFFFFF;
       position: absolute;
       z-index: 2;
       left: var(--container);
       top: 120px;
   }

   .Box5Img .imgBox .desc {
       position: absolute;
       z-index: 2;
       left: var(--container);
       top: 200px;
   }

   .Box5Img .imgBox .desc p {
       padding-left: 15px;
       font-size: 18px;
       line-height: 1;
       color: #FFFFFF;
       margin: 15px 0;
       border-left: 2px solid #fff;
   }

   .Box5Img .bj {
       position: relative;
       z-index: 1;
   }

   .Box5Img .bj .dian5 {
       position: absolute;
       z-index: 2;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
   }

   .Box5Img .bj .dian5 span {
       position: absolute;
       z-index: 1;
       width: 20px;
       height: 20px;
       background: #fff0;

       transition: 0.5s;


   }

   .Box5Img .bj .dian5 span::after {
       content: "";
       display: block;
       width: 30px;
       height: 30px;
       position: absolute;
       z-index: 1;
       left: 0;
       top: 0;
       border-radius: 50%;
       background: #fff;
       opacity: 0.5;
       transition: 0.5s;
       -webkit-animation: .75s linear infinite spinner-grow;
       animation: .75s linear infinite spinner-grow;
       opacity: 0.5;
   }

   .Box5Img .bj .dian5 span::before {
       content: "";
       display: block;
       position: absolute;
       z-index: 2;
       width: 20px;
       height: 20px;
       left: 5px;
       top: 5px;
       background: linear-gradient(180deg, #0BB3FF 0%, #096994 100%);
       border-radius: 50px;
   }

   .Box5Img .bj img {
       width: 100%;
       position: relative;
       z-index: 1;
   }

   .Box5Icon {
       position: absolute;
       top: 0;
       height: 100%;
       z-index: 2;
       right: var(--container);
       padding: 120px 0;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .Box5Icon .text {
       width: 380px;
       height: calc(25% - 10px);
       background: #FFFFFFcc;
       backdrop-filter: blur(10px);
       border-radius: 8px;
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .Box5Icon .text.cur {
       background: var(--color);
   }


   .Box5Icon .text img {
       width: 60px;
       height: 60px;
       object-fit: contain;
       margin-bottom: 10px;
   }

   .Box5Icon .text h1 {
       font-size: 22px;
       line-height: 1;
       color: #000;
   }

   .Box5Icon .text span {
       display: block;
       width: 80px;
       height: 3px;
       background: var(--color);
       position: absolute;
       bottom: 0;
   }

   .Box5Icon .text.cur img {
       filter: grayscale(1) brightness(0) invert(1);
   }

   .Box5Icon .text.cur h1 {
       color: #fff;
   }

   @media (max-width: 1440px) {
       .Box5Img .imgBox h1 {
           top: 80px;
       }

       .Box5Img .imgBox .desc {
           top: 140px;
       }

       .Box5Icon {
           padding: 45px 0;
       }

       .Box5Icon .text {
           width: 300px;
       }

       .Box5Icon .text img {
           width: 45px;
           height: 45px;
       }

       .Box5Icon .text h1 {
           font-size: 18px;
       }
   }

   @media (max-width:1200px) {
       .Box5 {
           position: relative;
           padding-bottom: 45px;
       }

       .Box5Img .imgBox h1 {
           padding-top: 60px;
           padding-left: var(--container);
           position: unset;
           color: #000;
           font-size: 32px;
       }

       .Box5Img .imgBox .desc {
           padding-left: var(--container);
           top: 0;
           position: unset;
       }

       .Box5Img .imgBox .desc p {
           font-size: 16px;
           line-height: 1.5;
           color: #000;
           border-left: 2px solid #000;
       }

       .Box5Icon {
           position: relative;
           padding: 10px 0;
           width: 100%;
           display: flex;
           flex-direction: row;
       }

       .Box5Icon .text {
           background: #00000030;
           height: 100px;
           width: calc(25% - 10px);
       }
   }

   @media (max-width:640px) {
       .Box5Icon {
           position: unset;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
       }

       .Box5Img .bj {
           width: 120%;
       }

       .Box5Icon .text h1 {
           font-size: 16px;
       }

       .Box5Icon .text img {
           width: 40px;
           height: 40px;
           margin-bottom: 5px;
       }

       .Box5Icon .text {
           height: 100px;
           margin: 5px;
           width: calc(50% - 10px);
       }
   }