.banner-con{
    width: 100%;
    position: relative;
    max-height: 100vh;
    overflow-y: hidden;
}
.banner-con video{
    width: 100%;
    display: block;
   
}
.banner-con .video-con{
    position: relative;
}
.banner-con .video-con:before{
    content: "";
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-con .banner{
    position: absolute;
    top: calc(50% + 20px);
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    max-width: 1700px;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}
.banner-con .banner h1{
    font-size: clamp(32px,2.81vw,60px);
    color: #ffffff;
}
.banner-con .banner .title-desc{
    /*max-width: 660px;*/
}
.banner-con .banner .title-desc h3{
    color: #ffffff;
    margin-bottom: 10px;
}
.banner-con .banner a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background: #ff6f42;
    color: #ffffff;
    font-size: 18px;
    margin-top: calc((20px + 2vw));

}
.banner-con .banner  ul{
    display: flex;
    justify-content: space-between;
    /* margin-top: calc(30px + 10vw); */
    border-top: 1px solid #ffffff;
   
}
.banner-con .banner  ul li{
     padding: calc(10px + 2vw) calc(10px + 1vw);
     flex: 1;
     position: relative;
}
/* .banner-con .banner  ul li:before{
    content: "";
    width: 0;
    height: 5px;
    background: #ff6f42;
    position: absolute;
    left: 0;
    top: -3px;
    transition: all .5s ease-in-out;
    border-radius: 2.5px;
} */
 .banner-con .banner  ul li:before{
    content: '';
    display: block;
    position: absolute;
    top: -3px;
    left: auto;
    right: 0;
    background: #ff6f42;
    border-radius: 100px;
    width: 0;
    height: 4px;
    transition: all 0.4s ease-in-out;
 }
.banner-con .banner  ul li:hover:before{
    width: 100%;
    right: auto;
    left: 0;
}
.banner-con .banner  ul li strong{
    position: relative;
    padding-left: 35px;
}
.banner-con .banner  ul li:nth-child(1) strong:before{
    content: "";
    background: url(../img/home/home-icon1.png) no-repeat;
    width: 25px;
    height: 24px;
    position: absolute;
    left: 0;
    top: -2px;
}
.banner-con .banner  ul li:nth-child(2) strong:before{
    content: "";
    background: url(../img/home/home-icon2.png) no-repeat;
    width: 26px;
    height: 25px;
    position: absolute;
    left: 0;
     top: -2px;
}
.banner-con .banner  ul li:nth-child(3) strong:before{
    content: "";
    background: url(../img/home/home-icon3.png) no-repeat;
    width: 27px;
    height: 27px;
    position: absolute;
    left: 0;
     top: -2px;
}
.banner-con .banner  ul li:nth-child(4) strong:before{
    content: "";
    background: url(../img/home/home-icon4.png) no-repeat;
    width: 29px;
    height: 27px;
    position: absolute;
    left: 0;
     top: -2px;
}
.banner-con .banner  ul li p{
    font-size: 14px;
    margin-top: 10px;
}
.mobile-crusher-con {
    margin: calc(30px + 3vw) 0 calc(150px + 3vw);
}

.mobile-crusher-con .mobile-crusher,.case-con .title-desc{
    max-width: 1700px;
    margin:0 auto;
}
.mobile-crusher-con .mobile-crusher .title-desc,.case-con .title-desc{
    display: flex;
    gap: 20px;
}
 h2{
     font-size: clamp(24px,2.81vw,60px);;
    white-space: nowrap;
 }
 .mobile-crusher-con .mobile-crusher .title-desc .line,.case-con .title-desc .line{
    position: relative;
 }
  .mobile-crusher-con .mobile-crusher .title-desc .line::before,.case-con .title-desc .line:before{
    content: "";
    width: 5px;
    height: 80%;
    transform: translateY(-50%);
    background: #18446e;
    position: absolute;
    left: 0;
    top: 50%;
 }
 .mobile-crusher-con .mobile-crusher .title-desc .desc,.case-con .title-desc .desc{
    display: flex;
    align-items: center;
    opacity: 0.8;
 }
.d-block{
    margin: 0 auto;
}
.carousel{
    margin-top: 150px;
    background: url(../img/home/quan.png) no-repeat center center;
    background-size: contain;
}
.carousel-indicators [data-bs-target]{
    border: 1px solid #18446e;
    width: 10px;
    height: 10px;
    border-radius: 10px;

}
.carousel-indicators .active{
    background: #18446e;
}
.carousel-indicators{
    bottom: -72px;
}
.carousel .feature{
    position: absolute;
    max-width: 1400px;
    width: 100%;
    left: 50%;
    top: -110px;
    bottom: -110px;
    right: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(-50%);
    justify-content: space-between;
}
.carousel .feature ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.carousel .feature ul li{
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
}
.carousel .feature ul li:first-child{
    
    justify-content: flex-end;
    align-items: flex-end;
}
.carousel .feature ul li strong{
    font-size: 18px;
    margin: 10px 0;
}
.carousel .feature ul li:first-child p{
    text-align: right;
    
}
.carousel .feature ul li p{
font-size: 14px;
opacity: 0.8;
}

.case-con{
    padding: calc(30px + 3vw) 0;
    background: url(../img/home/map.png) center center;
    background-size: contain;
}
.case-con .title-desc{
    max-width: 1700px;
    margin: 0 auto;
}
.partner-con{
    max-width: 1700px;
    margin: 70px auto;
    padding-top: 70px;
    border-top: 5px solid #d9d9d9;
}









.icon-angle-left:before {
    content: "\f104";
}
.icon-angle-right:before {
    content: "\f105";
}
.carousel-caption{
    top: 46%;
    width: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.carousel-caption h2{
    font-family: SOURCEHANSANSSC;
    font-weight: bold;
    font-size: 5.5rem;
    letter-spacing: 0.5rem;
}
.carousel-caption p{
    margin-top: 1rem;
    margin-bottom: 3rem;
    font-size: 24px;
}
.carousel-caption a{
    padding: 0.8rem 2rem;
    background-color: #e83600;
    border-radius: 2rem;
    color: #fff;
    font-size: 20px;
}
.products-con{
    background: linear-gradient(168deg,#1b2330 0%,#1b2330 20%,#16436d 70%);
    color: #ffffff;
}
.products-con>img{
    opacity: 0.1;
}
.products{
    max-width: 1700px;
    margin: 0 auto;
    padding: 4rem 1rem;
}
.products .left-right{
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 50px;
   gap: 1rem;
}
.title-con{
    position: relative;
}
.title-con .title-bg{
    font-size: 5rem;
    color: #f2f6fa;
    font-weight: bold;
  
}
.title-con .title{
    font-size: 4rem;
    font-weight: bold;
    color: #ffffff;
}
.products .left-right .left-title-detail .detail{
    padding: 2rem 0; 
}
.products .left-right .right-more{
    border: 1px solid #ffffff;
    border-radius: 2rem;
}
.products .left-right .right-more a{
    color:#ffffff;
    padding: 5px 20px ;
    display: block;
    white-space: nowrap;
}
.products ul{
    display: flex;
    justify-content: space-between;

}
.products ul li:nth-child(2n+1){
    border-radius: 1rem;
    text-align: center;
    padding: 2rem;
    width: 25%;
    transition: all 0.5s ease;
}
.products ul li:nth-child(2n){
    position: relative;
}
.products ul li:nth-child(2n):before{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,transparent,#ffffff,transparent);
    position: absolute;
    top: 0;
    left: 0;
}
.products ul li a{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.products ul li:hover{
    filter: drop-shadow(0 0 10px rgb(0,0,0,0.2));
    transform: translateY(-5px);

}
.products ul li .title-capacity{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
    margin-top: 20px;
}
.products ul li .title-capacity .title{
    font-size: 1.2rem;
    /* font-weight: bold; */
}
.products ul li .title-capacity .capacity{ 
     font-size: 14px;
} 
.products ul li:hover .title,.products ul li:hover .capacity{
    color: #fff;
}
.products ul li:hover .capacity{
    border-color: #fff;
}
.products ul li:last-child{
    display: none;
}

.solution{
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 0;
}
.solution .detail-more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.solution .detail-more a{
    padding: 5px 20px;
    border: 1px solid #cccccc;
    border-radius: 2rem;
    white-space: nowrap;
}
.solution ul{
    padding: 3rem 0 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.solution ul li{
    width: calc((100% - 2rem) / 3);
    background-color: #f7f9fa;
    border-radius: 10px;
}
.solution ul li a img{
    border-radius: 10px;
    width: 100%;
}
.solution ul li a .title-arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.solution ul li a .title-arrow .title-capacity p{
    line-height: 2;
}
.solution ul li a .title-arrow .title{
    font-size: 1.125rem;
    color: #1a1a1a;
}
.solution ul li a .title-arrow .capacity{
    color: #4c4c4c;
}
.solution ul li a .title-arrow .iconfont{
    color: #bfbfbf;
    font-size: 2rem;
}
.solution ul li:hover{
    box-shadow: 0 5px 15px 1px rgba(0,0,0,0.3);
}

.cooperation{
    background-color: #f5f7fa;
}

.cooperation .cooperation-con{
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 0;
}
.cooperation .cooperation-con .title-bg{
    font-size: 5rem;
    color: #e3e9ef;
    font-weight: bold;
}
.cooperation .cooperation-con .title{
    font-size: 4rem;
    font-weight: bold;
    color: #333333;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.cooperation .cooperation-con .detail{
    padding: 1rem 0;
}
.cooperation .cooperation-con ul{
    display: flex;
    justify-content: space-between;
    /*flex-wrap: wrap;*/
    gap: 1rem;
    background: linear-gradient(175deg,#e7edf4,#fdfdfe);
    padding: 2rem;
    border-radius: 15px;
}
.cooperation .cooperation-con ul li{
    width: calc((100% - 7rem) / 8);
    transition: all 0.5s ease;
}
.cooperation .cooperation-con ul li:hover{
    transform: translateY(-5px);
}
.cooperation .cooperation-con ul:after{
    content: "";
    margin-left: auto;
}
.pointers .active a{
    background-color: #f2281c;
    color: #fff!important;
}
@media (max-width:1700px){
    .choose .choose-con,.case .left-right,.about .number,.solution,.cooperation .cooperation-con,.banner,.mobile-crusher-con .mobile-crusher, .case-con .title-desc,.partner-con,.footer-con{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (max-width:1400px){
     .carousel-caption h2{
        font-size: 5rem;
    }
    
    .about .introduce-bg{
        padding-left: 1rem;
    }
    .title-con .title-bg,.choose .choose-con .title-con .title-bg,.cooperation .cooperation-con .title-bg{
        font-size: 4rem;
    }
    .title-con .title,.consult .consult-inner .top-left-right .top-left .title,.choose .choose-con .title-con .title,.about .introduce-bg h2,.cooperation .cooperation-con .title{
        font-size: 3rem;
    }
   
}
@media (max-width:1200px){
      .carousel-caption h2{
        font-size: 4rem;
    }
    .title-con .title-bg,.choose .choose-con .title-con .title-bg,.cooperation .cooperation-con .title-bg{
        font-size: 3rem;
    }
    .title-con .title,.choose .choose-con .title-con .title,.about .introduce-bg h2,.cooperation .cooperation-con .title{
        font-size: 2.5rem;
    }
}
@media (max-width:1080px){
    .carousel-caption h2{
        font-size: 3rem;
    }
    .title-con .title-bg, .choose .choose-con .title-con .title-bg, .cooperation .cooperation-con .title-bg{
        font-size: 2.5rem;
    }
    .title-con .title, .choose .choose-con .title-con .title, .about .introduce-bg h2, .cooperation .cooperation-con .title,.consult .consult-inner .top-left-right .top-left .title{
        font-size: 2rem;
    }

    .choose .choose-con .ul-con{
        overflow-x:auto ;
    }
    .choose .choose-con .ul-con ul{
        white-space: nowrap;
        display: block;
    }
     .choose .choose-con .ul-con ul li{
         display: inline-block;
         width: 60%;
         margin-right: 1rem;
     }
      .choose .choose-con .ul-con ul li:last-child{
          margin-right: 0;
      }
     .choose .choose-con .ul-con ul li img{
         width: 100%;
     }
     .choose .choose-con ul li .title-detail{
         justify-content: center;
     }
     .choose .choose-con ul li .title-detail .detail{
         white-space: wrap;
     }
     /*.about .introduce-bg{*/
     /*    max-width: 58%;*/
     /*}*/
     .cooperation .cooperation-con ul{
         flex-wrap: wrap;
     }
     .cooperation .cooperation-con ul li{
         width: calc((100% - 4rem) / 5);
     }
}
@media (max-width:990px){
    .consult .consult-inner .top-left-right .top-right{
        margin-right: 0;
    }
    .banner-con .banner ul{
        display: none;
    }
     /*.about .introduce-bg{*/
     /*    max-width: 70%;*/
     /*}*/
}
@media (max-width:768px){
      
     .title-con .title-bg, .choose .choose-con .title-con .title-bg, .cooperation .cooperation-con .title-bg{
         font-size: 2rem;
     }
     .title-con .title, .choose .choose-con .title-con .title, .about .introduce-bg h2, .cooperation .cooperation-con .title, .consult .consult-inner .top-left-right .top-left .title{
         font-size: 1.5rem;
     }
     .products .left-right .right-more a{
         font-size: 14px;
     }
     .carousel{
        margin-top: 30px;
     }
     .carousel .feature{
        display: none;
     }
     .mobile-crusher-con{
         margin-bottom: calc(80px + 3vw);
     }
     .mobile-crusher-con .mobile-crusher .title-desc, .case-con .title-desc{
        flex-wrap: wrap;
     }
     
     .products ul{
        flex-wrap: wrap;
        gap: 0;
     }
     .products ul li:nth-child(2n){
        display: none;
     }
    .products ul li:nth-child(2n+1){
        width: 50%;
        padding: 0;
    }

    .banner-con .banner{
        display: none;
    }
}
@media (max-width:500px){
    nav .nav>a:last-of-type{
        display: none;
    }
     .products ul li{
         width: 100%;
     }
     .choose .choose-con .ul-con ul li{
         width: 100%;
     }
       .cooperation .cooperation-con ul li{
         width: calc((100% - 2rem) / 3);
     }
       .about .number .item p:first-child{
        font-size: 1.5rem;
    }
    h2{
        white-space: wrap;
    }
}
@media (max-width:400px){
    .about .number .item{
        width:auto;
    }
     .cooperation .cooperation-con ul li{
         width: calc((100% - 1rem) / 2);
     }
}