body{
  margin: 0;
  padding: 0;
}
.shadow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 11;
}

.popup {
  position: fixed;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  display: none;
  z-index: 12;
  overflow: hidden;
}

.popup img{
  width: 100%;
  height: 100%;
  border-radius: calc(15vw / 7.5);
}

.popup .launch-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.popup .tip{
  width: 100%;
  box-sizing: border-box;
  font-size:calc(24vw / 7.5);
  color: #333333;
  line-height:calc(40vw / 7.5);
  padding: calc(18vw / 7.5) calc(32vw / 7.5);
  position:absolute;
  bottom:0;
  left:0;
  background:#fff;
  border-radius:0 0 calc(15vw / 7.5) calc(15vw / 7.5);
}

.popup .label {
  position:absolute;
  top:calc(15vw / 7.5);
  right:calc(15vw / 7.5);
  background:rgba(0, 0, 0, 0.4);
  color:#fff;
  padding:calc(3vw / 7.5) calc(7vw / 7.5);
  font-size: calc(8vw / 7.5);
}

.cancel {
  background:url('image/cancel.png') no-repeat;
  background-size: 100% 100%;
  width:calc(56vw / 7.5);
  height:calc(56vw / 7.5);
  position: fixed;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  display: none;
  z-index: 12;
}
.self-msg{
  background: rgba(0, 0, 0, 0.8);
  font-size: calc(12vw / 7.5);
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: 999;
  padding: 0 calc(20vw / 7.5);
  border-radius: calc(10vw / 7.5);
  line-height: calc(50vw / 7.5);
  height: calc(50vw / 7.5);
  display: none;
}