html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: url('images/bg.png') no-repeat center center;
  background-size: cover;
  overflow-y: scroll;
}

.bread_bg {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 50px 30px;
  box-sizing: border-box;
}

/* 与 bread_bg_img 同宽，高度由图片自然高度决定 */
.bread_bg_frame {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.bread_bg_img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 76%;
  transform: translateX(-50%);
  z-index: 1;
  padding-top: 10px;
  /* 禁止长按时选中文字，避免和“保存图片”冲突 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
.img_center{
  display: block;
  margin: 0 auto;
}

.center .title{
  width: 20%;
  margin-bottom: 2%;
}
.center .demo-bg{
  width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.center .demo{
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
  /* 禁止图片被选中、拖拽，长按只触发保存 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  touch-action: none;
}

/* 影片：触摸落在容器上，与下方照片的 img.demo 长按保存一致 */
.center .demo-video-shell video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bottom-btn-group{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 6%;
  margin: 3% 0;
  img{
    width: 11%;
  }
  .download-btn,
  .share-btn {
    cursor: pointer;
  }
}
.bottom-text{
  width: 44%;
  img{
    width: 100%;
  }
}
.tips{
  width: 80%;
}
.mg-t{
  margin-top: 6%;
}