*{
margin: 0;
padding: 0;
}
.page{
width: 100%;
margin: auto;
}
/*banner区域*/
.swiper {
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
/*产å“ä¸å¿ƒ*/
.pro-text{
text-align: center;
padding: 86px;
line-height: 45px;
}
.pro-text .title{
color: #303133;
font-size: 24px;
font-weight: bold;
}
.pro-text span{
color: #A0A3A8;
font-size: 16px;
}
.matter{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
line-height: 50px;
margin: 40px 0 0 30px;
}
.img{
margin-left: 20px;
cursor: pointer;
transition: all .6s ease 0s;
}
.img img{
width: 260px;
height: 155px;
}
.img:hover{
transform: scale(1.4);
}
.product{
background-color: #F9F9F9;
padding-bottom: 86px;
}
.center{
display: flex;
align-items: center;
justify-content: space-around;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.center:hover{
}
.one:hover{
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .3);
transition: all .2s ease-in-out;
}
.left:hover{
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .3);
transition: all .2s ease-in-out;
cursor: pointer;
}
.center .left{
width: 235px;
height: 420px;
display: flex;
flex-direction: column;
}
.center .left .up{
width: 100%;
height: 210px;
background-color: #2469F3;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
line-height: 40px;
flex-direction: column;
}
.center .left .up .myb{
font-size: 18px;
font-weight: bold;
}
.center .left .up .every{
color: #EAEFFD;
font-size: 15px;
}
.center .left .down{
width: 100%;
height: 210px;
}
.center .left .down img{
width: 100%;
height: 100%;
}
.center .right{
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex: 1;
flex-wrap: wrap;
height: 420px;
align-content: space-between;
}
.center .right .one{
width: 235px;
height: 200px;
margin-left: 20px;
display: flex;
flex-direction: column;
background-color: #FFFFFF;
cursor: pointer;
/*box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1)*/
}
.center .right .one .play{
display: flex;
align-items: center;
justify-content: flex-start;
}
.center .right .one .play img{
width: 27px;
height: 24px;
margin: 16px;
}
.center .right .one .play .cloud{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.center .right .one .line{
padding: 0 20px 16px;
height: 1px;
background-color: #EDEFF2;
background-clip: content-box;
}
.center .right .one .wz{
font-size: 13px;
padding: 0 20px;
color: #737373;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.center .right .one .lists{
font-size: 10px;
color: #9C9C9C;
align-items: center;
padding: 10px 20px 20px 10px;
justify-content: space-around;
display: flex;
visibility: hidden;
}
.center .right .one:hover .lists{
visibility: visible;
}
.center .right .one .lists .item{
float: left;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.center .right .one .lists .item .dot{
width: 4px;
height: 4px;
border-radius: 50%;
background-color: rgba(0,0,0,0.6);
margin-right: 4px;
}
.center .right .one .btm{
text-align: center;
height: 100%;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
flex: 1;
display: flex;
}
.center .right .one .btm .zuo{
width: 170px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #F5FAFD;
color: #2469F3;
}
.center .right .one .btm .you{
width: 91px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #2469F3;
color: #DFE6FD;
}
/*产å“优势*/
.advantage{
padding-bottom: 86px;
}
.adv-list{
display: flex;
align-items: center;
justify-content: space-around;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.adv-list .adv-item{
width: 300px;
height: 385px;
position: relative;
overflow: hidden;
}
.adv-list .adv-item .item-bg{
width: 100%;
height: 100%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.adv-list .adv-item:hover .item-bg{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.adv-list .adv-item .mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.adv-list .adv-item:hover{
cursor: pointer;
box-shadow: #545454 0 0 25px;
}
.adv-list .adv-item .desc{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 0 10px 30px 30px;
z-index: 4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.adv-list .adv-item:hover .desc{
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.adv-list .adv-item .desc .title{
padding-bottom: 16px;
padding-right: 32px;
font-size: 22px;
letter-spacing: 1px;
line-height: 1;
color: #fff;
font-weight: bold;
background-position: right top;
}
.adv-list .adv-item .desc .title .iconfont{
visibility: hidden;
font-size: 22px;
font-weight: 300;
transition: all .2s ease-in-out;
}
.adv-list .adv-item:hover .desc .title .iconfont{
visibility: visible;
}
.adv-list .adv-item .desc .adv-line{
position: relative;
left: 0;
bottom: 0;
width: 52px;
height: 4px;
background-color: #0ff;
}
.adv-list .adv-item .desc .text{
color: #fff;
font-size: 14px;
opacity: 0;
height: 0;
margin-top: 20px;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.adv-list .adv-item:hover .desc .text{
opacity: 1;
height: 18px;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/*技术ä¿è¯*/
.science{
background-color: #F9F9F9;
padding-bottom: 86px;
}
.science:hover{
cursor: pointer;
}
.sci-page{
display: flex;
align-items: center;
justify-content: flex-end;
width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.sci-page .sci-left{
width: 250px;
position: absolute;
left: 0;
}
.sci-page .sci-left .sort{
width: 100%;
height: 90px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin:20px 0;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
transition: all .2s ease-in-out;
position: relative;
}
.sci-page .sci-left .sort:hover{
width: 320px;
}
.sci-page .sci-left .sort:hover .agin-line{
visibility: hidden;
}
.sci-page .sci-left .sort:hover .agin-line{
width: 6px;
height: 100%;
background-color: #2469F3;
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
.sci-page .sci-left .sort img{}
.sci-page .sci-left .sort span{
font-size: 20px;
font-weight: 600;
color: #606266;
margin-left: 35px;
}
.sci-right{
width: 720px;
height: 400px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-around;
margin-left: 30px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
transition: all .2s ease-in-out;
}
.sci-right .left-team{
}
.sci-right .left-team .team{
display: flex;
padding: 40px 10px;
}
.sci-right .left-team .team img{}
.sci-right .left-team .team .team-cont{
margin-left: 25px;
}
.sci-right .left-team .team .team-cont .title{
font-size: 18px;
color: #606266;
font-weight: 600;
}
.sci-right .left-team .team .team-cont .text{
color: #606266;
font-size: 14px;
margin-top: 10px;
}
.sci-right .right-team{
}
.sci-right .right-team .team{
display: flex;
padding: 35px 10px;
}
.sci-right .right-team .team img{
width: 59px;
height: 45px;
margin-top: 10px;
}
.sci-right .right-team .team .team-cont{
margin-left: 25px;
}
.sci-right .right-team .team .team-cont .title{
font-size: 18px;
color: #606266;
font-weight: 600;
}
.sci-right .right-team .team .team-cont .text{
color: #606266;
font-size: 14px;
margin-top: 10px;
width: 200px;
}
/*å…费试用*/
.trial{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.trial .free{
width: 100%;
height: 276px;
position: relative;
overflow: hidden;
}
.trial .free .free-bg{
width: 100%;
height: 100%;
}
.trial .free .msk{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.trial .free .desc{
position: absolute;
right: 0;
left: 0;
bottom: 15%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
z-index: 4;
}
.trial .free .desc .title{
font-size: 35px;
color: #FFFFFF;
font-weight: bold;
margin-top: 65px;
}
.trial .text{
font-size: 16px;
color: #FFFFFF;
margin-top: 27px;
}
.trial .bottom{
background: url(../img/圆角.png) no-repeat center;
width: 154px;
height: 42px;
font-size: 20px;
color: #FFFFFF;
border-radius: 40px;
border-color: #4984F0;
text-align: center;
line-height: 40px;
margin-top: 52px;
}
.trial .bottom:hover{
cursor: pointer;
}
/*新闻资讯*/
.news{
padding-bottom: 86px;
}
.news:hover{
cursor: pointer;
}
.news .news-list{
width: 1000px;
height: 430px;
padding: 50px;
border: 1px solid #D9DADD;
margin-left: auto;
margin-right: auto;
}
.news .news-list .on-news{
display: flex;
align-items: center;
justify-content: space-around;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.news .news-list .on-news .news-item{
width: 370px;
height: 325px;
}
.news .news-list .on-news .news-item .title{
font-size: 18px;
font-weight: bold;
color: #303133;
}
.news .news-list .on-news .news-item .news-bk{
width: 360px;
height: 240px;
}
.news .news-list .on-news .news-item img{
width: 100%;
height: 100%;
margin-top: 20px;
}
.news-list .on-news .news-itemtwo{
width: 280px;
height: 260px;
font-size: 14px;
color: #606266;
line-height: 30px;
position: relative;
margin-left: 25px;
}
.news-list .on-news .news-itemtwo .text{
}
.news-list .on-news .news-itemtwo .gd{
position: absolute;
left: 170px;
bottom: 0;
color: #2469f3;
}
.news-list .on-news{}
.news-list .on-news .news-itemthere{
width: 370px;
height: 325px;
}
.news-list .on-news .news-itemthere .title{
font-size: 18px;
font-weight: bold;
color: #303133;
}
.news-list .on-news .news-itemthere .news-bk{
width: 360px;
height: 136px;
}
.news-list .on-news .news-itemthere .news-bk img{
width: 100%;
height: 100%;
margin-top: 20px;
}
.news-list .on-news .news-itemthere .news-p{
font-size: 14px;
color: #606266;
line-height: 30px;
position: relative;
margin-top: 20px;
}
.news-list .on-news .news-itemthere .news-p .gd{
position: absolute;
left: 310px;
bottom: 0;
color: #2469f3;
line-height: 1px;
}
.news-list .news-line{
border-bottom: 1px solid #D9DADD;
width: 980px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.news-list .up-news{
text-align: center;
margin-top: 40px;
}
.news-list .up-news .news-itemes{
width: 1000px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
}
.news-list .up-news .one{
font-size: 18px;
font-weight: bold;
}
.news-list .up-news .txt{
font-size: 14px;
color: #606266;
}
.news-list .up-news .txt span{
margin-left: 20px;
}
.news-list .up-news .gd{
color: #2469f3;
}
/*åˆä½œä¼™ä¼´*/
.partner{
background: url(../img/hzhb.png) no-repeat center;
background-color: #F9F9F9;
background-size: cover;
padding-bottom: 86px;
}
.container-list{
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
border-left: 1px solid rgb(200, 200, 200);
border-top: 1px solid rgb(200, 200, 200);
}
.container-list .container{
width: 199px;
height: 125px;
perspective: 1000px;
transform-style: preserve-3d;
border-bottom: 1px solid rgb(200, 200, 200);
border-right: 1px solid rgb(200, 200, 200);
}
.container-list .container .front .back{
width: 100%;
height: 100%;
}
.front img{
width: 100%;
height: 100%;
}
.back{
width: 100%;
height: 100%;
background-color: rgba(31, 63, 205, 1);
color: #fff;
font-size: 16px;
text-align: center;
}
.back span{
}
.flip{
width: 100%;
height: 100%;
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
}
.front, .back{
position: absolute;
top: 0px;
left: 0px;
backface-visibility: hidden;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.front{
z-index: 2;
}
.back{
transform: rotateY(-180deg);
}
.container:hover .flip{
transform: rotateY(180deg);
cursor: pointer;
}
/*备案åŠå…¬å¸ä¿¡æ¯*/
.record{
/*margin-top: 86px;*/
}
.record .record-friend{
width: 100%;
height: 80px;
background-color: #3048A7;
display: flex;
align-items: center;
justify-content: center;
}
.record .record-friend:hover{
cursor: pointer;
}
.record .record-friend span{
font-size: 14px;
color: #FFFFFF;
}
.record .record-firm{
width: 100%;
height: 300px;
background-color: #1D2D69;
display: flex;
align-items: center;
justify-content: center;
}
.record .record-firm:hover{
cursor: pointer;
}
.record .record-firm .rec{
width: 1000px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
}
.record .record-firm .left-record{
}
.record .record-firm .left-record .baidu{
width: 146px;
height: 50px;
display: block;
}
.record .record-firm .left-record .baidu img{
width: 100%;
height: 100%;
}
.record .record-firm .left-record .content{
margin-top: 10px;
}
.record .record-firm .left-record .content .title{
font-size: 18px;
color: #FFFFFF;
}
.record .record-firm .left-record .content .contact{
font-size: 14px;
color: #FFFFFF;
line-height: 30px;
margin-top: 20px;
}
.record .record-firm .left-record .content .contact .dz{}
.record .record-firm .left-record .content .contact .dh{}
.record .record-firm .left-record .content .contact .dh span{
color: #EE7E2B;
}
.record .record-firm .left-record .content .contact .ah{}
.record .record-firm .right-record{
margin-top: 30px;
}
.record .record-firm .right-record .gzh{
width: 126px;
height: 123px;
}
.record .record-firm .right-record .gzh img{
width: 100%;
height: 100%;
}
.record .record-firm .right-record .wz{
font-size: 16px;
color: #FFFFFF;
text-align: center;
margin-top: 26px;
}
/*客æœå¯¼èˆª*/
.service{
position: fixed;
top: 50%;
right: 0;
z-index: 3;
}
.service .service-list{
width: 272px;
height: auto;
justify-content: space-between;
position: absolute;
right: 18px;
top: -50%;
display: none;
}
.ser-consult{
/*display: none;*/
}
.ser-list{
display: flex;
flex-direction: column;
}
.service .service-list .consult{
width: 100%;
height: auto;
background-color: #FFFFFF;
box-shadow: #909399 0 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
line-height: 15px;
margin-right: 20px;
}
.service .service-list .consult .consult-title{
font-size: 14px;
color: #545454;
margin-top: 12px;
}
.service .service-list .consult .line{
width: 200px;
border-bottom: 1px solid #EDEFF2;
margin-top: 10px;
}
.service .service-list .consult .phone{
font-size: 12px;
color: #545454;
}
.service .service-list .consult .online{
font-size: 12px;
color: #545454;
}
.service .service-list .consult .line-two{
width: 168px;
border: 1px solid #EDEFF2;
}
.service .service-list .consult .qq{
font-size: 12px;
color: #545454;
}
.service .service-list .consult .code{
width: 106px;
height: 104px;
}
.service .service-list .consult .code img{
width: 100%;
height: 100%;
}
.service .service-list .ser-list{
right: 0;
}
.service .ser-list .ser-item{
width: 61px;
height: 62px;
background-color: #2469F3;
display: flex;
align-items: center;
justify-content: center;
}
.service .ser-list .ser-item:hover{
cursor: pointer;
}
.service .ser-item img{
color: #FFFFFF;
}
.service .ser-list .ser-items{
width: 61px;
height: 62px;
background-color: #EDEFF2;
display: flex;
align-items: center;
justify-content: center;
}
.service .ser-list .ser-items img{}
.service .ser-list .ser-items:hover{
color: #2469F3;
cursor: pointer;
}
.service .service-list .consult .piece{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5px;
padding: 10px;
width: 200px;
box-sizing: border-box;
border-bottom: 1px solid #EDEFF2;
}
.service .service-list .consult .piece .left{
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.service .service-list .consult .piece .left:hover{
box-shadow: none;
}
.service .service-list .consult .piece .right{
width: 30px;
position: relative;
}
.service .service-list .consult .piece .img{
width: 40px;
height: 40px;
margin: 0 10px 0 0;
}
.service .service-list .consult .piece .img img{
width: 100%;
height: 100%;
border-radius: 20px;
}
.service .service-list .consult .piece .title{
font-size: 12px;
color: #545454;
margin-right: 25px;
}
.service .service-list .consult .piece .title .rx{
font-weight: bold;
}
.service .service-list .consult .piece .title .hm{
margin-top: 5px;
}
.service .service-list .consult .piece .ewm-icon{
width: 100%;
height: auto;
cursor: pointer;
}
.service .service-list .consult .piece .ewm-icon img{
width: 100%;
height: 100%;
}
.service .service-list .consult .piece .ewm{
display: none;
position: absolute;
bottom: 36px;
right: -40px;
width: 120px;
height: 120px;
border: 2px solid #FFFFFF;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: rgb(17 12 46 / 15%) 0px 48px 100px 0px;
}
.service .service-list .consult .piece .ewm img{
width: 100%;
height: 100%;
}
.service .service-list .consult .piece .ewm-icon:hover~.ewm {
display: block;
}
.qucik-link a {
color: #FFFFFF;
font-size: 14px;
margin-right: 14px;
}