.api-tit{ font-size:28px; font-weight: bold; color: #000000; text-align: center;}
.api-tit span{ color: #4aa622;}
.api-banner{ padding: 7% 0 6%; background-position: right center; }
.api-banner .text{ width: 45%; }
.api-banner .text h1{ font-size: 36px; color: #061632; font-weight: bold;}
.api-banner .text .des{ margin-top: 30px; font-size: 14px; line-height:28px; color: #061632;}
.api-banner .text .des p{ margin-top: 20px;}
.api-banner .text .button a{ margin-top: 35px; margin-right: 10px; display: inline-block; width: 220px; line-height: 52px;border-radius: 5px; overflow: hidden; font-size:18px; background: #4aa622; color: #FFFFFF; text-align: center;}
.api-banner .text .button a:nth-child(2){ background: #4aa622;}

.api-point{ padding: 25px 0 30px; background: linear-gradient(100deg,#78bf04,#4ab554,#18a5c4);}
.api-point ul{ width: 100%; }
.api-point li{  float:left; margin-right: 3%; width: 45%;  color: #FFFFFF;}
.api-point li:nth-child(2n){ margin-right: 0; }
.api-point li div{ font-size: 16px; font-weight: bold;}
.api-point li div span{ font-size: 20px;}
.api-point li p{ margin-top: 5px; font-size: 14px; opacity: .5;}

.api-about{ padding: 60px 0; background: #fafbfc; }
.api-about ul{ margin: 0 -12px; }
.api-about li{ margin-top: 40px; float: left; width:25%; padding: 0 12px;}
.api-about li .box{ padding: 50px 10px 10px;  background: #fff; border: 1px solid #dfe1e6; border-radius: 7px; overflow: hidden; text-align: center; }
.api-about li .box h3{  margin-top: 22px; display: block; font-size: 20px; font-weight: 600; color: #000; }
.api-about li .box .des{ margin: 20px auto 0; max-width: 240px; min-height: 260px; text-align: left;}
.api-about li .box .des p{ margin-bottom: 10px; font-size: 14px; line-height: 20px; padding-left: 20px;}
.api-about li:nth-child(1) .box .des p{  background: url(../images/api/ico_right_01.png) no-repeat left 2px; }
.api-about li:nth-child(2) .box .des p{  background: url(../images/api/ico_right_02.png) no-repeat left 2px; }
.api-about li:nth-child(3) .box .des p{ background: url(../images/api/ico_right_03.png) no-repeat left 2px; }
.api-about li:nth-child(4) .box .des p{ background: url(../images/api/ico_right_04.png) no-repeat left 2px; }
.api-about li .box:hover{ transform:translateY(-4px);box-shadow:0 2px 8px 0 rgba(0,0,0,.15); }

.api-box{ padding: 90px 0; }
.api-box .content{ max-width: 980px; margin: 0 auto; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; }
.api-box .img{ width:40%; }
.api-box .text{ width: 55%; }
.api-box .text .api-tit{ text-align: left; }
.api-box .text .tit{ margin-top: 25px; color: #000; font-size: 20px; font-weight: bold; }
.api-box .text .con{ margin-top: 15px; margin-bottom: 25px; max-width: 500px;}
.api-box .text .con span{ margin-bottom:8px; margin-right:5px; font-size: 16px; display: inline-block; color:#1D8820; padding: 0 15px; line-height: 36px;border-radius: 4px;border: 1px solid #45A321;}
.api-box .text .con2{ margin-bottom: 0; }
.api-box .text .con2 span{ border: 1px solid #1976D2; color: #1976D2; }
.api-box2{ background: #fafbfc; }
.api-box2 .tip{ margin-top: 25px; position: relative; padding-left: 220px; font-size: 16px; line-height: 30px;}
.api-box2 .tip i{ position: absolute; top:0; left:0; color: #000; font-size: 20px; font-weight: bold;  font-style:normal;}
.api-box2 .tip span{ display: inline-block; margin: 0 16px; }

.api-help{ padding:60px 0 100px; background: #fff;}
.api-help li{ margin-top: 35px; float: left; width: 32%; margin-right: 2%;}
.api-help li:nth-child(3n){ margin-right: 0;}
.api-help li .box{ border: 1px solid #e3e5e9; border-radius:6px; overflow: hidden;}
.api-help li .box .img{ padding: 40px 10px; color: #FFFFFF; font-size: 22px; line-height: 30px; font-weight: bold; text-align: center;}
.api-help li .box .text{ padding: 30px 20px; min-height: 250px; font-size: 16px; line-height: 28px; color: #a4a4a4;}
.api-help li .box .text .p-tip{ text-indent: 20px; position:relative; }
.api-help li .box .text .p-tip:before{ content: ""; position: absolute; top:10px; left:5px; width: 10px; height: 10px; background: #49a621; border-radius: 100%; overflow: hidden;}
.api-help li:nth-child(2) .box .text .p-tip:before{ background: #31b4d0;} 
.api-help li:nth-child(3) .box .text .p-tip:before{ background: #1e72d2;} 
.api-bottom{ position: relative; text-align: center; background-size: cover; background-image: url(../images/api/api_footer_bg.jpg);}
.api-bottom .con{ padding: 70px 0 90px;  }
.api-bottom .api-tit{ color: #fff; }
.api-bottom a{ margin-top: 25px; display: inline-block; border: 1px solid #fff; font-size: 18px; color: #fff; padding: 10px 35px; border-radius:4px;}
.api-copyright{ position: absolute; bottom: 0; left:0; width: 100%; background:rgba(0,0,0,.2); color: #fff; padding: 10px; }


.api-solution{ padding:70px 0; }
.api-solution li{ margin-top: 30px; float: left; width: 50%; padding:0 9px;}
.api-solution li .box{ background: #fafbfc; border-radius: 5px; overflow: hidden;}
.api-solution li .box .img{ background: #f1f8ee; position: relative;}
.api-solution li .box .img img{ float: right; }
.api-solution li .box .img span{ position:absolute; top:30px; left:30px; font-size: 24px;font-weight: 600;color: #1D8820;line-height: 32px;}
.api-solution li .box .text{ padding: 30px;}
.api-solution li .box .text .con{ min-height: 320px; }
.api-solution li .box .text .tit{ margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #020A1A; }
.api-solution li .box .text .des{ margin-bottom: 20px; font-size: 14px; line-height: 20px; color: #8993a4;}
.api-solution li .box .text .button{ margin-top: 10px; display: inline-block; line-height: 40px; padding: 0 20px; border-radius: 4px; border: 1px solid #1976d2; color: #1976d2;}
.api-solution li .box .text .button:hover{ background: #1976d2; color: #fff; }
.api-solution li .box:hover{ transform:translateY(-4px);box-shadow:0 2px 8px 0 rgba(0,0,0,.15); }

@media (max-width:1540px){
	.api-banner { padding: 5% 0 4%;}
	.api-banner .text .des br{ display: none; }
	
	.api-point li div{ font-size: 20px;}
	.api-point li div span{ font-size:26px;}
	.api-point li p{ font-size: 16px; }
}


@media (max-width:1280px){
	.api-banner .text h1{ font-size: 32px;}
	.api-banner .text .des{ font-size: 14px; line-height: 26px;}
	.api-banner .text .button a{ width: 180px; font-size: 16px; line-height:50px;}
 
}


@media (max-width:999px){
	.api-tit{ font-size:0.5rem;}
	.api-banner{ padding:0.5rem 0; background-position:72%;}
	.api-banner .text{ width: 62%;}
	.api-banner .text h1{ font-size: 0.36rem;}
	.api-banner .text .des{ margin-top: 0.1rem; font-size: 0.2rem; line-height: 0.32rem;}
	.api-banner .text .des p{ margin-top: 0.05rem;}
	.api-banner .text .button a{ margin-top: 0.4rem; margin-right: 0.133333rem;  width: 2.6rem; line-height: 0.666666rem; font-size:0.22rem;}
	
	.api-point{ padding: 0.533333rem 0;}
	.api-point li:nth-child(1){ width: 52%; }
	.api-point li div{ font-size: 0.3rem;}
	.api-point li div span{ font-size: 0.36rem;}
	.api-point li p{ margin-top: 0.133333rem; font-size: 0.28rem;}


	.api-about{ padding: 1rem 0;}
	.api-about ul{ margin: 0; }
	.api-about li{ margin-top: 0.4rem; width:100%; padding: 0;}
	.api-about li .box{ padding: 30px 10px; }
	.api-about li .box img{ width: 2rem; }
	.api-about li .box h3{ margin-top: 0.3rem; font-size: 0.4rem; }
	.api-about li .box .des{ min-height: auto; }


	.api-box{ padding: 1rem 0; }
	.api-box .content{ max-width: 100%; display: block; }
	.api-box .img{ width:100%; }
	.api-box .img img{ width: 70%; }
	.api-box .text{ margin-top: 0.6rem; width: 100%; }
	.api-box .text .api-tit{ text-align: center; }
	.api-box .text .tit{ margin-top: 0.34rem; font-size: 0.36rem; }
	.api-box .text .con{ margin-top: 0.25rem; margin-bottom: 0.4rem; max-width: 100%;}
	.api-box .text .con span{ margin-bottom:0.2rem; margin-right:0.13rem; font-size: 0.32rem;  padding: 0 0.3rem; line-height: 0.6rem; border-radius: 0.15rem;}
	.api-box2 .tip{ margin-top: 0.34rem; padding-left:2.8rem; font-size: 0.32rem; line-height: 0.6rem;}
	.api-box2 .tip i{ font-size: 0.34rem;}
	.api-box2 .tip span{ margin: 0 0.2rem; }
	
	.api-help{  padding: 1rem 0;}
	.api-help li{ margin-top: 0.666666rem;  width: 100%; margin-right:0;}
	.api-help li .box .img{ padding:0.666666rem 0.266666rem; font-size: 0.38rem; line-height: 0.533333rem; }
	.api-help li .box .text{ padding:0.4rem; min-height: 0; font-size: 0.32rem; line-height: 0.6rem; }
	.api-help li .box .text .p-tip{ text-indent: 0.4rem; position:relative; }
	.api-help li .box .text .p-tip:before{ top:0.17rem; left:0rem; width: 0.26rem; height: 0.26rem;}
	.api-bottom .con{ padding:0.8rem 0 1.5rem;}
	.api-bottom a{ margin-top: 0.32rem;  font-size: 0.34rem; padding: 0.15rem 0.5rem; }

	.api-solution{ padding:1rem 0; }
	.api-solution li{ margin-top: 0.6rem; width: 100%; padding:0;}
	.api-solution li .box .img img{ height: 2rem; }
	.api-solution li .box .img span{ top:0.4rem; left:0.4rem; font-size: 0.42rem; line-height: 0.6rem;}
	.api-solution li .box .text{ padding:0.8rem 0.3rem; min-height: 0;}
	.api-solution li .box .text .tit{ margin-bottom: 0.3rem; font-size: 0.36rem; }
	.api-solution li .box .text .des{ margin-bottom: 0.3rem; font-size: 0.3rem; line-height: 0.6rem; }
	.api-solution li .box .text .button{ margin-top: 0.2rem; line-height: 0.8rem; padding: 0 0.3rem; font-size: 0.34rem;}


}