.Box1 {
     position: relative;
     height: 0;
     width: 100%;
     padding-top: 30%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .Box1 .Banner {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0%;
     left: 0%;
     /* transform: translate(-0%,-0%); */
 }


 .Box1 .Banner .slick-list,
 .Box1 .Banner .slick-track {
     height: 100%;
 }

 .Box1 .Banner .slick-next,
 .Box1 .Banner .slick-prev {
     display: none !important;
 }

 .Box1 .Banner .imgs {
     position: relative;
 }

 .Box1 .Banner .imgs img.box:nth-child(1) {

     width: 100%;
     height: 100%;
     object-fit: cover;
 }










 .Box1 .Banner .imgs .Banner1-text {
     width: 37.5%;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     text-align: center;
     color: white;
 }

 @media screen and (max-width:1500px) and (min-width:1400px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 37%;
     }
 }

 @media screen and (max-width:1350px) and (min-width:1255px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 36.7%;
     }
 }

 @media screen and (max-width:1255px) and (min-width:1200px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 36.3%;
     }
 }

 @media screen and (max-width:1200px) and (min-width:1100px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 49%;
     }
 }

 @media screen and (max-width:1100px) and (min-width:1059px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 53%;
     }
 }

 @media screen and (max-width:1059px) and (min-width:991px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 57%;
     }
 }

 .Box1 .Banner .imgs .Banner1-text .col-lg-4 {
     position: relative;
 }

 .Box1 .Banner .imgs .Banner1-text .col-lg-4:not(:nth-child(3))::before {
     position: absolute;
     width: 1px;
     height: 40%;
     right: 0;
     bottom: 0;
     content: '';
     background-color: white;
 }

 .Box1 .Banner .imgs .Banner1-text .icon {
     border: 1px solid #fff;
     border-radius: 9999px;
     width: 95px;
     height: 95px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
 }

 .Box1 .Banner .imgs .Banner1-text .icon img {
     width: 40px;
     height: 40px;
     object-fit: contain;
 }

 .Box1 .Banner .imgs .Banner1-text span {
     display: flex;
     justify-content: center;
     margin-top: 40px;
     align-items: end;

 }

 .Box1 .Banner .imgs .Banner1-text span h4 {
     font-size: 33px;
     margin-bottom: 0;
     font-weight: bold;
 }

 .Box1 .Banner .imgs .Banner1-text span h6 {
     font-size: 26px;
     font-weight: normal;
     margin-bottom: 0;
 }

 .Box1 .Banner .imgs .Banner1-text p {
     font-size: 16px;
 }

 .Box1 .Banner .imgs .Banner2-text {
     position: absolute;
     width: 45%;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
 }

 .Box1 .Banner .imgs .Banner2-text {
     text-align: right;
     color: white;
 }



 .Box1 .Banner .imgs .Banner2-text h1 {
     font-size: 54px;
     position: relative;
     color: transparent;
 }

 .Box1 .Banner .imgs .Banner2-text h1::before {
     position: absolute;
     content: '';
     width: 600px;
     height: 100%;
     background-image: url('../img/banner/font.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: 100% auto;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
 }

 @media screen and (max-width:1440px) {
     .Box1 .Banner .imgs .Banner2-text h1::before {
         width: 500px;
     }
 }


 .Box1 .Banner .imgs .Banner2-text img {
     width: 65%;
     float: right;
 }

 .Box1 .Banner .imgs .Banner3-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 87%;
     height: fit-content;
 }

 .Box1 .Banner .imgs .Banner3-text .tit {
     color: white;
 }

 .Box1 .Banner .imgs .Banner3-text .tit h4 {
     font-size: 70px;
     font-weight: bold;
     text-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
 }


 .Box1 .Banner .imgs .Banner3-text .tit h4 span {
     font-size: 25px;
 }


 .Box1 .Banner .imgs .Banner3-text .box {
     position: relative;
 }

 /* .Box1 .Banner .imgs .Banner3-text .box  img{
    opacity: 0;
 }
 .Box1 .Banner .imgs .Banner3-text .box::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-image: url('../img/index/首页-Banner3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% contain; 
    z-index: 9;
} */

 .Box1 .Banner .imgs .Banner3-text .box img {
     object-fit: contain;
     width: 100%;
 }



 .Box1 .Banner .imgs .Banner4-text {
     width: 80%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
 }

 .Box1 .Banner .imgs .Banner4-text h5 {
     font-weight: bold;
     font-size: 60px;
 }

 .Box1 .Banner .imgs .Banner4-text span {
     font-size: 25px;
     display: block;
     height: fit-content;
 }


 /* 默认桌面样式 - 横向圆点 */
 .Box1 .Banner .slick-dots {
     position: absolute;
     bottom: 20px;
     display: flex !important;
     justify-content: center;
     width: 100%;
     padding: 0;
     margin: 0;
     list-style: none;
     z-index: 4;
 }

 .Box1 .Banner .slick-dots li {
     margin: 0 5px;
 }

 .Box1 .Banner .slick-dots li .custom-dot {
     width: 36px;
     height: 5px;
     background: #ccc;
     opacity: 0.5;
     cursor: pointer;
     transition: all 0.3s ease;
     border-radius: 2px;
 }

 .Box1 .Banner .slick-dots li.slick-active .custom-dot {
     background: #ff0000;
     opacity: 1;
 }

 .Box1 button.left {
     position: absolute;
     left: 0;
     bottom: 0;
     transform: rotate(180deg);
     z-index: 4;
     width: 50px;
     height: 70px;
     font-size: 24px;
     border: none;
     background-color: #0c0c0c49;
     color: #fff;
     transition: 0.3s;
 }

 .Box1 button.right {
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 4;
     width: 50px;
     height: 70px;
     font-size: 24px;
     border: none;
     background-color: #0c0c0c49;
     color: #fff;
     transition: 0.3s;
 }

 .Box1 .Banner .imgs .bannerImg {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .Box1 {
     position: relative !important;
 }



 .Box1 .Banner .slick-dots li .custom-dot {
     width: 40px;
 }

 .Box1 .Banner .slick-dots li.slick-active .custom-dot {
     background-color: #cccccc81;
     opacity: 1;
     position: relative;
     overflow: hidden;
 }

 .Box1 .Banner .slick-dots li.slick-active .custom-dot::before {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #E6212A;
     content: '';
     opacity: 1;
     transform: translateX(-100%);
     animation: toright 6s ease-out both;
 }

 @keyframes toright {
     to {
         transform: translateX(0);
     }
 }

 @keyframes wipeIn {
     from {
         clip-path: inset(0 100% 0 0);
         opacity: 0;
     }

     to {
         clip-path: inset(0 0 0 0);
         opacity: 1;
     }
 }

 @keyframes slideInLeft {
     from {
         transform: translateX(-50px);
         opacity: 0;
     }

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

 @keyframes slideInRight {
     from {
         transform: translateX(50px);
         opacity: 0;
     }

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

 .Box1 .Banner1-text>div,
 .Box1 .Banner2-text h1,
 .Box1 .Banner2-text img,
 .Box1 .Banner3-text .tit h4,
 .Box1 .Banner3-text .box,
 .Box1 .Banner4-text h5,
 .Box1 .Banner4-text span {
     opacity: 0;
 }

 .Box1 .Banner1-text>div {
     transform: translateX(-50px);
 }

 .Box1 .Banner2-text h1 {
     transform: translateX(-80px);
 }

 .Box1 .Banner2-text img {
     transform: translateX(80px);
 }

 .Box1 .Banner3-text .tit h4 {
     transform: translateX(-50px);
 }

 .Box1 .Banner3-text .box {
     transform: translateY(30px);
 }

 .Box1 .Banner4-text h5 {
     transform: translateX(-80px);
 }

 .Box1 .Banner4-text span {
     transform: translateX(80px);
 }

 .Box1 .slick-active .Banner1-text>div,
 .Box1 .slick-active .Banner2-text h1,
 .Box1 .slick-active .Banner3-text .tit h4,
 .Box1 .slick-active .Banner3-text .box,
 .Box1 .slick-active .Banner4-text h5 {
     animation:
         wipeIn 1s ease-out both,
         slideInLeft 1s ease-out both;
 }

 .Box1 .slick-active .Banner2-text img,
 .Box1 .slick-active .Banner4-text span {
     animation:
         wipeIn 1s ease-out both,
         slideInRight 1s ease-out both;
 }

 .Box1 .slick-active .Banner1-text>div:nth-child(1) {
     animation-delay: 0.3s, 0.3s;
 }

 .Box1 .slick-active .Banner1-text>div:nth-child(2) {
     animation-delay: 0.6s, 0.6s;
 }

 .Box1 .slick-active .Banner1-text>div:nth-child(3) {
     animation-delay: 0.9s, 0.9s;
 }

 .Box1 .slick-active .Banner2-text h1 {
     animation-delay: 0.5s, 0.5s;
 }

 .Box1 .slick-active .Banner2-text img {
     animation-delay: 0.8s, 0.8s;
 }

 .Box1 .slick-active .Banner3-text .tit h4 {
     animation-delay: 0.4s, 0.4s;
 }

 .Box1 .slick-active .Banner3-text .box:nth-child(1) {
     animation-delay: 0.6s, 0.6s;
 }

 .Box1 .slick-active .Banner3-text .box:nth-child(2) {
     animation-delay: 0.8s, 0.8s;
 }

 .Box1 .slick-active .Banner4-text h5 {
     animation-delay: 0.5s, 0.5s;
 }

 .Box1 .slick-active .Banner4-text span {
     animation-delay: 0.8s, 0.8s;
 }





 @media screen and (min-width:576px) {
     .Box1 {
         height: 300px;
     }

     .Box1 .Banner .imgs .text {
         top: 40%;
     }

     .Box1 .Banner .imgs .text h6 {
         font-size: 14px !important;
     }

     .Box1 .Banner .imgs .text h5 {
         font-size: 25px !important;
     }

     .Box1 .Banner .imgs .text a {
         margin-top: 25px !important;
     }
 }

 @media screen and (min-width:768px) {
     .Box1 {
         height: 350px;
     }

     .Box1 .Banner .imgs .text {
         top: 35%;
     }

     .Box1 .Banner .imgs .text h5 {
         font-size: 35px !important;
     }

     .Box1 .Banner .imgs .text h6 {
         font-size: 16px !important;
         margin: 0;
     }
 }

 @media screen and (min-width:991px) {
     .Box1 {
         height: 400px;
     }

     .Box1 .Banner .imgs .text a {
         margin-top: 50px !important;
     }

     .Box1 .Banner .imgs .text h5 {
         font-size: 42px !important;
     }

     .Box1 .Banner .imgs .text h6 {
         font-size: 20px;
     }

     .Box1 .Banner .imgs .text {
         top: 50%;
     }
 }

 @media screen and (min-width:1400px) {
     .Box1 {
         height: 450px;
     }
 }

 @media screen and (max-width:576px) {
     .Box1 {
         height: 300px;
     }

     .Box1 .Banner .imgs .text h6 {
         font-size: 14px;
     }

     .Box1 .Banner .imgs .text h5 {
         font-size: 25px;
     }

     .Box1 .Banner .imgs .text a {
         margin-top: 25px;
     }

     .Box1 .Banner .imgs .text {
         top: 40%;
     }
 }

 @media screen and (max-width:1700px) {
     .Box1 .Banner .imgs .Banner3-text .tit h4 {
         font-size: 60px;
     }
 }

 @media screen and (max-width:1600px) {
     .Box1 .Banner .imgs .Banner1-text .icon {
         width: 75px;
         height: 75px;
     }

     .Box1 .Banner .imgs .Banner1-text .icon img {
         width: 30px;
         height: 30px;
     }

     .Box1 .Banner .imgs .Banner1-text span h4 {
         font-size: 28px;
     }

     .Box1 .Banner .imgs .Banner1-text span h6 {
         font-size: 24px;
     }

     .Box1 .Banner .imgs .Banner1-text span {
         font-size: 12px;
     }

     .Box1 .Banner .imgs .Banner2-text h1 {
         font-size: 45px;
     }

     .Box1 .Banner .imgs .Banner2-text img {
         width: 60%;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 {
         font-size: 50px;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 span {
         font-size: 23px;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts {
         padding: 10px;
     }

     .Box1 .Banner .imgs .Banner4-text h5 {
         font-size: 50px;
     }

     .Box1 .Banner .imgs .Banner4-text span {
         font-size: 22px;
     }
 }

 @media screen and (max-width:1400px) {
     .Box1 .Banner .imgs .Banner3-text {
         width: 90%;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 {
         font-size: 40px;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 span {
         font-size: 20px;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts p a {
         font-size: 16px;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts ul li {
         font-size: 15px;
     }

     .Box1 .Banner .imgs .Banner3-text .col-6.row {
         padding: 0;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts .time {
         margin-top: 10px;
     }
 }

 @media screen and (max-width:1200px) {
     .Box1 {
         height: 440px;
     }

     .Box1 .Banner .imgs.i1 img {
         width: auto;
     }

     .Box1 .Banner .imgs .Banner2-text h1 {
         font-size: 40px;
     }

     .Box1 .Banner .imgs .Banner2-text img {
         width: 70%;
     }

     .Box1 .Banner .imgs .Banner3-text {
         width: 95%;
     }

     .Box1 .Banner .imgs .Banner4-text h5 {
         font-size: 40px;
     }

     .Box1 .Banner .imgs .Banner4-text span {
         font-size: 18px;
     }

     .Box1 .Banner .imgs .Banner2-text h1::before {
         width: 400px;
     }
 }

 @media screen and (max-width:991px) {
     .Box1 .Banner .imgs.i1 img {
         width: 100%;
     }

     .Box1 .Banner .imgs .Banner1-text span {
         margin: 0;
     }

     .Box1 .Banner .imgs .Banner1-text .col-lg-4:not(:nth-child(3))::before {
         display: none;
     }

     .Box1 .Banner .imgs .Banner1-text .icon {
         width: 60px;
         height: 60px;
     }

     .Box1 .Banner .imgs .Banner2-text {
         width: 55%;
     }

     .Box1 .slick-active .Banner3-text .box:nth-child(2) {
         display: none;
     }

     .Box1 .Banner .imgs .Banner4-text h5 {
         font-size: 35px;
     }

     .Box1 .Banner .imgs .Banner4-text span {
         font-size: 16px;
     }

 }

 @media screen and (max-width:991px) and (min-width:900px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 32%;
     }
 }

 @media screen and (max-width:900px) and (min-width:850px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 30%;
     }
 }

 @media screen and (max-width:850px) and (min-width:768px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 28%;
     }

 }

 @media screen and (max-width:768px) {
     .Box1 {
         height: 380px;
     }

     .Box1 .Banner .imgs .Banner1-text .icon {
         width: 50px;
         height: 50px;
     }

     .Box1 .Banner .imgs .Banner1-text .icon img {
         width: 25px;
         height: 25px;
     }

     .Box1 .Banner .imgs .Banner1-text span h4 {
         font-size: 24px;
     }

     .Box1 .Banner .imgs .Banner1-text span h6 {
         font-size: 20px;
     }

     .Box1 .Banner .imgs .Banner1-text .col-lg-4 {
         padding: 0;
     }

     .Box1 .Banner .imgs .Banner2-text h1 {
         font-size: 29px;
     }

     .Box1 .Banner .imgs .Banner2-text h1::before {
         width: 300px;
     }

     .Box1 .Banner .imgs .Banner2-text img {
         width: 80%;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts ul {
         display: none;
     }

     .Box1 .Banner .imgs .Banner3-text .img {
         padding-top: 60%;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts p a {
         -webkit-line-clamp: 3;
     }

     .Box1 .Banner .imgs .Banner4-text h5 {
         font-size: 30px;
     }
 }

 @media screen and (max-width:768px) and (min-width:600px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 28%;
     }
 }

 @media screen and (max-width:600px) and (min-width:576px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 25%;
     }

 }

 @media screen and (max-width:576px) {
     .Box1 {
         height: 300px;
     }

     .Box1 .Banner .imgs.i1 img {
         width: 115%;
     }

     .Box1 .Banner .imgs .Banner1-text .col-lg-4:nth-child(1) {
         display: none;
     }

     .Box1 .Banner .imgs .Banner2-text img {
         width: 85%;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 {
         font-size: 30px;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 span {
         font-size: 15px;
         display: block;
     }

     .Box1 .Banner .imgs .Banner3-text .box .texts p a {
         font-size: 14px;
     }

     .Box1 .Banner .imgs .Banner4-text h5 {
         font-size: 25px;
     }

     .Box1 .Banner .imgs .Banner2-text {
         width: 57%;
     }

     .Box1 .Banner .imgs .Banner2-text h1 {
         height: 100px;
     }

     .Box1 .Banner .imgs .Banner2-text h1::before {
         display: none;
     }

     .Box1 .Banner .imgs .Banner2-text h1::after {
         content: '';
         position: absolute;
         background-image: url('../img/banner/font2.png');
         background-position: center;
         background-repeat: no-repeat;
         background-size: 100% auto;
         height: 100%;
         width: 80%;
         right: 0;
         bottom: 0;
     }
 }

 @media screen and (max-width:576px) and (min-width:500px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 35%;
     }
 }

 @media screen and (max-width:500px) and (min-width:450px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 32%;
     }
 }

 @media screen and (max-width:450px) {
     .Box1 .Banner .imgs .Banner1-text {
         width: 30%;
     }
 }


 @media screen and (max-width:576px) {
     .Box1 .Banner .slick-dots li .custom-dot {
         width: 30px;
         height: 3px;
     }

     .Box1 button.right,
     .Box1 button.left {
         font-size: 20px;
         width: 45px;
         height: 60px;
     }



 }




 .Box2 {
     margin-top: 80px;
     position: relative;
 }

 .Box2::before {
     content: "";
     display: block;
     width: 40%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 8%;
     background-image: url('../img/index/index-about.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 .Box2 .img {
     position: relative;
     overflow: hidden;
     width: 30%;
 }

 .Box2 .img::before {
     position: absolute;
     content: '';
     left: 0;
     top: 0;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 1;
     width: 100%;
     height: 100%;
 }

 .Box2 .img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
 }

 .Box2 .row {
     margin: 0 auto;

 }

 .Box2 .row span {
     font-size: 16px;
     color: #E6212A;
     position: relative;
     font-weight: bold;
 }

 .Box2 .row span::before {
     content: '';
     position: absolute;
     width: 30%;
     height: 2px;
     background-color: #E6212A;
     left: 110%;
     top: 50%;
     transform: translateY(-50%);
 }

 .Box2 .row h6 {
     font-size: 40px;
     /* font-family: "Roboto Slab", serif; */
     color: black;
     margin-bottom: 20px;
 }

 .Box2 .row p {
     color: #333;
 }

 .Box2 .p4 {
     position: absolute;
     bottom: 0;
     left: 8%;
     width: 40%;
     height: 100%;
 }

 @media screen and (max-width:991px) {
     .Box2 .p4 {
         left: 0;
     }
 }

 .Box2 .p4 img {
     width: 100%;
     max-height: 200px;
     object-fit: cover;
 }

 .Box2 .p4 .play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
 }

 .Box2 .p4 .play::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
 }

 .Box2 .p4 .play span {
     display: block;
     width: 60px;
     height: 60px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #ff0000;
     border-radius: 999px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }

 .Box2 .p4 .play .iconfont {
     font-size: 30px;
     text-align: center;
     color: #ffffff;
     z-index: 4;
 }

 .Box2 .p4 .play span::before {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     width: calc(100% + 20px);
     height: calc(100% + 20px);
     border: 5px solid #fff;
     animation-name: pulseInOut;
     opacity: 0;
     border-radius: 50%;
     animation-duration: 3s;
     animation-iteration-count: infinite;
 }

 .Box2 .p4 .play span::after {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     width: calc(100% + 20px);
     height: calc(100% + 20px);
     border: 5px solid #fff;
     animation-name: pulseInOut;
     opacity: 0;
     border-radius: 50%;
     animation-duration: 3.5s;
     animation-iteration-count: infinite;
 }

 @keyframes pulseInOut {
     0% {
         opacity: 1;
         transform: scale(.3)
     }

     100% {
         opacity: 0;
         transform: scale(1.7)
     }
 }

 .Box2 .p4 .video-trigger {
     cursor: pointer;
     color: #fff;
     background: rgba(0, 0, 0, 0.6);
     padding: 12px 24px;
     border-radius: 30px;
     font-size: 18px;
     font-weight: bold;
     transition: all 0.3s ease;
     display: inline-block;
     backdrop-filter: blur(2px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .Box2 .p4 .video-trigger:hover {
     transform: translate(-50%, -50%) scale(1.1);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }

 .Box2 .p4 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 100;
 }

 .Box2 .p4 .video-popup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.95);
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 101;
     width: 80%;
     max-width: 900px;
 }

 .Box2 .p4 .video-container {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
 }

 .Box2 .p4 .video-container video {
     width: 100%;
     display: block;
     border: none;
 }

 .Box2 .p4 .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     border: none;
     border-radius: 50%;
     font-size: 22px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 102;
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .Box2 .p4 .close-btn:hover {
     background: rgba(255, 0, 0, 0.7);
     transform: rotate(90deg);
 }

 .Box2 .p4 .overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .Box2 .p4 .video-popup.active {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%) scale(1);
 }

 @media screen and (max-width:991px) {
     .Box2::before {
         display: none;
     }

     .Box2 .p4 {
         position: relative;
         width: 100%;
         height: 300px;
     }

     .Box2 .p4 .play {
         position: relative;
     }

     .Box2 .p4 .play::before {
         background-color: rgb(0 0 0 / 40%);
     }

     .Box2 .p4 .play::after {
         content: "";
         display: block;
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-image: url(../img/index/index-about.png);
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
         z-index: -1;
     }
 }

 @media screen and (max-width:576px) {
     .Box2 .row span {
         font-size: 14px;
     }

     .Box2 .row h6 {
         font-size: 28px;
     }
 }




 .corporate-vision-enhanced.Box3 {
     /* max-width: 1200px; */
     margin: 0 auto;
     padding: 80px 20px;
     /* background-color: #f5f5f5; */
     position: relative;
     overflow: hidden;
 }

 .Box3 .ve-header {
     text-align: center;
     margin-bottom: 60px;
     position: relative;
 }

 .Box3 .ve-subtitle {
     display: inline-block;
     font-size: 14px;
     letter-spacing: 3px;
     color: #d32f2f;
     text-transform: uppercase;
     margin-bottom: 15px;
     background: rgba(211, 47, 47, 0.1);
     padding: 8px 20px;
     border-radius: 20px;
 }

 .Box3 .ve-title {
     /* font-family: "Roboto Slab", serif; */
     font-size: 42px;
     font-weight: 700;
     color: #333;
     margin: 15px 0;
     position: relative;
     display: inline-block;
 }

 .Box3 .ve-title:after {
     content: "";
     position: absolute;
     width: 50%;
     height: 3px;
     background: linear-gradient(to right, transparent, #d32f2f, transparent);
     bottom: -10px;
     left: 25%;
 }

 .ve-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 30px;
 }

 .divider-line {
     width: 80px;
     height: 1px;
     background: #ddd;
 }

 .divider-diamond {
     width: 10px;
     height: 10px;
     background: #d32f2f;
     transform: rotate(45deg);
     margin: 0 15px;
 }

 .ve-cards-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     position: relative;
     z-index: 2;
 }

 .Box3 .ve-card {
     flex: 1;
     min-width: 300px;
     max-width: 360px;
     perspective: 1000px;
 }

 .Box3 .ve-card-inner {
     position: relative;
     background: white;
     border-radius: 8px;
     padding: 40px 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.5s ease;
     height: 100%;
     transform-style: preserve-3d;
 }

 .Box3 .ve-card:hover .ve-card-inner {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
 }

 .Box3 .ve-highlight .ve-card-inner {
     border-top: 4px solid #d32f2f;
 }

 .Box3 .ve-icon-wrapper {
     position: relative;
     width: 80px;
     height: 80px;
     margin: 0 auto 30px;
 }

 .Box3 .ve-icon-bg {
     position: absolute;
     width: 100%;
     height: 100%;
     background: #f0f0f0;
     border-radius: 50%;
     top: 0;
     left: 0;
     transform: scale(0.95);
     transition: all 0.3s ease;
 }

 .Box3 .ve-icon {
     position: relative;
     font-size: 32px;
     color: #d32f2f;
     line-height: 80px;
     text-align: center;
     display: block;
     z-index: 2;
 }

 .Box3 .ve-icon-pulse {
     position: absolute;
     width: 100%;
     height: 100%;
     border: 1px solid rgba(211, 47, 47, 0.3);
     border-radius: 50%;
     top: 0;
     left: 0;
     animation: pulse 3s infinite;
     opacity: 0;
 }

 .Box3 .ve-card:hover .ve-icon-bg {
     transform: scale(1);
     background: rgba(211, 47, 47, 0.1);
 }

 .Box3 .ve-card-title {
     font-size: 22px;
     font-weight: bold;
     color: #000;
     margin-bottom: 20px;
     text-align: center;
     position: relative;
 }

 .Box3 .ve-card-divider {
     width: 50px;
     height: 2px;
     background: linear-gradient(to right, #f5f5f5, #d32f2f, #f5f5f5);
     margin: 0 auto 20px;
 }

 .Box3 .ve-card-content {
     color: #333;
     line-height: 1.7;
     text-align: center;
     margin: 0;
     font-size: 16px;
 }

 .Box3 .ve-card-corner {
     position: absolute;
     width: 30px;
     height: 30px;
     border-right: 2px solid #d32f2f;
     border-top: 2px solid #d32f2f;
     top: 0;
     right: 0;
     opacity: 0.3;
     transition: all 0.3s ease;
 }

 .Box3 .ve-card:hover .ve-card-corner {
     width: 40px;
     height: 40px;
     opacity: 1;
 }

 .Box3 .ve-highlight-badge {
     position: absolute;
     top: -10px;
     right: -10px;
     background: #d32f2f;
     color: white;
     font-size: 12px;
     font-weight: bold;
     padding: 5px 15px;
     border-radius: 20px;
     box-shadow: 0 3px 10px rgba(211, 47, 47, 0.3);
 }

 .Box3 .ve-footer {
     margin-top: 60px;
     text-align: center;
     position: relative;
 }

 .Box3 .ve-footer-line {
     width: 100%;
     height: 1px;
     background: linear-gradient(to right, transparent, #ddd, transparent);
     margin-bottom: 20px;
 }

 .Box3 .ve-footer-text {
     color: #999;
     font-size: 14px;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.95);
         opacity: 0;
     }

     50% {
         opacity: 0.7;
     }

     100% {
         transform: scale(1.3);
         opacity: 0;
     }
 }

 .Box3 i.iconfont {
     z-index: 2;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     font-size: 35px;
     color: #d32f2f;
     font-weight: bold;
 }

 /* 背景装饰元素 */
 .Box3.corporate-vision-enhanced:before {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: rgba(211, 47, 47, 0.03);
     border-radius: 50%;
     top: -150px;
     right: -150px;
 }

 .Box3.corporate-vision-enhanced:after {
     content: "";
     position: absolute;
     width: 200px;
     height: 200px;
     background: rgba(211, 47, 47, 0.03);
     border-radius: 50%;
     bottom: -100px;
     left: -100px;
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
     .ve-title {
         font-size: 32px;
     }

     /* .ve-cards-container {
         flex-direction: column;
         align-items: center;
     } */

     .ve-card {
         max-width: 100%;
     }

 }

 @media screen and (max-width:576px) {
     .Box3 .ve-title {
         font-size: 33px;
     }
 }



 .Box5 .row.wBox {
     margin: 0 auto;
     padding: 50px 0;
 }

 .Box5 .row .Left h2 {
     /* font-family: "Roboto Slab", serif; */
     font-size: 42px;
     font-weight: 700;
     color: #333;
     margin: 15px auto;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }

 .Box5 .row .Left h2:after {
     content: "";
     position: absolute;
     width: 50%;
     height: 3px;
     background: linear-gradient(to right, transparent, #d32f2f, transparent);
     bottom: -10px;
     left: 25%;
 }



 .Box5 .row .right {
     left: 12px;
     margin-top: 50px;
 }

 .Box5 .row .right .box {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     background-color: #fff;
     margin-bottom: 30px;
 }

 .Box5 .row .right .box .imgs {
     width: 100%;
     height: 0;
     padding-top: 75%;
     position: relative;
     /* background-color: red; */
     overflow: hidden;
 }

 .Box5 .row .right .box .imgs img {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     object-fit: cover;
 }

 .Box5 .row .right .box .text {
     padding: 20px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     position: relative;
     opacity: 1;
 }

 .Box5 .row .right .box .text .time {
     font-size: 16px;
     color: #000;
 }

 .Box5 .row .right .box .text .time i {
     color: #E6212A;
     font-size: 16px;
     font-weight: bold;
 }

 .Box5 .row .right .box .text h6 {
     font-size: 15px;
     font-weight: bold;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 20px 0 30px 0;
     color: #333;
     height:40px;
 }

 /* From Uiverse.io by satyamchaudharydev */
 .Box5 .row .right .box .text button {
     --primary-color: #E6212A;
     --secondary-color: #fff;
     --hover-color: #ff3300;
     --arrow-width: 10px;
     --arrow-stroke: 2px;
     box-sizing: border-box;
     border: 0;
     border-radius: 20px;
     color: var(--secondary-color);
     padding: 9px 18px;
     background: var(--primary-color);
     display: flex;
     transition: 0.2s background;
     align-items: center;
     gap: 0.6em;
     font-weight: bold;
     margin-bottom: 20px;
     font-size: 14px;
     text-transform: uppercase;
 }

 .Box5 .row .right .box .text button .arrow-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .Box5 .row .right .box .text button .arrow {
     margin-top: 1px;
     width: var(--arrow-width);
     background: var(--primary-color);
     height: var(--arrow-stroke);
     position: relative;
     transition: 0.2s;
 }

 .Box5 .row .right .box .text button .arrow::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
     border: solid var(--secondary-color);
     border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
     display: inline-block;
     top: -3px;
     right: 3px;
     transition: 0.2s;
     padding: 3px;
     transform: rotate(-45deg);
 }

 .Box5 .row .right .box:hover .text button {
     background-color: var(--hover-color);
 }

 .Box5 .row .right .box .text:hover button .arrow {
     background: var(--secondary-color);
 }

 .Box5 .row .right .box .text:hover button .arrow:before {
     right: 0;
 }

 .Box5 .slick-list {
     height: fit-content;
     margin-bottom: 20px;
 }

 .Box5 .slick-prev.slick-arrow,
 .Box5 .slick-next.slick-arrow {
     display: none !important;
 }

 .Box5 .slick-initialized .slick-slide {
     padding: 0 10px;
 }

 .Box5 .row .right .slick-dots {
     display: flex;
     justify-content: center;
     list-style: none;
     padding: 0;
 }

 .Box5 .row .right .slick-dots li {
     margin: 0 5px;
 }

 .Box5 .row .right .slick-dots li .custom-dot {
     width: 20px;
     height: 4px;
     background-color: #ccc;
     transition: all 0.3s ease;
     border-radius: 10px;
 }

 .Box5 .row .right .slick-dots li.slick-active .custom-dot {
     background-color: #E6212A;
     transform: scale(1.5, 1);
     /* 水平方向放大1.5倍 */
     transform-origin: center center;
 }

 @media screen and (max-width:1200px) {
     .Box5 .row .right {
         margin-top: 30px;
     }

     .Box5 .row .Left button {
         padding: 13px 18px;
         margin-top: 0;
     }
 }


 /* 主容器设置 */
 .double-column-categories {
     display: flex;
     flex-wrap: wrap;
     /* grid-template-columns: repeat(2, 1fr); */
     gap: 25px;
     width: 100%;
     max-width: 1440px;
     margin: 0 auto;
     padding: 30px;
     box-sizing: border-box;
 }

 /* 大类卡片样式 - 高度调整为400px */
 .large-category {
     width: 49%;
     position: relative;
     height: 400px;
     /* 调整为400px高度 */
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 @media screen and (max-width:991px) {
     .large-category {
         height: 460px;
     }
 }


 /* 分类标题区域 - 紧凑布局 */
 .category-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     z-index: 3;
     color: white;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .category-header h2 {
     font-size: 24px;
     /* 减小字号 */
     margin: 0 0 8px;
     font-weight: 600;
 }

 .category-header p {
     font-size: 14px;
     /* 减小字号 */
     margin: 0;
     opacity: 0.9;
 }

 /* 分类主图 - 紧凑布局 */
 .category-image {
     position: relative;
     height: 100%;
 }

 .category-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .category-image::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
 }

 /* 子分类网格 - 紧凑布局 */
 .subcategories-grid {
     position: absolute;
     bottom: -100%;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(8px);
     /* 模糊效果 */
     -webkit-backdrop-filter: blur(8px);
     /* 兼容 Safari */
     padding: 20px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
     z-index: 10;
     transition: bottom 0.4s ease;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
     border-radius: 0 0 16px 16px;
 }

 .subcategories-grid-text {
     position: absolute;
     bottom: -100%;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(8px);
     /* 模糊效果 */
     -webkit-backdrop-filter: blur(8px);
     /* 兼容 Safari */
     padding: 20px;
     z-index: 10;
     transition: bottom 0.4s ease;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
     border-radius: 0 0 16px 16px;

 }

 /* 子分类卡片 - 紧凑设计 */
 .subcategory-card {
     display: flex;
     background-color: white;
     flex-direction: column;
     text-decoration: none;
     color: #333;
     transition: all 0.3s ease;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
 }

 .subcategory-card img {
     width: 100%;
     height: 90px;
     /* 减小图片高度 */
     object-fit: contain;
     transition: transform 0.4s ease;

 }

 .subcategory-info {
     padding: 12px;
     background: white;
 }

 .subcategory-info h4 {
     font-size: 14px;
     /* 减小字号 */
     margin: 0;
     font-weight: 600;
     text-align: center;
 }

 /* See More 按钮 - 紧凑设计 */
 .PList {
     display: flex;
     align-items: center;
     justify-content: center;
     grid-column: span 2;
     padding: 12px;
     background: #f8fafc;
     color: #d32f2f;
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     border-radius: 6px;
     transition: all 0.3s ease;
     margin-top: 5px;
 }

 /* 悬停效果 */
 .large-category:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
 }

 .large-category:hover .category-image img {
     transform: scale(1.05);
 }

 .large-category:hover .subcategories-grid,
 .large-category:hover .subcategories-grid-text {
     bottom: 0;
 }

 .subcategory-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .subcategory-card:hover img {
     transform: scale(1.08);
 }

 .PList:hover {
     background: #d32f2f;
     color: white;
     transform: translateY(-2px);
 }

 /* 响应式设计 */
 @media screen and (max-width:1400px) {
     .double-column-categories {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-column-gap: 20px;
         grid-row-gap: 20px;
     }

     .large-category {
         width: 100%;
     }
 }

 @media (max-width: 1024px) {
     .double-column-categories {
         padding: 25px;
     }
 }

 @media screen and (max-width:991px) {
     .subcategories-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .subcategory-card {
         background-color: white;
     }

     .PList {
         margin-top: 0;
     }

     .subcategories-grid {
         gap: 10px;
     }

     .subcategory-card img {
         width: 80%;
         height: 90px;
         object-fit: contain;
         transition: transform 0.4s ease;
         margin: 0 auto;
     }
 }


 @media (max-width: 768px) {
     .double-column-categories {
         grid-template-columns: 1fr;
         gap: 20px;
         padding: 20px;
     }

     .large-category {
         height: 400px;
     }

     .subcategories-grid {
         grid-template-columns: repeat(3, 1fr);
     }





 }

 @media (max-width: 500px) {
     .subcategories-grid {
         bottom: -160%;
     }

     .subcategories-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .subcategory-card:nth-child(3),
     .subcategory-card:nth-child(4) {
         /* display: none; */
     }
 }

 @media (max-width: 480px) {
     .subcategories-grid {
         /* grid-template-columns: 1fr; */
         padding: 15px;
         gap: 12px;
     }

     .PList {
         grid-column: span 2;
         margin-top: 0;
     }

     .subcategory-card img {
         height: 75px;
     }

     .subcategory-card img {
         width: 75%;
     }
 }








 @media screen and (max-width:576px) {
     .ve-cards-container {
         gap: 20px;
     }

     .Box3 .ve-card {
         min-width: auto;
         max-width: none;
         flex: none;
     }

     .Box3 .ve-card:nth-child(1),
     .Box3 .ve-card:nth-child(2) {
         width: 47%;
     }

     .Box3 .ve-card:nth-child(3) {
         width: 100%;
     }

     .Box3 .ve-card-inner {
         padding: 25px 20px;
     }

     .Box3 .ve-card-content br {
         display: none;
     }

     .subcategory-info {
         padding: 10px;
     }


     .category-image {
         height: auto;
     }

     .category-image img {
         height: auto;
     }

     .large-category {
         height: auto;
     }

     .subcategory-card:nth-child(3),
     .subcategory-card:nth-child(4) {
         display: none;
     }

     .PList {
         padding: 10px;
     }

     .subcategories-grid-text {
         padding: 10px 20px;
     }

     .Box1 {
         height: auto;
         padding: 0;
         display: block;
     }

     .Box1 .Banner {
         height: auto;
         position: relative;
     }

     .Box1 .Banner .slick-list,
     .Box1 .Banner .slick-track {
         height: auto;
     }

     .Box1 .Banner .imgs {
         height: auto;
     }

     .Box1 .Banner .imgs .bannerImg {
         height: 200px;
     }

     .Box1 .Banner .imgs .Banner2-text h1 {
         height: 60px;
     }

     .Box1 .Banner .imgs .Banner2-text h1::after {
         width: 65%;
         left: 50%;
         transform: translateX(-50%);
     }

     .Box1 .Banner .imgs .Banner1-text span h4 {
         font-size: 18px;
     }

     .Box1 .Banner .imgs .Banner1-text span h6 {
         font-size: 15px;
     }

     .Box1 .Banner .imgs .Banner1-text p {
         font-size: 14px;
         margin: 0;
     }

     .Box1 .Banner .imgs .Banner1-text {
         width: 38%;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 {
         font-size: 25px;
        margin-top: 20%;
     }

     .Box1 .Banner .imgs .Banner3-text .tit h4 span {
         font-size: 13px;

     }
     .Box1 .Banner .imgs .Banner3-text .box img{
        width: 70%;
     }
     .Box1 .Banner .imgs .Banner4-text h5{
        font-size: 20px;
     }
     .Box1 .Banner .imgs .Banner4-text span{
        font-size: 14px;
     }
    }