@charset "utf-8";


.swiper-banners .swiper-slide-next { position: relative;}
.swiper-banners .swiper-slide-prev { position: relative; }
.swiper-banners .swiper-slide-active,.swiper-banners .swiper-slide-duplicate-active{z-index: 100;width: 100%;transform: scale(1);opacity: 1;}
.swiper-banners .swiper-button-next:after,.swiper-banners .swiper-button-prev:after { font-size: 20px; color:#fff; }
.swiper-banners .swiper-button-nextba { top:28%; }
.swiper-banners .swiper-button-prevba { top:28%;}
.swiper-button-nextd { display:none}
.swiper-button-prevd { display:none}
@media(max-width: 640px){
.swiper-banners { margin-top:-30px;}
.swiper-banners .swiper-button-nextba { top:15%; }
.swiper-banners .swiper-button-prevba { top:15%;}
.swiper-button-nextd { display:none}
.swiper-button-prevd { display:none}
}


/*解决方案*/
.mt10 { clear:both; margin-top:10px;}
.mt20 { clear:both; margin-top:20px;}
.mb20 { clear:both; margin-bottom:20px;}
.solution { padding:10px 0; clear:both; margin-top:50px; margin-bottom:10px; }
.solution .container { max-width: 1400px; }
.solution .nmtit { text-align:center; height:80px; line-height:80px;}

@media(max-width: 1000px){
.solution { padding:10px 0 10px; margin-top:-30px; margin-bottom:0;}
.solution .nmtit { text-align:center; height:50px; line-height:50px;}
}


/*热门服务*/
.fuwu {margin-top:0}
.solutionA{ margin-top:20px}
.solutionA ul li { float: left; margin-bottom:38px; width: 23%; margin-right:2%;border:1px solid #eeeeee; }
.solutionA ul li .con { position: relative; padding:25px 10px 30px;  }
.solutionA ul li .con .t { font-size: 18px;color:#356bb3; height: 30px; line-height: 30px; overflow: hidden; }
.solutionA ul li .con .c { font-size: 14px;color:#666666; height: 56px; margin: 10px 0 15px; line-height: 28px; overflow: hidden; }
.solutionA ul li .con .zx a { font-size: 18px;color:#356bb3; font-weight:800; text-align:left;line-height: 25px; display: inline-block; float:left; padding-right:25px; background: url(../images/zx.png) no-repeat right center; }
.solutionA ul li .con .zx span.more { font-size: 13px;color:#666; text-align:right; float:right;  line-height: 25px; display: inline-block; padding-left:20px; }
.solutionA ul li .con:after { content:'';width: 0;height: 2px;background: #356bb3; position: absolute;left: 0; bottom:-5px; transition: all 0.8s;}
.solutionA ul li:hover .con:after {width: 100%; }
.solutionA ul li:hover .con .t a{ font-weight: bold; color:#356bb3; }
.solutionA ul li:nth-child(4n) { margin-right:0; }
.solutionA { padding-bottom:20px; }


@media(max-width: 1450px){
    .solutionA ul li { margin-bottom:26px; }
    .solutionA ul li .con { padding:15px 10px 20px; }
    .solutionA ul li .con .t { font-size: 16px; height: 24px; line-height: 24px; }
    .solutionA  ul li .con .c { margin: 5px 0 12px; }

}
@media(max-width: 1000px){
    .solutionA ul li {width: 49%; margin-right:0; margin-bottom:4%; }
    .solutionA ul li:nth-child(2n) { float: right; }
	.solutionA ul li .con .zx a { font-size: 14px;color:#356bb3; font-weight:1000; text-align:left; display: inline-block; float:left; padding-right:10px; background: none }
    .solutionA ul li .con .zx span.more { font-size: 8px;color:#666; text-align:right; float:right;   display: inline-block; padding-left:6px;background: none; }

}
@media(max-width: 500px){
    /*.solution .servicesB ul li {width: 100%; margin-bottom:20px; }*/
    .solutionA ul li:last-child { margin-bottom:0; }

}
@media(max-width: 450px){

}
@media(max-width: 380px){

}




.solutionbg2 {
  /*background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);*/
  background:url(../images/solutionbg2.jpg) left no-repeat;/* linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066)*/ 
}
.solutionbg2 .serviceA-b { float: left; width: 55.5%; padding-top:0; }
.solutionbg2 .serviceA-b .t { font-size: 34px;color:#356bb3; font-weight: bold; text-align:right;  padding-bottom:20px; border-bottom:1px solid #F3F3F3;width:100%; }
.solutionbg2 .serviceA-b .c { margin-top:20px; line-height: 2; text-align:right;}
.solutionbg2 .serviceA-c a  { float:right}


.servicesB-case .img img{ border-radius: 8px; border:1px solid #eee;}

.liucheng { margin-top:-40px;}
.servicesB-liucheng ul{background:url(../images/lc-jt.png) center no-repeat; -webkit-animation:4s 2.9s ease-out backwards;-moz-animation:4s 2.9s ease-out backwards;-ms-animation:4s 2.9s ease-out backwards;animation:4s 2.9s ease-out backwards;}

@media(max-width: 640px){ 
.solutionbg2 {background: none}
.solutionbg2 .serviceA-b { float: left; width: 100%; padding-top:0; }
.solutionbg2 .serviceA-b .t { font-size: 24px;color:#356bb3; font-weight: bold; text-align:left;padding-bottom:20px; border-bottom:1px solid #F3F3F3 ;width:100%; }
.solutionbg2 .serviceA-b .c, .solutionbg2 .serviceA-b .c h2 { font-size: 14px; margin-top:20px; line-height: 1.5; text-align:left;}
.solutionbg2 .serviceA-c a  { float:left}

.liucheng { margin-top:-30px;}
.servicesB-liucheng ul{background: none;}
}
.card-body { margin-top:30px;}
.liyou {margin-top:30px;}
.zizhi { margin-top:-15px;}
.case { margin-top:-40px;}
.solutioncase { display:block; margin-top:20px; height:auto; min-height:550px;}
.solutioncase ul li { float: left; margin-bottom:18px; width: 16%; margin-right:0.6%; border:1px solid #CAE4FF; border-radius: 10px;}
.solutioncase ul li:hover{border:1px solid #356bb3; box-shadow: 2px 2px 4px #356bb3;}
.solutioncase ul li img{ border-radius: 10px;}
.solutioncase ul li .con { position: relative; padding:25px 10px 30px; border-bottom:1px solid #eeeeee; }
.solutioncase ul li .con .t { font-size: 18px;color:#333333; height: 30px; line-height: 30px; overflow: hidden; }
.solutioncase ul li .con .c { font-size: 14px;color:#666666; height: 56px; margin: 10px 0 25px; line-height: 28px; overflow: hidden; }
.solutioncase ul li .con span.more { font-size: 16px;color:#356bb3; line-height: 20px; display: inline-block; padding-right:15px; background: url(../images/jtblue.png) no-repeat right center; }
.solutioncase ul li .con:after { content:'';width: 0;height: 2px;background: #356bb3; position: absolute;left: 0; bottom:-1px; transition: all 0.8s;}
.solutioncase ul li:hover .con:after {width: 100%; }
.solutioncase ul li:hover .con .t { font-weight: bold; color:#356bb3; }
/*.solutioncase ul li:nth-child(6n) { margin-right:0; }*/
@media(max-width: 640px){ 
.fuwu {margin-top:10px}
.solutioncase ul li { float: left; margin-bottom:18px; width: 24%; margin-right:1%; border:1px solid #CAE4FF; border-radius: 10px;}
/*.solutioncase ul li:nth-child(4n) { margin-right:0; }*/
.solutioncase { display:block; margin-top:20px; height:auto; min-height:370px;}
.liyou {margin-top:0;}
.zizhi { margin-top:20px;}
}

/*------------ 困惑 ---------------- */
.kunhuo { margin-top:50px; display:block; min-height:400px; background:url(../images/solutionbg4.jpg) bottom right no-repeat; -webkit-animation:4s 2.9s ease-out backwards;-moz-animation:4s 2.9s ease-out backwards;-ms-animation:4s 2.9s ease-out backwards;animation:4s 2.9s ease-out backwards;}
	
.tf-timeline { clear:both; display:block;
  padding-left: 26px;
  border-left: 1px solid #eee;
}
.tf-timeline .timeline-item {
  position: relative; margin-top:15px;
}
.tf-timeline .timeline-item::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: -33px;
  position: absolute;
  border-radius: 50%;
  background-color:  #356bb3;
  height: 13px;
  width: 13px;
}


.timeline-number {
  padding-left: 40px; 
}
.timeline-number .timeline-item {
  padding: 16px;
  margin-right: -16px;
  background: #fff;
  box-shadow:  0 2px #eee; border:1px solid #eee;
  border-radius: 20px;
  position: relative;float: left; width:45%;
}
.timeline-number .timeline-item:nth-child(even) {float: right;}
.timeline-number .timeline-item:hover {
  padding: 16px;
  margin-right: -16px;
  background: #356bb3;color:#fff;
  box-shadow:  0 2px #eee; border:1px solid #eee;
  border-radius: 20px; 
}

.timeline-number .timeline-item .timeline-content {
  padding-left: 22px;
}
.timeline-number .timeline-item .timeline-content .timeline-header {
  padding-top: 6px; font-size:20px;
  /*border-bottom: 1px solid #eee;*/
}

.timeline-number .timeline-item .timeline-content .timeline-header span{ float:right; text-align:center; display:inline-block; width:120px; height:35px; line-height:35px; margin-top:-6px;   font-size:16px;  border:1px solid #356bb3; color:fff;border-radius:16px;
  /*border-bottom: 1px solid #eee;*/
}
.timeline-number .timeline-item:hover span { background:#FFF; color:#356bb3}
.timeline-number .timeline-item:hover h4 { color:#fff;}
.timeline-number .timeline-item:hover .number { color:#356bb3;}
.timeline-number .timeline-item .timeline-content .timeline-header  a{ color:#356bb3;}

.timeline-number .timeline-item .timeline-content .timeline-body {
  padding-top: 16px;
}
.timeline-number .timeline-item .timeline-content .timeline-body .box-img {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.timeline-number .timeline-item .timeline-content .timeline-body .box-img img {
  border-radius: 14px;
  height: 90px;
}
.timeline-number .timeline-item .number {
  position: absolute;
  top: 10px;
  left: -18px;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 700;
  color: #fff;
  background:  #356bb3;
  border: 4px solid #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 98px;
}
.timeline-number .timeline-item::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 30px;
  width: 25px;
  height: 1px;
  background:  #356bb3;
}
.timeline-number .timeline-item::after {
  left: -47px;
  top: 30px;
}
.timeline-number .timeline-item:not(:last-child) {
  margin-bottom: 12px;
}


@media(max-width: 640px){
	.serviceA { margin-top:-50px;}
	.kunhuo { background:none;margin-top:0;}
	.tf-timeline .timeline-item {
  position: relative; margin-top:12px;
}
	.timeline-number .timeline-item {
  padding: 16px;
  margin-right: -16px;
  background: #fff;
  box-shadow: #eee;
  border-radius: 20px;
  position: relative;float: none; width:100%; margin-right:0;
}
	.timeline-number .timeline-item:hover {
  padding: 16px;
  margin-right: -16px;
  background: #356bb3;
  box-shadow: #eee;
  border-radius: 20px;
  position: relative;float: none; width:100%;
}
.timeline-number .timeline-item:nth-child(even) {float: none;}
.timeline-number .timeline-item .timeline-content {
  padding-left: 16px;
}
.timeline-number .timeline-item .timeline-content .timeline-header {
  padding-top: 4px; font-size:13px;
  /*border-bottom: 1px solid #eee;*/
}
.timeline-number .timeline-item .timeline-content .timeline-header span { display:none}
}

/*------------ button理由 ---------------- */

:root {
  --surface: #f5f5f5;
  --white: #fff;
  --primary: #356bb3;
  --primary-bold: #5b2400;
  --primary-btn: #356bb3;
  --secondary: #787982;
  --secondary2: #b9bac3;
  --success: #1e7f11;
  --success2: #54b24c;
  --danger: #e10000;
  --warning: #ff8a00;
  --info: #a70267;
  --light: #e7e7e7;
  --dark: #356bb3;
  --disable: #d3b7a5;
  --green: #143d33;
  --green2: #c7f464;
  --orange: #ff9c2e;
  --orange2: #fa6900;
  --orange3: #f9cdad;
  --pink: #fe4365;
  --purple: #542437;
  --blue: #606dfa;
  --blue2: #a7dbd8;
  --blue3: #4ecdc4;
  --blue4: #036564;
  --dark2: #031634;
  --bg-ip: #f7f7f7;
  --shadow: 0px 15px 20px 0px rgba(201, 106, 40, 0.44);
  --shadow2: 0px 1px 4px 0px rgba(0, 0, 0, 0.07) inset;
  --shadow3: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
  --shadow-box: 0px 8px 30px 0px rgba(0, 0, 0, 0.06);
  --text-gray: #f3f3f3;
  --dot: #6c6c78;
  --text: #6f7582;
  --text-2: #c9cbce;
  --text-3: #343434;
  --text-4: #d3d5da;
  --text-5: #abadb2;
  --line: #e5e5e5;
  --line-2: #d9d9d9;
  --line-3: #dbdbdb;
  --line-rgba: rgba(255, 255, 255, 0.1);
  --backdrop: rgb(21, 21, 21);
  --bg-progress: rgba(21, 21, 21, 0.15);
  --rgba-primary: rgba(135, 59, 10, 0.1);
  --rgba-success: rgba(30, 127, 17, 0.1);
  --rgba-danger: rgba(225, 0, 0, 0.1);
  --rgba-warning: rgba(255, 138, 0, 0.1);
  --rgba-info: rgba(167, 2, 103, 0.1);
  --rgba-dark: rgba(27, 50, 95, 0.1);
  --rgba-disable: rgba(135, 59, 10, 0.1);
  --liner-primary: linear-gradient(270deg, #e17e3e 0%, #873b0a 100%);
  --linner-1: linear-gradient(180deg, rgba(135, 59, 10, 0) 47.91%, #2e1200 100%);
  --onSurface: #151515;
  --primary-hover: #356bb3;
  --success-hover: #19770c;
  --danger-hover: #b30808;
  --warning-hover: #e37d05;
  --info-hover: #91045a;
  --light-hover:#d0caca;
  --dark-hover:#15294f;
  --disable-hover:#c4a896;
}


.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.gap-4 {
  gap: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-10 {
  gap: 10px;
}

.tf-btn {
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 600; font-size:18px;
}
.tf-btn-200 {
  width: 200px;
}
.tf-btn.inline {
  width: auto;
}
.tf-btn.btn-lg {
  padding: 20px;
}
.tf-btn.btn-md {
  padding: 14px;
}
.tf-btn.btn-sm {
  padding: 7px 12px;
  border-radius: 4px;
}
.tf-btn.primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}
.tf-btn.primary:hover {
  background: var(--primary-hover);
}
.tf-btn.surface {
  background: var(--surface);
  border: 1px solid var(--surface);
}
.tf-btn.secondary {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--primary);
}
.tf-btn.secondary:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.tf-btn.success {
  background: var(--success);
  border: 1px solid var(--success);
  color: #fff;
}
.tf-btn.success:hover {
  background: var(--success-hover);
}
.tf-btn.danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
}
.tf-btn.danger:hover {
  background: var(--danger-hover);
}
.tf-btn.warning {
  background: var(--warning);
  border: 1px solid var(--warning);
  color: #fff;
}
.tf-btn.warning:hover {
  background: var(--warning-hover);
}
.tf-btn.info {
  background: var(--info);
  border: 1px solid var(--info);
  color: #fff;
}
.tf-btn.info:hover {
  background: var(--info-hover);
}
.tf-btn.light {
  background: var(--light);
  border: 1px solid var(--light);
  color: #151515;
}
.tf-btn.light:hover {
  background: var(--light-hover);
}
.tf-btn.dark {
  background: var(--white);
  border: 1px solid #CAE4FF;
  color: var(--dark);
}
.tf-btn.dark:hover {
  background: var(--dark);
  color: #fff;
}
.tf-btn.disable {
  background: var(--disable);
  border: 1px solid var(--disable);
  color: #fff;
}
.tf-btn.disable:hover {
  background: var(--disable-hover);
}
.tf-btn.light-btn-primary {
  background: var(--rgba-primary);
  border: 1px solid transparent;
  color: var(--primary);
}
.tf-btn.light-btn-primary:hover {
  background: var(--primary);
  color: #fff;
}
.tf-btn.light-btn-success {
  background: var(--rgba-success);
  border: 1px solid transparent;
  color: var(--success);
}
.tf-btn.light-btn-success:hover {
  background: var(--success);
  color: #fff;
}
.tf-btn.light-btn-danger {
  background: var(--rgba-danger);
  border: 1px solid transparent;
  color: var(--danger);
}
.tf-btn.light-btn-danger:hover {
  background: var(--danger);
  color: #fff;
}
.tf-btn.light-btn-warning {
  background: var(--rgba-warning);
  border: 1px solid transparent;
  color: var(--warning);
}
.tf-btn.light-btn-warning:hover {
  background: var(--warning);
  color: #fff;
}
.tf-btn.light-btn-info {
  background: var(--rgba-info);
  border: 1px solid transparent;
  color: var(--info);
}
.tf-btn.light-btn-info:hover {
  background: var(--info);
  color: #fff;
}
.tf-btn.light-btn-dark {
  background: var(--rgba-dark);
  border: 1px solid transparent;
  color: var(--dark);
}
.tf-btn.light-btn-dark:hover {
  background: var(--dark);
  color: #fff;
}
.tf-btn.outline-btn-primary {
  background: var(--white);
  border: 1px solid var(--primary);
  color: var(--primary);
}
.tf-btn.outline-btn-primary:hover {
  background: var(--primary);
  color: #fff;
}
.tf-btn.outline-btn-success {
  background: var(--white);
  border: 1px solid var(--success);
  color: var(--success);
}
.tf-btn.outline-btn-success:hover {
  background: var(--success);
  color: #fff;
}
.tf-btn.outline-btn-danger {
  background: var(--white);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.tf-btn.outline-btn-danger:hover {
  background: var(--danger);
  color: #fff;
}
.tf-btn.outline-btn-warning {
  background: var(--white);
  border: 1px solid var(--warning);
  color: var(--warning);
}
.tf-btn.outline-btn-warning:hover {
  background: var(--warning);
  color: #fff;
}
.tf-btn.outline-btn-info {
  background: var(--white);
  border: 1px solid var(--info);
  color: var(--info);
}
.tf-btn.outline-btn-info:hover {
  background: var(--info);
  color: #fff;
}
.tf-btn.outline-btn-light {
  background: var(--white);
  border: 1px solid var(--light);
  color: var(--onSurface);
}
.tf-btn.outline-btn-light:hover {
  background: var(--light);
}
.tf-btn.outline-btn-dark {
  background: var(--white);
  border: 1px solid var(--dark);
  color: var(--dark);
}
.tf-btn.outline-btn-dark:hover {
  background: var(--dark);
  color: #fff;
}
.tf-btn.btn-square {
  border-radius: 0;
}
.tf-btn.line {
  border: 1px solid #e5e5e5;
}
.tf-btn.icon {
  color: var(--onSurface);
  font-weight: 600;
  border: 1px solid #e5e5e5;
  padding: 13px;
}
.tf-btn.icon .img-icon {
  width: 20px;
  height: 20px;
}
.tf-btn.icon .icon {
  font-size: 20px;
}
.tf-btn.icon .icon.icon-tw {
  color: #03a9f4;
}
.tf-btn.icon .icon.icon-x {
  color: var(--onSurface);
}

@media(max-width: 640px){
.tf-btn {
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-weight: 500; font-size:15px;
}
}