/*show-pro*/
.pro-sub dl + dl{ margin-left: 96px;}

.swiper-slide img{ width: 100%;}
.swiper-button-next,
.swiper-button-prev{ width: 50px; height: 50px; background: #737373 url("../images/icon-next.png") no-repeat center; border-radius: 5px; }
.swiper-button-prev{ background-image: url("../images/icon-prev.png");}
.swiper-button-next:hover,
.swiper-button-prev:hover{ background-color: #0076e0;}

.s-pro-cont{ padding: 80px 0; background: #eee; }
.s-pro-cont .cont{ position: relative;}
.s-pro-cont .s-pro-swiper{ width: 50%; position: absolute; height: 100%; }
.s-pro-cont .swiper-slide img{ height: 100%;}
.s-pro-cont .pro-next,
.s-pro-cont .pro-prev{ top: 0; bottom: auto; margin-top: 0;}
.s-pro-cont .pro-next{ right: 0;}
.s-pro-cont .pro-prev{ left: auto; right: 80px;}
.s-pro-cont .txt{ width: 45%; }
.s-pro-cont .txt h2{ font-size: 60px; line-height: 1.17; font-weight: bold;}
.s-pro-cont .pro-canshu li{ margin-top: 25px; }
.s-pro-cont .pro-canshu span{ display: inline-block; position: relative; line-height: 1.2; font-weight: bold; font-size: 24px; padding-top: 20px;}
.s-pro-cont .pro-canshu li:first-child{ display: flex; }
.s-pro-cont .pro-canshu li:first-child span{ flex: 1;}
.s-pro-cont .pro-canshu li:first-child span + span{ flex: 2;}
.s-pro-cont .pro-canshu b{ position: absolute; left: 0; top: 0; font-size: 14px; color: #999;}
.s-pro-cont .txt p{ font-size: 18px; line-height: 1.5; margin: 40px 0 60px;}
.s-pro-cont .pro-btns a{ display: inline-block; width: 11.7em; line-height: 3; text-align: center; font-size: 18px; color: #fff; background: #e1261c; }
.s-pro-cont .pro-btns a + a{ margin-left: 1.1em;}
.s-pro-cont .pro-btns i{ position: relative; top: -0.1em; font-size: 1.3em; margin-right: 0.4em; vertical-align: middle;}

.s-pro-service{ padding: 55px 0 90px; text-align: center; }
.s-pro-service a{ display: inline-block; position: relative; font-size: 18px; font-weight: bold; padding-left: 25px; }
.s-pro-service a + a{ margin-left: 130px;}
.s-pro-service a::before{ content: ''; position: absolute; left: 0; top: 50%; margin-top: -8px; width: 16px; height: 16px; background: #0076e0; border-radius: 50%; }

.s-tit{ position: relative; line-height: 1; padding-top: 20px; font-size: 30px; font-weight: bold; text-transform: uppercase; margin-bottom: 40px; }
.s-tit::before{ content: ''; position: absolute; left: 0; top: 0; width: 110px; height: 5px; background: #0076e0;}

.s-pro-item{ margin-bottom: 100px;}
.pro-adv .pic{ width: 63%; }
.pro-adv .adv-media{ position: relative; width: 100%; padding-top: 65%; background: orange; }
.pro-adv .adv-media iframe,
.pro-adv .adv-media video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pro-adv .img2{ display: none!important; }
.pro-adv .txt{ width: 35%; font-size: 16px;}
.pro-adv .txt p + p{ margin-top: 15px;}

.pro-process .process2,
.pro-process .process3{ display: none;}
.pro-process ul{ margin: -35px -10px 0; }
.pro-process li{ position: relative; float: left; width: 16.66%; padding: 0 10px; margin-top: 50px; }
.pro-process li span{ position: absolute; left: 20px; top: -15px; font-size: 30px; line-height: 1; font-weight: bold;}
.pro-process li p{ text-align: center; line-height: 1; font-size: 18px; padding-top: 15px;}

.case-swiper .swiper-slide {
    -webkit-transition: transform 1.0s;
    -moz-transition: transform 1.0s;
    -ms-transition: transform 1.0s;
    -o-transition: transform 1.0s;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.7;
}
.case-swiper .swiper-slide p{ text-align: center; width: 70%; margin-left: 15%; font-size: 18px; line-height: 1.2; margin-bottom: 10px; height: 2.4em; display: flex; justify-content: center; align-items: flex-end;
    -webkit-transition: transform 1.0s;
    -moz-transition: transform 1.0s;
    -ms-transition: transform 1.0s;
    -o-transition: transform 1.0s;
    opacity: 0;
}
.case-swiper .swiper-slide-active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.case-swiper .swiper-slide-active p{ opacity: 1;}
.pro-case .case-swiper img{ width: 100%; }
.case-swiper .case-next{ right: 18.6%;}
.case-swiper .case-prev{ left: 18.6%;}

.pro-chanpin .cont{ position: relative; padding-top: 70px; margin-top: -70px; overflow: hidden;}
.pro-chanpin .chanpin-swiper{ margin: 0 -15px;}
.pro-chanpin .swiper-slide{ width: 33.33%; padding: 0 15px;}
.pro-chanpin .swiper-slide img{ width: 100%;}
.pro-chanpin .swiper-slide p{ text-align: center; font-size: 18px; padding-top: 15px;}
.pro-chanpin .chanpin-next,
.pro-chanpin .chanpin-prev{ top: 0; bottom: auto; margin-top: 0;}
.pro-chanpin .chanpin-prev{ left: auto; right: 70px;}

.s-biaodan{ background: #f3f3f3;}
.s-biaodan h2{ font-size: 24px; margin-bottom: 30px;}
.s-biaodan span.icon-product{ font-size: 20px; }
.s-biaodan span.icon-gongsi{ font-size: 22px; }
.s-biaodan-right{ padding-left: 90px;}
.s-biaodan-right p{ position: relative; padding-left: 34px; line-height: 70px; font-size: 16px;}
.s-biaodan-right h2 + p{ margin-top: -10px;}
.s-biaodan-right p i{ position: absolute; top: 0; left: 0; line-height: 70px; font-size: 20px;}

.about-message { padding: 50px 0; }
.about-message h3 {  margin-top: 0; margin-bottom: 27px;color:#000; }




@media screen and (min-width: 768px){
    .container{ width: 100%; padding: 0 0.5rem;}
}
@media screen and (min-width: 992px){
    .container{ width: 100%; padding: 0 1rem;}
}
@media screen and (min-width: 1200px){
    .container{ width: 1170px; padding: 0;}
}
@media screen and (min-width: 1430px){
    .container{ width: 1350px;}
}
@media screen and (min-width: 1600px){
    .container{ width: 1550px;}
}
@media screen and (max-width: 1599px){
    .pro-sub dl + dl{ margin-left: 56px;}

    .s-pro-cont .txt h2{ font-size: 50px;}
    .s-pro-cont .pro-canshu span{ font-size: 20px;}
    .s-pro-cont .txt p{ font-size: 17px; margin: 30px 0 50px;}

    .s-pro-service{ padding: 50px 0 100px;}

    .s-pro-item{ margin-bottom: 90px;}
    .s-tit{ margin-bottom: 45px;}

    .pro-adv .txt{ font-size: 15px; line-height: 1.3;}
    .pro-adv .txt p + p{ margin-top: 10px;}

    .pro-process li p{ height: 2em;}
}
@media screen and (max-width: 1429px){
    .pro-sub dl + dl{ margin-left: 21px;}

    .s-pro-cont .txt h2{ font-size: 40px;}
    .s-pro-cont .pro-canshu span{ font-size: 18px;}
    .s-pro-cont .txt p{ font-size: 16px; margin: 25px 0 45px;}

    .s-pro-service{ padding: 40px 0 90px; }
    .s-pro-service a{ font-size: 16px; padding-left: 20px;}
    .s-pro-service a::before{ width: 14px; height: 14px; margin-top: -7px;}

    .s-pro-item{ margin-bottom: 80px;}
    .s-tit{ margin-bottom: 40px;}

    .pro-adv .txt{ font-size: 14px;}
    .pro-adv .txt p + p{ margin-top: 15px;}

    .pro-process ul{ margin-top: -25px;}
    .pro-process li{ margin-top: 37px;}
    .pro-process li span{ font-size: 24px; top: -12px;}
    .pro-process li p{ font-size: 14px; height: 2em; padding-top: 10px;}

    .case-swiper .case-next{ right: 17.6%;}
    .case-swiper .case-prev{ left: 17.6%;}

    .pro-chanpin .swiper-slide p{ font-size: 16px; padding-top: 10px;}
}
@media screen and (max-width: 1199px){
    .header .li3,.pro-sub,
    .s-pro-service{ display: none;}

    .s-pro-cont{ padding: 0.7rem 0;}
    .s-pro-cont .txt h2{ font-size: 0.3rem;}
    .s-pro-cont .pro-canshu li{ margin-top: 0.15rem;}
    .s-pro-cont .pro-canshu b{ font-size: 12px;}
    .s-pro-cont .pro-canshu span{ font-size: 0.16rem; padding-top: 16px;}
    .s-pro-cont .txt p{ font-size: 0.12rem; margin: 0.15rem 0 0.22rem;}
    .s-pro-cont .pro-btns a{ font-size: 0.14rem;}

    .pro-adv .adv-cont{ display: flex; align-items: center;}
    .pro-adv .img1{ display: none!important; }
    .pro-adv .pic{ width: 5rem;  margin-left: -1rem;}
    .pro-adv .img2{ display: block!important; width: 100%; }
    .pro-adv .txt{ width: 4rem; padding-left: 0.35rem;}
    .pro-adv .txt p + p{ margin-top: 10px;}

    .pro-process .process1{ display: none;}
    .pro-process .process2{ display: block; margin: 0 -0.07rem;}
    .pro-process li{ width: 25%; padding: 0 0.07rem;}

    .case-swiper .case-next,
    .case-swiper .case-prev{ top: 1.8rem;}
    .case-swiper .case-next{ right: 1.67rem;}
    .case-swiper .case-prev{ left: 1.67rem;}

    .pro-chanpin .chanpin-swiper{ margin: 0 -0.08rem;}
    .pro-chanpin .swiper-slide{ padding: 0 0.08rem;}

    .s-biaodan-right{ padding-left: 0.2rem;}
}
@media screen and (max-width: 991px){
    .pro-adv .pic{ margin-left: -0.5rem;}
}
@media screen and (max-width: 767px){
    .container{ padding: 0 0.4rem!important;}
    .swiper-button-next, .swiper-button-prev{ width: 1.2rem; height: 1.2rem; background-size: 0.6rem; border-radius: 0.1rem; }

    .s-pro-cont .s-pro-swiper{ position: relative; width: 100%; margin-bottom: 0.3rem;}
    .s-pro-cont .txt{ width: 100%;}
    .s-pro-cont .txt h2{ font-size: 0.8rem;}
    .s-pro-cont .pro-canshu li{ margin-top: 0.4rem;}
    .s-pro-cont .pro-canshu li::before{ display: none;}
    .s-pro-cont .pro-canshu span{ font-size: 0.48rem; padding-top: 0.4rem;}
    .s-pro-cont .pro-canshu b{ font-size: 0.32rem;}
    .s-pro-cont .txt p{ margin: 0.45rem 0 0.5rem; font-size: 0.45rem; line-height: 1.35; }
    .s-pro-cont .pro-btns{ display: flex; position: static; }
    .s-pro-cont .pro-btns a{ font-size: 0.4rem; width: auto; line-height: 3; padding: 0 1em; margin-top: 0.7rem;}
    .s-pro-cont .pro-btns i{ font-size: 1.5em;}
    .s-pro-cont .pro-btns a + a{ margin-left: 0.5rem;}
    .s-pro-cont .pro-next, .s-pro-cont .pro-prev{ top: 50%; margin-top: -0.6rem; }
    .s-pro-cont .pro-prev{ right: auto; left: 0;}


    .s-tit{ font-size: 0.64rem; padding-top: 0.7em; margin-bottom: 1em;}
    .s-tit::before{ width: 2.4rem; height: 0.11rem; }
    .s-pro-item{ margin-bottom: 1.6rem;}

    .pro-adv .adv-cont{ display: block;}
    .pro-adv .pic{ width: 100%; margin-left: 0;}
    .pro-adv .txt{ width: 100%; padding: 0; font-size: 0.48rem; line-height: 1.35; }
    .pro-adv .txt p{ margin-top: 0.5rem!important;}

    .pro-process .process2{ display: none;}
    .pro-process .process3{ display: block; }
    .pro-process ul{ margin: -0.3rem -0.1rem 0;}
    .pro-process li{ width: 50%; padding: 0 0.1rem; margin-top: 0.55rem;}
    .pro-process li span{ font-size: 0.5rem; top: -0.25rem; left: 0.3rem;}
    .pro-process li p{ font-size: 0.36rem; padding-top: 0.2rem;}

    .case-swiper .case-next,
    .case-swiper .case-prev{ top: 2.6rem;}
    .case-swiper .case-next{ right: 0.9rem;}
    .case-swiper .case-prev{ left: 0.9rem;}
    .case-swiper .swiper-slide p{ font-size: 0.4rem; width: 100%; margin: 0 0 0.2rem; height: 2.4em; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

    .pro-chanpin .cont{ padding: 0 0 0.8rem; margin-top: 0;}
    .pro-chanpin .chanpin-next, .pro-chanpin .chanpin-prev{ display: none;}
    .pro-chanpin .swiper-slide{ width: 50%;}
    .pro-chanpin .swiper-slide p{ font-size: 0.36rem; line-height: 1.3; padding-top: 0.2rem;}
    .pro-chanpin .swiper-pagination{ bottom: 0; text-align: center; width: 100%;}
    .pro-chanpin .swiper-pagination-bullet{ width: 0.26rem; height: 0.26rem; margin: 0 0.1rem; background: rgba(0,0,0,.2); border-radius: 50%;}
    .pro-chanpin .swiper-pagination-bullet-active{ background: #0076e0;}

    .s-biaodan{ padding: 0.8rem 0;}
    .about-message{ padding: 0; margin: 0;}
    .about-message .col-md-7{ padding: 0;}
    .s-biaodan h2{ font-size: 0.6rem; margin-bottom: 1em; font-weight: bold;}
    .s-biaodan-right{ padding: 1rem 0 0;}
    .s-biaodan-right p{ line-height: 0.63rem; font-size: 0.48rem; margin-top: 1.5em!important;}
    .s-biaodan-right p i{ font-size: 1.2em; line-height: 0.63rem; }
}