/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

.marococin-flex-row {
  display: flex;
  flex-direction: row;
}

.marococin-flex-col {
  display: flex;
  flex-direction: column;
}

.marococin-justify-start {
  justify-content: flex-start;
}

.marococin-justify-end {
  justify-content: flex-end;
}

.marococin-justify-center {
  justify-content: center;
}

.marococin-justify-between {
  justify-content: space-between;
}

.marococin-justify-around {
  justify-content: space-around;
}

.marococin-justify-evenly {
  justify-content: space-evenly;
}

.marococin-items-start {
  align-items: flex-start;
}

.marococin-items-end {
  align-items: flex-end;
}

.marococin-items-center {
  align-items: center;
}

.marococin-items-baseline {
  align-items: baseline;
}

.marococin-items-stretch {
  align-items: stretch;
}

.marococin-self-start {
  align-self: flex-start;
}

.marococin-self-end {
  align-self: flex-end;
}

.marococin-self-center {
  align-self: center;
}

.marococin-self-baseline {
  align-self: baseline;
}

.marococin-self-stretch {
  align-self: stretch;
}

.marococin-flex-1 {
  flex: 1 1 0%;
}

.marococin-flex-auto {
  flex: 1 1 auto;
}
.marococin-items-center {
  align-items: center;
}
.marococin-grow {
  flex-grow: 1;
}

.marococin-grow-0 {
  flex-grow: 0;
}

.marococin-shrink {
  flex-shrink: 1;
}

.marococin-shrink-0 {
  flex-shrink: 0;
}

.marococin-relative {
  position: relative;
}

.marococin-ml-2 {
  margin-left: 2px;
}

.marococin-mt-2 {
  margin-top: 2px;
}

.marococin-ml-4 {
  margin-left: 4px;
}

.marococin-mt-4 {
  margin-top: 4px;
}

.marococin-ml-6 {
  margin-left: 6px;
}

.marococin-mt-6 {
  margin-top: 6px;
}

.marococin-ml-8 {
  margin-left: 8px;
}

.marococin-mt-8 {
  margin-top: 8px;
}

.marococin-ml-10 {
  margin-left: 10px;
}

.marococin-mt-10 {
  margin-top: 10px;
}

.marococin-ml-12 {
  margin-left: 12px;
}

.marococin-mt-12 {
  margin-top: 12px;
}

.marococin-ml-14 {
  margin-left: 14px;
}

.marococin-mt-14 {
  margin-top: 14px;
}

.marococin-ml-16 {
  margin-left: 16px;
}

.marococin-mt-16 {
  margin-top: 16px;
}

.marococin-ml-18 {
  margin-left: 18px;
}

.marococin-mt-18 {
  margin-top: 18px;
}

.marococin-ml-20 {
  margin-left: 20px;
}

.marococin-mt-20 {
  margin-top: 20px;
}

.marococin-ml-22 {
  margin-left: 22px;
}

.marococin-mt-22 {
  margin-top: 22px;
}

.marococin-ml-24 {
  margin-left: 24px;
}

.marococin-mt-24 {
  margin-top: 24px;
}

.marococin-ml-26 {
  margin-left: 26px;
}

.marococin-mt-26 {
  margin-top: 26px;
}

.marococin-ml-28 {
  margin-left: 28px;
}

.marococin-mt-28 {
  margin-top: 28px;
}

.marococin-ml-30 {
  margin-left: 30px;
}

.marococin-mt-30 {
  margin-top: 30px;
}

.marococin-ml-32 {
  margin-left: 32px;
}

.marococin-mt-32 {
  margin-top: 32px;
}

.marococin-ml-34 {
  margin-left: 34px;
}

.marococin-mt-34 {
  margin-top: 34px;
}

.marococin-ml-36 {
  margin-left: 36px;
}

.marococin-mt-36 {
  margin-top: 36px;
}

.marococin-ml-38 {
  margin-left: 38px;
}

.marococin-mt-38 {
  margin-top: 38px;
}

.marococin-ml-40 {
  margin-left: 40px;
}

.marococin-mt-40 {
  margin-top: 40px;
}

.marococin-ml-42 {
  margin-left: 42px;
}

.marococin-mt-42 {
  margin-top: 42px;
}

.marococin-ml-44 {
  margin-left: 44px;
}

.marococin-mt-44 {
  margin-top: 44px;
}

.marococin-ml-46 {
  margin-left: 46px;
}

.marococin-mt-46 {
  margin-top: 46px;
}

.marococin-ml-48 {
  margin-left: 48px;
}

.marococin-mt-48 {
  margin-top: 48px;
}

.marococin-ml-50 {
  margin-left: 50px;
}

.marococin-mt-50 {
  margin-top: 50px;
}

.marococin-ml-52 {
  margin-left: 52px;
}

.marococin-mt-52 {
  margin-top: 52px;
}

.marococin-ml-54 {
  margin-left: 54px;
}

.marococin-mt-54 {
  margin-top: 54px;
}

.marococin-ml-56 {
  margin-left: 56px;
}

.marococin-mt-56 {
  margin-top: 56px;
}

.marococin-ml-58 {
  margin-left: 58px;
}

.marococin-mt-58 {
  margin-top: 58px;
}

.marococin-ml-60 {
  margin-left: 60px;
}

.marococin-mt-60 {
  margin-top: 60px;
}

.marococin-ml-62 {
  margin-left: 62px;
}

.marococin-mt-62 {
  margin-top: 62px;
}

.marococin-ml-64 {
  margin-left: 64px;
}

.marococin-mt-64 {
  margin-top: 64px;
}

.marococin-ml-66 {
  margin-left: 66px;
}

.marococin-mt-66 {
  margin-top: 66px;
}

.marococin-ml-68 {
  margin-left: 68px;
}

.marococin-mt-68 {
  margin-top: 68px;
}

.marococin-ml-70 {
  margin-left: 70px;
}

.marococin-mt-70 {
  margin-top: 70px;
}

.marococin-ml-72 {
  margin-left: 72px;
}

.marococin-mt-72 {
  margin-top: 72px;
}

.marococin-ml-74 {
  margin-left: 74px;
}

.marococin-mt-74 {
  margin-top: 74px;
}

.marococin-ml-76 {
  margin-left: 76px;
}

.marococin-mt-76 {
  margin-top: 76px;
}

.marococin-ml-78 {
  margin-left: 78px;
}

.marococin-mt-78 {
  margin-top: 78px;
}

.marococin-ml-80 {
  margin-left: 80px;
}

.marococin-mt-80 {
  margin-top: 80px;
}

.marococin-ml-82 {
  margin-left: 82px;
}

.marococin-mt-82 {
  margin-top: 82px;
}

.marococin-ml-84 {
  margin-left: 84px;
}

.marococin-mt-84 {
  margin-top: 84px;
}

.marococin-ml-86 {
  margin-left: 86px;
}

.marococin-mt-86 {
  margin-top: 86px;
}

.marococin-ml-88 {
  margin-left: 88px;
}

.marococin-mt-88 {
  margin-top: 88px;
}

.marococin-ml-90 {
  margin-left: 90px;
}

.marococin-mt-90 {
  margin-top: 90px;
}

.marococin-ml-92 {
  margin-left: 92px;
}

.marococin-mt-92 {
  margin-top: 92px;
}

.marococin-ml-94 {
  margin-left: 94px;
}

.marococin-mt-94 {
  margin-top: 94px;
}

.marococin-ml-96 {
  margin-left: 96px;
}

.marococin-mt-96 {
  margin-top: 96px;
}

.marococin-ml-98 {
  margin-left: 98px;
}

.marococin-mt-98 {
  margin-top: 98px;
}

.marococin-ml-100 {
  margin-left: 100px;
}

.marococin-mt-100 {
  margin-top: 100px;
}
.marococin-ml-32 {
  margin-left: 32px;
}
.box {
  width: 750px;
  height: 1624px;
  position: relative;
  top: -176px;
  left: 0px;
  overflow: hidden;
}
.hezhao_Group {
  width: 750px;
  height: 1448px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
// 返回和音乐按钮
.daguoli-pos_2 {
  position: absolute;
  left: 19px;
  right: 10px;
  top: 27px;
  z-index: 9999;
  .daguoli-image_4 {
    width: 64px;
    height: 88px;
  }
  .daguoli-image_5 {
    width: 81px;
    height: 88px;
  }
}
// 用户B首页
.shuangrenB-page {
  width: 750px;
  height: 1624px;
  overflow: hidden;
  background-image: url("./assets/hezhao/shuangrenB_bg.png");
  background-size: 100% 100%;
  display: none;
  .daguoli-section {
    width: 750px;
    height: 653px;
    position: relative;
    .daguoli-image0 {
      position: absolute;
      width: 750px;
      height: 653px;
      left: 0px;
      top: 0px;
    }
  }
  .image {
    width: 88px;
    height: 134px;
  }
  .pos_8 {
    position: absolute;
    left: 60px;
    top: 192px;
  }
  .hezhao_section {
    width: 750px;
    height: 653px;
    .image_2 {
      width: 545px;
      height: 398px;
      margin-left: 190px;
      margin-top: 212px;
    }
  }
  .image_3 {
    width: 437px;
    height: 132px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 213px;
    transform: translateX(-50%);
  }
  .image_4 {
    width: 129px;
    height: 39px;
  }
  .pos_6 {
    position: absolute;
    left: 50%;
    bottom: 142px;
    transform: translateX(-50%);
  }
  .hezhao_pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .daguoli-pos {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }
  .daguoli-pos_2 {
    position: absolute;
    left: 19px;
    right: 10px;
    top: 27px;
    .daguoli-image_4 {
      width: 64px;
      height: 88px;
    }
    .daguoli-image_5 {
      width: 81px;
      height: 88px;
    }
  }
  .daguoli-image_6 {
    width: 437px;
    height: 132px;
  }
  .daguoli-pos_3 {
    position: absolute;
    left: 50%;
    bottom: 406px;
    transform: translateX(-50%);
  }
  .daguoli-image_7 {
    width: 750px;
    height: 303px;
  }
  .daguoli-pos_4 {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .daguoli-image_8 {
    position: absolute;
    left: 50%;
    bottom: 242px;
    transform: translateX(-50%);
    width: 437px;
    height: 132px;
  }
}
//首页
.daguoli-page {
  width: 750px;
  height: 1624px;
  overflow: hidden;
  display: none;
  .daguoli-section {
    width: 750px;
    height: 653px;
    position: relative;
    .daguoli-image0 {
      position: absolute;
      width: 750px;
      height: 653px;
      left: 0px;
      top: 0px;
    }
  }
  .hezhao_section {
    width: 750px;
    height: 683px;
    .hezhao_image {
      width: 164px;
      height: 75px;
    }
    .pos_2 {
      position: absolute;
      left: 234px;
      top: 227px;
    }
    .hezhao_image_1 {
      width: 223px;
      height: 169px;
    }
    .pos_3 {
      position: absolute;
      left: 249px;
      bottom: 219px;
    }
    .hezhao_image_2 {
      width: 45px;
      height: 41px;
    }
    .pos_4 {
      position: absolute;
      right: 240px;
      bottom: 209px;
    }
    .hezhao_image_3 {
      width: 326px;
      height: 146px;
    }
    .pos_5 {
      position: absolute;
      right: 106px;
      bottom: 61px;
    }
    .hezhao_image_4 {
      width: 53px;
      height: 59px;
    }
    .pos_6 {
      position: absolute;
      right: 48px;
      bottom: 143px;
    }
  }
  .hezhao_pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .daguoli-pos {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }
  .daguoli-pos_2 {
    position: absolute;
    left: 19px;
    right: 10px;
    top: 27px;
    .daguoli-image_4 {
      width: 64px;
      height: 88px;
    }
    .daguoli-image_5 {
      width: 81px;
      height: 88px;
    }
  }
  .daguoli-image_6 {
    width: 437px;
    height: 132px;
  }
  .daguoli-pos_3 {
    position: absolute;
    left: 50%;
    bottom: 406px;
    transform: translateX(-50%);
  }
  .daguoli-image_7 {
    width: 750px;
    height: 303px;
  }
  .daguoli-pos_4 {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .daguoli-image_8 {
    position: absolute;
    left: 50%;
    bottom: 242px;
    transform: translateX(-50%);
    width: 437px;
    height: 132px;
  }
}
// 规则
.daguoli-guize-page {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 99999;
  top: 0;
  left: 0;
  display: none;
  .daguoli-guize-section {
    background-color: #000000;
    width: 750px;
    height: 1624px;
    opacity: 0.7;
    pointer-events: none;
  }
  .daguoli-guize-group {
    padding-top: 92px;
    width: 563px;
    .daguoli-guize-image-wrapper {
      margin-right: 10px;
      background-image: url("./assets/hezhao/daguoli_guize_img3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 553px;
      height: 563px;
      position: relative;
      pointer-events: none;

      .daguoli-guize-image {
        width: 385px;
        height: 259px;
        position: absolute;
        left: 109px;
        top: 147px;
      }
    }
    .daguoli-guize-image_1 {
      width: 286px;
      height: 143px;
      pointer-events: none;
    }
    .daguoli-guize-pos_1 {
      position: absolute;
      left: 23px;
      top: 0;
    }
    .daguoli-guize-image_2 {
      width: 57px;
      height: 57px;
    }
    .daguoli-guize-pos_2 {
      position: absolute;
      right: 0;
      top: 97px;
    }
  }
  .daguoli-guize-pos {
    position: absolute;
    left: 122px;
    bottom: 301px;
  }
  .daguoli-guize-image_3 {
    // width: 676px;
    // height: 481px;
    width: 726px;
    height: 565px;
    pointer-events: none;
  }
  .daguoli-guize-pos_3 {
    position: absolute;
    left: -50px;
    bottom: -84px;
  }
}
// 页面2 模式
.hezhao-page2 {
  width: 750px;
  height: 1624px;
  overflow: hidden;
  background-color: #f3e8da;
  display: none;
  .daguoli-section {
    width: 750px;
    height: 653px;
    position: relative;
    pointer-events: none;
    .daguoli-image0 {
      position: absolute;
      width: 750px;
      height: 653px;
      left: 0px;
      top: 0px;
    }
  }
  .hezhao_section {
    width: 750px;
    height: 653px;
    pointer-events: none;
    .hezhao_image_1 {
      width: 413px;
      height: 174px;
    }
    .pos_1 {
      position: absolute;
      right: 92px;
      bottom: 58px;
    }
    .hezhao_image_2 {
      width: 40px;
      height: 45px;
    }
    .pos_2 {
      position: absolute;
      right: 48px;
      bottom: 111px;
    }
  }
  .hezhao_pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  .daguoli-pos {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }
  .hezhao_section_1 {
    margin-left: 41px;
    margin-top: -44px;
    padding: 108px 0 117px;
    background-image: url("./assets/hezhao/hezhao_page2_img1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 374px;
    .hezhao_image_2 {
      width: 84px;
      height: 68px;
    }
    .hezhao_image_3 {
      width: 160px;
      height: 38px;
    }
    .hezhao_mt-43 {
      margin-top: 43px;
    }
  }
  .hezhao_section_2 {
    margin-left: 288px;
    margin-top: 12px;
    padding: 96px 0 109px;
    background-image: url("./assets/hezhao/hezhao_page2_img2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 386px;
    height: 355px;
    .hezhao_image_4 {
      width: 116px;
      height: 68px;
    }
    .hezhao_mt-44 {
      margin-top: 44px;
    }
    .hezhao_image_5 {
      width: 158px;
      height: 38px;
    }
  }
  .daguoli-pos_2 {
    position: absolute;
    left: 19px;
    right: 10px;
    top: 27px;
    .daguoli-image_4 {
      width: 64px;
      height: 88px;
    }
    .daguoli-image_5 {
      width: 81px;
      height: 88px;
    }
  }
  .daguoli-image_7 {
    width: 750px;
    height: 303px;
    pointer-events: none;
  }
  .daguoli-pos_4 {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
}
//单人1
.hezhao_danren1 {
  padding-bottom: 656px;
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  display: none;
  // display: none;
  .hezhao_image-wrapper {
    width: 750px;
    height: 653px;
    position: relative;
    pointer-events: none;
    .hezhao-image0 {
      position: absolute;
      width: 750px;
      height: 653px;
      left: 0px;
      top: 0px;
    }
  }
  .image-wrapper {
    width: 750px;
    position: absolute;
    top: 583px;
    // margin-top: 15px;
    pointer-events: none;
    .hezhao_image {
      // width: 703px;
      // height: 403px;
    }
  }
  .yinsi_group {
    position: absolute;
    left: 190px;
    bottom: 171px;
    display: flex;
    .btn {
      width: 25px;
      height: 25px;
      border: 2px solid #000;
      border-radius: 50%;
      position: relative;
      .btnquan {
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #000;
        border-radius: 50%;
        left: 3px;
        top: 3px;
      }
    }
    .yinsi_text {
      width: 335px;
      height: 32px;
      margin-left: 10px;
    }
  }
  .btnclick {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 176px;
    bottom: 165px;
    display: flex;
  }
  .image_2 {
    width: 437px;
    height: 132px;
  }
  .pos_1 {
    position: absolute;
    left: 50%;
    bottom: 410px;
    transform: translateX(-50%);
  }
  .hezhao_image_3 {
    width: 750px;
    height: 303px;
    pointer-events: none;
  }
  .pos {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 242px;
    transform: translateX(-50%);
  }
}
// 单人完成
.hezhao_danren_end {
  padding-bottom: 656px;
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  display: none;
  .hezhao_image-wrapper {
    width: 750px;
    height: 653px;
    position: relative;
    pointer-events: none;
    .hezhao-image0 {
      position: absolute;
      width: 750px;
      height: 653px;
      left: 0px;
      top: 0px;
    }
  }
  .imgts{
    width: 495px;
    height: 31px;
    position: absolute;
    left: 128px;
    top: 1047px;
    display: none;
    pointer-events: none;
  }
  .image-wrapper {
    width: 750px;
    position: absolute;
    top: 584px;
    // margin-top: 15px;
    pointer-events: none;
    .hezhao_image1 {
      width: 691px;
      height: 402px;
      position: relative;
      .img1 {
        width: 691px;
        height: 402px;
        position: absolute;
      }
      .base64_1 {
        width: 378px;
        height: 378px;
        position: absolute;
        top: 11px;
        left: 305px;
        border-radius: 50%;
      }
    }
    .hezhao_image2 {
      width: 701px;
      height: 419px;
      position: relative;
      display: none;
      .img1 {
        width: 701px;
        height: 419px;
        position: absolute;
      }
      .base64_2 {
        width: 378px;
        height: 378px;
        position: absolute;
        top: 33px;
        left: 8px;
        border-radius: 50%;
      }
    }
    .hezhao_image3 {
      width: 712px;
      height: 424px;
      position: relative;
      display: none;
      .img1 {
        width: 712px;
        height: 424px;
        position: absolute;
      }
      .base64_3 {
        width: 378px;
        height: 378px;
        position: absolute;
        left:309px;
        top: 20px;
        border-radius: 50%;
      }
    }
  }
  .hezhao_group {
    position: absolute;
    bottom: 366px;
    margin-top: 157px;
    padding-left: 78px;
    padding-right: 67px;
    .hezhao_image {
      width: 437px;
      height: 132px;
      z-index: 5;
    }
    .hezhao_image_1 {
      width: 136px;
      height: 131px;
      z-index: 5;
    }
  }
  .pos {
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .hezhao_image_3 {
    width: 750px;
    height: 303px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 242px;
    transform: translateX(-50%);
  }
}
// 单人海报分享页面
.hezhao_danren_fenxiang {
  width: 750px;
  height: 1624px;
  overflow: hidden;
  display: none;
  align-items: flex-end;
  background-color: #f1f1f1;

  .hezhao_image-wrapper {
    padding-top: 59px;
    height: 1293px;
    width: 750px;
    background-color: #f1f1f1;
    pointer-events: none;
    .hezhao_image {
      width: 667px;
      height: 1256px;
      border-radius: 10px;
    }
  }
  .equal-division {
    margin-left: 28px;
    margin-right: 30px;
    position: relative;
    .top {
      position: absolute;
      left: -28px;
      top: -42px;
      width: 750px;
      height: 300px;
      background-color: #fff;
      pointer-events: none;
    }
    .image_2 {
      flex: 1 1 309px;
      z-index: 1;
    }
    .equal-division-item {
      height: 86px;
      z-index: 1;
    }
  }
}

// 单人海报模板
.hezhao_haibao_g {
  // background-color: #f3e8da;
  width: 750px;
  height: 1413px;
  overflow: hidden;
  position: absolute;
  top: 176000px;
  left: 999990px;
  z-index: -99999;
  pointer-events: none;
  .haibao_section {
    width: 750px;
    height: 1413px;
    position: relative;

    .haibao_image {
      width: 750px;
      height: 1413px;
      position: absolute;
    }
  }
  .hezhao_haibao-section {
    width: 750px;
    height: 526px;
    position: relative;
    .hezhao_haibao-image0 {
      position: absolute;
      width: 750px;
      height: 527px;
      left: 0;
      top: 0;
    }
    .hezhao_image {
      width: 88px;
      height: 134px;
      position: absolute;
      left: 52px;
      top: 28px;
    }
    .hezhao_image_1 {
      width: 569px;
      height: 305px;
      position: absolute;
      right: 9px;
      top: 29px;
    }
  }
  .hezhao_image_2 {
    width: 566px;
    height: 323px;
    transform-origin: center;
    transform: rotate(5.29deg);
    position: relative;
    .img1 {
      width: 566px;
      height: 323px;
      position: absolute;
    }
    .base64_1 {
      width: 317px;
      height: 317px;
      position: absolute;
      bottom: 1px;
      right: 0px;
    }
  }
  .hezhao_pos {
    position: absolute;
    left: 134px;
    top: 274px;
  }
  .hezhao_image_3 {
    width: 574px;
    height: 342px;
    transform-origin: center;
    transform: rotate(5.37deg);
    position: relative;
    .img1 {
      width: 574px;
      height: 342px;
      position: absolute;
    }
    .base64_1 {
      width: 317px;
      height: 317px;
      position: absolute;
      bottom: 2px;
      left: 0px;
    }
  }
  .hezhao_pos_1 {
    position: absolute;
    left: 27px;
    top: 560px;
  }

  .hezhao_image_4 {
    width: 750px;
    height: 303px;
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .hezhao_image_5 {
    width: 570px;
    height: 336px;
    transform-origin: center;
    transform: rotate(-5.63deg);
    position: relative;
    .img1 {
      width: 570px;
      height: 336px;
      position: absolute;
    }
    .base64_1 {
      width: 317px;
      height: 317px;
      position: absolute;
      bottom: 6px;
      right: 0px;
    }
  }
  .hezhao_pos_2 {
    position: absolute;
    left: 103px;
    top: 854px;
  }
  .hezhao_section_1 {
    padding: 23px 44px 21px 59px;
    background-color: #ffffff;
    border-radius: 37.5px 37.5px 0px 0px;
    .hezhao_image_6 {
      height: 93px;
    }
    .hezhao_ml-20 {
      margin-left: 20px;
    }
    .hezhao_image_7 {
      width: 153px;
      height: 153px;
    }
  }
  .hezhao_pos_3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 1216px;
  }
}
// 单人规则遮罩
.hezhao_danren_guize_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  z-index: 99999;
  .hezhao_section {
    background-color: #000000;
    width: 750px;
    height: 1624px;
    opacity: 0.7;
  }
  .hezhao_group {
    height: 771px;
    .hezhao_image {
      width: 351px;
      height: 158px;
    }
    .hezhao_image_1 {
      margin-right: 7px;
      margin-top: -49px;
      width: 617px;
      height: 662px;
    }
  }
  .hezhao_pos {
    position: absolute;
    right: 59px;
    top: 413px;
  }
  .hezhao_button {
    position: absolute;
    left: 50%;
    bottom: 289px;
    transform: translateX(-50%);
  }
  .hezhao_image_2 {
    width: 437px;
    height: 132px;
  }
}
// 未允许弹窗
.hezhao_ti_errmask {
  width: 750px;
  height: 1624px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  .hezhao_section {
    background-color: #000000;
    width: 750px;
    height: 1624px;
    opacity: 0.7;
    pointer-events: none;
  }
  .hezhao_image {
    width: 571px;
    height: 577px;
    pointer-events: none;
  }
  .hezhao_pos {
    position: absolute;
    left: 50%;
    top: 498px;
    transform: translateX(-50%);
  }
  .hezhao_image_1 {
    width: 57px;
    height: 57px;
  }
  .hezhao_pos_1 {
    position: absolute;
    left: 50%;
    bottom: 450px;
    transform: translateX(-50%);
  }
}
//合成中提示
.hezhao_ti_hechengzhong {
  width: 750px;
  height: 1624px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  .hezhao_ti_g {
    width: 750px;
    height: 1624px;
    position: relative;
    .hezhao_section {
      position: absolute;
      background-color: #000000;
      width: 750px;
      height: 1624px;
      opacity: 0.7;
    }
    .img_group {
      position: absolute;
      width: 232px;
      height: 67px;
      top: 746px;
      left: 50%;
      transform: translateX(-116px);
      img {
        transform-origin: center;
        transform: scale(0.8);
        margin-right: 15px;
      }
    }
    .hezhao_ti_wz {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 35px;
      position: absolute;
      top: 839px;
    }
  }
}
// 单人拍照容器
.cam_group {
  width: 750px;
  height: 1624px;
  position: fixed;
  left: 999990px;
  top: 9999990px;
  z-index: -999999;
  pointer-events: none;
  overflow: hidden;
  .imgcam1 {
    width: 750px;
    height: 456px;
    position: relative;
    top: 0px;
    left: 0px;

    #croppedContainer1 {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 715px;
      height: 715px;
      background-size: 750px 1624px;
      // background-image: url('./assets/cebg.jpg');
      // mask-image: url('./assets/hezhao/hezhao-danren1_mask.png');
      // mask-repeat: no-repeat;
      // mask-size: 716px 691px;
      // mask-position: 78px 67px;
      background-position: 0px -468px;
      transform: scaleX(-0.582) scaleY(0.582);
      border-radius: 50%;
    }
    .imgcam_img1 {
      width: 750px;
      height: 456px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
  .imgcam2 {
    width: 893px;
    height: 523px;
    position: relative;
    top: 0;
    left: 0;
    #croppedContainer2 {
      position: absolute;
      top: 29px;
      left: 60px;
      width: 370px;
      height: 370px;
      background-size: 750px 1624px;
      // background-position: -206px -481px;
      // transform: scale(0.56842);
      background-position: -174px -481px;
      transform: scaleX(-0.56842) scaleY(0.56842);
      border-radius: 50%;
    }

    .imgcam_img2 {
      width: 893px;
      height: 523px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
  .imgcam3 {
    width: 893px;
    height: 499px;
    position: relative;
    top: 0;
    left: 0;
    #croppedContainer3 {
      position: absolute;
      left: 480px;
      top: 6px;
      width: 370px;
      height: 370px;
      background-size: 750px 1624px;
      // background-position: -206px -481px;
      // transform: scale(0.56842);
      background-position: -174px -481px;
      transform: scaleX(-0.56842) scaleY(0.56842);
      border-radius: 50%;
    }
    .imgcam_img3 {
      width: 893px;
      height: 499px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
}
// 单人拍照
.hezhao_danren_video_group {
  width: 750px;
  height: 1624px;
  display: none;

  // background-color: #f0f;
  .hezhao_section {
    background-image: url("./assets/hezhao/danren_video_img4.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
  }
  .video_group {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
  }
  #videoElement {
    width: 750px;
    // height: 1624px;
    display: none;
    transform-origin: center;
    transform: scaleX(-1);
    pointer-events: none;
  }
  #videoElement2 {
    width: 750px;
    // height: 1624px;
    display: none;
    pointer-events: none;
  }
  .video_mask1 {
    width: 750px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
  }
  .video_mask2 {
    width: 750px;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
  }
  .hezhao_image {
    width: 750px;
    height: 439px;
    z-index: 10;
    pointer-events: none;
    .group {
      position: relative;
      width: 750px;
      height: 439px;
      .group_img1 {
        position: absolute;
        left: 0;
        width: 750px;
        height: 352px;
        top: 64px;
      }
      .group_img2 {
        position: absolute;
        left: 13px;
        top: 0px;
        width: 417px;
        height: 416px;
      }
      .group_img3 {
        position: absolute;
        right: 0px;
        top: 1px;
        width: 423px;
        height: 438px;
      }
    }
  }
  .hezhao_paizhao_zhuan {
    width: 94px;
    height: 94px;
    position: absolute;
    right: 103px;
    bottom: 204px;
    z-index: 10;
  }
  .hezhao_pos {
    position: absolute;
    left: 0px;
    top: 585px;
  }
  .hezhao_image_1 {
    width: 176px;
    height: 176px;
    z-index: 10;
    .hezhao_btn_paishe {
      width: 176px;
      height: 176px;
      border: 7px solid #fff;
      position: relative;
      border-radius: 50%;
      .btn_group {
        position: absolute;
        width: 133px;
        height: 133px;
        background-color: #fff;
        left: 14.5px;
        top: 14.5px;
        border-radius: 50%;
      }
    }
  }
  .hezhao_pos_1 {
    position: absolute;
    left: 50%;
    bottom: 163px;
    transform: translateX(-50%);
  }
}
// 单人上传照片
.hezhao_danren_upload_group {
  width: 750px;
  height: 1624px;
  display: none;
  .hezhao_danren_upload_img_group {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    img {
      width: 750px;
      height: auto;
    }
  }
  .hezhao_section {
    pointer-events: none;
    background-image: url("./assets/hezhao/danren_video_img4.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
  }
  .hezhao_image {
    width: 750px;
    height: 439px;
    z-index: 10;
    pointer-events: none;
    .group {
      position: relative;
      width: 750px;
      height: 439px;
      .group_img1 {
        position: absolute;
        left: 0;
        width: 750px;
        height: 352px;
        top: 64px;
      }
      .group_img2 {
        position: absolute;
        left: 13px;
        top: 0px;
        width: 417px;
        height: 416px;
      }
      .group_img3 {
        position: absolute;
        right: 0px;
        top: 1px;
        width: 423px;
        height: 438px;
      }
    }
  }
  .hezhao_pos {
    position: absolute;
    left: 0px;
    top: 468px;
    pointer-events: none;
  }
  .hezhao_image_0 {
    width: 507px;
    height: 24px;
    z-index: 10;
    pointer-events: none;
  }
  .hezhao_pos_0 {
    position: absolute;
    left: 50%;
    bottom: 366px;
    transform: translateX(-50%);
  }
  .hezhao_image_1 {
    width: 437px;
    height: 132px;
    z-index: 10;
  }
  .hezhao_pos_1 {
    position: absolute;
    left: 50%;
    bottom: 205px;
    transform: translateX(-50%);
  }
}
//双人1
.hezhao_shuangren1 {
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  position: absolute;
  display: none;
  .hezhao-image0 {
    width: 792px;
    height: 589px;
    margin-left: -98px;
    margin-top: -137px;
    transform: scaleX(-1);
    pointer-events: none;
  }
  .image-wrapper {
    width: 750px;
    height: 447px;
    // margin-top: 15px;
    pointer-events: none;
    position: relative;
    .hezhao_yindao1 {
      width: 274px;
      height: 275px;
      left: 22px;
      top: 201px;
      position: absolute;
    }
    .hezhao_yindao2 {
      width: 251px;
      height: 275px;
      left: 454px;
      top: 201px;
      position: absolute;
    }
    .hezhao_image {
      width: 737px;
      height: 447px;
      margin-top: 72px;
      z-index: 9;
    }
    .hezhao_rectA {
      width: 311px;
      height: 311px;
      background-color: #ffae00;
      position: absolute;
      top: 177px;
      left: 2px;
      border-radius: 50%;
    }
    .hezhao_rectB {
      width: 311px;
      height: 311px;
      background-color: #edb8a9;
      position: absolute;
      top: 177px;
      left: 425px;
      border-radius: 50%;
    }
  }
  .yinsi_group {
    position: absolute;
    left: 190px;
    bottom: 152px;
    display: flex;
    .btn {
      width: 25px;
      height: 25px;
      border: 2px solid #000;
      border-radius: 50%;
      position: relative;
      .btnquan {
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #000;
        border-radius: 50%;
        left: 3px;
        top: 3px;
        display: none;
      }
    }
    .yinsi_text {
      width: 335px;
      height: 32px;
      margin-left: 10px;
    }
  }
  .btnclick {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 176px;
    bottom: 149px;
    display: flex;
  }
  .hezhao_shuangren_ts_g {
    width: 750px;
    margin-top: 45px;
    text-align: center;
    .hezhao_shuangren_ts_wz {
      width: 473px;
    }
  }

  .image_2 {
    width: 437px;
    height: 132px;
  }
  .pos_1 {
    position: absolute;
    left: 156.5px;
    bottom: 386px;
    // transform: translateX(-50%);
  }
  .hezhao_image_3 {
    width: 746px;
    height: 562px;
    pointer-events: none;
  }
  .pos {
    position: absolute;
    left: 89px;
    bottom: -166px;
  }
  .pos_2 {
    position: absolute;
    left: 156.5px;
    bottom: 218px;
    // transform: translateX(-50%);
  }
}
// 双人拍照
.hezhao_shuangren_video {
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  position: absolute;
  display: none;
  .hezhao-image0 {
    width: 792px;
    height: 589px;
    margin-left: -98px;
    margin-top: -137px;
    transform: scaleX(-1);
    pointer-events: none;
  }
  .video_mask1 {
    width: 750px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0) 100%);
  }
  .video_mask2 {
    width: 750px;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
  }
  .video_group {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
  }
  #video2Element {
    width: 750px;
    display: none;
    transform-origin: center;
    transform: scaleX(-1);
  }
  #video2Element2 {
    width: 750px;
    display: none;
  }
  .hezhao_shuangren_mask {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
  }
  .image-wrapper {
    width: 737px;
    height: 447px;
    top: 523px;
    left: 0px;
    position: absolute;
    transform-origin: left top;
    z-index: 10;
    pointer-events: none;
    .hezhao_image {
      position: relative;
      width: 737px;
      height: 447px;

      .hezhao_shuangren_rect1 {
        width: 310px;
        height: 310px;
        position: absolute;
        left: 2px;
        top: 105px;
        border-radius: 50%;
        background-color: #ffae00;
        opacity: 1;
      }
      .hezhao_shuangren_rect2 {
        width: 309px;
        height: 309px;
        position: absolute;
        left: 425px;
        top: 105px;
        background-color: #edb8a9;
        opacity: 1;
        border-radius: 50%;
      }
      .hezhao_image_img_yin1 {
        position: absolute;
        width: 252px;
        height: 276px;
        left: 32px;
        top: 128px;
      }
      .hezhao_image_img_yin2 {
        position: absolute;
        width: 253px;
        height: 275px;
        left: 453px;
        top: 128px;
      }
      .hezhao_image_img1 {
        position: absolute;
        width: 449px;
        height: 447px;
        left: 138px;
        top: 0;
      }
      .hezhao_image_img2 {
        position: absolute;
        width: 315px;
        height: 314px;
        top: 102px;
        left: 0;
      }
      .hezhao_image_img2_1 {
        position: absolute;
        width: 261px;
        height: 336px;
        top: 86px;
        left: 0px;
      }
      .hezhao_image_img3 {
        position: absolute;
        width: 314px;
        height: 314px;
        left: 422px;
        top: 102px;
      }
      .hezhao_image_img3_1 {
        position: absolute;
        width: 283px;
        height: 316px;
        left: 445px;
        top: 96px;
      }
      .hezhao_image_img4 {
        position: absolute;
        width: 350px;
        height: 358px;
        left: 156px;
        top: 86px;
      }
    }
  }
  .hezhao_paizhao_zhuan {
    width: 94px;
    height: 94px;
    position: absolute;
    right: 103px;
    bottom: 204px;
    z-index: 10;
  }
  // .hezhao_shuangren_ts_g {
  //   width: 750px;
  //   position: absolute;
  //   bottom: 228px;
  //   text-align: center;
  //   .hezhao_shuangren_video_btn {
  //     width: 176px;
  //     height: 176px;
  //   }
  // }
  .hezhao_image_1 {
    width: 176px;
    height: 176px;
    position: absolute;
    z-index: 10;
    .hezhao_btn_paishe {
      width: 176px;
      height: 176px;
      border: 7px solid #fff;
      position: relative;
      border-radius: 50%;
      .btn_group {
        position: absolute;
        width: 133px;
        height: 133px;
        background-color: #fff;
        left: 14.5px;
        top: 14.5px;
        border-radius: 50%;
      }
    }
  }
  .hezhao_pos_1 {
    position: absolute;
    left: 50%;
    bottom: 163px;
    transform: translateX(-50%);
  }

  .image_2 {
    width: 437px;
    height: 132px;
  }
  .pos_1 {
    position: absolute;
    left: 50%;
    bottom: 286px;
    transform: translateX(-50%);
  }
  .hezhao_image_3 {
    width: 746px;
    height: 562px;
  }
  .pos {
    position: absolute;
    left: 89px;
    bottom: -166px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 118px;
    transform: translateX(-50%);
  }
}
//双人上传
.hezhao_shuangren_upload {
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  position: absolute;
  display: none;
  .hezhao-image0 {
    width: 792px;
    height: 589px;
    margin-left: -98px;
    margin-top: -137px;
    transform: scaleX(-1);
    pointer-events: none;
  }
  .hezhao_shuangren_upload_img_group {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;

    #shuangren_upload_img {
      width: 750px;
      height: auto;
    }
  }
  .hezhao_shuangren_mask {
    width: 750px;
    height: 1624px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .image-wrapper {
    width: 737px;
    height: 447px;
    top: 523px;
    left: 0px;
    position: absolute;
    transform-origin: left top;
    pointer-events: none;
    .hezhao_image {
      position: relative;
      width: 737px;
      height: 447px;

      .hezhao_shuangren_rect1 {
        width: 310px;
        height: 310px;
        position: absolute;
        left: 2px;
        top: 105px;
        border-radius: 50%;
        background-color: #ffae00;
        opacity: 1;
      }
      .hezhao_shuangren_rect2 {
        width: 309px;
        height: 309px;
        position: absolute;
        left: 425px;
        top: 105px;
        background-color: #edb8a9;
        opacity: 1;
        border-radius: 50%;
      }
      .hezhao_image_img_yin1 {
        position: absolute;
        width: 247px;
        height: 266px;
        left: 32px;
        top: 130px;
      }
      .hezhao_image_img_yin2 {
        position: absolute;
        width: 247px;
        height: 266px;
        left: 456px;
        top: 130px;
      }
      .hezhao_image_img1 {
        position: absolute;
        width: 449px;
        height: 447px;
        left: 138px;
        top: 0;
      }
      .hezhao_image_img2 {
        position: absolute;
        width: 315px;
        height: 314px;
        top: 102px;
        left: 0;
      }
      .hezhao_image_img2_1 {
        position: absolute;
        width: 261px;
        height: 336px;
        top: 86px;
        left: 0px;
      }
      .hezhao_image_img3 {
        position: absolute;
        width: 314px;
        height: 314px;
        left: 422px;
        top: 102px;
      }
      .hezhao_image_img3_1 {
        position: absolute;
        width: 283px;
        height: 316px;
        left: 445px;
        top: 96px;
      }
      .hezhao_image_img4 {
        position: absolute;
        width: 350px;
        height: 358px;
        left: 156px;
        top: 86px;
      }
    }
  }
  .hezhao_image_0 {
    position: absolute;
    width: 507px;
    height: 24px;
    bottom: 341px;
    left: 120px;
    pointer-events: none;
  }
  .hezhao_shuangren_ts_g {
    width: 750px;
    position: absolute;
    bottom: 178px;
    text-align: center;
    .hezhao_shuangren_video_btn {
      width: 437px;
      height: 132px;
    }
  }

  .image_2 {
    width: 437px;
    height: 132px;
  }
  .pos_1 {
    position: absolute;
    left: 50%;
    bottom: 286px;
    transform: translateX(-50%);
  }
  .hezhao_image_3 {
    width: 746px;
    height: 562px;
    pointer-events: none;
  }
  .pos {
    position: absolute;
    left: 89px;
    bottom: -166px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 118px;
    transform: translateX(-50%);
  }
}
//双人完成
.hezhao_shuangren_end {
  background-color: #f3e8da;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  position: absolute;
  display: none;
  .hezhao-image0 {
    width: 792px;
    height: 589px;
    margin-left: -98px;
    margin-top: -137px;
    transform: scaleX(-1);
    pointer-events: none;
  }
  .image-wrapper {
    width: 737px;
    height: 448px;
    margin-top: 72px;
    position: relative;
    pointer-events: none;
    .hezhao_image {
      width: 737px;
      height: 448px;
      position: absolute;
    }
    .yindao1 {
      width: 274px;
      height: 275px;
      position: absolute;
      left: 22px;
      top: 129px;
      display: none;
    }
    .yindao2 {
      width: 248px;
      height: 267px;
      position: absolute;
      left: 457px;
      top: 130px;
    }
    .baseimg1 {
      width: 306px;
      height: 306px;
      position: absolute;
      left: 3px;
      top: 107px;
      border-radius: 50%;
    }
    .baseimg2 {
      width: 306px;
      height: 306px;
      position: absolute;
      left: 428px;
      top: 107px;
      background-color: #edb8a9;
      border-radius: 50%;
    }
  }
  .hezhao_shuangren_ts_g {
    width: 750px;
    margin-top: 80px;
    text-align: center;
    pointer-events: none;
    .hezhao_shuangren_ts_wz {
      width: 241px;
    }
  }
  .hezhao_shuangren_ts_g2{
    width: 750px;
    margin-top: 80px;
    text-align: center;
    pointer-events: none;
    display: none;
    .imgts{
      width: 495px;
      height: 31px;
      pointer-events: none;
    }
  }
  .hezhao_group {
    position: absolute;
    bottom: 367px;
    padding-left: 78px;
    padding-right: 67px;

    .hezhao_image {
      width: 437px;
      height: 132px;
    }
    .hezhao_image_1 {
      width: 136px;
      height: 131px;
    }
  }
  .image_2 {
    width: 437px;
    height: 132px;
  }
  .pos_1 {
    position: absolute;
    left: 50%;
    bottom: 286px;
    transform: translateX(-50%);
  }
  .hezhao_image_3 {
    width: 746px;
    height: 562px;
    pointer-events: none;
  }
  .pos {
    position: absolute;
    left: 89px;
    bottom: -166px;
  }
  .pos_2 {
    position: absolute;
    left: 50%;
    bottom: 118px;
    transform: translateX(-50%);
  }
}
// 双人海报分享页面
.hezhao_shuangren_fenxiang {
  width: 750px;
  height: 1624px;
  overflow: hidden;
  display: none;
  align-items: center;
  background-color: #fff;
  .hezhao_image-wrapper {
    padding-top: 59px;
    height: 1293px;
    width: 750px;
    background-color: #f1f1f1;
    .hezhao_image {
      width: 667px;
      height: 1256px;
      border-radius: 10px;
    }
  }
  .equal-division {
    margin-left: 28px;
    margin-right: 30px;
    .image_2 {
      flex: 1 1 309px;
    }
    .equal-division-item {
      height: 86px;
    }
  }
}
// 双人海报模板
.haibao_shuangren_hb {
  width: 750px;
  height: 1413px;
  overflow: hidden;
  position: absolute;
  top: 99999px;
  left: 99999px;
  z-index: -999999;
  .haibao_section {
    width: 750px;
    height: 1413px;
    position: relative;
    .haibao_image {
      width: 750px;
      height: 1413px;
    }
    .haibao_pos {
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .yindao2 {
      width: 245px;
      height: 264px;
      position: absolute;
      left: 459px;
      top: 602px;
    }
    .base64_1 {
      width: 303px;
      height: 303px;
      position: absolute;
      left: 4px;
      top: 573px;
      border-radius: 50%;
    }
    .base64_2 {
      width: 303px;
      height: 303px;
      position: absolute;
      left: 430px;
      top: 579px;
      border-radius: 50%;
    }
  }

  .haibao_section_1 {
    padding: 25px 44px 19px 59px;
    background-color: #ffffff;
    border-radius: 37.5px 37.5px 0px 0px;
    .haibao_image_1 {
      height: 93px;
    }
    .haibao_ml-20 {
      margin-left: 20px;
    }
    .haibao_image_2 {
      width: 153px;
      height: 153px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 143px;
        height: 143px;
      }
    }
  }
  .haibao_pos_1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 1216px;
  }
}
// 双人拍照容器
.cam_shuang_group {
  width: 750px;
  height: 1624px;
  position: fixed;
  left: 99999px;
  top: 99999px;
  z-index: -99999;
  pointer-events: none;
  overflow: hidden;
  .cam_shuang_img {
    width: 737px;
    height: 447px;
    position: relative;
    top: 0;
    left: 0;
    #croppedContainer4 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 696px;
      height: 696px;
      background-size: 750px 1624px;
      background-position: -25px -488px;
      border-radius: 50%;
      transform-origin: center;
      transform: scale(0.3209);
    }
    #croppedContainer5 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 696px;
      height: 696px;
      background-size: 750px 1624px;
      background-position: -25px -488px;
      border-radius: 50%;
      transform-origin: center;
      transform: scale(0.3209);
    }
    .imgcam_img1 {
      width: 855px;
      height: 686px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
  .imgcam2 {
    width: 893px;
    height: 523px;
    position: relative;
    top: 0;
    left: 0;
    #croppedContainer2 {
      position: absolute;
      top: 108px;
      left: 139px;
      width: 212px;
      height: 212px;
      background-size: 750px 1624px;
      background-position: -467px -554px;
      border-radius: 50%;
    }

    .imgcam_img2 {
      width: 893px;
      height: 523px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
  .imgcam3 {
    width: 893px;
    height: 499px;
    position: relative;
    top: 0;
    left: 0;
    #croppedContainer3 {
      position: absolute;
      left: 559px;
      top: 85px;
      width: 212px;
      height: 212px;
      background-size: 750px 1624px;
      background-position: -467px -554px;
      border-radius: 50%;
    }
    .imgcam_img3 {
      width: 893px;
      height: 499px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
}
// 隐私条款
.hezhao_yinsiGroup {
  width: 750px;
  height: 1624px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;

  .hezhao_section {
    background-color: #000000;
    width: 750px;
    height: 1624px;
    opacity: 0.7;
    pointer-events: none;
  }
  .hezhao_group {
    padding-top: 108px;
    width: 617px;
    height: 1150px;
    .hezhao_section_1 {
      // padding: 125px 38px 70px 71px;
      background-image: url("./assets/hezhao/hezhao_yisi_bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 617px;
      height: 942px;
      .hezhao_image {
        width: 503px;
        height: 747px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin-top: 126px;
        margin-left: 72px;
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #000000; /* 设置滑块颜色为黑色 */
          width: 6px; /* 设置滑块宽度 */
          height: 197px; /* 设置滑块高度 */
          border-radius: 3px; /* 设置滑块圆角 */
        }
        .hezhao_yinsi_img {
          width: 481px;
          height: 23855px;
          pointer-events: none;
        }
      }
      .hezhao_section_2 {
        margin-top: 90px;
        background-color: #000000;
        border-radius: 3px;
        width: 6px;
        height: 197px;
      }
      .hezhao_ml-27 {
        margin-left: 27px;
      }
    }
    .hezhao_image_1 {
      width: 282px;
      height: 139px;
      pointer-events: none;
    }
    .hezhao_pos_1 {
      position: absolute;
      right: 26px;
      top: 0;
    }
    .hezhao_image_2 {
      margin-top: 43px;
      width: 57px;
      height: 57px;
    }
  }
  .hezhao_pos {
    position: absolute;
    left: 50%;
    top: 270px;
    transform: translateX(-50%);
  }
}

#hezhao_upload_canvas {
  position: fixed;
  top: 999999px;
  left: 999999px;
  width: 750px;
  height: 1624px;
  z-index: -99999;
  overflow: hidden;
  display: flex;
  align-items: center;
  .upload_canvas_video_img {
    width: 750px;
    height: auto;
  }
}