h1 {
  text-align: center;
}
p {
  text-align: center;
  margin: 0;
}
img {
  max-width: 100%;
}
pre {
  margin: 0 0 10px 0;
}
.wrap, .wrap2, .wrap3 {
  z-index: 1;
  position: relative;
  width: 400px;
  max-height: 400px;
  height: 400px;
  background: #fff;
  display: block;
  margin: 0 auto;
}
.open, .open2, .open3 {
  z-index: 2;
  height: 34px;
  width: 34px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 26px;
  margin: auto;
}
.open, .open3 {
  background: url("zoom.png") no-repeat center 0;
}
.open2 {
  background: url("zoom2.png") no-repeat center 0;
}
.open:hover, .open3:hover  {
  background: url("zoom.png") no-repeat center -34px;
}
.open2:hover {
  background: url("zoom2.png") no-repeat center -34px;
}
.size, .size2, .size3 {
  width: 400px;
  max-height: 400px;
  height: 400px;
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid #000;
  padding: 5px;
}
.size p {
  text-align: justify;
}
.wrap.active, .wrap2.active, .wrap3.active {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  height: 100%;
  animation: zoomIn;
  animation-duration: 0.3s;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
.open.active, .open2.active, .open3.active {
  z-index: 4;
}
.open.active, .open3.active {
  background: url("zoom.png") no-repeat center -68px;
}
.open2.active {
  background: url("zoom2.png") no-repeat center -68px;
}
.open.active:hover, .open3.active:hover {
  background: url("zoom.png") no-repeat center -102px;
}
.open2.active:hover {
  background: url("zoom2.png") no-repeat center -102px;
}
.size.active, .size2.active, .size3.active {
  width: 100%;
  max-height: 100%;
  height: 100%;
  border: none;
}
body.active {
  overflow: hidden;
}