@charset "UTF-8";
:root {
  --vw: 100vw;
  --header-h: 78px;
  /*主题色值*/
  --h-primary: 202;
  --s-primary: 40%;
  --l-primary: 58%;
  --a-primary: 1;
  --color-primary: hsla(
    var(--h-primary),
    var(--s-primary),
    var(--l-primary),
    var(--a-primary)
  );
  --color-primary-dp: hsla(
    var(--h-primary),
    calc(var(--s-primary) - 10%),
    calc(var(--l-primary) - 10%),
    var(--a-primary)
  );
  --color-primary-dk: hsla(var(--h-primary), 20%, 30%, var(--a-primary));
  --color-primary-ht: hsla(var(--h-primary), 70%, 70%);
  --color-primary-aj: hsla(
    calc(var(--h-primary) + 50),
    var(--s-primary),
    var(--l-primary),
    var(--a-primary)
  );
  --color-primary-ac: hsla(
    var(--h-primary),
    var(--s-primary),
    var(--l-primary),
    0.08
  );
  --color-primary-sd: hsla(
    var(--h-primary),
    var(--s-primary),
    var(--l-primary),
    0.2
  );
  --color-primary-ct: hsla(
    calc(var(--h-primary) + 180),
    var(--s-primary),
    var(--l-primary),
    var(--a-primary)
  );
  /*文本色*/
  --h-text: 0;
  --s-text: 0%;
  --l-text: 20%;
  --a-text: 1;
  --color-text: hsla(
    var(--h-text),
    var(--s-text),
    var(--l-text),
    var(--a-text)
  );
  --color-text-ct: hsla(var(--h-text), var(--s-text), 100%, var(--a-text));
  --color-text-ht: hsl(var(--h-text), var(--s-text), 60%);
  /*背景色*/
  --h-body: 0;
  --s-body: 0%;
  --l-body: 100%;
  --a-body: 1;
  --color-body: hsla(
    var(--h-body),
    var(--s-body),
    var(--l-body),
    var(--a-body)
  );
  --color-body-bg: hsla(
    var(--h-body),
    var(--s-body),
    var(--l-body),
    var(--a-body)
  );
  --color-body-bd: hsl(var(--h-body), var(--s-body), 0%);
  --color-body-sd: hsla(var(--h-body), var(--s-body), 0%, 0.1);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

html {
  font-size: 10px;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  font-size: 1.6rem;
  font-family: Microsoft Yahei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  text-rendering: optimizeSpeed;
}

a {
  color: var(--color-text);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
}
a:hover {
  color: var(--color-primary);
}
a:active {
  outline-width: 0;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.items-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justify-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.justify-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1201px) {
  .container {
    width: 120rem;
  }
}
@media (max-width: 1200px) {
  .container {
    width: 92%;
  }
}
@media (max-width: 992px) {
  .container {
    width: 94%;
  }
}
@media (max-width: 768px) {
  .container {
    width: 96%;
  }
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.btn {
  --size: 4.2rem;
  color: var(--color-text);
  font-size: 1.4rem;
  border-radius: 1.6rem;
  line-height: var(--size);
  padding: 0 1.6rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: var(--color-body);
  cursor: pointer;
}
@media (max-width: 992px) {
  .btn {
    --size: 3.6rem;
  }
}
.btn.btn-default {
  color: var(--color-text-ct);
  background-color: var(--color-primary);
}
.btn.btn-warning {
  color: var(--color-text-ct);
  background-color: var(--color-primary-ct);
}

.com-tit {
  --size: 4.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 992px) {
  .com-tit {
    --size: 3.2rem;
  }
}
.com-tit .h2 {
  color: var(--color-text);
  font-size: 3.2rem;
  height: var(--size);
  line-height: var(--size);
}
@media (max-width: 992px) {
  .com-tit .h2 {
    font-size: 2.4rem;
  }
}
.com-tit p {
  color: var(--color-body-ht);
  font-size: 1.8rem;
  margin-top: 1.2rem;
}
@media (max-width: 992px) {
  .com-tit p {
    font-size: 1.5rem;
  }
}

.dialog-box {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: auto;
  pointer-events: none;
  display: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 99999;
}
.dialog-box[open] {
  pointer-events: auto;
  display: block;
}
.dialog-box .dialog {
  width: 340px;
  height: 398px;
  background-color: var(--color-body);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
}
.dialog-box .dialog-top {
  width: 100%;
  height: 74px;
  color: var(--color-text-ct);
  font-size: 20px;
  font-weight: 600;
  background: url("../images/dialog-top-bg.png") no-repeat center/cover;
}
.dialog-box .dialog-code .qrcode {
  width: 210px;
  height: 210px;
  margin-top: 30px;
}
.dialog-box .dialog-code .text {
  width: 273px;
  height: 30px;
  color: var(--is-color-text-light);
  font-size: 14px;
  background-color: var(--color-body);
  border-radius: 15px;
  margin-top: 15px;
}
.dialog-box .dialog-code .text span {
  color: var(--color-primary-ct);
}
.dialog-box .dialog .close {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 12px;
  right: 12px;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
}
.dialog-box .dialog .close:hover {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.dialog-box .dialog .close svg {
  width: 24px;
  height: 24px;
}
.dialog-box .dialog .close svg path {
  fill: var(--color-text-ct);
}

.sidebar {
  position: fixed;
  right: 10px;
  top: calc(50% - 9rem);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  row-gap: 3rem;
  z-index: 99;
}
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
.sidebar .item {
  width: 5rem;
  border-radius: 2.6rem;
  padding: 1.2rem;
  position: relative;
  cursor: pointer;
}
.sidebar .item:hover .item-popup {
  display: block;
  pointer-events: auto;
}
.sidebar .item.wechat {
  background: linear-gradient(135deg, var(--color-primary) 10%, var(--color-primary-sd) 100%);
}
.sidebar .item.wechat .wechat-box span {
  color: var(--color-text-ct);
}
.sidebar .item.call {
  background-color: var(--color-body);
  -webkit-box-shadow: 0px 0.5rem 1rem 0 var(--color-body-sd);
          box-shadow: 0px 0.5rem 1rem 0 var(--color-body-sd);
}
.sidebar .item .svg {
  width: 2.2rem;
  height: 2.2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.sidebar .item span {
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1.2;
}
.sidebar .item-popup {
  position: absolute;
  right: 7rem;
  background-color: var(--color-body);
  -webkit-box-shadow: 0px 0.5rem 1.4rem 0 rgba(153, 153, 153, 0.25);
          box-shadow: 0px 0.5rem 1.4rem 0 rgba(153, 153, 153, 0.25);
  border-radius: 0.8rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: none;
  pointer-events: none;
}
.sidebar .item-popup::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  -webkit-transform: rotate(45deg) translateY(-50%);
      -ms-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  background-color: var(--color-body);
  top: 50%;
}
.sidebar .item-popup.ewm-popup {
  bottom: -6rem;
  width: 17rem;
}
.sidebar .item-popup.ewm-popup .ewm-title {
  width: 100%;
  padding: 0.8rem 0;
  background-color: rgba(41, 121, 255, 0.1);
  border-radius: 0.8rem 0.8rem 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sidebar .item-popup.ewm-popup .ewm-title h2 {
  color: var(--color-primary);
  font-size: 16px;
  border-bottom: 1px solid var(--color-primary);
}
.sidebar .item-popup.ewm-popup .ewm-title svg {
  width: 2.2rem;
  height: 2.2rem;
  margin-left: 0.8rem;
}
.sidebar .item-popup.ewm-popup .ewm-title svg path {
  fill: var(--color-primary);
}
.sidebar .item-popup.ewm-popup .ewm-img {
  width: 100%;
  margin: 0.8rem 0 0.4rem 0;
}
.sidebar .item-popup.ewm-popup .ewm-img img {
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 0.4rem;
  overflow: hidden;
  display: block;
  margin: auto;
}
.sidebar .item-popup.ewm-popup h3 {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.sidebar .item-popup.phone-popup {
  bottom: 0.8rem;
  width: 20rem;
  padding: 1.6rem;
}
.sidebar .item-popup.phone-popup .phone-title {
  font-size: 1.4rem;
  color: #7e8ea9;
  line-height: 2.2rem;
  margin-bottom: 0.8rem;
}
.sidebar .item-popup.phone-popup .phone-num {
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.2rem;
}

.header {
  width: 100vw;
  height: var(--header-h);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 992px) {
  .header {
    height: calc(var(--header-h) * 0.8);
    background-color: var(--color-body);
    border-bottom: 1px solid var(--color-body-sd);
  }
}
.header.active {
  padding-top: 0px;
  background-color: var(--color-body);
  -webkit-backdrop-filter: saturate(180%) blur(1rem);
          backdrop-filter: saturate(180%) blur(1rem);
}
.header .logo {
  width: auto;
  height: 6rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 992px) {
  .header .logo {
    height: 4.5rem;
  }
}
.header .logo img {
  height: 100%;
}
.header .navbar {
  margin-right: 7rem;
}
@media (max-width: 992px) {
  .header .navbar {
    display: none;
  }
}
.header .navbar li {
  margin: 0 2rem;
}
.header .navbar li a {
  font-size: 1.6rem;
}

.footer {
  position: relative;
  background: var(--color-body-bd);
  text-align: center;
  padding: 1.6rem 0;
}
.footer span {
  color: var(--color-text-ct);
  font-size: 1.4rem;
}

.banner {
  --h: 70rem;
  width: 100%;
  height: var(--h);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(42.19%, var(--color-body)), to(var(--color-primary-ac)));
  background: linear-gradient(180deg, var(--color-body) 42.19%, var(--color-primary-ac) 100%);
  position: relative;
  overflow: hidden;
}
@media (max-width: 992px) {
  .banner {
    --h: 60rem;
  }
}
@media (max-width: 768px) {
  .banner {
    --h: 50rem;
  }
}
.banner-wrap {
  position: relative;
}
.banner-wrap .text,
.banner-wrap .img {
  position: absolute;
}
@media (min-width: 993px) {
  .banner-wrap .text,
  .banner-wrap .img {
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media (max-width: 992px) {
  .banner-wrap .text,
  .banner-wrap .img {
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (min-width: 993px) {
  .banner-wrap .text {
    width: 50%;
    left: 0;
  }
}
@media (max-width: 992px) {
  .banner-wrap .text {
    width: 100%;
    text-align: center;
    top: calc(var(--header-h) + 3vw);
  }
}
.banner-wrap .text .title {
  height: 5rem;
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 1.8rem;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(92.06deg, rgb(51, 194, 255) -17.9%, rgb(37, 124, 255) 43.39%, rgb(22, 93, 255) 99.4%) text;
}
@media (max-width: 768px) {
  .banner-wrap .text .title {
    height: 3rem;
    font-size: 2.4rem;
    margin-bottom: 1rem;
  }
}
.banner-wrap .text .tips {
  font-size: 2.2rem;
  line-height: 3.2rem;
  margin-bottom: 7rem;
}
@media (max-width: 768px) {
  .banner-wrap .text .tips {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 3rem;
  }
}
@media (max-width: 768px) {
  .banner-wrap .text .btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.banner-wrap .text .btns button + button {
  margin-left: 1.5rem;
}
@media (min-width: 993px) {
  .banner-wrap .img {
    width: 54rem;
    right: 0;
  }
}
@media (max-width: 992px) {
  .banner-wrap .img {
    width: 88%;
    bottom: -3%;
  }
}
.banner-wrap .img img {
  background-color: var(--color-body);
  -webkit-box-shadow: 0 2rem 6rem 2rem var(--color-primary-ac);
          box-shadow: 0 2rem 6rem 2rem var(--color-primary-ac);
  padding: 1.2rem;
  border-radius: 1.6rem;
}

.func {
  padding: calc(var(--vw) * 0.075);
  position: relative;
}
.func-list {
  margin-top: calc(var(--vw) * 0.045);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem;
}
@media (max-width: 992px) {
  .func-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}
.func-list li {
  width: 100%;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.func-list li:hover .icon {
  -webkit-transform: translateY(-1rem);
      -ms-transform: translateY(-1rem);
          transform: translateY(-1rem);
}
.func-list li .icon {
  width: 7rem;
  height: 7rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .func-list li .icon {
    width: 5rem;
    height: 5rem;
  }
}
.func-list li .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.func-list li .text {
  max-width: 100%;
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 768px) {
  .func-list li .text {
    margin-top: 1.2rem;
  }
}
.func-list li .text h4 {
  --ih: 2.8rem;
  height: var(--ih);
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 400;
  line-height: var(--ih);
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .func-list li .text h4 {
    --ih: 2rem;
    margin-bottom: 0.8rem;
  }
}
.func-list li .text p {
  color: var(--color-text-ht);
}
@media (max-width: 768px) {
  .func-list li .text p {
    font-size: 1.5rem;
  }
}

.advan {
  padding: calc(var(--vw) * 0.0625);
  background: url(../images/advan_bg.jpg) no-repeat center/cover;
  position: relative;
}
.advan .com-tit .h2,
.advan .com-tit p {
  color: var(--color-text-ct);
}
.advan-wp {
  margin-top: calc(var(--vw) * 0.035);
  display: grid;
}
@media (min-width: 993px) {
  .advan-wp {
    grid-template-columns: repeat(3, 1fr);
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
}
@media (max-width: 992px) {
  .advan-wp {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 2.4rem;
  }
}
@media (max-width: 768px) {
  .advan-wp {
    row-gap: 1.6rem;
  }
}
.advan-wp .advan-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 2.4rem;
}
@media (max-width: 768px) {
  .advan-wp .advan-list {
    row-gap: 1.6rem;
  }
}
.advan-wp .advan-list .item {
  border-radius: 0.6rem;
  background-color: rgba(250, 250, 250, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2.4rem 3rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.advan-wp .advan-list .item:hover {
  -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
          transform: translateY(-8px);
  border-color: var(--color-body);
}
.advan-wp .advan-list .item .icon {
  width: 5.2rem;
  height: 5.2rem;
  margin-bottom: 1.2rem;
}
.advan-wp .advan-list .item .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.advan-wp .advan-list .item .text {
  max-width: 100%;
  padding-bottom: 0.4rem;
}
.advan-wp .advan-list .item .text h4 {
  height: 2.8rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-ct);
  line-height: 2.8rem;
  margin-bottom: 1.2rem;
}
.advan-wp .advan-list .item .text p {
  height: 4.8rem;
  font-size: 1.4rem;
  color: var(--color-text-ct);
  line-height: 2.4rem;
  letter-spacing: 0;
}
@media (max-width: 992px) {
  .advan-wp .advan-ani {
    display: none;
  }
}
.advan-wp .advan-ani .ani-box {
  position: relative;
}
.advan-wp .advan-ani .ani-box .imgs {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.advan-wp .advan-ani .ani-box .imgs .bg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.advan-wp .advan-ani .ani-box .imgs.main {
  width: 34rem;
  height: 34rem;
}
.advan-wp .advan-ani .ani-box .imgs.i1 {
  width: 9.6rem;
  height: 18.6rem;
  position: absolute;
  top: 2rem;
  right: 1.2rem;
}
.advan-wp .advan-ani .ani-box .imgs.i2 {
  width: 4rem;
  height: 6rem;
  position: absolute;
  top: 1.4rem;
  left: 9.4rem;
}
.advan-wp .advan-ani .ani-box .imgs.i3 {
  width: 4.8rem;
  height: 5.6rem;
  position: absolute;
  top: 3.6rem;
  left: 1.4rem;
}

.service {
  padding: calc(var(--vw) * 0.075);
  background-color: hsl(var(--h-body), var(--s-body), 98%);
  position: relative;
}
.service-list {
  margin-top: calc(var(--vw) * 0.035);
  display: grid;
}
@media (min-width: 993px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
}
@media (max-width: 992px) {
  .service-list {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 3rem;
  }
}
.service-list .item {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  background-color: var(--color-body);
  padding: 4rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  cursor: pointer;
}
.service-list .item:hover {
  -webkit-animation: scale 0.5s 1;
          animation: scale 0.5s 1;
  -webkit-box-shadow: 0 0.7rem 1.8rem 0 rgba(154, 154, 154, 0.3);
          box-shadow: 0 0.7rem 1.8rem 0 rgba(154, 154, 154, 0.3);
}
.service-list .item:nth-child(1) {
  background: url("../images/no-computer.png") no-repeat 92% 3.2rem;
  background-size: 5rem;
  background-color: var(--color-body);
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.service-list .item:nth-child(1):hover {
  background: url("../images/computer.png") no-repeat 92% 32px;
  background-size: 5rem;
  background-color: var(--color-body);
}
.service-list .item:nth-child(2) {
  background: url("../images/no-heart.png") no-repeat 92% 3.2rem;
  background-size: 5rem;
  background-color: var(--color-body);
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}
.service-list .item:nth-child(2):hover {
  background: url("../images/heart.png") no-repeat 92% 32px;
  background-size: 5rem;
  background-color: var(--color-body);
}
.service-list .item .h4 {
  --ih: 2.2rem;
  height: var(--ih);
  color: var(--color-text);
  font-size: var(--ih);
  font-weight: 400;
  line-height: 5.4rem;
  margin-bottom: 3.8rem;
  margin-top: 3rem;
}
.service-list .item .desc {
  color: var(--color-text-ht);
  font-weight: 400;
  line-height: 3.2rem;
}

.free {
  width: 100vw;
  padding: 3.5rem 0 4.5rem;
  background: url("../images/free_bg.jpg") no-repeat center/cover;
}
.free-title {
  color: var(--color-text-ct);
  font-size: 3.6rem;
  line-height: 6.4rem;
  text-align: center;
}
@media (max-width: 768px) {
  .free-title {
    font-size: 2.4rem;
    line-height: 3.8rem;
  }
}
.free-inner {
  margin: 2rem auto;
}
@media (max-width: 768px) {
  .free-inner {
    margin: 1rem auto;
  }
}
.free-inner .user-img {
  width: 6.4rem;
  height: 15rem;
  margin-right: 4.2rem;
}
@media (max-width: 768px) {
  .free-inner .user-img {
    display: none;
  }
}
.free-inner .modal-box {
  width: 45.5rem;
  height: 15.5rem;
}
@media (min-width: 993px) {
  .free-inner .modal-box {
    padding: 1.7rem 3.4rem 2.2rem 5.2rem;
    background: url("../images/free-modal.png") no-repeat center/cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}
@media (max-width: 768px) {
  .free-inner .modal-box {
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 993px) {
  .free-inner .modal-box .intro {
    margin-right: 1.8rem;
  }
}
@media (max-width: 768px) {
  .free-inner .modal-box .intro {
    display: none;
  }
}
.free-inner .modal-box .intro .ct {
  min-width: 20rem;
  height: 2.8rem;
  color: var(--color-text-ct);
  font-size: 2rem;
  line-height: 2.8rem;
  margin-bottom: 0.9rem;
}
.free-inner .modal-box .intro .tips {
  height: 2.2rem;
  color: var(--color-text-ct);
  line-height: 2.2rem;
  margin-bottom: 1.8rem;
}
.free-inner .modal-box .qrcode {
  width: 11rem;
  height: 11rem;
  background-color: var(--color-primary-ac);
  border: 1px solid var(--color-primary);
  border-radius: 0.4rem;
  position: relative;
  cursor: pointer;
}
.free-inner .modal-box .qrcode img {
  width: 9.6rem;
  height: 9.6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}