﻿/*pro*/
.product{background-color: #f8f9fa;padding:20px 0}
.product .container{flex-wrap: wrap;}
.pro-ul{position: relative;width: 100%;margin: 50px auto}
.pro-ul li{width:49%;position: relative;overflow: hidden;margin-bottom: 2%;background-color:var(--color-3);text-align: center;}
.pro-ul li:after{content: '';width: 100%;height: 100%;background-color: rgba(25,113,194,0.5);z-index: 1;position: absolute;left: 0;top:0;}
.pro-ul li:last-child{margin-right: 0;}
.pro-ul li .img{width: 100%;height: 100%;position: absolute;z-index: 1;left: 0;top:0;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: center;}
.pro-ul li .img img{width: 100%;}
.pro-ul li .info{
    width: 100%;
    position: relative;
    z-index: 2;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    height: 500px;
    padding: 180px 30px 0 30px;
}
.pro-ul li .info span{font-size: 8rem;color: #fff;display: block;position: absolute;width: 100%;text-align: center;left: 0;top:50px;}
.pro-ul li .info h4{
    font-size: 50px;font-weight:500;margin-bottom: 30px;color: #fff;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    position: relative;
}
.pro-ul li .info h4:after{content: '';width: 140px;height: 2px;background-color:#fff;position: absolute;left: 50%;margin-left: -70px;bottom: -50px; }
.pro-ul li .info p{font-size: 18px;line-height: 32px;color: #fff;opacity: 0;position: relative;left: -100px;width: 100%;display: block;}
.pro-ul li .info a{display: block;width: 180px;line-height: 50px;;margin: 30px auto;border: 2px solid #fff;text-align: center; color: #fff;font-size: 18px;font-weight: 500;
    position: absolute;left: 50%;margin-left: -75px;bottom: -100px;border-radius: 30px;text-transform: uppercase;}
.pro-ul li:hover:after{background-color: rgba(25,113,194,0.75)}
.pro-ul li .info a:hover{}
.pro-ul li .info a i{font-size: 1.8rem;margin-left: 10px;}
.pro-ul li:hover .img{transform:scale(1.2);-webkit-transform:scale(1.2);}
.pro-ul li:hover .info{padding-top: 120px;}
.pro-ul li:hover .info span{top:-100px;}
.pro-ul li:hover .info h4{padding-top: 0;padding-bottom: 10px;font-size: 40px;}
.pro-ul li:hover .info h4:after{display: none;}
.pro-ul li:hover .info p{opacity: 1;left: 0;}
.pro-ul li:hover .info a{bottom: 30px;}
@media screen and (max-width: 1440px) {
    .pro-ul li .info{height: 325px;padding: 150px 30px 0 30px;}
    .pro-ul li .info span{font-size: 6rem;top:30px;}
    .pro-ul li .info h4{font-size: 30px;margin-bottom: 20px;}
    .pro-ul li .info h4:after{width: 120px;height: 1px;margin-left: -60px;bottom: -40px; }
    .pro-ul li .info a{bottom: -100px;width: 140px;line-height: 40px;margin: 20px auto;margin-left: -70px;}
    .pro-ul li:hover .info{padding-top:70px;}
}
@media screen and (max-width: 991px) {
    .product{background-color: #fff;padding:0}
    .pro{padding:20px 0;}
    .pro-ul{flex-wrap: wrap;margin:20px auto}
    .pro-ul li{width:100%;margin-bottom: 5%;}
    .pro-ul li:after{background-color: rgba(25,113,194,0.8)}
    .pro-ul li:last-child{margin-bottom: 0;}
    .pro-ul li .info{height: auto;padding:30px 20px;}
    .pro-ul li .info h4{margin-bottom:20px;padding: 0;font-size: 2.5rem;font-weight: 550}
    .pro-ul li .info h4:after{display: none;}
    .pro-ul li .info p{font-size:1.4rem;line-height:2.2rem;opacity: 1;left: 0;width: 100%;margin-bottom: 20px}
    .pro-ul li .info a{bottom:unset;width:50%;margin:20px auto!important;font-size:1.6rem;position: unset;left:unset;margin-left:unset;border-radius: 30px;}
    .pro-ul li .info a i{font-size: 1.6rem;margin-left: 10px;}
}

.product .showpro{padding: 50px 0}
.product .pro-sidebar{width: 20%;margin-right:2%}
.product .pro-content{width: 78%;
    background-color: #fff;padding:50px;margin-bottom: 2%;
    box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1440px) {
    .product .pro-sidebar{width: 23%;margin-right:2%}
    .product .pro-content{width: 75%;padding: 20px;}
}
@media screen and (max-width: 991px) {
    .product .showpro{padding:20px 0;flex-wrap: wrap}
    .product .pro-sidebar{width: 100%;margin-right:0;order: 1;margin-bottom:0;position: relative;top:-70px;z-index: 999}
    .product .pro-content{width: 100%;padding:0;margin-bottom: 0;order: 2;position: relative;top:-30px;box-shadow:none;-webkit-box-shadow:none;}
    .mobile .pro-sidebar{order: 2!important;top:unset;margin-bottom: 20px;}
    .mobile .pro-content{order: 1!important;}
}
/*左测分类列表*/
.subNav-title{background-color:var(--color-3);color: #fff;height: 50px;line-height: 50px;padding: 0 20px;font-size: 22px;font-weight: 550;}
.subNav-title i{font-size: 2.5rem;margin-right: 10px;}
.subNavBox{background-color: #fff;padding:20px;
    box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.05);
}
.subNav{
    cursor:pointer;
    font-size:18px;font-weight: 500;
    color:#212529;
    line-height:20px;padding:15px 0;
    position: relative;
}
.subNav:hover{text-decoration: none;}
.subNav i{font-size: 1.8rem;font-weight: 600;position: absolute;right: 0;color: #868e96;transform: rotate(90deg);-webkit-transform:rotate(90deg) }
.subNav.curdt i{transform: rotate(0deg);-webkit-transform:rotate(0deg)}
.curdd{color:var(--color-3);}
.curdt{overflow: hidden;}
.navContent{display: none;padding: 10px;border-top: 1px solid #eee;}
.navContent:last-child{border-bottom: none;}
.navContent li a{display:block;font-size:15px;line-height:22px;font-weight: 400;color:#495057;padding: 5px 0 5px 10px;position: relative;}
.navContent li a:hover,.navContent li a.curdd{color:var(--color-3);text-decoration: none!important;background-color: #e7f5ff;font-weight: 500}
.navContent li a i{font-size: 1rem;margin-right: 10px;}
@media (max-width: 1440px) {
    .subNav{font-size:16px;}
    .navContent li a{font-size:14px;}
}
@media screen and (max-width: 991px) {
    .subNav-title{font-size: 2rem}
    .subNav-title i{font-size: 2.2rem}
    .subNavBox{padding:10px 15px;border: 1px solid #eee;}
    .subNav{font-size:1.8rem;line-height:2rem;padding:15px 0;}
    .navContent li a{font-size:1.8rem;line-height:2.8rem;}
    .navContent li a i{font-size: 1.1rem;}
    .navContent li a:hover,.navContent li a.curdd{font-weight: 550;}
}

/*tab*/
.tab .nav-tabs {margin:20px 0;border:none;width: 100%;}
.tab .nav-tabs li{width:14.28%;}
.tab .nav-tabs li a {
    text-align: center;
    display: block;
    font-size: 14px;
    font-weight:600;
    color: #333;
    background-color: #f0f0f0;
    border-radius: 0;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover,.tab .nav-tabs li.active a {background:var(--color-3);color: #fff;border: none;}
.tab .tab-content {}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
}
.pro{padding-top: 120px!important;}
.pro .loc{width: 100%}
.pro .loc i{font-size: 2rem;}
.pro .loc a{font-size: 14px;line-height: 22px;color: #495057;font-weight: 400;}
.pro .loc a:hover{color:var(--color-3)}
.pro .loc a i{font-size:1.6rem;}
.pro .showpro{padding: 20px 0 50px 0}

.pro-text h2{font-size: 22px;font-weight: 600;color:var(--color-3);margin-bottom: 10px;position: relative;padding:10px 0 10px 15px;border-bottom: 1px solid #eee;}
.pro-text h2:after{content: '';height: 20px;width: 5px;background-color:var(--color-3);position: absolute;left:0;top:50%;margin-top: -10px;}
.pro-text{}
.pro-text table{margin:10px 0;}
.pro-text table td{padding: 5px 10px;font-size: 14px;color: #333;}
.pro-text h4{font-size: 18px;font-weight: 600;color: #666;margin: 20px 0;}
.pro-text p{font-size: 14px;line-height: 25px;}
.pro-text p img{width: 100%;}
.pro-text .pro-ul-text{}
.pro-text .pro-ul-text li{font-size: 16px;color: #666;line-height: 25px;margin-bottom:10px;position: relative;padding: 0 0 0 15px;}
.pro-text .pro-ul-text li:after{content: '';width: 4px;height: 4px;background: #aaa;border-radius: 50%;left: 0;top:10px;position: absolute;}
.pro-list-ul{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.pro-list-ul li{width: 23%;margin-right:2%;margin-bottom:2%;}
.pro-list-ul li:nth-child(4n){margin-right: 0;}
.pro-list-ul li .img{width: 100%;height: 200px;background-size: 100%;background-position: center;overflow: hidden;
    background-repeat: no-repeat;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.pro-list-ul li .info{padding:20px;text-align: center}
.pro-list-ul li .info h6{border-bottom: 1px solid #ddd;padding-bottom: 10px;margin-bottom: 10px;font-size: 18px;font-weight: 400;color:#222;}
.pro-list-ul li .info p{font-size: 14px;font-weight: 400;color: #333;text-align: left;}
.pro-list-ul li .info p i{float: right;font-size: 2rem;font-weight: 500; }
.pro-list-ul li a{display: block;border: 1px solid #eee;}
.pro-list-ul li a:hover{border: 1px solid var(--color-3);}
.pro-list-ul li a:hover .img{background-size: 120% auto;}
.pro-list-ul li a:hover .info p i{color:var(--color-3);}
@media (max-width: 991px) {
    .pro{padding-top:80px!important;}
    .pro .loc{width: 100%;margin-bottom: 10px;}
    .pro .loc i{font-size:1.8rem;}
    .pro .loc a{font-size: 1.4rem;line-height:2.2rem}
    .pro .loc a i{font-size:1.5rem;}
    .pro .showpro{padding: 10px 0 20px 0;overflow-x: auto;}
    .pro-text h2{font-size: 22px;font-weight: 600;color:var(--color-3);margin-bottom: 10px;position: relative;padding:10px 0 10px 15px;border-bottom: 1px solid #eee;}
    .pro-text h2:after{content: '';height: 20px;width: 5px;background-color:var(--color-3);position: absolute;left:0;top:50%;margin-top: -10px;}
    .pro-text table{margin:10px 0;width: 100%;overflow-x: auto;}
    .pro-text table td{padding:2px!important;font-size: 1.2rem;color: #333;}
    .pro-text h4{font-size: 1.6rem;margin:10px 0;}
    .pro-text p{font-size: 1.4rem;line-height: 2.2rem;}
    .pro-text p img{width: 100%;}
    .pro-text .pro-ul-text{}
    .pro-text .pro-ul-text li{font-size: 16px;color: #666;line-height: 25px;margin-bottom:10px;position: relative;padding: 0 0 0 15px;}
    .pro-text .pro-ul-text li:after{content: '';width: 4px;height: 4px;background: #aaa;border-radius: 50%;left: 0;top:10px;position: absolute;}
    .pro-list-ul li{width: 48.5%;background-color: #fff;margin-right: 3%;margin-bottom: 3%}
    .pro-list-ul li:nth-child(2n){margin-right: 0;}
    .pro-list-ul li .img{height:100px;background-size: cover}
    .pro-list-ul li .info{padding:10px;}
    .pro-list-ul li .info h6{font-size: 1.6rem;font-weight: 500}
    .pro-list-ul li .info p{font-size: 1.4rem;}
    .pro-list-ul li .info p i{font-size: 1.8rem; }
}


/*产品介绍*/
.pro-details{padding: 30px;}
.pro-img-info{width: 100%;flex-wrap: wrap;margin-bottom: 50px;}
.pro-img-info .img{padding-right: 50px;width:600px;}
.pro-img-info .info{width: auto}
.pro-img-info .info h1{font-size: 25px;font-weight: 550;color: #212529;margin-bottom:20px;}
.pro-img-info .info .pro-tips{margin-bottom: 20px;position: relative}
.pro-img-info .info .pro-tips .collect{position: absolute;right: 0;top:-10px;}
.pro-img-info .info .pro-tips .collect i{font-size:3rem;}
.pro-img-info .info .pro-tips .collect:hover i,.pro-img-info .info .pro-tips .collect.active i{color:var(--color-3);}
.pro-img-info .info .pro-tips p{font-size: 14px;font-weight: 400;color: #495057}
.pro-img-info .info .pro-tips p i{font-size: 1.8rem;margin-right: 5px;color:var(--color-3)}
.pro-img-info .info .pro-tips b{font-size: 16px;font-weight: 550;color: #495057}
.pro-img-info .info .pro-info{border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;padding:10px 0;margin-bottom: 20px;}
.pro-img-info .info .pro-info p{font-size: 14px;line-height: 22px;font-weight: 400;color: #495057}
.pro-img-info .info .pro-btn{width: 100%;margin-bottom: 20px;}
.pro-img-info .info .pro-btn button{border: none;line-height: 40px;border-radius:4px;background-color:var(--color-3);text-align: center;color:#fff;padding: 0 15px;font-size: 14px;font-weight: 400;}
.pro-img-info .info .pro-btn button.buy{margin-right: 20px;}
.pro-img-info .info .pro-btn button.online{}
.pro-img-info .info .pro-btn button i{font-size:1.8rem;}
.pro-details-tag{width: auto;}
.pro-details-tag i{font-size: 2.2rem;margin-right: 10px;color:var(--color-3)}
.pro-details-tag a{color:var(--color-3);font-size: 14px;line-height: 30px;font-weight: 400;border-radius: 4px;margin-right:5px;width: auto;padding: 0 10px;text-align: center;border:1px solid var(--color-3);}
.pro-details-tag a:hover{background-color:var(--color-3);color: #fff; }
.pro-details-info{width: 100%;}
.pro-details-info .pro-details-title{width: 100%;background-color: #f8f9fa;border: 1px solid #eee;border-left: 5px solid var(--color-3);padding:15px 20px;}
.pro-details-info .pro-details-title h4{font-size: 22px;font-weight: 550;color:var(--color-3)}
.pro-details-info .info{padding:30px 0;margin-bottom: 20px;}
.pro-details-info .info img{width:auto;max-width: 100%;display: block;margin:20px auto;}
.pro-details-info .info p{font-size: 16px;line-height: 26px;color: var(--color-2);font-weight: 400;margin-bottom: 10px;}
.pro-details-info table{width: 100%;margin: 20px auto;}
.pro-details-info table:last-child{margin-bottom: 0;}
.pro-details-info .info p:last-child{margin-bottom: 0;}
.pro-details-info table td{border: 1px solid #ddd;padding: 5px 10px;}
.pro-details-info table .firstRow td{background-color:var(--color-3);font-weight: 500;color: #fff}
@media (max-width: 991px) {
    /*产品介绍*/
    .pro-details{padding:0}
    .pro-img-info{width: 100%;margin-bottom:20px;}
    .pro-img-info .img{padding-right:0;width:100%;margin-bottom: 20px;}
    .pro-img-info .info{width: 100%}
    .pro-img-info .info h1{font-size:2rem;margin-bottom:10px;}
    .pro-img-info .info .pro-tips{margin-bottom:10px;}
    .pro-img-info .info .pro-tips .collect{position: absolute;right: 0;top:-10px;}
    .pro-img-info .info .pro-tips .collect i{font-size:3rem;}
    .pro-img-info .info .pro-tips p{font-size: 1.4rem;}
    .pro-img-info .info .pro-info{margin-bottom:10px;}
    .pro-img-info .info .pro-info p{font-size: 1.4rem;line-height:2.2rem}
    .pro-img-info .info .pro-btn{width: 100%;margin-bottom:10px;}
    .pro-img-info .info .pro-btn button{line-height:45px;font-size:1.4rem;width: 49%;}
    .pro-img-info .info .pro-btn button:last-child{margin-right: 0}
    .pro-img-info .info .pro-btn button.buy{margin-right: 2%;}
    .pro-img-info .info .pro-btn button i{font-size:2rem;}
    .pro-details-tag{width: auto;}
    .pro-details-tag i{font-size: 2.2rem;margin-right: 10px;color:var(--color-3)}
    .pro-details-tag a{color:var(--color-3);font-size: 14px;line-height: 30px;font-weight: 400;border-radius: 4px;margin-right:5px;width: auto;padding: 0 10px;text-align: center;border:1px solid var(--color-3);}
    .pro-details-tag a:hover{background-color:var(--color-3);color: #fff; }
    .pro-details-info{width: 100%;}
    .pro-details-info .pro-details-title{padding:12px 15px;}
    .pro-details-info .pro-details-title h4{font-size: 2rem;}
    .pro-details-info .info{padding:20px 0;margin-bottom: 20px;overflow-x: auto!important;}
    .pro-details-info .info img{margin:10px auto;}
    .pro-details-info .info p{font-size: 1.4rem;line-height: 2.2rem;}
    .pro-details-info table{width: 100%;margin: 10px auto;}
    .pro-details-info table td{padding: 2px 2px;}
}

/*图片轮播*/
.bg_left{width:100%;}
.bg_right{position: relative;z-index: 9999;}
.show{margin-bottom:20px;position: relative;border:1px solid #E8E8E8;cursor:move;border-radius: 0!important;height: 400px;background-size: cover;background-position: center;}
.show img{width: 100%}
.mask{width: 200px;height: 200px;background: #000;filter: Alpha(opacity=50);opacity:0.5;position: absolute;top: 0;left: 0;display: none;}
.bigshow{width:600px;height: 400px;overflow: hidden;margin-left: 10px;display: none;border:1px solid #E8E8E8;}
.bigshow img{width: 860px;height: 860px;margin-right: 10px;}
.smallshow{width: 100%;height: 70px;position: relative}
.smallshow img{width:100%;border:1px solid #e8e8e8;box-sizing: border-box;transition: all 0.5s}
.smallshow>.middle_box{margin-left: 30px;margin-right: 30px;width:370px;overflow: hidden;height: 70px;}
.smallshow .middle{overflow: hidden;transition: all 0.5s;height: 70px;}
.smallshow .middle>li{width: 64px;height: 64px;float: left;cursor:pointer;padding:0 5px;}
.smallshow>p{position: absolute;top:50%;width: 22px;height: 32px;margin-top: -25px;}
.smallshow>.prev{left: 0;;background: url(../images/hover-prev.png) no-repeat ;transition: all 0.5s}
.smallshow>.next{right: 0;;background: url(../images/hover-next.png) no-repeat;transition: all 0.5s}
.smallshow>.prev.prevnone{left: 0;background: url(../images/prev.png) no-repeat;cursor: not-allowed}
.smallshow>.next.nextnone{right: 0;background: url(../images/next.png) no-repeat;cursor: not-allowed}
@media (max-width: 991px) {
    .show{margin-bottom:10px;height: 220px;}
    .show img{width: 100%}
    .mask{display: none!important;}
    .bigshow{display: none!important;}
    .bigshow img{display: none}
    .smallshow{height:60px;}
    .smallshow>.middle_box{margin-left:30px;margin-right:30px;width:calc(100% - 60px);height:60px;}
    .smallshow .middle{height: 60px;}
    .smallshow .middle>li{width: 60px;height: 60px;}
    .smallshow>p{width: 15px;height: 22px;margin-top: -11px;background-size: 100% auto!important;}

}

/*相关产品*/
.pro-related-ul{width: 100%;padding:20px 30px 0 30px}
.pro-related-ul li{margin: 20px 10px 0 10px;}
.pro-related-ul li a{outline: none;display: block;background-color: #ffff;border: 1px solid #eee;padding: 5px;}
.pro-related-ul li .img{width: 100%;background-repeat: no-repeat;background-size: cover;background-position: center;height: 200px;}
.pro-related-ul li .img img{width: 100%;}
.pro-related-ul li .info{padding:0;text-align: center;}
.pro-related-ul li .info h6{font-size: 16px;font-weight: 500;color:#495057;line-height:30px;padding: 5px;}
.pro-related-ul li .info p{font-size:20px;line-height:30px;color:var(--color-3);font-weight:550;}
.pro-related-ul .NextArrow,.pro-related-ul .PrevArrow{
    position: absolute;
    width: 30px;
    height:80px;
    line-height: 80px;
    background: #f1f3f5;border:1px solid #dee2e6;top:50%;margin-top: -40px;
    text-align: center;
    z-index: 999;
    outline: none;
}
.pro-related-ul .NextArrow i,.pro-related-ul .PrevArrow i{font-size:2rem;color:#868e96;}
.pro-related-ul .NextArrow:hover i,.pro-related-ul .PrevArrow:hover i{color:var(--color-3);}
.pro-related-ul .NextArrow{right:-30px;}
.pro-related-ul .PrevArrow{left:-30px;}
@media (max-width: 1440px) {
    .pro-related-ul li .info h4{font-size: 18px;}
    .pro-related-ul li .info p{font-size:14px;}
}
@media (max-width: 991px) {
    .pro-related-ul{width: 100%;padding:20px 0;}
    .pro-related-ul li{padding:0;margin:0 5px;border: none}
    .pro-related-ul li .img{background-size: cover;height: 120px;}
    .pro-related-ul li .info{padding:10px 0;}
    .pro-related-ul li .info h6{font-size: 1.4rem;line-height:1.8rem!important;padding: 0}
    .pro-related-ul li .info p{font-size:1.2rem;line-height:2rem;}
    .pro-related-ul .NextArrow,.pro-related-ul .PrevArrow{width:32px;height:32px;line-height:30px;bottom:-25px;}
    .pro-related-ul .NextArrow i,.pro-related-ul .PrevArrow i{font-size:1.6rem;}
    .pro-related-ul .NextArrow{right:0;}
    .pro-related-ul .PrevArrow{left:0;}
}


.app{}
.app .text{text-align: center;width: 60%;margin: 0 auto;}
.app .text p{font-size: 20px;line-height: 35px;color: var(--color-2);}
.app-ul{padding:50px 0 0 0;position: relative;flex-wrap: wrap;}
.app-ul li{
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    width: 49%;
    margin-right:2%;
    margin-bottom:2%;
    position: relative;min-height: 250px;}
.app-ul li:nth-child(2n){margin-right: 0}
.app-ul li:hover{
    background-color: #fff;
    box-shadow:0 20px 40px rgba(88,100,117,.15);
    -webkit-box-shadow:0 20px 40px rgba(88,100,117,.15);
}
.app-ul li:after{content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);position: absolute;z-index: 1;left: 0;top:0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.app-ul li:hover:after{background-color: var(--color-3);}
.app-ul li .info{text-align: center;z-index: 2;padding:100px 50px 50px 50px;position: absolute;width: 100%;height: 100%;top:0;left: 0;}
.app-ul li .info h4{font-size: 22px;font-weight:500;color: #fff;padding:50px 0 0 0}
.app-ul li .info p{font-size: 14px;line-height: 22px;color: #868e96;margin-bottom: 30px;font-weight:450;height: 50px;position: relative}
.app-ul li .info p:after{content: '';width: 50px;height: 1px;background-color:#ced4da;position: absolute;bottom:-20px;left: 50%;margin-left: -25px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.app-ul li .info i{font-size: 6rem;color: #fff;position: absolute;top:50px;left: 50%;margin-left:-50px;width: 100px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.app-ul li:hover .info h4{letter-spacing:5px;}
.app-ul li:hover .info i{top:30px;}
.app-ul li:hover .info p:after{background-color:var(--color-3);height: 5px;}
.app-ul li img{width:100%;}
@media (max-width: 1680px) {
    .app-ul li .info{padding:90px 40px 40px 40px;}
    .app-ul li .info h4{padding:20px 0 0 0;}
    .app-ul li .info i{font-size: 5rem;top:30px;}
    .app-ul li:hover .info i{top:20px;}
}
@media (max-width: 1440px) {
    .app-ul{padding:30px 0;}
    .app-ul li .info{padding:80px 30px 30px 30px;}
    .app-ul li .info h4{padding:20px 0 0 0;font-size: 18px;}
    .app-ul li .info i{font-size: 4rem;}
}

@media (max-width: 991px) {
    .app-ul{padding:20px 0;}
    .app-ul li{width:100%;margin-right:0;margin-bottom:5%;overflow: hidden;text-align: center;min-height:auto;}
    .app-ul li:last-child{margin-bottom: 0;}
    .app-ul li .info{padding:80px 10px 0 10px;}
    .app-ul li .info h4{padding:20px 0 0 0;font-size:2rem;}
    .app-ul li .info i{font-size:4rem;top:20px;}
    .app-ul li:last-child{display: none}
}

.pro-text .text p{font-size: 16px;line-height: 25px;color: var(--color-2);font-weight: 400;}
.pro-text .table{width: 100%;margin-bottom: 30px;border-top: 2px solid var(--color-3)}
.pro-text .table:last-child{margin-bottom: 0;}
.pro-text .table th{background-color:#f8f9fa;text-align: center;display:table-cell; vertical-align:middle;}
.pro-text .table td{text-align: center;font-size: 14px;color: var(--color-2);display:table-cell; vertical-align:middle;}
.pro-text .table thead{background-color:var(--color-3);}
.pro-text .table thead td{color: #fff;font-size: 16px;font-weight: 500}
@media (max-width: 991px) {
    .pro-text{width: 100%;overflow-x: auto;}
    .pro-text .text p{font-size: 1.4rem;line-height:2.2rem;}
    .pro-text .table{margin-bottom:10px;border-top:1px solid var(--color-3);width:auto!important;}
    .pro-text .table td{font-size: 1.2rem;padding: 2px!important;width: auto}
    .pro-text .table thead td{font-size:1.4rem;padding:2px 5px!important;width: auto}
}