.car_loading {
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 9998;
  /* display: none; */
}

.loading {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  max-width: 150px;
  max-height: 150px;
  border-radius: 100%;
}

.loading_anim {
  width: 100%;
  height: 100%;
  background: url(../loading.png) no-repeat;
  background-size: 100% 100%;
  animation: loadingAnim 0.8s linear infinite;
}

@keyframes loadingAnim {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.loading img {
  position: absolute;
  width: 63%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.loading p {
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  color: #999;
  margin: 0;
  margin-top: 5%;
  display: block;
}

@media screen and (max-width: 600px) {
  .loading p {
    font-size: calc(28 / 750 * 100vw);
  }
}

/* 场景选择页面 */
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  user-select: none; /* 标准的语法 */
  -webkit-user-select: none; /* Chrome 和 Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.mobile-only {
  display: none;
}

.pc-only {
  display: block;
}

@font-face {
  font-family: Light;
  src: url("../font/HyundaiSansHeadCN-Light.ttf");
}

/* @font-face {
  font-family: Medium;
  src: url("../font/HyundaiSansHeadCN-Medium.ttf");
} */
.sceneBox img {
  width: 100%;
  display: block;
}
.sceneBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bgImg {
  position: relative;
  width: 100vw !important;
  height: 100vh;
  overflow: hidden;
}

.sceneBg {
  width: 100vw !important;
  height: 100vh;
  object-fit: cover;
  filter: blur(2px);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s;
  overflow: hidden;
}
.maskBlack2 {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: #000;
}
.maskBlack {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index: 2;
  opacity: 0.86;
  background: linear-gradient(to bottom, #16161b 0%, #1d1e1e 100%);
}

.sceneContent {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 8rem;
  text-align: center;
  overflow: hidden;
}
.sceneContent .title {
  width: 3.24rem;
  height: 0.48rem;
  position: relative;
  margin: 0 auto;
}
.sceneContent .title p {
  font-size: 0.2rem;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  left: 0;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  height: 100%;
  font-family: "Light";
  font-weight: bold;
}

.titbg {
  width: 100%;
}

.democontent {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-top: 4vw;
  height: 200px;
  background-color: red;
}
.sceneList {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  margin-top: 4%;
}
.sceneList li {
  text-align: center;
  cursor: pointer;
  position: relative;
}

.maskli {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.65;
}

.sceneList li .imgbox {
  width: 3.5rem;
  height: calc(3.5rem / 1.76);
  margin: 0 auto;

  position: relative;

  border: #595959 2.98px solid;

  overflow: hidden;
}
.sceneList li.act2 .imgbox {
  border: #fcc591 2.98px solid;
}
.sceneList li.act2 .imgbox {
  overflow: hidden;
}

.sceneList li.act2 img {
  opacity: 1;
}
.sceneList li.act img {
  opacity: 1;
}
.sceneList li.act .maskli {
  transition: 0.3s;
  opacity: 0;
}

.sceneList li.act2 .maskli {
  transition: 0.3s;
  opacity: 0;
}

.sceneList li.act2 p {
  color: #fcc591;
}
.sceneList li img {
  width: 100%;
  opacity: 0.45;
}

.sceneList li p {
  color: #fff;
  font-size: 0.16rem;
  font-family: "Light";
  margin: 0;
  padding: 0;
  margin: 4% 0;
}
.subBtn {
  width: 1.5rem;
  height: 0.36rem;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  margin-top: 2%;
  overflow: hidden;
}
.subBtn img {
  position: relative;
  z-index: 2;
  height: 100%;
}

.borderMask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #62fff7;
  opacity: 0.15;
}
.borderMask2 {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #0a3b43;
  opacity: 1;
  z-index: 1;
  transition: 0.3s;
}

.subBtn p {
  font-size: 0.14rem;
  color: #fff;
  position: absolute;
  display: flex;
  top: 0;
  width: 100%;
  left: 0;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Light";
  z-index: 2;
}


/* 针对5K屏幕的样式 */
@media screen and (min-width: 5120px) and (min-height: 2880px) {
  html{
    font-size: 162px;
  }
}


/* 针对2K屏幕的样式 */
@media screen and (min-width: 2560px) and (min-height: 1440px) {
  /* 在这里写样式 */
  html{
    font-size: 162px !important;
  }
  .loading{
    max-width: 253px;
    max-height: 253px;
  }

  .loading p{
    font-size: 0.2rem;
  }
}





@media screen and (max-width: 1366px) {
  .sceneContent {
    width: 7rem;
  }
  .sceneList li .imgbox {
    width: 3rem;
    height: 1.71rem;
  }
 
}

@media screen and (max-width:852px) {
 
}

@media screen and (max-width: 480px) {
  .sceneContent {
    width: 9.5rem;
  }
  .sceneList li .imgbox {
    width: 4.2rem;
    height: calc(4.2rem / 1.75);
  }

  .sceneList li p {
    font-size: 12px;
  }

  .sceneContent .title {
    width: 6rem;
    height: calc(6rem / 6.75);
  }

  .sceneContent .title p {
    font-size: 14px;
  }
  .subBtn {
    width: 3rem;
    height: calc(3rem / 4.16);
  }
  .subBtn p {
    font-size: 14px;
  }

  .loading{
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* 480px 是手机端和桌面端的一个常见断点，你可能需要根据实际情况调整 */
@media screen and (max-width: 480px) {
  .mobile-only {
    display: block;
  }

  .pc-only {
    display: none;
  }
}


/* 设备宽高比为16:9时应用的样式 */
/* 852/349 是亲测苹果15pro的横屏宽高比 */

@media all and (max-width: 860px) and (orientation: landscape) {
 
}


@media screen and (device-aspect-ratio: 852/349) { 
  .sceneContent {
    width: 90% ;
  }
 }

.hp .sceneContent{
  width: 90%;
}

.hp .sceneList li .imgbox{
  width: 2rem;
  height: calc(2rem / 1.75);
}

.hp .loading{
  max-width: 120px;
  max-height: 120px;
}

.hp .robot{
  width: 1.1rem;
}