@charset "utf-8";
/***********************************************************
	Filename: website.css
	Note	: 网站制作栏目CSS样式
	Version : szphp v2.0.0
	Author  : 优尚设计 <547829810@qq.com>
	Web		: www.szphp.cn
	Update  : 2020.7.9
***********************************************************/
/*banner*/
.banner{position:relative;overflow:hidden;width:100%;height:750px;background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
.banner .overlay{top:0;left:0;z-index:98;width:100%;height:100%;background-image:linear-gradient(-45deg,hsl(245deg 94% 33% / 40%),hsl(245deg 92% 36% / 80%));transition:all .5s ease 0s}
.banner .title{position:absolute;top:35%;left:50%;z-index:99;width:100%;color:#fff;text-align:center;line-height:6rem;transform:translate(-50%,-50%)}
.banner .title p{display:block;color:#fff;text-transform:uppercase;line-height:2rem}
.banner .title .more{display:block;margin:1rem auto 0;width:150px;height:45px;border-radius:25px;background:#023eeb;color:#fff;text-align:center;line-height:45px;transition:all .3s ease 0s}
.banner .title .more{background:#f36}
.banner .title .more:hover{background:#023eeb}
.banner .title .more .fa{margin-left:-15px;color:rgba(255,255,255,0);font-weight:normal;font-size:.8rem;transition:all .5s ease 0s}
.banner .title .more:hover .fa{margin-left:5px;color:#fff}
.banner .iphone,.banner .macbook{position:absolute;bottom:-25px;left:50%}
.banner .iphone{bottom:-75px}
.banner .macbook{margin-left:-310px}
.banner .iphone{margin-left:200px}
@media screen and (max-width:1280px){
    .banner{height:700px}
}
@media screen and (max-width:1024px){
    .banner{height:650px}
    .banner .iphone img,.banner .macbook img{width:80%}
    .banner .macbook{margin-left:-250px}
    .banner .iphone{margin-left:150px}
}
@media screen and (max-width:768px){
    .banner{height:550px}
    .banner .title{top:45%;margin-bottom:1rem;width:90%}
    .banner .title p{line-height:3rem}
    .banner .iphone,.banner .macbook{width:50%}
    .banner .macbook img{width:100%}
    .banner .iphone img{width:40%}
    .banner .macbook{margin-left:-190px}
    .banner .iphone{margin-left:120px}
}
@media screen and (max-width:576px){
    .banner{height:350px;background-attachment:scroll}
    .banner .title{top:45%;line-height:2.5rem}
    .banner .title .font-xxl{font-size:1.8rem}
    .banner .title p{display:none}
    .banner .iphone,.banner .macbook{bottom:-20px;width:70%}
    .banner .macbook{margin-left:-130px}
    .banner .iphone{margin-left:70px}
    .banner .title .more{display:none}
}

/*website*/
.website{overflow:hidden;padding-top:100px;padding-bottom:100px}
.website:nth-child(even){background:#f6f8fb}
.website .design{position:relative}
.website .design img{border-radius:5px;box-shadow:1px 1px 20px 6px rgb(221 221 221 / .5)}
.website .design .img1{position:relative;bottom:0;z-index:2;width:50%}
.website .design .img2{position:absolute;bottom:0;left:30%;z-index:1;width:45%}
.website .order-md-2{text-align:right}
.website .order-md-2 .img1{position:absolute;right:30%;z-index:2;width:45%}
.website .order-md-2 .img2{position:relative;right:0;left:0;z-index:1}
.website .content{display:flex;justify-content:center;align-items:center}
.website .content .text{width:100%}
.website h2{margin-bottom:1rem}
.website h3{margin-bottom:1rem;color:#666}
.website h3 span{float:left;display:block;margin:15px 10px 0 0;width:8%;height:2px;background:#999}
.website .more{position:relative;display:block;width:150px;border-radius:2px;background:linear-gradient(90deg,#1b47ce,#023eeb);color:#fff;text-align:center;line-height:45px;transition:all .3s ease 0s}
.website .more .fa{margin-left:5px}
.website .more .link{position:relative;z-index:10;display:block}
.website .more:hover{background:linear-gradient(90deg,#2d5ef3,#023eeb)}
@media screen and (max-width:768px){
    .website .design .img1{width:70%}
    .website .design .img2{width:60%}
    .website .order-md-2 .img1{width:60%}
    .website .order-md-2 .img2{position:absolute;right:15px;bottom:0;left:auto;width:55%}
}
@media screen and (max-width:576px){
    .website{padding-top:50px;padding-bottom:50px}
    .website .design{margin-bottom:25px}
    .website .design .img1{position:relative;left:0;z-index:2;width:60%}
    .website .design .img2{position:absolute;right:15px;left:auto;z-index:1;width:50%}
    .website .order-md-2 .img1{position:relative;left:0;z-index:2;float:left;width:60%}
    .website .order-md-2 .img2{position:absolute;right:15px;left:auto;z-index:1;width:50%}
    .website .content .text{position:relative}
    .website .content .text::after{position:absolute;top:0;left:0;width:6px;height:95px;background:linear-gradient(45deg,#2d5ef3,#023eeb);content:""}
    .website h2,.website h3{padding-left:20px}
    .website h2{margin-bottom:10px}
    .website h3{font-weight:normal;font-size:1.4rem}
    .website h3 span{display:none}
}

/*process*/
#process{position:relative;padding-top:100px;padding-bottom:100px;background:#fff}
#process h2{margin-bottom:1rem;text-align:center}
#process h3{margin-bottom:2rem;color:#666;text-align:center}
.process{overflow:hidden;padding-top:25px;width:100%;height:100%}
.process .swiper-slide{position:relative;padding-bottom:1rem;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,.08);text-align:center;cursor:pointer;transition:all .3s ease 0s}
.process .swiper-slide span{display:block}
.process .swiper-slide .iconbox{position:relative;padding-top:25px;border-top-right-radius:5px;border-top-left-radius:5px;background:#0e54d8;transition:all .3s ease 0s}
.process .swiper-slide .iconbox::after{position:absolute;bottom:0;display:block;width:100%;height:60px;background:url(../svg/website-process-bg.svg) repeat;content:''}
.process .swiper-slide .number{position:absolute;top:0;left:15px;z-index:1;color:hsla(0,0%,100%,.2);font-weight:700;font-style:italic;transition:all .3s ease 0s}
.process .swiper-slide .icon{margin:0 auto 1rem;width:100px;height:140px;color:#fff;text-align:center;line-height:50px;transition:all .3s ease 0s}
.process .swiper-slide .icon i{display:block;font-size:2.5rem}
.process .swiper-slide .text{margin-top:-20px;padding-left:25px;text-align:left}
.process .swiper-slide .title{line-height:35px;transition:all .3s ease 0s}
.process .swiper-slide p{margin-bottom:1rem;color:rgba(51,51,51,.8);line-height:1.4rem;transition:all .3s ease 0s}
@media (any-hover: hover) {
    .process .swiper-slide:hover{box-shadow:0 5px 10px rgba(0,0,0,.1)}
    .process .swiper-slide:hover .iconbox{background:#023eeb}
    .process .swiper-slide:hover .title{color:#023eeb}
    .process .swiper-slide:hover .number{left:25px;color:hsla(0,0%,100%,.9)}
    .process .swiper-slide:hover .icon{line-height:60px}
    .process .swiper-slide:hover p{color:#333}
}
/*分页*/
.process .swiper-pagination-process{display:none;margin-top:1.5rem;text-align:center}
.process .swiper-pagination-bullet-active{background:rgba(2,62,235,1)}
/*左右切换*/
.process .more{padding:40px 0 15px;text-align:center}
.process .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}
.process .swiper-button-next-process,.process .swiper-button-prev-process{display:inline-block;width:60px;height:50px;border-radius:5px;background:#f2f5fe;color:#333;text-align:center;font-weight:normal;font-size:1.2rem;line-height:50px;cursor:pointer;transition:all .3s ease 0s}
.process .swiper-button-disabled{color:rgba(51,51,51,.2)}
.process .more a:hover,.process .swiper-button-next-process:hover,.process .swiper-button-prev-process:hover{box-shadow:0 0 5px 1px rgba(0,0,0,.1);color:#023eeb}
@media screen and (max-width:576px){
    #process{padding-top:50px;padding-bottom:50px}
    #process h3{margin-top:.5rem;margin-bottom:1rem;font-weight:normal}
    .process .swiper-slide-prev .number{right:15px;text-align:right}
    .process .swiper-pagination-process{display:block}
    .process .more{display:none}
    .process .swiper-slide:hover .iconbox{background:#2043ac}
    .process .swiper-slide-active .iconbox{background:#023eeb}
}

/*price*/
#price{position:relative;padding-top:100px;padding-bottom:100px;background:#f6f8fb url(../images/newline.png) no-repeat bottom}
#price h2{margin-bottom:1rem;text-align:center}
#price h3{margin-bottom:2rem;color:#666;text-align:center}
#price .illustrate{margin-bottom:1rem;color:#666;text-align:center}
#price .illustrate span{margin-right:2rem}
#price .illustrate span i{margin-right:3px}
#price .illustrate span .fa-check-circle{color:#fa1d19}
#price .illustrate span .fa-times-circle{color:#999}
#price .illustrate span .fa-exclamation-circle{color:#023eeb}
.price{overflow:hidden;width:100%;height:100%}
.price .swiper-wrapper{margin-bottom:15px;box-shadow:0 5px 10px rgba(0,0,0,.05)}
.price .swiper-slide{box-sizing:border-box;padding:25px 25px 35px;border-right:rgba(0,0,0,.08) solid 1px;background:#fff;cursor:pointer}
.price .swiper-slide:first-child{border-bottom-left-radius:5px;border-top-left-radius:5px}
.price .swiper-slide:last-child{border-right:0;border-top-right-radius:5px;border-bottom-right-radius:5px}
.price .active{background:url(../images/card-active-bg.jpg) no-repeat top;background-size:cover}
.price .swiper-slide .title{margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}
.price .swiper-slide .title strong{display:block}
.price .swiper-slide .title p{margin:.5rem 0 0 0;color:rgba(0,0,0,.7);line-height:1.3rem}
.price .swiper-slide .title span{display:inline-block;padding:0 .5rem;width:auto;height:30px;border-radius:2px;background:linear-gradient(90deg,#3866f0,#023eeb);color:#fff;line-height:30px}
.price .swiper-slide .title .fa{margin-right:5px}
.price .swiper-slide .detailed{overflow:hidden}
.price .swiper-slide .norm{overflow:hidden;margin-bottom:1rem}
.price .swiper-slide .norm strong{display:block;margin-bottom:5px;font-size:100%}
.price .swiper-slide .norm strong span{margin-left:.5rem;color:#fa1d19;font-size:90%}
.price .swiper-slide .norm p{float:left;margin:0;width:50%;font-size:13px;line-height:1.5rem}
.price .swiper-slide .norm .yes{color:#000}
.price .swiper-slide .norm .yes::before{margin-right:5px;color:#fa1d19;content:'\f058';font-family:FontAwesome}
.price .swiper-slide .norm .no{color:#999}
.price .swiper-slide .norm .no::before{margin-right:5px;color:#999;content:'\f057';font-family:FontAwesome}
.price .swiper-slide .norm .optional{color:#023eeb}
.price .swiper-slide .norm .optional::before{margin-right:5px;color:#023eeb;content:'\f06a';font-family:FontAwesome}
.price .swiper-slide .site-price{position:relative;margin:0 -25px -35px;padding:10px 25px;border-top:1px solid rgba(0,0,0,.08);color:#888;font-weight:700;transition:all .5s ease 0s}
.price .swiper-slide:first-child .site-price{border-bottom-left-radius:5px}
.price .swiper-slide:last-child .site-price{border-bottom-right-radius:5px}
.price .swiper-slide .site-price span{margin:0 2px}
.price .swiper-slide .site-price em{color:#fa1d19;font-style:normal;transition:all .3s ease 0s}
.price .active .site-price,.price .swiper-slide:hover .site-price{background:linear-gradient(90deg,#023eeb,#285af0);color:#fff}
.price .active .site-price em,.price .swiper-slide:hover .site-price em{color:#fff}
/*分页*/
.price .swiper-pagination-price{display:none;margin-top:1rem;text-align:center}
.price .swiper-pagination-price-active{background:rgba(2,62,235,1)}
/*左右切换*/
.price .more{padding:20px 0 15px;text-align:center}
.price .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}
.price .swiper-button-next-price,.price .swiper-button-prev-price{display:inline-block;width:60px;height:50px;border-radius:5px;background:#fff;color:#333;text-align:center;font-weight:normal;font-size:1.2rem;line-height:50px;cursor:pointer;transition:all .3s ease 0s}
.price .swiper-button-disabled{color:rgba(51,51,51,.2)}
.price .more a:hover,.price .swiper-button-next-price:hover,.price .swiper-button-prev-price:hover{box-shadow:0 0 5px 1px rgba(0,0,0,.1);color:#023eeb}
@media screen and (max-width:1280px){
    .price .swiper-slide .title span{margin-left:0}
}
@media screen and (max-width:1024px){
    .price .swiper-wrapper{box-shadow:0 5px 10px transparent}
    .price .swiper-slide{border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,.08)}
    .price .swiper-pagination-price{display:block}
    .price .active .site-price,.price .swiper-slide:hover .site-price{border-bottom-right-radius:5px;border-bottom-left-radius:5px}
}
@media screen and (max-width:768px){
    #price{padding-top:50px;padding-bottom:50px}
    .price .swiper-slide-next,.price .swiper-slide-prev{background:#fff url(none)}
    .price .swiper-slide-active .site-price,.price .swiper-slide:hover .site-price{border-bottom-right-radius:5px;border-bottom-left-radius:5px;background:linear-gradient(90deg,#023eeb,#285af0);color:#fff}
    .price .swiper-slide .site-price span{font-size:2rem}
    .price .swiper-slide-active .site-price em{color:#fff}
}
@media screen and (max-width:576px){
    #price .illustrate span{margin-right:1rem}
    .price .swiper-slide{padding:25px 15px}
    .price .swiper-slide .site-price{margin:0 -15px -25px;padding:0 0 0 15px}
    .price .swiper-slide-active{background:url(../images/card-active-bg.jpg) no-repeat top;background-size:cover}
    .price .swiper-slide .norm .yes::before,.price .swiper-slide .norm .no::before,.price .swiper-slide .norm .optional::before{margin-right: 2px;}
    .price .swiper-slide .norm:first-child p{float:none;width:100%}
    .price .more{display:none}
}

/*superiority*/
#superiority{position:relative;padding-top:100px;padding-bottom:100px;background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
#superiority .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.7) 10%,rgba(0,0,0,.5) 50%);transition:all .5s ease 0s}
#superiority h2{margin-bottom:2rem;color:#fff;text-align:center}
/*标题*/
.superiority-category{position:relative;width:100%}
.superiority-category .swiper-wrapper{display:block;margin-bottom:1.5rem;text-align:center}
.superiority-category .swiper-slide{display:inline-block;padding:0 1.5rem;width:auto;height:45px;border-radius:2px;background-color:#fff;color:#333;text-align:center;line-height:43px;cursor:pointer}
.superiority-category .swiper-slide-thumb-active{background:#2f5fee;color:#fff}
/*内容*/
.superiority{overflow:hidden;width:100%;height:100%}
.superiority .swiper-slide{overflow:hidden;box-sizing:border-box;padding:10px 15px 0}
.superiority .swiper-slide .text{margin-bottom:15px;padding:25px;min-height:140px;border-radius:3px;background:rgba(21,70,216,.8);color:#fff;transition:all .3s ease 0s}
.superiority .swiper-slide .text:hover{background:rgba(21,70,216,.95)}
.superiority .swiper-slide .text h4::before{margin-right:5px;color:#fff;content:'\f058';font-family:FontAwesome}
.superiority .swiper-slide .text p{margin-bottom:0;color:#fff;line-height:1.4rem}
@media screen and (max-width:768px){
    .superiority .swiper-slide .text{min-height:auto}
}
@media screen and (max-width:576px){
    #superiority{padding-top:50px;padding-bottom:50px;background-attachment:scroll;}
    .superiority-category .swiper-slide{padding:0 .5rem}
    .superiority .swiper-slide{padding:10px 0 0}
    .superiority .swiper-slide .text{padding:15px}
}

/*website_case*/
.website_case{position:relative;padding-top:100px;padding-bottom:100px;background:#f6f8fb}
.website_case h2{margin-bottom:2rem;text-align:center}
.website_case ul{overflow:hidden;margin:0 -15px 0;padding:0}
.website_case a{margin-bottom:25px;padding-right:15px;padding-left:15px}
.website_case li{overflow:hidden;border-radius:5px;background:#fff;list-style:none}
.website_case li .poto{position:relative;overflow:hidden}
.website_case li .poto img{height:auto;max-width:100%}
.website_case li .poto .linkicon{position:absolute;right:2%;bottom:5%;z-index:2;width:30px;height:30px;border-radius:50%;background:url(../svg/case_list_link.svg) no-repeat;background-color:#fff;background-position:center;background-size:60%;opacity:0;opacity:0}
.website_case .hot .poto .linkicon{width:60px;height:60px}
.website_case li .poto .mask{position:absolute;top:0;left:0;z-index:1;padding:30px;width:100%;height:100%;background-image:linear-gradient(50deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 0);color:#fff;transition:all 1s ease 0s}
.website_case li .poto .mask .service_tag{margin-top:2rem;opacity:0}
.website_case li .poto .mask .service_tag span{display:inline-block;margin-top:.5rem;margin-right:5px;padding:0 .6rem;width:auto;height:25px;border-radius:15px;background:#fff;color:#333;line-height:25px}
.website_case li .poto .mask .service_tag span::before{margin-right:5px;color:#f36;content:'\f111';font-family:FontAwesome}
.website_case li .poto .mask .summary{margin-top:1rem;padding:0;color:#fff;opacity:0}
.website_case .hot .poto .mask .summary{margin-top:2rem;font-size:130%}
.website_case li,.website_case li .poto .linkicon,.website_case li .poto .mask,.website_case li .poto .mask .service_tag,.website_case li .poto .mask .summary,.website_case li .poto img{transition:all .5s ease 0s}
.website_case a:hover li{box-shadow:0 0 15px 1px rgba(0,0,0,.07)}
.website_case a:hover li img{transform:scale(1.1,1.1)}
.website_case a:hover li .poto .linkicon{opacity:.9}
.website_case a:hover li .poto .mask{background-image:linear-gradient(50deg,rgba(0,0,0,.7) 50%,rgba(0,0,0,0) 100%)}
.website_case a:hover li .poto .mask .service_tag{margin-top:.5rem;opacity:1}
.website_case a:hover li .poto .mask .summary{opacity:1}
.website_case li .title{margin-top:1rem;padding:0 1.5rem;color:#333;transition:all .5s ease 0s}
.website_case li .subtitle{margin-bottom:2rem;padding:0 1.5rem;color:#999;transition:all .5s ease 0s}
.website_case a:hover li .title{padding-left:2rem;color:#023eeb}
.website_case a:hover li .subtitle{color:#333}
.website_case .category-more{padding:10px 0;text-align:center}
.website_case .category-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;line-height:50px;transition:all .3s ease 0s}
.website_case .category-more a:hover{box-shadow:0 0 15px 1px rgba(0,0,0,.07);color:#023eeb}
@media screen and (max-width:1280px){
    .website_case li .poto .mask{padding:0 15px}
}
@media screen and (max-width:576px){
    .website_case{padding-top:50px;padding-bottom:50px}
    .website_case a{margin-bottom:25px;padding-right:5px;padding-left:5px}
    .website_case ul{margin:0 -5px 0}
    .website_case li .title{margin-top:0;padding:1rem .5rem .5rem}
    .website_case li .subtitle{margin-bottom:0;padding:0 .5rem 1rem}
    .website_case a:hover li .title{padding-left:1rem}
}