.child-left-1,
.child-right-1 {
  position: absolute;
  width: 50%;
  overflow: hidden;
  z-index: 2;
  transition: 1s all ease;
}

.child-right-1 {
  margin-left: 50%;
}

@media screen and (min-width: 1200px){
  .child-left-1,
  .child-right-1{
    background-size: auto;
  }
  .child-left-1 {
    background-position: 25%;
  }
  .child-right-1 {
    background-position: 75%;
  }
}
.left,
.right {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  overflow: hidden;
}

.upper-title {
  width: 40%;
  max-height: 30%;
  overflow-y: auto;
  overflow-x: hidden;
  top: 5%;
  left: 50%;
  padding: .5rem;
  transform: translateX(-50%);
  font-size: calc(10px + 1.7vmin);
  font-family: title_font;
  background-color: rgba(var(--additional-color-rgb), 0.9);
  z-index: 3;
}

.upper-hidden-text {
  position: absolute;
  width: 60%;
  max-height: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  z-index: 10;
}

.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.button-left,
.button-right {
  width: 100px;
  height: 50px;
  background-color: var(--additional-color);
  z-index: 20;
  overflow: hidden;
  font-weight: 100;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  padding-top: 14px;
  -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  cursor: pointer;
}
  .button-left:before,
  .button-right:before {
    content: '';
    position: absolute;
    overflow: hidden;
    top: 25px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    z-index: -1;
    height: 0;
    background: var(--title-color);
    color: var(--base-color);
    -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
  
  .button-left .view,
  .button-right .view {
    color: var(--title-color);
    font-size: calc(5px + 4vmin) !important;
    z-index: 20;
  }

.button-left {
  right: 50%;
}

.button-right {
  left: 50%;
}

.l1 {
  width: 60vw;
}

.r1 {
  width: 40vw;
  margin-left: 60%;
}

.l2 {
  width: 40vw;

}

.r2 {
  width: 60vw;
  margin-left: 40%;
}

.rr {
  width: 60vw;
}

.cl1 {
  width: 100%;
}

.cr1 {
  width: 0%;
  margin-left: 100vw;
}

.cl2 {
  width: 0vw;
}

.cr2 {
  width: 100%;
  margin-left: 0vw;
}

.crr {
  width: 100%;
}

.close {
  position: absolute;
  z-index: 3;
  width: 6vmin;
  height: 6vmin;
  background: var(--base-color);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  cursor: pointer;
}
  .close span {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    height: 1px;
    background: var(--title-color);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
  }
  .close .lin1 {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
          }
  .close .lin2 {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
          }
  .close:hover {
    background: var(--title-color);
  }
    .close:hover span {
      background: var(--base-color);
    }

@-webkit-keyframes ani {
  0% {
    height: 0px;
  }
  25% {
    height: 85px;
  }
  55% {
    height: 85px;
  }
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
            }
          }

@keyframes ani {
  0% {
    height: 0px;
  }
  25% {
    height: 85px;
  }
  55% {
    height: 85px;
  }
  100% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
            }
          }
.opa {
  opacity: 0;
}

/*# sourceMappingURL=img_transition.css.map */