@charset "utf-8";
/***********************************************************
	Filename: about.css
	Note	: 关于我们栏目CSS样式
	Version : szphp v2.0.0
	Author  : 优尚设计 <547829810@qq.com>
	Web		: www.szphp.cn
	Update  : 2020.7.9
***********************************************************/
/*banner*/
.banner{position:relative;width:100%;height:650px;background-position:center;background-size:cover}
.banner .overlay{top:0;left:0;z-index:98;width:100%;height:100%;background-image:linear-gradient(-45deg,hsl(214deg 100% 50% / 20%),hsl(230deg 88% 51% / 50%));transition:all .5s ease 0s}
.banner .overlay1{top:0;left:0;z-index:98;width:100%;height:100%;background-image:url(../images/overly-hero.png);background-position:center;background-size:cover;transition:all .5s ease 0s}
.banner .title{position:absolute;top:55%;left:50%;z-index:99;width:100%;color:#fff;text-align:center;text-shadow:16px 12px 0 #04206f;letter-spacing:1rem;font-size:7rem;transform:translate(-50%,-50%)}
.banner .title p{display:block;margin-bottom:0;text-shadow:none;letter-spacing:0}
.banner canvas{position:absolute;top:0;left:0;z-index:98;display:block;width:100%;height:100%;opacity:.2}
@media screen and (max-width:1024px){
    .banner{height:600px}
}
@media screen and (max-width:768px){
    .banner{height:550px}
    .banner .title{top:50%;font-size:5rem}
    .banner .title p{font-size:1.8rem}
}
@media screen and (max-width:576px){
    .banner{height:320px}
    .banner .title{top:60%;width:80%;text-shadow:8px 6px 0 #04206f;letter-spacing:0;font-size:3rem}
    .banner .title p{margin-bottom:.5rem;letter-spacing:0;font-size:1rem}
    .banner .title>div{margin-bottom:1rem}
}

/* 分类 */
.category{position:relative;padding-top:15px;padding-bottom:15px;border-bottom:1px solid rgba(0,0,0,.05);background:#fff;text-align:center}
.category a{display:inline-block;margin-right:5px;padding:0 1.5rem;height:40px;border:1px solid rgba(0,0,0,.07);border-radius:2px;color:#333;text-align:center;line-height:40px}
.category .current,.category a:hover{background:#2f5fee;color:#fff}
.category .fa{margin-right:5px}
@media screen and (max-width:576px){
    .category{padding-bottom:0}
    .category a{float:left;box-sizing:border-box;margin-bottom:10px;width:calc(50% - 5px)}
    .category a:nth-child(even){margin-right:0;margin-left:5px}
}

/*about_us*/
.about_us{position:relative;overflow:hidden;padding-top:100px;padding-bottom:100px;background:#fff}
.about_us h2{margin-bottom:1rem}
.about_us .canvas1{position:absolute;top:15px;right:-25px;display:block;width:700px;height:700px;border-radius:50%;background:linear-gradient(273deg,hsl(0deg 0 90%) -73%,hsl(0deg 0 100%) 91%);box-shadow:0 12px 54px 0 rgba(215,218,221,.31),inset -30px -19px 33px 0 hsla(0,0%,100%,.1)}
.about_us .canvas2{position:absolute;top:150px;right:50px;width:400px;height:400px;border-radius:50%;background:linear-gradient(273deg,hsl(0deg 0 90%) -73%,hsl(0deg 0 100%) 91%);box-shadow:0 12px 24px 0 rgba(215,218,221,.31),inset -30px -19px 33px 0 #fff}
.about_us .note{margin-bottom:2rem;padding-right:50px;padding-bottom:2rem;border-bottom:2px solid #eaeaea;line-height:1.8}
@media screen and (max-width:768px){
    .about_us .note{padding-right:0}
}
@media screen and (max-width:576px){
    .about_us{padding-top:50px;padding-bottom:50px}
    .about_us .note{padding-right:0}
    .about_us .canvas1{top:auto;bottom:0;width:400px;height:400px}
    .about_us .canvas2{top:auto;bottom:0;width:200px;height:200px}
}
.about_us .about-feature{position:relative;margin-top:35px;padding-right:50px}
.about_us .about-feature p{color:#555}
.about_us .pic-list{width:100%}
.about_us .pic-list ul{margin:0;padding:0;list-style:none}
.about_us .pic-list ul li{float:left;margin-right:15px;margin-bottom:20px;padding-bottom:25px;width:calc(50% - 15px);border-bottom:2px solid rgba(2,62,235,.7);border-top-right-radius:5px;border-top-left-radius:5px;background:#f6f8fb;box-shadow:0 5px 5px rgba(0,0,0,.05)}
.about_us .pic-list ul li:nth-child(even){margin-right:0;margin-left:15px}
.about_us .pic-list ul li:nth-child(2){margin-top:80px}
.about_us .pic-list ul li:nth-child(3){margin-top:-80px}
.about_us .pic-list ul li img{width:100%;border-top-right-radius:5px;border-top-left-radius:5px}
.about_us .pic-list ul li strong{display:block;padding:15px 15px 5px;color:rgba(2,62,235,.9)}
.about_us .pic-list ul li p{margin-bottom:0;padding:0 15px;color:#666}
.about_us .pic-list ul li:hover{border-bottom:2px solid #023eeb}
@media screen and (max-width:768px){
    .about_us .about-feature{padding-right:0}
}
@media screen and (max-width:576px){
    .about_us .note{margin-bottom:.5rem;padding-bottom:.5rem}
    .about_us .about-feature{margin-top:25px}
    .about_us .pic-list{margin-top:2rem}
    .about_us .pic-list ul li{margin-right:7.5px;width:calc(50% - 7.5px)}
    .about_us .pic-list ul li:nth-child(even){margin-left:7.5px}
    .about_us .pic-list ul li:nth-child(2){margin-top:0}
    .about_us .pic-list ul li:nth-child(3){margin-top:0}
    .about_us .pic-list ul li strong{padding:15px 10px 5px}
    .about_us .pic-list ul li p{padding:0 10px;font-size:12px}
}

/*data*/
.data{position:relative;padding-top:100px;padding-bottom:100px;background-position:center center;background-size:cover;background-attachment:fixed}
.data .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(2,15,59,.6)}
.data h2,.data h3{margin-bottom:1rem;color:#fff;text-align:center}
.data .counter_list{margin-top:2rem;padding:0}
.data .counter_list ul{margin:0;padding:0;list-style:none}
.data .counter_list li{padding:0 15px;text-align:center}
.data .counter_list li .counter_list_box{border-radius:5px;background:rgba(255,255,255,.95)}
.data .counter_list span{display:block}
.data .counter_list .counter{color:#023eeb;font-size:4.5rem}
.data .counter_list .percentage:after,.data .counter_list .plus:after,.data .counter_list .year:after{margin-left:.5rem;color:#222;font-size:1.5rem}
.data .counter_list .percentage:after{content:'%'}
.data .counter_list .plus:after{content:'+'}
.data .counter_list .year:after{content:'年'}
.data .counter_list .note{padding-bottom:2rem}
@media screen and (max-width:576px){
    .data{padding-top:50px;padding-bottom:50px;background-position:right center;background-size:cover;background-attachment:inherit}
    .data .counter_list ul{margin:0 10px}
    .data .counter_list li{margin-bottom:10px;padding:0 5px}
    .data .counter_list li .counter_list_box{padding-top:15px}
    .data .counter_list .counter{font-weight:600;font-size:2.2rem}
    .data .counter_list .percentage:after,.data .counter_list .plus:after,.data .counter_list .year:after{margin-left:.25rem;font-size:1rem}
    .data .counter_list .note{padding-right:5px;padding-left:5px;font-size:.75rem}
}

/*about-center*/
.about-center{position:relative;margin-top:0;margin-bottom:0;color:#fff}
.about-center .left,.about-center .right{position:relative;padding-top:25px;padding-bottom:25px;background-size:cover}
.about-center .right{text-align:right}
.about-center .overlay{position:absolute;top:0;left:0;z-index:98;width:100%;height:100%;background:rgba(2,23,84,.75);transition:all .5s ease 0s}
.about-center .row{position:relative;z-index:99}
.about-center .line{display:inline-block;margin-right:10px;margin-bottom:.4rem;width:60px;height:3px;background:#fff}
.about-center .right .line{margin-right:0;margin-left:10px}
.about-center p{margin-top:1rem}
@media screen and (max-width:576px){
    .about-center .left,.about-center .right{padding-top:25px;padding-bottom:5px}
    .about-center p{font-size:13px}
}

/*team*/
#team{position:relative;padding-top:100px;padding-bottom:100px;background:#fff}
#team h2,#team h3{margin-bottom:1rem;text-align:center}
.team{overflow:hidden;padding-top:25px;width:100%;height:100%}
.team .swiper-slide{position:relative;overflow:hidden;padding-bottom:.5rem;border-radius:5px;background:#fff;box-shadow:0 5px 10px rgba(0,0,0,.08);text-align:center;cursor:pointer;transition:all .3s ease 0s}
.team .swiper-slide:before{position:absolute;top:0;left:50%;visibility:visible;width:100%;height:100%;max-width:300px;max-height:300px;border-radius:50%;background:rgba(2,62,235,.1);content:'';transition:all ease .4s;transform:translate(-80%,-65%)}
.team .swiper-slide span{display:block}
.team .swiper-slide .iconbox{position:relative;z-index:3;margin:20px auto;width:80px;height:80px;border-radius:50%;background-color:#2f5fee;color:#fff;line-height:80px;transition:all ease .4s}
.team .swiper-slide .iconbox i{margin-top:1rem;font-size:3rem}
.team .swiper-slide .text{padding:0 20px;text-align:center}
.team .swiper-slide .title{margin-bottom:1rem;transition:all .3s ease 0s}
.team .swiper-slide p{margin-bottom:1rem;color:rgba(51,51,51,.8);line-height:1.4;transition:all .3s ease 0s}
.team .swiper-slide:hover:before{width:150%;height:150%;background:rgba(255,51,102,.1);transform:translate(-70%,-60%)}
.team .swiper-slide:hover{box-shadow:0 5px 10px rgba(0,0,0,.1)}
.team .swiper-slide:hover .iconbox{background:#f36}
.team .swiper-slide:hover .title{color:#023eeb}
.team .swiper-slide:hover p{color:#333}
/*分页*/
.team .swiper-pagination-team{display:none;margin-top:1.5rem;text-align:center}
.team .swiper-pagination-bullet-active{background:rgba(2,62,235,1)}
/*左右切换*/
.team .more{padding:40px 0 0;text-align:center}
.team .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-size:1.2rem;line-height:50px;transition:all .3s ease 0s}
.team .swiper-button-next-team,.team .swiper-button-prev-team{display:inline-block;width:50px;height:40px;border-radius:5px;background:#f2f5fe;color:#023eeb;text-align:center;font-size:1.1rem;line-height:40px;cursor:pointer;transition:all .3s ease 0s}
.team .swiper-button-disabled{color:rgba(51,51,51,.2)}
.team .more a:hover,.team .swiper-button-next-team:hover,.team .swiper-button-prev-team:hover{background:rgba(2,62,235,.9);box-shadow:0 0 15px 1px rgba(0,0,0,.1);color:#fff}
@media screen and (max-width:576px){
    #team{padding-top:50px;padding-bottom:50px}
    .team .swiper-slide-prev .number{right:15px;text-align:right}
    .team .swiper-pagination-team{display:block}
    .team .more{display:none}
    .team .swiper-slide:hover .iconbox{background:#023eeb}
    .team .swiper-slide-active .iconbox{background:#f36}
}