/* 公共部分 */
:root {
  --color-1: #d2eff3;
  --color-2: #70f2ff;
  --color-3: #3eede8;
  --color-4: #2fdff5;
  --color-5: #44cef5;
  --color-6: #4c8dad;
  --color-7: #177cb0;
  --color-8: #085279;
  --color-9: #003374;
  --color-10: #2e4e7d;
  --color-11: #415067;
  --color-12: #7398ab;
}

.wow {
  visibility: hidden;
}

body {
  font-size: 20px;
  box-sizing: border-box;
}

.banxin {
  box-sizing: border-box;
  min-width: 1295px;
  margin: 0 auto;
}

/* =====================================================顶部导航栏部分--star */
.nav-box {
  position: fixed;
  z-index: 9998;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0.2em 0.5em rgba(0, 0, 0, 0.1);
  height: 4em;
  color: var(--color-9);
  background-color: rgba(255, 255, 255, 0);
}

.nav-warp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-logo-nav {
  flex: 1;
  display: flex;
  align-items: center;
}

.logo {
  width: 6em;
}

.logo .logo-zh {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.logo .logo-en {
  margin-top: 0.6em;
  font-weight: 700;
  font-size: 0.65em;
  color: var(--color-10);
  letter-spacing: 0.1em;
}

#nav {
  flex: 1;
  position: relative;
  border: none;
  display: flex;
  list-style: none;
  height: 2.5em;
}

#nav li a {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2.2em;
  font: 500 0.8em "优设标题黑";
  border: none;
  outline: none;
  text-decoration: none;
  height: 100%;
  line-height: 100%;
  color: var(--color-9);
}

.slide1,
.slide2 {
  position: absolute;
  display: inline-block;
  height: 2.5em;
  border-radius: 10em;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
}

.slide1 {
  background-color: var(--color-1);
  z-index: 2;
}

.slide2 {
  opacity: 0;
  background-color: rgba(210, 239, 243, 0.5);
  z-index: 1;
  box-shadow: 0 0 20px #ffffffaa inset;
}

.squeeze {
  transform: scale(0.9);
}

.right-phone-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 14em;
}

.right-phone-btn .phone-icon {
  margin-right: 0.5em;
}

.phone-icon img {
  width: 1.3em;
}

.phone-icon span {
  font-size: 0.8em;
  margin-left: 0.2em;
}

.right-phone-btn .btn-box .btn .fancy {
  background-color: transparent;
  border: 2px solid var(--color-9);
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 0.8em 1.3em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
  border-radius: 0.5em;
}

.right-phone-btn .btn-box .btn .fancy::before {
  content: " ";
  width: 1em;
  height: 2px;
  background: var(--color-9);
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.right-phone-btn .btn-box .btn .fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-9);
}

.right-phone-btn .btn-box .btn .fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: var(--color-1);
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.right-phone-btn .btn-box .btn .fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: var(--color-1);
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.right-phone-btn .btn-box .btn .fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: var(--color-1);
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.right-phone-btn .btn-box .btn .fancy:hover {
  color: var(--color-1);
  background: var(--color-9);
}

.right-phone-btn .btn-box .btn .fancy:hover::before {
  width: 0.9375rem;
  background: var(--color-1);
}

.right-phone-btn .btn-box .btn .fancy:hover .text {
  color: var(--color-1);
  padding-left: 1.5em;
}

.right-phone-btn .btn-box .btn .fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.right-phone-btn .btn-box .btn .fancy:hover .bottom-key-1,
.fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

/* 手机版样式 */
.nav-box .nav-warp .phone-nav {
  display: none;
}


/* 顶部导航栏部分--end */

/* =============================================轮播图背景部分 -- star  */
#banner-sec .bannerSwiper {
  width: 100%;
  height: 100vh;
}

#banner-sec .bannerSwiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

#banner-sec .bannerSwiper .swiper-wrapper .swiper-slide {
  position: relative;
}

#banner-sec .bannerSwiper .swiper-wrapper .swiper-slide .banner-img {
  max-width: 100%;
  min-width: 1295px;
  height: 100%;
  position: absolute;
  z-index: 1;
  width: 100%;
}

#banner-sec .bannerSwiper .swiper-wrapper .swiper-slide .banner-img img {
  width: 100%;
  height: 100%;
}

#banner-sec .swiper-slide .banner-text-box {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#banner-sec .swiper-slide .banner-text-box .banner-text-warp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#banner-sec .swiper-slide .banner-text-box .banner-text-warp .msg-one {
  font-size: 2.8em;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(125deg, var(--color-8) 0%, var(--color-10) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
  max-width: 680px;
}

#banner-sec .swiper-slide .banner-text-box .banner-text-warp .msg-two {
  margin-top: 2.2em;
  border-radius: 1.25em;
  border: 1px solid #ffffff;
  padding: 0.55em 1.5em;
  font-size: 1.3em;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  background: linear-gradient(90deg, var(--color-9) 0%, var(--color-10) 100%);
  opacity: 0.8;
  letter-spacing: 0.1em;
}

#banner-sec .swiper-slide .banner-text-box .banner-text-warp .msg-three {
  margin-top: 3.5em;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-9);
  letter-spacing: 0.2em;
  max-width: 600px;
  line-height: 1.3em;
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn {
  margin-top: 3.5em;
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button {
  font-weight: bold;
  color: white;
  background: linear-gradient(90deg, var(--color-10) 0%, var(--color-9) 100%);
  padding: 0.6em 3em;
  border: none;
  border-radius: 1.2em;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  letter-spacing: 0.1em;
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button:hover {
  color: var(--color-9);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:not(:nth-child(6)) {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2em;
  width: 3em;
  background: linear-gradient(90deg, var(--color-2) 0%, var(--color-6) 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: .6s ease;
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(6) {
  position: relative;
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(1) {
  transform: translate(-3.3em, -4em);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(2) {
  transform: translate(-6em, 1.3em);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(3) {
  transform: translate(-.2em, 1.8em);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(4) {
  transform: translate(3.5em, 1.4em);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button span:nth-child(5) {
  transform: translate(3.5em, -3.8em);
}

#banner-sec .banner-text-box .banner-text-warp .bottom-btn button:hover span:not(:nth-child(6)) {
  transform: translate(-50%, -50%) scale(4);
  transition: 1.5s ease;
}

#banner-sec .bannerSwiper #point {
  bottom: var(--swiper-pagination-bottom, 30px);
}

#banner-sec .bannerSwiper #point .swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 14px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 14px));
}

#banner-sec .bannerSwiper #point .swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  /* background: var(--swiper-pagination-color, var(--swiper-theme-color)); */
  background: #ffffff;
}

/* 轮播图背景部分 -- end */

/* =================================================产品优势部分 -- star */

.advantage-box {
  margin-top: 4em;
}

.advantage-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.advantage-warp .top-title-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.15em;
  width: 100%;
  text-align: center;
}

.advantage-warp .top-title-box .title {
  font-size: 2em;
  font-weight: 700;
  color: var(--color-10);
}

.advantage-warp .top-title-box .desc {
  font-size: 1em;
  font-weight: 400;
  color: var(--color-11);
  margin-top: 0.95em;
}

.advantage-warp .top-title-box .line {
  width: 5em;
  height: 0.2em;
  background-color: var(--color-12);
  border-radius: 1em;
  margin-top: 0.95em;
}

.advantage-warp .advantage-detail-box {
  margin-top: 2.5em;
}

.phone-advantage-detail-box {
  display: none;
}

.advantage-warp .advantage-detail-box .advantage-detail-warp {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.advantage-detail-warp .left-item-box {
  width: 22.6em;
}

.advantage-detail-warp .left-item-box .left-top {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10em;
  margin-bottom: 2em;
}

.advantage-detail-warp .left-item-box .left-top .image {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .left-item-box .left-top .image img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-top .image2 {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .left-item-box .left-top .image2 img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-top:hover .image {
  display: none;
}

.advantage-detail-warp .left-item-box .left-top:hover .image2 {
  display: flex;
}

.advantage-detail-warp .left-item-box .left-top .top-icon-title {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .left-item-box .left-top .left-msg-box {
  padding: 2em 2.95em 2em 2em;
}

.advantage-detail-warp .left-item-box .left-top .top-icon-title .icon {
  width: 1.7em;
}

.advantage-detail-warp .left-item-box .left-top .top-icon-title .icon img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-top .top-icon-title .title {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-9);
}

.advantage-detail-warp .left-item-box .left-top .bottom-text {
  padding: 1em 0.5em 1em 0;
}

.advantage-detail-warp .left-item-box .left-top .bottom-text .text-circle .item-one {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .left-item-box .left-top .bottom-text .text-circle .item-one:last-child {
  margin-top: 0.8em;
}

.advantage-detail-warp .left-item-box .left-top .bottom-text .text-circle .item-one .circle-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .left-item-box .left-top .bottom-text .text-circle .item-one .circle-one .circle-two {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .left-item-box .left-top .bottom-text .text-circle .item-one .text {
  font-size: 0.8em;
  color: var(--color-11);
  margin-left: 1em;
}

.advantage-detail-warp .left-item-box .left-bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10em;
  margin: 3em 0 1em;
}

.advantage-detail-warp .left-item-box .left-bottom .image {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .left-item-box .left-bottom .image img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-bottom .image2 {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .left-item-box .left-bottom .image2 img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-bottom:hover .image {
  display: none;
}

.advantage-detail-warp .left-item-box .left-bottom:hover .image2 {
  display: flex;
}

.advantage-detail-warp .left-item-box .left-bottom .top-icon-title {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .left-item-box .left-bottom .left-msg-box {
  padding: 2em 2.95em 2em 2em;
}

.advantage-detail-warp .left-item-box .left-bottom .top-icon-title .icon {
  width: 1.7em;
}

.advantage-detail-warp .left-item-box .left-bottom .top-icon-title .icon img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .left-item-box .left-bottom .top-icon-title .title {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-9);
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text {
  padding: 1em 0.5em 1em 0;
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text .text-circle .item-one {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text .text-circle .item-one:last-child {
  margin-top: 0.8em;
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text .text-circle .item-one .circle-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text .text-circle .item-one .circle-one .circle-two {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .left-item-box .left-bottom .bottom-text .text-circle .item-one .text {
  font-size: 0.8em;
  color: var(--color-11);
  margin-left: 1em;
}

.advantage-detail-warp .middle-item-box {
  width: 19.8em;
}

.advantage-detail-warp .middle-item-box .middle-top {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 11.25em;
}

.advantage-detail-warp .middle-item-box .middle-top .image {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 11.25em;
}

.advantage-detail-warp .middle-item-box .middle-top .image img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .middle-item-box .middle-top .image2 {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  height: 11.25em;
}

.advantage-detail-warp .middle-item-box .middle-top .image2 img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .middle-item-box .middle-top:hover .image {
  display: none;
}

.advantage-detail-warp .middle-item-box .middle-top:hover .image2 {
  display: flex;
}

.advantage-detail-warp .middle-item-box .middle-top .top-icon-title {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .middle-item-box .middle-top .middle-msg-box {
  padding: 2em;
}

.advantage-detail-warp .middle-item-box .middle-top .top-icon-title .icon {
  width: 1.7em;
}

.advantage-detail-warp .middle-item-box .middle-top .top-icon-title .icon img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .middle-item-box .middle-top .top-icon-title .title {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-9);
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text {
  padding: 1em 0em;
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text .text-circle .item-one {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text .text-circle .item-one:last-child {
  margin-top: 0.8em;
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text .text-circle .item-one .circle-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text .text-circle .item-one .circle-one .circle-two {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .middle-item-box .middle-top .bottom-text .text-circle .item-one .text {
  font-size: 0.8em;
  color: var(--color-11);
  margin-left: 1em;
}

.advantage-detail-warp .middle-item-box .middle-bottom-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2em;
  width: 100%;
}

.advantage-detail-warp .middle-item-box .middle-bottom-box .middle-bottom-warp {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 18em;
}

.advantage-detail-warp .middle-item-box .middle-bottom-box .middle-bottom-warp .image {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 18em;
}

.advantage-detail-warp .middle-item-box .middle-bottom-box .middle-bottom-warp .image img {
  width: 100%;
  height: 100%;
}

.middle-bottom-warp .middle-bottom-text-box {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
}

.middle-bottom-warp .middle-bottom-text-box .middle-bottom-text-warp {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 18em;
  font-weight: 700;
  color: #ffffff;
}

.middle-bottom-warp .middle-bottom-text-box .middle-bottom-text-warp .text-one {
  position: absolute;
  z-index: 4;
  top: 1.05em;
  font-size: 1.2em;
}

.middle-bottom-warp .middle-bottom-text-box .middle-bottom-text-warp .text-two {
  position: absolute;
  z-index: 4;
  top: 5.15em;
  font-size: 1.2em;
}

.middle-bottom-warp .middle-bottom-text-box .middle-bottom-text-warp .text-three {
  position: absolute;
  z-index: 4;
  top: 9.1em;
  font-size: 1.2em;
}

.middle-bottom-warp .middle-bottom-text-box .middle-bottom-text-warp .text-four {
  position: absolute;
  z-index: 4;
  top: 13.1em;
  font-size: 1.2em;
}

.advantage-detail-warp .right-item-box {
  width: 22.6em;
}

.advantage-detail-warp .right-item-box .right-top {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10em;
  margin-bottom: 2em;
}

.advantage-detail-warp .right-item-box .right-top .image {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .right-item-box .right-top .image img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-top .image2 {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .right-item-box .right-top .image2 img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-top:hover .image {
  display: none;
}

.advantage-detail-warp .right-item-box .right-top:hover .image2 {
  display: flex;
}

.advantage-detail-warp .right-item-box .right-top .top-icon-title {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .right-item-box .right-top .right-msg-box {
  padding: 2em 0.5em 2em 3.95em;
}

.advantage-detail-warp .right-item-box .right-top .top-icon-title .icon {
  width: 1.7em;
}

.advantage-detail-warp .right-item-box .right-top .top-icon-title .icon img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-top .top-icon-title .title {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-9);
}

.advantage-detail-warp .right-item-box .right-top .bottom-text {
  padding: 1em 0.5em 1em 0.5em;
}

.advantage-detail-warp .right-item-box .right-top .bottom-text .text-circle .item-one {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .right-item-box .right-top .bottom-text .text-circle .item-one:last-child {
  margin-top: 0.8em;
}

.advantage-detail-warp .right-item-box .right-top .bottom-text .text-circle .item-one .circle-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .right-item-box .right-top .bottom-text .text-circle .item-one .circle-one .circle-two {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .right-item-box .right-top .bottom-text .text-circle .item-one .text {
  font-size: 0.8em;
  color: var(--color-11);
  margin-left: 1em;
}

.advantage-detail-warp .right-item-box .right-bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 10em;
  margin: 3em 0 1em;
}

.advantage-detail-warp .right-item-box .right-bottom .image {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .right-item-box .right-bottom .image img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-bottom .image2 {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  height: 10em;
}

.advantage-detail-warp .right-item-box .right-bottom .image2 img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-bottom:hover .image {
  display: none;
}

.advantage-detail-warp .right-item-box .right-bottom:hover .image2 {
  display: flex;
}

.advantage-detail-warp .right-item-box .right-bottom .top-icon-title {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .right-item-box .right-bottom .right-msg-box {
  padding: 2em 0.5em 2em 3.95em;
}

.advantage-detail-warp .right-item-box .right-bottom .top-icon-title .icon {
  width: 1.7em;
}

.advantage-detail-warp .right-item-box .right-bottom .top-icon-title .icon img {
  width: 100%;
  height: 100%;
}

.advantage-detail-warp .right-item-box .right-bottom .top-icon-title .title {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-9);
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text {
  padding: 1em 0.5em 1em 0.5em;
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text .text-circle .item-one {
  display: flex;
  align-items: center;
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text .text-circle .item-one:last-child {
  margin-top: 0.8em;
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text .text-circle .item-one .circle-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text .text-circle .item-one .circle-one .circle-two {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-11);
  border-radius: 50%;
}

.advantage-detail-warp .right-item-box .right-bottom .bottom-text .text-circle .item-one .text {
  font-size: 0.8em;
  color: var(--color-11);
  margin-left: 1em;
}

/* 产品优势部分 -- end */

/* =============================================私域体系部分 --- star */
.system-box {
  margin-top: 4em;
  height: 37em;
}

.system-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.system-warp .top-title-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.15em;
  width: 100%;
  text-align: center;
}

.system-warp .top-title-box .title {
  font-size: 2em;
  font-weight: 700;
  color: var(--color-10);
}

.system-warp .top-title-box .desc {
  font-size: 1em;
  font-weight: 400;
  color: var(--color-11);
  margin-top: 0.95em;
}

.system-warp .top-title-box .line {
  width: 5em;
  height: 0.2em;
  background-color: var(--color-12);
  border-radius: 1em;
  margin-top: 0.95em;
}

.system-middle-box {
  margin-top: 2.5em;
}

.system-middle-box .system-middle-warp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.system-middle-box .system-middle-warp .system-middle-item {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 2px solid #edeff2;
  border-radius: 0.4em;
  font-weight: 500;
  color: var(--color-11);
  height: 3em;
  line-height: 1.1em;
  overflow: hidden;
}

.system-middle-box .system-middle-warp .system-middle-item.active {
  border: 0.1em solid #004eb7;
  box-shadow: 0 0.5em 1em 1em rgba(21, 117, 211, .06);
}

.system-middle-box .system-middle-warp .system-middle-item:not(:last-child) {
  margin-right: 1.5em;
}

.system-middle-item .in-content {
  position: absolute;
  z-index: 99;
  display: flex;
  align-items: center;
}

.system-middle-item .in-content .icon-num {
  width: 2.5em;
  height: 2.5em;
  display: block;
  margin-right: 0.4em;
  opacity: 1;
  transition: all .5s;
}

.system-middle-item.active .in-content .icon-num {
  opacity: 0;
  transition: all .5s;
}

.system-middle-item .in-content .icon-num img {
  width: 100%;
  height: 100%;
}

.system-middle-item .in-content .tabs-title {
  transform: translateX(0);
  transition: all .5s;
  cursor: default;
}

.system-middle-item.active .in-content .tabs-title {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(270deg, #202124, #004eb7);
  -webkit-background-clip: text;
  background-clip: text;
  color: #202124;
  font-weight: 600;
  line-height: 1.1em;
  transform: translateX(-1em) scale(1.1);
  transition: transform .5s;
}

.system-middle-item .out-img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.2);
  transition: all .5s;
}

.system-middle-item.active .out-img {
  opacity: 1;
  transform: scale(1);
  transition: all .5s;
}

.system-middle-item .out-img img {
  width: 100%;
  height: 100%;
}

.bottom-info-box {
  margin-top: 2.5em;
}

.bottom-info-warp {
  position: relative;
  display: flex;
  justify-content: center;
}


.bottom-info-warp .info-item {
  display: flex;
  justify-content: space-between;
  position: absolute;
  box-sizing: border-box;
}

.bottom-info-warp .info-item .left-info {
  width: 28.8em;
  height: 100%;
  padding-right: 2em;
  opacity: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  transform: translateX(-10em);
  transition: all 1.2s;
  box-sizing: border-box;
}

.bottom-info-warp .info-item.active .left-info {
  opacity: 1;
  transform: translateX(0);
  transition: all 1.2s;
}

.bottom-info-warp .info-item .left-info .top-title .span1 {
  color: #004eb7;
  font-size: 1.5em;
  font-weight: 700;
  margin-right: 0.5em;
}

.bottom-info-warp .info-item .left-info .top-title .span2 {
  color: var(--color-9);
  font-size: 1.3em;
  font-weight: 700;
}

.bottom-info-warp .info-item .left-info .middle-line {
  border-bottom: 1px solid var(--color-1);
  margin-top: 0.7em;
}

.bottom-info-warp .info-item .left-info .middle-line span {
  display: flex;
  width: 2em;
  height: 0.15em;
  background-color: #004eb7;
  border-radius: 1em;
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item {
  display: flex;
  margin-top: 2em;
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item .text-left-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item .text-left-icon img {
  width: 100%;
  height: 100%;
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item .text-right-msg {
  flex: 1;
  margin-left: 0.6em;
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item .text-right-msg .text-title {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-9);
}

.bottom-info-warp .info-item .left-info .bottom-text .text-item .text-right-msg .text-desc {
  font-size: 0.9em;
  color: var(--color-6);
  line-height: 1.5em;
  letter-spacing: 0.1em;
  margin-top: 0.6em;
}

.bottom-info-warp .info-item .right-img {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 36.18em;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  /* transform: translateX(5em); */
  transition: all 1.2s;
  box-sizing: border-box;
}

.bottom-info-warp .info-item.active .right-img {
  opacity: 1;
  transform: translateX(0);
  transition: all 1.2s;
}

.bottom-info-warp .info-item .right-img img {
  width: 100%;
  height: 100%;
}


/* 私域体系部分 --- end */

/* ===============================================产品价格部分 --- star */
.price-box {
  margin-top: 4em;
}

.price-box .price-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-box .price-warp .top-title-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.15em;
  width: 100%;
  text-align: center;
}

.price-box .price-warp .top-title-box .title {
  font-size: 2em;
  font-weight: 700;
  color: var(--color-10);
}

.price-box .price-warp .top-title-box .desc {
  font-size: 1em;
  font-weight: 400;
  color: var(--color-11);
  margin-top: 0.95em;
}

.price-box .price-warp .top-title-box .line {
  width: 5em;
  height: 0.2em;
  background-color: var(--color-12);
  border-radius: 1em;
  margin-top: 0.95em;
}

.price-box .price-warp .middle-price-card-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2.5em;
}

.mySwiper {
  display: none;
}

.price-box .price-warp .middle-price-card-warp {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.middle-price-card-warp .price-card-item {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #d8e6fa;
  border-radius: 0.6em;
  box-shadow: 0 0.5em 2em 0 rgba(1, 40, 111, .05);
  transition: all .5s ease;
  vertical-align: top;
  margin-right: 1em;
  overflow: hidden;
  width: 15.5em;
  transform: scale(1);
  transition: transform .6s ease;
  position: relative;
  z-index: 1;
}

.middle-price-card-warp .price-card-item:hover {
  transform: scale(1.07);
  transition: transform .6s ease;
  z-index: 2;
  box-shadow: 0px 0.2em 0.7em rgba(0, 0, 0, 0.2);
}

.middle-price-card-warp .price-card-item:last-child {
  margin-right: 0em;
}

.middle-price-card-warp .price-card-item .top-box .top-ver-desc {
  box-sizing: border-box;
  width: 100%;
  height: 8.3em;
  padding: 1.4em 1em 1.2em 1.2em;
}

.middle-price-card-warp .price-card-item:first-child .top-box .top-ver-desc {
  background: url(../static/pictures/18.png) no-repeat;
  background-size: 100%;
}

.middle-price-card-warp .price-card-item:nth-child(2) .top-box .top-ver-desc {
  background: url(../static/pictures/19.png) no-repeat;
  background-size: 100%;
}

.middle-price-card-warp .price-card-item:nth-child(3) .top-box .top-ver-desc {
  background: url(../static/pictures/20.png) no-repeat;
  background-size: 100%;
}

.middle-price-card-warp .price-card-item:last-child .top-box .top-ver-desc {
  background: url(../static/pictures/21.png) no-repeat;
  background-size: 100%;
}

.middle-price-card-warp .price-card-item .top-box .top-ver-desc .ver-box {
  color: #fff;
}

.middle-price-card-warp .price-card-item .top-box .top-ver-desc .ver-box .ver-text {
  font-size: 0.7em;
}

.middle-price-card-warp .price-card-item .top-box .top-ver-desc .ver-box .ver-name {
  margin-top: 0.4em;
  font-size: 1.25em;
  font-weight: 700;
}

.middle-price-card-warp .price-card-item .top-box .top-ver-desc .ver-desc {
  margin-top: 1em;
  font-size: 0.75em;
  line-height: 1.4em;
  color: #fff;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc {
  padding: 1em 1em 0em;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .original-price {
  font-size: 0.7em;
  text-decoration: line-through;
  color: var(--color-12);
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .current-price {
  margin-top: 0.5em;
  font-size: 1.5em;
  font-weight: 700;
  color: #ef3e3e;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .current-price span {
  font-size: 0.7em;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .gift-box {
  display: flex;
  align-items: center;
  font-size: 0.7em;
  margin-top: 0.7em;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .gift-box .gift-warp {
  border-radius: 0.8em;
  display: flex;
  align-items: center;
  padding: 0.35em 0.7em;
}

.middle-price-card-warp .price-card-item:nth-child(1) .top-box .middle-price-desc .gift-box .gift-warp {
  background: rgb(240, 252, 244);
  color: rgb(2, 185, 74);
}

.middle-price-card-warp .price-card-item:nth-child(2) .top-box .middle-price-desc .gift-box .gift-warp {
  background: rgb(238, 247, 255);
  color: rgb(5, 112, 255);
}

.middle-price-card-warp .price-card-item:nth-child(3) .top-box .middle-price-desc .gift-box .gift-warp {
  background: rgb(39, 37, 83);
  color: rgb(251, 242, 216);

}

.middle-price-card-warp .price-card-item:nth-child(4) .top-box .middle-price-desc .gift-box .gift-warp {
  background: rgb(255, 245, 234);
  color: rgb(255, 127, 29);
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .gift-box .gift-warp .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .gift-box .gift-warp .icon img {
  width: 100%;
  height: 100%;
}

.middle-price-card-warp .price-card-item .top-box .middle-price-desc .edition-desc {
  margin-top: 1em;
  font-size: 0.85em;
  color: var(--color-10);
  line-height: 1.7em;
}

.middle-price-card-warp .price-card-item .btn-box {
  box-sizing: border-box;
  padding: 0 1em 1em;
  width: 100%;
  margin-top: 2em;
}

.middle-price-card-warp .price-card-item .btn-box .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4em;
  padding: 0.9em;
  font-size: 0.8em;
  color: #fff;
  font-weight: 700;
}

.middle-price-card-warp .price-card-item:nth-child(1) .btn-box .btn {
  background: linear-gradient(315deg, #93dd9b, #3ddc88);
}

.middle-price-card-warp .price-card-item:nth-child(2) .btn-box .btn {
  background: linear-gradient(135deg, #006cff, #60b5ff);
}

.middle-price-card-warp .price-card-item:nth-child(3) .btn-box .btn {
  background: linear-gradient(135deg, #041328, #443577);
}

.middle-price-card-warp .price-card-item:nth-child(4) .btn-box .btn {
  background: linear-gradient(315deg, #ffc266, #ff6e00);
}

.tableBanner {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  background: #fff;
  border-radius: 1px;
  border-top: 1px solid #edeff2;
  box-shadow: 0 0.5em 3em 0 rgba(1, 40, 111, .04);
  box-sizing: border-box;
  transition: top .2s ease;
  width: 100%;
}

.tableTitle {
  display: none;
}


.tableBanner .tableBannerConter {
  box-sizing: border-box;
  display: flex;
  margin: 0 auto;
  padding: 0;
}

.tableBanner .tableBannerConter>div {
  flex: 1;
}

.tableBanner .tableBannerConter .conter1 {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 6em;
  justify-content: center;
}

.tableBanner .tableBannerConter .conter1 .conterTitle {
  color: var(--color-9);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 0.9em;
  padding-bottom: 0.6em;
  padding-left: 1em;
}

.tableBanner .tableBannerConter .conter1 .conterText {
  color: var(--color-6);
  font-size: 0.75em;
  font-weight: 500;
  line-height: 0.8em;
  padding-left: 1em;
}

.tableBanner .tableBannerConter .conter2 {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 6em;
  justify-content: center;
}

.tableBanner .tableBannerConter .conter2 .spanheight {
  align-items: center;
  border-right: 1px solid #e5f0ff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.tableBanner .tableBannerConter .conter2 .noneheight {
  border-right: 0 !important;
}

.tableBanner .tableBannerConter .conter2 .spanheight .conterTitle2 {
  color: var(--color-9);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 0.9em;
  padding-bottom: 0.8em;
}

.tableBanner .tableBannerConter .conter2 .spanheight .nowShop1,
.tableBanner .tableBannerConter .conter2 .spanheight .nowShop2,
.tableBanner .tableBannerConter .conter2 .spanheight .nowShop3,
.tableBanner .tableBannerConter .conter2 .spanheight .nowShop4 {
  align-items: center;
  border-radius: 0.2em;
  color: #fff;
  display: flex;
  font-size: 0.7em;
  font-weight: 700;
  height: 2em;
  justify-content: center;
  line-height: 0.7em;
  width: 8em;
}

.tableBanner .tableBannerConter .conter2 .spanheight .nowShop1 {
  background: linear-gradient(315deg, #93dd9b, #3ddc88);
}

.tableBanner .tableBannerConter .conter2 .spanheight .nowShop2 {
  background: linear-gradient(135deg, #006cff, #60b5ff);
}

.tableBanner .tableBannerConter .conter2 .spanheight .nowShop3 {
  background: linear-gradient(135deg, #041328, #443577);
}

.tableBanner .tableBannerConter .conter2 .spanheight .nowShop4 {
  background: linear-gradient(315deg, #ffc266, #ff6e00);
}

.table-content {
  display: flex;
  flex-direction: column;
  margin-top: 3em;
  width: 1295px;
}

.table-content.phone-table-content {
  display: none;
  width: 100%;
}



.table-content .table-title {
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.table-content .table-title .table-li {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--color-6);
  border-top: 1px solid var(--color-6);
  padding: 1.6em 0px;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 0.8em;
  white-space: nowrap;
  color: var(--color-9);
}

.table-content .table-title .table-li:last-child {
  border-right: 1px solid var(--color-6);
}

.table-content table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}

.table-content .table {
  border-bottom: 1px solid var(--color-6);
  position: sticky;
  background: #f5f7fa;
  transition: top .3s ease;
}

.table-content .table .table-01-title {
  background: var(--color-6);
  position: sticky;
  transition: top .3s ease;
}

.table-content .table .table-01-title td {
  align-items: center;
  color: var(--color-1);
  display: flex;
  font-size: 1em;
  font-weight: 700;
  line-height: 1em;
  padding: 1.5em 2.4em;
}

.table-content .table .table-01-content {
  border: 1px solid var(--color-6);
  border-top: none;
  display: flex;
}

.table-content .table .table-01-content:last-child {
  border-bottom: none;
}

.table-content .table .table-01-content .table-td-content {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--color-6);
  color: var(--color-6);
  font-size: 0.8em;
  font-weight: 400;
  height: 4em;
  line-height: 1.2em;
  text-align: center;
}

.table-content .table .table-01-content .table-td-content .image {
  width: 1.5em;
  height: 1.5em;
}

.table-content .table .table-01-content .table-td-content .image img {
  width: 100%;
  height: 100%;
}

.table-content .table .table-01-content .table-td-content:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-9);
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 0.8em;
  text-align: left;
}

.table-content .table .table-01-content .table-td-content:last-child {
  border-right: none;
}

/* 产品价格部分 --- end */



/* ================================我们的服务客户部分 --- star */
.client-box {
  margin-top: 4em;
  display: flex;
  justify-content: center;
}

.client-box .client-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1295px;
}

.client-box .client-warp .top-title-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.15em;
  width: 100%;
  text-align: center;
}

.client-box .client-warp .top-title-box .title {
  font-size: 2em;
  font-weight: 700;
  color: var(--color-10);
}

.client-box .client-warp .top-title-box .desc {
  font-size: 1em;
  font-weight: 400;
  color: var(--color-11);
  margin-top: 0.95em;
}

.client-box .client-warp .top-title-box .line {
  width: 5em;
  height: 0.2em;
  background-color: var(--color-12);
  border-radius: 1em;
  margin-top: 0.95em;
}

.client-item-box {
  margin-top: 3em;
}

.client-item-box .client-item-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}

.client-item-box .client-item-warp .item-img {
  height: 4.8em;
  width: 11.8em;
  border: 1px solid #ededed;
  margin-bottom: 1em;
  border-radius: 0.5em;
  overflow: hidden;
  transform: scale(1);
  transition: transform .6s ease;
  position: relative;
  z-index: 1;
}

.client-item-box .client-item-warp .item-img:hover {
  transform: scale(1.2);
  transition: transform .6s ease;
  z-index: 2;
  box-shadow: 0px 0.2em 0.7em rgba(0, 0, 0, 0.2);
}

.client-item-box .client-item-warp .item-img img {
  width: 100%;
  height: 100%;
}

.advertising-picture-box {
  height: 13em;
  background: url(../static/pictures/22.png) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2em;
}

.advertising-picture-box .advertising-picture-warp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.advertising-picture-box .advertising-picture-warp .advertising {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 13em;
  width: 100%;
}

.advertising-picture-warp .advertising .left-desc {
  font-size: 2em;
  font-weight: 700;

  color: #ffffff;
  background: linear-gradient(125deg, var(--color-8) 0%, var(--color-10) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.advertising-picture-warp .advertising .right-btn button {
  font-family: "Lexend Deca", sans-serif;
  border: none;
  background: linear-gradient(90deg, var(--color-9) 0%, var(--color-11) 100%);
  color: #ffffff;
  font-size: 0.85em;
  text-transform: capitalize;
  letter-spacing: 1px;
  padding: 0.65em 1.3em;
  cursor: pointer;
  transform: skew(15deg);
  transition: all 1s;
  opacity: 0.9;
}

.advertising-picture-warp .advertising .right-btn .main-text {
  display: inline-block;
  transform: skew(-15deg);
}

.advertising-picture-warp .advertising .right-btn button:hover {
  transform: translateY(-0.15em);
  background: linear-gradient(90deg, var(--color-9) 0%, var(--color-11) 100%);
  border-radius: 1.3em;
  padding: 0.65em 1.3em;
  animation: pulsate 1s infinite;
}

.advertising-picture-warp .advertising .right-btn button:hover span {
  display: inline-block;
  transform: translateX(0.1em);
  transition: all 1s;
}

.advertising-picture-warp .advertising .right-btn button:focus {
  outline: none;
  border-radius: 1.3em;
  animation: pulsate 1s infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0.8em 0.8em rgba(0, 0, 0, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* 我们的服务客户部分 --- end */
/* ===============================底部部分 --- star */

.footer-big-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  margin: 4em auto 0;
}

.footer-top .top-left {
  flex: 1;
  display: flex;
}

.footer-top .top-left .one {
  margin-right: 2.5em;
}

.footer-top .top-left .one .title {
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.75em;
  color: var(--color-9);
}

.footer-top .top-left .one .item-ul ul li {
  margin-top: 0.25em;
  padding: 0.5em 0;
}

.footer-top .top-left .one .item-ul ul li a {
  font-size: 0.7em;
  line-height: 1.25em;
}

.footer-top .top-right .top-tips {
  font-size: 0.875em;
  line-height: 1.25em;
  padding: 0.5em 0;
  color: rgba(47, 73, 94, 1);
  margin-bottom: 0.8em;
}

.footer-top .bottom-msg {
  display: flex;
}

.footer-top .bottom-left-qr {
  flex: 1;
}

.footer-top .bottom-left-qr .qr-box {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.footer-top .bottom-left-qr .qr-box .qr:nth-child(1) {
  margin-right: 1rem;
}

.footer-top .bottom-left-qr .qr-box .qr img {
  width: 5.6em;
  height: 5.6em;
}

.footer-top .bottom-left-qr .qr-box .qr .qr-name {
  font-size: 0.66666666rem;
  text-align: center;
  color: var(--color-9);
}

.footer-top .bottom-right-qr {
  margin-left: 3em;
  margin-top: 1em;
}

.footer-top .bottom-right-qr .top {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.footer-top .bottom-right-qr .top img {
  width: 2.5em;
  height: 2.5em;
}

.footer-top .bottom-right-qr .top .txt {
  font-size: 1.2em;
  line-height: 2em;
  margin-left: 0.75em;
  color: var(--color-9);
}

.footer-top .bottom-right-qr .bottom .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-8);
  border-radius: 0.25rem;
  height: 2.5rem;
}

.footer-top .bottom-right-qr .bottom .btn-box .search-icon img {
  width: 1.2em;
  height: 1.2em;
}

.footer-top .bottom-right-qr .bottom .btn-box .search-text {
  color: var(--color-1);
  line-height: 1.75em;
  font-size: 1.125em;
  margin-left: 1em;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5em;
  border-top: 1px solid #ccc;
  margin-bottom: 1.5em;
  width: 100%;
}

.footer-bottom .bottom-top {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.65em;
  line-height: 1.25em;
  margin-top: 2.8em;
}

.footer-bottom .bottom-top .tips {
  display: flex;
  align-items: center;
  margin: 0 2em;
}

.footer-bottom .bottom-top ul {
  display: flex;
  align-items: center;
}

.footer-bottom .bottom-top ul li {
  margin: 0 2em;
}

.footer-bottom .bottom-middle {
  display: flex;
  align-items: center;
  margin-top: 0.8em;
}

.footer-bottom .bottom-middle .one {
  font-size: 0.66666666rem;
  color: rgba(107, 114, 128, 1);
  margin: 0 2em 0 0;
  border-right: 1px solid rgba(107, 114, 128, 1);
  padding: 0 2em 0 0;
}

.footer-bottom .bottom-middle .one:last-child {
  border-right: 0px solid rgba(107, 114, 128, 1);
}

.footer-bottom .bottom-bottom {
  display: flex;
  align-items: center;
  margin-top: 0.8em;
}

.footer-bottom .bottom-bottom .left {
  font-size: 0.66666666rem;
  color: rgba(107, 114, 128, 1);
}

.footer-bottom .bottom-bottom .right {
  font-size: 0.66666666rem;
  color: rgba(107, 114, 128, 1);
  margin-left: 2em;
}

.footer-bottom .bottom-bottom .right img {
  width: 1em;
  height: 1em;
}

/* 底部部分 ---end */

/* ========================================二维码浮动部分 --- star */
.qr-box-top {
  display: none;
  position: fixed;
  bottom: 10%;
  right: 3%;
  z-index: 999999;
}

.qr-warp-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-id567 {
  width: 4.5em;
  height: 4.5em;
  background: rgb(255, 255, 255);
  border-radius: 1em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms ease;
  animation: 8s thumb-thumb infinite;
  box-shadow: 0px 0px 0.5em 0.2em rgba(135, 153, 187, 0.4);
}

.card-id567 .qrimg {
  width: 100%;
  height: 100%;
  transition: 300ms ease;
  stroke: rgb(20, 20, 20);
  opacity: 0;
}

.card-id567 .qrimg img {
  width: 100%;
  height: 100%;
}

.bold-567 {
  font-weight: bold;
}

.blurry-splash {
  position: absolute;
  inset: 0;
  width: 1.5em;
  margin: 0 auto;
  height: 2em;
  border-radius: 1rem;
  z-index: -1;
  opacity: 70%;
  filter: blur(0.75em);
  background: linear-gradient(120deg,
      rgb(81, 238, 172),
      rgb(10, 211, 127),
      rgb(8, 102, 79));
}

.prompt-id567 {
  position: absolute;
  color: rgb(29, 29, 29);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.prompt-id567 p {
  color: rgba(47, 73, 94, 1);
}

.card-id567:hover {
  cursor: none;
}

.card-id567:hover .prompt-id567 {
  transition: 300ms ease;
  opacity: 0;
}

.token-container {
  animation: 2s spinny-token-yayyy infinite;
}

.token-container img {
  width: 1.9em;
}

.card-id567:hover .qrimg {
  opacity: 1;
}

@keyframes spinny-token-yayyy {
  0% {
    transform: perspective(10em) rotateY(0deg);
  }

  100% {
    transform: perspective(10em) rotateY(360deg);
  }
}

@keyframes thumb-thumb {

  0%,
  10%,
  100% {
    transform: scale(100%);
  }

  5% {
    transform: scale(103%);
  }

  7% {
    transform: scale(97%);
  }
}

/* ========================================二维码浮动部分 --- end */


/* ================================================返回顶部 --- star */
.Btn {
  width: 2.25em;
  height: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 0.4em;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.8em;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.04em;
  border-radius: 0.5em;
  transition: all 0.3s;
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #3c5b79;
  z-index: -1;
  border-radius: 0.5em;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(133, 131, 131, 0.466);
  backdrop-filter: blur(0.2em);
}