.container .client-banner {
  margin-top: 64px;
  width: 100%;
  height: 360px;
  background-color: #F9FBFF;
}
.container .client-banner .banner {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container .client-banner .banner h2 {
  /* width: 953px; */
  height: 65px;
  font-size: 38px;
  color: #1d2831;
  line-height: 53px;
  margin: 70px 0 12px;
}
.container .client-banner .banner h2 span {
  position: relative;
  /* font-weight: bold; */
  color: #1A5AD8;
  padding-right: 16px;
  font-size: 46px;
  top: 4px;
  width: 182px;
  height: 50px;
  display: inline-block;
}
.container .client-banner .banner h2 .two {
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 52px;
}
.container .client-banner .banner h2 .two i {
  position: absolute;
  left: 152px;
  top: -3px;
  font-size: 44px;
  /* font-weight: 600; */
}
.container .client-banner .banner h2 .one {
  visibility: hidden;
}
.container .client-banner .banner p {
  font-size: 16px;
  color: #999;
  line-height: 22px;
  margin-bottom: 17px;
  font-weight: 400;
}
.container .client-banner .banner > div {
  width: 100%;
  height: 180px;
  background: url(../img/client/案例bg\ 元素@2x.png) center center no-repeat;
  background-size: contain;
}
.container .client-banner .banner > div > div {
  cursor: pointer;
  margin: 40px auto 0;
  width: 160px;
  height: 50px;
  letter-spacing: 1px;
  /* font-weight: 600; */
  background: linear-gradient(270deg, #ff9783 0%, #ff613d 100%);
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  font-family: Apple System, "SF Pro SC", "SF Pro Display", "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", sans-serif;
  transition: 0.3s all linear;
}
.container .client-banner .banner > div > div:hover {
  box-shadow:0px 12px 22px -4px rgba(234,47,0,0.44);
}
.container .brand-container {
  width: 100%;
  height: 450px;
}
.container .brand-container .brand-banners {
  box-sizing: border-box;
  padding-top: 80px;
  display: flex;
  align-items: center;
}
.container .brand-container .banner-list {
  width: 100%;
  height: 270px;
  box-sizing: border-box;
  padding-top: 10px;
  position: relative;
}
.container .brand-container .banner-list li {
  box-sizing: border-box;
  position: absolute;
  background-color: #fff;
  width: 400px;
  height: 248px;
  cursor: pointer;
  transition: transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
  box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.12);;
  padding: 32px 25px 0 25px;
  transform-origin: 0 50%;
  border-radius: 6px;
}

.container .brand-container .banner-list li.li0 {
  transform: translate(0, 5px) scale( 0.7);
  box-shadow:0px 3px 12px 0px rgba(0,0,0,0.06);
  z-index: 3;
}
.container .brand-container .banner-list li.li0 img,.container .brand-container .banner-list li.li4 img {
  opacity: 0.5;
}
.container .brand-container .banner-list li.li0 .name,.container .brand-container .banner-list li.li0 .title,.container .brand-container .banner-list li.li4 .name,.container .brand-container .banner-list li.li4 .title  {
  color: #aaa;
}
.container .brand-container .banner-list li.li1 .name,.container .brand-container .banner-list li.li1 .title,.container .brand-container .banner-list li.li3 .name,.container .brand-container .banner-list li.li3 .title  {
  /* color: #888; */
}
.container .brand-container .banner-list li.li1 img,.container .brand-container .banner-list li.li3 img {
  opacity: 0.7;
}

.container .brand-container .banner-list li.li1 {
  transform: translate(140px, 5px) scale( 0.85);
  z-index: 7;
  box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08);
}
.container .brand-container .banner-list li.li2 {
  transform: translateX(340px);
  z-index: 10;
  transform-origin: center;
}
.container .brand-container .banner-list li.li2 .person {
  /* width: 240px; */
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #1A5AD8;
  line-height: 48px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .brand-container .banner-list li.li3 {
  z-index: 7;
  transform: translate(600px, 5px) scale( 0.85);
  transform-origin: 0 50%;
  box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08);
}
.container .brand-container .banner-list li.li4 {
  transform: translate(800px, 5px) scale( 0.7);
  z-index: 3;
  transform-origin: 0 50%;
  box-shadow:0px 3px 12px 0px rgba(0,0,0,0.06);
}
.container .brand-container .banner-list li.li5 {
  transform: translate(700px, 5px) scale( 0.7);
  box-shadow: none;
  z-index: 1;
  transform-origin: 0 50%;
  box-shadow:0px 2px 8px 0px rgba(0,0,0,0.04);
}
.container .brand-container .banner-list .li6,.li7,.li8 {
  transform: translate(340px, 5px) scale( 0.56);
  box-shadow: none;
  z-index: 1;
}
.container .brand-container .banner-list li.li9 {
  transform: translate(100px, 5px) scale( 0.56);
  box-shadow:0px 2px 8px 0px rgba(0,0,0,0.04);
  z-index: 1;
}
.container .brand-container .banner-list li .title {
  /* width:340px; */
  /* height:56px; */
  font-size:14px;
  color:#333;
  line-height:28px;
  text-align: center;
}
.container .brand-container .banner-list li .name {
  /* position: absolute; */
  width: 353px;
  text-align: center;
  font-size:16px;
  font-weight:600;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-bottom: 16px;
  /* left: 50%; */
  /* transform: translateX(-50%); */
}
.container .brand-container .banner-list li .person {
  width: 100%;
  text-align: center;
  height: 48px;
  line-height: 48px;
  /* position: absolute; */
  margin-bottom: 20px;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  color: #C6C6C6;
  font-size: 18px;
  font-weight: 600;
}
.container .brand-container .banner-list li .img-wrapper {
  /* position: absolute; */
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  /* bottom: 38px; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
}
.container .brand-container .banner-list li .img-wrapper img {
  width: 350px;
  height: 48px;
}