.pr{position: relative}
.pa{position: absolute}
.bg_color{background-color: #000;color: #ffffff!important;}
#index .show_bg::before {background-color: #ffffff;}
.white_color{color: #ffffff!important;border: 1px solid #ffffff !important;}
.index-product-box .white_color::before{background-color: #ffffff !important;}
#index .flex-btn{display: flex;justify-content: flex-start;gap: 1.146vw;align-items: center}
.learnMore {  color: #4d4d4d;  font-size: 0.73vw;  line-height: 2vw; width: 6.146vw;  position: relative; overflow: hidden;
    text-align: center; height: 2vw; display: block; border-radius: 4vw;  border: 1px solid #000000;
}
.learnMore::before {content: '';height: 1px; width: 0; position: absolute;
    top: 80%; left: 23%;background-color: #000000;transition: all 0.2s linear;
}
.learnMore:hover::before { width: 55%; }
.max_color{width: 14.5833vw; }


#index .box1 .swiper-first{overflow: hidden}
#index .box1 .middle{font-size: 3.125vw;font-weight: bold;letter-spacing: 1px}
#index .box1 .m{font-size: 1.823vw;line-height: 1.4;letter-spacing: 1px}
#index .box1 .pa1{top: 27%;left: 12%}
#index .box1 .pa2{bottom: 15%;left: 12%}
#index .box1 .pa3{bottom: 15%;left: 12%}
#index .box1 .pa4{bottom: 15%;right: 13%}
#index .box1 .pa1 >:nth-child(2){margin-top: 4%}
#index .box1 .swiper-pagination-first{bottom: 10%;margin: 0 auto;text-align: center;display: flex;z-index: 2;justify-content: center;width: 100%;gap: 0.625vw}
#index .box1 .swiper-pagination-first .swiper-pagination-bullet{height: 3px;width: 4.16vw;background: #7a7a7a;opacity:1;border-radius:inherit;}
#index .box1 .swiper-pagination-first .swiper-pagination-bullet:before{content: '';height: 3px; width: 0;background-color: #FFC915;left: 0;position: absolute}
#index .box1 .swiper-pagination-first .swiper-pagination-bullet-active{ border-radius:inherit; height:3px; transform:translateY(5%);}
#index .box1 .swiper-pagination-first .swiper-pagination-bullet-active:before{animation: dots 7s linear; animation-fill-mode: forwards;}
@keyframes dots { 0% { width: 0; } 100% { width: 100%; } }

#index .box2{background-color: #f5f5f5;padding: 4.375vw 0}
#index .box2 .box2-1{display: flex;flex-direction: column;gap: 2.0833vw;align-items: center}
#index .box2 .middle{font-size: 3.3854vw;font-weight: bold;letter-spacing: 1px}
#index .box2 .m{font-size: 1.7708vw;line-height: 1.4;letter-spacing: 1px}
#index .box2 .small{font-size: 1vw;letter-spacing: 1px}
#index .box2 .box2-1 .mt{width: 75vw;height: 33.333vw;overflow: hidden;transition: all 0.3s linear;border-radius: 30px}
#index .box2 .box2-1 .mt:hover{box-shadow: 0 0.78125vw 1.5625vw rgba(0, 0, 0, 0.1);}
#index .box2 .box2-1 .mt:hover img{scale: 1.05}
#index .box2 .box2-1 .pa1{top: 25%;left: 12%;text-align: left;z-index: 2}
#index .box2 .box2-1 .pa2{bottom: 15%;left: 12%;z-index: 2}
#index .box2 .box2-1 .pa3{width: 100%;height: 100%;top: 0;left: 0;z-index: 1}
#index .box2 .box2-1 .pa3 img{transition: all 0.3s linear;}
#index .box2 .box2-1 .pa4{bottom: 30%;left: 12%;z-index: 2}
#index .box2 .box2-1 .pa >:nth-child(2){margin-top: 4%}

#index .box2 .box2-2{width: 75vw;margin: 0 auto}
#index .box2 .box2-2 .flex-start{display: flex;justify-content: space-between;align-items: end;padding: 4% 1%}
#index .box2 .box2-2 .flex-start .middle{font-size: 2.6042vw;}
#index .box2 .box2-2 .flex-start .m a{color: #919191;font-size: 0.9896vw;}
#index .box2 .box2-2 .box2-2-2{transition: all 0.3s linear;width: 75vw;height: 24.84375vw;overflow: hidden;margin-top: 1.25vw;border-radius: 30px}
#index .box2 .box2-2 .box2-2-2:hover{box-shadow: 0 0.78125vw 1.5625vw rgba(0, 0, 0, 0.1);}
#index .box2 .box2-2 .box2-2-2:hover img{scale: 1.05}
#index .box2 .box2-2 .box2-2-2 .pa1{text-align: center;top: 19%;left: 0;z-index: 2;width: 48%}
#index .box2 .box2-2 .box2-2-2 .pa2{bottom: 22%;left: 15%;text-align: center;z-index: 2}
#index .box2 .box2-2 .box2-2-2 .pa3{width: 100%;height: 100%;top: 0;left: 0;z-index: 1}
#index .box2 .box2-2 .box2-2-2 .pa3 img{transition: all 0.3s linear;}
#index .box2 .box2-2 .box2-2-2 .pa >:nth-child(2){margin-top: 4%}
#index .box2 .box2-2 .box2-2-3{display: flex;justify-content: space-between;width: 75vw;margin: 0 auto;gap: 1.33%;align-items: center;padding-top: 1.25vw;}
#index .box2 .box2-2 .box2-2-3 .mt{transition: all 0.2s linear;}
#index .box2 .box2-2 .box2-2-3 .mt:hover{box-shadow: 0 0.78125vw 1.5625vw rgba(0, 0, 0, 0.1);}
#index .box2 .box2-2 .box2-2-3 .mt{width: 24%;background-color: #FFFFFF;text-align: center;padding-top: 2.6042vw;border-radius: 20px}
#index .box2 .box2-2 .box2-2-3 .mt img{width: 10.677vw;transition: all 0.3s linear;}
#index .box2 .box2-2 .box2-2-3 .mt:hover img{scale: 1.1}
#index .box2 .box2-2 .box2-2-3 .mt .middle{font-size: 1.5625vw;padding-top: 2.7604vw;color: #262626}
#index .box2 .box2-2 .box2-2-3 .mt .m{font-size: 0.9375vw;color: #636363;padding-top: 1.5625vw;transition: all 0.3s linear;}
#index .box2 .box2-2 .box2-2-3 .mt .flex-btn{justify-content: center;opacity: 0; transition: all 0.3s linear;}
#index .box2 .box2-2 .box2-2-3 .mt:hover .m{transform: translateY(-80%);opacity: 0}
#index .box2 .box2-2 .box2-2-3 .mt:hover .flex-btn{opacity: 1;transform: translateY(-80%);}

#index .box3{}
#index .box3 .box3-1{width: 75vw;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 3% 0 3% 1%}
#index .box3 .box3-1 .middle{font-size: 2.6042vw;font-weight: bold}
#index .box3 .box3-1 .swiper-button-next-scroll,#index .box3 .box3-1 .swiper-button-prev-scroll{width: 2.6042vw;height: 2.6042vw}
#index .box3 .box3-1 .swiper-button-disabled{opacity: 0.35;cursor: auto;pointer-events: none;}
#index .box3 .box3-2{display: flex;justify-content: flex-end;padding-bottom: 5%}
#index .box3 .box3-2 .swiper-two{width: 87.8%;overflow: hidden}
#index .box3 .box3-2 .img_s{width: 21.3021vw; height: 14.21875vw;overflow: hidden}
#index .box3 .box3-2 .img { transition: all 0.3s linear}
#index .box3 .box3-2 .swiper-slide{overflow: hidden}
#index .box3 .box3-2 .swiper-slide:hover .img{scale: 1.1}
#index .box3 .box3-2 .swiper-slide-prev{opacity: 0}
.video-box { background-color: #F6F6F6;position: relative;  overflow: hidden; box-sizing: border-box;  padding: 2vw 4%;  margin-top: 2%;}
.video-box .b { font-size: 1.3vw; line-height: 1; }
.video-box .s { font-size: 0.9vw; line-height: 1;  margin-top: 8%; }
.video-box .video-play { position: absolute;top: 54%; right: 5%; width: 2.0833vw;}
#video_show{display: none ;background: #000; position: fixed;width: 100%; height: 100%; top: 0; left: 0; z-index: 666;}
#video_show .close_video{width: 2.6042vw; height: 2.6042vw; position: absolute; top: 14%; right: 5%; font-size: 2.6042vw; cursor: pointer;color: #ffffff}