*{margin:0;padding:0;}
.mask{
  position: fixed;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,0.4);
   transition: 0.3s;
  option:0;
}
.mask.on{
  option:1;
}
.box{
  position: fixed;
  z-index:2;
  height:55vh;
  background:#ccc;
  left:0;
  right:0;
  bottom:0;
  transform: translateY(55vh);
  transition: 0.3s;
}
.box.on{
  transform: translateY(0);
}