body{
    background-color:#fff;
}
h1,h2,h3,h4,h5,p{
    margin:0;
    padding:0;
}

/*行业案例*/
.index_about ul {
    overflow: hidden;
    zoom: 1;
    width: 1200px;
    margin: 72px auto 0;
}

.slide-item {
    position: relative;
    float: left;
    color: #000;
    font-size: 0;
    width: 25%;
    height: 416px;
    cursor: pointer;
    background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:relative;
}

.slide-item .item-bg {
    width: 100%;
    height: 100%;
}

.slide-item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.slide-item .mask .bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #282726;
    opacity: .2;
    filter: alpha(opacity=20);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(20));
    transition: all .4s cubic-bezier(.4,0,.2,1);
}

.slide-item .mask .slide_txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    padding:0 28px;
}

.slide-item .mask .slide_txt .item-title {
    color: #fff;
    font-size: 28px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}

.slide-item .mask .slide_txt .item-desc {
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    line-height: 24px;
    transition:all .4s cubic-bezier(.4,0,.2,1)
}
.slide-item .mask .slide_txt .item-desc a{
    color: #fff;
}
.slide-item:hover .bg {
    background:#2D2B2A;
    opacity: .6;
    filter: alpha(opacity=60);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(60));
}

.slide-item:hover .slide_txt {
    bottom: 20%;
}


.slide-item:hover .slide_txt .item-title {
    margin-top: 20px;
}

.slide-item:hover .slide_txt .item-desc {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
}

.slide-item:hover .slide_txt .item-desc {
    margin-top: 20px;
}

.home_title{
    text-align:center;
    padding:72px 0 0;
}
.home_title h1{
    color:#222222;
    font-size:36px;
    /*padding-bottom:10px;*/
}
.home_title p{
    color:#999;
    font-size:28px;
}
.swiper_main{
    width:1470px;
    margin:0 auto;
    position:relative;
    padding-left:100px;
}
 .swiper_main .swiper-container {
    width: 100%;
}
.swiper_main .swiper-slide {
	transition: 300ms;
	transform: scale(1);
}

 .swiper_main .swiper-slide{
     width:270px;
     text-align: left;
 }
 .swiper_main .swiper-slide img{
     width:100%;
     transition: 300ms;
 }
  .swiper_main 	.swiper-slide-active img, .swiper_main  .swiper-slide-duplicate-active img{
    width:80%;
    transition: 300ms;
}
 .swiper_number{
     width:50px;
     height:50px;
     border-radius:50%;
     border:1px solid #FF8000;
     color:#FF8000;
     font-size:20px;
     line-height:50px;
     text-align:center;
     margin:10px 10px 10px 30px;
     display: inline-block;
 }
.swiper_main 	.swiper-slide-active  .swiper_number , .swiper_main .swiper-slide-duplicate-active  .swiper_number{
    display:none;
}
.swiper_left{
    position:absolute;
    width:62px;
    top:50%;
    margin-top:-31px;
    left:0;
}
.swiper_left img{
    width:100%;
}
.home_milk{
    background-color:#F6F6F6;
    padding:72px 0;
    margin-top:72px;
}
.home_milk h1{
    color:#222222;
    font-size:36px;
    padding-bottom:45px;
    text-align:center;
}


.milk_total{   
	position: relative;
	overflow: hidden;
    width: 100%;
     height:300px;
}
.milk_scroll{
    /*white-space: nowrap;*/
    height:300px;width:100000px;position:absolute;left:0;
}
.scroll_item{
    border:2px solid #FF8300;
    background-color:rgba(255, 244, 229, 0.7);
    border-radius:44px;
    padding:10px 15px;
    margin-bottom:55px;
    max-width:460px;
    margin-right:25%;    
}

.scrool_height{    
    display:inline-block;
    vertical-align:top;
}
.scroll_item:last-child{
    margin-left:110px;
}

.scroll_item_con{
    display:flex;
    justify-content:flex-start;
    align-items:center;
}
.scroll_item_con img{
    width:59px;
    height:59px;
    border-radius:50%;
    margin-right:12px;
}
.scroll_item_con p{
    color:#333;
    font-size:21px;
    -webkit-line-clamp:2;
    display: -webkit-box;
    -webkit-box-orient:vertical;   
    overflow:hidden; 
    margin:0;
    white-space:normal;
    text-overflow: ellipsis;
}

.home_milk h2{
    color:#222222;
    font-size:30px;
    padding-bottom:66px;
    text-align:center;
}

.milk_nubmer{
    text-align:center;
    padding-bottom:115px;
}
.number_item{
    background-color:#fff;
    border:1px solid #FF8000;
    border-radius:14px;
    margin:0 10px;
    width:96px;
    height:120px;
   line-height:120px;
   text-align:center;
   display:inline-block;
   color:#FE8C07;
   font-size:55px;
    transition: transform 0.3s ease;
    position:relative;
    overflow:hidden;
}
.number_item::after{
    content:'';
    position:absolute;
    transform-origin: center;
    transform: scale(0);    
    border-radius:50%;
    transition: transform 0.3s ease;
    top: 50%;
    left: 50%;
    background-color: #FE8C07;
    z-index: 1;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
}

.number_item:hover{
    color:#fff;
    transition: transform 0.3s ease;
}
.number_item span{
    position:relative;
    z-index:2;
}
.number_item:hover::after{
    transform-origin: center;
    transform: scale(1);
    transition: transform 0.3s ease;
}
.milk_progress{    
    padding-bottom:10px;
}
.milk_progress p{
    color:#FF8000;
    font-size:20px;
    padding-bottom:10px;
}
.milk_progress  i{
    display:inline-block;
    background-color:#FF8000;
    height:8px;
    border-radius:8px;
    width:140px;
    margin-right:50px;
}
.milk_progress span{
    color:#999;
    font-size:20px;
}
.milk_progress a{
    color:#fff;
    font-size:18px;
    width:100px;
    height:37px;
    line-height:37px;
    text-align:center;
    display:inline-block;
    border-radius:30px;
    background-color:#FF8000;
}
.progress_main{
    width:750px;
    margin:0 auto;
}
.home_map{
    padding:72px 0 0;
}
.map_main{
    width:1200px;
    margin:0 auto;
}
.map_box{
    border:1px solid #000;
    border-radius:30px;
    margin-bottom:135px;
    padding:25px 100px;
    margin-top: -5px;
}
#home_map{
     height:747px;
 }


/*swiper*/
.swiper_main {
    width: 1280px;
    margin: 0 auto 30px;
    padding: 0 35px 72px;
    position: relative;
    min-height: 460px;
}

    .swiper_main:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 192px;
        background-color: #FF8001;
        border-radius: 10px;
    }

    .swiper_main .swiper-wrapper {
        align-items: flex-end;
    }

    .swiper_main .swiper-slide {
        text-align: center;
        min-height: 370px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

        .swiper_main .swiper-slide img {
            transition: 300ms;
            width: 86%;
            border-radius: 35px;
            box-shadow: 0px 0px 8px 0px rgba(228,228,228,0.5);
        }

    .swiper_main .swiper-slide-active img, .swiper_main .swiper-slide-duplicate-active img {
        width: 92%;
        transition: 300ms;
    }

.swiper-home {
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 20px;
    right: 0;
    position: absolute;
}

    .swiper-home .swiper-pagination-bullet {
        transition: 300ms;
        background-color: #fff;
        opacity: 1;
        margin: 0 22px;
        z-index: 12;
        position: relative;
    }

    .swiper-home .swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
    }

@media screen and (max-width:1500px) {
 .swiper_main{
     width:90%;
}
 .swiper_main .swiper-slide{
     width:22%;
 }
 .map_box{
     padding: 25px 0;
 }
   
}
@media screen and (max-width:1260px) {
   .index_about ul,.map_main,.swiper_main{
       width:90%;
   }
     .swiper_main {
        min-height: 310px;
    }
}

@media screen and (max-width:1024px) {
     .swiper_main .swiper-slide {
        min-height: 260px;
    }
}

@media screen and (max-width:790px) {
 .slide-item{
     width:50%;
     height:300px;
 }
 .swiper_main:after{
     height:100px;
 }
 .slide-item .mask .slide_txt .item-title{
     font-size:16px;
 }
 .swiper_main .swiper-slide{
     width:31%;
 }
 .swiper_number{
     width:30px;
     height:30px;
     line-height:30px;
     margin:10px 10px 10px 18px;
 }
 .swiper_left{
     width:40px;
 }
 .swiper_main{
     padding-left:60px;
     padding-bottom:30px;
 }
 .swiper_main .swiper-slide{
     min-height:370px;
 }
 .swiper_main{
     min-height:390px;
     /*margin-top:-30px;*/
 }
 .index_about ul{
     margin:30px auto 0;
 }
 .home_title{
     padding:30px 0;
 }
.home_milk h1{
     font-size:24px;
     padding-bottom:30px;
 }
 .home_title p,.home_milk h2{
     font-size:22px;
 }
 .home_milk{
     padding:30px 0;
     margin-top:30px;
 }
 .scroll_item{
     max-width:230px;
     padding:3px 8px;
     margin-bottom:15px;
     border-width:1px;
 }
 .home_milk h2{
     padding-bottom:30px;
 }
 .scroll_item:last-child{
     margin-left:60px;
 }
 .scroll_item_con img{
     width:30px;
     height:30px;
 }
 .scroll_item_con p{
     font-size:16px;
 }
 .milk_total{
     height:180px;
 }
 .number_item{
        width: auto;
    margin: 0 1%;
    height: auto;
    line-height: 1;
    padding: 15px;
    font-size: 19px;
    border-radius: 6px;
 }
 .progress_main{
     width:90%;
 }
 .milk_progress i{
     width:20%;
 }
 .milk_progress:nth-child(2) i{
     width:25%!important;
 }
 .milk_progress:nth-child(3) i{
     width:30%!important;
 }
 .milk_progress:nth-child(4) i{
     width:45%!important;
 }
 .milk_progress:nth-child(5) i{
     width:60%!important;
 }
 .milk_progress:nth-child(6) i{
     width:75%!important;
     margin-right: 20px
 }
 .milk_nubmer{
     padding-bottom:60px;
 }
 .milk_progress p{
     line-height:1;
 }
 .milk_progress a{
     width:auto;
     padding:5px;
     line-height:1;
     font-size:12px;
     height:auto;
 }
 .home_map{
     padding:30px 0 0;
 }
 .map_main>img{
     max-width:80%;
 }
 #home_map{
     height:300px;
 }
}
.map_city {
       position: absolute;
    bottom: 35%;
    right: 23%;
    font-size: 14px;
    color: #333;
    width: 100px;
    z-index: 33;
    }
    .map_city li{
        display:inline-block;
    }
@media screen and (max-width:1024px) {
    .map_city {
        right: 25%;
    bottom: 32%;
    }

}

    @media screen and (max-width: 640px){ 
    .map_city {
        right: 0;
    }
    }