@charset "UTF-8";


/*-----fade-----*/

.fading {
  opacity: 0;
  -webkit-transform: translate(20px, 0);
          transform: translate(20px, 0);
  -webkit-transition: all 3s .5s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.fading_rev {
  opacity: 0;
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
  -webkit-transition: all 3s .5s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.fading_sec{
  opacity: 0;
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
  -webkit-transition: all 3s 1.25s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 1.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.fading_zero{
  opacity: 0;
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
  -webkit-transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1);
}

.fading.scroll_fade, 
.fading_rev.scroll_fade, 
.fading_sec.scroll_fade, 
.fading_zero.scroll_fade {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}


/*-----fadeAndSlide-----*/

.appear_fade {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  perspective: 1000;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.appear_fade_two {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: all 3s 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
  perspective: 1000;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.appear_fade_three {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: all 3s 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
  perspective: 1000;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}


.appear_fade.scroll_fade, .appear_fade_two.scroll_fade, .appear_fade_three.scroll_fade  {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-filter: blur(0);
  filter: blur(0);
}




/*-----slideOpen-----*/

.appear_slide {
  overflow: hidden;
  position: relative;
}

.appear_slide:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background: #fff;
  -webkit-transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  
}

.appear_slide.scroll_open:after {
  left: 100%;
}

/*-----slide_shite-----*/

.appear_slide_wh {
  overflow: hidden;
  position: relative;
}

.appear_slide_wh:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background: #fff;
  -webkit-transition: all 1s 0s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 1s 0s cubic-bezier(0.19, 1, 0.22, 1); 
}

.appear_slide_wh.scroll_open:after {
  left: 100%;
}


/*-----smooth-----*/

.smooth {
  overflow: hidden;
  position: relative;
  opacity: 0;
}

.smooth.scroll_smooth{
animation-name:smoothAnime;
animation-duration:1s;
animation-fill-mode:forwards;
transform-origin:left;
opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}