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

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

.bread_bg {
  width: 100%;
  height: 100svh;
  padding: 30px 0 20vh;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
}

.chi_top {
  width: 100%;
}
.chi_logo {
  width: 60%;
  display: block;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.chi_title {
  width: 60%;
  display: block;
  margin: 0 auto;
  margin-top: 40px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.center {
  width: 100%;
  padding: 40px 20px 20px;
  box-sizing: border-box;
  touch-action: pan-y;
  /* 禁止长按时选中文字，避免和“保存图片”冲突 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.center_item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.img_center {
  display: block;
  margin: 0 auto;
}

.center .demo {
  width: 100%;
  max-width: 90%;
  box-sizing: border-box;
  object-fit: contain;
  /* 禁止图片被选中、拖拽，长按只触发保存 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  touch-action: pan-y;
  border: solid 3px #99cc66;
}

/* 影片：触摸落在容器上，与下方照片的 img.demo 长按保存一致 */
.center .demo-video-shell {
  display: block;
}

.center .demo-video-shell video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bottom-btn-group {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 6%;
  margin: 3% 0;
  img {
    width: 39%;
  }
  .download-btn,
  .share-btn {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }
}

.chi_bottom {
  width: 100%;
  flex-shrink: 0;
  position: fixed;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  img {
    width: 100%;
    display: block;
    pointer-events: none;
  }
}