.banner {
  width: 100%;
  height: 650px;
}
.banner .swiper {
  width: 100%;
  height: 100%;
}
.banner .swiper .swiper-slide {
  width: 100%;
  height: 100%;
}
.banner .swiper .swiper-slide .content {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
}
.banner .swiper .swiper-slide .content .coverInfo {
  height: 100%;
  position: relative;
  z-index: 10;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.banner .swiper .swiper-slide .content .coverInfo .title {
  font-size: 42px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}
.banner .swiper .swiper-slide .content .coverInfo .desc {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #EEEEEE;
  margin: 22px 0 55px;
  line-height: 1.5em;
}
.banner .swiper .swiper-slide .content .coverInfo .createBtn {
  width: 162px;
  height: 50px;
  background: #2673DD;
  font-size: 18px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.banner .swiper .swiper-slide .content .swiperImg {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  width: 100%;
  height: 100%;
}
.banner .swiper .swiper-pagination {
  left: unset;
  bottom: 40px;
  right: 0px !important;
  width: 300px;
}
.banner .swiper .swiper-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  opacity: 1;
}
.banner .swiper .swiper-pagination .swiper-pagination-bullet:last-child {
  margin-bottom: 0px;
}
.banner .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFFFFF;
  opacity: 1;
}
.banner .comNumber {
  height: 160px;
  background: #FFFFFF;
  box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 85px;
  position: relative;
  bottom: 80px;
  z-index: 10;
}
.banner .comNumber .item {
  text-align: center;
}
.banner .comNumber .item .num {
  font-size: 48px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  margin-bottom: 15px;
}
.banner .comNumber .item .num .iconfont {
  color: #037AFF;
}
.banner .comNumber .item .tips {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
}
.templateOne {
  width: 100%;
  height: 500px;
  margin: 130px 0 0;
}
.templateOne .contentBox {
  height: 100%;
  display: flex;
}
.templateOne .contentBox .left {
  width: 200px;
  height: 415px;
}
.templateOne .contentBox .left ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}
.templateOne .contentBox .left ul li {
  display: inline-block;
  margin: 0;
  cursor: pointer;
  color: #000;
  font-size: 20px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  position: relative;
  width: 100%;
  text-align: center;
}
.templateOne .contentBox .left ul li .row {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 23px;
  height: 3px;
  background: #CCCCCC;
}
.templateOne .contentBox .left ul li:hover,
.templateOne .contentBox .left ul li.active {
  color: #4590F7;
}
.templateOne .contentBox .left ul li.active .row {
  width: 45px;
  height: 5px;
  background: #4590F7;
}
.templateOne .contentBox .right {
  width: 960px;
  height: 500px;
  position: relative;
}
.templateOne .contentBox .right .swiper {
  width: 100%;
  height: 415px;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.16);
}
.templateOne .contentBox .right .swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 86px;
}
.templateOne .contentBox .right .swiper .swiper-slide .title {
  font-size: 22px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 1.5em;
}
.templateOne .contentBox .right .swiper .swiper-slide .desc {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 22px;
  line-height: 1.5em;
  letter-spacing: 1px;
}
.templateOne .contentBox .right .swiper .swiper-slide i.rowCss {
  display: block;
  width: 100px;
  height: 1px;
  margin: 30px 0 30px;
  background: #CCCCCC;
}
.templateOne .contentBox .right .swiper .swiper-slide .type p.smallTitle {
  font-size: 18px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 1.5em;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}
.templateOne .contentBox .right .swiper .swiper-slide .type p.smallTitle i.iconfont {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20px;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #333 transparent transparent transparent;
  transition: transform 0.3s ease;
}
.templateOne .contentBox .right .swiper .swiper-slide .type .typeContent {
  display: flex;
  flex-wrap: wrap;
}
.templateOne .contentBox .right .swiper .swiper-slide .type .typeContent.scend .item:nth-child(4) {
  margin-right: 300px;
}
.templateOne .contentBox .right .swiper .swiper-slide .type .typeContent .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 60px;
  margin-bottom: 8px;
}
.templateOne .contentBox .right .swiper .swiper-slide .type .typeContent .item img {
  width: 54px;
  height: 54px;
}
.templateOne .contentBox .right .swiper .swiper-slide .type .typeContent .item span {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 1.5em;
  letter-spacing: 1px;
}
.templateOne .contentBox .right .swiper_two_pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background-color: #fff;
  z-index: 10;
}
.templateOne .contentBox .right .swiper_two_pagination .two_pagination {
  width: auto;
}
.templateOne .contentBox .right .swiper_two_pagination .two_pagination .swiper-pagination-bullet {
  border-radius: 0;
  width: 30px;
  height: 5px;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.templateOne .contentBox .right .swiper_two_pagination .two_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #2673DD !important;
  border-radius: 0;
  opacity: 1;
}
.templateTwo {
  margin: 150px 0 0;
}
.templateTwo .contentBox {
  width: 100%;
}
.templateTwo .contentBox .fourSetup {
  width: 100%;
  display: flex;
  align-items: center;
  height: 826px;
}
.templateTwo .contentBox .fourSetup .left {
  width: 737px;
  height: 100%;
  margin-right: 140px;
  position: relative;
}
.templateTwo .contentBox .fourSetup .left .bgone {
  width: 737px;
  height: 826px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform: rotate(18deg);
}
.templateTwo .contentBox .fourSetup .left .center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0px;
  bottom: 0;
  margin: auto;
  z-index: 6;
  font-size: 0;
  width: 356px;
  height: 356px;
}
.templateTwo .contentBox .fourSetup .left .center img {
  width: 100%;
}
.templateTwo .contentBox .fourSetup .left .center i {
  display: inline-block;
  border-radius: 50%;
  /* 控制宽高相等 */
  width: 560px;
  height: 560px;
  position: absolute;
  top: -102px;
  right: 0;
  left: -10 2px;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  /* 添加背景颜色渐变效果 */
  background: linear-gradient(255deg, rgba(38, 115, 221, 0.1) 25%, rgba(255, 255, 255, 0) 90%);
  /* 添加扇形效果 */
  clip-path: polygon(0% 0%, 70% 0%, 50% 50%, 0% 50%);
}
.templateTwo .contentBox .fourSetup .left ul.point {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.templateTwo .contentBox .fourSetup .left ul.point li {
  width: 99px;
  height: 99px;
  background: linear-gradient(210deg, #77B0FF 0%, #BED5FF 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.templateTwo .contentBox .fourSetup .left ul.point li:hover {
  background: linear-gradient(210deg, #2673DD 0%, #7EADFF 100%);
}
.templateTwo .contentBox .fourSetup .left ul.point li.active {
  background: linear-gradient(210deg, #2673DD 0%, #7EADFF 100%);
  box-shadow: 0px 0px 20px 1px #2673DD;
}
.templateTwo .contentBox .fourSetup .left ul.point li .no {
  font-size: 28px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}
.templateTwo .contentBox .fourSetup .left ul.point li .tips {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.templateTwo .contentBox .fourSetup .left ul.point li:nth-child(1) {
  left: 350px;
  top: 16px;
}
.templateTwo .contentBox .fourSetup .left ul.point li:nth-child(2) {
  left: 526px;
  top: 140px;
}
.templateTwo .contentBox .fourSetup .left ul.point li:nth-child(3) {
  left: 600px;
  top: 353px;
}
.templateTwo .contentBox .fourSetup .left ul.point li:nth-child(4) {
  right: 125px;
  bottom: 158px;
}
.templateTwo .contentBox .fourSetup .right {
  width: 900px;
  height: 100%;
}
.templateTwo .contentBox .fourSetup .right ul.imgs {
  position: relative;
  width: 100%;
  height: 100%;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li.active {
  opacity: 1;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li div.img {
  border-radius: 13px 13px 13px 13px;
  border: 15px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-size: 0;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li img {
  width: 100%;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li p.tips {
  width: 699px;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 80px;
  text-align: center;
}
.templateTwo .contentBox .fourSetup .right ul.imgs li.active {
  display: flex;
}
.templateThree {
  margin: 170px 0 0;
  position: relative;
}
.templateThree div.top {
  width: 100%;
  height: 642px;
  background: url("../image/index/bannerbg.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
}
.templateThree div.top .templateHead {
  margin-top: 58px;
  margin-bottom: 40px;
}
.templateThree div.top .templateHead .bigTitle {
  color: #fff;
}
.templateThree div.top .templateHead .smallTitle {
  color: #999999;
}
.templateThree div.top ul.tablist {
  margin: auto;
  width: 1200px;
  height: 58px;
  font-size: 0;
  position: relative;
}
.templateThree div.top ul.tablist::before {
  position: absolute;
  content: "";
  width: 1450px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  top: -1px;
  left: -125px;
}
.templateThree div.top ul.tablist::after {
  position: absolute;
  content: "";
  width: 1450px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  bottom: -1px;
  left: -125px;
}
.templateThree div.top ul.tablist li {
  width: 200px;
  height: 58px;
  display: inline-block;
  text-align: center;
  line-height: 58px;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.templateThree div.top ul.tablist li.active {
  background: url('../image/index/activebg.png') no-repeat;
}
.templateThree .bottom {
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 10;
}
.templateThree .bottom .moudle {
  width: 100%;
  height: 110%;
  background: #ffffff;
  position: absolute;
  top: -20px;
  left: 0;
  z-index: 99;
}
.templateThree .bottom .moudle .tips {
  width: 100%;
  height: 100%;
  font-size: 36px;
  color: #055CFF;
}
.templateThree .bottom .moudle .tips .iconfont {
  font-size: 36px;
}
.templateThree .bottom .moudle.show {
  display: block !important;
}
.templateThree .bottom .swiperOuter {
  position: absolute;
  top: -300px;
  left: 0;
  right: 0;
  margin: auto;
  height: 600px;
  z-index: 15;
}
.templateThree .bottom .swiperOuter .iPhone {
  position: absolute;
  top: -54px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 276px;
  height: 581px;
  z-index: 10;
  overflow: hidden;
}
.templateThree .bottom .swiperOuter #swiper_three {
  position: relative;
  width: 1026px;
  overflow: hidden;
}
.templateThree .bottom .swiperOuter #swiper_three .swiper-slide {
  width: 257px;
  height: 550px;
  text-align: center;
}
.templateThree .bottom .swiperOuter #swiper_three .swiper-slide img {
  width: 257px;
  height: 550px;
  border-radius: 12px;
}
.useFeedback {
  height: 500px;
  padding: 200px 0;
}
.useFeedback .contentBox {
  display: flex;
}
.useFeedback .contentBox .left {
  width: 750px;
  height: 500px;
  background: #FFFFFF;
  box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 60px 90px 60px 60px;
}
.useFeedback .contentBox .left div.item {
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC;
}
.useFeedback .contentBox .left div.item .title {
  font-weight: 500;
  color: #000000;
  margin-bottom: 20px;
}
.useFeedback .contentBox .left div.item .content {
  font-weight: 400;
  color: #999999;
  line-height: 1.5em;
}
.useFeedback .contentBox .left i {
  display: inline-block;
  width: 72px;
  height: 5px;
  background: #2673DD;
  margin: 25px 0;
}
.useFeedback .contentBox .right {
  flex: 1;
  box-sizing: border-box;
  padding-left: 70px;
}
.useFeedback .contentBox .right .title {
  font-size: 30px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  margin-top: 59px;
}
.useFeedback .contentBox .right .desc {
  margin: 57px 0 50px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
}
.useFeedback .contentBox .right .comNumber {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.useFeedback .contentBox .right .comNumber div.item {
  text-align: center;
}
.useFeedback .contentBox .right .comNumber div.item .number {
  font-size: 32px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 1.5em;
}
.useFeedback .contentBox .right .comNumber div.item .tips {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
}
.useFeedback .contentBox .right .creatBtn {
  font-size: 18px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2673DD;
  cursor: pointer;
}
.userGroup {
  margin-bottom: 100px;
}
.userGroup .contentBox .userList {
  margin-top: 40px;
}
.userGroup .contentBox .userList .item {
  font-size: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.userGroup .contentBox .userList .item:nth-child(2) {
  transform: translateX(108px);
}
.userGroup .contentBox .userList .item:last-child {
  transform: translateX(-108px);
  margin-bottom: 0;
}