@charset "utf-8";
/***********************************************************
	Filename: szphp.css
	Note	: 首页CSS样式
	Version : szphp v2.0.0
	Author  : 优尚设计 <www.szphp.cn>
	Web		: www.szphp.cn
	Update  : 2021.07.10
***********************************************************/

/* banner******************************************************************************/
#banner,.swiper-container{position:relative;width:100%;height:700px;transition:all .5s ease 0s}
#banner .swiper-slide{background-position:50%;background-size:cover}
#banner .swiper-button-next,#banner .swiper-button-prev{top:50%;z-index:100;background:url(none);opacity:.6;transition:all .3s ease 0s}
#banner .swiper-button-next{right:25px}
#banner .swiper-button-prev{left:25px}
#banner:hover .swiper-button-next,#banner:hover .swiper-button-prev{opacity:1}
#banner .next,#banner .prev{width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.8);color:#fff;text-align:center;font-size:1.3rem;line-height:50px}
.swiper-button-next:after,.swiper-button-prev:after{font-size:inherit}
#banner .next:after{content:"\f178";font-family:FontAwesome}
#banner .prev:after{content:"\f177";font-family:FontAwesome}
#banner .next:hover,#banner .prev:hover{background:#2669c2;color:#fff}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:25px}
#banner .swiper-pagination-bullet{width:15px;height:8px;border-radius:10px;background:#fff;vertical-align:middle;opacity:1;transition:all .5s ease 0s}
#banner .swiper-pagination-bullet-active{width:35px;background:#2669c2}
#banner .swiper-slide .title{position:absolute;top:0;left:0;z-index:100;height:100%;color:#fff;text-shadow:none}
#banner .swiper-slide .title .row{height:100%}
#banner .swiper-slide .title .content{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column}
#banner .swiper-slide .title h2{width:100%;text-align:center;font-size:4rem}
#banner .swiper-slide .title p{display:block;margin:1.5rem auto;width:70%;color:#fff;text-align:center;font-size:1.8rem;line-height:1.5}
#banner .swiper-slide .title .more{display:block;margin:0 auto;width:180px;height:45px;background:#fff;color:#222;text-align:center;font-size:1rem;line-height:45px;transition:all .3s ease 0s;border-radius: 3px;}
#banner .swiper-slide .title .more .fa{margin-left:5px;color:#222;font-size:.95rem;transition:all .5s ease 0s}
#banner .swiper-slide .title .more:hover{background:#2669c2;color:#fff}
#banner .swiper-slide .title .more:hover .fa{margin-left:10px;color:#fff}
#banner .overlay{position:absolute;top:0;left:0;z-index:99;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(5,51,133,.7) 0,rgba(2,22,49,.5) 30%)}
@media screen and (max-width:1024px){
    #banner,.swiper-container{height:600px}
    #banner .swiper-slide .title h2{font-size:3rem}
    #banner .swiper-slide .title p{font-size:1.5rem}
}
@media screen and (max-width:960px){
    #banner,.swiper-container{height:550px}
    #banner .next,#banner .prev{display:none}
}
@media screen and (max-width:768px){
    #banner,.swiper-container{height:500px}
    #banner .swiper-slide .title p{width:90%}

}
@media screen and (max-width:576px){
    #banner,.swiper-container{height:350px}
    #banner .swiper-slide .title h2{font-size:1.5rem}
    #banner .swiper-slide .title p{margin:1rem auto;width:95%;font-size:1rem}
    #banner .swiper-slide .title .more{width:140px;font-size:.8rem}
}

/* index 综合样式******************************************************************************/
.index{padding-top:60px;padding-bottom:30px;width:100%}
.index h2,.index h3{text-align:center;font-weight:normal}
.index h2{margin-bottom:1rem}
.index h3{color:#333}
.index h2:after,.index h2:before{display:inline-block;margin:5px 25px;width:80px;height:6px;content:""}
.index h2:after{background:linear-gradient(90deg,#ccc,hsla(0,0%,80%,0))}
.index h2:before{background:linear-gradient(270deg,#ccc,hsla(0,0%,80%,0))}
@media screen and (max-width:768px){
    .index{padding-top:50px;padding-bottom:25px}
}
@media screen and (max-width:576px){
    .index h2:after,.index h2:before{margin:5px 15px;width:60px;}
}

/* index-product 产品中心 ******************************************************************************/
.index-product{width:100%}
.index-product ul{margin:50px -15px 25px;padding:0;list-style:none}
.index-product li{position:relative;display:flex;margin-bottom:30px}
.index-product li a{display:table-cell;border:1px solid rgba(0,0,0,.1);border-radius:3px;background:#fff;padding:1px}
.index-product li a:hover{box-shadow:0 4px 5px 2px rgba(0,0,0,.05)}
.index-product span{display:block}
.index-product .logo{position: absolute;top:15px;left:30px;width:38%}
.index-product .logo img{width: 100%;}
.index-product .poto{width:100%}
.index-product .poto img{width:100%}
.index-product .title{margin:10px auto;width:85%;font-weight:600}
.index-product p{margin-right:auto;margin-bottom:1rem;margin-left:auto;width:85%;color:rgba(51,51,51,.8)}
@media screen and (max-width:576px){
    .index-product ul{margin:25px -5px 25px}
    .index-product li{margin-bottom:10px;padding-right:5px;padding-left:5px}
    .index-product .logo{left:15px;width:35%}
}

/* index-solution 解决方案 ******************************************************************************/
.index-solution{width:100%;padding-bottom:60px;background:#fafafa}
#solution{position:relative;overflow:hidden;padding-top:50px;width:100%}
#solution .swiper-slide{position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:3px;background:#fff;cursor:pointer;transition:all .3s ease 0s}
#solution .swiper-slide .poto{width:100%}
#solution .swiper-slide .poto img{width:100%;transition:all .3s ease 0s}
#solution .swiper-slide span{display:block}
#solution .swiper-slide .note{padding:15px}
#solution .swiper-slide .title{margin-bottom:.5rem;text-align:center;font-weight:600;line-height:35px;transition:all .3s ease 0s}
#solution .swiper-slide p{display:-webkit-box;overflow:hidden;margin-bottom:.5rem;height:65px;color:rgba(51,51,51,.8);text-overflow:ellipsis;line-height:1.5;transition:all .3s ease 0s;-webkit-line-clamp:3;-webkit-box-orient:vertical}
#solution .swiper-slide .more{display:block;margin:0 auto;border-radius: 3px;width:100px;height:30px;background:#2669c2;color:#fff;text-align:center;font-size:.85rem;line-height:30px;transition:all .3s ease 0s}
#solution .swiper-slide .more .fa{margin-left:5px;color:#fff;font-size:.75rem;transition:all .5s ease 0s}
#solution .swiper-slide .more:hover{background:#2669c2;color:#fff}
#solution .swiper-slide .more:hover .fa{margin-left:10px;color:#fff}
#solution .swiper-slide:hover{box-shadow:0 4px 5px 2px rgba(0,0,0,.05)}
#solution .swiper-slide:hover .poto img{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05)}
#solution .swiper-slide:hover p{color:#333}
/*分页*/
#solution .swiper-pagination-solution{margin-top:2rem;text-align:center}
#solution .swiper-pagination-bullet{width:15px;height:8px;border-radius:10px;background:#999;vertical-align:middle;opacity:1;transition:all .5s ease 0s}
#solution .swiper-pagination-bullet-active{width:35px;background:#2669c2}
/*左右切换*/
#solution .swiper-button-next-solution,#solution .swiper-button-prev-solution{position:absolute;top:calc(50% - 50px);z-index:100;background:rgba(0,0,0,.1);cursor:pointer;transition:all .3s ease 0s}
#solution .swiper-button-next-solution{right:-50px}
#solution .swiper-button-prev-solution{left:-50px}
#solution:hover .swiper-button-next-solution,#solution:hover .swiper-button-prev-solution{background:rgba(0,0,0,.3)}
#solution:hover .swiper-button-next-solution{right:15px}
#solution:hover .swiper-button-prev-solution{left:15px}
#solution .next,#solution .prev{width:50px;height:50px;border-radius:50%;color:#fff;text-align:center;font-size:1.3rem;line-height:50px}
#solution .next:after,#solution .prev:after{font-size:inherit}
#solution .next:after{content:"\f178";font-family:FontAwesome}
#solution .prev:after{content:"\f177";font-family:FontAwesome}
#solution .next:hover,#solution .prev:hover{background:#2669c2;color:#fff}
@media screen and (max-width:576px){
    #solution{padding-top:25px}
    #solution .swiper-slide{transform:scale(.8)}
    #solution .swiper-slide-active,#solution .swiper-slide-duplicate-active{transform:scale(1)}
    #solution .swiper-slide p{height:60px}
    #solution .next,#solution .prev{display:none}
    .mobile{padding-right:0;padding-left:0}
}

/* index-service 我们的服务 ******************************************************************************/
.index-service{position:relative;width:100%;background-position:50%;background-size:cover}
.index-service .mask{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:rgba(3,59,134,.96)}
.index-service h2,.index-service h3{position:relative;z-index:11;color:#fff}
.index-service h2:after{background:linear-gradient(90deg,#fff,hsla(0,0%,80%,0))}
.index-service h2:before{background:linear-gradient(270deg,#fff,hsla(0,0%,80%,0))}
.index-service .content{position:relative;z-index:11;overflow:hidden;margin:50px 0;padding:0;color:#fff;list-style:none}
.index-service .list{float:left;padding:0 15px;width:25%;text-align:center}
.index-service .icon{margin:0 auto;width:120px;height:120px;border:4px solid rgba(255,255,255,.9);border-radius:50%;background:#05316b;text-align:center;line-height:140px;transition:all .3s ease 0s}
.index-service .icon .fa{color:#fff;font-size:3.5rem;transition:all .3s ease 0s}
.index-service .note{margin-top:1rem;padding:0 1.5rem}
.index-service .note span{display:block}
.index-service .title{margin-bottom:.5rem;font-weight:700}
.index-service p{margin-bottom:0;line-height:1.5}
.index-service .list:hover .icon{background:#fff}
.index-service .list:hover .fa{color:#2669c2}
@media screen and (max-width:576px){
    .index-service .content{margin:25px 0}
    .index-service .list{margin-bottom:25px;padding:0;width:50%}
    .index-service .icon{width:90px;height:90px;border:3px solid rgba(255,255,255,.9);line-height:110px}
    .index-service .icon .fa{font-size:3rem}
    .index-service .note{margin-top:.5rem;padding:0 1rem}
}

/* index-about 关于我们 ******************************************************************************/
.index-about{padding-top:80px;padding-bottom:80px;width:100%}
.index-about img{width:100%;border-radius:3px;}
.index-about .text{padding-left:50px}
.index-about h2{text-align:left}
.index-about h2:after,.index-about h2:before{margin:0;width:0;height:0}
.index-about .more{display:block;margin-top:2rem;border-radius: 3px;width:150px;height:45px;background:#2669c2;color:#fff;text-align:center;font-size:.85rem;line-height:45px;transition:all .3s ease 0s}
.index-about .more .fa{margin-left:5px;color:#fff;font-size:.75rem;transition:all .5s ease 0s}
.index-about .more:hover{background:#2669c2;color:#fff}
.index-about .more:hover .fa{margin-left:10px;color:#fff}
@media screen and (max-width:768px){
    .index-about{padding-top:50px;padding-bottom:50px}
    .index-about .text{padding-left:15px;text-align:center}
    .index-about h2{margin-top:2rem;text-align:center}
    .index-about .more{margin:2rem auto 0}
}

/* index-news 新闻动态 ******************************************************************************/
.index-news{width:100%;background:#fafafa}
.index-news-content{margin-top:50px}
/* 切换标题 */
.index-news .swiper-wrapper{overflow:hidden}
.index-news .swiper-slide{height:0}
.index-news .swiper-slide-active{height:auto}
.index-news .index-news-title{margin:0 auto;width:100%;text-align:center}
.index-news .index-news-title .swiper-wrapper{display:block;text-align:center}
.index-news .index-news-title .title{margin:0 .5rem;display:inline-block;padding:0 25px;width:auto;height:40px;font-weight:600;line-height:37px;cursor:pointer;transition:all .3s ease 0s;border:2px solid #ccc;background: #fff;border-radius:3px;}
.index-news .index-news-title .swiper-slide-thumb-active{border:2px solid #2669c2;color:#fff;background: #2669c2;}
/* 切换内容 */
.index-news .index-news-list{margin:0 -15px}
.index-news .index-news-list .swiper-slide{padding:50px 0;background:#fafafa}
.index-news .index-news-list ul{overflow:hidden;margin:0;padding:0}
.index-news .index-news-list ul li{float:left;margin:15px;padding-bottom:15px;width:calc(50% - 30px);min-height:150px;border-bottom:1px solid #eee;list-style:none}
.index-news .index-news-list ul li .poto{float:left;margin-right:3%;width:30%}
.index-news .index-news-list ul li .poto img{width:100%;border-radius:3px;}
.index-news .index-news-list ul li .content{float:left;width:67%}
.index-news .index-news-list ul li .content span{display:block}
.index-news .index-news-list ul li .content .title{margin-bottom:.5rem;line-height:1.5}
.index-news .index-news-list ul li .content .note{display:-webkit-box;overflow:hidden;margin-bottom:.5rem;height:45px;color:rgba(51,51,51,.7);text-overflow:ellipsis;line-height:1.5;transition:all .3s ease 0s;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.index-news .index-news-list ul li .content .time{color:rgba(51,51,51,.3)}
.index-news .index-news-list .more{display:block;margin:1rem auto 0;width:150px;height:45px;border-radius:3px;background:#2669c2;color:#fff;text-align:center;font-size:.85rem;line-height:45px;transition:all .3s ease 0s}
.index-news .index-news-list .more .fa{margin-left:5px;color:#fff;font-size:.75rem;transition:all .5s ease 0s}
.index-news .index-news-list .more:hover{background:#2669c2;color:#fff}
.index-news .index-news-list .more:hover .fa{margin-left:10px;color:#fff}
/* 分页器 */
.index-news .swiper-pagination-index-news-list{display:none}
@media screen and (max-width:768px){
    .index-news .index-news-list ul li{min-height:170px}
}
@media screen and (max-width:576px){
    .index-news-content{margin-top:25px}
    .index-news .index-news-title{overflow-x:scroll;overflow-y:hidden;box-sizing:border-box;margin:0 -15px;width:calc(100% + 30px);text-align:justify;white-space:nowrap;}
    .index-news .index-news-title .title{margin:0 .1rem}
    .index-news .index-news-list .swiper-slide{padding:25px 0;background:#fafafa}
    .index-news .index-news-list ul li{float:none;overflow:hidden;margin:15px;padding-bottom:15px;width:calc(100% - 30px);min-height:auto}
    .index-news .index-news-list ul li .poto{float:left;margin-right:3%;width:25%}
    .index-news .index-news-list ul li .content{float:left;width:72%}
    .index-news .index-news-list ul li .content .note{height:40px;display: none;}
}

/* index-certificate 代理证书 ******************************************************************************/
.index-certificate{padding-bottom:60px;width:100%}
#certificate{position:relative;overflow:hidden;padding-top:50px;width:100%}
#certificate .swiper-slide{position:relative;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(128,128,128,.2);cursor:pointer;transition:all .3s ease 0s;transform:scale(.8)}
#certificate .swiper-slide img{width:100%;border-radius:3px;border:10px solid #fff;transition:all .3s ease 0s}
#certificate .swiper-slide-active,#certificate .swiper-slide-duplicate-active{transform:scale(1)}
/*分页*/
#certificate .swiper-pagination-certificate{margin-top:2rem;text-align:center}
#certificate .swiper-pagination-bullet{width:15px;height:8px;border-radius:10px;background:#999;vertical-align:middle;opacity:1;transition:all .5s ease 0s}
#certificate .swiper-pagination-bullet-active{width:35px;background:#2669c2}
/*左右切换*/
#certificate .swiper-button-next-certificate,#certificate .swiper-button-prev-certificate{position:absolute;top:calc(50% - 50px);z-index:100;background:rgba(0,0,0,.1);cursor:pointer;transition:all .3s ease 0s}
#certificate .swiper-button-next-certificate{right:-50px}
#certificate .swiper-button-prev-certificate{left:-50px}
#certificate:hover .swiper-button-next-certificate,#certificate:hover .swiper-button-prev-certificate{background:rgba(0,0,0,.3)}
#certificate:hover .swiper-button-next-certificate{right:15px}
#certificate:hover .swiper-button-prev-certificate{left:15px}
#certificate .next,#certificate .prev{width:50px;height:50px;border-radius:50%;color:#fff;text-align:center;font-size:1.3rem;line-height:50px}
#certificate .next:after,#certificate .prev:after{font-size:inherit}
#certificate .next:after{content:"\f178";font-family:FontAwesome}
#certificate .prev:after{content:"\f177";font-family:FontAwesome}
#certificate .next:hover,#certificate .prev:hover{background:#2669c2;color:#fff}
@media screen and (max-width:576px){
    #certificate{padding-top:25px}
    #certificate .next,#certificate .prev{display:none}
}

/* index-brand 合作品牌 ******************************************************************************/
/* .index-brand{width: 100%;}
.index-brand ul{position:relative;margin:50px -10px;padding:0;list-style:none}
.index-brand ul li{float:left;margin:0 10px 20px;padding:5px 20px;width:calc(20% - 20px);height:auto;background:#fff;border:1px solid rgba(0,0,0,.1);transition:all .3s ease 0s}
.index-brand ul li img{width:100%;height:auto}
.index-brand ul li:hover{box-shadow:0 4px 16px 3px hsla(0,0%,50%,.2)}
@media screen and (max-width:768px){
    .index-brand ul li{width:calc(25% - 20px)}
}
@media screen and (max-width:576px){
    .index-brand ul{margin-top: 20px;margin-bottom: 80px;}
    .index-brand ul li{width:calc(50% - 20px);margin-bottom: 10px;}
} */