body{font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-weight: 400;}
.trans{ transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s }
ol,ul{padding-left: 0; list-style: none;}
a{color:#333; text-decoration: none;}
a:hover{color: #fb6638;}
/* 头部 */
#header{transition: all .2s ease;}
#header.active { background: #ffffff !important; border-color: #e2e2e2; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1) }
#header.active1{background: #2468f2;}
#header .navbar #sfLogo{height: 60px;}
#header .menu .nav-item .nav-link { color: #fff; font-size: 16px; transition: all .2s ease; display: flex; align-items: center; height: 100%; padding: 0 22px; position: relative; }
.sf-header .nav-item .nav-linktag.active { color: #fff; }
.sf-header .nav-item:hover .nav-linktag { color: #fff; }

#header.active .menu .nav-item .nav-link{ color: #282828;}
#header.active .menu .nav-item .nav-link:hover{ color: #1d21a9;}

.menu-toggle{position: relative; width: 40px;}
.menu-toggle span.hamburger,
.menu-toggle span.hamburger:after,
.menu-toggle span.hamburger:before {content:"";display:block;width:24px;height:3px;background:#fff;position:absolute;top:50%;margin-top:-1px;left:50%;margin-left:-12px;transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s}
.menu-toggle span.hamburger,
.menu-toggle span.hamburger:after,
.menu-toggle span.hamburger:before {content:"";display:block;width:24px;height:3px;background:#fff;position:absolute;top:50%;margin-top:-1px;left:50%;margin-left:-12px;}
.menu-toggle span.hamburger:after {margin-top:-7px;top:0;transition-delay:0.27s;}
.menu-toggle span.hamburger:before {margin-top:7px;top:0;transition-delay:0.2s;}
#header.active .menu-toggle span.hamburger,
#header.active .menu-toggle span.hamburger:after,
#header.active .menu-toggle span.hamburger:before{background:#555;}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm{--bs-offcanvas-width: 180px; background: #f5f5f5;}
.mLogo{background: #fff;}
.mNavs{ text-align: center; padding-top: 20px}
.mNavs .nav-item .nav-link{color: #333;}

/* 轮播 */
#banner{overflow: hidden;width: 100%;position: relative;}
#banner .swiper-slide > img{width: 100%;}
#banner .swiper-pagination{bottom:20px; z-index: 10;}
#banner .swiper-pagination-bullet{border-radius:5px; width: 10px; height: 10px; background: #fff;opacity: .2;transition: all .3s;}
#banner .swiper-pagination-bullet:hover{width: 30px;}
#banner .swiper-pagination-bullet-active{ opacity: 1; width: 30px;}
#banner .textBox{position: absolute;z-index: 2; top: 50%;left: 10%;transform: translateY(-50%);}
#banner .textBox  h1{ font-size: calc(.5rem + 2vw); font-weight: bold; color: #fff; margin-bottom: 3vw;}
#banner .textBox  p{ font-size:  calc(.5rem + 1vw); color: #fff; font-weight: 300; margin-bottom: 1.5vw;}
#banner .textBox  div{padding-top:60px}
#banner .textBox  .more{display: block; height: 50px; line-height: 50px; width: 200px; border: 1px solid #fff; text-align: center; color: #fff; font-size: 20px;}


.tit1,.tit2{ text-align: center; width: 100%;}
.tit1 h3{color: #3B426B; font-size: calc(1rem + 1.5vw); font-weight: bold; margin-bottom: 14px;}
.tit1 p{color: #9c9eae; font-size: 14px; font-weight: 400;}
.tit2 h3{color: #fff; font-size: calc(1rem + 1.5vw); font-weight: bold; margin-bottom: 14px;}
.tit2 p{color: #fff; font-size: 14px; font-weight: 400;}

/* 四个图标 */
.four-icon{box-shadow: 0 1px 10px 2px rgba(0, 0, 0, .08); margin-top: 60px;}
.four-icon ul li{width: 25%;}


/* 服务范围 */
.serviceBox{ background: #F7FAFF; padding-top:calc(1rem + 3vw); padding-bottom: 40px;}
.fuwu{ position: relative;}
.serviceList{padding-top:50px;}
#serviceList{padding-top:50px;}
.service_Li{diplay:block; width: 100%; transition: all .3s; float: left;background: #fff;border-radius: 10px; box-shadow: 0px 0px 18px 0px rgb(36 104 242 / 17%); overflow: hidden;}
.service_Li:hover{ transform: translateY(-20px);}
.service_Li.item_img{ overflow: hidden;}
.service_Li .item_img img{ width: 100%; height: auto;}
.service_Li .item_info{ padding: 20px; text-align: center;}
.service_Li .item_info h3{ font-size: 20px; font-weight: bold; color: #000000; margin-bottom: 12px;}
.service_Li .item_info .p1{ font-size: 14px; margin-bottom: 6px; color: #666;}
.service_Li .item_info .p2{ font-size: 12px; color: #666; margin-bottom: 0;}
.service_Li .item_info .p2 span{margin:0 5px}
.fuwu .swiper-button-next,.fuwu .swiper-button-prev{ width: 22px; height: 54px; opacity:0.6;outline:0 none !important;}
.fuwu .swiper-button-next{ background: url(../images/arrow.png); background-position:-28px 0; right:-50px;}
.fuwu .swiper-button-prev{ background: url(../images/arrow.png);left: -50px;}
.fuwu .my-button-disabled{opacity:0;}
.fuwu .swiper-pagination{bottom: -15px;}
.fuwu .swiper-pagination-bullet{ width: 12px; height: 12px;}
.fuwu .swiper-container{padding-left: 18px; padding-right: 18px; margin-left: -18px; margin-right: -18px;}

/* 解决方案 */
.jjfaBox{background: url(../images/fuwubg.jpg) #F7FAFF; background-size: cover; padding-top:120px; padding-bottom:50px;}
.jjfa_Li{diplay:block; width: 100%; transition: all .3s; float: left;background: #fff;border-radius: 10px; box-shadow: 0px 0px 18px 0px rgb(36 104 242 / 17%); overflow: hidden;}
.jjfa_Li .item_img{ overflow: hidden; width: 60%;}
.jjfa_Li .item_img img{ width: 100%; height: auto;}
.jjfa_Li .item_info{ padding: 80px 50px;width: 40%;}
.jjfa_Li .item_info h3{ font-size: 28px; font-weight: bold; color: #000000; margin-bottom: 12px;}
.jjfa_Li .item_info .p1{ font-size: 14px; margin-bottom: 6px; color: #666; line-height: 2;}
.jjfa_Li .item_info .p2{ margin-top: 50px;}
.zz-button {
  font-size: 15px;
  color: rgba(255, 255, 255, 1);
  background: rgba(35, 101, 237, 1);
  margin: 0px 15px 0px 0px;
  border: 2px solid rgba(35, 101, 237, 1);
  border-radius: 30px 30px 30px 30px;
  padding: 10px 35px 10px 35px;
}

/* 案例 */
.caseBox{background: url(../images/fuwubg.png) #F7FAFF; background-size: cover; padding-top:120px; padding-bottom:50px;}
.caseList{margin-top: 50px;}
.caseLi{display: block; overflow: hidden; position: relative; height: calc(5.5rem + 8vw);}
.caseLi .img{ width: 100%; height: calc(5.5rem + 8vw);}
.caseLi h1{position:absolute; color:#fff; font-size:18px;transition: all .8s; -webkit-transition: all .8s; display:block; text-align:center; width:100%; bottom:15px; z-index: 8;}
.caseLi .linkico{position:absolute; color:#999; font-size:15px;transition: all .4s; -webkit-transition: all .4s; display:block; text-align:center; width:100%; top:-60px; z-index: 8;}
.caseLi:hover .img{transform:scale(1.1);}
.caseLi:hover .linkico{ top: 50px;}
.caseLi:hover h1{bottom:80px;}
.caseLi .onimg{ position: absolute; left: 0; top: 240px; width: 100%; height: 100%; z-index: 7; background: rgba(0, 0, 0, .2);  transition: all 0.4s;}
.caseLi:hover .onimg{background: rgba(0, 0, 0, .6); top:0}

.more1{padding: 10px 20px; border: 1px solid #fff; color: #fff; border-radius: 30px;}
.more1:hover{background: #fff; color: #333;}

.more2{padding: 10px 20px; border: 1px solid rgb(218, 218, 218); color: #999; border-radius: 30px;}
.more2:hover{background: #1d21a9; border: #1d21a9; color: #fff;}


/* 新闻 */
.newsBox{padding: 80px 0;}
.newsList{margin-top: 30px;}
.newsLi{display: block; padding: 25px; border-radius: 5px; box-shadow: 0px 0px 12px 0px rgba(26, 58, 129, 0.1);}
.newsLi:hover{-webkit-box-shadow: 0px 8px 20px rgba(26, 58, 129, 0.1); box-shadow: 0px 8px 20px rgba(26, 58, 129, 0.1); }
.newsLi h3{ color: #3b426b; font-size: 18px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.newsLi p{ padding-top:10px; font-size: 14px; color: #75778b; line-height: 1.5;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
.newsLi div{ font-size: 12px; color: #999; margin-top: 10px;}

/* 联系我们 */
.contactBox { padding: 80px 0; width: 100%; background: url(../images/client.bg.png) no-repeat #ffffff;}
.contact{ background-size: cover;}
.contact {padding-top:60px ;}
.contact li .contactBd{ background: rgba(255,255,255,.5); padding: 30px 0;}
.contact li .contact_icon {width: 80px; height: 80px; margin:0 auto 15px auto; display: block;}
.contact li h3{ text-align: center; color: #2468f2; font-size: 18px; font-weight: 800;}
.contact li span{ font-size: 14px; text-align: center; display: block; margin-top: 10px;}
.contact_icon1 {background: url(../images/c1.png) no-repeat; background-size: cover;}
.contact_icon2 {background: url(../images/c2.png) no-repeat; background-size: cover;}
.contact_icon3 {background: url(../images/c3.png) no-repeat; background-size: cover;}
.contact_icon4 {background: url(../images/c4.png) no-repeat; background-size: cover;}
.contact_icon4:hover{background: url(../images/ewm.jpg) no-repeat; background-size: cover;}

/*footer*/
.footer{background: #1c1c25;width: 100%;color: #fff;font-size: 14px;}
.footer .footer-tit{padding-bottom: 4px;color: #fff;}
.footer-item{padding: 70px 0 50px;}
.footer-item p a {color: #5f5f5f;padding-top: 16px;}
.footer-img img {width: 160px;height: 160px;}
.footer-img{padding: 70px 0 50px;}
.copyright{ font-size: 12px; color: #5f5f5f!important;text-align: center;line-height: 80px; border-top: 1px solid #252525;}
.copyright a{color: #5f5f5f!important;}

.common-float-win div { box-sizing: border-box; }
.common-float-win p{margin-bottom: 0;}
.common-float-win { position: fixed; z-index: 100; right: 16px; bottom: 200px; width: 64px; height: 212px; }
.common-float-win .common-float-item { width: 64px; height: 64px; border: 2px solid #2468f2; background-color: #ffffff;  background-position: center 12px; background-repeat: no-repeat; border-radius: 10px; padding-top: 34px; margin-bottom: 10px; transition: all .2s ease; cursor: pointer; position: relative; box-shadow: 1px 2px 6px rgba(0,0,0,.1); }
.common-float-icon { display: block; margin: 0 auto; transition: all .2s ease; }
.common-float-name { line-height: 17px; font-size: 12px; margin-top: 5px; color: #585e81; text-align: center; transition: color .2s ease; }
.common-float-win .common-float-item:hover { background-color: #2468f2; }
.common-float-win .common-float-item:hover .common-float-name { color: #fff; }

.common-float-item.float-wechat { background-image: url(../images/qrcode.act.png); }
.common-float-item:hover.float-wechat { background-image: url(../images/qrcode.png); }
.common-float-item.float-wxworker { background-image: url(../images/wechat.act.png); }
.common-float-item:hover.float-wxworker { background-image: url(../images/wechat.png); }
.common-float-item.float-phone { background-image: url(../images/phone.act.png); }
.common-float-item:hover.float-phone { background-image: url(../images/phone.png); }

.common-float-item.back-top { padding: 0; height: 30px; background: #fff;  transition: all .2s ease; border: unset; display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; }
.common-float-item.back-top.show { height: 30px; }
.common-float-item.back-top:hover { transform: scale(1.04); background: #fff; }

.common-float-item .hover-floatwin { width: 150px; padding: 12px 0; position: absolute; top: 0; left: -162px; border-radius: 10px; background: #2468f2; transition: opacity .2s ease; opacity: 0; z-index: -1; }
.common-float-item .hover-floatwin-img { display: block; margin: 0 auto 10px; width: 126px; height: 126px; }
.common-float-item .hover-floatwin-desc { line-height: 21px; color: #ffffff; font-size: 14px; text-align: center; }
.common-float-item:hover .hover-floatwin { opacity: 1; z-index: 1; }


/* 内页样式 */
.ny-banner{ height: calc(10rem + 20vw); background-position: left center; background-size: cover;}
.ny-banner .ny-box{ position: relative; height: 100%;}
.ny-banner .ny-box h3{ position: absolute; left: 0; bottom:40%; font-size: calc(1rem + 1.5vw); font-weight: 900; color: #fff; padding: 0 20px;}
.ny-banner .ny-box p{ position: absolute; left: 0; bottom:30%; font-size: 16px; color: rgba(255, 255, 255, .6); padding: 0 20px;}
.mouse {position: absolute; z-index: 999; width: 30px; height: 42px; background: url(../images/mouse.png) no-repeat center; background-size: cover; left:20px; bottom:20%; animation: ud1 1s linear alternate infinite; -webkit-animation: ud1 1s linear alternate infinite;}
@keyframes ud1 {
  0% {transform: translateY(0);}
  100% {transform: translateY(20px);}
}


/* 服务页面 */
.wzBox{ padding: 80px 0;}
.wzBox ul{margin-top: 50px;}
.wzBd{background: #fff; box-shadow: 0 0 24px 0 rgb(184 195 211 / 35%); text-align: center; padding: 30px 20px;}
.wzBd:hover{ transform: translateY(-20px);}
.wzBd img{ width: 100%; max-width: 150px;}
.wzBd h3{margin-top: 20px; color: #2468f2;}
.wzBd p{margin-top: 10px; margin-bottom: 0; color: #8f8f8f;}

.xcxBox{background: #f5fbff; padding: 80px 0;}
.xcxBox ul{margin-top: 50px;}
.xcxBd{ text-align: center;}
.xcxBd h3{ margin-top: 0px; color: #3B426B;}
.xcxBd p{ margin-top: 10px; color: #8f8f8f;}

.uiBox{ padding: 80px 0;}
.uiBox ul{margin-top: 50px;}
.uiBd{box-shadow: 0 0 24px 0 rgb(184 195 211 / 35%); text-align: center; padding: 40px 20px;}
.uiBd:hover{ transform: translateY(-20px);}
.uiBd h3{margin-top: 20px; color: #444;}
.uiBd p{ margin-top: 10px; margin-bottom: 0; color: #8f8f8f;}

.tgBox{background: #f5fbff; padding: 80px 0;}
.tgBox ul{margin-top: 60px;}
.tgBd{ text-align: center;}
.tgBd h3{ margin-top: 15px; color: #3B426B;}
.tgBd p{ margin-top: 10px; color: #8f8f8f; line-height: 1.5;}

.f14{font-size: 14px;}
.f18{font-size: 18px;}

.weizhi{ padding: 40px 0; width: 100%;}
.weizhi1{ padding: 40px 0; width: 100%; background: url(../images/bg.left.png) left bottom #F5F9FF no-repeat;}
.weizhi2{ width: 100%; background: url(../images/bg.left.png) left bottom #F5F9FF no-repeat;}
.weizhi .breadcrumb,.weizhi1 .breadcrumb{margin-bottom: 0;}

#caseList{padding-top:50px; padding-bottom: 50px;}
#is_ajax_btn{padding-bottom: 50px; text-align: center;}
#newsList{padding-bottom: 50px;}

.mainBox{ background: url(../images/bg.left.png) left bottom #F5F9FF no-repeat; padding-top: 90px;}
.conBox{position:relative; background: #fff; padding: 50px; margin-bottom: 50px;}

.case-l h1{ font-size: 24px; color: #000; font-weight: bold;}
.case-l .cs{border-bottom: 1px solid #f2f2f2; padding: 20px 0; color:#999; font-size: 14px;}
.case-l .content{padding: 30px 0;}
.case-l .content img{ max-width: 100%;}

.case-r{ border-left: 1px solid #f2f2f2;}
.case-r h1{ font-size: 20px; color: #000; font-weight: bold;}
.case-r .cs{ padding: 15px 0; font-size: 14px; color: #888;}
.case-r .cs span{display: block; height: 28px;}
.case-r .btn{padding: 20px 0;}
.case-r .btn a{ display: block; width: 160px; height: 50px; border: 1px solid #f2f2f2; line-height: 50px; text-align: center;}
.case-r .btn a.btn1{ float: left; border: 0; background: #2468f2;border: 1px solid #2468f2; color: #fff;}
.case-r .btn a.btn2{ float: right;}
.case-r .btn a.btn2:hover{border: 1px solid #fb6638;}

.remen{padding-left: 24px;}
.remen dt{ border-left: 3px solid #2468f2; padding-left: 15px; font-size: 18px; font-weight: bold; height: 20px; line-height: 20px; margin-bottom: 20px; margin-left:-24px ;}
.remen dd{ line-height: 32px; height: 32px; font-size: 14px; background: url(../images/dot3.jpg) no-repeat 0 center; padding-left:20px;}
.biaoqian{padding-left: 24px;}
.biaoqian dt{ border-left: 3px solid #2468f2; padding-left: 15px; font-size: 18px; font-weight: bold; height: 20px; line-height: 20px; margin-bottom: 20px;margin-left:-24px }
.biaoqian a{opacity: 0.80;filter:alpha(opacity=80);color: #fff !important; font-size: 12px; background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px; font-weight:300;}
.biaoqian a:hover{opacity: 1;filter:alpha(opacity=100);}
.biaoqian a:nth-child(9n){background-color: #4A4A4A;}
.biaoqian a:nth-child(9n+1){background-color: #428BCA;}
.biaoqian a:nth-child(9n+2){background-color: #5CB85C;}
.biaoqian a:nth-child(9n+3){background-color: #D9534F;}
.biaoqian a:nth-child(9n+4){background-color: #567E95;}
.biaoqian a:nth-child(9n+5){background-color: #B433FF;}
.biaoqian a:nth-child(9n+6){background-color: #00ABA9;}
.biaoqian a:nth-child(9n+7){background-color: #B37333;}
.biaoqian a:nth-child(9n+8){background-color: #FF6600;}

.sxpian{ padding-top: 20px;  border-top: 1px solid #f2f2f2;}
.sxpian span{ display: block; line-height: 36px; font-size: 14px;}


.nav-navicon li a{ display: block; font-size: 18px; padding:40px 10px;}
.nav-navicon li.active{ border-bottom: 4px solid #2468f2;}
.nav-navicon li.active a{ color: #2468f2;}

.zhanList{ background: url(../images/bg.left.png) left bottom #F5F9FF no-repeat; padding: 60px 0;}
.zhanList .tit1{margin: 40px 0;}
.zhanLi{background: #fff; position: relative; border-radius: 5px; padding: 30px;}
.zhanLi .zhanPic{ width: 50px; height: 50px; margin-right: 20px;}
.zhanLi .zhanPic img{width: 100%;}
.zhanLi:hover{ -webkit-box-shadow: 0px 8px 20px rgba(26, 58, 129, 0.1); box-shadow: 0px 8px 20px rgba(26, 58, 129, 0.1);}
.zhanLi .zhanText h3{ font-size: 18px; color: #444;}
.zhanLi .zhanText p{font-size: 12px; color: #75778b; margin-bottom: 0;}


@media (max-width: 992px) {
  body{font-size: 14px;}
  .menu{display: none;}
  #header .navbar #sfLogo{ height: 40px;}
  #banner .textBox{left: 20px; margin-top: 20px;}
  #banner .swiper-pagination{bottom:10px; margin-bottom: 0;}
  #banner .swiper-pagination-bullet{border-radius:.2rem; width: .4rem; height: .4rem;}
  #banner .swiper-pagination-bullet-active{ opacity: 1; width: 1rem;}
  .service_Li .item_info .p1{ font-size: 14px; margin-bottom: 4px; color: #666;}
  .service_Li .item_info h3{ font-size: 18px; font-weight: bold; color: #000000; margin-bottom: 12px;}
  .tit1 p{color: #9c9eae; font-size: 12px; font-weight: 400;}
  .caseBox{padding-top:50px; padding-bottom:30px;}
  .caseList{margin-top: 30px;}
  .caseLi h1{display: none;}
  .newsBox{padding: 40px 0;}
  .contactBox { padding: 40px 0;}
  .contact {padding-top:20px ;}
  .ny-banner{padding-right: 30vw;}
  .ny-banner .ny-box h3{bottom:50%;}
  .ny-banner .ny-box p{bottom:25%; font-size: 14px;}
  .mouse{width: 20px; height: 28px; left:20px; bottom:20%;}
  .wzBox,.xcxBox,.uiBox,.tgBox{ padding: 30px 0;}
  .f14{font-size: 12px;}
  .f18{font-size: 14px;}
  .weizhi,.weizhi1{ padding: 20px 0; }
  #caseList{padding-top:30px; padding-bottom: 30px;}
  .mainBox{padding-top: 66px;}
  .conBox{ padding: 20px; margin-bottom: 30px;}
  .zhanList{padding: 30px 0;}
  .zhanLi{padding: 20px;}
  .zhanLi .zhanText h3{ font-size: 16px; margin-top: 15px;}
  .zhanLi .zhanText p{height: 2rem;}
  .common-float-win{display: none;}
  .jjfa_Li .item_img{ overflow: hidden; width: 100%;}
.jjfa_Li .item_info{ padding: 80px 50px;width: 100%;}
}

.waves {
  position: absolute;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
  bottom: 0;
  z-index: 9;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
      transform: translate3d(-90px, 0, 0);
  }
  100% {
      transform: translate3d(85px, 0, 0);
  }
}