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

/* banner 20230621新修改 */
#banner,.swiper-container{position:relative;width:100%;height:600px;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:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.8);color:#fff;text-align:center;font-size:1rem;line-height:40px}.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:#b6dfe3;color:#222}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:15px}#banner .swiper-pagination-bullet{width:15px;height:6px;border-radius:10px;background:#fff;vertical-align:middle;opacity:1;transition:all .5s ease 0s}#banner .swiper-pagination-bullet-active{width:25px;background:#b6dfe3}#banner .swiper-slide a{display:block;width:100%;height:100%}@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:300px}#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}}
/* 以上为swiper版本的Banner，20230825更换成全屏视频版，但CSS仍然压缩保留 */

/* 视频版banner */
.video-banner{position:relative;display:flex;margin:0 auto;width:100%;height:100vh;max-width:2560px;max-height:1440px;background-position:center;background-size:cover;background-repeat:no-repeat;transition:all .5s ease 0s;justify-content:center;align-items:center;overflow: hidden;}
.video-banner .videoElement{position:absolute;z-index:1;width:100%;height:auto;max-height:1440px;object-fit:fill}
.video-banner .overlay{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-color:rgba(0,0,0,.2)}
.video-banner .title{position:relative;z-index:3}
.video-banner .bottom{position:absolute;bottom:25px;z-index:100;height:100px;color:#fff}
.video-banner .bottom .mouse{position:relative;display:block;margin:0 auto;width:50px;height:100px;text-align:center;animation:slideDown 2.5s infinite}
.video-banner .bottom .mouse button{border:0;background:0 0}
@media screen and (min-width:1920px){
    .video-banner .videoElement{width:100%;height:auto}
}
@media screen and (max-width:768px){
    .video-banner{display:none}
}
/* 手机版banner */
.mobile-banner{position:relative;display:none;overflow:hidden;width:100%;height:100vh;max-height:1080px;transition:all .5s ease 0s;justify-content:center;align-items:center}
/* .mobile-banner .mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;opacity:1;animation:rotate linear infinite 50s} */
.mobile-banner .mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-position:left;background-repeat:no-repeat;background-size:cover;opacity:1}
.mobile-banner .overlay{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-color:rgba(0,0,0,.75)}
.mobile-banner .title{position:relative;z-index:3}
.mobile-banner .title img{margin-left:2%;width:96%}
.mobile-banner .bottom{position:absolute;bottom:25px;z-index:100;height:100px;color:#fff}
.mobile-banner .bottom .mouse{position:relative;display:block;margin:0 auto;width:50px;height:100px;text-align:center;animation:slideDown 2.5s infinite}
.mobile-banner .bottom .mouse button{border:0;background:0 0}
@media screen and (max-width:768px){
    .mobile-banner{display:flex}
}
/* css效果 */
@keyframes slideDown{0%{top:0;opacity:1}75%{opacity:.85}100%{top:40px;opacity:0}}
@keyframes rotate{0%{transform:translate3d(0,0,0) scale(2)}20%{transform:translate3d(30%,-30%,0) scale(3)}35%{transform:translate3d(90%,-45%,0) scale(3.5)}50%{transform:translate3d(150%,-100%,0) scale(4)}65%{transform:translate3d(90%,45%,0) scale(3.5)}80%{transform:translate3d(30%,30%,0) scale(3)}100%{transform:translate3d(0,0,0) scale(2)}}
@keyframes slide{0%{bottom:25px}10%{bottom:24px}20%{bottom:23px}30%{bottom:22px}40%{bottom:21px}50%{bottom:20px}60%{bottom:21px}70%{bottom:22px}80%{bottom:23px}90%{bottom:24px}100%{bottom:25px}}


/*index ******************************************************************************/
.index{padding-top:80px;padding-bottom:80px;width:100%}
.index .index-title{text-align: center;}
.index h2{margin-bottom:0;text-align:center;font-weight:500;display: inline-block;}
.index h3{color:#323232;text-align:center;font-weight:normal;font-size: 17px;}
@media screen and (max-width:576px){
    .index{padding-top:50px;padding-bottom:50px}
    .index h2{margin-bottom: .5rem;}
    .index h2 span{display: block;}
    .index h3{line-height:1.4;font-size: 13px;}
}

/*首页推荐案例*/
.index_case{width:100%}
.index_case ul{margin:50px -15px 15px;padding:0}
.index_case li{overflow:hidden;margin-bottom:50px;padding-right:15px;padding-left:15px;list-style:none}
.index_case .poto{position:relative;overflow:hidden}
.index_case .poto img{width:100%;height:auto;transition:all .5s ease 0s}
.index_case .poto .play{position:absolute;top:50%;left:50%;z-index:11;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);transform:translate(-50%,-50%)}
.index_case .poto .play .iconfont{position:absolute;top:50%;left:55%;color:#333;font-size:15px;transition:all .5s ease 0s;transform:translate(-50%,-50%)}
.index_case .poto .play:after,.index_case .poto .play:before{position:absolute;top:50%;left:50%;z-index:10;border:0 solid rgba(255,255,255,0);border-radius:50%;content:"";transition:all .5s cubic-bezier(.215,.61,.355,1) 0s;transform:translate(-50%,-50%)}
.index_case .poto .play:before{width:25px;height:25px}
.index_case .poto .play:after{width:15px;height:15px}
.index_case .title{display:block;margin-top:1rem;color:#333;font-weight:700}
.index_case .note{display:block;margin-top:.5rem;color:#999;line-height:1.8}
.index_case a:hover img{transform:scale(1.08,1.08)}
.index_case a:hover .poto .play{width:60px;height:60px;background:rgba(255,255,255,.2)}
.index_case a:hover .poto .play .iconfont{z-index:15;color:#fff}
.index_case a:hover .poto .play:before{width:50px;height:50px;background:rgba(23,146,217,.2)}
.index_case a:hover .poto .play:after{width:40px;height:40px;background:rgba(95,84,160,.4)}
.index_case .more{display:block;margin:0 auto;width:150px;border:1px solid #666;background-color:#fff;color:#333;text-align:center;line-height:40px;transition:all .3s ease 0s}
.index_case .more:hover{width:180px;border:1px solid #333;background:#fafafa;color:#222}
@media screen and (max-width:576px){
    .index_case .title{font-size:1.25rem}
    .index_case .note{line-height:1.6;font-size: 12px;}
    .index_case .note,.index_case .title{text-align:left}
}
/*我们积累了各行业丰富的案例和经验 20230627修改版本*/
.index_case{width:100%;background:#fff}
.index_case ul{margin-right:0;margin-left:0}
.index_case li{margin-bottom:30px;padding-right:0;padding-left:0;background-color:#f1f1f1}
.index_case li .text{display:flex;padding:0 60px 0 30px;align-items:center;justify-content:left}
.index_case li .text2{padding-left:60px;padding-right: 30px;}
.index_case .title{margin-top:0;color:#000;font-weight:400;line-height:1.2}
.index_case .note{margin-top:1.5rem;color:#333;line-height:1.6}
@media screen and (min-width:1024px){
    .index_case .poto .play{width:80px;height:80px}
    .index_case .poto .play .iconfont{font-size:25px}
    .index_case .poto .play:before{width:45px;height:45px}
    .index_case .poto .play:after{width:35px;height:35px}
    .index_case a:hover .poto .play{width:90px;height:90px}
    .index_case a:hover .poto .play:before{width:80px;height:80px}
    .index_case a:hover .poto .play:after{width:70px;height:70px}
}
@media screen and (max-width:576px){
    .index_case li .text{justify-content:center;padding:0 30px 0 30px;}
    .index_case li .text2{padding-left:30px}
    .index_case .title{margin-top:15px;margin-bottom:15px}
    .index_case .note{margin-top:.5rem}
}

/*首页客户列表*/
.client{width:100%;background:#fff}
.client .tips{margin-top:30px;color:#8C8C8C;text-align:center}
.client .tips svg{margin-top:-3px;margin-right:3px;display: none;}
/* 20210518修改全部显示 */
.client .list{overflow:hidden;margin-top:50px;padding-bottom:80px;width:100%;height:100%}
.client .list ul{margin:0;padding:0;list-style:none}
.client .list li{position:relative;float:left;overflow:hidden;margin:5px;width:calc(20% - 10px);list-style:none}
.client .list li img{height:auto;max-width:100%;transition:all .5s ease 0s}
.client .list li span{position:absolute;top:0;left:0;padding:0 35px;display:flex;width:100%;height:100%;background:linear-gradient(180deg,rgba(95,84,160,.85) 0,rgba(23,145,216,.85) 100%);color:rgba(255,255,255,0);align-items: center;text-align: center;justify-content: center;font-weight:normal;font-size:.9rem;line-height:1.2;opacity:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}
.client .list li a:hover img{transform:scale(1.1,1.1)}
.client .list li a:hover span{color:#fff;opacity:1}
@media screen and (max-width:1024px){
    .client .list li{width:calc(25% - 10px)}
}
@media screen and (max-width:768px){
    .client .list li{width:calc(33.3333333333333333% - 10px)}
}
@media screen and (max-width:576px){
    .client .list{margin-top:25px;padding-bottom:40px}
    .client .list li{width:calc(50% - 10px)}
}