.l-t-r{opacity: 0;transform: translateX(-20px);transition: opacity 1s, transform 1s;}
.l-t-r.scrollin {opacity: 1;transform: translate(0);}
.b-t-t{opacity: 0;transform: translateY(20px);transition: opacity 2s, transform 2s;}
.b-t-t.scrollin {opacity: 1;transform: translateY(0);}

@keyframes passing-bar{
0% {left: 0;width: 0;}
30% {left: 0;width: 100.1%;}
31% {left: 0;width: 100.1%;}
100% {left: 100.1%;width: 0;}
}

@keyframes passing-inner{
0% { opacity:0;}
90% { opacity:0;}
100% { opacity:1;}
}
.passing-inner{text-align: right;}
.passing .passing-box {}
.passing .passing-bar {position: relative;display: block;transform: translate3d(0, 0, 0);}
.passing .passing-bar::before {content: '';display: inline-block;width: 0;height: 100%;
position: absolute;left: 0;top: 0;z-index: 1;background:var(--navy);}
.passing .passing-inner {opacity: 0;transform: translate3d(0, 0, 0);}
.passing.scrollin .passing-bar::before {animation: passing-bar .8s ease 0s 1 normal forwards;}
.passing.scrollin .passing-inner {animation:passing-inner 0s ease .3s 1 normal forwards;}

#page-animate::before {
 content: '';
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--navy);
 z-index: 9999;
 pointer-events: none;
 right: 100%;
 transition: right .4s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-animate.is-slide-in::before {
 right: 0;
}

#page-animate::after {
 content: '';
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--navy);
 z-index: 9999;
 pointer-events: none;
 left: 100%;
 transition: left .4s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-animate.is-slide::after {
 left: 0;
}
#page-animate::before,
#page-animate::after {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}