html,body {
  height: 100%;
}

* html .layer_board_bg,
* html .layer_board {
  position: absolute;
}

.layer_board_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  
  z-index: 1001;
  
  top: 0;
  left: 0;
  
  display: none;
  cursor: pointer;
  background: #fff;
}

.layer_board {
  display: none;
  position: fixed;
  top: 20%;
  
  text-align: center;
  z-index: 2000;
}

.modal_body {
  position: relative;
  border: solid 4px #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  width: 80%;
  height: auto;
  margin: 0 calc( 10% - 4px);
}
.modal_body img {
  width: 100%;
  height: auto;
}

.btn_close {
  position: absolute;
  top: -18px;
  right: -18px;
  display: block;
  width: 36px;
  height: 36px;
  background-image: url(../img/modal_close.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1002;
}

@media screen and (min-width:568px) {
  .layer_board {
    top: 8%;
  }
  .modal_body {
    width: 46%;
    margin: 0 calc( 26% - 4px);
  }
}