@charset "utf-8";
* {
  font-family: "微软雅黑", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.banner {
  width: 100%;
  min-width: 1200px;
  height: 520px;
  background-image: url("../img/cases-banner.jpg");
  background-position: top center;
  text-align: center;
  padding-top: 188px;
}
.banner h1 {
  height: 48px;
  font-size: 48px;
  line-height: 48px;
  color: #fff;
  margin: 0 0 24px;
}
.banner p {
  width: 942px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
}
.main {
  width: 100%;
  margin: 0 auto;
}
.main .cases-list-container {
  min-width: 1200px;
  height: 126px;
  background: #fff;
  box-shadow: 0px 3px 10px rgba(68, 157, 242, 0.53);
  position: relative;
}
.main .cases-list-container .cases-list-center {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.main .cases-list-container .cases-list-center .arrow {
  display: block;
  width: 75px;
  height: 126px;
  float: left;
  text-align: center;
  line-height: 126px;
}
.main .cases-list-container .cases-list-center .arrow img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
}
.main .cases-list-container .cases-list-center .caseslists {
  width: 1050px;
  height: 126px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.main .cases-list-container .cases-list-center .caseslists ul {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 126px;
}
.main .cases-list-container .cases-list-center .caseslists ul li {
  float: left;
  width: 150px;
  height: 126px;
  padding: 20px 0;
  text-align: center;
}
.main .cases-list-container .cases-list-center .caseslists ul li.checked span {
  color: #449df2;
}
.main .cases-list-container .cases-list-center .caseslists ul li img {
  display: block;
  width: 55px;
  height: 60px;
  margin: 0 auto 8px;
  cursor: pointer;
}
.main .cases-list-container .cases-list-center .caseslists ul li span {
  cursor: pointer;
}
.main .cases-list-container .cases-list-center .caseslists ul li span:hover {
  color: #449df2;
}
.main .cases-content-container {
  min-width: 1200px;
}
.main .cases-content-container .cases-child {
  display: none;
}
.main .cases-content-container .cases-child.active {
  display: block;
}
.main .cases-content-container .cases-child .contact {
  margin-bottom: 100px;
  text-align: center;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
  color: #666;
}
.main .cases-content-container .cases-child .contact a {
  font-size: 18px;
  color: #449df2;
}
.main .cases-content-container .cases-child .cases-child-box {
  padding: 70px 0 120px;
  text-align: center;
}
.main .cases-content-container .cases-child .cases-child-box h2 {
  height: 36px;
  font-size: 36px;
  line-height: 36px;
  color: #000;
  margin: 0 0 70px;
  padding: 0;
}
.main .cases-content-container .cases-child .cases-child-box .cases-child-center {
  width: 1200px;
  margin: 0 auto;
}
.main .cases-content-container .cases-child .cases-child-detail {
  background: #f4f6fb;
}
.main .cases-content-container .cases-child .cases-child-detail .leftBar {
  width: 754px;
  height: 500px;
  box-shadow: 0 3px 10px rgba(68, 157, 242, 0.53);
  float: left;
  margin-right: 92px;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar {
  float: right;
  text-align: left;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .title {
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  color: #333;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .content {
  width: 354px;
  font-size: 14px;
  line-height: 27px;
  color: #666;
  letter-spacing: 0px;
  margin: 0;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy {
  margin-top: 29px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  color: #333;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list {
  width: 354px;
  margin: 0;
  padding: 0;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list li {
  float: left;
  margin-top: 16px;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list li img {
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  box-shadow: 0 3px 10px rgba(68, 157, 242, 0.53);
  margin-right: 26px;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list li span {
  display: inline-block;
  height: 46px;
  font-size: 16px;
  line-height: 46px;
  color: #333;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list li.long-li {
  width: 208px;
}
.main .cases-content-container .cases-child .cases-child-detail .rightBar .yyhy-list li.short-li {
  width: 146px;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center {
  position: relative;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .title {
  position: absolute;
  top: 0;
  left: 30px;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  color: #0060ff;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .changebox {
  position: absolute;
  bottom: 0px;
  left: 30px;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .changebox img {
  padding: 0;
  width: 23px;
  height: 19px;
  margin-right: 40px;
  cursor: pointer;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .changebox span {
  display: inline-block;
  color: #777;
  font-size: 20px;
  cursor: pointer;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .changebox span:hover {
  color: #0060ff;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .changebox span:nth-child(1) {
  margin-right: 40px;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-active {
  display: block!important;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child {
  display: none;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child .leftBar {
  width: 448px;
  padding-left: 30px;
  text-align: left;
  float: left;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child .leftBar .title-black {
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  margin: 110px 0 0;
  letter-spacing: 0px;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child .leftBar i {
  display: block;
  margin: 30px 0;
  width: 50px;
  height: 2px;
  background: #0060ff;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child .leftBar span {
  display: block;
  width: 320px;
  font-size: 14px;
  line-height: 27px;
  color: #666;
}
.main .cases-content-container .cases-child .cases-child-advan .cases-child-center .advan-child .rightBar {
  width: 750px;
  height: 460px;
  float: right;
  box-shadow: 0 3px 10px 0px rgba(68, 157, 242, 0.53);
}
.main .cases-content-container .cases-child .cases-child-usedapi {
  background: #f4f6fb;
}
.main .cases-content-container .cases-child .cases-child-usedapi h2 {
  margin-bottom: 30px;
}
.main .cases-content-container .cases-child .cases-child-usedapi span {
  display: block;
  font-size: 16px;
  line-height: 27px;
  color: #000;
  letter-spacing: 0px;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis {
  width: 1165px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(68, 157, 242, 0.53);
  margin: 55px auto 22px;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li {
  float: left;
  width: 582px;
  padding: 33px 30px 33px 33px;
  border-bottom: 1px dashed #f5f5f5;
  overflow: hidden;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li:nth-child(odd) {
  border-right: 1px dashed #f5f5f5;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li img {
  display: block;
  float: left;
  width: 90px;
  height: 90px;
  margin-right: 33px;
  border-radius: 45px;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li div {
  float: left;
  text-align: left;
  width: 395px;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li div a {
  display: block;
  margin-top: 11px;
  margin-bottom: 7px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  color: #0060ff;
}
.main .cases-content-container .cases-child .cases-child-usedapi .apis ul li div span {
  font-size: 14px;
  line-height: 24px;
  color: #666;
}
.main .cases-content-container .cases-child .cases-child-usedapi .showMore {
  display: block;
  width: 150px;
  height: 45px;
  margin: 30px auto 0;
  border-radius: 23px;
  background: #0060ff;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  line-height: 45px;
  box-shadow: 2px 4px 6px rgba(18, 59, 208, 0.36);
}
.main .cases-content-container .cases-child .cases-child-usedapi .showMore:hover {
  background: #096dd9;
}
.main .cases-content-container .cases-child .cases-child-success h2 {
  margin-bottom: 80px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center {
  width: 900px;
  height: 350px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 10px 0 rgba(68, 157, 242, 0.53);
  margin: 0 auto;
  position: relative;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .success-arrow {
  display: inline-block;
  position: absolute;
  top: 137px;
  cursor: pointer;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .success-arrow-prev {
  left: -136px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .success-arrow-next {
  right: -136px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases {
  position: relative;
  height: 100%;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases > show {
  display: block;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-caseschild {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 350px;
  overflow: hidden;
  display: none;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-img {
  display: block;
  float: left;
  width: 370px;
  height: 350px;
  line-height: 350px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-img img {
  width: 250px;
  height: 100px;
  vertical-align: middle;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text {
  display: block;
  float: right;
  width: calc(100% - 370px);
  padding-right: 50px;
  text-align: left;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text .s-text-title {
  font-size: 24px;
  height: 24px;
  line-height: 24px;
  color: #000;
  padding: 0;
  margin: 46px 0 40px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text .s-text-content {
  padding: 0 22px;
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: #666;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text span {
  display: block;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text span.top-yin {
  margin-bottom: 11px;
}
.main .cases-content-container .cases-child .cases-child-success .cases-success-center .successcases .s-text span.bottom-yin {
  margin-top: 11px;
  margin-left: 456px;
}