body {
 background-color:#fff;
}
.milk_banner {    
    padding:110px 0 86px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:relative;
  background-image:url(/Content/images/Milk/banner_bg.png)
}
/*.milk_banner img{
    width:100%
}*/
.banner_main{
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.milk_banner img.banner_right{
    width:58%;
}
.milk_banner .banner_left{
    width:40%;
    padding-bottom:155px;
}
/*.banner_left img{
    width:100%;
}*/
.banner_left h1{
    font-weight:bold;
    font-size:68px;
    color:#fff;
    margin:0;
}
.banner_left_code{
    position:relative;
}
.banner_left_code_img{
    width:78%;
}
.banner_center{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 18%;
    margin: auto;
    position: absolute;
    bottom: -30px;
    right: -2px;
}
@media screen and (max-width:768px){
    .banner_center{
        width: inherit;
        position:inherit;
        margin-top:30px;
        margin-bottom:30px;
    }
}
.banner_center  .miniCode {
    width: 160px;
    height: 160px;
    display: block;
    border-radius: 50%;
}
.banner_center span{
    font-size: 14px;
    margin-top: 10px;
    color: #fff;
}
.milk_total{   
    padding-top:95px;
	position: relative;
	overflow: hidden;
    width: 100%;
     height:460px;
}
.milk_scroll{
    /*white-space: nowrap;*/
    height:460px;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:456px;
    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;*/
    overflow:hidden;
}
.scroll_item_con img{
    width:59px;
    border-radius:50%;
    margin-right:12px;
    float:left;
}
.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;
}
.swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}
.milk_title{
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:46px;
}
.milk_title img{
    width:133px;
}
.milk_title  span{
    color:#222222;
    font-size:30px;
    padding:0 26px;
}
.milk_nubmer{
    text-align:center;
    padding-bottom:80px;
}
.number_item{
    background-color:#EEEEEE;
    border-radius:14px;
    margin:0 34px;
    width:120px;
    height:160px;
   line-height:160px;
   text-align:center;
   display:inline-block;
   color:#FE8C07;
   font-size:115px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:relative;
    transition: transform 0.3s ease;
    overflow:hidden;
}
.number_item:last-child{
    background-image: url(/Content/images/Milk/number_bg.png);
     background-color:transparent;
}
.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;
}
.sign_banner{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  padding:72px 0;
  text-align:center;
}
.sign_banner img{
    width:100%;
}

.sign_left,.sign_center,.sign_right{
    display:inline-block;
    vertical-align: bottom;
}
.sign_left img,.sign_right img{
    width:100%;
}
.sign_left {
    width:40%;
}
.sign_right {
    width:10%;
    padding-bottom:58px;
}

.sign_center img{
    width:65%;
}
.sign_center h2{
    font-size:20px;
    color:#222222;
    padding:48px 18px 86px;
    font-weight:bold;
    margin-bottom:0;
}
.chart{
        text-align:center;
        padding-bottom:72px;
}
.chart h2{
    color:#222222;
    font-size:30px;
    padding:72px 0 35px;
    margin:0;
}
.chart img{
    width:48%;
}
.milk_col{
    background-repeat:no-repeat;
     background-image: url(/Content/images/Milk/col_bg.png);
  background-position:center;
  background-size:cover;
    padding:74px 0 54px;
}
.col_main{
    width:1250px;
    margin:0 auto;
}
.col_item{
    display:inline-block;
    width:360px;
    vertical-align: top;
    text-align:center;
    position:relative;
}
.col_item img{
    width:94px;
    -webkit-transition:all ease-in-out 400ms;
    transition:all ease-in-out 400ms;
    -ms-transition:all ease-in-out 400ms;
}
.col_info{    
    transition: all 0.5s ease .0s;
    -moz-transition: all 0.5s ease .0s;
     -ms-transition: all 0.5s ease .0s;
     transition: all 0.5s ease .0s;
}
.col_info h2{    
    color:#222222;
    font-size:29px;
    padding:30px 0 12px;
    margin-bottom:20px;
    font-weight:bold;
    position:relative;
}
.col_info h2:after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    width:56px;
    height:2px;
    background-color:#FF9000;
    border-radius:1px;
    margin-left:-28px;
    transform-origin: center;
    transform: scaleX(1);
    transition: transform 0.3s ease;
}
.col_info h2:before{
    content:'';
    position:absolute;
    left:10%;
    bottom:0;
    right:10%;
    height:2px;
    background-color:#FF9000;
    border-radius:1px;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.col_item:hover img {
   -webkit-transform:rotateY(180deg) translateY(-10px);
   -moz-transform:rotateY(180deg) translateY(-10px);
   -ms-transform:rotateY(180deg) translateY(-10px);
    transition: all 0.5s ease .0s;
    -moz-transition: all 0.5s ease .0s;
     -ms-transition: all 0.5s ease .0s;
     transition: all 0.5s ease .0s;
}
.col_item:hover .col_info{
    transform:translateY(-10px);
     -moz-transition: all 0.5s ease .0s;
     -ms-transition: all 0.5s ease .0s;
     transition: all 0.5s ease .0s;
}

.col_info p{
    color:#222222;
    font-size:18px;
    margin-bottom:20px;
    text-align:left;
}
.col_item:nth-child(2){
    margin:0 80px;
}
.col_item:nth-child(2):after{
    content:'';
    position:absolute;
    left:-210px;
    top:30px;
    width:330px;
    height:29px;
    background-repeat:no-repeat;
    background-image: url(/Content/images/Milk/col_line.png);
    background-position:center;
    background-size:cover;
    z-index:1;
}
.col_item:nth-child(2):before{
    content:'';
    position:absolute;
    right:-210px;
    top:30px;
    width:330px;
    height:29px;
    background-repeat:no-repeat;
    background-image: url(/Content/images/Milk/col_line.png);
    background-position:center;
    background-size:cover;
     z-index:1;
}
.milk_slide{
    padding:72px 0;
    position:relative;
}
.milk_slide:after{
    content:'';
    position:absolute;
    left:0;
    bottom:50px;
    right:0;
    width:100%;
    background-color:#FF9000;
    height:416px;
}
.slide_main{
    width:1165px;
    margin:0 auto;    
    display:flex;
    justify-content:space-between;
}

.gallery-top {
    width: 960px;
    margin: 0;
}
.gallery-top video{
    width:100%;
    height:573px;    
    object-fit:cover;
}
.slide_right {
    width: 175px;
}

.gallery-thumbs {
    width: 175px;
    height:350px;
}

.gallery-thumbs .swiper-slide {
    width: 100%;  
}
.gallery-thumbs .swiper-slide  img,.gallery-top .swiper-slide  img{
    width:100%;
}


.slide_button{
    display:flex;
    justify-content:space-between;
    padding:220px 0 50px;
}
.swiper-button-left img,.swiper-button-right img{
    width:66px;
}
.gallery-top h2{
    color:#222222;
    font-size:30px;
    line-height:50px;
    width:840px;
    padding:62px 0 0 86px;
    background-repeat:no-repeat;
    background-position:top left;
    background-size:114px;
    position:relative;
}
.gallery-top .swiper-slide h2 img {
    position:absolute;
    top:0;
    left:0;
    width:114px;
    z-index:1;
}
.gallery-top h2 p{
    position:relative;
    z-index:2;    
    color:#222222;
    font-size:30px;
    line-height:50px;
}
.video_main{
    position:relative;
}
.video_main img.big_play{
  position:absolute;
    top:50%;
    left:50%;
    width:108px;
    height:108px;
    z-index:22;
    margin-top:-54px;
    margin-left:-54px;
    -webkit-transform: scale(1);-moz-transform: scale(1);
    -ms-transform: scale(1);transform: scale(1);
    -webkit-transition: all 0.5s ease .0s;
    -moz-transition: all 0.5s ease .0s;
    -ms-transition: all 0.5s ease .0s;
    transition: all 0.5s ease .0s;
}

.gallery-thumbs .swiper-slide{
    font-size:0;
}
.gallery-thumbs .swiper-slide  img.thumbs_play{
     position:absolute;
    top:50%;
    left:50%;
    width:42px;
    height:42px;
    z-index:22;
    margin-top:-21px;
    margin-left:-21px;    
    -webkit-transform: scale(1);-moz-transform: scale(1);
    -ms-transform: scale(1);transform: scale(1);
    -webkit-transition: all 0.5s ease .0s;
    -moz-transition: all 0.5s ease .0s;
    -ms-transition: all 0.5s ease .0s;
    transition: all 0.5s ease .0s;
}


.thumb_main{
    position:relative;
     border:2px solid transparent;
}
.video_main:hover img.big_play,.thumb_main:hover  img.thumbs_play{
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}
.gallery-thumbs .swiper-slide p{
    position:absolute;
    left:0;    
    right:0;
    bottom:0;
    margin:0;
    z-index:22;
    height: 22px;
    width:100%;
    background: linear-gradient(180deg, rgba(97, 97, 97, 0.57) 0%, #323232 100%);
    padding:0 9px;
}
.gallery-thumbs .swiper-slide p span{
    font-size:12px;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 100%;
    display:block;
}
.gallery-thumbs .swiper-slide-thumb-active .thumb_main {
    border:2px solid #fff;
}
.gallery-thumbs .swiper-slide-thumb-active p{
    opacity:0;
}
.service_title {
    text-align:center;
    padding-bottom:38px;
}
.service_title h2{
    font-family:"Boulder";
    color:#F3F3F3;
    font-size:105px;
    padding:0;
    margin:0;
}
.service_title p{
    color:#222222;
    font-size:36px;
    margin:-50px 0 0;
}
.service_img img {
    width:100%;
}
.cooperation{
    padding:90px  0;
    background-repeat:no-repeat;
    background-image: url(/Content/images/Milk/cooperation_top.png);
    background-position:center bottom;
    background-size: cover;
}
.cooperation_main{
    width:1140px;
    margin:0 auto;
     display:flex;
    justify-content:space-between;
}
.cooperation_left_top{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:30px;
}
.cooperation_left p{
    color:#222222;
    font-size:28px;
    line-height:40px;
    margin:0;
}
.cooperation_right {
    position:relative;
    padding:56px;
}
.cooperation_right:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:308px;
    background-color:rgba(255, 155, 7, 0.1);
    height:364px;
}
.cooperation_right img {
    width:100%;
    position:relative;
    z-index:1;
}
.good{
     background-repeat:no-repeat;
     scrollbar-base-color:#FF9000;
    background-image: url(/Content/images/Milk/cooperation_bottom.png);
    background-position:center top;
    background-size:100%;
    padding-top:50px;
}
.good_title{
    text-align:center;
}
.good_title h2{
    font-family:"Boulder";
    color:rgba(255,255,255,0.18);
    font-size:105px;
    padding:0;
    margin:0;
}
.good_title p{
    color:#fff;
    font-size:36px;
    margin:-50px 0 0;
}
.good_slide{
    width:1300px;
    background-color:#F8F8F8;
    margin:30px auto 0;
    padding:15px  15px 70px 18px;
    position:relative;
}
.good_container .swiper-slide{
    width:335px;
}
.good_container .swiper-slide img{
    width:100%;
}
.swiper-pagination{
    left:50%;
    bottom:30px;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
}
.swiper-pagination-bullet{
    width:80px;
    height:6px;
    background-color:#D6D6D6;
    border-radius:0;
}
.swiper-pagination-bullet-active{
    background-color:#FF9000;
    border-radius:3px;
}
.good_btn{
    position:absolute;
    bottom:17px;
    right:136px;
}
.good_left,.good_right{
    display:inline-block;
    margin:0 14px;
}
.good_left img,.good_right img{
    width:34px;
}
.milk_bottom{
    padding:20px 0;
}
.milk_bottom_title{
    color:#999999;
    font-size:18px;
    padding-bottom:72px;
    text-align:center;
    margin:0;

}
.bottom_flex{
    width:1300px;
    margin:0 auto;
}
.bottom_box{
     width:610px;
     display:inline-block;
     vertical-align: top;
     margin:0 18px 133px;
}
.bottom_item{
    width:610px;
    height:254px;
    border:1px solid #CCCCCC;
    position:relative;
     display:flex;
      padding:56px 39px;
     align-items:center;
     flex-direction:column;
     -webkit-transition:all 0.4s,-webkit-transform .4s;
    -moz-transition:all 0.4s,-moz-transform .4s;
    -o-transition:all 0.4s,-o-transform .4s;
    transition:all 0.4s,transform .4s;
}

.bottom_item::before,.bottom_item::after{
    top:-1px;
    right:-1px;
    bottom:-1px;
    left:-1px;
    position:absolute;
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.4s,-webkit-transform .4s;
    -moz-transition:opacity 0.4s,-moz-transform .4s;
    -o-transition:opacity 0.4s,-o-transform .4s;
    transition:opacity 0.4s,transform .4s;
    z-index: 1
}
.bottom_item::before{
    border-top:2px solid #FF9000;
    border-bottom:2px solid #FF9000;
    -webkit-transform:scale(0,1);
    -moz-transform:scale(0,1);
    -o-transform:scale(0,1);
    transform:scale(0,1);
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0
}
.bottom_item::after{
    
    border-right:2px solid #FF9000;
    border-left:2px solid #FF9000;
    -webkit-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -o-transform:scale(1,0);
    transform:scale(1,0);
    -webkit-transform-origin:100% 0;
    -moz-transform-origin:100% 0;
    -o-transform-origin:100% 0;
    transform-origin:100% 0

}
.bottom_item:hover::before,.bottom_item:hover:after{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.bottom_item:hover{
    transform:translateY(-10px)
}
.item_img{
    display:flex;
    justify-content:center;
    align-items:center;
    flex: 1;
    width: 100%;
}
.item_img img{
    max-width:430px;
}
.item_img a{
    color:#FF9000;
    font-size:18px;
    padding-right:14px;
    display:none;
}
.item_title{
    position:absolute;
    top:-29px;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    padding:0 50px;
    background-color:#fff;
    z-index:2;
}
.item_title span{
    width:189px;
    height:58px;
    background-color:#EEEEEE;
    border-radius:29px;
    color:#222222;
    font-size:28px;
    font-weight:bold;
    text-align:center;
    display:inline-block;
    line-height:58px;
}
.big {
    overflow: hidden;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s ease .0s;
    -moz-transition: all 0.5s ease .0s;
    -ms-transition: all 0.5s ease .0s;
    transition: all 0.5s ease .0s;
}
.big:hover{
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}
.service_img{
    background-color:#f8f8f8;
    text-align:center;
}
.service_img img{
    width:57%;
}
/*1300*/
@media screen and (max-width:1300px){
    .good_slide,.col_main{
        width:90%;     
    }
    .col_main {        
        font-size: 0;
    }
    .swiper-pagination-bullet{
        width:60px;
    }
    .good_container .swiper-slide{
        width:25%;
    }
    .bottom_flex{
        width:90%;
    }
    .bottom_box{
        width:45%;
        margin: 0 2% 60px;
    }
    .bottom_item{
        width:100%;
        padding:30px;
    }
    .item_img img{
        max-width:80%;
    }
    .col_item{
        width:30%;
    }
    .col_item:nth-child(2){
        margin:0 5%;
    }
    .col_item:nth-child(2):before{
        left: 70%;
      width: 80%;
     background-size: 100%;
    }
    .col_item:nth-child(2):after{
        left: -50%;
      width: 80%;
     background-size: 100%;
    }
    .col_info h2{
        font-size:24px;
    }
    .col_info p{
        font-size:16px;
    }
}
@media screen and (max-width:1200px) {
    .slide_main,.banner_main, .cooperation_main{
        width:90%;
    }
    .gallery-top{
        width:75%;
    }
    .slide_right{
        width:20%;
    }
    .gallery-top h2 p{
        font-size:24px;

    }
    .gallery-top h2{
        width:100%;
        padding:38px 0 0 60px
    }
    .gallery-top .swiper-slide h2 img{
        width:80px;
    }
    .milk_slide:after{
        bottom: 5%;
    }
    .cooperation_right{
        max-width:70%;
    }
    .number_item{
        margin: 0 2%;
    width: 12%;
    }
}
@media screen and (max-width:1024px) {
   .service_title h2,.good_title h2{
       font-size:80px;
   }
   .bottom_item{
       padding:20px 0;
   }
   .col_info h2{
       font-size:22px;
   }
}
@media screen and (max-width:768px) {
    .banner_main{
        flex-direction:column;
}
    .milk_banner img.banner_left{
        padding-bottom:20px;
        width:80%;
    }
    .milk_banner img.banner_right{
        width:80%;
    }
    .service_img img{
    width:90%;
}
    .milk_banner{
        padding:50px 0;
    }
    .milk_banner .banner_left{
        width:100%;
        padding-bottom: 30px;
    }
    .sign_banner{
        padding:30px 5%;
    }
    .sign_left{
        width:100%;
        margin:10px 0;
    }
    sign_center{
        width:50%;
        margin:10px 0;
    }
    .sign_center h2{
        padding:20px 0 0;
        font-size:14px;
        font-weight:normal;
    }
    .sign_right{
        display:none;
    }
    .scroll_item{
        max-width:200px;
        margin-right:10%;
        margin-bottom:20px;
        padding:3px 8px;
        border-width:1px;
    }
    .scroll_item:last-child{
        margin-left:60px;
    }
    .scroll_item_con img{
        width:42px;
    }
    .scroll_item_con p{
        font-size:14px;
    }
    .milk_total{
        padding-top:30px;
        height:190px;
    }
    .milk_scroll{
        height:240px;
    }
    .milk_title span{
        font-size:20px;
        padding:0 10px;
    }
    .milk_title img{
       display:none;
    }
    .number_item{
        font-size:30px;
        height:50px;
        line-height:50px;
        width: 10%;
    }
    .milk_title,.milk_nubmer,.chart{
        padding-bottom:20px;

    }
    .chart h2{
        font-size:12px;
        padding:20px 0;
    }
    .milk_col{
        padding:35px 0;
    }
    .col_item{
        width:100%;
        display:block;
        margin-bottom:30px;
    }
    .col_info h2{
        font-size:18px;
        padding:15px 0;
    }
    .col_info p{
        font-size:14px;
        margin-bottom:10px;
    }
    .col_item:nth-child(2):before,.col_item:nth-child(2):after{
        opacity:0;
    }
    .gallery-top{
        width:100%;
    }
    .slide_right{
        display:none;
    }
    .gallery-top h2 p{
        font-size:16px;
        line-height:25px;
    }
    .gallery-top .swiper-slide h2 img{
        width:35px;
    }
    .milk_slide,.service_title,.cooperation{
        padding:30px 0; 
    }
    .gallery-top h2{
        padding:15px 0 0 20px
    }
    .milk_slide:after,.cooperation_right:after{
        height:0;
    }
    .service_title h2, .good_title h2,.good_btn,.swiper-pagination{
        display:none;
    }
    .service_title p,.good_title p{
        font-size:16px;
        margin:0;
    }
    .video_main img.big_play{
        width:50px;
     height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    }
    .cooperation_main{
        flex-direction:column;
    }
    .cooperation_right{
        width:100%;
        padding:0;
        max-width:100%;
    }
    .cooperation_left_top{
        margin-bottom:20px;
    }
    .cooperation_left p{
        font-size:16px;
         margin-bottom:20px;
         line-height: 30px;
    }
    .good{
        padding-top:30px;
    }
    .good_slide{
        padding:15px;
    }
    .milk_bottom_title{
        font-size:14px;
        padding-bottom:30px;
    }
    .bottom_box{
        width:90%;
        margin:10px 5% 30px;
        display:block;
    }
    .item_title{
        padding:0 20px;
        top: -15px;
    }
    .item_title span{
        width:100px;
        height:30px;
        line-height:30px;
        font-size:14px;
    }
    .bottom_item{
        height:auto;
    }
    .item_img a{
        font-size:12px;
    }
    .item_img img{
        max-width: 75%;
    }
    .good_container .swiper-slide{
        width:35%;
    }
    .good_slide{
        margin:0 auto;
    }
    .banner_left h1{
        font-size:30px;
        margin-top: -45px;
    margin-bottom: -50px;
    }
    .chart img{
        width:90%;
    }
    .gallery-top video{
        height:auto;
    }
}