@charset "utf-8";

.fix,.header_logo,.header_button_wrap,.fix_txt {opacity: 0;}
.wrap_on .header_logo { animation:opening0 0.5s ease-in-out .8s forwards; }
@keyframes opening0 {
  0% { opacity:0;}
  100% { opacity:1;}  
}
.wrap_on .fix,.wrap_on .header_button_wrap,.wrap_on .fix_txt { animation:opening1 0.5s ease-in-out 1.5s forwards; }
@keyframes opening1 {
   0% { opacity:0;}
  100% { opacity:1;}   
}

/*SCROLL*/
.fadein {
    opacity: 0;
}
.fadein.on {
    animation: fadein 1s ease-in-out forwards;
}
@keyframes fadein {
   0% { opacity:0;transform: translateY(15px);}
  100% { opacity:1;transform: translateY(0);}   
}

/*SCROLL BAR*/
.fix_scroll_inner div {
  animation: scroll1 1s ease-in-out 2.5s forwards;
}
.fix_scroll_inner div span {
  display: block;
  height: 100%;
  background: #64433a;
  animation: scroll2 2.5s linear 4s infinite;
}
@keyframes scroll1 {
  0% {top:0;opacity:1;}
  100% {height:100%;}
}
@keyframes scroll2 {
  0%,100%,66% {top:0;opacity:1;}
  33% {top:100%;opacity:1;}
  34%{top:100%;opacity:0;}
  35%{top:-100%;opacity:0;}
}


/*MENU*/
.menu_on .menu_inner { animation:menu_on 0.4s ease-in-out forwards;}
@keyframes menu_on {
  0% { opacity:0; }
  100% { opacity:1; }
}
.menu_off .menu_inner,
.menu_on .header .nav > .nav_wrap:nth-child(2) { animation:menu_off 0.4s ease-in-out forwards;}
@keyframes menu_off {
  0% { opacity:1; }
  100% { opacity:0; }
}

/*SLIDE*/
.slide-animation {
    animation: fadezoom 10s linear forwards;
}
@keyframes fadezoom {
  0% { transform:scale(1.15);}
  100% { transform:scale(1);}
}