html,
 body {
     overflow: hidden;
 }

 html.has-scroll-smooth {
     overflow: hidden;
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
 }

 html.has-scroll-dragging,
 html.has-scroll-dragging * {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .has-scroll-smooth body {
     overflow: hidden;
 }

 .c-scrollbar {
     position: absolute;
     right: 0;
     top: 0;
     width: 11px;
     height: 100vh;
     transform-origin: center right;
     transition: transform 0.3s, opacity 0.3s;
     opacity: 0;
     z-index: 100;
 }

 .c-scrollbar:hover {
     transform: scaleX(1.45);
 }

 .c-scrollbar:hover,
 .has-scroll-dragging .c-scrollbar,
 .has-scroll-scrolling .c-scrollbar {
     opacity: 1;
 }

 /* .c-scrollbar_thumb {
     position: absolute;
     top: 0;
     right: 0;
     background-color: #b21b21;
     width: 7px;
     margin: 2px;
     cursor: -webkit-grab;
     cursor: grab;
 } */

 .has-scroll-dragging .c-scrollbar_thumb {
     cursor: -webkit-grabbing;
     cursor: grabbing;
 }

 /*  
 ::-webkit-scrollbar {
     width: 8px;
     height: 10px;
 }
 
 ::-webkit-scrollbar-track {
     border-radius: 0;
 }
 
 ::-webkit-scrollbar-thumb {
     -webkit-box-shadow: inset 0 0 6px #00c7a1;
     background-color: #00c7a1;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     border-radius: 5px;
     -webkit-box-shadow: inset 0 0 6px #7ccfc0;
     background-color: #7ccfc0;
 } */

 body {
     width: 100%;
 }

 .banner-cicle {
     position: absolute;
     width: 5px;
     height: 5px;
     background: #fff;
     border-radius: 50%;
 }

 .banner-cicle:after,
 .banner-cicle:before {
     content: "";
     width: 5px;
     height: 5px;
     background: rgba(215, 12, 37, 0.3);
     border-radius: 50%;
     position: absolute;
     animation: scale11 2s infinite;
     left: 0;
     top: 0;
 }

 .banner-cicle:before {
     animation: scale22 2s infinite;
 }

 @keyframes scale11 {
     0% {
         transform: scale(1);
         opacity: .9
     }

     100% {
         transform: scale(3);
         opacity: 1;
     }
 }

 @keyframes scale22 {
     0% {
         transform: scale(1);
         opacity: .9
     }

     100% {
         transform: scale(6);
         opacity: 1;
     }
 }

 .cicle01 {
     top: 55%;
     left: 21%;
 }

 .cicle02 {
     bottom: 20%;
     left: 30%;
 }

 .cicle03 {
     top: 46%;
     left: 45%;
 }

 .cicle04 {
     top: 35%;
     left: 55%;
 }

 .cicle05 {
     top: 52%;
     left: 70%;
 }

 #banner {
     height: 100vh;
     width: 100%;
     overflow: hidden;
     padding-top: 80px;
 }

 #banner .swiper-container {
     width: 100%;
     height: 100%;

 }

 #banner-video {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 9999
 }

 #banner .swiper-slide {

     overflow: hidden;
     background: #000;
 }

 #banner .swiper-pagination {
     text-align: left;
     padding: 0 4%;
     bottom: 90px;
 }

 #banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 0;
 }

 #banner .swiper-pagination-bullet {
     width: 33px;
     height: 55px;
     text-align: center;
     line-height: 55px;
     font-size: 18px;
     color: #d70c25;
     opacity: 1;
     outline: none;
     border-radius: 0;
     background: none;
 }

 #banner .swiper-pagination-bullet-active {
     color: #fff;
     background: url(../images/banner-icon.png)no-repeat;
 }

 .swiper-slide-active .img-box {
     -webkit-animation-name: scaleDraw;
     /*关键帧名称*/
     -webkit-animation-timing-function: ease-in-out;
     /*动画的速度曲线*/
     -webkit-animation-iteration-count: 1;
     /*动画播放的次数*/
     -webkit-animation-duration: 10s;
     -webkit-animation-fill-mode: forwards
 }

 @keyframes scaleDraw {

     /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
     0% {
         -webkit-transform: scale(1.2, 1.2);
         transform: scale(1.2, 1.2);
         /*开始为原始大小*/
     }

     100% {
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
     }
 }

 .title {

     z-index: 10;
     position: absolute;
     bottom: 20%;
     left: 4%;
     opacity: 0;
     transition-duration: .5s;
 }

 .swiper-slide-active .title {
     opacity: 1;
 }

 .title h3 {
     font-weight: 700;
     font-size: 0.36rem;
     letter-spacing: -1px;
     color: #fff;
 }

 .banner-wb {
     position: absolute;
     right: -100%;
     top: 50%;
     max-height: 100%;
     transform: translateY(-50%);
     height: 100%;
     transition-duration: 1s;
 }

 .banner-wb img {
     height: 100%;
 }

 .swiper-slide-active .banner-wb {
     right: 0;
 }

 .img-box {
     width: 100%;
     height: 100%;
     position: absolute;
     transition-duration: 1s;
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
     overflow: hidden;
 }

 .banner-img {
     width: 100%;
     height: 100%;
     position: relative;
     background-size: cover !important;
     clip-path: circle(0%);
     transition: 1.2s all ease-in-out;
     animation: bgBoxAn 5s linear infinite;
     z-index: 2;
 }



 .close_bannerVideo {
     position: absolute;
     bottom: 2%;
     left: calc(50% - 50px);
     width: 100px;
     text-align: center;
     z-index: 9999;
     cursor: pointer
 }

 .close_Line {
     width: 2px;
     height: 30px;
     display: inline-block;
     overflow: hidden;
 }

 .close_Line i {
     width: 2px;
     height: 30px;
     background-color: #d0111b;
     display: inline-block;
     animation: close_Line 2.8s linear 0s infinite;
 }

 .close_bannerVideo .close_txt {
     width: 100%;
     height: 16px;
     line-height: 16px;
     position: relative;
 }

 .close_bannerVideo p {
     overflow: hidden;
     display: inline-block;
     width: 100%;
     height: 16px;
     line-height: 16px;
     position: absolute;
     top: 0;
     left: 0;
     animation: text_t 1s linear 0s 1 forwards;
 }

 .close_bannerVideo p span {
     font-size: 12px;
     color: #d0111b;
     line-height: 16px;
     display: inline-block;
     height: 16px;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     animation: text_b 1s linear 0s 1 forwards;
 }

 @keyframes close_Line {
     0% {
         transform: translateY(-100%)
     }

     25% {
         transform: translateY(0%)
     }

     75% {
         transform: translateY(0%)
     }

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








 /* .banner-video {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover !important;
    clip-path: circle(0%);
    transition: 1.2s all ease-in-out;
    z-index: 2;
} */

 @keyframes bgBoxAn {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 .img-box img {
     width: 100%;
     height: 100%;
     /* object-fit: cover; */

     transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
     transition-property: transform;
 }

 .button-prev,
 .button-next {
     transition: 0.5s;
     outline: none;
     position: absolute;
     width: 140px;
     z-index: 10;
     top: 65vh;
     transform: translateY(-34px);
     cursor: pointer;
 }

 .button-prev {
     left: 4vw;
 }

 .button-next {
     right: 4vw;
 }

 .button.disabled {
     opacity: 0.2;
     cursor: default;
 }

 #arrow-svg-home {
     transform: translateY(353px);
 }

 .button-next #arrow-svg-home {
     transform: translateY(353px) rotateY(180deg);
     transform-origin: 80px 0px 0px;
 }

 #banner .slogan {
     width: 4.73rem;
     height: 8.42rem;
     position: absolute;
     right: 0;
     z-index: 99;
     top: 5%;
 }

 svg {
     transition: 0.5s;
 }

 .cls-1 {
     transition: 0.5s;
     opacity: 0.4;
     transform-origin: -20px 40px;
     opacity: 1;
 }

 .cls-4 {
     transition: 0.5s;
     stroke-width: 2px;
     stroke: #fff;
     fill: none;
     stroke-dasharray: 1;
     stroke-dashoffset: 1;
     opacity: 0.4;
     transform-origin: 0px 0px 0px;
 }

 #arrow-trg {
     transition: 0.5s;
     fill: #fff;
     transform: rotateY(180deg) translate(-53px, 39px);
 }

 #line {
     transition: 0.5s;
     stroke: #fff;
     transform: translate(50px, 42px);
 }



 @keyframes fadeIniup {
     0% {
         opacity: 0;
         transform: translateY(60px);
     }

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

 .he_fadeup1 {
     -webkit-animation: fadeIniup 1s ease both;
     animation: fadeIniup 1s ease both;
     -ms-animation: fadeInUp 1s ease both;
     animation-delay: 0.3s;
 }

 .index {
     width: 100%;
 }

 .index .f1 {
     width: 100%;
     position: relative;
     overflow: visible !important;
     z-index: 9999;
     pointer-events: none;
 }

 .index .f1 .video {
     width: 100%;
     height: 100vh;
     position: relative;
 }

 .index .f1 .video .f2Text {
     width: 100%;
     position: absolute;
     z-index: 10;
     color: white;
     top: 50%;
     opacity: 0;
 }

 .index .f1 .video .f2Text .tit {
     text-align: center;
     font-size: 2vw;
 }

 .index .f1 .video video {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     object-fit: cover !important;
 }

 .index .f2 {
     width: 100%;
     position: absolute;
     padding: 0.3rem 5vw 0 5vw;
     z-index: 9;
 }

 .index .f2 .imgBox {
     width: 100%;
     display: flex;
     justify-content: space-between;
 }

 .index .f2 .imgBox .left {
     width: 21vw;
 }

 .index .f2 .imgBox .left .imgBox {
     width: 21vw;
     height: 19vw;
     overflow: hidden;
     margin-bottom: 1vw;
 }

 .index .f2 .imgBox .left .imgBox .img {
     width: 21vw;
     height: 19vw;
     background-size: cover !important;
     cursor: pointer;
     overflow: hidden;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .left .imgBox .img .text {
     text-align: center;
     position: relative;
     padding-top: 16vw;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .left .imgBox .img .text .name {
     font-size: 1.5vw;
     color: #ffffff;
 }

 .index .f2 .imgBox .left .imgBox .img .text .more {
     display: block;
     width: 120px;
     height: 40px;
     background-color: #d70c25;
     border-radius: 3px;
     color: white;
     font-size: 14px;
     line-height: 40px;
     text-align: center;
     margin: 1vw auto 0 auto;
     opacity: 0;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .left .imgBox .img::before {
     content: '';
     width: 21vw;
     height: 19vw;
     position: absolute;
     background-size: cover !important;
 }

 .index .f2 .imgBox .left .imgBox:hover .img {
     transform: scale(1.1);
 }

 .index .f2 .imgBox .left .imgBox:hover .img .text {
     padding-top: 7vw;
 }

 .index .f2 .imgBox .left .imgBox:hover .img .text .more {
     opacity: 1;
 }

 .index .f2 .imgBox .middle {
     width: 51vw;
     height: 40vw;
     margin: 0 1vw;
     background: transparent;
 }

 .index .f2 .imgBox .right {
     width: 21vw;
 }

 .index .f2 .imgBox .right .imgBox {
     width: 21vw;
     height: 19vw;
     overflow: hidden;
     margin-bottom: 1vw;
 }

 .index .f2 .imgBox .right .imgBox .img {
     width: 21vw;
     height: 19vw;
     background-size: cover !important;
     cursor: pointer;
     overflow: hidden;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBox .img .text {
     text-align: center;
     position: relative;
     padding-top: 16vw;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBox .img .text .name {
     font-size: 1.5vw;
     color: #ffffff;
 }

 .index .f2 .imgBox .right .imgBox .img .text .more {
     display: block;
     width: 120px;
     height: 40px;
     background-color: #d70c25;
     border-radius: 3px;
     color: white;
     font-size: 14px;
     line-height: 40px;
     text-align: center;
     margin: 1vw auto 0 auto;
     opacity: 0;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBox .img::before {
     content: '';
     width: 21vw;
     height: 13vw;
     position: absolute;
     background-size: cover !important;
 }

 .index .f2 .imgBox .right .imgBox:hover .img {
     transform: scale(1.1);
 }

 .index .f2 .imgBox .right .imgBox:hover .img .text {
     padding-top: 7vw;
 }

 .index .f2 .imgBox .right .imgBox:hover .img .text .more {
     opacity: 1;
 }

 .index .f2 .imgBox .right .imgBoxs {
     display: flex;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2 {
     width: 10vw;
     height: 13vw;
     overflow: hidden;
     /*margin-bottom: 1vw;*/
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2 .img {
     width: 10vw;
     height: 13vw;
     background-size: cover !important;
     cursor: pointer;
     overflow: hidden;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text {
     text-align: center;
     position: relative;
     padding-top: 9vw;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text .name {
     font-size: 1.5vw;
     color: #ffffff;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2 .img .text .more {
     display: block;
     width: 1.2rem;
     height: 0.4rem;
     background-color: #00c8a2;
     border-radius: 3px;
     color: white;
     font-size: 0.14rem;
     line-height: 0.4rem;
     text-align: center;
     margin: 1vw auto 0 auto;
     opacity: 0;
     transition: 0.5s all;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2:nth-child(1) {
     margin-right: 1vw;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img {
     transform: scale(1.1);
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img .text {
     padding-top: 5.5vw;
 }

 .index .f2 .imgBox .right .imgBoxs .imgBox2:hover .img .text .more {
     opacity: 1;
 }

 .index .f3 {
     width: 100%;
     display: inline-block;
     text-align: center;
     position: relative;
     margin: 3vw auto;
 }

 .f3L .textBox {
     transform: translateY(-3vw);
     transition: 2s all;
     position: relative;
     opacity: 0;
 }

 .f3L .active {
     transform: translateX(0);
     opacity: 1;
 }

 .f3A {
     width: 100%;
     position: relative;
     z-index: 5;
     overflow: hidden;
     top: -30px;
 }

 .f3A .imgBox {
     width: 100%;
     background-size: cover !important;
     transition: 2s all;
     padding: 1rem 5vw 1.3rem;
 }

 .new-ti {
     position: relative;
 }

 .new-ti h1 {
     font-size: 0.5rem;
     font-family: "SourceHanSansCN-bold";
 }

 .new-ti .an {
     width: 2.58rem;
     font-size: 0.2rem;
     color: #fff;
     border-radius: 0.5rem;
     background: #d70c25;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     text-align: center;
     border: 1px solid #d70c25;
     position: absolute;
     right: 0;
     top: 10px;
 }


 .new-ti .an span {
     position: relative;
     z-index: 2;
     transition-duration: 1s;
     margin: 0 auto;
     line-height: 0.57rem;
     height: 0.57rem;
     display: flex;
     justify-content: center;
     align-items: center;
     transition-duration: .5s;
 }

 .new-ti .an span img {
     transition-duration: .5s;
     margin-left: 0.1rem;
 }

 .new-ti .an:hover img {
     margin-left: 0.25rem;
 }

 .new-ti .an:hover {
     -moz-box-shadow: 0px 0px 9px #BABABA;
     -webkit-box-shadow: 0px 0px 9px #BABABA;
     box-shadow: 0px 0px 9px #BABABA;
 }

 /* .new-ti a {
     position: absolute;
     right: 0;
     top: 10px;
     background: #d70c25;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     width: 258px;
     text-align: center;
     line-height: 57px;
     color: #fff;
     border-radius: 30px;
 }
 
 .new-ti a img {
     margin-left: 15px;
     transition-duration: .5s;
 }
 
 .new-ti a:hover {
     -moz-box-shadow: 0px 0px 15px #BFBFBF;
     -webkit-box-shadow: 0px 0px 15px #BFBFBF;
     box-shadow: 0px 0px 15px #BFBFBF;
 }
 
 .new-ti a:hover img {
     margin-left: 10px;
 } */

 .new-box {
     position: relative;
     -moz-box-shadow: 0px 0px 5px #BFBFBF;
     -webkit-box-shadow: 0px 0px 5px #BFBFBF;
     box-shadow: 0px 0px 5px #BFBFBF;
     border-radius: 30px;
     overflow: hidden;
 }

 .ibox-news {
     padding-top: 150px;
     position: relative;
 }

 .ibox-news .swiper-slide {
     padding: 5px;
 }

 .new-box dt {
     overflow: hidden;
     position: relative;
     transition-duration: .5s;
     height: 3.2rem;
 }

 .new-box dt p {
     font-size: 0.28rem;
     color: #fff;
     position: absolute;
     bottom: 0;
     padding: 30px;
     font-family: "SourceHanSansCN-bold";
     font-weight: bold;
 }

 .new-box dt img {
     width: 100%;
     display: block;
     transition-duration: .5s;
     border-radius: 30px;
     height: 100%;
 }

 .new-box dd {
     background: #fff;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition-duration: .5s;
 }

 .new-box dd div {
     padding: 0 0.4rem;
 }

 .new-box dd div h1 {
     font-size: 0.32rem;
     font-family: "SourceHanSansCN-bold";
 }

 .new-box dd div span {
     font-size: 0.24rem;
     color: #d70c25;
     padding: 0.29rem 0;
     display: block;
 }

 .new-box dd div p {
     font-size: 0.19rem;
     color: #666;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .new-box:hover dd {
     opacity: 0;
 }

 .ibox-news .swiper-button-prev:after,
 .ibox-news .swiper-button-next:after,
 .ibox-news .swiper-rtl .swiper-button-next:after {
     display: none;
 }

 .ibox-news .swiper-button-next,
 .ibox-news .swiper-button-prev {
     width: 0.53rem;
     height: 0.53rem;
     background: url(../images/pre.png) no-repeat center #fff;
     border-radius: 50%;
     -moz-box-shadow: 0px 0px 5px #BFBFBF;
     -webkit-box-shadow: 0px 0px 5px #BFBFBF;
     box-shadow: 0px 0px 5px #BFBFBF;
     top: 0.27rem;
     margin-top: 0;
     outline: none;
 }

 .ibox-news .swiper-button-next {
     transform: rotate(180deg);
     right: auto;
     left: 0.9rem;
 }

 .ibox-news .swiper-button-next:hover,
 .ibox-news .swiper-button-prev:hover {
     background: url(../images/pre1.png) no-repeat center #d70c25;
 }

 .ibox-news .swiper-container {
     transform: translateX(300px);
     transition: 1.5s all;
     position: relative;
     opacity: 0;
 }

 .ibox-news .swiper-container.active {
     transform: translateX(0);
     opacity: 1
 }

 .f3B {
     width: 100%;
     position: relative;
     z-index: 6;
     overflow: hidden;
 }

 .f3B .imgBox {
     width: 100%;
     transition: 2s all;
     background: url(../images/xt.png) no-repeat bottom center #fff;
     padding: 0 5vw 2rem 10vw;
     background-size: 100% auto;
 }

 .img-le {
     width: 47%;
     transform: translateX(100px);
     transition: 1.5s all;
     opacity: 0;
 }

 .cx-le {
     padding-top: 1rem;
     transform: translateX(-1rem);
     transition: 1.5s all;
     opacity: 0;
 }

 .cx-le h1 {
     font-size: 0.5rem;
     font-family: "SourceHanSansCN-bold";
 }

 .cx-le p {
     font-size: 0.3rem;
     padding: 0.4rem 0 1.4rem 0;
 }

 .cx-le .an {
     width: 2.58rem;
     font-size: 0.2rem;
     color: #fff;
     border-radius: 0.5rem;
     background: #d70c25;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     text-align: center;
     border: 1px solid #d70c25;
 }

 .cx-le .an span {
     position: relative;
     z-index: 2;
     transition-duration: 1s;
     margin: 0 auto;
     line-height: 0.57rem;
     height: 0.57rem;
     display: flex;
     justify-content: center;
     align-items: center;
     transition-duration: .5s;
 }

 .cx-le .an span img {
     transition-duration: .5s;
     margin-left: 0.1rem;
 }

 .cx-le .an:hover img {
     margin-left: 0.25rem;
 }

 .cx-le .an:hover {
     -moz-box-shadow: 0px 0px 9px #BABABA;
     -webkit-box-shadow: 0px 0px 9px #BABABA;
     box-shadow: 0px 0px 9px #BABABA;
 }

 /* .cx-le .an:hover span {
     color: #333;
     background: url(../images/jt1.png) no-repeat right center;
 }*/

 /* .cx-le .an:after {
     width: 0;
     height: 0;
     border-radius: 100%;
     background: #fff;
     position: absolute;
     left: -0.6rem;
     bottom: -0.6rem;
     content: "";
     transition-duration: 1s;
     z-index: 1;
 }*/

 .cx-le .an:hover {
     border: 1px solid #d70c25;
 }

 /*.cx-le .an:hover:after {
     width: 4rem;
     height: 4rem;
 }*/

 .cx-le.active,
 .img-le.active {
     opacity: 1;
     transform: translateX(0)
 }

 .cx-le a img {
     margin-left: 0.15rem;
     transition-duration: .5s;
 }

 .cx-le a:hover {
     -moz-box-shadow: 0px 0px 15px #BFBFBF;
     -webkit-box-shadow: 0px 0px 15px #BFBFBF;
     box-shadow: 0px 0px 15px #BFBFBF;
 }

 .cx-le a:hover img {
     margin-left: 0.1rem;
 }

 .index .f3C {
     width: 100%;
     /*     height: 74vh;*/
     position: relative;
     /*    margin-top: -74vh;*/
     z-index: 7;
 }

 .index .f3C .imgBox {
     width: 100%;
     transition: 2s all;
     background: url(../images/bg1.png) no-repeat bottom left #fff;
     height: 74vh;
     padding: 0 6vw;
     position: relative;
 }

 .index .f3C .cx-le p {
     padding: 0.4rem 0 1rem 0;
 }

 .index .f3C .cx-le {
     position: absolute;
     top: 20%;
     right: 0;
     opacity: 1;
     transform: translateX(0%);
 }

 .index .f3C .cx-le.active {
     transform: translateX(-122px);
     opacity: 1;
 }

 .index .f3D {
     width: 100%;
     position: relative;
     background: url(../images/bg2.png) no-repeat center;
     padding: 0.6rem 0;
     transition: 2s all;

     transition: 1.5s all;
     opacity: 1;
     background-size: 100% 100%
 }

 .index .f3D.active {
     opacity: 1;

 }

 .index .f3D h1 {
     text-align: center;
     color: #fff;
     font-size: 0.48rem;
     font-family: "SourceHanSansCN-bold";
     margin-bottom: 0.2rem;
 }

 .index .f3D h1.active {
     opacity: 1;

 }

 .index .f3D ul {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .index .f3D ul li {
     text-align: center;
     line-height: 0.7rem;
     border: 1px solid #fff;
     border-radius: 0.5rem;
     margin: 0 1%;
     padding: 0 0.3rem;
     transition-duration: .5s;
 }

 .index .f3D ul li:hover {
     -moz-box-shadow: 0px 0px 9px #BABABA;
     -webkit-box-shadow: 0px 0px 9px #BABABA;
     box-shadow: 0px 0px 9px #BABABA;
 }

 .index .f3D ul li a {
     display: block;
     color: #fff;
     font-size: 0.24rem;
 }

 /* 2023-8-14 */




 @media screen and (min-width: 2000px) {

     .f3B .imgBox {
         padding-bottom: 0
     }

     .index .f3C .cx-le {
         top: 0
     }

     .foot-warp {
         min-height: 7.55rem;
     }
 }

 @media screen and (max-width: 1366px) {
     .subNav ul li {
         width: calc(100% / 7);
         margin-left: 0vw;
         margin-right: 0vw;
     }
 }

 @media screen and (max-width: 1280px) {
     .subNav ul li {
         width: auto;
     }

     .socail .yy {
         font-size: 0.26rem
     }
 }

 @media screen and (max-width:1400px) {
     .nav ul li ul li a {
         padding: 0.5vw 0;
         font-size: 14px;
     }

     .nav ul li ul {
         padding: 10px 0px;
     }

     .subNav ul li a {
         font-size: 14px;
     }

     .subNav ul li a:first-child {
         font-size: 16px;
     }
 }

 @media (max-width: 1660px) {
     .index .f3 {
         margin-top: -10vw;
     }

     .index .f3 .item .icon {
         width: 4.5vw;
     }
 }

 @media (max-width: 1580px) {
     .nav {
         width: calc(100% - 500px);
     }

     #banner .swiper-pagination {
         bottom: 20px;
     }
 }

 @media (max-width: 1280px) {
     #banner .swiper-pagination {
         bottom: 20px;
     }

     .ibox-news {
         padding-top: 50px;
     }

     .f3B .imgBox,
     .index .f3C .imgBox {
         background-size: contain;
     }

     .f3A {
         top: 0;
         padding-top: 10px;
     }

     .index .f3D {
         padding: 0.2rem 0
     }

     .f3B .imgBox {
         padding-bottom: 0rem
     }

     .index .f3D ul li {
         line-height: 0.4rem;
     }

     .index .f3D ul li a {
         font-size: 0.2rem;
     }


 }



 @media (max-width: 760px) {

     #test,
     .banner-img,
     .right-nav {
         display: none !important;
     }


 }