.service-introduction-bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.service-introduction-bg1,
.service-introduction-bg2,
.service-introduction-bg3 {
  position: absolute;
  background: rgba(26, 35, 126, 0.1);
  width: 100%;
  height: 100%;
}

.service-introduction-bg1 {
  transform: rotate(45deg);
}

.service-introduction-bg2 {
  transform: rotate(-45deg);
}

.service-introduction-bg3 {
  transform: rotate(90deg);
}

.service-introduction-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: #1a237e;
  z-index: 0;
  opacity: 0.1;
}

.service-introduction-text span {
  display: inline-block;
  margin: 0 0.5rem;
}
.hero-content .button {
  background: var(--secondary-color);
  border-radius: 30px;
}

.service-introduction {
  position: relative;
  padding: 4rem 2rem;
  background: #f8f9fa;
  text-align: center;
  overflow: hidden;
}

.service-introduction .item {
  display: inline-block;
  width: 30%;
  margin: 0 1.5%;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-introduction .line {
  width: 50px;
  height: 2px;
  background: #4CAF50;
  margin: 0 auto 1rem;
}

.service-introduction h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1a237e;
}

.service-introduction p {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1.5rem;
}

.service-introduction .button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background 0.3s;
}

.service-introduction .button:hover {
  background: #388E3C;
}

.services {
  padding: 5rem 2rem;
  background: #1A365D; /* 深蓝主色 */
  color: white;
}

.feature-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

.feature-box img {
  width: 100%;
  margin-bottom: 1rem;
}

.app-showcase {
  padding: 4rem 0;
  background: #f8f9fa;
}

.app-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.order-button {
  position: fixed;
  right: 20px;
  bottom: 80px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(90deg, #168ff1 0%, #125eeb 100%);
  border-radius: 24px;
  box-shadow: 0 4px 8px rgba(255, 107, 34, 0.2);
  cursor: pointer;
  z-index: 999;
}

.order-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.order-text {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .order-button {
      bottom: 40px;
      right: 15px;
      padding: 8px 16px;
  }
  
  .order-icon {
      width: 16px;
      height: 16px;
      margin-right: 6px;
  }
  
  .order-text {
      font-size: 14px;
  }
}

/* 主标题样式 */
.mamaster-introin-title {
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 4rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 师傅介绍区域样式 */
.master-section {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.master-heading {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 60px;
}

.master-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.master-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  transition: transform 0.3s ease;
}

.master-card:hover {
  transform: translateY(-10px);
}

.card-content {
  text-align: center;
}

/*.card-title {*/
/*  color: #FFFFFF;*/
/*  font-size: 28px;*/
/*  font-weight: 600;*/
/*  margin-bottom: 20px;*/
/*  background: linear-gradient(90deg, #60A5FA 0%, #3B82F6 100%);*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*}*/

.card-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.card-btn {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 24px;
  color: #60A5FA;
  font-size: 16px;
  padding: 12px 32px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #60A5FA;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .master-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .master-section {
    padding: 40px 0;
  }

  .master-heading {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .master-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .master-card {
    height: auto;
    padding: 30px 20px;
  }

  .card-title {
    font-size: 24px;
  }

  .card-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }
}

























.top-box .color-img {
  position: relative;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}
.top-box .master-introduction {
  width: 100%;
  height: 60vh;
  position: relative;
  margin-top: -20%;
}
.top-box .master-introduction .master-introduction-bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-box .master-introduction .master-introduction-bg1,
.top-box .master-introduction .master-introduction-bg2,
.top-box .master-introduction .master-introduction-bg3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/master1.jpg');
  background-size: 100% 100%;
  background-attachment: fixed;
  opacity: 0;
}
.top-box .master-introduction .master-introduction-bg1 {
  opacity: 1;
}
.top-box .master-introduction .master-introduction-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18%;
  background: url('/images/mask-bg.png');
  z-index: 1;
}
.top-box .master-introduction .master-introduction-text {
  width: 50%;
  position: absolute;
  top: -20%;
  left: 26%;
  font-size: 2.5vw;
  font-weight: 500;
  color: #fff;
  text-align: end;
  z-index: 23;
}
.top-box .master-introduction .master-introduction-text .text1 {
  position: absolute;
  top: 0;
  left: 3%;
  font-size: 2.8vw;
  font-weight: bold;
}
.top-box .master-introduction .master-introduction-text .text2 {
  position: absolute;
  top: 0;
  left: 28%;
  font-size: 2.8vw;
  font-weight: bold;
}
.top-box .master-introduction .master-introduction-text .text3 {
 position: absolute;
 top: 0;
 right: 35%;
 font-size: 2.8vw;
 font-weight: bold;
}
.top-box .master-introduction .master-introduction-text .text4 {
  position: absolute;
  top: 0;
  right: 8%;
  font-size: 2.8vw;
  font-weight: bold;
}
.top-box .master-introduction .master-introduction-text .text5 {
  position: absolute;
  top: 0;
  right: 0;
}
.top-box .master-introduction .item {
  width: 33.33%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  text-align: center;
  z-index: 22;
  padding-top: 110px;
}
.top-box .master-introduction .item h4 {
  font-size: 1.8vw;
  color: #FFFFFF;
  font-weight: 400;
}
.top-box .master-introduction .item p {
  font-size: 1.1vw;
  height: 15%;
  display: flex;
  text-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 5%;
}
.top-box .master-introduction .item .button {
  display: block;
  position: relative;
  width: 30%;
  height: 6%;
  border: 1px solid #FFFFFF;
  font-size: 0.9vw;
  color: #FFFFFF;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.top-box .master-introduction .item .button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.top-box .master-introduction .item .button:hover {
  background: transparent;
}
.top-box .master-introduction .item .button:hover span {
  color: #000000;
  z-index: 5;
}
.top-box .master-introduction .item .button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.top-box .master-introduction .item:hover {
  background: transparent;
  z-index: 25;
}
.top-box .master-introduction .line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  right: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAASACAYAAAA+tifnAAABCUlEQVRYR+3UR04DYRCEUZODARNMjiYak7HJwcD97zTo+zclSj0HQOpZPKmqd6OZajR4qqoa+cso0RijE+PEiAkOYpJoTNEZ03RihihmiUaTTswRI+Y5iAWi0aITi0RjiU4sEyNWOIg20VilE2tEY51ObBCNTTqxRYzY5iB2iMYundgjGvt04oBodOjEITHiiIM4JhondOKUaJzRiS4x4pxDoVfHBYfCZcAVnXFNZ9zQiVtixB0HcU80+nRiQDQe6AqPdTxxEM9E44VOvBKNNzrxToz44CA+iRFDDoWvOr45FH6SfAf5HeRvkFOQS5hLmEuYS5hLmEuYS5hLmEuYS5hLmEv4n5ew+ws2RnqarmbXGwAAAABJRU5ErkJggg==);
}
.top-box .master-introduction .item1:hover ~ .master-introduction-bg-box .master-introduction-bg1 {
  background: url('/images/master1.jpg');
  background-size: 100% 100%;
  opacity: 1;
  background-attachment: fixed;
  transform: scale(1.3, 1.3);
  transition: 10s transform;
}
.top-box .master-introduction .item2:hover ~ .master-introduction-bg-box .master-introduction-bg2 {
  background: url('/images/master3.png');
  background-size: 100% 100%;
  opacity: 1;
  background-attachment: fixed;
  transform: scale(1.3, 1.3);
  transition: 10s transform;
}
.top-box .master-introduction .item3:hover ~ .master-introduction-bg-box .master-introduction-bg3 {
  background: url('/images/index/40a88826fd834cb089e07d7e3d30c79b_3.png');
  background-size: 100% 100%;
  opacity: 1;
  background-attachment: fixed;
  transform: scale(1.3, 1.3);
  transition: 10s transform;
}

.top-box .item1 {
  left: 0px;
}
.top-box .item2 {
  left: 33.33%;
}
.top-box .item3 {
  left: 66.66%;
}
a {
   text-decoration: none;
  cursor: pointer;
}


.top-box .serve-introduction-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: url(data:image/png;base64,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);
  z-index: 6;
  opacity: 0;
  background-size: cover;
  z-index: 11;
}
.top-box .serve-introduction:hover .serve-introduction-icon {
  opacity: 1;
}
.top-box .serve-introduction {
  width: 100%;
  height: 0px;
  padding-top: 40%;
  position: relative;
  overflow: hidden;
}
.top-box .serve-introduction .serve-introduction-bg {
  width: 150%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('/images/serve-introduction-bg4.jpg');
  background-size: 100% 100%;
  animation: cloud_three 5s linear infinite;
}
.top-box .serve-introduction .left,
.top-box .serve-introduction .right {
  width: 50%;
  height: 100%;
  position: absolute;
}
.top-box .serve-introduction .left {
  top: 0;
  left: 0;
}
.top-box .serve-introduction .right {
  top: 0;
  right: 0;
}
.top-box .serve-introduction .text-left {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: start;
  justify-content: center;
  padding-left: 12.3%;
}
.top-box .serve-introduction .container1 {
  width: 100%;
  height: 56.18%;
  font-size: 3.1vw;
  font-weight: 800;
  color: #000000;
  letter-spacing: 1px;
  border: 1px solid rgba(201, 211, 217, 0.35);
  background: rgba(255, 255, 255, 0.35);
}
.top-box .serve-introduction .container-main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.top-box .serve-introduction .container1,
.top-box .serve-introduction .container2,
.top-box .serve-introduction .container3,
.top-box .serve-introduction .container4 {
  position: relative;
  overflow: hidden;
}
.top-box .serve-introduction .container-hover2,
.top-box .serve-introduction .container-hover3,
.top-box .serve-introduction .container-hover4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.top-box .serve-introduction .container-bg1,
.top-box .serve-introduction .container-bg2,
.top-box .serve-introduction .container-bg3,
.top-box .serve-introduction .container-bg4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.top-box .serve-introduction .container-hover2:hover ~ .container-bg2 {
  background: url('/images/xijie1.jpg');
  background-size: 100% 100%;
  transform: scale(1.1, 1.1);
  transition: 1s transform;
}
.top-box .serve-introduction .container-hover3:hover ~ .container-bg3 {
  background: url('/images/feiyong1.jpg');
  background-size: 100% 100%;
  transform: scale(1.1, 1.1);
  transition: 1s transform;

}
.top-box .serve-introduction .container-hover4:hover ~ .container-bg4 {
  background: url('/images/huanjie.jpg');
  background-size: 100% 100%;
  transform: scale(1.1, 1.1);
  transition: 1s transform;
}
.top-box .serve-introduction .container2 {
  width: 100%;
  height: 63.82%;
  border: 1px solid rgba(201, 211, 217, 0.35);
}
.top-box .serve-introduction .container3 {
  width: 100%;
  height: 50%;
  border: 1px solid rgba(201, 211, 217, 0.35);
}
.top-box .serve-introduction .container4 {
  width: 100%;
  height: 50%;
  border: 1px solid rgba(201, 211, 217, 0.35);
}
.top-box .serve-introduction h4 {
  font-size: 2.22vw;
  font-weight: bold;
  z-index: 12;
}
.top-box .serve-introduction p {
  font-size: 1.22vw;
  font-weight: 500;
  margin-top: 0%;
  z-index: 12;
}

.top-box .home-img {
  width: 100%;
  height: 0;
  padding-top: 33%;
  background: url('/images/index/64aa3681b0f94f3b82a4bc2a68132e3f_1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}


.top-box .guarantee-box {
  width: 100%;
  height: 150vh;
  position: relative;
}
.top-box .guarantee-box .guarantee-main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.top-box .guarantee-box .roll {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 30;
}
@keyframes guarantee-transition1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes guarantee-transition2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes guarantee-transition3 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.top-box .guarantee-box .guarantee-transition1 {
  animation: guarantee-transition1 2s;
}
.top-box .guarantee-box .guarantee-transition2 {
  animation: guarantee-transition2 2s;
}
.top-box .guarantee-box .guarantee-transition3 {
  animation: guarantee-transition3 2s;
}
.top-box .guarantee-box .guarantee-transition {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  transform: translateX(-100%);
  display: flex;
}
.top-box .guarantee-box .guarantee-transition .c-visual_shape {
  width: 60%;
  height: 100%;
  transform-origin: right;
  opacity: 0.85;
  background: linear-gradient(114deg, rgba(39, 132, 249, 0), rgba(39, 132, 249, 0.8) 30%, rgba(52, 85, 252, 0.8) 80%, rgba(52, 85, 252, 0) 110%);
}
.top-box .guarantee-box .guarantee-transition .bai {
  width: 50%;
  height: 100%;
  transform-origin: right;
  background: #fff;
}
.top-box .guarantee-box .guarantee-transition .c-visual_shape2 {
  width: 40%;
  height: 100%;
  transform-origin: right;
  opacity: 0.85;
  background: linear-gradient(114deg, rgba(39, 132, 249, 0), rgba(39, 132, 249, 0.8) 30%, rgba(52, 85, 252, 0.8) 80%, rgba(52, 85, 252, 0) 110%);
}
.top-box .guarantee-box .roll-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  display: flex;
}
.top-box .guarantee-box .roll-box1 {
  transform: translateX(33.33%);
  transition: transform 2s;
}
.top-box .guarantee-box .roll-box2 {
  transform: translateX(-40%);
  transition: transform 2s;
}
.top-box .guarantee-box .roll-box3 {
  transform: translateX(-100%);
  transition: transform 2s;
}
.top-box .guarantee-box .c-visual_shape {
  width: 20%;
  height: 100%;
  transform-origin: right;
  opacity: 0.85;
  background: linear-gradient(114deg, rgba(39, 132, 249, 0), rgba(39, 132, 249, 0.8) 30%, rgba(52, 85, 252, 0.8) 80%, rgba(52, 85, 252, 0) 110%);
}
.top-box .guarantee-box .c-visual_shape2 {
  width: 10%;
  height: 100%;
  transform-origin: left;
  opacity: 0.85;
  background: linear-gradient(114deg, rgba(39, 132, 249, 0), rgba(39, 132, 249, 0.8) 30%, rgba(52, 85, 252, 0.8) 80%, rgba(52, 85, 252, 0) 110%);
}
.top-box .guarantee-box .bai {
  width: 20%;
  height: 100%;
  background: #fff;
}
.top-box .guarantee-box .blank {
  width: 30%;
  height: 100%;
}
.top-box .guarantee-box .guarantee-content {
  width: 100%;
  height: 60.66%;
  position: sticky;
  top: 140px;
}
.top-box .guarantee-box .guarantee-content h3 {
  font-size: 3.33vw;
  font-weight: 800;
  color: #000000;
  margin: 6% 0 0 7%;
}
.top-box .guarantee-box .guarantee-content .guarantee-img {
  width: 56.5%;
  height: 56%;
  position: absolute;
  top: 20%;
  left: 7%;
  z-index: 10;
  overflow: hidden;
}
.top-box .guarantee-box .guarantee-content .guarantee-img .guarantee-img-box {
  width: 300%;
  height: 100%;
  display: flex;
}
@keyframes guarantee-img-1 {
  0% {
    transform: translateX(-33.33%);
  }
  50% {
    transform: translateX(-33.33%);
  }
  51% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes guarantee-img-2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(0px);
  }
  51% {
    transform: translateX(-33.33%);
  }
  100% {
    transform: translateX(-33.33%);
  }
}
@keyframes guarantee-img-3 {
  0% {
    transform: translateX(-33.33%);
  }
  50% {
    transform: translateX(-33.33%);
  }
  51% {
    transform: translateX(-66.66%);
  }
  100% {
    transform: translateX(-66.66%);
  }
}
.top-box .guarantee-box .guarantee-content .guarantee-img .guarantee-img-box1 {
  animation: guarantee-img-1 1s;
  transform: translateX(0px);
}
.top-box .guarantee-box .guarantee-content .guarantee-img .guarantee-img-box2 {
  animation: guarantee-img-2 1s;
  transform: translateX(-33.33%);
}
.top-box .guarantee-box .guarantee-content .guarantee-img .guarantee-img-box3 {
  animation: guarantee-img-3 1s;
  transform: translateX(-66.66%);
}
.top-box .guarantee-box .guarantee-content .guarantee-img img {
  width: 33.33%;
  height: 100%;
  object-fit: cover;
}
.top-box .guarantee-box .guarantee-content .guarantee-title {
  width: 25%;
  height: 19.8%;
  position: absolute;
  top: 20%;
  left: 63.5%;
  z-index: 12;
}
.top-box .guarantee-box .guarantee-content .guarantee-title .guarantee-title-item {
  width: 100%;
  height: 11%;
  border-left: 1px solid #C7CACE;
  font-size: 0.88vw;
  color: #C7CACE;
  margin: 4.3% 0 4.3% 18%;
  padding-left: 4.5%;
  cursor: pointer;
}
.top-box .guarantee-box .guarantee-content .guarantee-title .select {
  font-size: 1vw;
  font-weight: 600;
  border-left: 1px solid #000;
  color: #000;
}
.top-box .guarantee-box .guarantee-content .guarantee-text {
  width: 30%;
  height: 46.5%;
  position: absolute;
  background: #fff;
  padding-left: 3.2%;
  top: 43%;
  left: 58.5%;
  z-index: 12;
  color: #000000;
  overflow: hidden;
}
.top-box .guarantee-box .guarantee-content .guarantee-text .guarantee-text-content {
  height: 300%;
}
.top-box .guarantee-box .guarantee-content .guarantee-text .guarantee-text-item {
  height: 33.3%;
}
.top-box .guarantee-box .guarantee-content .guarantee-text .serial-number {
  margin-top: 12%;
  display: flex;
  /*align-items: center;*/
  font-size: 18px;
  font-weight: 600;
  align-content: space-around;
  flex-wrap: wrap;
  flex-direction: column;
}
.top-box .guarantee-box .guarantee-content .guarantee-text .serial-number .line {
  width: 75px;
  height: 1px;
  background: #C7CACE;
  margin-right: 24px;
}
.top-box .guarantee-box .guarantee-content .guarantee-text h4 {
  font-size: 1.77vw;
  font-weight: 600;
  margin-top: 10%;
  margin-bottom: 6%;
}
.top-box .guarantee-box .guarantee-content .guarantee-text p {
  font-size: 1.1vw;
  font-weight: 400;
  line-height: 1.8vw;
  color: #000000;
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.top-box .guarantee-box .guarantee-content .guarantee-text-content1 {
  transform: translateY(0px);
  animation: fadeIn1 2s;
}
.top-box .guarantee-box .guarantee-content .guarantee-text-content2 {
  transform: translateY(-39%);
  animation: fadeIn2 2s;
}
.top-box .guarantee-box .guarantee-content .guarantee-text-content3 {
  transform: translateY(-78%);
  animation: fadeIn3 2s;
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom {
  width: 100%;
  height: 28%;
  background: #F1F7FB;
  position: absolute;
  bottom: 0;
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .button {
  width: 15.8%;
  height: 26%;
  background: #000000;
  position: absolute;
  bottom: 60%;
  left: 42.7%;
  color: #fff;
  font-size: 1.1vw;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .button span {
  z-index: 2;
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #0ab0ed;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .button:hover {
  color: white;
  background: transparent;
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.top-box .guarantee-box .guarantee-content .guarantee-bottom .arrow {
  width: 6%;
  height: 20%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABXklEQVQ4T6XUvasPYBjG8c9FLAaxyCKrMim7wURINjGQojMohQWLMliQRUoZZFDykpdVVv4ANlaTkgzIpUe/U8fLefkd9/LUc9/Pt/vleu6Yx9rewAl8xuEkj+aLnb3PQgFtL+I8fuB0kmsLxS8IGw/bHsFNrMJ1nEoy4H/ZorAJcCfuYy0e42CSL3/SlgSbALfiGTbhNfYk+TAXuGTYBLgRT7EN77EryZslDeBffWm7BvewGx9xIMmLETtVZrPwtisnw5jBVxxLcidtR93DuRxbP0momBmw7/8Bm5vA2V9ltl1OuUPQ5yaCPpPk6tSQtqtxa3wxDK0dSvJw6gG0XYcH2IHR671JXk0tjbab8Rxb8HaisXdTi7btdjzBBrzE/iRDY7/Zoj1ruw93McQ6zqNJhram++htT+IKVuBSkgvLWkFtL+MsvuF4ktuLqXreMtuOdTN22NcknxYDDf9PVjtt6+M/eNcAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  margin-left: 6%;
  margin-top: 1%;
  z-index: 2;
}



.top-box .wsf-data {
  width: 100%;
  height: 0;
  padding-top: 74.8%;
  position: relative;
}
.top-box .wsf-data video {
  position: absolute;
  width: 52.25%;
  height: 75.9%;
  left: 23.87%;
  top: 12.05%;
}
.top-box .wsf-data img {
  position: absolute;
  width: 58.25%;
  height: 75.9%;
  left: 19.87%;
  top: 12.05%;
}

.top-box .wsf-data .wsf-data-left {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.top-box .wsf-data .wsf-data-left p {
  width: 74%;
  font-size: 3.1vw;
  font-weight: 800;
  color: #000;
  margin-bottom: 3%;
}
.top-box .wsf-data .wsf-data-right {
  width: 50%;
  height: 100%;
  padding-left: 5%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #000;
  font-size: 1.8vw;
  font-weight: 500;
}
.top-box .wsf-data .wsf-data-right h5 {
  font-size: 1vw;
  font-weight: 800;
  line-height: 1vw;
  margin-bottom: 2%;
}
.top-box .wsf-data .wsf-data-right .title {
  display: flex;
  align-items: baseline;
}
.top-box .wsf-data .wsf-data-right .title div {
  font-size: 4.1vw;
  font-weight: 800;
}
.top-box .wsf-data .wsf-data-right .title b {
  font-weight: 800;
}
.top-box .wsf-data .wsf-data-right p {
  width: 72%;
  font-size: 1.1vw;
  font-weight: 500;
  color: #000;
  margin-bottom: 8%;
}


.learn-more {
  width: 100%;
  height: 0;
  padding-top: 47.9%;
  position: relative;
  top: -150px;
}
@keyframes cloud {
  0% {
    left: -85%;
  }
  100% {
    left: 40%;
  }
}
.learn-more .learn-more-content-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/home-bg4.png');
  animation: cloud 10s linear infinite;
}
.learn-more .learn-more-title {
  position: absolute;
  top: 12.8%;
  left: 10.5%;
  width: 68.75%;
  height: 70%;
  background: url('/images/home-bg3.jpg');
  background-size: cover;
  overflow: hidden;
}
.learn-more .learn-more-title h4 {
  margin: 5% 0 0 7%;
  font-size: 2.33vw;
  font-weight: bold;
  color: #FFFFFF;
}
.learn-more .learn-more-title span {
  z-index: 2;
}
.learn-more .learn-more-title .button {
  width: 19%;
  height: 12%;
  border: 1px solid rgba(255, 255, 255, 0.58);
  font-size: 1.1vw;
  font-weight: 400;
  color: #FFFFFF;
  position: absolute;
  top: 10%;
  right: 7%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.learn-more .learn-more-title .button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #0ab0ed;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.learn-more .learn-more-title .button:hover {
  color: white;
  background: transparent;
  border: none;
}
.learn-more .learn-more-title .button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.learn-more .learn-more-title .button .arrow {
  width: 6%;
  height: 20%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABXklEQVQ4T6XUvasPYBjG8c9FLAaxyCKrMim7wURINjGQojMohQWLMliQRUoZZFDykpdVVv4ANlaTkgzIpUe/U8fLefkd9/LUc9/Pt/vleu6Yx9rewAl8xuEkj+aLnb3PQgFtL+I8fuB0kmsLxS8IGw/bHsFNrMJ1nEoy4H/ZorAJcCfuYy0e42CSL3/SlgSbALfiGTbhNfYk+TAXuGTYBLgRT7EN77EryZslDeBffWm7BvewGx9xIMmLETtVZrPwtisnw5jBVxxLcidtR93DuRxbP0momBmw7/8Bm5vA2V9ltl1OuUPQ5yaCPpPk6tSQtqtxa3wxDK0dSvJw6gG0XYcH2IHR671JXk0tjbab8Rxb8HaisXdTi7btdjzBBrzE/iRDY7/Zoj1ruw93McQ6zqNJhram++htT+IKVuBSkgvLWkFtL+MsvuF4ktuLqXreMtuOdTN22NcknxYDDf9PVjtt6+M/eNcAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  margin-left: 6%;
  margin-top: 1%;
  z-index: 2;
}
.learn-more .learn-more-content {
  position: absolute;
  top: 35.1%;
  left: 16.8%;
  width: 66.66%;
  height: 57%;
  background: #fff;
  z-index: 12;
  overflow: auto;
}
.learn-more .learn-more-content .learn-more-content-item {
  width: 100%;
  min-height: 62px;
  color: #000000;
  display: flex;
  padding-top: 2.9%;
}
.learn-more .learn-more-content .learn-more-content-item .item-title {
  width: 21%;
  height: 100%;
  font-size: 1.44vw;
  font-weight: 800;
  text-align: center;
  color: #000000;
}
.learn-more .learn-more-content .learn-more-content-item .item-list {
  width: 83%;
  font-size: 1vw;
  line-height: 2vw;
  border-bottom: 1px solid #C7CACE;
  padding-bottom: 2.8%;
  position: relative;
}
.learn-more .learn-more-content .learn-more-content-item .item-list .title-link {
  position: absolute;
  right: 4%;
  top: 0;
  font-size: 1vw;
  color: #000000;
  height: 18px;
}
.learn-more .learn-more-content .learn-more-content-item .item-list .title-link a {
  display: flex;
  align-items: center;
}
.learn-more .learn-more-content .learn-more-content-item .item-list .title-link .more-arrow {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAqUlEQVQ4T6XTMQ4BURSF4W8aegWNSmUfVCQSC9Dr6GxAwxYk7IDOHmxCr9FTySteMhEz88y8+tz/5txzXqbhyxrOKwNs0MIer6JFZYABrnhgjucvSJWFDi7oYYL7N6QKEPRtHDHGDLc8JAUQ9EG3xRoLnCMkD1hhWJFKsNHHEodIjjONAWXLkywUAcIRTxjVOWKMsYvpvzE2LlKs8g7vOlVO+mepRSqEfQD7URoRzMEGzQAAAABJRU5ErkJggg==);
  background-size: 100% 100%;
}
.learn-more .learn-more-content .learn-more-content-item .item-list a {
  color: #000;
}
.learn-more .learn-more-content::-webkit-scrollbar {
  width: 5px;
  height: 92px;
  background: #DCE2E6;
}
.learn-more .learn-more-content::-webkit-scrollbar-track {
  background: #DCE2E6;
}
.learn-more .learn-more-content::-webkit-scrollbar-thumb {
  background: #000;
}
.learn-more .learn-more-content::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.learn-more .learn-more-content::-webkit-scrollbar-corner {
  background: #F1F7FB;
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-content {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hero-stats {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.stat-item {
  padding: 0 30px;
  border-right: 1px solid rgba(255,255,255,0.3);
  text-align: center;
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffcc00;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
}

.hero-description {
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.hero-description p {
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.button {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.primary-btn {
  background-color: #ffcc00;
  color: #333;
}

.primary-btn:hover {
  background-color: #f0c000;
  transform: translateY(-2px);
}

.secondary-btn {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.secondary-btn:hover {
  background-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1.2rem;
  }
  
  .stat-item {
    padding: 0 15px;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }
}

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

/* 容器样式 */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px;
}

/* 网格布局 */
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
  height: 300px;
}

.card:hover {
  transform: translateY(-0px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  height: 100%;
}

/* 卡片头部 */
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.card-title {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
}

/* 卡片内容 */
.card-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 列表样式 */
.feature-list {
  list-style: none;
  margin-bottom: 20px;
  flex: 1;
}

.feature-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  margin-top: 2px;
}

.feature-text {
  flex: 1;
}
.feature-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #115cf4;
}
/* 图片容器 */
.image-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 16px;
  height: 160px;
  overflow: hidden;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* 主题颜色 */
.theme-blue .card-header {
}

 .card-title {
  color: #0B0B0B;
}

.theme-blue .check-icon {
  background-color: #dbeafe;
  color: #1a56db;
}

.theme-green .card-header {
}

.theme-green .check-icon {
  background-color: #d1fae5;
  color: #047857;
}

.theme-purple .card-header {
}

.theme-purple .check-icon {
  background-color: #ede9fe;
  color: #6d28d9;
}

.theme-amber .card-header {
}

.theme-amber .check-icon {
  background-color: #fef3c7;
  color: #d97706;
}

/* 响应式调整 */
@media (max-width: 767px) {
  .card-content {
    flex-direction: column;
  }

  .image-container {
    height: 120px;
    margin-top: 16px;
  }
  .top-box .master-introduction {
    width: 100%;
    height: 40vh;
    position: relative;
    margin-top: -16%;
  }
  .top-box .guarantee-box .guarantee-content {
    width: 100%;
    height: 40vh;
    position: relative;
  }
  .top-box .guarantee-box {
    width: 100%;
    height: 40vh;
    position: relative;
  }
  .top-box .guarantee-box .guarantee-content {
    top: 40px
  }

  .top-box .guarantee-box .guarantee-content .guarantee-text h4 {
    font-size: 2.77vw;
  }
  .top-box .guarantee-box .guarantee-content .guarantee-text p {
    font-size: 1.8vw;
    font-weight: 400;
    line-height: 1.8vw;
    color: #000000;
  }
  .top-box .guarantee-box .guarantee-content .guarantee-text {
    width: 35%;
  }

  .top-box .master-introduction .master-introduction-text {
    width: 80%;
    position: absolute;
    top: -28%;
    left: 10%;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: end;
    z-index: 23;
  }
  .top-box .master-introduction .master-introduction-text .text1 {
    position: absolute;
    top: 0;
    left: 5%;
    font-size: 20px;
  }
  .top-box .master-introduction .master-introduction-text .text2 {
    position: absolute;
    top: 0;
    left: 20%;
    font-size: 20px;
  }
  .top-box .master-introduction .master-introduction-text .text3 {
    position: absolute;
    top: 0;
    right: 35%;
	font-size: 20px;
  }
  .top-box .master-introduction .master-introduction-text .text4 {
    position: absolute;
    top: 0;
    right: 50%;
    font-size: 20px;
  }
  .top-box .master-introduction .item {
    width: 100% !important;
    height: 33.3% !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 100%);
    position: absolute;
    /* top: 0; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    text-align: center;
    z-index: 22;
    padding-top: 30px;
    left: 0;
    gap: 20px;
  }
  .top-box .item1 {
    top: 0px !important;
  }
  .top-box .item2 {
    top: 33.33% !important;
  }
  .top-box .item3 {
    top: 66.66% !important;
  }

  .top-box .master-introduction .item h4 {
    font-size: 18px !important;
    color: #FFFFFF;
    font-weight: 400;
  }
  .top-box .master-introduction .item p {
    font-size: 12px !important;
    height: 15%;
    display: flex;
    text-align: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5%;
  }
}

/* 卡片内容布局 */
.card-body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .card-body {
    flex-direction: row;
  }

  .feature-list {
    flex: 1;
  }

  .image-container {
    width: 30%;
  }
}

/* 修改现有的背景样式 */
.master-introduction-bg-box .master-introduction-bg1,
.master-introduction-bg-box .master-introduction-bg2,
.master-introduction-bg-box .master-introduction-bg3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease, transform 10s ease;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.master-introduction-bg1 {
    background: url('/images/master1.jpg') !important;
    background-size: 100% 100% !important;
}

.master-introduction-bg2 {
    background: url('/images/master3.png') !important;
    background-size: 100% 100% !important;
}

.master-introduction-bg3 {
    background: url('/images/index/40a88826fd834cb089e07d7e3d30c79b_3.png') !important;
    background-size: 100% 100% !important;
}

/* 活跃状态的背景 */
.master-introduction-bg-box .active {
    opacity: 1;
    transform: scale(1.3, 1.3);
}

/* 在移动端时启用自动轮播 */
@media (max-width: 768px) {
    .master-introduction-bg-box {
        position: relative;
        overflow: hidden;
    }
}