/* 背景铺满 */
#web_bg {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-attachment: local !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important; /* 关键参数 */
    transition: background-image 0.5s ease !important;
    image-orientation: from-image; /* 或改为 image-orientation: none; */
    transform: rotate(0deg); /* 强制取消旋转 */
  }
  
/* 由于全屏会出bug，所以直接给他隐藏 */

.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme='dark'] .wb-body,
[data-theme='dark'] #changeBgBox {
  background: #333 !important;
}

.bgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
  width: 166px;
  margin: 10px;
  background-size: cover
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

.box {
  height: 100px;
}

  /* CSS样式 */
  .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  opacity: 0;
  transition: all 0.3s ease;
}

/* 激活状态 */
.modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.overlay.active {
  opacity: 1;
  display: block;
}

.modal.active {
  animation: zoomIn 0.s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes zoomIn {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  
  .modal.active {
    animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .modal {
    /* 其他样式保持不变 */
    transition: all 0.3s ease; /* 确保只声明一次 */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  
  /* 保持原有.active样式 */

@media screen and (max-width: 768px) {
  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
      height: 73px;
      width: 135px;
  }
  .pimgbox {
      height: 205px;
  }
  /* 2.0新增内容 */    
  .wb-min {
      display: none;
  }
  #changeBgBox .wb-body::-webkit-scrollbar {
      display: none;
  }
}