.overlay {
  position: fixed; /* 固定定位 */
  top: 0; /* 从顶部开始 */
  left: 0; /* 从左边开始 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  background: linear-gradient(
    0deg,
    rgba(180, 209, 249, 0.3) 0%,
    rgba(108, 182, 255, 0.3) 100%
  );
  backdrop-filter: blur(40px);
  z-index: 999; /* 确保遮罩在最上层 */
}

.iframeName {
  position: fixed;
  top: 5%;
  left: 65%;
  z-index: 10000 !important;
}

.map_div {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 通过偏移来实现完全居中 */
}

.map {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 通过偏移来实现完全居中 */
  width: 1800px; /* 固定宽度 */
  max-width: 100%; /* 最大宽度为 100% */
}

/* 媒体查询：屏幕宽度在 1980px 到 2560px（2K）之间 */
@media (min-width: 1981px) and (max-width: 2560px) {
  .map {
    width: 1800px; /* 保持 1800px */
  }
}

/* 媒体查询：屏幕宽度在 2561px 到 3840px（4K）之间 */
@media (min-width: 2561px) and (max-width: 3840px) {
  .map {
    width: 2400px; /* 设置为 2400px */
  }
}

/* 媒体查询：屏幕宽度大于 3840px（超 4K） */
@media (min-width: 3841px) {
  .map {
    width: 3000px; /* 设置为 3000px */
  }
}

/* 媒体查询：当屏幕宽度小于 1980px 时 */
@media (max-width: 1980px) {
  .map {
    width: 1000px; /* 设置为 1000px */
  }
}

/* 可选：进一步适配更小的屏幕 */
@media (max-width: 1000px) {
  .map {
    width: 90%; /* 当屏幕宽度小于 1000px 时，使用 90% 的宽度 */
  }
}

#showMobilePreview {
  z-index: 9999;
  width: 375px;
  height: 768px;
  min-height: 396px;
  max-height: calc(100vh - 64px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  text-align: center;
  border-radius: 50px;
  /* box-shadow: -10px 10px 30px #333333; */
}

.mobile_preview_header {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 375px;
  background: #eeeff2;
  text-align: center;
  line-height: 40px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}

.mobile_preview_header_icon {
  display: inline-block;
  width: 65px;
  height: 10px;
  background: #c8c9cc;
  border-radius: 9px;
  vertical-align: middle;
  margin-top: 18px;
}

.mobile_preview_frame {
  width: 375px;
  min-height: 294px;
  height: 705px;
  max-height: calc(100vh - 100px);
  top: 40px;
  left: 0;
  //border: 6px solid #eeeff2;
  position: relative;
  background-color: #eeeff2;
  display: block;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.mobile_preview_frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 20px 20px;
}

#YuFrameMobilePreview {
  border: none;
  width: 375px;
  height: 100%;
  /* border-bottom-right-radius: 50px; */
  /* border-bottom-left-radius: 50px; */
  padding: 0 0 40px 0;
}

#mobilePreview {
  padding-left: 20px;
  color: #bcbdc1;
}

#mobilePreview:hover {
  padding-left: 20px;
  color: #009ddc;
}

#YuFrameMobilePreviewBg {
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: Gray;
  display: block;
  z-index: 9998;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.8;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.mobile_preview_footer {
  display: block;
  position: absolute;
  bottom: -5;
  left: 0;
  height: 40px;
  width: 375px;
  background: #e5edf3;
  text-align: center;
  line-height: 40px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.mobile_preview_footer_icon {
  display: inline-block;
  width: 43px;
  height: 43px;
  background: #c8c9cc;
  border-radius: 50%;
  vertical-align: middle;
}

#mobilePreview {
  padding-left: 20px;
  color: #bcbdc1;
}

#mobilePreview:hover {
  padding-left: 20px;
  color: #009ddc;
}