* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body {
  width: 100%;
  background-color: #0b315c;
  /* overflow-x: hidden; */
  /* overflow-y: auto; */
  color: #fff;

}
img {
 
}
.layout {
  /* padding-bottom: 600px; */
  /* overflow: auto;
  height: 100%; */
}
.header-container {
  position: relative;
  width: 100%;
  height: 1000px;
}
.header-img {
  width: 100%;
  height: 100%;
  z-index: 10;
}
.car-box {
  position: relative;
}
.new-car-gif {
  width: 500px;
  bottom: 0;
  transform: translateY(30%);
  position: absolute;
  /* top: -177px; */
  left: -140px;
  transition: all 0.1s;
  z-index: 99999999;
}
.new-car-gif1 {
  bottom: 0;
  transform: translateY(30%);
  width: 500px;
  position: absolute;
  /* top: -177px; */
  left: -350px;
  transition: all 0.1s;
  z-index: 99999999;
}
.new-car-gif2 {
  bottom: 0;
  transform: translateY(30%);
  width: 500px;
  position: absolute;
  /* top: -177px; */
  left: -350px;
  transition: all 0.1s;
  z-index: 99999999;
}
.map {
  position: relative;
}
.x-g {
  position: absolute;
  top: 0;
  left: 0;
}

.write {
  /* border: 1px solid red; */
  text-align: center;
  width: 700px;
  height: 150px;
  line-height: 150px;
  font-size: 32px;
  border-radius: 50%;
  background: url("images/li.png") no-repeat center;
  /* background-size: 100% 100%; */
  margin:auto;
 margin-bottom: 100px;
 text-align: center;
 margin-top: -150px;
}

.line {
  width: 30px;
  margin-left: 3px;
}
.bold-title {
  text-align: center;
  font-size: 40px;
  margin-bottom: 120px;
}
.bold-title1 {
  text-align: center;
  font-size: 45px;
  margin-bottom: 120px;
}v

.title{
  text-align: center;
  font-size: 40px;
  margin-bottom: 40px;
}
.title1{
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
}
.how {
  text-align: center;
  font-size: 50px;
  color: #1d5daf;
  font-weight: bold;
  position: relative;
  margin-bottom: 80px;
}
.how div:nth-child(1) {
  color: #FFFFFF;
  opacity: 0.2;
}
.how div:nth-child(2) {
  color: #FFFFFF;
  opacity: 0.5;
}

.how div:nth-child(3) {
  color: #FFFFFF;
  opacity: 0.8;
}
.container{
  margin: 40px auto;
  text-align: center;
}
.box-item {
  position:relative;
  display: inline-block;
  width: 94px;
  height: 182px;
  /* background: url("./../img/bg.png") no-repeat center center; */
  background: #053d69;
  margin-right: 3px;
  background-size: 100% 100%;
  font-size: 162px;
  line-height: 182px;
  text-align: center;
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
  overflow: hidden; /* 没有这个属性的话能看到全部数字上下滚动 */
}
.box-item span {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%,0);
  transition: transform 1s ease;
  letter-spacing: 10px;
  color: #abd1f5;
}

.num-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
}
.num-wrap > div {
  display: flex;
  align-items: center;
}
.kg {
  position: relative;
  font-size: 30px;
  top: 79px;
  left: 12px;
  color: #abd1f5;
}
.earth {
  color: #a0fefe;
  font-size: 50px;
  text-align: center;
  margin: 50px auto;
}
.nice {
  font-size: 30px;
  text-align: center;
}
.nice1 {
  position: relative;
  /* left:90px; */
  font-size: 30px;
}
.nice2 {
  position: relative;
  /* left:20px; */
  font-size: 30px;
}
.dots {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dots span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 80px;
}
.dots span:nth-child(1) {
  background-color: #768da5;
}
.dots span:nth-child(2) {
  background-color: #204161;
}
.dots span:nth-child(3) {
  background-color: #001d36;
}
.dots span:nth-child(4) {
  background-color: #000000;
}
.border {
  width: 500px;
  position: relative;
  top: 367px;
  left: -113px;
}
.next-wrap {
  height: 4858px;
  margin-top: 100px;
}
.hs {
  text-shadow: 2px 5px 12px #000000;
}
.battery-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  padding-left: 202px;
  color: #5b7083;
}
.battery-text{
  text-align: center;
  width: 60%;
}
.old {
  display: flex;
  width: 900px;
  /* padding-right: 452px; */
  overflow: hidden;
  /* border: 1px solid red; */
}
.black {
  width: 300px;
  height: 200px;
  position: relative;
  left: 0;
  transition: all 0.1s;
  top: 139px;
}
.liquor-wrap {
  /* border: 1px solid red; */
  overflow: hidden;
  display: flex;
  position: relative;
  justify-content: center;
  /* justify-content: space-between; */
  align-items: center;
}
.invite {
  color: #5b7083;
  /* padding-right: 527px; */
  padding-top: 200px;
}
.last-black {
  position: absolute;
  width: 300px;
  height: 200px;
  left: -220px;
  /* left: 647px; */
  /* left: 520px; */
  top: 122px;
  /* display: none; */
}
.water-box {
  /* border: 1px solid red; */
  position: relative;
}
.four{
  display: none;
  width: 200px;
  position: absolute;
  left: 153px;
  bottom: 26px;
}
.up {
  display: none;
  width: 400px;
  position: absolute;
  left: 86px;
  bottom: -30px;
}
.xf-box {
  /* border: 1px solid red; */
  /* width: 500px; */
  margin: 0 auto;
  position: relative;
  text-align: center;
  /* height: 400px; */
  /* top: 500px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.xf-box img {
  /* margin: 0 auto; */
}
.xf-box .img-1 {
  position: absolute;
  bottom: 0;
}
.xf-box .img-2 {
  display: none;
  position: absolute;
  z-index: 999999;
  bottom: 0;
}
.img-3 {
  display: none;
  position: relative;
  left: 10px;
}
.img-4 {
  position: absolute;
  top: 0;
  left: 10px;
  display: none;
}
.img-5 {
  display: none;
  width: 200px;
  position: absolute;
  top: 100px;
  left: -78px;
}
.img-6-box {
  display: none;
  margin-top: 160px;
  text-align: center;
}
.img-7-box {
  display: none;
  margin-top: 50px;
  text-align: center;
}
.img-8-box {

}
.x-gif {
  display: block;
  width: 950px;
  margin: 0 auto;

}
.b-gif {
  display: block;
  width: 650px;
  margin: 0 auto;
}
.j-gif {
  display: block;
  width: 1350px;
  margin: 0 auto;
}
.box {
  position: relative;
} 
.mySwiper1{
  
  position: absolute;
  left:-200px;

}
.show-text {
  font-weight: bold;
  position: absolute;
  right: 300px;
  color: #a0fefe;
top: 200px;
}
.top-text {
  color: silver;
   font-size: 40px;
    text-align: center;
}
.top-text1 {
  color: silver;
   font-size: 28px;
    text-align: center;
}
.bottom-text {
  font-weight: bold;
   font-size: 30px; 
   text-align: center;
}
.bottom-text1 {
  font-weight: bold;
   font-size: 40px; 
   text-align: center;
}
.bottom-text2 {
  font-weight: bold;
   font-size: 42px; 
   text-align: center;
}