@charset "utf-8";

@font-face {
  font-family: hyjh;
  src: url(https://www.cadillac.com.cn/css/font/lantingxihei.woff) format("woff");
}

/* @font-face {
  font-family: qihei;
  src: url(https://mini.cadillac.com.cn/wap/active/202208genshin_ct4_xt4/fonts/qh45.woff) format("woff");
} */

@font-face {
  font-family: trim;
  src: url(https://www.cadillac.com.cn/css/font/CadillacGothic-Regular.woff) format("woff");
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  background-color: white;
  font-family: trim, hyjh, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /* scroll-behavior: smooth; */
}

.swiper-container {
  transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

/* .swiper-slide {
  width: 100%;
  height: 177.867vw;
  overflow: hidden;
  backface-visibility: hidden;
  position: relative;
} */

li {
  list-style: none;
}

a {
  text-decoration: none;
  display: block;
}

a img {
  width: 100%;
}

a.hover {
  opacity: .8;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 12vw;
  background-color: black;
  z-index: 1000;
}

#btn_tel {
  position: absolute;
  background-color: rgba(15, 15, 15, .57);
  position: absolute;
  right: 2.133vw;
  top: 16.667vw;
  width: 7.733vw;
  height: 7.733vw;
  border-radius: 3.8667vw;
  display: flex;
  overflow: hidden;
  align-items: center;
  transition: width .3s ease;
  transform: translateZ(0);
}

#btn_tel.active {
  width: 37.333vw;
}

.btn_tel {
  width: 4vw;
  flex-shrink: 0;
  margin-left: 2vw;
}

#btn_tel span {
  font-family: trim, hyjh;
  line-height: 7.733vw;
  font-size: 2vw;
  color: white;
  padding-left: 2.667vw;
}

.logo {
  position: absolute;
  width: 10vw;
  left: 6vw;
  top: 2.667vw;
}

#btn_home {
  position: absolute;
  left: 79.333vw;
  top: 4.667vw;
  width: 15.467vw;
  height: 3.067vw;
}

#btn_coupon {
  position: absolute;
  left: 61.467vw;
  top: 3.6vw;
  width: 21.733vw;
  /* height: 2.533vw; */
}

#btn_menu {
  position: absolute;
  right: 0vw;
  top: 4vw;
  width: 12.667vw;
  height: 3.067vw;
}

.btn_menu {
  width: 6.8vw;
}

/* .btn_menu_toggle {
  position: absolute;
  right: 0;
  top: 0.533vw;
  width: 4.133vw;
  transition: transform .3s ease;
}

#btn_menu.active .btn_menu_toggle {
  transform: rotateZ(180deg);
} */

#menu {
  position: fixed;
  top: 12vw;
  left: 0;
  width: 100%;
  z-index: 1001;
  background-color: black;
  display: none;
  overflow-y: auto;
  font-family: trim, hyjh;
}

#menu li {
  height: 13.867vw;
  line-height: 13.867vw;
  padding-left: 6.933vw;
  border-bottom: 2px solid rgb(66, 66, 66);
  font-size: 4.267vw;
  color: white;
}

#menu li.active {
  background-color: #333;
}

#menu.active {
  display: block;
}

.btn_toggle {
  position: absolute;
  left: 91.467vw;
  top: 4.533vw;
  width: 5.333vw;
}

.header_pic {
  position: absolute;
  top: 12vw;
  left: 0;
  width: 100%;
}

.header_tel {
  position: absolute;
  left: 18.933vw;
  top: 165.067vw;
  width: 61.867vw;
  height: 6.667vw;
  z-index: 453;
}

.menu_btns {
  position: absolute;
  left: 6.8vw;
  top: 19.867vw;
  width: 86.667vw;
  height: 41.333vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#p9_success {
  position: fixed;
  background: white;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  z-index: 2005;
}

.p9_success {
  display: block;
  margin: 0 auto;
  width: 100vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#p9_form_close .p9_btn_close {
  position: absolute;
  top: 5.333vw;
}

#p9_form_close2 {
  position: absolute;
  top: 100vw;
  left: 35vw;
  height: 10vw;
  width: 30vw;
/*   background: black; */
}

.form {
  /* margin-top:13.333vw; */
  height: 80vw;
  /* position: absolute; */
  /* left: 6.8vw; */
  /* top: 64vw; */
  /* width: 86.667vw; */
  /* height: 79.333vw; */
  position: relative;
}

.p9_form {
  position: absolute;
  top: 0;
  left: 6.667vw;
  width: 86.667vw;
}

input, select {
  -webkit-appearance: none;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  outline: 0;
  background-color: transparent;
  font-family: trim, hyjh, sans-serif;
  font-size: 2.933vw;
  color: black;
  position: absolute;
  left: 6.667vw;
  width: 86.667vw;
  height: 8.667vw;
}

#name {
  top: 9.333vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 2.667vw;
}

#phone {
  top: 21.333vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 2.667vw;
}

#cartype {
  top: 34.4vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 10.667vw 0 2.667vw;
}

#carmodel {
  top: 46.667vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 10.667vw 0 2.667vw;
}

#province {
  top: 58.933vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 10.667vw 0 2.667vw;
}

#city {
  top: 71.3vw;
  line-height: 8.667vw;
  box-sizing: border-box;
  padding: 0 10.667vw 0 2.667vw;
}

#p9_privacy {
  position: relative;
  margin-top: 4vw;
  width:100%;
  height: 12.4vw;
}

.p9_privacy_pic {
  position: absolute;
  left:6.667vw;
  width:69.333vw;
}

#form_agree_message {
  position: absolute;
  left: 6.66vw;
  top: 0.533vw;
  width: 4vw;
  height: 4vw;
}

#form_agree_message:after {
  content: '';
  position: absolute;
  width: 3.467vw;
  height: 3.467vw;
  border-radius: 0.8vw;
  background-color: black;
  top: 0.133vw;
  left: 0.667vw;
  opacity: 0;
}

#form_agree_privacy  {
  position: absolute;
  left: 6.66vw;
  top: 8vw;
  width: 4vw;
  height: 4vw;
/*   background:red; */
}

#form_agree_privacy:after {
  content: '';
  position: absolute;
  width: 3.467vw;
  height: 3.467vw;
  border-radius: 0.8vw;
  background-color: black;
  top: 0.133vw;
  left: 0.66vw;
  opacity: 0;
}

#form_agree_message.active:after,
#form_agree_privacy.active:after {
  opacity: 1;
}

#form_btn_privacy {
  position: absolute;
  top: 6.667vw;
  left: 37.333vw;
  width: 16vw;
  height: 5.333vw;
/*   background-color: black; */
}

#p9_btn_submit {
  width: 86.667vw;
  margin: 4vw auto;
}

#footer {
  position: fixed;
  width: 100%;
  height: 13.333vw;
  z-index: 99;
  bottom: -0.133vw;
  left: 0;
}

.footer_pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
}

#footer_btns {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

#footer_btns a {
  width: 33.3%;
  height: 100%;
  display: block;
  -webkit-tap-highlight-color: rgba(0,0,0,.5);
}

.footer_wechat_btns {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 66.6vw;
  height: 13.333vw;
}

#footer_launch_btn_ct4 {
  position: absolute;
  width: 33.3vw;
  height: 100%;
  right: 33.3vw;
  bottom: 0;
  z-index: 2;
}

#footer_launch_btn_xt4 {
  position: absolute;
  width: 33.3vw;
  height: 100%;
  right: 0;
  bottom: 0;
  z-index: 2;
}

#footer_disabled {
  position: absolute;
  width: 66.4vw;
  height: 100%;
  right: 0;
  bottom: 0;
  z-index: 4;
  background-color: rgba(200,200,200,.8);
}

.btn_submit {
  position: absolute;
  width: 66.667vw;
  bottom: 0;
  left: 10.8vw;
}

/* .btn_home {
  position: absolute;
  left: 42.267vw;
  top: 151.067vw;
  width: 15.467vw;
} */

#main {
  padding-top: 12vw;
  padding-bottom: 12vw;
  width: 100%;
  background-color: white;
}

.page {
  position: relative;
  width: 100vw;
}

.page img {
  backface-visibility: hidden;
}

.pic {
  width: 100vw;
  display: block;
}

.p1 {
  height: 186.267vw;
}

#p1_btn_ct4, #p1_launch_btn_ct4 {
  position: absolute;
  left: 6.667vw;
  top: 164.133vw;
  width: 42.667vw;
  height: 9.333vw;
}

#p1_btn_xt4, #p1_launch_btn_xt4 {
  position: absolute;
  left: 50.667vw;
  top: 164.133vw;
  width: 42.667vw;
  height: 9.333vw;
}

#p2 {
  height: 56.267vw;
  overflow: hidden;
}

#p2_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

#p2_poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#p7 {
  height: 61.733vw;
}

#p7_btn1 {
  position: absolute;
  left: 6.7vw;
  top: 36.8vw;
  width: 86.667vw;
}

#p72 {
  height: 90vw;
}

#p7_btn2 {
  position: absolute;
  left: 6.5vw;
  top: 76.5vw;
  width: 87vw;
}

#p3 {
  height: 105.333vw;
}

#p3_ct4, #p3_xt4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  opacity: 0;
  transition: opacity .4s linear;
}

#p3_ct4 img, #p3_xt4 img {
  width: 100vw;
}

#p3_ct4 {
  opacity: 1;
}

#p4 {
  height: 10.8vw;
  margin-bottom: 13.333vw;
  /* top: 0; */
  /* top: -14.667vw; */
}

#fixed_btns {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 10.667vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* z-index: 5; */
  overflow: hidden;
}

/* #fixed_btns a:not(:last-child) {
  margin-right: 1.333vw;
} */

#fixed_btns a {
  position: relative;
  width: 50vw;
  height: 10.8vw;
  flex-shrink: 0;
  margin-right: 0;
}

#fixed_btns a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50.133vw;
  display: block;
}

#fixed_btns a.active img {
  opacity: 0;
}

#fixed_btns a.active img {
  opacity: 1;
}

#fixed_btns a.active img:first-child {
  opacity: 1;
}

#fixed_btns a.active img:last-child {
  opacity: 0;
}

#fixed_btns.fixed {
  position: fixed;
  top: 12vw;
}

#p5 {
  margin-top: 0;
  margin-bottom: 20vw;
  height: 95.733vw;
}

.swiper-pagination-bullet{
  border-radius: 0;
  opacity: 1;
  background-color: rgb(160, 160, 160);
  width: 7.467vw;
  height: 0.667vw;
}

.swiper-pagination-bullet-active {
  background-color: black;
}


#p5_outside {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#p5_inside {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#p5_inside_canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120vw;
}

.p5_btn_outside {
  position: absolute;
  width: 25.867vw;
  height: 9.467vw;
  top: 0.9vw;
  left: 14.5vw;
}

.p5_btn_inside {
  position: absolute;
  width: 25.867vw;
  height: 9.467vw;
  top: 0.9vw;
  right: 14.6vw;
}

.p5_btn_outside img,
.p5_btn_inside img {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  opacity: 0;
  /* transition: opacity .4s ease; */
}

#p5_pics {
  position: absolute;
  top: 20.133vw;
  left: 0;
  width: 100vw;
  height: 68vw;
  /*   background:black; */
  /*   height: 56.25vw; */
}

#p5_pics img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.p5_colors, .p5_inside_colors {
  position: absolute;
  left: 19.6vw;
  top: 106.933vw;
  width: 62.667vw;
  height: 8.667vw;
}

.p5_colors img,
.p5_inside_colors img {
  width:100%;
}

.p5_color, 
.p5_inside_color {
  position: absolute;
  left: 0;
  top: 0;
  width: 62.667vw;
}

#p5_color_btn, 
#p5_color_inside_btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

#p5_color_btn>div, 
#p5_color_inside_btn>div {
  position: relative;
  width: 12vw;
  height: 8.667vw;
}

#p5_color_btn>div:after,
#p5_color_inside_btn>div:after {
  content: '';
  position: absolute;
  border-width: 0.267vw;
  border-color: rgb(87, 84, 237);
  border-style: solid;
  width: 15.467vw;
  height: 12vw;
  left: -1.867vw;
  top: -1.6vw;
  opacity: 0;
  transition: opacity .4s linear;
  box-sizing: border-box;
}

#p5_color_btn>div.active:after,
#p5_color_inside_btn>div.active:after {
  opacity: 1;
}

#p5_color_txt,
#p5_color_inside_txt {
  position: absolute;
  font-size: 4.267vw;
  color: black;
  top: -10.667vw;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}

#p5_inside_canvas {
  position: absolute;
  top: 14.667vw;
  left: 0;
  width: 100vw;
  height: 94.667vw;
  /* background: black; */
  /*   height: 56.25vw; */
}

#p5_color_btns_ct4, #p5_color_btns_xt4 {
  position:absolute;
  bottom: 13.333vw;
  width: 100%;
  height: 12vw;
  left: 0;
  display: flex;
  justify-content:center;
  align-items:center;
}

#p5_color_btns_ct4 div, #p5_color_btns_xt4 div {
  position: relative;
  width: 12vw;
  height: 12vw;
  position: relative;
  filter: grayscale(1) opacity(.5);
  /* transition: filter .4s linear; */
  /*   margin-right: 6.133vw; */
}

#p5_color_btns_ct4 div.active:after {
  content: '';
  position: absolute;
  left: -1vw;
  top:-1vw;
  height:13vw;
  width:13vw;
  border: 0.5vw solid #b9e6dd;
  border-radius:100%;
  opacity: 0;
  /* transition: opacity .4s linear; */
}

#p5_color_btns_xt4 div.active:after {
  content: '';
  position: absolute;
  left: -1vw;
  top:-1vw;
  height:13vw;
  width:13vw;
  border: 0.5vw solid #332f54;
  border-radius:100%;
  opacity: 0;
  /* transition: opacity .4s linear; */
}

#p5_color_btns_ct4 div.active, #p5_color_btns_xt4 div.active {
  filter: none;
}

#p5_color_btns_ct4 div.active:after, #p5_color_btns_xt4 div.active:after {
  opacity: 1;
}

#p5_color_btns_ct4 div:not(:last-child), #p5_color_btns_xt4 div:not(:last-child) {
  margin-right: 6.133vw;
}



#p5_color_inside_btns_ct4, #p5_color_inside_btns_xt4 {
  position:absolute;
  bottom: 13.333vw;
  width: 100%;
  height: 12vw;
  left: 0;
  display: flex;
  justify-content:center;
  align-items:center;
}

#p5_color_inside_btns_ct4 div, #p5_color_inside_btns_xt4 div {
  position: relative;
  width: 12vw;
  height: 12vw;
  position: relative;
  filter: grayscale(1) opacity(.5);
  /* transition: filter .4s linear; */
  /*   margin-right: 6.133vw; */
}

#p5_color_inside_btns_ct4 div.active:after {
  content: '';
  position: absolute;
  left: -1vw;
  top:-1vw;
  height:13vw;
  width:13vw;
  border: 0.5vw solid #b9e6dd;
  border-radius:100%;
  opacity: 0;
  /* transition: opacity .4s linear; */
}

#p5_color_inside_btns_xt4 div.active:after {
  content: '';
  position: absolute;
  left: -1vw;
  top:-1vw;
  height:13vw;
  width:13vw;
  border: 0.5vw solid #332f54;
  border-radius:100%;
  opacity: 0;
  /* transition: opacity .4s linear; */
}

#p5_color_inside_btns_ct4 div.active, #p5_color_inside_btns_xt4 div.active {
  filter: none;
}

#p5_color_inside_btns_ct4 div.active:after, #p5_color_inside_btns_xt4 div.active:after {
  opacity: 1;
}

#p5_color_inside_btns_ct4 div:not(:last-child), #p5_color_inside_btns_xt4 div:not(:last-child) {
  margin-right: 6.133vw;
}

#p6 {
  height: 293.333vw;
}

#p6>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p6_spotlight_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.p6_tips {
  position: absolute;
  top: 271vw;
  width: 74.8vw;
  left: 12.6vw;
}

#p6_swiper_ct4,
#p6_swiper_xt4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130.667vw;
}

#p6_swiper_ct4 img,
#p6_swiper_xt4 img {
  width:100%;
}

#p6_ct4_pagination, #p6_xt4_pagination {
  position: absolute;
  top: 62.667vw;
  left: 0;
  width: 100%;
  height: 2.667vw;
  z-index: 2;
  display: flex;
  justify-content: center;
  bottom: unset;
  transform:translateZ(0);
}

#p6_ct4_pagination .swiper-pagination-bullet, 
#p6_xt4_pagination .swiper-pagination-bullet {
  width: 4vw;
  height: 4vw;
/*   background-color: white; */
  transform:rotateZ(45deg);
  margin-right: 5.333vw;
  position:relative;
  z-index: 1;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s ease;
}

#p6_ct4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, 
#p6_xt4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgba(255,255,255);
}

#p6_ct4_pagination .swiper-pagination-bullet:last-child, 
#p6_xt4_pagination .swiper-pagination-bullet:last-child {
  margin-right: 0;
}

#p6_ct4_pagination .swiper-pagination-bullet:before, 
#p6_xt4_pagination .swiper-pagination-bullet:before {
  content:'';
  position: absolute;
  width: 2.133vw;
  height: 2.133vw;
  top: 0.933vw;
  left: 0.933vw;
  background-color:white;
  transition: background-color .4s ease;
}

#p6_ct4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color: rgb(131, 202, 190);
}

#p6_xt4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color: rgb(51,47,84);
}

#p6_ct4_pagination .swiper-pagination-bullet:after, 
#p6_xt4_pagination .swiper-pagination-bullet:after {
  content:
  '';
  position: absolute;
  /*   width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin:center center; */
  width: 4vw;
  height: 4vw;
  top: 0vw;
  left: 0vw;
  background-color: transparent;
  border:1px solid white;
  transition: transform .4s ease;
  transform: scale3d(.3,.3,1);
  box-sizing: border-box;
}

#p6_ct4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after, 
#p6_xt4_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  transform: scale3d(1.5,1.5,1);
}


.p6_btn_config {
  position: absolute;
  left: 37.067vw;
  top: 185.6vw;
  width: 25.733vw;
  height: 3.867vw;
}

.p6_btn_picture {
  position: absolute;
  left: 37.067vw;
  top: 261.6vw;
  width: 25.733vw;
  height: 3.867vw;
}

#p6_picture_ct4, #p6_picture_xt4 {
  position: absolute;
  left: 5.6vw;
  top: 203.333vw;
  width: 89.467vw;
  /* height: 68.8vw; */
}

#p6_picture_ct4 img, #p6_picture_xt4 img {
  width: 100%;
}

#p8 {
  height: 243.133vw;
}

#p8_swiper {
  /* position:absolute; */
  width: 100vw;
  height: 163.133vw;
  /* top: 0; */
  /* left: 0; */
}

#p8_swiper .swiper-slide {
  background: white;
}

#p8_swiper .p8_swiper1 {
  position:absolute;
  width: 100vw;
  top: 0;
  left: 0;
}

#p8_swiper .p8_swiper2 {
  position:
  absolute;
  width: 100vw;
  top: -9.6vw;
  left: 0;
}


.p8_pic {
  position:absolute;
  width: 100vw;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
  transform:translateZ(0);
}

#p8_swiper .pic {
  position:absolute;
  bottom: 0;
  width:100%;
}

#p8_pagination {
  position: absolute;
  top: 221.333vw;
  left: 0;
  width: 100%;
  height: 2.667vw;
  z-index: 2;
  display: flex;
  justify-content: center;
  bottom: unset;
  transform:
  translateZ(0);
}

#p8_pagination .swiper-pagination-bullet {
  width: 4vw;
  height: 4vw;
/*   background-color: white; */
  transform:rotateZ(45deg);
  margin-right: 5.333vw;
  position:relative;
  z-index: 1;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s ease;
}

#p8_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgba(255,255,255,0);
}

#p8_pagination .swiper-pagination-bullet:last-child {
  margin-right: 0;
}

#p8_pagination .swiper-pagination-bullet:before {
  content:'';
  position: absolute;
  width: 2.133vw;
  height: 2.133vw;
  top: 0.933vw;
  left: 0.933vw;
  background-color:rgb(131, 202, 190);
  transition: background-color .4s ease;
}

#p8_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color: rgb(131, 202, 190);
}

#p8_pagination .swiper-pagination-bullet:after {
  content:'';
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: -0.8vw;
  left: -0.8vw;
  background-color: transparent;
  border:0.8vw solid rgb(191, 245, 229);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  transform: scale3d(.4,.4,1);
}

#p8_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  transform: scale3d(1,1,1);
  opacity: 1;
  
}

#p8_btn_cdk {
  position: absolute;
  top: 222.667vw;
  left: 16.066vw;
  width: 67.867vw;
  height: 10.667vw;
  z-index: 5;
  /* margin: 0 auto; */
}

#p8_btn_cdk img {
  width: 100%;
}


#p8_colors {
  position:
  absolute;
  top: 61.333vw;
  width: 100%;
  height: 12vw;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  transform:
  translateZ(0)
}

#p8_colors div {
  position: relative;
  width: 12vw;
  height: 12vw;
  position: relative;
  filter: grayscale(1) opacity(.5);
  transition: filter .4s linear;
}

#p8_colors div:first-child.active:after {
  content: '';
  position: absolute;
  left: -1.2vw;
  top: -1vw;
  height: 14.2vw;
  width: 14.2vw;
  border: 0.5vw solid #b9e6dd;
  border-radius:100%;
  opacity: 0;
  transition: opacity .4s linear;
  box-sizing: border-box;
}

#p8_colors div:last-child.active:after {
  content: '';
  position: absolute;
  left: -1.2vw;
  top: -1vw;
  height: 14.2vw;
  width: 14.2vw;
  border: 0.5vw solid #332f54;
  border-radius:100%;
  opacity: 0;
  transition: opacity .4s linear;
  box-sizing: border-box;
}

#p8_colors div.active {
  filter: none;
}

#p8_colors div.active:after {
  opacity: 1!important;
}

#p8_colors div:not(:last-child) {
  margin-right: 6.133vw;
}

#p8_colors div img {
  width: 100%;
}

#p9 {
  height: 225.6vw;
}

.p9_pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.p9_btn_app {
  position: absolute;
  left: 16.667vw;
  top: 118.267vw;
  width: 66.667vw;
}

#p9 {
  height: 142.333vw;
}

#p9_btn_pop {
  width: 43.733vw;
  margin: 6.667vw auto 0;
}

.p9_qrcode {
  display: block;
  margin: 2.667vw auto 0;
  width:36.133vw;
  height: 36.133vw;
}

.p9_qrcode_tips {
  display: block;
  margin: 4vw auto 13.333vw;
  width: 38.8vw;
}

#popup {
  position: fixed;
  top: 11.867vw;
  width: 100%;
  height: calc(100vh - 12vw);
  display: none;
  z-index: 100;
  overflow-y: auto;
  background-color: #f0f0f0;
  opacity: 0;
  transition: opacity .3s ease;
}

.p9_pop {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.p9_btn_close {
  position: fixed;
  left: 5.333vw;
  top: 15.467vw;
  width: 6.667vw;
}

/* Privacy Statements */
/* #privacy {

} */

.copyrightDes {
  color: #363636;
  font-size: 1.867vw;
  width: 100%;
  height: 100%;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
  display: none;
}

.copyrightDes div {
  position: relative;
}

.copyrightDes span {
  letter-spacing: 1.0.533vw;
}

.copyrightDes a {
  color: #363636;
  font-size: 1.867vw;
  text-decoration: underline;
}

.copyrightDes p {
  padding-bottom: 3.467vw;
  line-height: 3.733vw;
  font-weight: normal;
}

.copyrightDes h1,
.copyrightDes h2,
.copyrightDes h3,
.copyrightDes h4,
.copyrightDes h5 {
  font-weight: normal;
  padding-bottom: 3.467vw;
}

.copyrightDes ul,
.copyrightDes li {
  list-style: circle inside;
  line-height: 3.733vw;
  padding-bottom: 1.867vw;
  font-weight: normal;
}

.copyrightDes .article {
  padding-top: 2.667vw;
  width: 90%;
  height: 88%;
  margin-left: 5%;
  overflow: auto;
}

.driveSuccess {
  background-color: #8a1529 !important;
}

#closePrivacyBtn {
  width: 20vw;
  height: 5.333vw;
  margin: 0 0 0 -6.667vw;
  background: black;
  position: fixed;
  bottom: 2%;
  left: 80%;
  color: #fff;
  text-align: center;
  font-size: 2.4vw;
  line-height:5.333vw;
}

.arrow {
  position: absolute;
  left: 47.067vw;
  top: 152vw;
  width: 5.467vw;
  animation: arrow 1.5s ease infinite;
  pointer-events: none;
}

/* .swiper-slide-active .arrow {
  animation: arrow 1.5s ease infinite;
} */

@keyframes arrow {
  from, to {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(0, -1.333vw, 0);
  }
}

#p5_loading {
  position: absolute;
  width: 100%;
  height: calc(100% + 37.333vw);
  top: -24vw;
  left: 0;
  z-index: 50;
  background-color: rgba(255,255,255,.4);
  backdrop-filter: blur(0.533vw);
  -webkit-backdrop-filter: blur(0.533vw);
  display: none;
}

#p5_loading.active {
  display: block;
}

.p5_loading_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.p5_loading_wrapper div {
  width: auto;
  height: 5.333vw;
  margin: 0 auto;
}

.p5_loading_wrapper div span {
  display: inline-block;
  width: 1.067vw;
  height: 100%;
  border-radius: 4px;
  background: black;
}

#p5_loading.active .p5_loading_wrapper div span {
  animation: uploading 1s ease infinite;
}

#p5_loading.active .p5_loading_wrapper div span:nth-child(2) {
  animation-delay: .2s;
}

#p5_loading.active .p5_loading_wrapper div span:nth-child(3) {
  animation-delay: .4s;
}

#p5_loading.active .p5_loading_wrapper div span:nth-child(4) {
  animation-delay: .6s;
}

#p5_loading.active .p5_loading_wrapper div span:nth-child(5) {
  animation-delay: .8s;
}

@keyframes uploading {
  0%, 100% {
    height: 5.333vw;
    background: black;
  }
  50% {
    height: 9.333vw;
    margin: -2vw 0;
    background: #333;
  }
}

#p5_loading_txt {
  font-size: 3.733vw;
  text-align: center;
  margin-top: 5.333vw;
  letter-spacing: 0.267vw;
  width:100%;
}

#picture_zoom_in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.8);
  display: none;
  z-index: 1500;
  opacity: 0;
  transition: opacity .4s ease;
}

#picture_zoom_in_ct4,
#picture_zoom_in_xt4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
}

#picture_zoom_in_swiper .swiper-slide>div:first-child {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.picture_zoom_in_pic {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

#picture_zoom_in_btn_prev_ct4,
#picture_zoom_in_btn_prev_xt4 {
  position: absolute;
  left: 1.066667vw;
  top: 50vh;
  width: 5.2vw;
  z-index: 15;
  transform: translateY(-50%) translateZ(0);
}

#picture_zoom_in_btn_next_ct4,
#picture_zoom_in_btn_next_xt4 {
  position: absolute;
  right: 1.066667vw;
  top: 50vh;
  width: 5.2vw;
  z-index: 15;
  transform: translateY(-50%) translateZ(0);
}

#picture_zoom_in_btn_close {
  position: absolute;
  top: 6.6666666vw;
  left: 88.13333333vw;
  width: 5.2vw;
  z-index: 15;
  transform: translateZ(0);
}