* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-transition: all ease 0.4s;
  transition: all ease 0.4s;
}

html,
body {
  width: 100%;
}

img {
  width: 100%;
  display: block;
}

.block-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.app {
  display: block;
  text-decoration: none;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
}

.girl {
  position: absolute;
  width: 28%;
  left: 0;
  height: 100%;
  top: 0;
  -webkit-transform-origin: center;
  transform-origin: center;
  border-left: 10px solid #ffffff;
}

.girl:first-child {
  border-left: none;
}

.girl .g-open {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}

.girl .g-closed {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.girl .btn {
  position: absolute;
  width: 60%;
  left: 20%;
  bottom: 5%;
}

.girl .g-button {
  -webkit-animation: pulse 1s ease;
  animation: pulse 1s ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.girl .g-button-active {
  opacity: 0;
}

.girl:hover .g-closed {
  opacity: 0;
}

.girl:hover .g-button-active {
  opacity: 1;
}

.girl:hover .g-button {
  opacity: 0;
}

.girl1 .g-open {
  background-image: url(../image/g1_open.jpg);
}

.girl1 .g-closed {
  background-image: url(../image/g1_close.jpg);
}

.girl2 {
  left: 25%;
}

.girl2 .g-open {
  background-image: url(../image/g2_open.jpg);
}

.girl2 .g-closed {
  background-image: url(../image/g2_close.jpg);
}

.girl2 .g-button {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.girl3 {
  left: 50%;
}

.girl3 .g-open {
  background-image: url(../image/g3_open.jpg);
}

.girl3 .g-closed {
  background-image: url(../image/g3_close.jpg);
}

.girl3 .g-button {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.girl4 {
  left: 75%;
}

.girl4 .g-open {
  background-image: url(../image/g4_open.jpg);
}

.girl4 .g-closed {
  background-image: url(../image/g4_close.jpg);
}

.girl4 .g-button {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.girl_a1 .girl1 {
  width: 28%;
}

.girl_a1 .girl2 {
  left: 28%;
}

.girl_a1 .girl3 {
  left: 53%;
}

.girl_a1 .girl4 {
  left: 78%;
}

.girl_a2 .girl1 {
  left: -1.5%;
}

.girl_a2 .girl2 {
  left: 23.5%;
}

.girl_a2 .girl3 {
  left: 51.5%;
}

.girl_a2 .girl4 {
  left: 76.5%;
}

.girl_a3 .girl1 {
  left: -1.5%;
}

.girl_a3 .girl2 {
  left: 23.5%;
}

.girl_a3 .girl3 {
  left: 48.5%;
}

.girl_a3 .girl4 {
  left: 76.5%;
}

.girl_a4 .girl1 {
  left: -3%;
}

.girl_a4 .girl2 {
  left: 22%;
}

.girl_a4 .girl3 {
  left: 47%;
}

.girl_a4 .girl4 {
  left: 72%;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}