/*产品中心*/
.cptit{ text-align: center;}
.cptit h2{ color: #333333; font-size: 46px; font-weight: bold !important;}
.cptit h2 span{ color: #d10000;}
.cptit p{ color: #999999; font-size: 16px;}
@media screen and (max-width:1440px){
    .cptit h2{ font-size: 32px;}
}
@media screen and (max-width:991px){
    .cptit h2{ font-size: 24px;}
    .cptit p{ font-size: 14px;}
}

.cp_class_lb{ margin-top: 3% !important;}
.cp_class_lb li{ margin: 0 0 7%; background: #fff; cursor: pointer; transition: 0.3s; position: relative;}
.cp_class_lb li .pic{ height: 0; padding-bottom: 75%; background: #fff; position: relative; overflow: hidden;}
.cp_class_lb li .pic img{ width: 100%; height: 100%; /*object-fit: cover; */left: 0; position: absolute; text-align: center; transition:0.3s;}
.cp_class_lb li .font{ padding: 5%; transition: 0.5s; border: 1px solid #ececec;}
.cp_class_lb li .tit{ color: #333333; font-size: 18px; position: relative; height: 55px;white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
.cp_class_lb li .tit:before{ position: absolute; left: 0; bottom: 0; content: ''; width: 10%; height: 3px; background: #c40000;}
.cp_class_lb li .tit:after{ position: absolute; left: -3%; top: 10%; content: 'wokete'; width: 100%; height: 100%; text-transform: uppercase; color: rgba(196,0,0,0.04); font-size: 55px; font-weight: bold;}
.cp_class_lb li .bt{ min-height: 60px; color: #999999; font-size: 16px; margin-top: 5%; display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;}
.cp_class_lb li .more{ width: 50%; height: 45px; line-height: 45px; text-align: center; color: #c40000; margin: 3% auto 0; border: 1px solid #c40000; border-radius: 25px; transition: 0.3s;}
.cp_class_lb li .font_hover{ position: absolute; opacity: 0; left: 0; bottom: 0; width: 100%; z-index: 1; text-align: center; padding: 8% 3%; background: url("../images/chi.png") repeat-x center bottom #fff; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.1); transition: 0.5s;}
.cp_class_lb li .font_hover .tit:before{ left: 45%;}
.cp_class_lb li .font_hover .tit:after{ left: 0;}
.cp_class_lb li .font_hover .bt{ width: 90%; margin: 5% auto; -webkit-line-clamp: 3; min-height: 90px;}
.cp_class_lb li:hover .font{ opacity: 0;}
.cp_class_lb li:hover .font_hover{ opacity: 1; left: 5%; width: 90%;}
.cp_class_lb li:hover .pic img{ transform: scale(1.05);}
.cp_class_lb li .font_hover .more:hover{ background: #c40000; border: 1px solid #c40000; color: #fff;}
@media screen and (max-width:1440px){
    .cp_class_lb li .tit:after{ font-size: 38px;}
}
@media screen and (max-width:1200px){
    .cp_class_lb li .bt{ font-size: 14px;}
}



#cpnav{ margin-top: 3%; padding: 0; position: relative;}
#cpnav .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#cpnav .swiper-slide {
    text-align: left;
    transition: 0.3s;
    background: #fafafa;
    border: 1px solid #efefef;
    padding: 1.5%;
    /* Center slide text vertically */
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#cpnav .swiper-slide a{ display: block; width: 100%;}
#cpnav .swiper-slide p{ color: #333333; font-size: 20px; position: relative; z-index: 2;}
#cpnav .swiper-slide span{ display: block; color: #b7b7b7; font-size: 14px; text-transform: uppercase; font-family: Arial !important; position: relative; z-index: 2;}
#cpnav .swiper-slide i{ position: absolute; right: 15px; bottom: 15px; z-index: 1; color: #efefef; font-size: 48px; font-family: Bahnschrift !important;}
#cpnav .swiper-slide:hover{ background: #d10000; color: #fff;}
#cpnav .swiper-slide:hover p,#cpnav .swiper-slide:hover span{ color: #fff;}
#cpnav .swiper-slide:hover i{ color: rgba(255,255,255,0.3);}
#cpnav .swiper-slide#li-on{ background: #d10000; }
#cpnav .swiper-slide#li-on p,#cpnav .swiper-slide#li-on span{ color: #fff;}
#cpnav .swiper-slide#li-on i{ color: rgba(255,255,255,0.3);}
#cpnav .swiper-button-next:after,#cpnav .swiper-button-prev:after{ display: none;}
#cpnav .swiper-button-next,#cpnav .swiper-button-prev{ width: 50px; height: 50px; line-height: 50px; text-align: center; background: #d10000; border-radius: 100%; transition: 0.3s; color: #fff;font-size: 22px;}
#cpnav .swiper-button-next i,#cpnav .swiper-button-prev i{ color: #fff; font-size: 26px;}
#cpnav .swiper-button-next{ right: -80px;}
#cpnav .swiper-button-prev{ left: -80px;}
#cpnav .swiper-button-next:hover,#cpnav .swiper-button-prev:hover{ background: #d10000;}
@media screen and (max-width:1600px){
    #cpnav .swiper-button-next,#cpnav .swiper-button-prev{ width: 40px; height: 40px; line-height: 40px; top: 58%;}
    #cpnav .swiper-button-next i,#cpnav .swiper-button-prev i{ font-size: 22px;}
    #cpnav .swiper-button-next{ right: -40px;}
    #cpnav .swiper-button-prev{ left: -40px;}
}
@media screen and (max-width:1440px){
    #cpnav .swiper-slide p{ font-size: 18px;}
    #cpnav .swiper-slide span{ font-size: 12px;}
}
@media screen and (max-width:1200px){
    #cpnav .swiper-button-next,#cpnav .swiper-button-prev{ display: none;}
}
@media screen and (max-width:991px){
    #cpnav .swiper-slide{ line-height: 25px;}
    #cpnav .swiper-slide p{ font-size: 16px;}
}


.cpinfo{ position: relative; margin-top: -12%; padding-top: 0;}
.cpinfo .home{ color: #fff; margin-bottom: 30px;}
.cpinfo .home a{ color: #fff; padding: 0 10px;}

.cpinfo_nr{ padding: 25px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1);}
.cp_left{ height: 0; padding-bottom: 38%; position: relative; overflow: hidden; }
.cp_left img{ width: 100%; height: 100%; object-fit: cover; left: 0; position: absolute; transition: 0.3s;}
.cp_right{ padding: 4%; }
.cp_right h2{ color: #333333; font-size: 32px; font-weight: bold !important; position: relative;}
.cp_right h2:before{ position: absolute; left: 0; top: -5px; content: ''; width: 18px; height: 45px; background: #d10000; border-radius: 3px; transform: skewX(-10deg);}
.cp_right h2 p{ position: relative; z-index: 1;}
.cp_right .content{ color: #999999; font-size: 16px; margin: 5% 0; display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;}
.cp_right ul{ padding: 7% 0 !important; border-top: 1px solid #dfdfdf; position: relative;}
.cp_right ul:before{ position: absolute; left: 0; top: -1px;  content: ''; width: 20%; height: 2px; background: #d10000;}
.cp_right ul li p{ margin: 0 auto !important; width: 68px; height: 68px; line-height: 68px; text-align: center; border: 1px dashed #4b4b4b; border-radius: 100%; position: relative;}
.cp_right ul li p i{ color: #d10000; font-size: 34px;}
.cp_right ul li p:before{ position: absolute; right: 0; top: 10px; width: 10px; height: 10px; background: #d10000; border-radius: 100%; content: '';}
.cp_right ul li span{ display: block; height: 50px; line-height: 50px; color: #333333; font-size: 15px;}

.cptel{ background: #121212; border-top-left-radius: 20px; border-bottom-right-radius: 20px;  }
.cptel .zx{ width: 40%; color: #fff; font-size: 18px; background: #d10000; height: 50px; line-height: 50px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; }
.cptel .zx a{ color: #fff;}
.cptel .zx i{ font-size: 26px; margin-right: 10px;}
.cptel .tel{ width: 60%; font-size: 26px; font-weight: bold; font-style: italic; color: #fff;}
.cptel .tel i{ font-weight: normal; font-size: 26px; margin-right: 10px;}
@media screen and (max-width:1200px){
    .cp_right{ padding-top: 0;}
    .cp_right h2{ font-size: 28px;}
    .cp_right .content{ font-size: 14px;}
    .cptel .tel{ font-size: 22px;}
    .cptel .zx{ font-size: 16px;}
    .cptel .zx i{ font-size: 20px;}
}
@media screen and (max-width:991px){
    .cp_left{ padding-bottom: 70%;}
    .cp_right{ padding-top: 5%;}
    .cp_right h2{ font-size: 22px;}
    .cp_right h2:before{ width: 10px; height: 30px; }
}
@media screen and (max-width:768px){
    .cpinfo_nr{ padding: 15px;}
    .cptel .zx{ width: 50%;}
    .cptel .tel i{ display: none;}
    .cptel .tel{ font-size: 16px; width: 50%;}
    .cp_right ul li p{ width: 45px; height: 45px; line-height: 45px;}
    .cp_right ul li p i{ font-size: 24px;}
    .cp_right ul li p:before{ display: none;}
    .cp_right ul li span{ font-size: 12px; height: 30px; line-height: 30px;}
}


.cpinfotit{ height: 60px; line-height: 60px; background: #f9f9f9; text-align: center; overflow: hidden;}
.cpinfotit p{ display: inline-block; margin: 0 auto; background: #d10000; color: #fff; text-align: center; padding: 0 50px; font-size: 24px; font-weight: bold; position: relative;}
.cpinfotit p:before{ position: absolute; left: -15px; top: 0; content: ''; width: 7px; height: 60px; background: #d10000;}
.cpinfotit p:after{ position: absolute; right: -15px; top: 0; content: ''; width: 7px; height: 60px; background: #d10000;}

.cpnr_con{ color: #333333; font-size: 16px; padding: 3% 0 5%; line-height: 35px;}
.cpnr_con img{ max-width: 100%;}
@media screen and (max-width:1200px){
    .cpinfotit p{ font-size: 20px;}
}
@media screen and (max-width:991px){
    .cpinfotit{ height: 40px; line-height: 40px;}
    .cpinfotit p{ font-size: 16px;}
    .cpnr_con{ padding: 15px; font-size: 14px;}
}