header {
  width: 100%;
  padding: 0 var(--nav-x-pc);
  position: fixed;
  top: 0;
  z-index: 99;
  background: transparent;
  transition: all 0.5s;
}
header .header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2vw 0;
}
header .header-box .websit-logo {
  width: calc(100px + 6.77vw);
  z-index: 99;
}
header .header-box .header-text-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5.2vw;
  z-index: 99;
}
header .header-box .header-text-box .nav-phone {
  color: #fff;
  font-size: var(--text-font-size-24);
  padding-right: 4.8vw;
}
header .header-box .header-text-box .header-ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.6vw;
}
header .header-box .header-text-box .header-ul li {
  position: relative;
}
header .header-box .header-text-box .header-ul li a {
  color: #fff;
  font-size: var(--text-font-size-20);
}
header .header-box .header-text-box .header-ul li::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: var(--primary-color);
  transition: all 0.5s;
}
header .header-box .header-text-box .header-ul li.active::before,
header .header-box .header-text-box .header-ul li:hover::before {
  width: 100%;
}
header.navbar-black {
  background: #000;
}
@media (max-width: 1400px) {
  header .header-box .header-text-box {
    gap: 3.2vw;
  }
  header .header-box .header-text-box .nav-phone {
    padding-right: 0;
  }
  header .header-box .header-text-box .header-ul {
    gap: 2.6vw;
  }
}
@media (max-width: 1200px) {
  header .header-box .header-text-box {
    gap: 3.2vw;
  }
  header .header-box .header-text-box .nav-phone {
    display: none;
  }
  header .header-box .header-text-box .header-ul {
    gap: 1.6vw;
  }
}
@media (max-width: 767px) {
  header .header-box .header-text-box .header-ul {
    display: none;
  }
}
.more-box {
  padding: 2.6vw 0;
  display: flex;
  justify-content: center;
  margin-bottom: 2vw;
}
.more-box .more {
  border-radius: 0.26vw;
  border: 1px solid var(--primary-color);
  padding: 1.041vw 5.2vw;
  color: var(--primary-color);
  font-size: var(--text-font-size-20);
  font-weight: bold;
  transition: all 0.5s;
}
.more-box .more:hover {
  background: var(--primary-color);
  color: #fff;
}
@media (max-width: 767px) {
  .more-box {
    padding: 5vw 0;
    margin-bottom: 2vw;
  }
  .more-box .more {
    padding: 2.441vw 10.2vw;
  }
  .more-box .more:hover {
    color: #fff;
  }
}
.swiper {
  --swiper-theme-color: #fff;
  /* 设置Swiper风格 */
  --swiper-navigation-color: #fff;
  /* 单独设置按钮颜色 */
  --swiper-navigation-size: calc(15px + 0.78125vw);
  /* 设置按钮大小 */
  --swiper-navigation-sides-offset: var(--nav-x-pc);
  --swiper-pagination-color: var(--primary-color);
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bottom: calc(12px + 0.933vw);
}
.header-box {
  width: 100%;
}
.header-box .headerSwiper {
  width: 100%;
}
.header-box .headerSwiper .swiper-slide .swiper-slide-banner {
  width: 100%;
}
.header-box .headerSwiper .swiper-slide .pc {
  display: block;
}
.header-box .headerSwiper .swiper-slide .wap {
  display: none;
}
@media (max-width: 767px) {
  .header-box {
    width: 100%;
  }
  .header-box .headerSwiper {
    width: 100%;
  }
  .header-box .headerSwiper .swiper-slide .swiper-slide-banner {
    width: 100%;
  }
  .header-box .headerSwiper .swiper-slide .pc {
    display: none;
  }
  .header-box .headerSwiper .swiper-slide .wap {
    display: block;
  }
}
.functions {
  display: none;
}
@media (max-width: 767px) {
  .functions {
    padding: 30px var(--section-x-pc) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }
  .functions .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #000;
  }
  .functions .box img {
    width: 70px;
    height: 70px;
  }
}
.form-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.645vw var(--section-x-pc);
}
.form-content .spend-money .spend-slogan {
  font-size: var(--text-font-size-30);
  font-weight: bold;
}
.form-content .spend-money .spend-quotation {
  padding-top: 0.5vw;
  font-size: var(--text-font-size-24);
}
.form-content .spend-money .spend-quotation .second-time {
  font-weight: bold;
  padding-right: 0.15vw;
}
.form-content form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.3vw;
}
.form-content form input {
  border: 1px solid #ccc;
  width: 12.5vw;
  outline: none;
  color: var(--secondary-color);
  padding: 1.05vw 0.8vw;
  font-size: var(--text-font-size-20);
  /* 考虑到兼容性，你可能还需要添加以下代码 */
}
.form-content form input::placeholder {
  color: var(--secondary-color);
  /* 这里的颜色可以根据需要修改 */
}
.form-content form input::-webkit-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--secondary-color);
}
.form-content form input::-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--secondary-color);
}
.form-content form input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--secondary-color);
}
.form-content form input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--secondary-color);
}
.form-content form .submit {
  width: 12.5vw;
  background: var(--primary-color);
  font-size: var(--text-font-size-20);
  color: #fff;
  padding: 1.05vw 0.8vw;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}
@media (max-width: 767px) {
  .form-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 9vw var(--section-x-pc);
  }
  .form-content .spend-money .spend-slogan {
    font-size: 19px;
  }
  .form-content .spend-money .spend-quotation {
    font-size: 14px;
  }
  .form-content form {
    flex-direction: column;
    gap: 3.3vw;
    padding-top: 5vw;
    width: 100%;
  }
  .form-content form input {
    width: 100%;
    padding: 3.05vw 2.8vw;
  }
  .form-content form .submit {
    width: unset;
    padding: 2.441vw 10.2vw;
    margin-top: 3vw;
  }
}
.case {
  background: url(../assets/second-bg.jpg);
}
.case .caseSwiper .swiper-slide .case-content {
  position: relative;
}
.case .caseSwiper .swiper-slide .case-content .case-slide-img {
  height: calc(200px + 28.125vw);
  width: 70%;
  object-fit: cover;
}
.case .caseSwiper .swiper-slide .case-content .case-text {
  position: absolute;
  right: 0;
  bottom: 3.9vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box {
  padding: 3.385vw 2.864vw;
  background: #fff;
  width: 36.979vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-title {
  font-size: var(--text-font-size-44);
  color: #000;
  font-weight: bold;
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-details {
  padding-top: 1vw;
  font-size: var(--text-font-size-26);
  color: var(--secondary-color);
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn {
  display: flex;
  align-items: center;
  gap: 1.5625vw;
  padding-top: 2.2vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn .more {
  border: 1px solid #ccc;
  color: var(--minor-color);
  font-size: var(--text-font-size-20);
  padding: 0.625vw 3.3854vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn .visit {
  background: var(--primary-color);
  color: #fff;
  font-size: var(--text-font-size-20);
  padding: 0.625vw 3.3854vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .arrow-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 1.2vw;
}
.case .caseSwiper .swiper-slide .case-content .case-text .arrow-box .arrow-red {
  cursor: pointer;
}
.case .caseSwiper .swiper-slide .case-content .case-text .arrow-box .arrow-blue {
  cursor: pointer;
}
.case .caseSwiper .swiper-slide .case-content .case-text .arrow-box .arrow-num {
  font-size: var(--text-font-size-24);
  padding: 0 10px;
  color: #000;
}
.case .caseSwiper .swiper-slide .case-content .case-text .arrow-box .arrow-num .num-current {
  font-weight: bold;
}
.case .case-more {
  padding: 3.6458vw var(--section-x-pc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.case .case-more .more-style {
  display: flex;
  align-items: center;
  border-right: 1px solid #ccc;
  padding-right: 1.8229vw;
}
.case .case-more .more-style .triangle {
  width: 0;
  height: 0;
  border-bottom: 6.5px solid transparent;
  border-top: 7.5px solid transparent;
  border-left: 7px solid #000;
  margin-left: 1.2vw;
}
.case .case-more .more-style .more-text {
  font-size: var(--text-font-size-28);
  font-weight: bold;
  text-wrap: nowrap;
}
.case .case-classify {
  width: 90%;
  padding-left: 1.6vw;
  font-size: var(--text-font-size-24);
}
.case .case-classify .caseClassify .swiper-slide {
  text-align: center;
  padding: 0.78125vw 0;
  border-radius: 0.4vw;
  color: #000;
  cursor: pointer;
  position: all 0.5s;
}
.case .case-classify .caseClassify .swiper-slide.active {
  background: var(--primary-color);
  color: #fff;
}
@media (max-width: 767px) {
  .case .caseSwiper .swiper-slide .case-content .case-text {
    bottom: 8.9vw;
  }
  .case .caseSwiper .swiper-slide .case-content .case-text .case-text-box {
    width: 62vw;
    padding: 5vw 3.864vw;
  }
  .case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-details {
    padding-top: 2vw;
  }
  .case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn {
    padding-top: 3.5vw;
  }
  .case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn .more,
  .case .caseSwiper .swiper-slide .case-content .case-text .case-text-box .case-btn .visit {
    padding: 1.225vw 5.3854vw;
  }
  .case .case-classify {
    width: 85%;
  }
}
.team {
  background: #fff;
}
.team .team-box {
  padding: 0 var(--section-x-pc);
}
.team .team-box .teamSwiper-box {
  position: relative;
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide .team-content {
  position: relative;
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide .team-content .team-img {
  width: 100%;
  height: calc(200px + 14.895vw);
  object-fit: cover;
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide .team-content .team-introduction {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 4px;
  transition: all 0.3s;
  padding: calc(12px + 0.416vw) calc(20px + 1.0416vw);
  width: 100%;
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide .team-content .team-introduction .team-name {
  color: #fff;
  font-weight: bold;
  font-size: var(--text-font-size-34);
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide .team-content .team-introduction .team-text {
  color: #fff;
  font-size: var(--text-font-size-24);
}
.team .team-box .teamSwiper-box .teamSwiper .swiper-slide.active .team-content .team-introduction {
  background: rgba(39, 181, 232, 0.6);
}
.team .team-box .teamSwiper-box .teamSwiper-button-next {
  position: absolute;
  width: calc(30px + 4.16vw);
  height: calc(30px + 4.16vw);
  background: var(--primary-color);
  border-radius: 50%;
  top: calc(50% - (30px + 4.16vw) / 2);
  right: calc((-30px - 4.16vw) / 2);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.team .team-box .teamSwiper-box .teamSwiper-button-next img {
  width: calc(8px + 0.364vw);
}
.team .team-box .teamThumbsSwiper {
  margin-top: 4.166vw;
  padding-bottom: 2.08vw;
}
.team .team-box .teamThumbsSwiper .swiper-slide {
  position: relative;
}
.team .team-box .teamThumbsSwiper .swiper-slide .team-img {
  width: 100%;
  height: calc(60px + 7.03vw);
}
.team .team-box .teamThumbsSwiper .swiper-slide::before {
  position: absolute;
  top: 0;
  content: "";
  background: #fff;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: all 0.5s;
}
.team .team-box .teamThumbsSwiper .swiper-slide.active::before {
  opacity: 0;
}
.team .team-box .teamThumbsSwiper .swiper-scrollbar {
  --swiper-scrollbar-drag-bg-color: #ce2b2b;
}
.team .title-2-line {
  position: relative;
}
.team .title-2-line .arrow-box {
  position: absolute;
  bottom: 3.9vw;
  right: var(--section-x-pc);
}
.team .title-2-line .arrow-box .arrow-red {
  margin-right: 1vw;
  cursor: pointer;
}
.team .title-2-line .arrow-box .arrow-blue {
  cursor: pointer;
}
@media (max-width: 767px) {
  .team {
    padding-bottom: 10px;
  }
  .team .title-2-line .arrow-box {
    bottom: 9.6vw;
  }
  .team .team-box .teamSwiper-box .teamSwiper-button-next {
    display: none;
  }
}
.VR {
  background: url(../assets/VR-bg.jpg);
  padding-bottom: 1vw;
}
.VR .VRSwiper .swiper-slide .VR-content {
  position: relative;
  display: block;
}
.VR .VRSwiper .swiper-slide .VR-content .VR-img {
  height: calc(200px + 23.64vw);
  width: 100%;
  object-fit: cover;
}
.VR .VRSwiper .swiper-slide .VR-content .VR-introduction {
  position: absolute;
  top: 3.64vw;
  right: var(--section-x-pc);
  color: #fff;
  text-align: right;
}
.VR .VRSwiper .swiper-slide .VR-content .VR-introduction .VR-name {
  font-size: var(--text-font-size-24);
  padding-bottom: 1.04vw;
}
.VR .VRSwiper .swiper-slide .VR-content .VR-introduction .VR-text {
  font-size: var(--text-font-size-44);
  font-weight: bold;
}
.VR .VRhumbsSwiper-box {
  padding: 0 var(--section-x-pc);
  margin-top: -6.5%;
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper {
  padding-bottom: 1vw;
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide .VR-img-box {
  padding: 0.2vw;
  background: #fff;
  border-radius: 0.2vw;
  box-shadow: 1px 1px 6px 0px #ccc;
  height: calc(80px + 6.25vw);
  overflow: hidden;
  position: relative;
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide .VR-img-box .VR-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide .VR-img-box .VR-content {
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--text-font-size-20);
  position: absolute;
  top: 0;
  color: #fff;
  padding: 0 calc(10px + 0.5vw);
  background: linear-gradient(to top, #0b9fd1, #0ba0d100 80%);
  width: calc(100% - 0.4vw);
  height: calc(100% - 0.14vw);
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide .VR-img-box .VR-content .VR-name {
  font-weight: bold;
  padding-bottom: calc(8px + 1vw);
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide .VR-img-box .VR-content .VR-intr {
  padding-bottom: calc(8px + 1vw);
  padding-right: 0.2vw;
}
.VR .VRhumbsSwiper-box .VRhumbsSwiper .swiper-slide.swiper-slide-thumb-active .VR-img-box .VR-content {
  display: flex;
}
@media (max-width: 767px) {
  .VR .VRhumbsSwiper-box {
    margin-top: -14.5%;
  }
}
.renovation {
  background: #fff;
  padding-bottom: 3.9vw;
}
.renovation .renovation-list {
  padding: 0 var(--section-x-pc);
}
.renovation .renovation-list .renovationSwiper {
  display: none;
}
.renovation .renovation-list .renovationSwiper.active {
  display: block;
}
.renovation .renovation-list .renovationSwiper .swiper-slide img {
  width: 100%;
  height: calc(150px + 13vw);
  object-fit: cover;
  transition: all 0.4s;
}
.renovation .renovation-list .renovationSwiper .swiper-slide .renovation-content .date {
  padding-top: 2vw;
  font-size: var(--text-font-size-16);
  color: var(--secondary-minor-color);
}
.renovation .renovation-list .renovationSwiper .swiper-slide .renovation-content .question {
  padding-top: 0.6vw;
  font-size: var(--text-font-size-20);
  color: var(--secondary-color);
  font-weight: bold;
}
.renovation .renovation-list .renovationSwiper .swiper-slide .renovation-content .details {
  padding-top: 1.2vw;
  font-size: var(--text-font-size-16);
  color: var(--minor-color);
  opacity: 0;
  transition: all 0.4s;
}
.renovation .renovation-list .renovationSwiper .swiper-slide:hover img {
  width: 100%;
  height: calc(100px + 12.279vw);
}
.renovation .renovation-list .renovationSwiper .swiper-slide:hover .renovation-content .details {
  opacity: 1;
}
.renovation .renovation-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  padding-top: 1.3854vw;
}
.renovation .renovation-btn .btn-name {
  padding: 1.04vw 2.34375vw;
  border-radius: 0.45vw;
  font-size: var(--text-font-size-24);
  cursor: pointer;
  transition: all 0.3s;
}
.renovation .renovation-btn .btn-name a {
  color: #000;
}
.renovation .renovation-btn .btn-name.active {
  background: var(--primary-color);
  color: #fff;
}
@media (max-width: 767px) {
  .renovation {
    padding-bottom: 40px;
  }
  .renovation .renovation-btn .btn-name {
    padding: 1.54vw 4.34375vw;
  }
}
.service {
  background: url(../assets/service-bg.jpg);
  background-size: cover;
  padding-bottom: 6.77vw;
}
.service .service-img1 {
  width: 100%;
  padding: 0 var(--section-x-pc);
}
.service .service-img1.pc {
  display: block;
}
.service .service-img1.wap {
  display: none;
}
.service .service-box {
  margin-top: 2.604vw;
  padding: 0 var(--section-x-pc);
}
.service .service-box .service-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 4.3vw;
  row-gap: 4.3vw;
}
.service .service-box .service-list .service-main {
  position: relative;
}
.service .service-box .service-list .service-main .service-img {
  width: 100%;
}
.service .service-box .service-list .service-main .service-text {
  position: absolute;
  top: 0.7vw;
  width: 100%;
  height: 100%;
  text-align: center;
}
.service .service-box .service-list .service-main .service-text .num {
  font-size: var(--text-font-size-30);
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.service .service-box .service-list .service-main .service-text .description {
  font-size: var(--text-font-size-24);
  color: var(--secondary-color);
  font-weight: bold;
}
.service .service-box .service-list .service-main .service-text .icon {
  width: 2.8125vw;
  height: 2.864vw;
  text-align: center;
  margin: 1.7vw 0 1.362vw 0;
}
@media (max-width: 767px) {
  .service .service-img1.pc {
    display: none;
  }
  .service .service-img1.wap {
    display: block;
  }
}
.decoration .title-2-line {
  position: relative;
}
.decoration .title-2-line .line {
  position: absolute;
  bottom: 2vw;
  left: 0;
  width: 20%;
  height: 2px;
  background: var(--decoration-color);
}
.decoration .decoration-box {
  padding: 0 var(--section-x-pc);
}
.decoration .decoration-box .serve-list {
  padding-top: 2vw;
  padding-bottom: 1.2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.decoration .decoration-box .serve-list li {
  line-height: 1;
}
.decoration .decoration-box .serve-list li .serve-box .countUp_num {
  font-size: calc(30px + 3.64vw);
  font-weight: bold;
  color: var(--primary-color);
}
.decoration .decoration-box .serve-list li .serve-box .countUp_add {
  font-size: var(--text-font-size-24);
  font-weight: bold;
  color: var(--secondary-color);
}
.decoration .decoration-box .serve-list li .serve-box .countUp_code {
  font-size: var(--text-font-size-36);
  font-weight: bold;
  color: var(--secondary-color);
}
.decoration .decoration-box .serve-list li .serve-box .countUp_percent {
  font-size: var(--text-font-size-30);
  font-weight: bold;
  color: var(--secondary-color);
}
.decoration .decoration-box .serve-list li .countUp_text {
  font-size: var(--text-font-size-22);
  padding-top: 1vw;
}
.decoration .more-box .more {
  background: var(--primary-color);
  color: #fff;
}
@media (max-width: 1920px) {
  .decoration .title-2-line {
    position: relative;
  }
  .decoration .title-2-line .line {
    position: absolute;
    width: 21.5%;
  }
}
@media (max-width: 1536px) {
  .decoration .title-2-line {
    position: relative;
  }
  .decoration .title-2-line .line {
    position: absolute;
    width: 22.8%;
  }
}
@media (max-width: 1280px) {
  .decoration .title-2-line {
    position: relative;
  }
  .decoration .title-2-line .line {
    position: absolute;
    width: 24%;
  }
}
@media (max-width: 1080px) {
  .decoration .title-2-line {
    position: relative;
  }
  .decoration .title-2-line .line {
    position: absolute;
    width: 26%;
  }
}
@media (max-width: 767px) {
  .decoration {
    padding-bottom: 10px;
  }
  .decoration .title-2-line {
    position: relative;
  }
  .decoration .title-2-line .line {
    position: absolute;
    bottom: 6vw;
    width: 43.5%;
  }
  .decoration .decoration-box .serve-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7vw;
  }
}