@charset "utf-8";
/*产品中心*/

.product{
    background: #151515;
    box-sizing: border-box;
}
.produce_nav{
    width:12%;text-align: left;
    left:3%;top:12%;  position: relative;
    color:#fff;
    font-size:20px;
}
.produce_nav>img{
    width:54%;
}
.produce_nav ul{
    margin-top:50px;
}
.produce_nav li{
    margin-top:40px;
}
.produce_nav li a{
    border-bottom:2px solid transparent;cursor: pointer;
    padding-bottom:5px;
}
.produce_nav li a.now{
    border-bottom:2px solid #fff;
}
.produce_nav li a:hover{
    border-bottom:2px solid #fff;
}

/*产品右侧列表*/
.produce_list{
    width:86%;position: absolute;right:0;top:12%;
    height:77%;
}
.produce_list .swiper-container{
    width:90%;
}
.produce_list .swiper-slide{
	background-position:center;
	background-size:cover;
}
.produce_list .swiper-slide>img{
    width:100%;max-width: 480px;
}
.produce_list .swiper-button-prev{
    background-image: url(../image/proPrev.jpg);left:0;
}
.produce_list .swiper-button-next{
    background-image: url(../image/proNext.jpg);right:0;
}
.produce_list .swiper-button-prev,.produce_list .swiper-button-next{
    width:58px;height:58px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.proHover{
    position: absolute;top:0;left:0;opacity:0;
    background-color: #8d4549;width:100%;height:100%;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    transition: opacity .3s linear;
    overflow: hidden;
}
.proHover:before{
    content:"";display: block;width:94%;height:94%;border:1px solid #fff;
    position: absolute;top:3%;left:3%;
    opacity:0;
}
.proHover>div{
    position: absolute;top:50%;left:50%;width:64%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.proHover h3{
    text-align: center;padding-bottom:80px;
    position: relative;font-size: 18px;
    opacity:0;
}
.proHover h3:after{
    content: "";display: block;border-left:1px solid #af787b;
    height:35px;position: absolute;left:50%;bottom:23px;
}
.proHover>div div{
  text-align: center;
    opacity:0;
    font-size: 13px!important;
}

.proHover>div div p{
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space:nowrap!important;
    display:none;
}
.proHover>div div p:first-child{
	display:block;
}
.proHover>div div span{
	font-size: 13px!important;
}
.proHover>div>a{
    opacity:0;
    display: block;width:70%;height:40px;background: #fff url(../image/proMore.jpg) no-repeat center;
    position: relative;left:15%;margin-top:5%;
     -webkit-transition:opacity .5s ease-out .3s;
    -o-transition:opacity .5s ease-out .3s;
    transition:opacity .5s ease-out .3s;
}

.produce_list .swiper-slide:hover .proHover{
    opacity:1;
}

.produce_list .swiper-slide:hover .proHover:before{
    -webkit-animation:busScale .5s ease-out forwards;
    -o-animation:busScale .5s ease-out forwards;
    animation:busScale .5s ease-out forwards;
}
.produce_list .swiper-slide:hover .proHover h3{
	opacity:1;
    -webkit-animation:fadeInUp .5s ease-out forwards;
    -o-animation:fadeInUp .5s ease-out forwards;
    animation:fadeInUp .5s ease-out forwards;
}
.produce_list .swiper-slide:hover .proHover>div div{
	opacity:1;
    -webkit-animation:fadeInDown .5s ease-out forwards;
    -o-animation:fadeInDown .5s ease-out forwards;
    animation:fadeInDown .5s ease-out forwards;
}
.produce_list .swiper-slide:hover .proHover a{
	opacity:1;
    -webkit-animation:fadeInDown .5s ease-out .3s forwards;
    -o-animation:fadeInDown .5s ease-out .3s forwards;
    animation:fadeInDown .5s ease-out .3s forwards;
}

@media screen and (min-device-width:1024px) and (max-device-width:1290px){  /*.6*/
    .produce_nav{
        font-size:15px;
    }
    /*产品右侧列表*/
    .produce_list .swiper-button-prev,.produce_list .swiper-button-next{
        width:38px;height:38px;
    }
    .proHover h3{
        padding-bottom:60px;font-size: 14px;
    }
    .proHover h3:after{
        height:30px;bottom:18px;
    }
    .proHover p{
        font-size: 12px;
    }
    .proHover>div div span{
		font-size: 12px!important;
	}
    .proHover a{
        width:70%;height:30px;
        margin-top:5%;
    }
}
@media screen and (min-device-width:1290px) and (max-device-width:1580px){  /*.75*/
    .produce_nav{
        font-size:15px;
    }
    /*产品右侧列表*/
    .produce_list .swiper-button-prev,.produce_list .swiper-button-next{
        width:43px;height:43px;
    }
    .proHover h3{
       padding-bottom:60px;font-size: 14px;
    }
    .proHover h3:after{
        height:30px;bottom:18px;
    }
    .proHover p{
        font-size: 12px;
    }
    .proHover>div div span{
		font-size: 12px!important;
	}
    .proHover a{
        width:70%;height:30px;
        margin-top:7%;
    }
}
@media screen and (min-device-width:1580px) and (max-device-width:1680px){  /*.85*/
    .produce_nav{
        font-size:17px;
    }
    /*产品右侧列表*/
    .produce_list .swiper-button-prev,.produce_list .swiper-button-next{
        width:50px;height:50px;
    }
    .proHover h3{
        padding-bottom:70px;font-size: 16px;
    }
    .proHover h3:after{
        height:30px;bottom:18px;
    }
    .proHover p{
        font-size: 13px;
    }
    .proHover>div div span{
		font-size: 13px!important;
	}
}