.header{ background: transparent; color: #fff;}
.header .logo a{ background-image: url("../images/footer-logo.png");}

.banner{ padding: 0; margin-top: -100px; text-align: center; background: url("../images/banner.webp") no-repeat center/cover;}
.banner .wrap{ padding: 200px 0 430px; position: relative; }
.banner h2{ margin-bottom: 75px; }
.banner .lists1{ margin-top: 75px;}
.banner .lists1 li{ display: inline-block; width: 300px; line-height: 50px; background: #c8000a; color: #fff; border-radius: 50px; font-size: 24px;}
.banner .lists1 li + li{ margin-left: 33px;}
.banner .more{ display: none; }
/*.banner .lists2{ position: absolute; bottom: -60px; left: 0; border-radius: 30px; overflow: hidden; width: 100%;}
.banner .lists2 li{ float: left; width: 16.66%; padding: 90px 0 45px; background: #ececec;}
.banner .lists2 li:nth-child(odd){ background: #f2f2f2; overflow: hidden;}
.banner .lists2 .pic{ padding: 0 3%; }
.banner .lists2 img{ margin: 0 auto; -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;}
.banner .lists2 p{ text-align: center; font-weight: bold; margin-top: 35px;}
.banner .lists2 li:hover img{transform: scale(1.06);
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);}*/

.index-pro{ background: #fff;}  
.i-pro-cont{ position: relative; top: -300px; padding: 80px 135px 0; background: #fff; border-radius: 30px; }
.index-pro .i-pro-bt{ text-align: center; font-size: 69px; }
.index-pro .i-pro-p{ position: relative; padding: 24px 0 40px; text-align: center; font-size: 32px; font-weight: normal; }
.index-pro .i-pro-p::before{ content: ''; position: absolute; left: 50%; margin-left: -62px; bottom: 0; width: 124px; height: 8px; background: #c8000a;}
.i-pro-pics{ border-radius: 30px; overflow: hidden; margin: 70px -10px 0;}
.i-pro-pics li{ float: left; width: 25%; padding: 0 10px; margin-bottom: 20px; }
.i-pro-pics li a{ display: block; padding: 40px 0 25px; background: #ececec; border-radius: 30px; overflow: hidden; }
.i-pro-pics img{ margin: 0 auto; -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;}
.i-pro-pics p{ text-align: center; font-weight: bold; margin-top: 30px;}
.i-pro-pics li:hover img{transform: scale(1.06);
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);}


.index-choose{ margin-top: -300px;  padding: 190px 0 150px; background: #fff;}
.index-choose h2{ font-size: 54px; font-weight: normal;}
.index-choose h3{ font-size: 69px; font-weight: normal; margin: 15px 0 60px;}
.index-choose .pic{ float: left; width: 74.9%;}

.index-choose .choose-swiper{ position: relative; margin: 20px -10px 0;  }
.index-choose .swiper-slide{ width: 16.66%; padding: 0 10px; }
.index-choose .swiper-slide.slide1{ width: 33.33%; }
/*.index-choose .swiper-slide ul{ display: flex; margin: 0 -10px; }
.index-choose .swiper-slide li{ padding: 0 10px; }*/
.index-choose .swiper-slide img{ border: 1px solid #d1d1d1; }
.index-choose .swiper-slide p{ text-align: center; padding-top: 10px; }
.index-choose [class*="icon-"] { width: 70px; height: 70px; text-align: center; line-height: 70px; background: rgba(0,0,0,.63); color: #fff; margin-top: -35px; font-size: 40px; border-radius: 10px;}
.index-choose .icon-left{ left: -25px; }
.index-choose .icon-right{ right: -25px; }
.index-choose [class*="icon-"]:hover{ background: #c8000a; }



.index-choose .m-txt{ float: right; width: 20%;}
.index-choose .m-txt li{ padding-right: 55px;}
.index-choose .m-txt li + li{ margin-top: 65px;}
.index-choose .m-txt h3{ position: relative; font-size: 32px; margin: 0 0 25px;}
.index-choose .m-txt h3::before{ content: ''; position: absolute; right: -55px; top: 0; width: 11px; height: 30px; background: #c8000a;}
.index-choose .m-txt p{ line-height: 2;}
.index-choose .m-txt p span{ display: block;}





.index-about{ padding: 130px 0 140px; color: #fff; background: url("../images/index3-bg.webp") no-repeat center/cover;}
.index-about h2{ font-size: 69px; margin-bottom: 60px; font-weight: normal;}
.index-about .pic{ float: left; width: 66.4%;}
.index-about .txt{ float: right; width: 30%; padding-right: 130px;}
.index-about .txt h3{ font-size: 20px; line-height: 1.5;}
.index-about .txt .pp{ border-left: 2px solid; padding-left: 20px;}
.index-about .pp h4{ margin: 90px 0 25px; font-size: 32px; line-height: 1.25;}
.index-about .pp p{ line-height: 2;}





@media (max-width: 1759px){
    .banner .wrap{ padding: 180px 0 360px;}
    .banner .lists1{ margin-top: 65px;}
    .banner .lists1 li{ width: 277px;}
    .banner .lists1 li + li{ margin-left: 28px;}
    /*.banner .lists2 li{ padding: 80px 0 40px;}*/
    
    .i-pro-cont{ top: -270px; padding: 70px 115px 0;}
    .index-pro .i-pro-bt{ font-size: 60px;}
    .i-pro-pics li a{ padding: 30px 10px 25px;}
    .i-pro-pics p{ margin-top: 20px;}
    

    .index-choose{ margin-top: -270px; padding: 170px 0 130px;}
    .index-choose .m-txt{ width: 23%;}
    .index-choose .m-txt h3{ font-size: 30px; margin-bottom: 15px;}
    .index-choose .m-txt li + li{ margin-top: 40px;}
    
    .index-choose .choose-swiper{ margin: 14px -7px 0;  }
    .index-choose .swiper-slide{ padding: 0 7px; }
    .index-choose .swiper-slide ul{ margin: 0 -7px; }
    .index-choose .swiper-slide li{ padding: 0 7px; }
    .index-choose [class*="icon-"]{ width: 60px; height: 60px; line-height: 60px; margin-top: -30px; font-size: 32px; }
    .index-choose .icon-left{ left: -15px; }
    .index-choose .icon-right{ right: -15px; }

    .index-about{ padding: 110px 0 120px;}
    .index-about .pp h4{ margin: 40px 0 20px; font-size: 30px;}

}
@media (max-width: 1559px){

    .banner .wrap{ padding: 160px 0 340px;}
    .banner h2{ margin-bottom: 60px; }
    .banner .lists1{ margin-top: 60px;}
    .banner .lists1 li{ width: 255px; font-size: 22px;}
    .banner .lists1 li + li{ margin-left: 15px;}
    
    .i-pro-cont{ top: -245px; padding: 60px 90px 0;}
    .index-pro .i-pro-bt{ font-size: 54px;}
    .index-pro .i-pro-p{ font-size: 24px; padding: 17px 0 22px;}
    .index-pro .i-pro-p::before{ width: 120px; margin-left: -60px; height: 5px;}
    .i-pro-pics{ margin-top: 50px;}
    .i-pro-pics li a{ padding: 20px 10px;}
    .i-pro-pics p{ margin-top: 20px;}

    .index-choose{ margin-top: -245px; padding: 150px 0 100px;}
    .index-choose h2{ font-size: 48px;}
    .index-choose h3{ font-size: 61px;}
    .index-choose .m-txt li{ padding-right: 25px;}
    .index-choose .m-txt h3{ font-size: 26px; margin-bottom: 10px;}
    .index-choose .m-txt h3::before{ right: -25px; height: 25px; width: 8px;}
    .index-choose .m-txt p{ font-size: 15px; line-height: 1.9;}
    .index-choose .m-txt li + li{ margin-top: 30px;}
    
    .index-choose [class*="icon-"]{ width: 50px; height: 50px; line-height: 50px; margin-top: -25px; font-size: 28px; }
    .index-choose .icon-left{ left: -10px; }
    .index-choose .icon-right{ right: -10px; }
    

    .index-about{ padding: 90px 0 100px;}
    .index-about h2{ font-size: 61px;}
    .index-about .txt{ padding-right: 30px;}
    .index-about .txt h3{ font-size: 18px;}
    .index-about .txt .pp{ padding-left: 15px;}
    .index-about .pp h4{ margin: 30px 0 10px; font-size: 26px;}

}
@media (max-width: 1359px){
    .banner .wrap{ padding: 145px 0 260px;}
   .banner .lists1{ margin-top: 50px;}
    .banner .lists1 li{ width: 217px; font-size: 20px;}
    .banner .lists1 li + li{ margin-left: 25px;}
     /*.banner .lists2 li{ padding: 70px 0 35px;}
    .banner .lists2 p{ margin-top: 25px;}*/
    
    .i-pro-cont{ top: -200px; padding: 50px 50px 0;}
    .index-pro .i-pro-bt{ font-size: 50px;}
    .index-pro .i-pro-p{ font-size: 20px; padding: 13px 0 20px;}
    .index-pro .i-pro-p::before{ width: 100px; margin-left: -50px; height: 4px;}
    .i-pro-pics{ margin: 40px -8px 0;}
    .i-pro-pics li{ padding: 0 8px; margin-bottom: 16px;}
    .i-pro-pics li a{ border-radius: 20px;}

    .index-choose{ margin-top: -200px; padding: 130px 0 80px;}
    .index-choose h2{ font-size: 42px;}
    .index-choose h3{ font-size: 54px;}
    .index-choose .m-txt{ width: 23.5%;}
    .index-choose .m-txt li{ padding-right: 0;}
    .index-choose .m-txt h3{ font-size: 20px; font-weight: bold; }
    .index-choose .m-txt h3::before{ right: 0; height: 20px; width: 6px;}
    .index-choose .m-txt p{ font-size: 14px; line-height: 1.7;}
    .index-choose .m-txt li + li{ margin-top: 20px;}
    
    .index-choose .choose-swiper{ margin: 10px -5px 0;  }
    .index-choose .swiper-slide{ padding: 0 5px; }
    .index-choose .swiper-slide ul{ margin: 0 -5px; }
    .index-choose .swiper-slide li{ padding: 0 5px; }
    .index-choose .swiper-slide p{ font-size: 14px; }
    .index-choose [class*="icon-"]{ width: 40px; height: 40px; line-height: 40px; margin-top: -40px; font-size: 24px; }
    .index-choose .icon-left{ left: -5px; }
    .index-choose .icon-right{ right: -5px; }
    

    .index-about{ padding: 70px 0 80px;}
    .index-about h2{ font-size: 54px;}
    .index-about .txt{ padding-right: 0; }
    .index-about .txt h3{ font-size: 16px;}
    .index-about .txt .pp{ padding-left: 10px;}
    .index-about .pp h4{ margin: 30px 0 10px; font-size: 20px;}
    .index-about .pp p{ font-size: 14px; line-height: 1.7;}

}
@media (max-width: 1024px){
    .banner{ margin-top: 0; padding: 0.65rem 0 0.88rem;}
    .banner .wrap{ padding: 0; }
    .banner h2{ font-size: 0.71rem; margin-bottom: 0.6rem;}
    .banner .more{ display: block; }
    .more{ display: block; margin: 0 auto; width: 3.6rem; text-align: center; line-height: 0.8rem; background: #fff; border-radius: 0.5rem; font-size: 0.32rem; font-weight: bold;}
    .more i{ display: inline-block; margin-right: 0.1rem; position: relative; top: 0.05rem; font-size: 1.4em;}

    .index-pro{ padding: 0.88rem 0 0.7rem; margin-top: 0;}
    .m-txt h2{  font-size: 0.62rem!important;}
    .m-txt p{ font-size: 0.28rem; line-height: 2;}
    .m-txt ul{ margin: 0.25rem 0 0.34rem; padding-left: 1.6rem;}
    .m-txt li{ position: relative; font-size: 0.35rem; line-height: 2.3;}
    .m-txt li::before{ content: ''; position: absolute; left: -0.8rem; top: 0.28rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #c8000a;}
    .i-pro-cont{ position: relative; top: 0; padding: 0;}
    .i-pro-pics{ margin: 0 -0.1rem;}
    .i-pro-pics li{ background: none!important; width: 33.33%; padding: 0 0.1rem; margin-bottom: 0.3rem; border-radius: 0;}
    .i-pro-pics li a{ background: none; padding: 0;}
    .i-pro-pics li .pic{ background: #f2f2f2; border-radius: 0.3rem; padding: 0.3rem 0.2rem;}
    .i-pro-pics p{ font-size: 0.28rem; margin-top: 0.2rem;}
    .more-red{ background: #c8000a; color: #fff;}
    .i-pro-cont .more-red{ position: absolute; right: 0; width: 2.96rem; line-height: 2.3077rem; bottom: 0.78rem; border-radius: 0.3rem;}

    .index-choose{ margin-top: 0; padding: 0.88rem 0 1.2rem;}
    .index-choose h2{ font-weight: bold;}
    .index-choose .m-txt li + li{ margin-top: 0.3rem;}
    .index-choose .m-txt h3::before{ display: none;}
    .index-choose .m-txt h3{ font-size: 0.35rem; margin-bottom: 0.15rem;}
    .index-choose .m-txt p{ font-size: 0.28rem; line-height: 2; overflow: hidden;}
    .index-choose .m-txt p span{ float: left; width: 50%;}
    
    .index-choose .pic{ width: 100%;}
    .index-choose .choose-swiper{ margin-bottom: 6vw;}
    .index-choose .swiper-slide{ width: 50%;}
    .index-choose .swiper-slide p{ display: none;}
    .index-choose .icon-left,.index-choose .icon-right{ display: none;}
}
@media (max-width: 750px){
    .banner{  padding: 0.97rem 0 1.1rem;}
    .banner h2{ font-size: 0.65rem; margin-bottom: 0.69rem;}
    .more{ width: 4.8rem; line-height: 1rem; border-radius: 0.5rem; font-size: 0.43rem;}
    .more i{ margin-right: 0.2rem; top: 0.05rem; font-size: 1.4em;}

    .index-pro{ padding: 1rem 0 1.2rem; }
    .m-txt h2{ font-size: 0.58rem!important;}
    .m-txt p{ font-size: 0.4rem; }
    .m-txt ul{ margin: 0.48rem 0 0.5rem; padding-left: 1.2rem;}
    .m-txt li{ font-size: 0.48rem;}
    .m-txt li::before{ left: -1.2rem; top: 0.38rem; width: 0.34rem; height: 0.34rem; }
    .i-pro-pics{ margin: 0 -0.2rem 0.8rem;}
    .i-pro-pics li{ width: 50%; padding: 0 0.2rem; margin-bottom: 0.43rem; }
    .i-pro-pics li .pic{ border-radius: 0.2rem; }
    .i-pro-pics p{ font-size: 0.43rem; margin-top: 0.33rem;}
    
    .i-pro-pics{ margin: 0 -0.2rem 0.6rem;}
    .i-pro-cont .more-red{ position: static; width: 4.8rem; line-height: 1rem; border-radius: 0.5rem;}

    .index-choose{ padding: 1rem 0 1.2rem;}
    .index-choose .m-txt li + li{ margin-top: 0.3rem;}
    .index-choose .m-txt h3{ font-size: 0.48rem; margin-bottom: 0.15rem;}
    .index-choose .m-txt p{ font-size: 0.43rem; margin-top: 0!important;}
    .index-choose .m-txt p span{ width: 100%;}
}