
.startBtn {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -70px;
  width: 140px;
  height: 140px;
  z-index: 11;
  cursor: pointer;
  & > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.endBtn{
  position: fixed;
  left: 50%;
  
  width: 120px;
  height: 40px;
  margin-left: -70px;
  z-index: 11;
  cursor: pointer;
  & > img {
    display: block;
    width: 100%;
    height: 100%;
  }
  &.bottom{
    bottom: 16px;
  }
  &.top{
    left: 2rem;
    bottom: 0.85333rem;
  }
}

.pcEndBtn {
  width: 36px;
  height: 36px;
  left: 46px;
  bottom: 12px !important;
  margin-left: initial;
}

.noteState {
  position: fixed;
  bottom: 0;
  right: 10PX;
  width: 100Px;
  height: 30Px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  border-radius: 4Px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;

  .dot {
      width: 13Px;
      height: 10Px;
      border-radius: 50%;
      transform: rotate(-20deg);
  }
}

.operatingBtn{
  position: fixed;
  right: 30px;
  bottom: 0;
  height: var(--header-height);
  z-index: 99;
  display: flex;
  align-items: center;
  .iconBtn{
      width: 50px;
      height: 50px;
      cursor: pointer;
      & + .iconBtn{
          margin-left: 20px;
      }
  }
  &.operatingLeft {
    left: 30px !important;
  }
}
.beginMask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
}