@font-face {
  font-family: "iconfont_echola"; /* Project id 4383290 */
  src: url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.eot?t=1709632355603'); /* IE9 */
  src: url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.eot?t=1709632355603#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.woff2?t=1709632355603') format('woff2'),
       url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.woff?t=1709632355603') format('woff'),
       url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.ttf?t=1709632355603') format('truetype'),
       url('//at.alicdn.com/t/c/font_4383290_lhc02bni0n.svg?t=1709632355603#iconfont_echola') format('svg');
}

.iconfont_echola {
  font-family: "iconfont_echola" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-kefu:before {
  content: "\e65a";
}

.icon-el-custom-download:before {
  content: "\e611";
}

.icon-a-dianchi2:before {
  content: "\e758";
}

.icon-a-dianchi3:before {
  content: "\e756";
}

.icon-a-dianchi4:before {
  content: "\e755";
}

.icon-quanbu:before {
  content: "\e650";
}

.icon-dizhi:before {
  content: "\e63e";
}

.icon-wenjianjia:before {
  content: "\e610";
}

.icon-wenjian:before {
  content: "\e61d";
}

.icon-Vector:before {
  content: "\e60f";
}

.icon-Excel:before {
  content: "\e601";
}

.icon-Word:before {
  content: "\e602";
}

.icon-PPT:before {
  content: "\e605";
}

.icon-music:before {
  content: "\e607";
}

.icon-shipin:before {
  content: "\e609";
}

.icon-tupian:before {
  content: "\e60b";
}

.icon-Gif:before {
  content: "\e60c";
}

.icon-Pdf:before {
  content: "\e60e";
}

.icon-zip:before {
  content: "\e76e";
}

.icon-a-83duoyuyan:before {
  content: "\e676";
}

.icon-close:before {
  content: "\e643";
}

.icon-jiahao:before {
  content: "\e726";
}

.icon-jianqu:before {
  content: "\e604";
}

.icon-yunxiazai:before {
  content: "\e72e";
}

.icon-youbian:before {
  content: "\e615";
}

.icon-productIcon:before {
  content: "\e606";
}

.icon-tuite:before {
  content: "\ee49";
}

.icon-liulan:before {
  content: "\e6c6";
}

.icon-riqi:before {
  content: "\e642";
}

.icon-search:before {
  content: "\e60a";
}

.icon-arrowLeft:before {
  content: "\e65d";
}

.icon-arrowRight:before {
  content: "\e65e";
}

.icon-ins:before {
  content: "\e664";
}

.icon-facebook:before {
  content: "\eb8d";
}

.icon-xiangxia1:before {
  content: "\e603";
}

.icon-xiangxia:before {
  content: "\e66e";
}

.icon-menu:before {
  content: "\e626";
}

.icon-phone:before {
  content: "\e608";
}

.icon-youxiang:before {
  content: "\e60d";
}


.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-top: 30px;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  border: 2px solid #637381;
  border-radius: 6px;
  cursor: pointer;
}

.pagination a span {
  color: #1c1f35;
  font-weight: 500;
  font-size: 18px;
  transition: all .3s;
}

.pagination a.pagePrev:hover span {
  transform: translateX(-8px);
}

.pagination a.pageNext:hover span {
  transform: translateX(8px);
}

.pagination .pageNumberText {
  font-size: 20px;
  color: #637381;
}

.line1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.line5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.line6 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.line7 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.line7 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.line9 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
}

.mobileMenu {
	display: none;
}

.div {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  /* height: 6630px; */
  position: relative;
}

.overlap {
  position: relative;
  width: 100%;
}

.follow {
  top: 334px;
  left: 379px;
  position: absolute;
  width: 120px;
  height: 22px;
}

.group {
  width: 100%;
}

.overlap-group {
  position: relative;
  width: 100%;
  height: 284px;
  background-color: #091242;
	padding-top: 40px;
}

.footerPageMax {
	width: 1200px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.group-2 {
  width: 253px;
  height: 129px;
	position: relative;
  display: flex;
  gap: 34px;
}

.group-3 {
  position: relative;
  width: 102px;
  height: 129px;
  text-align: center;
}

.mask-group-wrapper {
  width: 100px;
  height: 100px;
}

.mask-group {
  position: relative;
  height: 100px;
  background-color: var(--x-6);
}

.rectangle {
  position: absolute;
  width: 79px;
  height: 79px;
  top: 10px;
  left: 10px;
}

.text-wrapper {
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.96px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  margin-top: 10px;
}

.group-4 {
  position: absolute;
  width: 135px;
  height: 129px;
  top: 0;
  left: 0;
}

.text-wrapper-2 {
  position: absolute;
  top: 109px;
  left: 0;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.96px;
  line-height: 20px;
  white-space: nowrap;
}

.rectangle-wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 16px;
  background-color: var(--x-6);
}

.img {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 10px;
  left: 10px;
}

.copyright {
  position: relative;
  width: 100%;
  height: 55px;
	margin-top: 58px;
}

.line {
  position: absolute;
  width: 100%;
  height: 1px;
  top: -1px;
  left: 0;
  object-fit: cover;
}

.copyright-wrapper {
  display: flex;
  width: 1200px;
	margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 238px;
  position: relative;
	padding-top: 10px;
}

.span-wrapper {
  position: relative;
  margin-top: -1px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 40px;
  white-space: nowrap;
}

.span-wrapper a {
  color: #ffffff;
}

.span {
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 40px;
}

.follow-2 {
  position: relative;
  width: 120px;
  height: 22px;
	margin-left: 20px;
}

.logo {
  position: relative;
  width: 171px;
  height: 31px;
	margin-bottom: 40px;
}

.group-5 {
  position: relative;
  height: 31px;
}

.wechatimg {
  position: absolute;
  width: 159px;
  height: 31px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.image {
  position: absolute;
  width: 106px;
  height: 19px;
  top: 17px;
  left: 65px;
}

.image-2 {
  position: relative;
  width: 100%;
  height: 412px;
	vertical-align: bottom;
}

.contact {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 143px 360px;
	position: relative;
  background-color: #ffffff;
}

.content {
  display: flex;
  flex-direction: column;
  width: 1200px;
  align-items: center;
  gap: 70px;
  position: relative;
  flex: 0 0 auto;
}

.form {
  display: flex;
  width: 1199px;
  align-items: flex-start;
  gap: 88px;
  position: relative;
  flex: 0 0 auto;
}

.content-2 {
  display: flex;
  flex-direction: column;
  width: 153px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.text {
  display: flex;
  flex-direction: column;
  width: 153px;
  align-items: flex-start;
  gap: 3px;
  position: relative;
  flex: 0 0 auto;
}

.title {
  flex-direction: column;
  width: 343px;
  align-items: flex-start;
  gap: 13px;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.text-wrapper-3 {
  width: 343px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: var(--x-32-ya-LG);
  font-size: 35px;
  position: relative;
  margin-top: -1px;
  letter-spacing: 0;
  line-height: normal;
}

.p {
  position: relative;
  width: 153px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--gab-6-av);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
}

.content-3 {
  display: flex;
  flex-direction: column;
  width: 256px;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  flex: 0 0 auto;
}

.mail {
  display: flex;
  width: 227px;
  align-items: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.icon {
  position: relative;
  width: 63px;
  height: 63px;
  background-color: #0555a4;
  border-radius: 31.5px;
}

.vector-wrapper {
  position: relative;
  width: 21px;
  height: 16px;
  top: 22px;
  left: 22px;
  background-image: url(../img/vector-54.svg);
  background-size: 100% 100%;
}

.vector {
  position: absolute;
  width: 21px;
  height: 8px;
  top: 0;
  left: 0;
}

.email-contact {
  position: relative;
  width: fit-content;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--x-32-ya-LG);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18.9px;
}

.call {
  display: flex;
  /* width: 184px; */
  align-items: center;
  gap: 14px;
  position: relative;
  flex: 0 0 auto;
}

.vector-2 {
  position: absolute;
  width: 19px;
  height: 18px;
  top: 22px;
  left: 22px;
}

.call-us {
  position: relative;
  /* width: 107px; */
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--x-32-ya-LG);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18.9px;
}

.time {
  display: flex;
  width: 256px;
  align-items: center;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.img-wrapper {
  position: relative;
  width: 23px;
  height: 23px;
  top: 20px;
  left: 20px;
  background-image: url(../img/vector-51.svg);
  background-size: 100% 100%;
}

.vector-3 {
  position: absolute;
  width: 6px;
  height: 13px;
  top: 2px;
  left: 11px;
}

.mon-sat {
  position: relative;
  width: 176px;
  height: 40px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--x-32-ya-LG);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18.9px;
}

.form-wrapper {
  position: relative;
  width: 758px;
  height: 468px;
}

.form-2 {
  display: flex;
  flex-direction: column;
  width: 758px;
  align-items: flex-start;
  gap: 31px;
  position: relative;
  top: 42px;
}

.element {
  display: flex;
  width: 758px;
  align-items: flex-start;
  gap: 28px;
  position: relative;
  flex: 0 0 auto;
}

.overlap-group-wrapper {
  position: relative;
  width: 367px;
  height: 60px;
}

.div-wrapper {
  position: relative;
  width: 365px;
  height: 60px;
  border: 1px solid;
  border-color: #4d5682;
  font-size: 20px;
  padding: 0 20px;
}

.text-wrapper-4 {
  left: 29px;
  position: absolute;
  top: 20px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: var(--gab-6-av);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.overlap-wrapper {
  position: relative;
  width: 367px;
  height: 60px;
  margin-right: -2px;
}

.text-wrapper-5 {
  position: absolute;
  top: 20px;
  left: 28px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: var(--gab-6-av);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.element-2 {
  display: flex;
  flex-direction: column;
  width: 758px;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  flex: 0 0 auto;
}

.message {
  position: relative;
  width: 760px;
  height: 154px;
  margin-right: -2px;
}

.overlap-group-2 {
  position: relative;
  width: 758px;
  height: 154px;
  border: 1px solid;
  border-color: #4d5682;
  font-size: 20px;
  padding: 20px;
}

.text-wrapper-6 {
  left: 23px;
  position: absolute;
  top: 20px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: var(--gab-6-av);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 34px;
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgb(0, 76, 151) 0%, rgb(33, 142, 243) 100%);
  /* all: unset; */
  box-sizing: border-box;
	border: none;
  cursor: pointer;
}

.text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: var(--x-6);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.project {
  position: relative;
  width: 100%;
  background: linear-gradient(0deg, #335AA7 50%, transparent 0%);
}

.overlap-2 {
  position: relative;
  width: 100%;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
	margin: 0 auto;
}

.content-4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 35px;
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 40px;
}

.heading {
  position: relative;
  width: auto;
  height: 49px;
}

.text-wrapper-8 {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  font-family: "PingFang SC-Semibold", Helvetica;
  color: #1c1f35;
  font-size: 35px;
  text-align: center;
  line-height: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.image-3 {
  display: flex;
	width: 100%;
  max-width: 1672px;
  position: relative;
	gap: 18px;
}

.interfaceItem {
  position: relative;
  width: 190px;
  height: 407.92px;
  display: block;
  transition: all .5s;
  border-radius: 4px;
  overflow: hidden;
}

.interfaceItem.active {
  width: 356px;
}

.interfaceItem .mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 115%);
  z-index: 0;
}

.interfaceItem img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.interfaceItem .textBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 4px;
  position: absolute;
  bottom: 20px;
  z-index: 1;
  padding: 0px 20px;
}

.interfaceItem .textWrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
}

.interfaceItem .textWrapperDrantion {
  position: relative;
  width: fit-content;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--b-5);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
}

.element-4 {
  position: relative;
  width: 320.17px;
  height: 407.92px;
  background-image: url(../img/1-3.png);
  background-size: 100% 100%;
}

.text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-right: -34px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: var(--b-5);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
}

.element-5 {
  position: relative;
  width: 320.17px;
  height: 407.92px;
  background-image: url(../img/1-2.png);
  background-size: 100% 100%;
}

.element-6 {
  position: relative;
  width: 320.17px;
  height: 407.92px;
  background-image: url(../img/1-1.png);
  background-size: 100% 100%;
}

.element-7 {
  position: relative;
  width: 320.17px;
  height: 407.92px;
  background-image: url(../img/1.png);
  background-size: 100% 100%;
}

.group-6 {
  width: 100%;
	position: relative;
	margin-top: 100px;
	margin-bottom: 100px;
}

.groupPageMax {
	max-width: 1200px;
	margin: 0 auto;
}

.testimonial {
  display: flex;
  flex-direction: column;
  width: 1200px;
  align-items: center;
  gap: 40px;
}

.title-wrapper {
  width: 1200px;
  align-items: flex-end;
  gap: 699px;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.title-2 {
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 13px;
  display: flex;
  position: relative;
}

.sub-text {
  position: relative;
  width: auto;
  height: 26px;
  display: flex;
  align-items: center;
}

.div-2 {
  width: 4px;
  height: 23px;
  background: linear-gradient(180deg, rgb(0, 76, 151) 0%, rgb(33, 142, 243) 100%);
}

.text-3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 9px;
  background-color: #e7e7e780;
}

.text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-13 {
  position: relative;
  width: 100%;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 28px;
  line-height: 38px;
}

.user {
  width: 1200px;
  display: flex;
	flex-wrap: wrap;
  gap: 20px;
}

.review-wrapper {
  display: flex;
  width: 590px;
  gap: 20px;
  padding: 40px 0 40px 30px;
  background-color: #f4f4f4;
  overflow: hidden;
  cursor: pointer;
}

.review-wrapper .left {
  width: 170px;
  position: relative;
}

.review-wrapper .left .moreBtn {
  border: 1px solid #335AA7;
  padding: 4px 12px;
  display: inline-block;
  border-radius: 20px;
  font-size: 14px;
  line-height: 19.6px;
  color: #335AA7;
  position: absolute;
  bottom: 0;
  transition: all .5s;
}

.review-wrapper .left .moreBtn:hover {
  background: #335AA7;
  color: #ffffff;
}

.review-wrapper .left .title {
  color: #091242;
  font-size: 24px;
  font-weight: 900;
  line-height: normal;
  margin-bottom: 24px;
  width: 100%;
}

.review-wrapper .left .subtitle {
  color: #A3B0C6;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.review-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .5s;
}

.review-wrapper .imageBox {
  flex: 1;
  min-width: 0;
  height: 232px;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}

.review-wrapper:hover img {
  transform: scale(1.1);
}

.review {
  display: flex;
  flex-direction: column;
  width: 456px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.user-2 {
  display: flex;
  width: 455.85px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.user-3 {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  position: relative;
}

.user-4 {
  position: relative;
  width: 91px;
  height: 91px;
  border-radius: 50%;
}

.name {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 2px;
  position: relative;
}

.text-wrapper-14 {
  font-weight: 400;
  color: #091242;
  font-size: 20px;
  position: relative;
  margin-top: -1px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-15 {
  position: relative;
  margin-right: -14px;
  font-weight: 400;
  color: #091242;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
}

.image-wrapper {
  position: relative;
  width: 72.85px;
  height: 72.85px;
  border-radius: 36.43px;
  background: linear-gradient(180deg, rgb(0, 76, 151) 0%, rgb(33, 142, 243) 100%);
}

.image-4 {
  position: absolute;
  width: 32px;
  height: 21px;
  top: 26px;
  left: 22px;
}

.text-4 {
  display: flex;
  flex-direction: column;
  width: 456px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.text-wrapper-16 {
  position: relative;
  width: 456px;
  margin-top: -1px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #666b89;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star {
  position: relative;
  width: 180px;
  height: 34px;
}

.star-2 {
  position: absolute;
  width: 28px;
  height: 27px;
  top: 2px;
  left: 3px;
}

.star-3 {
  position: absolute;
  width: 28px;
  height: 27px;
  top: 2px;
  left: 40px;
}

.star-4 {
  position: absolute;
  width: 28px;
  height: 27px;
  top: 2px;
  left: 76px;
}

.star-5 {
  position: absolute;
  width: 28px;
  height: 27px;
  top: 2px;
  left: 112px;
}

.star-6 {
  position: absolute;
  width: 28px;
  height: 27px;
  top: 2px;
  left: 149px;
}

.element-8 {
  display: flex;
  flex-direction: column;
  width: 600px;
  align-items: flex-start;
  gap: 10px;
  padding: 62px 72px;
  position: relative;
  background-color: #091242;
}

.text-wrapper-17 {
  width: fit-content;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  position: relative;
  margin-top: -1px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-18 {
  position: relative;
  width: fit-content;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
}

.text-wrapper-19 {
  position: relative;
  width: 456px;
  margin-top: -1px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
}

.user-5 {
  display: flex;
  width: 1200px;
  align-items: flex-start;
}

.text-wrapper-20 {
  position: relative;
  width: fit-content;
  margin-right: -21px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
}

.text-wrapper-21 {
  position: relative;
  width: fit-content;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #091242;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
  white-space: nowrap;
}

.text-wrapper-22 {
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 35px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
	margin-bottom: 50px;
}

.performance {
	width: 100%;
	height: 897px;
	background: url(https://file-echola.oss-cn-hangzhou.aliyuncs.com/webManage/image/performanceBg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	padding-top: 40px;
}

.performance .pageMax {
	max-width: 1672px;
	margin: 0 auto;
	flex-direction: column;
}

.performance .pageMax .pageTitle {
	text-align: center;
	width: 100%;
	font-size: 35px;
	font-weight: 600;
	line-height: 49px;
	color: #000000;
	margin-bottom: 50px;
}

.pagePerFlex {
	display: flex;
	width: 100%;
	gap: 82px;
}

.group-7 {
	position: relative;
  width: 100%;
	height: 900px;
}

.overlap-3 {
  position: relative;
  width: 100%;
  height: 100%;
}

.why-choose-us-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.why-choose-us {
  height: 100%;
}

.overlap-4 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f9fc;
	display: flex;
}

.overlap-5 {
  position: relative;
  width: 885px;
  height: 613px;
	margin-top: 100px;
}

.pattern {
  width: 885px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
}

.content-5 {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 30px;
	margin-top: 20px;
}

.text-5 {
  display: flex;
  flex-direction: column;
  width: 438px;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.title-3 {
  flex-direction: column;
  width: 438px;
  align-items: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.sub-text-2 {
  position: relative;
  width: auto;
  height: 26px;
  display: flex;
  align-items: center;
}

.text-wrapper-23 {
  position: relative;
  width: 518px;
  margin-right: -80px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 35px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-24 {
  position: relative;
  width: 438px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #666b89;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  width: 553px;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.element-9 {
  display: flex;
  flex-wrap: wrap;
  width: 553px;
  align-items: flex-start;
  gap: 28px;
  column-gap: 60px;
  position: relative;
}

.element-9 .elementXingItem {
  display: flex;
  width: 201px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.elementXingItem .iconBox {
  position: relative;
  width: 63px;
  height: 63px;
  border-radius: 31.5px;
  background: linear-gradient(180deg, rgb(0, 76, 151) 0%, rgb(33, 142, 243) 100%);
}

.elementXingItem .textWrapper {
  position: relative;
  width: fit-content;
  font-weight: 400;
  color: #1c1f35;
  font-size: 20px;
  line-height: 22px;
  flex: 1;
  min-width: 0;
}

.element-10 {
  display: flex;
  width: 201px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-wrapper {
  position: relative;
  width: 63px;
  height: 63px;
  border-radius: 31.5px;
  background: linear-gradient(180deg, rgb(0, 76, 151) 0%, rgb(33, 142, 243) 100%);
}

.icon-2 {
  position: absolute;
  width: 24px;
  height: 26px;
  top: 18px;
  left: 20px;
}

.text-wrapper-25 {
  position: relative;
  width: fit-content;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.element-11 {
  display: flex;
  width: 216px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-3 {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 19px;
  left: 19px;
}

.element-12 {
  display: flex;
  width: 223px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-4 {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 19px;
  left: 20px;
}

.element-13 {
  display: flex;
  flex-direction: column;
  width: 258px;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.element-14 {
  display: flex;
  width: 220px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-5 {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 15px;
  left: 16px;
}

.element-15 {
  display: flex;
  width: 199px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-6 {
  position: absolute;
  width: 21px;
  height: 22px;
  top: 19px;
  left: 21px;
}

.element-16 {
  display: flex;
  width: 258px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.icon-7 {
  position: absolute;
  width: 22px;
  height: 24px;
  top: 19px;
  left: 21px;
}

.image-5 {
  /* position: absolute; */
  flex: 1;
	height: 100%;
  /* height: 897px; */
}

.overlap-group-3 {
  position: relative;
  height: 100%;
}

.background-2 {
  width: 713px;
  height: 100%;
  background-color: #335aa7;
	position: absolute;
}

.image-6 {
  flex: 1;
  height: 610px;
	position: relative;
}

.feature-tag {
  position: absolute;
  width: 255px;
  height: 139px;
  top: 613px;
  left: 522px;
}

.text-wrapper-26 {
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 35px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
	position: relative;
	z-index: 1;
	top: 80px;
}

.about {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 20px;
}

.content-6 {
  position: relative;
  width: 100%;
}

.overlap-6 {
  position: relative;
  width: 100%;
	overflow: hidden;
}

.background-3 {
  width: 100%;
  height: 504px;
	position: absolute;
	top: 0;
  background-image: url("https://echola-pre.oss-cn-hangzhou.aliyuncs.com/echola-cms/Photo2.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.about-2 {
  width: 1200px;
	margin: 0 auto;
	margin-top: 260px;
	background: #ffffff;
	position: relative;
	z-index: 1;
	padding: 50px;
}

.overlap-7 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.content-7 {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
}

.content-8 {
  position: relative;
  width: 580px;
}

.text-6 {
  display: flex;
  flex-direction: column;
  width: 472px;
  align-items: flex-start;
  gap: 12px;
}

.sub-text-3 {
  position: relative;
  width: 122px;
  height: 23px;
}

.frame {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  position: absolute;
  top: 0;
  left: 4px;
  background-color: #e7e7e780;
}

.SEO-SMO-SEM {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Rubik", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-27 {
  font-weight: 700;
  color: #1c1f35;
}

.text-wrapper-28 {
  font-weight: 300;
  color: #637381;
}

.text-7 {
  display: flex;
  flex-direction: column;
  width: 472px;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.text-wrapper-29 {
  position: relative;
  width: 512px;
  margin-top: -1px;
  margin-right: -40px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #1c1f35;
  font-size: 30px;
  letter-spacing: 1.4px;
  line-height: 48px;
}

.text-wrapper-30 {
  position: relative;
  width: 464px;
  font-family: "PingFang SC-Medium", Helvetica;
  font-weight: 500;
  color: #666b89;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24.2px;
}

.content-9 {
  position: absolute;
  width: 230px;
  height: 298px;
  top: 290px;
  left: 252px;
}

.element-17 {
  display: flex;
  width: 265px;
  align-items: center;
  gap: 15px;
  position: absolute;
  top: 0;
  left: 0;
}

.icon-8 {
  position: relative;
  width: 58px;
  height: 58px;
  background-color: var(--b-1);
  border-radius: 29px;
}

.overlap-group-4 {
  position: relative;
  width: 26px;
  height: 30px;
  top: 16px;
  left: 16px;
  background-image: url(../img/vector-24.svg);
  background-size: 100% 100%;
}

.vector-4 {
  position: absolute;
  width: 14px;
  height: 16px;
  top: 3px;
  left: 6px;
}

.vector-5 {
  position: absolute;
  width: 26px;
  height: 8px;
  top: 7px;
  left: 0;
}

.vector-6 {
  position: absolute;
  width: 2px;
  height: 16px;
  top: 14px;
  left: 12px;
}

.text-wrapper-31 {
  position: relative;
  width: fit-content;
  font-weight: 400;
  color: #1c1f35;
  font-size: 20px;
  line-height: 22px;
  flex: 1;
}

.element-18 {
  display: flex;
  width: 325px;
  align-items: center;
  gap: 15px;
  position: absolute;
  top: 80px;
  left: 0;
}

.vector-7 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -13977px;
  left: -8153px;
}

.overlap-group-5 {
  position: absolute;
  width: 30px;
  height: 18px;
  top: 20px;
  left: 14px;
  background-image: url(../img/vector-5.svg);
  background-size: 100% 100%;
}

.vector-8 {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 5px;
  left: 11px;
}

.vector-9 {
  position: absolute;
  width: 10px;
  height: 8px;
  top: 0;
  left: 21px;
}

.vector-10 {
  position: absolute;
  width: 10px;
  height: 8px;
  top: 9px;
  left: 21px;
}

.vector-11 {
  position: absolute;
  width: 10px;
  height: 8px;
  top: 0;
  left: 0;
}

.vector-12 {
  position: absolute;
  width: 10px;
  height: 8px;
  top: 9px;
  left: 0;
}

.element-19 {
  display: flex;
  width: 325px;
  align-items: center;
  gap: 15px;
  position: absolute;
  top: 160px;
  left: 0;
}

.vector-13 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -14057px;
  left: -8153px;
}

.element-20 {
  display: flex;
  width: 325px;
  align-items: center;
  gap: 15px;
  position: absolute;
  top: 240px;
  left: 0;
}

.vector-14 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -14137px;
  left: -8153px;
}

.content-10 {
  position: relative;
  width: 487px;
  height: 298px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 51px;
}

.elementSeoItem {
  display: flex;
  width: 243px;
  align-items: center;
  gap: 15px;
}

.elementSeoItem .iconBox {
  position: relative;
  width: 58px;
  height: 58px;
  background-color: var(--b-1);
  border-radius: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elementSeoItem .iconBox img {
  position: relative;
  width: 28px;
  height: 28px;
}

.vector-15 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -13977px;
  left: -7903px;
}

.vector-16 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -14057px;
  left: -7903px;
}

.vector-17 {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -14137px;
  left: -7903px;
}

.images-wrapper {
  position: relative;
  width: 518px;
  height: 462px;
}

.images {
  position: relative;
  width: 565px;
  height: 462px;
  left: -47px;
}

.overlap-group-6 {
  position: relative;
  height: 462px;
}

.image-7 {
  position: absolute;
  width: 461px;
  height: 415px;
  top: 0;
  left: 104px;
}

.image-8 {
  position: absolute;
  width: 302px;
  height: 225px;
  top: 237px;
  left: 0;
}

.pageMax {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 33px;
}

.banner {
	width: 100%;
	height: 100vh;
	background: #335FB5;
	position: relative;
}

.mySwiper {
	width: 100%;
	height: 100%;
  --swiper-pagination-color: #25407f;
}

.mySwiper .swiper-wrapper {
	width: 100%;
	height: 100%;
}

.mySwiper .swiper-slide {
	width: 100%;
	height: 100%;
}

.mySwiper .swiper-slide a {
  width: 100%;
	height: 100%;
  background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
  display: block;
  -webkit-user-drag: none;
}

.mySwiper .swiper-slide video {
  width: 100%;
	height: 100%;
  object-fit: fill;
  position: absolute;
  top: 0;
}

.services {
  width: 100%;
	padding: 80px 0 80px 0;
}

.heading-2 {
  position: relative;
  width: 296px;
}

.text-wrapper-32 {
  width: 294px;
  font-weight: 400;
  color: #1c1f35;
  font-size: 30px;
  letter-spacing: 0;
  line-height: normal;
  margin-bottom: 60px;
}

.sub-text-4 {
  height: 23px;
  background-color: #e7e7e780;
  display: flex;
  align-items: center;
  gap: 9px;
  display: inline-flex;
  padding-right: 10px;
  margin-bottom: 15px;
}

.text-wrapper-33 {
  font-weight: 400;
  color: #1c1f35;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.content-11 {
  display: flex;
  flex-direction: column;
  width: 873px;
  align-items: flex-start;
  gap: 70px;
  position: relative;
}

.element-21 {
  display: flex;
  width: 857.48px;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 36px;
  column-gap: 48px;
  position: relative;
  flex: 0 0 auto;
}

.element-22 {
  display: flex;
  width: 391px;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.icon-9 {
  position: relative;
  width: 84px;
  height: 116px;
  margin-top: -1px;
}

.text-8 {
  position: relative;
  width: 295px;
  height: 120px;
  margin-right: -4px;
}

.text-9 {
  display: flex;
  flex-direction: column;
  width: 270px;
  align-items: flex-start;
  gap: 13px;
  position: absolute;
  top: 0;
  left: 25px;
}

.SEO-SMO-SEM-2 {
  position: relative;
  width: 267px;
  margin-top: -1px;
  font-family: "PingFang SC-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-34 {
  color: #1c1f35;
}

.text-wrapper-35 {
  color: #1c1f35;
  font-size: 20px;
}

.text-wrapper-36 {
  color: #637381;
  font-size: 20px;
}

.text-wrapper-37 {
  position: relative;
  width: 270px;
  font-family: "PingFang SC-Regular", Helvetica;
  color: #666b89;
  font-size: 16px;
  line-height: 24.2px;
  font-weight: 400;
  letter-spacing: 0;
}

.line-2 {
  position: absolute;
  width: 1px;
  height: 105px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.element-23 {
  display: flex;
  width: 383.48px;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.elementItem {
	display: flex;
	width: 402px;
	align-items: flex-start;
	gap: 30px;
	position: relative;
}

.elementItem .iconBox {
	position: relative;
	width: 50px;
	height: 50px;
}

.elementItem .textBox {
	position: relative;
	flex: 1;
}

.elementItem .textBoxChild {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
	gap: 12px;
}

.elementItem .textTop {
	position: relative;
	width: 100%;
	margin-top: -1px;
	font-family: "PingFang SC-Semibold", Helvetica;
	color: #1c1f35;
	font-size: 25px;
	line-height: normal;
	font-weight: 400;
	letter-spacing: 0;
}

.elementItem .textTop span {
	color: #637381;
	font-family: PingFang SC;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.elementItem .textBottom {
	position: relative;
	width: 100%;
	font-family: "PingFang SC-Regular", Helvetica;
	color: #666b89;
	font-size: 16px;
	line-height: 24.2px;
	font-weight: 400;
	letter-spacing: 0;
}

.elementItem .lineBox {
	width: 1px;
	height: 105px;
	object-fit: cover;
}

.icon-10 {
  position: relative;
  width: 84px;
  height: 115px;
}

.icon-11 {
  position: absolute;
  width: 56px;
  height: 46px;
  top: -1px;
  left: -2px;
}

.text-10 {
  position: relative;
  width: 295px;
  height: 120px;
  margin-right: -2.52px;
}

.text-wrapper-38 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "PingFang SC-Semibold", Helvetica;
  color: #1c1f35;
  font-size: 25px;
  line-height: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.element-24 {
  display: flex;
  width: 873px;
  align-items: flex-start;
  gap: 76px;
  position: relative;
  flex: 0 0 auto;
}

.element-25 {
  display: flex;
  width: 398px;
  align-items: flex-start;
  gap: 28px;
  position: relative;
}

.icon-12 {
  position: absolute;
  width: 76px;
  height: 65px;
  top: 0;
  left: -1px;
}

.text-11 {
  position: relative;
  width: 295px;
  height: 120px;
}

.element-26 {
  display: flex;
  width: 399px;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.icon-13 {
  position: relative;
  width: 77px;
  height: 126px;
}

.text-12 {
  position: relative;
  width: 306px;
  height: 105px;
}

.text-13 {
  display: flex;
  flex-direction: column;
  width: 277px;
  align-items: flex-start;
  gap: 13px;
  position: absolute;
  top: 0;
  left: 29px;
}

.header-wrapper {
  width: 100%;
  height: 78px;
	position: fixed;
  top: 0;
  left: 0;
	z-index: 100;
  transition: all .3s;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.header {
  width: 100%;
	height: 100%;
  background-color: transparent;
}

.menu {
  width: 100%;
  height: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

.menu-wrapper {
  display: flex;
  width: 100%;
	height: 100%;
  align-items: center;
}

.menu-2 {
  position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
  gap: 60px;
}

.menu-2 .right {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  flex: 1;
  gap: 25px;
}

.menu-2 .right .otherAction {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #ffffff;
}

.menu-2 .right .otherAction .testBtn {
  padding: 6px 16px;
  border-radius: 4px;
  background: linear-gradient(100deg, #004C97 -7.58%, #218EF3 116.85%);
  color: #FFF !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 135.023%;
  cursor: pointer;
}

.menu-2 .right .otherAction .testBtn:hover {
  color: #FFF !important;
  background: linear-gradient(100deg, #005dba -7.58%, #329cff 116.85%);
}

.menu-2 .right .otherAction a {
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.menuBox {
	display: flex;
	align-items: center;
  height: 100%;
}

.menuBox .item {
  padding: 30px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	white-space: nowrap;
	transition: all .3s;
  position: relative;
  height: 100%;
  display: flex;
  gap: 16px;
}

.menuBox .item::before {
  content: "";
  display: block;
  width: calc(100% - 60px);
  height: 4px;
  background: #0E559C;
  position: absolute;
  left: 30px;
  bottom: 0;
  transition: all .5s;
  transform: scaleX(0);
}

.menuBox .item:hover::before {
  transform: scaleX(1);
}

.menuBox .item a {
	color: #ffffff;
	text-decoration: none;
	transition: all .3s;
	display: inline-block;
}

.menuBox .item a:last-child:after {
  display: none;
}

.menuBox .item:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 19px;
  background: rgba(255, 255, 255, 0.20);
  position: absolute;
  right: 0px;
  top: 30px;
}

.menuBox .item .childBox {
  position: fixed;
  top: 78px;
  left: 0;
  width: 100%;
  height: 78px;
  z-index: 1;
  background: #ffffff;
  border-top: 1px solid #bebebe;
  display: none;
  box-shadow: 0 4px 39px rgba(120, 148, 217, 0.16);
}

.menuBox .item .childBox .childItem {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 30px;
  position: relative;
}

.menuBox .item .childBox .childItem.active::before {
  content: "";
  display: inline-block;
  width: calc(100% - 60px);
  height: 2px;
  background: #ffffff;
  position: absolute;
  left: 30px;
  bottom: 0;
}

.menuBox .item .childBox .childItem:hover::before {
  content: "";
  display: inline-block;
  width: calc(100% - 60px);
  height: 2px;
  background: #ffffff;
  position: absolute;
  left: 30px;
  bottom: 0;
}

.menuBox .item .childBox .childItem:first-child::before {
  width: calc(100% - 30px);
  left: 0;
}

.menuBox .item .childBox .childItem:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 19px;
  background: #ffffff;
  position: absolute;
  right: 0px;
  top: 30px;
}

.menuBox .item .childBox .childItem:last-child::after {
  display: none;
}

.menuBox .item .childBox .childItem:first-child {
  padding-left: 0;
}

.menuBox .item .childBox .childMaxWidth {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuBox .item:hover>.childBox {
  display: block;
}

.menu-3 {
	position: relative;
	/* flex: 1; */
}

.menu-4 {
  display: flex;
  align-items: center;
  gap: 30px;
}

.text-wrapper-39 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.about-3 {
  position: relative;
  width: 98px;
  height: 22px;
}

.text-wrapper-40 {
  position: absolute;
  top: 0;
  left: 30px;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.line-4 {
  position: absolute;
  width: 1px;
  height: 19px;
  top: 2px;
  left: -1px;
  object-fit: cover;
}

.pages {
  position: relative;
  width: 94px;
  height: 22px;
}

.pages-2 {
  position: absolute;
  width: 66px;
  height: 22px;
  top: 0;
  left: 30px;
}

.text-wrapper-41 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "PingFang SC-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.project-2 {
  position: relative;
  width: 96px;
  height: 22px;
}

.contact-2 {
  position: relative;
  width: 128px;
  height: 22px;
}

.contact-3 {
  position: relative;
  width: 96px;
  height: 22px;
}

.group-8 {
  width: 170px;
  height: 44px;
	display: flex;
	align-items: center;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.wechatimg-2 {
  width: 170px;
  height: 33px;
  object-fit: cover;
}

.image-9 {
  width: 88px;
  height: 16px;
}

.childrenBox .contact {
  background: #F7F9FC;
}

.searchFormBtn {
  cursor: pointer;
}

@media only screen and (max-width: 1250px) {
	.performance {
		background-position: -250px center;
	}
	.performance .pageMax {
		width: 100%;
	}
	.performance .pagePerFlex {
		justify-content: center;
		gap: 20px;
	}
	.performance .image-6 {
		flex: none;
		height: auto;
		width: 50%;
	}
}

@media only screen and (max-width: 1180px) {
	.banner {
		height: 60vh;
	}
	.services {
		padding: 40px 28px !important;
	}
	.services .pageMax {
		display: block;
	}
	.services .pageMax .heading-2 {
		margin-bottom: 32px;
	}
	.services .content-11 {
		gap: 32px;
	}
	.services .element-21 {
		gap: 30px;
	}
	.services .element-24 {
		gap: 30px;
	}
}

@media only screen and (max-width: 1180px) {
  .render-html {
    max-width: none;
    width: 100%;
    padding: 0 20px;
  }
	.services .element-21 {
		gap: 30px;
		flex-direction: column;
		width: 100%;
	}
	.services .element-24 {
		gap: 30px;
		flex-direction: column;
		width: 100%;
	}
	.services .elementItem {
		width: 100%;
	}
	.services .textBox {
		flex: 1;
		width: auto;
	}
	.content-11 {
		width: 100%;
	}
	.elementItem .textBoxChild {
		width: calc(100% - 25px);
	}
	.elementItem .textTop {
		width: 100%;
	}
	.elementItem .textBottom {
		width: 100%;
	}
	.about-2 {
		width: 85%;
		padding: 26px 20px;
		margin-top: 40px;
	}
	.background-3 {
		height: 167px;
	}
	.content-7 {
		flex-direction: column;
		width: 100%;
	}
	.images-wrapper {
		display: none;
	}
	.content-8 {
		width: 100%;
		height: 100%;
	}
	.text-6 {
		width: 100%;
		position: relative;
	}
	.text-7 {
		width: 100%;
	}
	.text-wrapper-29 {
		width: 100%;
	}
	.text-wrapper-30 {
		width: 100%;
	}
	.content-9 {
		top: 690px;
		left: 2px;
	}
	.content-10 {
    width: 100%;
    height: auto;
    gap: 20px;
    margin-top: 20px;
	}
	.project {
		height: auto;
    background: transparent;
	}
  .project .seeMoreBtn.light {
    background: linear-gradient(100deg, #004C97 -7.58%, #218EF3 116.85%);
    color: #ffffff;
  }
	.overlap-2 {
		height: auto;
	}
	.background {
		display: none;
	}
	.content-4 {
		width: 100%;
	}
	.content-wrapper {
		width: 100%;
		height: auto;
	}
	.image-3 {
		width: 100%;
		flex-direction: column;
	}
	.interfaceItem {
		margin: 0 auto;
	}
  .group-6 {
    margin-top: 10px;
    margin-bottom: 30px;
  }
	.group-6 .groupPageMax {
		max-width: none;
		width: 100%;
	}
	.group-6 .testimonial {
		width: 100%;
		padding: 0 22px;
	}
	.group-6 .title-wrapper {
		width: 100%;
	}
	.title-2 {
		width: 100%;
	}
	.text-wrapper-13 {
		width: 100%;
	}
	.user {
		flex-direction: column;
		width: 100%;
	}
	.review-wrapper {
		width: 100%;
		padding: 20px;
    flex-direction: column-reverse;
    gap: 10px;
	}
  .review-wrapper img {
    border-radius: 4px;
    flex: auto;
    width: 100%;
    height: 200px;
  }
  .review-wrapper .left {
    flex: 1;
    width: 100%;
  }
  .review-wrapper .left .title {
    text-align: left;
    margin-bottom: 10px;
  }
	.review {
		width: 100%;
	}
	.user-2 {
		width: 100%;
	}
	.image-wrapper {
		display: none;
	}
	.user-3 {
		width: 100%;
	}
	.name {
		flex: 1;
	}
	.text-4 {
		width: 100%;
	}
	.text-wrapper-16 {
		width: 100%;
	}
	.performance {
		background: transparent;
		padding-top: 0;
		height: auto;
    padding-bottom: 60px;
	}
	.performance .pageMax {
		gap: 0;
		max-width: none;
	}
	.performance .image-6 {
		display: none;
	}
	.text-5 {
		width: 100%;
	}
	.performance .pagePerFlex {
		padding: 0 22px;
	}
	.text-wrapper-24 {
		width: 100%;
	}
	.text-wrapper-23 {
		width: 100%;
    font-size: 18px;
    line-height: 24px;
	}
	.title-3 {
		width: 100%;
	}
	.content-5 {
		gap: 30px;
		margin-top: 0;
	}
	.features {
		width: 100%;
		flex-direction: column;
		gap: 20px;
	}
	.element-9 {
		width: 100%;
	}
	.element-13 {
		width: 100%;
	}
	.contact {
		padding: 60px 22px;
	}
	.form-wrapper {
		display: none;
	}
	.content {
		width: 100%;
	}
	.content-2 {
		width: 100%;
	}
	.form {
		width: 100%;
	}
	.text {
		width: 100%;
	}
	.content-3 {
		width: 100%;
	}
	.title {
		width: 100%;
		text-align: center;
	}
	.text-wrapper-3 {
		width: 100%;
	}
	.image-2 {
		display: none;
	}
	.copyright {
		display: none;
	}
	.footerPageMax {
		flex-direction: column-reverse;
		width: 100%;
		padding: 0 22px;
	}
	.footerPageMax .left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40px;
	}
	.footerPageMax .left .logo {
		margin-bottom: 0;
	}
	.group-2 {
		/* width: 100%; */
		margin: 0 auto;
	}
	.follow-2 {
		margin-left: 0;
	}
	.banner {
		height: 400px;
	}
  .bannerTextBox {
    padding-top: 50px !important;
  }
	.menu {
		width: 100%;
		max-width: none;
		padding: 0 24px;
	}
	.mobileMenu {
		display: block;
	}
  .menu-2 {
    justify-content: space-between;
  }
  .menu-2 .right {
    display: none;
  } 
	.mobileMenu i {
		font-size: 22px;
		color: #ffffff;
	}
	.menuBox {
		display: none;
	}
}

.contentPage {
  padding-bottom: 40px;
}

.postMaxBox {
  max-width: 1200px;
  margin: 0 auto;
}

.headerTitleBox {
  padding-top: 150px;
  background: url(../img/productBackground.png) no-repeat;
  background-size: cover;
  color: #ffffff;
  position: relative;
}

.headerTitleBox .postMaxBox {
  padding-bottom: 50px;
}

.headerTitleBox .postMaxBox .title {
  font-size: 40px;
  color: #ffffff;
  font-weight: bold;
}

.headerTitleBox .postMaxBox .createBox {
  display: flex;
  gap: 20px;
  color: #ffffff;
  position: relative;
  z-index: 1;
  margin-top: 20px;
  font-size: 20px;
}

.headerTitleBox .postMaxBox .timeBox {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pageViews {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pageViews i {
  font-size: 20px;
}

.headerTitleBox .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(91deg, rgba(3, 45, 95, 0.54) 9.39%, rgba(9, 18, 66, 0.49) 93.62%);
}

.postContentBox {
  margin-top: 40px;
}

@media only screen and (max-width: 805px) {
  .headerTitleBox {
    padding-top: 100px;
  }
  .headerTitleBox .postMaxBox {
    width: 100%;
    padding: 0 22px !important;
    padding-bottom: 30px !important;
  }
  .headerTitleBox .postMaxBox .title {
    font-size: 25px;
  }
  .headerTitleBox .postMaxBox .createBox {
    margin-top: 10px;
    font-size: 16px;
  }
}