/**/
#susta_intro{padding:100px 0;}
#susta_intro .con{float: left;width: calc(100% - 820px);padding-right: 50px;}
#susta_intro .con h2{margin-bottom: 30px;}
#susta_intro .con .des ul li{list-style: inside;}
#susta_intro .con .des ul li::marker{color: #2da766;}

#susta_intro .img{float: right;width: 820px;}


@media(max-width:1540px){
    #susta_intro .con{width: 50%;}
    #susta_intro .img{width: 50%;}
}

@media(max-width:1100px){
    #susta_intro{padding:30px 0;}
    #susta_intro .con{width: 100%;margin-bottom: 20px;}
    #susta_intro .img{width: 100%;}
}

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



/**/
#susta_down{padding-bottom: 100px;position: relative;}
#susta_down .swiper-slide{position: relative;}
#susta_down .top{background-color: #ededed;position: relative;padding-top: 65px;}
#susta_down .top .w1500{display: flex;gap:45px;}
#susta_down .top .w1500 .img{width: 395px;position: relative;z-index: 2;}
#susta_down .top .w1500 .con{width: calc(100% - 395px);padding-left: 0px;}
#susta_down .top .w1500 .con h2{margin-bottom: 30px;}


#susta_down .bottom{width: 100%;position: absolute;z-index: 1;bottom: 0;left: 0;background-color: #fff;}
#susta_down .bottom .w1500{padding:60px 0;padding-left: 430px;}

#susta_down .bottom a{display: inline-block;padding:16px 25px;border-radius: 5px;background-color: #f9b70d;color: #fff;border: 1px solid #f9b70d;
background-position: 240px center;background-repeat: no-repeat;background-image: url(../images/down-h.png);padding-right: 40px;}
#susta_down .bottom a:hover{background-color: transparent;color: #666;background-image: url(../images/down-s.png);}
#susta_down .bottom a:nth-child(2){background-color: transparent;color: #666;margin-left: 20px;
background-position: 235px center;background-image: url(../images/down-s.png);}
#susta_down .bottom a:nth-child(2):hover{background-color: #f9b70d;color: #fff;background-image: url(../images/down-h.png);}


#susta_down .button-box{
    
    width: 100px;
    height: 5px;
    position: absolute;
    right: 220px;
    bottom: 190px;
}

#susta_down .button-box .swiper-pagination{display: flex;width: 100%;gap:10px}


#susta_down .button-box .swiper-pagination-bullet{width: unset;height: 5px;flex:1;display: block;border-radius: unset;}
#susta_down .button-box .swiper-pagination-bullet{background-color: #f1f1f1;opacity: 1;}
#susta_down .button-box .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #f1f1f1;}
#susta_down .button-box .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    content: "";
    background-color: #2da766;
    width: 0%;
    height: 100%;
    display: block;
    animation: toWidth 8s forwards;
}

@keyframes toWidth{
    0%{width: 0%;}
    100%{width: 100%;}
}



@media(max-width:1540px){
    #susta_down .button-box{right: 20px;}
}

@media(max-width:1280px){
    #susta_down .button-box{right: auto;bottom: 110px;left: 430px;}
}

@media(max-width:1100px){
    #susta_down{padding-bottom: 30px;}
    #susta_down .top .w1500 .img{width: 50%;}
    #susta_down .top .w1500 .con{width: 50%;}
    #susta_down .top{padding-top: 30px;padding-bottom: 30px;}
    #susta_down .bottom{position: relative;}
    #susta_down .bottom .w1500{padding: 30px 0;padding-left: 0;text-align: center;}
    #susta_down .button-box{right: auto;bottom: 0;left: auto;margin: 0 auto;position: relative;}
}

@media(max-width:768px){
    #susta_down .top .w1500{flex-wrap: wrap;gap:20px;}
    #susta_down .top .w1500 .img{width: 100%;margin-bottom: 20px;}
    #susta_down .top .w1500 .con{width: 100%;}

    #susta_down .bottom a{width: 90%;margin:0 auto;margin-bottom: 10px;background-position: 95% center;}
    #susta_down .bottom a:nth-child(2){margin-left: 0;background-position: 95% center;}
}




/**/



#susta_cases{padding-bottom: 100px;}
#susta_cases h2{margin-bottom: 30px;}

#susta_cases ul{display: flex;flex-wrap: wrap;gap:2%}
#susta_cases ul li{width: 32%;padding:30px;background-color: #f3f3f3;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
#susta_cases ul li .img{margin-bottom: 35px;}
#susta_cases ul li .con {}
#susta_cases ul li .con b{margin-bottom: 15px;display: block;}

#susta_cases ul li:hover{background-color: #2da766;}
#susta_cases ul li:hover .con *{color: #fff;}



@media(max-width:1540px){
    #susta_cases ul li{padding:25px;}
}

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

@media(max-width:1100px){
    #susta_cases{padding-bottom: 30px;}
    #susta_cases ul li{width: 49%;margin-bottom: 2%;padding:15px;}
}

@media(max-width:768px){
    #susta_cases ul li{width: 100%;}
}