body {
  background-color: #e8e6e4;
}

/* btn */
.btn_st_01 {
  height: 0.6rem;
  width: 2.8rem;
  border: 0.01rem solid #7e5d59;
  color: #7e5d59;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s;
}

.btn_st_01::after {
  position: absolute;
  height: 2px;
  width: 100%;
  content: "";
  display: block;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
  background-color: #471a14;
  transform: scale(0, 1);
}

.btn_st_01:hover {
  background: #f2edea;
}

.btn_st_01:hover::after {
  transform: scale(1, 1);
}

.btn_st_02 {
  height: 0.6rem;
  width: 2.8rem;
  border: 0.01rem solid #fff;
  color: #fff;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s;
}

.btn_st_02::after {
  position: absolute;
  height: 2px;
  width: 100%;
  content: "";
  display: block;
  left: 0;
  bottom: 0;
  transition: all 0.5s;
  background-color: #fff;
  transform: scale(0, 1);
}

.btn_st_02:hover {
  background: rgba(242, 237, 234, 0.3);
}

.btn_st_02:hover::after {
  transform: scale(1, 1);
}

/* banner */
.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.banner_bk {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.banner_text {
  position: absolute;
  top: 30%;
  left: 1rem;
  color: #fff;
}
.banner_t1 {
  font-size: 0.5rem;
}
.banner_t2 {
  font-size: 0.26rem;
  letter-spacing: 0.11rem;
}
.banner_t3 {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}
.banner .btn_st_02 {
  margin-left: 0.2rem;
}

.hm_qy {
  width: 100%;
}
.hm_qy img {
  width: 100%;
}

.video_text_box_pc {
  position: relative;
  height: 600vh;
  width: 100%;
  /* background-color: #3A2720; */
}
.vt_box_1 {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  /* background-color: #3A2720; */
  background-image: url('https://res.gwm.com.cn/Ora/statics/car-model/haomao/2024/shipin.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.vt_box_2 {
  position: sticky;
  top: 0;
  margin-top: -100vh;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background-color: transparent;
  opacity: 1;
  overflow: hidden;
}
.vt_box_2 .ovhd {
  position: relative;
  width: 100%;
  height: 100vh;
}
.vt_box_3 {
  position: sticky;
  top: 0;
  margin-top: -100vh;
  width: 100%;
  height: 100vh;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s;
}

.vt_box_1 .vt1_scale {
  transform: scale(50);
  opacity: 0.06;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.1s;
}
.vt1_scale div {
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}
.vt1_scale div:nth-of-type(1) {
  color: #fff;
}
.vt1_scale div:nth-of-type(2) {
  color: #f9e2c6;
}

.vt_box_2 div {
  color: #fff;
  font-weight: bold;
  font-size: 0.6rem;
}
.vt_box_2 div span {
  font-weight: bold;
  color: #f9e2c6;
  font-size: 0.6rem;
}
.vt_box_2 .t1 {
  position: absolute;
  right: -150%;
  top: 8%;
  width: 100%;
  padding-left: 20%;
}
.vt_box_2 .t2 {
  position: absolute;
  left: -150%;
  top: 23%;
  margin-left: 8rem;
  width: 100%;
  text-align: left;
}
.vt_box_2 .t3 {
  position: absolute;
  right: -150%;
  top: 38%;
  width: 100%;
  padding-left: 10%;
}
.vt_box_2 .t4 {
  position: absolute;
  left: -150%;
  top: 53%;
  width: 100%;
  text-align: right;
  padding-right: 5%;
}
.vt_box_2 .t5 {
  position: absolute;
  right: -150%;
  top: 68%;
  width: 100%;
  padding-left: 5%;
}
.vt_box_2 .t6 {
  position: absolute;
  left: -150%;
  top: 83%;
  margin-left: 6rem;
  width: 100%;
  text-align: left;
}

.vt_box_3 video {
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: scale(0.33);
  opacity: 0;
  pointer-events: none;
}

.cover_1 {
  width: 100%;
  /* height: 100vh; */
  position: relative;
  overflow: hidden;
}
.cover_1_bk {
  width: 100%;
  /* height: 100vh;
	object-fit: cover; */
}
.cover_text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cover_text_s2 {
  bottom: auto;
  left: auto;
  left: 1rem;
  /* top: 1rem; */
  bottom: 1rem;
  /* align-items: flex-end; */
}

.cover_text1 {
  font-size: 0.26rem;
  font-weight: 200;
  letter-spacing: 0.037rem;
}
.cover_text2 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.018rem;
  margin-top: 0rem;
}
.qjgc_btn {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.2rem 0.1rem 0.1rem;
  background-color: #fff;
  border-radius: 50px;
  margin-top: 0.2rem;
  cursor: pointer;
  height: 0.6rem;
  width: 2.3rem;
}
.qjgc_btn div {
  width: 0.4rem;
  height: 0.4rem;
  background-color: #584242;
  border-radius: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.12rem;
}
.qjgc_btn div img {
  width: 60%;
}
.qjgc_btn span {
  display: block;
  color: #584242;
  margin-left: 0.47rem;
  margin-right: 0.15rem;
  font-size: 0.18rem;
  font-weight: 300;
}

.cover_text1 {
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.cover_text2 {
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.qjgc_btn {
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.cover_text._into .cover_text1 {
  transform: translateY(0rem);
  opacity: 1;
  margin-bottom: -0.1rem;
}
.cover_text._into .cover_text2 {
  transform: translateY(0rem);
  opacity: 1;
  transition-delay: 0.2s;
}
.cover_text._into .qjgc_btn {
  transform: translateY(0rem);
  opacity: 1;
  transition-delay: 0.4s;
}

.unit_1 {
  padding: 1.5rem 1.6rem 0;
  background-color: #e8e6e4;
  position: relative;
}
.unit_1._black {
  background-color: #e8e6e4;
}
.unit_title {
  font-size: 0.38rem;
  font-weight: 500;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.unit_title._into {
  transform: translateY(0rem);
  opacity: 1;
}
.swiper_style_1 {
  margin-top: 0.7rem;
  width: 100%;
}
.swiper_box {
  width: 100%;
  overflow: hidden;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
  transition-delay: 0.4s;
}
.swiper_box._into {
  transform: translateY(0rem);
  opacity: 1;
}
.unit_1._black .unit_title {
  color: #2b2525;
}

.swiper_1,
.swiper_2,
.swiper_3,
.swiper_4 {
  width: 60%;
  overflow: initial;
}

.swiper_1 .swiper-slide img,
.swiper_2 .swiper-slide img,
.swiper_3 .swiper-slide img,
.swiper_4 .swiper-slide img {
  width: 100%;
  height: 5.7rem;
  object-fit: cover;
}
.swiper_s1_t {
  width: 8.5rem;
  margin-top: 0.3rem;
}

.swiper_s1_t div:nth-of-type(1) {
  font-size: 0.24rem;
  font-weight: 500;
}
.swiper_s1_t div:nth-of-type(2) {
  font-size: 0.18rem;
  font-weight: 300;
  margin-top: 0.1rem;
}

.ss1_btn {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  z-index: 1;
}
.ss1_btn {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 100%;
  background-color: #dedcdb;
  /* background-color: #6C5B5B; */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s;
}
.ss1_btn img {
  width: 0.12rem;
}
.ss1_next img {
  margin-left: 3%;
}
.ss1_btn img:nth-of-type(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s;
}
.ss1_prev,
.ss2_prev,
.ss3_prev,
.ss4_prev {
  left: 0.8rem;
}

.ss2_prev {
  top: 0;
}
.ss3_prev {
  top: 58%;
}
.ss2_prev,
.ss2_next {
  top: 62%;
}
/* .ss2_prev, .ss2_next,
.ss3_prev, .ss3_next{
	top: 62%;
} */
.ss1_next,
.ss2_next,
.ss3_next {
  right: 0.8rem;
}
.ss1_btn:hover {
  background-color: #dedcdb;
  /* background-color: #6C5B5B; */
}
.ss1_btn:hover img:nth-of-type(2) {
  opacity: 1;
}

.unit_1._black .swiper_s1_t div:nth-of-type(1) {
  color: #444;
}
.unit_1._black .swiper_s1_t div:nth-of-type(2) {
  color: #444;
}

.car_color {
  background-color: #e8e6e4;
  padding: 1rem 1.6rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.6rem;
}
.car_color_btn {
  display: flex;
  padding: 0.1rem 0.1rem 0.1rem 0.3rem;
  background-color: #fff;
  border-radius: 50px;
  align-items: center;
  cursor: pointer;
  height: 0.7rem;
}
.cco_b {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 100%;
  background-color: #6c5b5b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  cursor: pointer;
  color: #6c5b5b;
}
.cco_b img {
  width: 0.15rem;
}
.car_change_color {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: all 1s;
}
.car_change_color._close {
  height: 0;
}
.car_color_open {
  transition: all 0.5s;
}
.car_color_open .cco_t {
  color: #584242;
  font-size: 0.18rem;
  font-weight: 500;
  margin-left: 0.32rem;
}

.car_color_open._close {
  opacity: 0;
  pointer-events: none;
}
.car_color_close {
  transition: all 0.5s;
}
.car_change_color._close .car_color_close {
  opacity: 0;
}
.car_change_color .car_color_close {
  opacity: 1;
}
.car_change_color .close-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.color_main {
  width: 100%;
  position: relative;
}
.com_t1 {
  font-size: 0.18rem;
  font-weight: 300;
}
.com_t2 {
  font-size: 0.5rem;
  position: relative;
  margin-top: 0.1rem;
}
.com_t2 div {
  opacity: 0;
  transition: all 1s;
  position: absolute;
  top: 0;
  left: 0;
}
.com_t2 div:nth-of-type(1) {
  position: relative;
}
.com_t2 div.active {
  opacity: 1;
  font-weight: 700;
}

.com_btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 0.4rem;
  flex-direction: column;
}
.com_btn_left {
  display: flex;
}
.com_btn_l {
  width: 1.8rem;
  height: 0.45rem;
  background-color: #6c5b5b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.138rem;
  font-weight: 300;
}
.com_btn_l2 {
  color: #6c5b5b;
  background-color: transparent;
  margin-left: 0.2rem;
  border: 1px solid #6c5b5b;
}
.com_btn_right {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 1rem;
}
.com_btn_r {
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid transparent;
  border-radius: 100%;
  padding: 0.03rem;
  cursor: pointer;
  margin-bottom: 4vh;
}
.com_btn_r.active {
  border: 1px solid rgb(42, 140, 128);
}
.com_btn_r div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.color_n1 {
  background-color: rgb(86, 87, 87);
}
.color_n2 {
  background-color: rgb(192, 192, 192);
}
.color_n3 {
  background-color: rgb(56, 92, 93);
}
.color_n4 {
  background-color: rgb(129, 147, 161);
}
.color_n5 {
  background-color: rgb(149, 164, 134);
}
.color_n6 {
  background-color: rgb(181, 160, 136);
}
.color_n7 {
  background-color: rgb(67, 168, 198);
}
.car_img_box {
  display: flex;
}
.car_img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: 0.5rem;
}
.car_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  transition: all 1s;
}
.car_img img.img_pr {
  position: relative;
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
}
.car_img img.active {
  opacity: 1;
}

.unit_2 {
  padding: 1rem 1.6rem 0;
  background-color: #e8e6e4;
}
.img_hover_filter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 1.4%;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.img_hover_filter_bottom {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1.4%;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.img_hover_filter_bottom .inf_right {
  position: relative;
  margin-right: 1.4%;
}
.img_hover_filter_bottom .inf_left {
  position: relative;
}
.img_hover_filter_bottom._into {
  transform: translateY(0rem);
  opacity: 1;
}
.img_hover_filter_bottom .ihf_min {
  width: 100%;
  /* height: 3rem; */
}
.img_hover_filter_bottom .ihf_min:nth-of-type(2) {
  width: 100%;
}
.img_hover_filter_bottom .ihf_min img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img_hover_filter._into {
  transform: translateY(0rem);
  opacity: 1;
}
.img_hover_filter img {
  width: 100%;
}
.ihf_left {
  width: 63.8%;
}
.ihf_right {
  width: 34.8%;
}
.img_hover_filter_2 .ihf_left {
  width: 49%;
}
.img_hover_filter_2 .ihf_right {
  width: 49.5%;
}
.ihf_min {
  position: relative;
  overflow: hidden;
}
.ihf_min_filter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.ihf_min_r2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2.2%;
}
.ihf_min_r2 .ihf_min {
  width: 49%;
}

.ihf_min:hover .ihf_min_filter {
  backdrop-filter: saturate(80%) blur(50px);
  -webkit-backdrop-filter: saturate(80%) blur(50px);
}
.ihf_min_t1 {
  left: 0.4rem;
  position: absolute;
  z-index: 3;
  font-size: 0.22rem;
  color: #fff;
  transition: all 0.7s;
  bottom: 10%;
}

.ihf_min_t2 {
  bottom: -1rem;
  left: 0.4rem;
  width: calc(100% - 0.8rem);
  position: absolute;
  z-index: 3;
  font-size: 0.16rem;
  color: #fff;
  transition: all 0.5s;
}
.ihf_min:hover .ihf_min_t1 {
  bottom: 80%;
}
.ihf_min:hover .ihf_min_t2 {
  bottom: 0.3rem;
}

/* 数字滑动 */
.mmmn_box {
  display: flex;
  position: relative;
  align-items: center;
  color: #2b2425;
}
.mmmn {
  overflow: hidden;
  position: relative;
  width: 0.2rem;
  height: 0.28rem;
  color: #2b2425;
}
.mmmn::after {
  content: "0 1 2 3 4 5 6 7 8 9";
  display: block;
  transition: 1.5s cubic-bezier(0, 0.1, 0.58, 1), text-shadow 150ms;
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.28rem;
  font-weight: 700;
}
._black .mmmn::after {
  color: #2b2425;
}
.mmmn_box._into .mmmn[data-val="0"]::after {
  transform: translateY(0rem);
}
.mmmn_box._into .mmmn[data-val="1"]::after {
  transform: translateY(-0.28rem);
}
.mmmn_box._into .mmmn[data-val="2"]::after {
  transform: translateY(-0.56rem);
}
.mmmn_box._into .mmmn[data-val="3"]::after {
  transform: translateY(-0.84rem);
}
.mmmn_box._into .mmmn[data-val="4"]::after {
  transform: translateY(-1.12rem);
}
.mmmn_box._into .mmmn[data-val="5"]::after {
  transform: translateY(-1.4rem);
}
.mmmn_box._into .mmmn[data-val="6"]::after {
  transform: translateY(-1.68rem);
}
.mmmn_box._into .mmmn[data-val="7"]::after {
  transform: translateY(-1.96rem);
}
.mmmn_box._into .mmmn[data-val="8"]::after {
  transform: translateY(-2.24rem);
}
.mmmn_box._into .mmmn[data-val="9"]::after {
  transform: translateY(-2.52rem);
}
.mmmn_s {
  font-size: 0.28rem;
}

/* unit_style */
.unit_style {
  padding: 1.5rem 1.6rem 0;
}
.unit_text {
  width: 100%;
}
.unit_t1 {
  font-size: 0.38rem;
  line-height: 0.5rem;
  font-weight: 400;
  word-spacing: 0.013rem;
  font-family: "PingFang SC";
}
.unit_t2 {
  font-size: 0.18rem;
  margin-top: 0.2rem;
  color: #666;
  width: 80%;
  font-weight: 200;
  line-height: 0.3rem;
  word-spacing: 0.011rem;
}

.unit_t3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0.55rem;
}
.unit_t3_t {
  display: flex;
}
.utt_min {
  position: relative;
  margin-right: 1rem;
}
.utt_min:nth-last-of-type(1) {
  margin-right: 0rem;
}
.utt_min::after {
  content: "";
  width: 1px;
  height: 90%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -0.5rem;
  background-color: rgba(0, 0, 0, 0.2);
}
.utt_min:nth-last-of-type(1)::after {
  width: 0px;
}
.utt_min_t1 {
  font-size: 0.17rem;
  font-weight: 200;
  margin-top: 0.1rem;
}
._black .utt_min_t1 {
  color: #dbad76;
}
.utt_min_t2 {
  /* font-size: 0.45rem; */
  font-size: 0.28rem;
  line-height: 0.45rem;
  font-weight: 700;
}
.utt_min_ss {
  margin-top: 0.1rem;
}
.utt_min_tsf {
  color: #fff;
  opacity: 80%;
}
.utt_min_ts0 {
  color: #000;
  opacity: 80%;
}
._black .utt_min_t2 {
  color: #fff;
}
.unit_swiper {
  margin-top: 0.7rem;
  position: relative;
}
.unit_sw .swiper-slide img {
  width: 100%;
}
.unit_sw .swiper-slide video {
  width: 100%;
}
.unit_sw_tab {
  position: relative;
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.unit_sw_tab_list {
  display: flex;
  position: relative;
}
.unit_sw_tab_list div {
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  font-size: 0.2rem;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  transition: all 1s;
}
._black .unit_sw_tab_list div {
  color: #2b2425;
  font-size: 0.2rem;
  font-weight: 500;
}
.unit_sw_tab_list div.active {
  color: #000;
}
._black .unit_sw_tab_list div.active {
  /* color: #F9E2C6; */
  color: #000;
}
.unit_sw_tab_list div.active::after {
  background-color: #584242;
}
.unit_sw_tab_list div::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  transition: all 0.5s;
}
._black .unit_sw_tab_list div::after {
  background-color: rgba(0, 0, 0, 0.2);
  /* background-color: rgba(255, 255, 255, 0.2); */
}
._black .unit_sw_tab_list div.active::after {
  background-color: #584242;
}
.unit_sw_tab_list div:nth-of-type(1) {
  margin-left: 0;
}
.unit_sw_tab_list div:nth-last-of-type(1) {
  margin-right: 0;
}
.unit_sw_line {
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.15);
}
.unit_sw_line div {
  width: 1rem;
  height: 100%;
  background-color: #dbad76;
  z-index: 1;
  transition: all 0.3s ease;
}

.unit_sw_text_list {
  position: relative;
  height: 0.6rem;
  margin-top: 0.2rem;
}
._black .unit_sw_text_list {
  /* color: #444; */
  color: #fff;
}
.unit_sw_text_list div {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.18rem;
  line-height: 1.5;
  font-weight: 300;
  opacity: 0;
  transition: all 0.5s;
  width: 60vw;
  color: #444;
}
.unit_sw_text_list div.active {
  opacity: 1;
}
.unit_t3_o img {
  width: 3.2rem;
}
/* 黑色主题 */
.unit_style._black {
  /* background-color: rgba(0, 0, 0, 1); */
  background-color: #e8e6e4;
}
.unit_style._black .unit_t1 {
  color: #2b2425;
  font-weight: 500;
  font-size: 0.32rem;
}
.unit_style._black .unit_t2 {
  color: #2b2425;
  /* color: rgba(255, 255, 255, 0.7); */
}
.unit_style._black .utt_min_t1 {
  color: #2b2425;
  /* color: rgba(77, 160, 197, 0.8); */
}

.unit_style._black .utt_min::after {
  background-color: rgba(0, 0, 0, 0.2);
}
/* 滚动交互 */
.sc_1,
.sc_2,
.sc_3 {
  transform: translateY(0.7rem);
  opacity: 0;
  transition: opacity 0.8s linear,
    transform 0.8s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}
.unit_text._into .sc_1 {
  transform: translateY(0rem);
  opacity: 1;
  font-weight: 700;
  /* color: #584242; */
}
.unit_text._into .sc_2 {
  transform: translateY(0rem);
  opacity: 1;
  transition-delay: 0.2s;
}
.unit_text._into .sc_3 {
  transform: translateY(0rem);
  opacity: 1;
  transition-delay: 0.2s;
}
.unit_swiper {
  transform: translateY(0.7rem);
  opacity: 0;
  transition: opacity 0.8s linear,
    transform 0.8s cubic-bezier(0.26, 0.67, 0.48, 0.91);
}
.unit_swiper._into {
  transform: translateY(0rem);
  opacity: 1;
}
.unit_titless {
  color: #584242;
  font-weight: 500;
}

.ust_1 {
  padding: 1.5rem 0 0 1.6rem;
}
.swiper_s3_style .swiper-slide img {
  width: 100%;
}
.swiper_s3_1 .swiper-slide,
.swiper_s3_2 .swiper-slide {
  color: #fff;
}
.swiper_s3_t1 {
  font-size: 0.22rem;
  margin-top: 0.3rem;
  color: #000;
}
.swiper_s3_t2 {
  font-size: 0.16rem;
  margin-top: 0.1rem;
  height: 0.85rem;
  width: 7rem;
  font-weight: 300;
}
.swp_s3_t2 {
  color: #444;
}
.swp_s3_t1 {
  color: #000;
}
.swiper_s3_btn {
  position: relative;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}
.swiper_s3_btn .ss1_btn {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  transform: translateY(0);
  /* background-color: rgb(45, 41, 36); */
  background-color: #4f3f39;
}
.swiper_s3_btn .ss1_btn img:nth-of-type(2) {
  opacity: 1;
}
.swiper_s3_btn .ss1_btn:hover img:nth-of-type(2) {
  opacity: 0;
}
.swiper_s3_btn .ss1_btn:hover {
  /* background-color: rgb(31, 31, 31); */
  /* background-color: rgb(45, 41, 36); */
  background-color: #584242;
}
.swiper_s3_btn .ss1_btn:nth-of-type(2) {
  margin-left: 0.3rem;
}
.ss31_next,
.ss33_next {
  margin-left: 0.3rem;
}

#ss1_btns {
  /* background-color: #DEDCDB; */
  background-color: #6c5b5b;
}
#ss1_btns:hover {
  /* background-color: #6C5B5B; */
  background-color: #372b2b;
}

.swiper_4_style {
  /* padding: 1rem 1.6rem 0; */
}
.swiper_4_style .swiper-wrapper {
  width: 100%;
  overflow: hidden;
  margin-top: 0.3rem;
}
.swiper_4_style .swiper-slide {
  width: 100%;
  display: flex;
}
.swiper4_l img {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  /* transform: translateY(1rem);
	opacity: 0;
	transition: all 1s;
	transition-delay: .2s; */
}
/* .swiper4_l img._into{
	transform: translateY(0rem);
	opacity: 1;
} */

.swiper4_l {
  width: 60%;
}
.swiper4_r {
  width: 40%;
  height: 7rem;
  background-color: #fff;
  flex: 1;
  position: relative;
  padding: 1rem 0.5rem;
  /* transform: translateY(1rem);
	opacity: 0;
	transition: all 1s;
	transition-delay: .2s; */
}
/* .swiper4_r._into{
	transform: translateY(0rem);
	opacity: 1;
} */
.s4r_t1 {
  font-size: 0.3rem;
  font-weight: 500;
}
.s4r_t2 {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
}
.s4r_t2 span {
  display: block;
}
.s4r_t2 span:nth-of-type(1) {
  font-size: 0.24rem;
  font-weight: 500;
}
.s4r_t2 span:nth-of-type(2) {
  font-size: 0.18rem;
  margin-top: 0.1rem;
  font-weight: 300;
}
.s4r_page_style {
  position: absolute !important;
  bottom: 0.3rem !important;
  right: 0rem !important;
  width: 40% !important;
  left: auto !important;
  z-index: 1;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s4r_page_style span {
  width: 45%;
  margin: 0 !important;
  height: 1px;
  border-radius: 0;
}
.s4r_page_style .swiper-pagination-bullet-active {
  background-color: #584242;
}

.what {
  padding: 1rem 1.6rem;
  /* background-color: #6C5B5B; */
  background-color: #e8e6e4;
  margin-top: 1rem;
  color: #fff;
}

.bottom_s1 {
  padding-bottom: 1.5rem;
}

.what img:nth-of-type(2) {
  width: 100%;
  margin-top: 0.7rem;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.what_i{
	transform: translateY(1rem);
	opacity: 0 !important;
	transition: all 2s;
	transition-delay: .4s;
}
.what_i._into{
	transform: translateY(0rem);
	opacity: 1 !important;
}
.what img._into {
  transform: translateY(0rem);
  opacity: 1;
}

.swiper_page {
  display: none;
}
.swiper_ms1_t {
  display: none;
}
.ssm_mb {
  display: none;
}

.unit_title,
.unit_t1 {
  font-size: 0.32rem !important;
  font-weight: 700 !important;
  color: #2b2425;
}

.more_config_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0.95rem;
}
.mct_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #000;
  padding: 0.1rem 0.2rem;
  width: 2rem;
  height: 0.5rem;
  color: #fff;
  background: #000;
  cursor: pointer;
  transform: translateY(1rem);
  opacity: 0;
  transition: all 1s;
}
.mct_b._into{
	transform: translateY(0rem);
	opacity: 1;
}
._img {
  width: 0.24rem;
  position: relative;
}
.mct_b div {
  margin-left: 0.18rem;
  font-weight: 300;
  letter-spacing: 0.02rem;
}
.what img:nth-of-type(1) {
  position: relative;
  opacity: 1;
  transition: all 0.4s;
  width: 100%;
}
.cco_t{
  font-size: 0.18rem;
  font-weight: 300;
}

.padd_lr{
	padding: 0 1.6rem;
}

@media (max-width: 768px) {
  .padd_lr{
  	padding: 0 0.5rem;
  }
  .banner_text {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 0 1rem;
    justify-content: space-between;
  }
  .banner_t1 {
    font-size: 0.7rem;
  }
  .banner_t2 {
    margin-top: 0.1rem;
    font-size: 0.4rem;
  }
  .banner_btn {
    height: 0.8rem;
    width: 3.15rem;
    font-size: 0.24rem;
  }

  .vt_box_2 div,
  .vt_box_2 div span {
    font-size: 0.54rem;
  }
  .vt_box_2 .t2 {
    margin-left: 2rem;
  }

  .unit_1,
  .unit_2,
  .unit_style,
  .swiper_4_style,
  .car_color {
    padding: 1rem 0.5rem 0;
  }
  .what {
    padding: 1rem 0.5rem 1rem;
  }
  .swiper_1,
  .swiper_2,
  .swiper_3,
  .swiper_4 {
    width: 100%;
  }
  .swiper_1 .swiper-slide img,
  .swiper_2 .swiper-slide img,
  .swiper_3 .swiper-slide img,
  .swiper_4 .swiper-slide img {
    width: 100%;
    height: auto;
  }
  .swiper_s1_t{
	  width: 100%;
  }
  /* .unit_title,
  .swiper_s1_t {
    color: #584242  ;
  } */
  .unit_title{
    color: #2b2425 !important;
    font-size: 0.44rem !important;
  }

  .ss1_btn {
    position: relative;
    top: 0%;
    transform: translateY(0%);
    z-index: 1;
    left: 0;
  }
  .ss1_next,
  .ss2_next,
  .ss3_next {
    right: 0;
  }
  .ss1_btn_list {
    display: flex;
    align-items: center;
    justify-content: center;
	
  }
  
  .ss1_btn_list,
  .swiper_s3_btn{
	  transform: translateY(1rem);
	  opacity: 0;
	  transition: all 1s;
  }
  .swiper_s3_btn._into,
  .ss1_btn_list._into{
  	  transform: translateY(0rem);
  	  opacity: 1;
  }
  
  
  .swiper_page {
    margin: 0 0.4rem;
    display: block;
  }
  .swiper_ms1_t {
    display: block;
  }
  .ssm_mb {
    display: block;
  }
  .swiper_page span {
    margin: 0 0.1rem;
  }
  .ss1_btn {
    width: 0.8rem;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swiper_page .swiper-pagination-bullet-active {
    background-color: #6c5b5b;
  }
  .swiper_page .swiper-pagination-bullet {
    background-color: #6c5b5b;
  }

  .car_color_close {
    padding: 0.1rem 0.1rem 0.1rem 0.3rem;
    height: 0.85rem;
    width: 1.7rem;
  }
  .cco_b {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.2rem;
  }
  .cco_b img {
    width: 0.2rem;
  }
  .car_color_open .cco_t {
    font-size: 0.28rem;
  }
  .car_color_close {
    margin-top: 3.5vh;
  }
  .com_t1 {
    font-size: 0.5rem;
    margin-top: 0.5rem;
  }
  .car_img {
    margin-top: 10vh;
  }
  .com_t2 {
    text-align: center;
    margin-top: 8vh;
  }
  .com_t2 div {
    width: 100%;
    transition: all 0.5s;
    font-size: 0.4rem;
  }
  .com_btn {
    flex-direction: column;
  }
  .com_btn_right {
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
  }
  .com_btn_r{
	  margin-bottom: 0;
	  margin-right: 0.3rem;
  }
  .com_btn_r:nth-last-of-type(1){
	  margin-right: 0rem;
  }
  .com_btn_left {
    margin-top: 5vh;
  }
  .com_btn_l {
    width: 2.7rem;
    height: 0.75rem;
    font-size: 0.25rem;
  }
  .com_btn_l2 {
    margin-left: 0.5rem;
  }
  .car_change_color {
    height: 14rem;
  }

  .hm_qy {
    position: relative;
  }
  .qy_btn {
    position: absolute;
    bottom: 0.5rem;
    width: 80%;
    left: 10%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #000;
    color: #fff;
    letter-spacing: 1px;
  }

  .gd_box {
    transform: translateY(1rem);
    opacity: 0;
    transition: all 1s;
  }
  .gd_box._into {
    transform: translateY(0rem);
    opacity: 1;
  }
  .swiper_ms_1 {
    margin-top: 0.4rem;
  }
  .swiper_ms_1 .swiper-slide img {
    width: 100%;
  }
  .swiper_ms1_t {
    padding: 0.4rem;
    padding-left: 0rem;
    height: 2.5rem;
  }
  .swiper_ms1_t._black {
    /* background-color: #3A2720; */
    background-color: #e8e6e4;
  }
  .swiper_s1_t {
    padding: 0.4rem;
    padding-left: 0rem;
    height: 2.5rem;
    margin-top: 0;
  }
  .swiper_ms1_t .t1 {
    font-size: 0.26rem;
    color: #444;
    font-weight: 500;
  }
  .swiper_s3_t1{
	  padding: 0 0.4rem;
    padding-left: 0rem;
	  font-size: 0.26rem;
    font-weight: 500;
	  color: #444;
  }
  .swiper_s3_t2 {
	  padding: 0 0.4rem;
    padding-left: 0rem;
	  font-size: 0.24rem;
    font-weight: 300;
	  line-height: 0.4rem;
	  color: #444;
	  height: 1.5rem;
	  width: 100%;
  }
  .swiper_s1_t{
	  height: auto;
  }
  .swiper_ms1_t{
	  height: auto;
  }
  .swiper_s1_t div:nth-of-type(1){
	  font-size: 0.26rem;
    font-weight: 500;
	  color: #444;
  }
  .swiper_s1_t div:nth-of-type(2){
	  font-size: 0.24rem;
    font-weight: 300;
	  line-height: 0.4rem;
	  color: #444;
  }
  .s4r_t2 span:nth-of-type(2){
	  font-size: 0.22rem;
    font-weight: 300;
  }

  .swiper_ms1_t .t2 {
    font-size: 0.24rem;
    line-height: 0.4rem;
    color: #444;
    font-weight: 300;
    margin-top: 0.1rem;
  }
  .swiper_m1 .swiper_ms1_t {
    background-color: #e8e6e4;
  }
  .swiper_ms1_page {
    position: relative;
    bottom: auto;
    top: auto;
    left: auto;
    width: calc(100% - 0.8rem) !important;
    margin-left: 0.4rem;
    background-color: transparent;
    border-bottom: 1px solid #584242;
  }
  .swiper_ms1_page .swiper-pagination-progressbar {
    height: 1px;
    margin-top: 2px;
    background-color: #584242;
  }
  .swiper_ms1_page._black {
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.23); */
  }
  .swiper_ms1_page._black .swiper-pagination-progressbar {
    /* background-color: #f9e2c6; */
  }
  .bottom_s1 {
    padding-bottom: 1rem;
  }

  .unit_sw_tab {
    display: none;
  }

  .img_hover_filter {
    flex-direction: column;
  }
  .ihf_left,
  .ihf_right {
    width: 100% !important;
  }
  .ihf_min_filter {
    opacity: 0;
  }
  .ihf_min_t1,
  .ihf_min_t2 {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
  }
  .ihf_min_t1 {
    padding: 0.2rem 0.3rem 0.1rem;
	  font-size: 0.26rem;
    font-weight: 500;
    color: #444;
  }
  .ihf_min_t2 {
    padding: 0rem 0.3rem 0.2rem;
	  font-size: 0.24rem;
    font-weight: 300;
    color: #444;
  }
  .unit_t2{
	  font-size: 0.24rem;
	  width: 100%;
    color: #444;
  }
  .ihf_min:hover .ihf_min_t1 {
    top: 0;
  }
  .ihf_min:hover .ihf_min_t2 {
    bottom: 0rem;
  }
  .ihf_min {
    background-color: #F5F5F4;
    margin-bottom: 0.25rem;
  }
  .ihf_min_r2 {
    flex-direction: column;
  }
  .ihf_min_r2 .ihf_min {
    width: 100%;
  }

  .swiper_s3_btn {
    justify-content: center;
  }

  .swiper_4_style .swiper-slide {
    flex-direction: column;
  }
  .swiper_4_style {
    padding: 0;
  }
  .swiper4_l,
  .swiper4_r {
    width: 100%;
  }
  .swiper4_r {
    padding: 0.5rem 0.5rem 1rem;
    height: auto;
  }
  .swiper4_l img {
    height: auto !important;
  }
  .s4r_t2 {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 0.5rem;
  }
  .s4r_page_style {
    position: absolute !important;
    bottom: 0.5rem !important;
    right: auto !important;
    width: calc(100% - 1rem) !important;
    left: auto !important;
    z-index: 1;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
	.parameter_1{
	  display: flex;
	  flex-shrink: 0;
	  width: 100%;
	}
	.mb_parameter .unit_t3_t {
	  flex-direction: column;
	}
	.parameter_1_2 {
	  margin-top: 0.25rem;
	}
  
  
  
  
  .cover_text .cover_text2{
	  font-size: 0.7rem;
	  margin-top: 0.1rem;
  }
  
  
  .utt_min_t2 {
      font-size: 14px;
      line-height: 14px !important;
  }
  .mmmn::after{
	  font-size: 14px;
	  line-height: 14px;
  }
  .mmmn{
	  width: 10px;
	  height: 14px;
  }
  .mmmn_box._into .mmmn[data-val="0"]::after {
    transform: translateY(0px);
  }
  .mmmn_box._into .mmmn[data-val="1"]::after {
    transform: translateY(-14px);
  }
  .mmmn_box._into .mmmn[data-val="2"]::after {
    transform: translateY(-28px);
  }
  .mmmn_box._into .mmmn[data-val="3"]::after {
    transform: translateY(-42px);
  }
  .mmmn_box._into .mmmn[data-val="4"]::after {
    transform: translateY(-56px);
  }
  .mmmn_box._into .mmmn[data-val="5"]::after {
    transform: translateY(-70px);
  }
  .mmmn_box._into .mmmn[data-val="6"]::after {
    transform: translateY(-84px);
  }
  .mmmn_box._into .mmmn[data-val="7"]::after {
    transform: translateY(-98px);
  }
  .mmmn_box._into .mmmn[data-val="8"]::after {
    transform: translateY(-112px);
  }
  .mmmn_box._into .mmmn[data-val="9"]::after {
    transform: translateY(-126px);
  }
  .mmmn_s {
    font-size: 14px;
  }

  .cover_text{
    bottom: 1.5rem;
    left: 0.5rem;
  }
  .qjgc_btn span{
    font-size: 0.23rem;
    margin-left: 0.2rem;
    font-weight: 300;
    margin-right: 0.1rem;
  }
  .qjgc_btn{
    width: 2rem;
  }
  .cover_text1{
    font-weight: 350;
    font-size: 0.34rem;
  }
  .unit_style._black .unit_t1{
    color: #584242;
  }
  .unit_text._into .sc_1{
    color: #2b2425;
    font-size: 0.44rem !important;
    /* padding-left: 0.4rem; */
  }
  .cco_t{
    font-size: 0.24rem;
    font-weight: 400;
  }
  #ss1_btns:hover{
    background-color: #DEDCDB;
  }
  #ss1_btns{
    background-color: #6C5B5B;
  }
  /* .ss1_btn_list{
    display: flex !important;
  }
   */
  #btn_mb_ss{
    display: flex !important;
  }
  .more_config_top{
    display: inline-block;
    padding-bottom: 0.3rem;
  }
  .mct_b._into{
    margin-top: 0.5rem;
  }
  .what img:nth-of-type(2){
    margin-top: 0.4rem;
  }
  .mct_b div{
    font-size: 0.19rem;
    letter-spacing: 0.02rem;
    margin-left: 0.16rem;
  }
  
  .mb-color{
      display: block !important;
  }
  .swiper_ms_1 .swiper-slide img{
      height: auto;
  }
  .qy_btn{
        justify-content: center;
        align-items: center;
  }
  
    .mb-only{
        display: block !important;
    }



}




/* 预约试驾 2024 */
.test_drive_new{
    width: 100%;
    position: relative;
}
.test_drive_bk{
    position: relative;
    width: 100%;
}
.test_drive_car{
    position: absolute;
    width: 41%;
    left: 43%;
    top: 34%;
}
.test_drive_tb{
    position: absolute;
    top: 1rem;
    left: 5%;
}
.test_drive_t1{
    font-size: 0.4rem;
    font-weight: 300;
    color: rgb(107, 94, 88);
    letter-spacing: 0.074rem;
}
.test_drive_t2{
    font-size: 0.22rem;
    font-weight: 200;
    color: rgb(107, 94, 88);
    margin-top: 0.15rem;
    letter-spacing: 0.1rem;
}
.test_drive_b{
    width: 2.5rem;
    padding: 0.2rem 0;
    text-align: center;
    margin-top: 0.3rem;
    background: rgb(137, 123, 120);
    color: #fff;
    letter-spacing: 0.05rem;
    font-size: 0.15rem;
    font-weight: 200;
    cursor: pointer;
    display: block;

}
@media (max-width: 768px) {
    .test_drive_tb{
        top: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .test_drive_car{
        width: 74%;
        left: 13%;
        top: 56%;
    }
    .test_drive_t1{
        font-size: 0.5rem;
    }
    .test_drive_t2{
        font-size: 0.28rem;
    }
    .test_drive_b{
        width: 3rem;
        font-size: 0.22rem;
    }
    .ss31_next, .ss33_next {
        margin-left: 0rem;
    }
}