.preview {
  display: block;
  width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: auto;
}

.preview .video_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.preview .headerLogo {
  height: 3rem;
  width: auto;
  margin-top: 0.66rem;
}

.preview .btnView {
  height: 0.9rem;
  width: auto;
  display: block;
  margin: 0 auto;
  margin-top: 0.5rem;
}

.preview .btnView :first-child {
  margin: 30px auto 0;
}

.preview .infoView {
  height: 5.8rem;
  width: auto;
  display: block;
  margin: 0 auto;
  margin-top: 0.6rem;
}

.preview .footerView {
  height: 30px;
  width: 100%;
  position: relative;
  margin-top: 0.1rem;
  z-index: 1;
  margin-bottom: 0.3rem;
}

.preview .footerView .footerViewBg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(270deg, #d0a673 0%, #efd9bf 100%);
  z-index: 1;
  opacity: 0.5;
}

.preview .footerView .infoTxt {
  display: block;
  line-height: 30px;
  color: #dec29a;
  font-size: 18px;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

.mobile-body {
  position: relative;
  -webkit-overflow-scrolling: touch;
  background-color: #2b2b35;
}

.vipmain {
  background-image: url('../images/h5/image/h_bg.jpg?version=1749459815500');
  background-size: 100% 100%;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
}

.head-logo-div {
  /* position: fixed;
  top: 0px;
  z-index: 2; */
  background-image: url('../images/h5/image/h_bg.jpg?version=1749459815500');
  background-size: cover;
  width: 100%;
}
.image-logo {
  width: auto;
  height: 47px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.image-logo2 {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding-top: 56px;
}

.image-logo3 {
  width: 94%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-top: -20px;
}

.image-download {
  width: 60%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

.image-intro {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}

.image-title {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}

.image-title-near {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
}

.container {
  text-align: center;
  overflow: hidden;
  padding-top: 44px;
  padding-bottom: 85.5px;
  overscroll-behavior: none;
}

.swiper {
  width: 100%;
  height: auto;
  margin-top: 18px;
}

.swiper-slide-first {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide-first img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sec-div {
  /* background-image: url(../images/h5/image/luodi_02.jpg?version=1749459815500);
  background-size: 100% 100%; */
  max-height: 797px;
  padding-bottom: 25px;
  
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
}

.carousel-indicators img {
  width: 7px;
  height: 7px;
}

.indicator {
  cursor: pointer;
}

.image-row {
  display: flex;
  justify-content: space-evenly;
}

.image-half {
  width: calc(50% - 50px);
  object-fit: contain;
}

.image-quanming {
  width: calc(100% - 40px);
  height: auto;
}

.image-mid-logo {
  background-size: contain;
  width: calc(100% - 260px);
  height: auto;
  max-width: 233px;
  max-height: 233px;
  display: block;
  margin: 0 auto;
  padding-top: 20px;
}

.image-total {
  background-size: contain;
  width: calc(100% - 150px);
  height: auto;
  max-width: 451px;
  max-height: 23px;
  display: block;
  margin: 0 auto;
  padding-top: 12px;
}

.image-download-btn {
  background-size: contain;
  width: calc(100% - 185px);
  height: auto;
  max-width: 483px;
  max-height: 126px;
  display: block;
  margin: 80px auto;
  padding-top: 12px;
}

.image-total-text {
  display: block;
  margin: 0 auto;
  padding-top: 12px;
  font-size: 36px;
  font-weight: 600;
  color: #fff;
}

.third-div {
  /* background-image: url(../images/h5/image/luodi_03.jpg?version=1749459815500);
  background-size: 100% 100%; */
  /* max-height: 180vw; */
  position: relative;
  min-height: 8vw;
}

.fourth-div {
  /* background-image: url(../images/h5/image/luodi_04.jpg?version=1749459815500);
  background-size: 100% 100%; */
  max-height: 100%;
  position: relative;
  min-height: 8vw;
}

.image-score {
  background-size: contain;
  width: calc(100% - 40px);
  height: auto;
  max-width: 669px;
  max-height: 64px;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-line {
  background-size: contain;
  width: calc(100vw - 35px);
  height: 1px;
  max-width: 676px;
  display: block;
  margin: 0 auto;
  padding-top: 55px;
}

.image-tips1 {
  background-size: contain;
  width: calc(100% - 45px);
  height: auto;
  max-width: 655px;
  display: block;
  margin: 0 auto;
  padding-top: 15px;
}

.signal-div {
  display: flex;
  align-items: center;
  padding-top: 15px;
  width: 100%;
  margin: 0 auto;
}

.signal-div ~ .signal-div {
  /* padding-top: 5px; */
}

.signal-div .image-signal-bg {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  gap: 8px;
}

.signal-div .left-content {
  display: flex;
  position: relative;
}

.signal-div .left-content .signal-text {
  display: flex;
  position: absolute;
  font-size: 12px;
  height: 100%;
  align-items: center;
  width: 100%;
}

.signal-div .left-content .signal-text .signal-ms {
  width: 20%;
  margin-left: 6px;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 3px;
}

.signal-div .left-content .signal-text .signal-site {
  width: calc(80% - 12px);
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
  margin-bottom: 3px;
}

.image-title1 {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-top: 32px;
}

.bottom-32 {
  padding-bottom: 20px;
}

.swiper-container {
  width: 100%;
  height: auto;
  margin-top: 15px;
}

.swiper-slide2 {
  background: transparent;

}

.swiper-slide2 img {
  width: 100%;
  height: auto;
  transform: scale(0.8);
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: transparent;
}

.active-image {
  transform: scale(1) !important;
  opacity: 1;
}

.swiper-container-woderful {
  width: 100%;
  height: auto;
  margin-top: 15px;
}

.swiper-slide-woderful {
  background: transparent;
}

.swiper-slide-woderful img {
  width: 100%;
  height: auto;
  transform: scale(0.8);
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: transparent;
}

.active-image-woderful {
  transform: scale(1) !important;
  opacity: 1;
}

.carousel {
  overflow-x: hidden;
  white-space: nowrap;
  width: 100%;
}

.carousel-left {
  margin-top: 15px;
}

.carousel-scrollable {
  overflow-x: auto;
}

.carousel-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  transition: transform 3.5s ease;
  margin-bottom: 6px;
}

.carousel-item {
  flex: 0 0 20%; /* 每个屏幕显示5个内容 */
}

.carousel-item img {
  /* width: 16vw; */
  /* max-width: 88px; */
  /* height: 116px; */
  width: auto;
  height: 87px;
}

.footer-div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #161513;
  border-top: 1px solid #473b2d;
  position: fixed;
  z-index: 2;
  width: 100vw;
  bottom: 0;
  left: 0;
  gap: 45px;
}

.footer-div .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex: 1; */
  padding: 15px 5px;
}

/* .footer-div .image-container-right {
  flex: 0.7;
} */

.footer-div .image-container img {
  max-height: 100%;
  max-width: 100%;
}

.footer-left-img {
  height: auto;
  width: 250px;
  /* padding-left: 25px; */
}

.footer-right-img {
  height: auto;
  width: 120px;
  cursor: pointer;
}

.kefu-img {
  width: 66px;
  height: auto;
  display: block;
  position: fixed;
  top: 45vh;
  right: 0;
  z-index: 2;
  cursor: pointer;
}

@keyframes fadeInZoomIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#vipmainPage {
  animation: fadeInZoomIn 0.5s ease-out forwards;
}

@media screen and (max-width: 400px) and (min-width: 391px) {
  .head-logo-div .image-logo {
    width: calc(100% - 230px);
  }
}

canvas {
  display: block;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}

.bottom-right-icon{
  display: flex
;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
}
.right-images .bottom-right-image{
  position: relative;
  height: 30px;
  max-height: 52px;
  width: calc(100% - 10px);
}
.right-images .bottom-right-image .bottom-right-icon .signal-text{
  display: block;
    position: absolute;
    font-size:16px;
    left: 12px;
    top: 1.8px;
    z-index: 1;
    color: #710000;
}
.right-images .bottom-right-image .bottom-right-icon .signal-site{
  display: block;
    position: absolute;
    font-size: 16px;
    left: 32px;
    top: 3.5px;
    z-index: 1;
    max-height: 30px;
    color: white;
    width: calc(70% - 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.right-images .bottom-right-image .bottom-right-icon .left-icon{
  width: 16vw;
  height: calc(100% - 3px);
  max-width: 60px;
  max-height: 30px;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
}
.right-images .bottom-right-image .bottom-right-icon .right-icon{
  width: auto;
    height: 8vw;
    max-width: 144px;
    max-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
}
.right-images{
  display: flex
;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-height: 104px;
    width: calc(100%  - 20px);
    margin-left: 5px;
}
.signal-div .left-image img{
  max-width: 60px;
  max-height: 60px;
  width: 14vw;
  height: 14vw;
  padding-left: 15px;
  display: block;
}
.top-right-image{
  height: 30px;
    max-height: 52px;
}
.right-images > div{
  flex-grow: 1;
    justify-content: start;
    display: flex
;
    align-items: center;
}
.right-images .top-right-image img{
  max-height: 26px;
    max-width: calc(100% - 80px);
 
    height: auto;
    position: relative;
}
.right-images .bottom-right-image img{
  max-height: 51px;
  width: calc(100% - 2px);
  height: 100%;
}