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

/*BANNER*/
#banner,.swiper-container{position:relative;max-width:1920px;height:600px;transition:all .5s ease 0s}
#banner .swiper-slide{background-position:center;background-size:cover}
#banner .swiper-button-next{right:25px}
#banner .swiper-button-prev{left:25px}
#banner .swiper-button-next,#banner .swiper-button-prev{top:45%;background:url(none);opacity:.3;transition:opacity .5s ease 0s;z-index:100}
#banner .swiper-button-next:hover,#banner .swiper-button-prev:hover{opacity:1}
#banner .next,#banner .prev{width:58px;height:58px;background:url(../images/navigation.png) no-repeat}
#banner .next{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}
#banner .prev:hover{background:url(../images/navigation.png) 58px 0;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}
#banner .next:hover{background:url(../images/navigation.png) 58px 0;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-ms-transform:rotate(0)}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:25px}
#banner .swiper-pagination-bullet{width:10px;height:10px;border-radius:50%;background:#fff;vertical-align:middle;opacity:1;transition:background .5s ease 0s}
#banner .swiper-pagination-bullet-active{width:10px;height:10px;border:3px solid #0086c9;border-radius:100%;background:rgba(255,255,255,0)}
#banner a{position:absolute;top:0;z-index:100;width:100%;height:100%;color:#fff;font-size:3.5rem;font-weight:normal;display:block}
@media screen and (max-width:1024px){
	#banner,.swiper-container{height:500px}
	}
@media screen and (max-width:960px){
	#banner,.swiper-container{height:450px}
	#banner .next,#banner .prev{display: none}
	}
@media screen and (max-width:768px){
	#banner,.swiper-container{height:400px}
	}
@media screen and (max-width:576px){
    #banner,.swiper-container{height:200px}
    .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px}
}

/*indexcata*/
.indexcata{margin-bottom:1rem;padding-bottom:1rem;text-align:center;font-weight:700}
.indexcata h2{color:#0086c9;font-size:2rem;line-height:4rem}
.indexcata p{margin-bottom:.5rem;color:#666;text-transform:capitalize;font-size:.95rem;line-height:1rem}
.indexcata .line{display:block;margin:0 auto;width:80px;height:2px;background:#0086c9}
@media screen and (max-width:576px){
    .indexcata h2{font-size:1.5rem;line-height:3rem}
    .indexcata p{font-size:.8rem}
}

/*product*/
.product{padding-top:50px;padding-bottom:50px}
.product .category{margin-top:1rem;margin-bottom:3rem;text-align:center}
.product .category a{border-radius:4px;display:inline-block;padding:0 1.5rem;height:45px;border-right:2px solid #fff;border-left:2px solid #fff;background:#eee;color:#333;text-align:center;font-weight:700;font-size:.95rem;line-height:45px}
.product .category .current,.product .category a:hover{background:#0086c9;color:#fff}
.product ul{padding:0}
.product li{margin-bottom:30px;list-style:none}
.product li img{width:100%;border-radius:6px 6px 0 0}
.product li .title{display:block;padding:1rem;border-radius:0 0 6px 6px;background:#0086c9;color:#fff;text-align:center;font-size:.95rem;line-height:1rem;transition:all .3s ease 0s}
.product li:hover .title{background:#006699}
@media screen and (max-width:768px){
    .product .category a{padding:0 1rem;margin-bottom:1rem}
}
@media screen and (max-width:576px){
    .product .category{margin-top:0;margin-bottom:1rem;text-align:left}
    .product .category a{margin-bottom:.5rem;padding:0 .8rem;height:35px;font-weight:normal;font-size:.8rem;line-height:35px}
    .product ul{margin-right:-5px;margin-left:-5px}
    .product li{padding-right:5px;padding-left:5px}
    .product li .title{padding:.5rem;min-height: 50px;}
}

/*superiority*/
.superiority{padding-top:50px;padding-bottom:50px}
.superiority ul{padding:0}
.superiority li{margin-bottom:2rem;list-style:none;text-align:center}
.superiority li span{display:block}
.superiority li .icon{position:relative;margin:0 auto;width:140px;height:140px;border-radius:50%;background:#eee;line-height:170px;transition:all .3s ease 0s}
.superiority li .icon .fa{font-size: 3.5rem;color:#0086c9;}
.superiority li .icon img{position:absolute;top:50%;left:50%;width:60%;opacity:1;transform:translate(-50%,-50%)}
.superiority li .title{font-weight:700;font-size:1.2rem;line-height:4rem;transition:all .5s ease 0s}
.superiority li p{color:#999;font-size:.95rem}
.superiority li:hover .icon{background:#fff}
@media screen and (max-width:576px){
    .superiority li .icon{width:120px;height:120px;line-height:150px}
    .superiority li .icon .fa{font-size: 3rem}
    .superiority li .title{font-size:1rem;line-height:3rem}
    .superiority li p{font-size:.8rem}
}

/*about*/
.about{padding-top:100px;padding-bottom:100px;background:rgba(0,153,68,.05)}
.about img{width:100%;border-radius:8px}
.about h2{color:#0086c9;font-size:1.5rem}
.about em{color:#999;font-style:normal;font-size:1rem}
.about p{font-size:.95rem;margin-bottom: .5rem;}
.about a{display:block;padding:0 15px;width:120px;height:40px;border-radius:2px;background:#0086c9;color:#fff;text-align:center;font-size:.95rem;line-height:40px;transition:all .5s ease 0s}
.about a:hover{background:#006699}
@media screen and (max-width:768px){
    .about h2{margin-top:2rem}
}
@media screen and (max-width:576px){
    .about{padding-top:30px;padding-bottom:50px}
    .about h2{text-align:center}
    .about a{margin:0 auto}
}
/* 首页关于我们左边切换图 20230215增加 */
.swiper-container-propoto{position:relative;overflow:hidden;width:100%;height:100%;transition:all .5s ease 0s}
.swiper-container-propoto .swiper-slide{background-color:rgba(51,51,51,.05);background-position:center;background-size:cover;background-repeat:no-repeat;height:100%;border-radius: 5px;}
.swiper-container-propoto .swiper-button-next{right:2%}
.swiper-container-propoto .swiper-button-prev{left:2%}
.swiper-container-propoto .swiper-button-next,.swiper-container-propoto .swiper-button-prev{background:url(none);opacity:1;transition:opacity .8s ease 0s}
.swiper-container-propoto .swiper-button-next:hover,.swiper-container-propoto .swiper-button-prev:hover{opacity:.9}
.swiper-container-propoto .next,.swiper-container-propoto .prev{width:58px;height:58px;background:url(../images/navigation.png) no-repeat}
.swiper-container-propoto .next{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}
.swiper-container-propoto .prev:hover{background:url(../images/navigation.png) 58px 0;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);-ms-transform:rotate(180deg)}
.swiper-container-propoto .next:hover{background:url(../images/navigation.png) 58px 0;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-ms-transform:rotate(0)}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px}
.swiper-container-propoto .swiper-pagination-bullet{width:10px;height:10px;border-radius:50%;background:#fff;vertical-align:middle;opacity:1}
.swiper-container-propoto .swiper-pagination-bullet-active{width:8px;height:8px;border:3px solid rgba(0,153,68,1);border-radius:100%;background:rgba(0,153,68,1)}

/*news*/
.news{padding-top:50px;padding-bottom:50px}
/*center*/
.news .left{margin:0;padding:0 0 25px 0;height:auto;border-radius:5px;background:#fafafa;transition:all .3s ease 0s;style:none}
.news .left:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.07)}
.news .left img{border-radius:5px 5px 0 0}
.news .left p{margin-bottom:1rem;padding-right:25px;padding-left:25px}
.news .left .title{margin-top:1.5rem;color:#333;font-weight:700;font-size:.95rem;transition:all .3s ease 0s}
.news .left .note{display:-webkit-box;overflow:hidden;height:60px;color:#888;text-overflow:ellipsis;font-size:.95rem;line-height:1.3rem;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.news .left .attach{margin-top:1.5rem;margin-right:25px;margin-left:25px;padding-top:1.5rem;border-top:1px solid #eaeaea}
.news .left .attach span{display:inline-block;width:50%;line-height:1.5rem}
.news .left .attach .time{color:rgba(0,0,0,.6);font-size:.85rem}
.news .left:hover .title{color:#222}
.news .left:hover .attach .more{color:#f36}
.news .left:hover .attach .more .fa{margin-left:10px}
/*right*/
.news .right{margin:0;padding:0;list-style:none;transition:all .3s ease 0s}
.news .right li{position:relative;margin-bottom:15px;padding:15px 25px 15px 120px;border-radius:5px;background:#fafafa;transition:all .3s ease 0s}
.news .right li:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.07)}
.news .right p{margin-bottom:.5rem}
.news .right .title{color:#333;font-weight:700;font-size:.95rem;transition:all .3s ease 0s}
.news .right .note{display:-webkit-box;overflow:hidden;height:40px;color:#888;text-overflow:ellipsis;font-size:.95rem;line-height:1.3rem;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news .right .time{position:absolute;top:10px;left:20px;width:80px;height:80px;border-radius:5px;background:rgba(51,51,51,.1);transition:all .3s ease 0s}
.news .right .time span{display:block;text-align:center;letter-spacing:0}
.news .right .time .day{margin-top:.5rem;color:rgba(0,0,0,.6);font-weight:700;font-size:2rem}
.news .right .time .year{color:rgba(0,0,0,.6);font-weight:normal;font-size:.8rem}
.news .right li:hover .title{color:#0086c9}
.news .right li:hover .time{background:rgba(0,134,201,.2)}
@media screen and (max-width:768px){
    .news .left{margin-bottom:15px;padding-bottom:2rem;height:auto}
    .news .left .title{font-size:.9rem}
    .news .left .note{font-size:.8rem}
    }
@media screen and (max-width:576px){
    .news .left p{padding-right:15px;padding-left:15px}
    .news .left .attach{margin-right:15px;margin-left:15px}
    .news .right li{padding:15px 15px 15px 80px}
    .news .right .title{font-size:.9rem}
    .news .right .note{font-size:.8rem}
    .news .right .time{top:20px;left:10px;width:60px;height:60px}
    .news .right .time .day{margin-top:0;font-size:1.5rem}
    .news .right .time .year{font-size:.75rem}
    }

/*case*/
.indexcase{padding-top:50px;padding-bottom:50px;background:rgba(0,153,68,.05)}
.case{overflow:hidden;width:100%;height:100%;padding-bottom: 25px;}
.case .swiper-slide{text-align:center;cursor:pointer}
.case .swiper-slide img{width:100%;border:6px solid hsl(0, 0%, 100%);box-shadow:0 2px 10px rgba(128,128,128,.2)}
.case .swiper-slide .title{display:block;padding:1rem 0 1rem .5rem;width:100%;text-align:center;font-size:.95rem;line-height:1rem;transition:all .3s ease 0s}
.case .more{padding:0 0 40px 0;text-align:center}
.case .more a{display:inline-block;margin:0 10px;width:100px;height:50px;border-radius:5px;background:#fff;color:rgba(51,51,51,.8);text-align:center;font-weight:normal;font-size:1.2rem;line-height:50px;transition:all .3s ease 0s}
.case .swiper-button-next-case,.case .swiper-button-prev-case{display:inline-block;width:60px;height:50px;border-radius:5px;background:rgba(0,134,201,.2);color:#0086c9;text-align:center;font-weight:normal;font-size:1.2rem;line-height:50px;cursor:pointer;transition:all .3s ease 0s}
.case .swiper-button-disabled{color:rgba(51,51,51,.2)}
.case .more a:hover,.case .swiper-button-next-case:hover,.case .swiper-button-prev-case:hover{background:#0086c9;box-shadow:0 0 15px 1px rgba(0,0,0,.1);color:#fff}
@media screen and (max-width:576px){
    .case .swiper-slide .title{padding:.5rem;font-size:.8rem;min-height:40px}
}

/* index-video 视频展示 ******************************************************************************/
.index-video{background:#fafafa;padding-top:50px;padding-bottom:50px}
/* 栏目标题 */
.index-video .index-video-head{margin:0}
.index-video .index-video-head h2{text-align:center}
.index-video .index-video-head h2 span{width:100%;text-align:center}
.index-video .index-video-head h2::after{margin-right:auto;margin-left:auto}
.index-video .index-video-head h3{text-align:center;line-height:1.4}
/* 栏目内容 */
.index-video-content{margin-top:25px}
.index-video-content ul{margin:0 -15px;padding:0;list-style:none}
.index-video-content li{position:relative;list-style:none}
.index-video-content li .list{position:relative;width:100%;height:100%;transition:all .3s ease 0s}
.index-video-content li .list video{border-radius:10px;object-fit:cover}
.index-video-content li .list .switch{position:absolute;top:50%;left:50%;z-index:999;width:90%;border:0;background:0 0;text-align:center;transition:all .3s ease 0s;transform:translate(-50%,-50%)}
.index-video-content li .list .switch span{display:block}
.index-video-content li .list .switch .title{color:#fff;line-height:1.2}
.index-video-content li .list .switch .icon{color:#fff;font-size:80px;transition:all .5s ease 0s}
.index-video-content li .list .switch:hover .icon{color:#f7ef08}
.index-video-content li .list .play .icon-play_icon:before{content:"\f144";font-weight:900;font-family:Font Awesome\ 5 Free}
.index-video-content li .list .pause .icon-play_icon:before{content:"\f28b";font-weight:900;font-family:Font Awesome\ 5 Free}
.index-video-content li .list .pause{opacity:0}
.index-video-content li .list:hover .pause{opacity:1}
.index-video-content video::-webkit-media-controls-play-button{display:none}
.index-video-content .more_button{margin:50px auto 0}
.index-video-content .more_button:hover{background-color:#333;color:#fff}
@media screen and (max-width:768px){
    .index-video-content li{margin-bottom:25px}
}
@media screen and (max-width:576px){
    .index-video{padding-top:50px;padding-bottom:50px}
    .index-video-content .more_button{margin:25px auto 0}
}