*{margin:0;padding:0;}

.slider-box{
  display: none;
}
.slider-box.open{
  display: block;
}
.mask{
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index: 1;
  opacity: 0;
  background: rgba(0,0,0,0.4);
  transition: 0.2s;
}
.mask.open{
  opacity: 1;
}
.box{
  background: #fff;
  z-index: 2;
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  height: 55vh;
  transition: 0.2s;
  transform: translateY(55vh);
}
.box.open{
  transform: translateY(0);
}