@font-face {
  font-family: p-black;
  src: url(../font/Poppins-Black.html);
}
@font-face {
  font-family: p-bold;
  src: url(../font/Poppins-Bold.html);
}
@font-face {
  font-family: p-medium;
  src: url(../font/Poppins-Medium.html);
}
@font-face {
  font-family: p-regular;
  src: url(../font/Poppins-Regular.html);
}
section {
  position: relative;
  font-family: p-regular;
}

.section1 {
  width: 100%;
  height: 100vh;
}
.section1 .video-box {
  width: 100%;
  height: 100%;
}
.section1 .video-box video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.section1 .logo-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.section1 .logo-box img {
  width: 5rem;
}
.section1 .logo-box .t {
  color: #fff;
  font-size: 0.24rem;
  margin-top: 0.2rem;
  letter-spacing: 0.03rem;
}
.section1 .sec-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.64rem;
  display: flex;
  align-items: center;
  z-index: 2;
}
.section1 .sec-btn .btn {
  width: 2.1rem;
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.13rem;
  cursor: pointer;
  border: 1px solid #fff;
  transition: all 0.5s;
}
.section1 .sec-btn .btn:hover {
  background-color: #bca995;
  border-color: #bca995;
}
.section1 .sec-btn .btn2 {
  margin-left: 0.33rem;
}
.section1::after {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  width: 100%;
  height: 100%;
}

.section2 {
  direction: rtl;
  background: #cec5b9;
  height: 100vh;
  padding: 0.55rem 0.52rem;
}
.section2 .bg-box {
  width: 100%;
  border-radius: 12px;
  height: 100%;
  display: flex;
  background-color: #d7cfc5;
}
.section2 .bg-box .left-box {
  width: 48%;
  padding: 0.46rem 0.39rem 0.9rem 0.45rem;
}
.section2 .bg-box .left-box .car-box {
  width: 100%;
  height: 68%;
  position: relative;
}
.section2 .bg-box .left-box .car-box .img-box {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 12px;
}
.section2 .bg-box .left-box .car-box img {
  width: 100%;
  margin-top: 0.8rem;
}
.section2 .bg-box .left-box .car-box .yin {
  background: #919096;
}
.section2 .bg-box .left-box .car-box .lan {
  background: #bbced9;
}
.section2 .bg-box .left-box .car-box .bai {
  background: #eaeaea;
}
.section2 .bg-box .left-box .car-box .hong {
  background: #9f6b73;
}
.section2 .bg-box .left-box .car-box .lv {
  background: #72807a;
}
.section2 .bg-box .left-box .car-box .hei {
  background: #898989;
}
.section2 .bg-box .left-box .car-box .img-box.active {
  opacity: 1;
}
.section2 .bg-box .left-box .tit {
  font-size: 0.24rem;
  color: #fff;
  margin-top: 0.42rem;
}
.section2 .bg-box .left-box .color-box {
  display: flex;
  margin-top: 0.65rem;
  align-items: center;
}
.section2 .bg-box .left-box .color-box .c-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-left: 0.3rem;
}
.section2 .bg-box .left-box .color-box .c-box .c {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
}
.section2 .bg-box .left-box .color-box .c-box .yin {
  background: linear-gradient(180deg, #acabb1 0%, #ffffff 50%, #afaeb4 100%);
}
.section2 .bg-box .left-box .color-box .c-box .lan {
  background: linear-gradient(180deg, #4d749d 0%, #97c0d7 50%, #4d749d 100%);
}
.section2 .bg-box .left-box .color-box .c-box .bai {
  background: linear-gradient(180deg, #dedede 0%, #ffffff 50%, #eaeaea 100%);
}
.section2 .bg-box .left-box .color-box .c-box .hong {
  background: linear-gradient(180deg, #731c28 0%, #c25163 50%, #771f2b 100%);
}
.section2 .bg-box .left-box .color-box .c-box .lv {
  background: linear-gradient(180deg, #25634a 0%, #609780 50%, #25634a 100%);
}
.section2 .bg-box .left-box .color-box .c-box .hei {
  background: linear-gradient(180deg, #282e3a 0%, #61636f 50%, #19202e 100%);
}
.section2 .bg-box .left-box .color-box .c-box .t {
  color: #fff;
  font-size: 0.14rem;
  font-weight: 500;
  margin-top: 0.25rem;
  text-align: center;
}
.section2 .bg-box .left-box .color-box .c-box:nth-last-of-type(1) {
  margin-right: 0;
}
.section2 .bg-box .left-box .color-box .c-box.active .c {
  position: relative;
}
.section2 .bg-box .left-box .color-box .c-box.active .c::after {
  width: 0.64rem;
  height: 0.64rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  content: "";
  border-radius: 50%;
}
.section2 .bg-box .right-box {
  width: 52%;
  position: relative;
}
.section2 .bg-box .right-box img {
  border-radius: 12px;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
.section2 .bg-box .right-box img.active {
  opacity: 1;
}

.bg-section {
  background-color: #a59c91;
  padding: 0.7rem 1.05rem 1rem;
  display: flex;
  /* height: 100vh; */
  flex-direction: column;
  align-items: center;
}
.bg-section .car-logo {
  width: 3.33rem;
}
.bg-section .car-logo img {
  width: 100%;
}
.bg-section .car-tit {
  text-transform: uppercase;
  color: rgba(225, 225, 225.7);
  font-size: 0.26rem;
  margin-top: 0.3rem;
}
.bg-section .bg {
  width: 100%;
  position: relative;
  margin-top: 0.4rem;
  -webkit-clip-path: inset(10% 20%);
  clip-path: inset(10% 20%);
}
.bg-section .bg img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.bg-section .bg .bg-detail {
  position: absolute;
  bottom: 1.06rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.2rem;
}
.bg-section .bg .bg-detail .detail-box {
  flex: 1;
}
.bg-section .bg .bg-detail .detail-box .top {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.16rem;
}
.bg-section .bg .bg-detail .detail-box .top .num {
  font-size: 0.52rem;
  color: #fff;
  font-family: p-bold;
  display: flex;
}
.bg-section .bg .bg-detail .detail-box .top .unit {
  color: #fff;
  font-size: 0.22rem;
  margin-left: 0.1rem;
  /* margin-bottom: -0.035rem; */
}
.bg-section .bg .bg-detail .detail-box .bottom {
  font-size: 0.22rem;
  color: #fff;
  text-align: right;
  padding-top: 0.16rem;
}
.bg-section .bg .bg-detail .detail-box:nth-of-type(2) {
  margin: 0 1rem;
}

.swiper-section {
  direction: rtl;
  background-color: #a59c91;
  height: 90vh;
  width: 100%;
  display: flex;
  padding: 1.1rem 1.05rem;
}
.swiper-section .left-box {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.swiper-section .left-box .top {
  position: relative;
}
.swiper-section .left-box .top .title-box {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
.swiper-section .left-box .top .title-box .t {
  color: #fff;
  font-size: 0.36rem;
  width: 80%;
}
.swiper-section .left-box .top .title-box .d {
  color: rgba(225, 225, 225.7);
  font-size: 0.26rem;
  margin-top: 0.5rem;
  width: 90%;
}
.swiper-section .left-box .top .title-box.active {
  opacity: 1;
}
.swiper-section .left-box .bottom {
  display: flex;
  align-items: center;
}
.swiper-section .left-box .bottom .nav-ar {
  font-size: 0.24rem;
  margin-right: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgba(255, 255, 255, 0.3);
  padding-bottom: 0.1rem;
  border-bottom: 0.04rem solid rgba(255, 255, 255, 0.3);
}
.swiper-section .left-box .bottom .nav-ar.active {
  color: #fff;
  border-color: #fff;
}
.swiper-section .right-box {
  width: 60%;
  position: relative;
}
.swiper-section .right-box .img-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease;
}
.swiper-section .right-box .img-box img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.swiper-section .right-box .img-box.active {
  opacity: 1;
}

.section7-content {
  direction: rtl;
  display: flex;
  align-items: center;
  background-color: #a59c91;
  padding: 1.1rem 1.05rem;
  justify-content: space-between;
}
.section7-content .box {
  flex: 1;
}
.section7-content .box .img-box {
  width: 100%;
}
.section7-content .box .img-box img {
  width: 100%;
  border-radius: 8px;
}
.section7-content .box .t {
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 0.05rem;
  padding: 0.58rem 0.2rem;
  color: #333;
  font-size: 0.26rem;
  border-radius: 6px;
}
.section7-content .box:nth-of-type(2) {
  margin: 0 0.15rem;
}

.section-pic {
  background-color: #a59c91;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.88rem 0;
}
.section-pic .t-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-pic .t-box .car-logo {
  width: 3.33rem;
}
.section-pic .t-box .car-logo img {
  width: 100%;
}
.section-pic .t-box .car-tit {
  text-transform: uppercase;
  color: rgba(225, 225, 225.7);
  font-size: 0.26rem;
  margin-top: 0.3rem;
  text-align: center;
}
.section-pic .pic-box {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 7rem;
  padding: 0 0.7rem;
  overflow-x: auto;
  margin-top: 0.8rem;
  flex: 1;
}
.section-pic .pic-box .img-box {
  flex: none;
  width: 7rem;
  height: 100%;
  margin-right: 0.24rem;
  scale: 0;
}
.section-pic .pic-box .img-box img {
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  -o-object-fit: cover;
  object-fit: cover;
}
.section-pic .pic-box .img-box-group {
  flex: none;
  width: 7rem;
  height: 7rem;
  margin-right: 0.24rem;
  display: flex;
  flex-direction: column;
}
.section-pic .pic-box .img-box-group .top {
  height: 50%;
  width: 100%;
}
.section-pic .pic-box .img-box-group .bottom {
  display: flex;
  align-items: center;
  margin-top: 0.24rem;
  height: auto;
  flex: 1;
  width: 100%;
}
.section-pic .pic-box .img-box-group .bottom .img-box {
  width: auto;
  flex: 1;
}
.section-pic .pic-box .img-box-group .bottom .img-box:nth-last-of-type(1) {
  margin-right: 0;
}
.section-pic .pic-box::-webkit-scrollbar {
  display: none;
}
.section-pic .move {
  cursor: move;
  height: 100%;
  position: absolute;
  top: 0;
  width: 2%;
  z-index: 5;
}
.section-pic .arrow-left {
  left: 0;
}
.section-pic .arrow-right {
  right: 0;
}

.content_us_jump {
  width: 100%;
  position: relative;
}
.content_us_jump a {
  display: block;
  width: 20%;
  height: 7%;
  position: absolute;
  top: 30%;
  left: 6%;
}
.content_us_jump img {
  width: 100%;
  /* height: 100vh; */
}

@media (max-width: 768px) {
  .section1 .logo-box img {
    width: 4.35rem;
  }
  .section1 .logo-box .t {
    font-size: 0.24rem;
  }
  .section1 .sec-btn {
    width: 100%;
    padding: 0 0.5rem;
  }
  .section1 .sec-btn .btn {
    flex: 1;
    height: 0.8rem;
    font-size: 0.18rem;
  }
  .section1 .sec-btn .btn2 {
    margin-left: 0.2rem;
  }
  .section2 {
    padding: 1.75rem 0.36rem 0.37rem;
    height: auto;
  }
  .section2 .bg-box {
    flex-direction: column-reverse;
    border-radius: 10px;
  }
  .section2 .bg-box .left-box {
    width: 100%;
    padding: 0.5rem 0.27rem 0.96rem;
  }
  .section2 .bg-box .left-box .tit {
    position: absolute;
    top: 0.65rem;
    margin-top: 0;
    font-size: 0.3rem;
    left: 0.36rem;
  }
  .section2 .bg-box .left-box .car-box {
    height: 4.2rem;
  }
  .section2 .bg-box .left-box .car-box .img-box {
    border-radius: 10px;
  }
  .section2 .bg-box .left-box .color-box {
    margin-top: 1.46rem;
    justify-content: space-between;
  }
  .section2 .bg-box .left-box .color-box .c-box {
    margin-right: 0;
  }
  .section2 .bg-box .left-box .color-box .c-box .c {
    width: 0.54rem;
    height: 0.54rem;
  }
  .section2 .bg-box .left-box .color-box .c-box .c::after {
    width: 0.69rem;
    height: 0.69rem;
  }
  .section2 .bg-box .left-box .color-box .c-box .t {
    font-size: 0.18rem;
  }
  .section2 .bg-box .right-box {
    width: 100%;
    height: 5.8rem;
  }
  .section2 .bg-box .right-box img {
    border-radius: 10px;
  }
  .bg-section {
    padding: 0.98rem 0.36rem;
  }
  .bg-section .car-logo {
    width: 3.77rem;
  }
  .bg-section .car-tit {
    font-size: 0.35rem;
  }
  .bg-section .bg .bg-detail {
    width: 100%;
    padding: 0 0.3rem;
    bottom: 1.06rem;
    flex-wrap: wrap;
  }
  .bg-section .bg img {
    border-radius: 10px;
  }
  .bg-section .bg .bg-detail .detail-box {
    flex: none;
    width: 48%;
  }
  .bg-section .bg .bg-detail .detail-box:nth-of-type(2) {
    margin: 0;
  }
  .bg-section .bg .bg-detail .detail-box:nth-of-type(3) {
    width: 100%;
    margin-top: 0.3rem;
  }
  .bg-section .bg .bg-detail .detail-box .top .unit {
    font-size: 0.23rem;
    padding-left: 0.19rem;
    padding-top: 0.15rem;
  }
  .bg-section .bg .bg-detail .detail-box .bottom {
    font-size: 0.23rem;
  }
  .swiper-section {
    flex-direction: column-reverse;
    padding: 1rem 0.36rem 1.5rem;
  }
  .swiper-section .left-box {
    width: 100%;
    flex: 1;
    padding: 0.96rem 0 0;
  }
  .swiper-section .left-box .top .title-box .t {
    font-size: 0.42rem;
  }
  .swiper-section .left-box .top .title-box .d {
    font-size: 0.27rem;
  }
  .swiper-section .left-box .bottom .nav-ar {
    font-size: 0.3rem;
    margin-right: 0.54rem;
  }
  .swiper-section .right-box {
    width: 100%;
    height: 5.75rem;
  }
  .swiper-section .right-box .img-box img {
    border-radius: 10px;
  }
  .section7-content {
    padding: 1rem 0.36rem 1.3rem;
    flex-direction: column;
  }
  .section7-content .box {
    margin-bottom: 0.38rem;
  }
  .section7-content .box:nth-of-type(2) {
    margin: 0 0 0.38rem 0;
  }
  .section7-content .box:nth-last-of-type(1) {
    margin-bottom: 0;
  }
  .section7-content .box .t {
    font-size: 0.27rem;
    padding: 0.43rem 0.33rem;
  }
  .content_us_jump {
    width: 100%;
    position: relative;
  }
  .content_us_jump a {
    width: 54%;
    height: 7%;
    top: 30.5%;
    left: 10.5%;
  }
  .content_us_jump img {
    width: 100%;
    /* height: 100vh; */
  }
} /*# sourceMappingURL=tiggo4.css.map */