.sub_banner_wrapper {
  background: #F8F9FF;
}

.banner_img_box>img {
  transition: all 0.3s;
  opacity: 0;
}

.banner_img_box.fadeInActive>img {
  opacity: 1;
}

.banner_img_box>img:nth-child(2) {
  right: 180px;
  top: 100px;
  transition-delay: 0.3s;
}

.banner_img_box>img:nth-child(3) {
  top: 240px;
  right: -30px;
  transition-delay: 0.5s;
}

.banner_img_box>img:nth-child(4) {
  right: 150px;
  top: 60px;
  transition-delay: 0.8s;
}

.banner_img_box>img:nth-child(5) {
  right: 460px;
  top: 120px;
  transition-delay: 0.8s;
}

.banner_img_box>img:nth-child(6) {
  right: 400px;
  top: 380px;
  transition-delay: 0.8s;
}

.banner_img_box.fadeInActive>img:nth-child(2) {
  top: 40px;
}

.banner_img_box.fadeInActive>img:nth-child(3) {
  top: 200px;
}

.banner_img_box.fadeInActive>img:nth-child(4) {
  top: 30px;
}

.banner_img_box.fadeInActive>img:nth-child(5) {
  top: 90px;
}

.banner_img_box.fadeInActive>img:nth-child(6) {
  top: 350px;
}

.bg_content {
  border-radius: 40px;
  padding: 65px 10px;
  margin: 0 45px;
  margin-top: 65px;
  background: linear-gradient(90deg, #E5E2FF 0%, #FFEFEF 100%);
}

.cl_w_box {
  background: #FFFFFF;
  border-radius: 30px;
  padding: 35px;
  height: 445px;
  width: 49%;
  position: relative;
}

.cl_w_box .phone {
  position: absolute;
  right: 32px;
  top: 25px;
}

.cl_w_box .sub_title {
  font-size: 30px;
  line-height: 36px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

.gradient_bg {
  width: 112px;
  line-height: 36px;
  font-size: 20px;
  padding-left: 20px;
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  background: linear-gradient(90deg, #F13CC2 0%, rgba(241, 60, 194, 0.55) 61%, rgba(255, 255, 255, 0) 100%);
}

.gradient_bg.blue {
  background: linear-gradient(90deg, #006AFF 0%, rgba(66, 148, 255, 0.53) 69%, rgba(156, 205, 255, 0) 100%);
}

.sub_des {
  color: #646A73;
}

.dot {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  display: inline-block;
  border-radius: 50%;
  background: #F245C5;
  color: #fff;
  margin-right: 18px;
}

.dot.blue {
  background: #1376FF;
}

.content1012 {
  background: linear-gradient(#FAF7FF 0%, #FFFFFF 100%);
  padding-top: 50px;
}

.diff_box {
  height: 458px;
  background: #FFFFFF;
  border-radius: 30px;
  padding: 1px;
  position: relative;
}

.diff_box>.h60,
.diff_box>.h98 {
  display: flex;
  justify-content: space-between;
}

.greybg {
  background: #F5F7FA;
}

.h98 {
  height: 98px;
  line-height: 98px;
}

.h60 {
  height: 60px;
  line-height: 60px;
}

.flex_item {
  width: 240px;
  padding-left: 56px;
}

.flex_item>img {
  vertical-align: middle;
  margin-top: -2px;
  margin-left: 5px;
}

.flex1 {
  flex: 1;
}

.flex_title {
  font-size: 20px;
  font-weight: bold;
}

.greyTxt {
  color: #878787;
}

.phone_box {
  width: 255px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(139deg, #DDE7FE 0%, #E0DAFF 100%);
  border-radius: 39px;
  position: absolute;
  left: 336px;
  top: -15px;
}

.phone_content {
  background: #fff;
  overflow: hidden;
  border-radius: 30px;
  margin: 5px;
  color: #1376FF;
}

.wbg {
  background: #fff;
  width: 100%;
  border-radius: 30px;
}

.diff_btn {
  width: 80px;
  height: 32px;
  line-height: 32px;
  display: none;
  cursor: pointer;
  margin: 20px auto 10px auto;
  background: url("../images/1016/diff_btn.svg");
  text-align: center;
}

.phone_box:hover .diff_btn {
  display: block;
}

.cl_pro_item {
  width: 32.5%;
  height: 380px;
  padding: 130px 32px 0 32px;
  background: #F0FFF7;
  border-radius: 30px;
  border: 1px solid#77EEB2;
  position: relative;
  color: #646A73;
  font-size: 16px;
  line-height: 26px;
}

.cl_pro_icon {
  background: linear-gradient(315deg, #9CFAFF 0%, #29BF5D 100%);
  border: 5px solid #FFFFFF;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  top: -80px;
  margin-left: -80px;
  line-height: 150px;
  text-align: center;
}

.cl_pro_item .comma {
  position: absolute;
  right: 30px;
  top: 40px;
}

.cl_pro_icon>img {
  vertical-align: middle;
}

.cl_pro_item:nth-child(2) {
  border: 1px solid #71A9FF;
  background: #F2F7FF;
}

.cl_pro_item:nth-child(2) .cl_pro_icon {
  background: linear-gradient(315deg, #9CA0FF 0%, #61ADFF 100%);
}

.cl_pro_item:nth-child(3) {
  border: 1px solid #FFC478;
  background: #FFF8F1;
}

.cl_pro_item:nth-child(3) .cl_pro_icon {
  background: linear-gradient(315deg, #FF9C9C 0%, #FFDE61 100%);
}

.cl_pro_title {
  font-size: 24px;
  text-align: center;
  font-family: "PingFangSC-Medium";
}

.cl_scene_box {
  padding: 0 80px;
  padding-bottom: 20px;
}

.cl_scene_left {
  padding-right: 60px;
  padding-top: 60px;
  width: 35%;
}

.cl_scene_imgBox {
  width: 65%;
  height: 480px;
  background: linear-gradient(90deg, #f7f6ff 0%, #FFEFEF 100%);
  border-radius: 16px;
  text-align: center;
  position: relative;
}

.cl_scene_imgBox>div {
  padding: 24px 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
}

.cl_tab_box {
  padding-top: 30px;
}

.cl_tab_item {
  width: 108px;
  line-height: 40px;
  font-size: 16px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.cl_tab_item.cur {
  background: linear-gradient(90deg, #FF27B8 0%, #E3A1FF 100%);
  border-radius: 20px;
  color: #fff;
}

.cl_scene_msgBox {
  position: relative;
}

.cl_scene_msgBox>div {
  padding-top: 45px;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.cl_title {
  font-size: 36px;
  font-family: "PingFangSC-Medium";
}

.cl_sub_title {
  font-size: 18px;
  color: #646A73;
  padding-top: 40px;
  line-height: 28px;
}

@media screen and (max-width:1440px) {
  .bg_content {
    margin: 0;
    margin-top: 65px;
  }
}