/* box */
.box{
  margin-bottom: 80px;
  padding:10px;
  background: #ddd;
  box-sizing: border-box;
}
.left_col{
  width: 30%;
}
.right_col{
  width: 68%;
}
.ef{
  visibility: hidden;
}
.is_visible{
  visibility: visible !important;
}

/* box1 */
.ef1_1.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-name: ef1;
  animation-name: ef1;
}
.ef1_2.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-name: ef1;
  animation-name: ef1;
}
@-webkit-keyframes ef1 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ef1 {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* box2 */
.ef2_1.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-name: ef2;
  animation-name: ef2;
}
.ef2_2.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-name: ef2;
  animation-name: ef2;
}
@-webkit-keyframes ef2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ef2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* box3 */
.ef3.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-name: ef3;
  animation-name: ef3;
}
@-webkit-keyframes ef3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2,1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1,1);
  }
}
@keyframes ef3 {
  0% {
    opacity: 0;
    transform: scale(1.2,1.2);

  }
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

/* box4 */
.ef4.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-name: ef4;
  animation-name: ef4;
}
@-webkit-keyframes ef4 {
  0% {
    opacity: 0;
    -webkit-transform:translateX(500px);
  }
  70%{
    opacity: 1;
    -webkit-transform:translateX(-30px);
  }
  100% {
    -webkit-transform:translateX(0px);
  }
}
@keyframes ef4 {
  0% {
    opacity: 0;
    transform:translateX(500px);
  }
  70%{
    opacity: 1;
    transform:translateX(-30px);
  }
  100% {
    transform:translateX(0px);
  }
}

/* box5 */
.ef5.is_visible{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1.5s;
  animation-duration:1.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: ef5;
  animation-name: ef5;
}
@-webkit-keyframes ef5 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes ef5 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* box6 */
.ef6{
  position: relative;
  overflow: hidden;
}
.ef6_cover_1{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
}
.ef6_cover_2{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.5);
}
.is_visible .ef6_cover_1{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: ef6;
  animation-name: ef6;
}
.is_visible .ef6_cover_2{
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:.4s;
  animation-duration:.4s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: ef6;
  animation-name: ef6;
}
@-webkit-keyframes ef6 {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}
@keyframes ef6 {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}