/*产品分类图片*/
.p_cate{min-width: 1280px; padding: 80px 0; background-color: #e6e6e6;}
.p_cate_tit a{border-bottom: 1px solid #666666; padding-bottom: 15px;}
.p_cate_con{display: flex; justify-content: space-between;}
.p_cate_con > div{transition: all 1s ease; position: relative; height: 600px; width: 25%; background-size: cover !important; overflow: hidden;}
.p_cate_con > div:hover{width: 80%; .p_cate_con_bg{opacity: 1;} .item{opacity: 1;} .more{opacity: 1;} .arrow_ani{opacity: 0;} .p_cate_con_main{padding-right: 0;}}
.p_cate_con_bg{transition: all 1s; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.2)); opacity: 0;}

.p_cate_con_main{position: relative; padding: 5%;}
.p_cate_con_main .tit{font-size: 28px; line-height: 42px; font-weight: bold; color: #ffffff; padding-bottom: 30px; text-shadow: 2px 2px 2px #333333;}
.p_cate_con_main .con{padding-top: 10px; margin-bottom: 40px;}
.p_cate_con_main .more{transition: all .5s; opacity: 0;}
.p_cate_con_main .more a{transition: all .5s; border: 1px solid #ffffff; padding: 10px 20px; color: #ffffff; border-radius: 8px;}
.p_cate_con_main .more a:hover{background-color: #ffffff; color: #333333;}

.p_cate_con_main .item{transition: all 1s; float: left; width:25%; padding: 1%; margin-right: 5%; background-color: #ffffff; color: #333333; border-radius: 10px; font-size: 20px; text-align: center; opacity: 0;}
.p_cate_con_main .item:hover{transform: translateY(-5px); box-shadow: 0 20px 35px -15px rgba(0,0,0,.25);}
.p_cate_con_main .item .img_box{display: flex; overflow: hidden; align-items: center;}
.p_cate_con_main .item img{width: 100%; border-radius: 10px; margin-bottom: 8px;}
.p_cate_con_main .item p{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

@keyframes b1{0%{transform: translateX(0) scale(0);} 30%{transform: translateX(30px) scale(1);} 70%{transform: translateX(42px) scale(1);} 100%{transform: translateX(70px) scale(0);}}
@keyframes b2{0%{transform: translateX(30px) scale(1);} 30%{transform: translateX(42px) scale(1);} 70%{transform: translateX(70px) scale(0);} 100%{transform: translateX(0) scale(0);}}
@keyframes b3{0%{transform: translateX(42px) scale(1);} 30%{transform: translateX(70px) scale(0);} 70%{transform: translateX(0) scale(0);} 100%{transform: translateX(30px) scale(1);}}
@keyframes b4{0%{transform: translateX(70px) scale(0);} 30%{transform: translateX(0) scale(0);} 70%{transform: translateX(30px) scale(1);} 100%{transform: translateX(42px) scale(1);}}
.arrow_ani{transition: all .2s; position: absolute; width: 100px; height: 20px; top: 50%; left: 50%; margin-left: -50px; margin-top: -10px; opacity: 1;}
.arrow_ani span.fa-chevron-right{position: absolute; font-size: 24px; line-height: 24px; color: #ffffff; text-shadow: 1px 1px 1px #999999;}
.arrow_ani .b1{animation: b1 3s infinite;}
.arrow_ani .b2{animation: b2 3s infinite;}
.arrow_ani .b3{animation: b3 3s infinite;}
.arrow_ani .b4{animation: b4 3s infinite;}

@media screen and (max-width: 2560px) {
    .p_cate_con > div{height: 600px;}
    .p_cate_con .item p{font-size: 22px;}
}
@media screen and (max-width: 2200px) {
    .p_cate_con > div{height: 550px;}
    .p_cate_con .item p{font-size: 20px;}
}
@media screen and (max-width: 1920px) {
    .p_cate_con > div{height: 500px;}
    .p_cate_con .item p{font-size: 18px;}
}
@media screen and (max-width: 1600px) {
    .p_cate_con > div{height: 450px;}
    .p_cate_con .item p{font-size: 16px;}
}
@media screen and (max-width: 1280px) {
    .p_cate_con > div{height: 400px;}
    .p_cate_con .item p{font-size: 14px;}
}