@charset "UTF-8";


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

.fading {
  opacity: 0;
  -webkit-transform: translate(-20px, 0);
          transform: translate(-20px, 0);
  -webkit-transition: all 2s .3s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 2s .3s 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 1s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 3s 1s 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_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, 20px);
          transform: translate(0, 20px);
  -webkit-filter: blur(0px);
  filter: blur(0px);
  -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); 
  perspective: 500;
  -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 4s 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 4s 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 4s 0.6s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 4s 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: #faf7f1;
  -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: #f6f6f6;
  -webkit-transition: all 1.5s 0.5s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 1.5s 0.5s cubic-bezier(0.19, 1, 0.22, 1); 
}

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




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

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

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




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

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

.appear_slide_wh_three.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;
  }
}



/*-----zoom-----*/

.zooming {
  opacity: 0;
  -webkit-transform: scale(0.75, 0.75);
          transform: scale(0.75, 0.75);
  -webkit-transition: all 2s .5s cubic-bezier(0.19, 1, 0.22, 1); 
  transition: all 2s .5s cubic-bezier(0.19, 1, 0.22, 1); 
}



.zooming.scroll_fade{
  opacity: 1;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}