@charset "utf-8";

/* fade in */
.fadein { opacity: 0; }
.fadein.on { animation: fadeInAnime ease-in-out 1.2s forwards; }

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* fade up */
.fadeup { opacity: 0; }
.fadeup.on { animation: fadeUpAnime ease-out 1.2s forwards; }
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stretchL,
.stretchR,
.stretchT,
.stretchB,
.stretchC {
	overflow: hidden;
  opacity: 0;
}
.stretchL.on,
.on > .stretchL {
	animation: stretchL 1.5s ease 0s forwards;
}
@keyframes stretchL {
    0% {
		clip-path: inset(0 100% 0 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchR.on {
	animation: stretchR 1.5s ease 0s forwards;
}
@keyframes stretchR {
    0% {
		clip-path: inset(0 0 0 100%);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchT.on {
	animation: stretchT 1.5s ease 0s forwards;
}
@keyframes stretchT {
    0% {
		clip-path: inset(0 0 100% 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchB.on {
	animation: stretchB 1.5s ease 0s forwards;
}
@keyframes stretchB {
    0% {
		clip-path: inset(100% 0 0 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}
.stretchC.on {
	animation: stretchC 1.5s ease 0s forwards;
}
@keyframes stretchC {
    0% {
		clip-path: inset(100% 0 100% 0);
        opacity: 0;
	}
	100% {        
        clip-path: inset(0 0 0 0);
        opacity: 1;
	}
}

/* drop up */
.dropup { opacity: 0; }
.dropup.on { animation: dropUp 1.2s ease-out forwards; }

@keyframes dropUp{
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* drop down */
.dropdown { opacity: 0; }
.dropdown.on { animation: dropDown 1.2s ease-out forwards; }

@keyframes dropDown{
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.ovimg { overflow: hidden; }
.ovimg img {
  transition: transform 2s cubic-bezier(0.33,1,0.68,1);
  transform-origin: center;
}
.ovimg-wrap:hover .ovimg img {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
}
.ovline {
  background: linear-gradient(#000,#000) 100% 100%/0 1px no-repeat;
  display: inline;
  transition: background-size 1s cubic-bezier(0.33,1,0.68,1) 0s;
  will-change: background-size;
}
.ovline-wrap:hover .ovline {
  background-position: 0 100%;
  background-size: 100% 1px;
}