/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


* {
  margin: 0;
  padding: 0;
}
table,
tr {
  width: 100%;
}
img {
  display: block;
}
li {
  list-style: none;
}
body {
  overflow: hidden;
}

.hideloading {
  opacity: 0 !important;
  /* right: -100% !important; */
}

/* loading */
#loadingBox {
  opacity: 1;
  -webkit-transition: 0.46s;
  -o-transition: 0.46s;
  transition: 0.46s;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}

.box_bg {
  width: 100%;
}

.box_content {
  position: relative;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-58%);
  -ms-transform: translateY(-58%);
  transform: translateY(-58%);
}

/* 文案部分样式 */

.text_loading {
  width: 100%;
  direction: ltr !important;
            text-align: left !important;
}

.text_loading .borderimg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 46.7%;
  transform: translateY(-50%);
}
.text_loading img {
  width: 100%;
}

.text_fill {
  width: 0%;
  transition: 0.2s;
  /* transition-timing-function: linear; */
  overflow: hidden;
  position: absolute;
  top: 80.3%;
  transform: translateY(-50%);
  height: 100%;
}

.text_fill img {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

.text_shadow {
  width: 98%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 79%;
  transform: translateY(-50%);
  opacity: 0.2;
}

/* 汽车部分样式 */
#car_box {
  width: 37%;
  position: absolute;
  top: 40%;
  left: 0;
  -webkit-animation: car 0.81s ease;
  animation: car 0.81s ease;
  z-index: 2;
  left: 0;
  right: 0;
  margin: 0 auto;

}

.car_one .car {
  width: 100%;
}

.car_two {
  width: 100%;
}

.car_two .car {
  position: absolute;
  width: 100%;
  top: 94%;
  /* z-index: 0; */
}

.car_animation {
  -webkit-animation: wheel 0.9s;
  animation: wheel 0.9s;
}

.rear_wheel {
  position: absolute;
  left: 14.5%;
  width: 17.5%;
  bottom: 3.4%;
}

.qian_wheel {
  position: absolute;
  width: 17.2%;
  left: 74.9%;
  top: 94%;
  opacity: 0.07;
}
.hou_wheel {
  position: absolute;
  width: 17.5%;
  left: 15%;
  top: 93.8%;
  opacity: 0.07;
}

.front_wheel {
  position: absolute;
  left: 72.7%;
  width: 17.5%;
  bottom: 3%;
}


.show {
  opacity: 1 !important;
}

/* 底部样式 */
.box_foot {
  position: absolute;
  width: 100%;
  top: 72%;
}

#logo_box {
  width: 8%;
  top: 6%;
  margin: 0 auto;
  padding-top: 8%;
  z-index: 2;
  /* opacity: 0; */
  /* transition: 0.3s; */
}

#logo {
  width: 100%;
}

#foot_text {
  width: 37%;
  margin: 0 auto;
  z-index: 2;
  height: 1vw;
  /* transition: 0.3s; */
  /* opacity: 0; */
}
#foot_text img {
  width: 100%;
}


/* 遮罩部分样式 */
.loadingMask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 10;
}

/* 文字加载动画 */
@-webkit-keyframes loading {
  from {
    max-width: 0;
  }
}
@keyframes loading {
  from {
    max-width: 0;
  }
}

@-webkit-keyframes car {
  0% {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }
}

@keyframes car {
  0% {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }
}

@-webkit-keyframes wheel {
  from {
    -webkit-transform: rotate(-0.7turn);
    transform: rotate(-0.7turn);
  }

  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

@keyframes wheel {
  from {
    -webkit-transform: rotate(-0.7turn);
    transform: rotate(-0.7turn);
  }

  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

/* 手机端css */
.rotate90 #foot_text  {
  width: 50%;
}

.rotate90 #logo_box {
  width: 12%;
}