.fadeAni { animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite } 
@keyframes fadeAni {0%, 100% { opacity:0 } 
33%, 66% { opacity:1 } 
 }
.fadeAni:hover { animation-name: none } 

.rotateAni { animation-name: rotateAni; animation-duration: 20s; transform-origin:center; animation-timing-function:linear; animation-iteration-count: infinite } 
@keyframes rotateAni {100% { transform:rotate(360deg) } 
 }

.moveDownAni { animation-name: moveDownAni; animation-duration: 3s; transform-origin:center; animation-iteration-count: infinite } 
@keyframes moveDownAni {50% { transform:translateY(1em) } 
 }
.moveDownAni:hover { animation-name: none } 

.downAni { animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite } 
@keyframes downAni {70% { transform:translateY(0) } 
85% { transform:translateY(.5em) } 
100% { transform:translateY(0) } 
 }

.textAniW { display:flex } 
.textAni { animation: textAni 15s linear infinite; white-space:nowrap } 
.textAni:before { content:"·"; padding:0 .5em } 
@keyframes textAni {0% { transform: translateX(0); } 
100% { transform: translateX(-100%); } 
 }

.scaleAni { animation-name: scaleAni; animation-duration: 4s; animation-iteration-count: infinite; animation-direction:alternate } 
@keyframes scaleAni {100% { transform:scale(1.2) } 
 }

.yAni { animation-name: yAni; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function:linear } 
@keyframes yAni {0% { transform:translateY(0) } 
25% { transform:translateY(-2em) } 
75% { transform:translateY(2em) } 
100% { transform:translateY(0) } 
 }
.yAni.d1 { animation-delay:.5s } 
.yAni.d2 { animation-delay:1s } 
.yAni.d3 { animation-delay:1.5s } 
.yAni.d4 { animation-delay:2s } 
.yAni.d5 { animation-delay:2.5s } 

.circleAni { animation-name: circleAni; animation-duration: 2s; animation-iteration-count: infinite; opacity:0 } 
@keyframes circleAni {50% { opacity:1 } 
100% { padding:.75em; opacity:0 } 
 }
.circleAni.d1 { animation-delay:.5s } 
.circleAni.d2 { animation-delay:1s } 
.circleAni.d3 { animation-delay:1.5s } 

.scrollAni { opacity:0 } 
.scrollAni.on { opacity:1; transition:1s; transition-timing-function:ease-out; } 
.scrollAni.on.ts2 { transition:2s } 
.scrollAni.fade { opacity:0 } 
.scrollAni.fade.on { opacity:1 } 
.scrollAni.moveL { transform:translateX(-10rem); } 
.scrollAni.moveL.on { transform:translateX(0); } 
.scrollAni.moveR { transform:translateX(10rem) } 
.scrollAni.moveR.on { transform:translateX(0) } 
.scrollAni.moveT { transform:translateY(10rem) } 
.scrollAni.moveT.on { transform:translateY(0) } 
.scrollAni.moveB { transform:translateY(-10rem) } 
.scrollAni.moveB.on { transform:translateY(0) } 
.scrollAni.width { width:0 } 
.scrollAni.width.on { width:100% } 
.scrollAni.scale.on { transform:scale(1) } 
.scrollAni.scale { transform:scale(0) } 
.scrollAni.scale.on { transform:scale(1) } 
.scrollAni.scaleX { transform:scaleX(0); transform-origin:left top } 
.scrollAni.scaleX.on { transform:scaleX(1) } 
.scrollAni.scaleX.right { transform-origin:right top } 
.scrollAni.scaleY { transform:scaleY(0); transform-origin:left top } 
.scrollAni.scaleY.on { transform:scaleY(1) } 
.scrollAni.zoomOut { transform:scale(1.3) } 
.scrollAni.zoomOut.on { transform:scale(1) } 
.scrollAni.zoomIn { transform:scale(.7); border-radius:1em } 
.scrollAni.zoomIn.on { transform:scale(1); border-radius:0 } 
.scrollAni.radius { border-radius:3em; transition:3s; } 
.scrollAni.radius.on { border-radius:0 } 
.scrollAni.delay.on:nth-child(2) { transition-delay:.3s } 
.scrollAni.delay.on:nth-child(3) { transition-delay:.6s } 
.scrollAni.delay.on:nth-child(4) { transition-delay:.9s } 
.scrollAni.delay.on:nth-child(5) { transition-delay:1.2s } 
.scrollAni.delay.on:nth-child(6) { transition-delay:1.5s } 
.scrollAni.delay.on:nth-child(7) { transition-delay:1.8s } 
.scrollAni.delay.on:nth-child(8) { transition-delay:2.1s } 
.scrollAni.delay.on:nth-child(9) { transition-delay:2.4s } 
.scrollAni.delay.on:nth-child(10) { transition-delay:2.7s } 

/* .gsSplit { opacity:0 } 
.gsSplit.on { opacity:1 } 
.gsSplit > i { display:inline-block; min-width:.25em; transform:translateY(0); opacity:0 } 
.gsSplit.on > i { animation: splitAni .5s forwards; } 
@keyframes splitAni { 
 0% { transform:translateY(.5em); opacity:0 } 
100% { transform:translateY(0); opacity:1 } 
 } */

.gsSplit { opacity:1; } 
.gsSplit i { display:inline-block; min-width:.25em; opacity:0; transform:translateY(50px); font-style:normal; } 
.gsSplit.on i { animation:text-active-animation 1s cubic-bezier(.4, 0, .2, 1) both; animation-delay:var(--delay); } 

@keyframes text-active-animation { 
 from { opacity:0; transform:translateY(50px); } 

 to { opacity:1; transform:translateY(0); } 
 }

.gsSvg > path { transform:translateY(0); opacity:0 } 
.gsSvg.on > path { animation-name: splitSvgAni; animation-duration: 1.5s; animation-fill-mode: forwards; } 
@keyframes splitSvgAni {30% { transform:translateY(-200%); opacity:0 } 
100% { transform:translateY(0); opacity:1 } 
 }
.gsSvg.on > path:nth-child(2) { animation-delay:.1s } 
.gsSvg.on > path:nth-child(3) { animation-delay:.2s } 
.gsSvg.on > path:nth-child(4) { animation-delay:.3s } 
.gsSvg.on > path:nth-child(5) { animation-delay:.4s } 
.gsSvg.on > path:nth-child(6) { animation-delay:.5s } 
.gsSvg.on > path:nth-child(7) { animation-delay:.6s } 
.gsSvg.on > path:nth-child(8) { animation-delay:.7s } 

.gsClass.opacity { opacity:0; transition:1.5s } 
.gsClass.opacity.on { opacity:1 } 

.gsClass.move { opacity:0; transition-duration:1.5s } 
.gsClass.move.mT { transform:translateY(7vh) } 
.gsClass.move.mB { transform:translateY(-7vh) } 
.gsClass.move.mL { transform:translateX(7vw) } 
.gsClass.move.mR { transform:translateX(-7vw) } 
.gsClass.move.on { opacity:1; transform:translate(0) } 

.gsClass.blurShow { opacity: 0; filter: blur(10px); transition: 1s; } 
.gsClass.blurShow.mT { transform:translateY(7vh) } 
.gsClass.blurShow.mB { transform:translateY(-7vh) } 
.gsClass.blurShow.mL { transform:translateX(7vw) } 
.gsClass.blurShow.mR { transform:translateX(-7vw) } 
.gsClass.blurShow.on { opacity: 1; filter: blur(0px); transform: translateY(0); } 

.gsDelay1 { transition-delay:.2s } 
.gsDelay2 { transition-delay:.4s } 
.gsDelay3 { transition-delay:.6s } 
.gsDelay4 { transition-delay:.8s } 
.gsDelay5 { transition-delay:1s } 
.gsDelay6 { transition-delay:1.2s } 
.gsDelay7 { transition-delay:1.4s } 
.gsDelay8 { transition-delay:1.6s } 
.gsDelay9 { transition-delay:1.8s } 
.gsDelay10 { transition-delay:2s } 

.gsClass.tShow .el { display:block; overflow:hidden } 
.gsClass.tShow .el > i { transform:translateY(10vh); line-height:1 } 
.gsClass.tShow.on .el > i { transform:translateY(0); transition-duration:1s } 
.gsClass.tShow.on .el:nth-child(2) > i,
.gsClass.tShow.on.d1 .el > i { transition-delay:.2s } 
.gsClass.tShow.on.d2 .el > i { transition-delay:.4s } 

.gsClass.imgShow { overflow:hidden } 
.gsClass.imgShow .el { transition:1s; } 
.gsClass.imgShow.left .el { transform:translateX(-100%) } 
.gsClass.imgShow.right .el { transform:translateX(100%) } 
.gsClass.imgShow.top .el { transform:translateY(-100%) } 
.gsClass.imgShow.bottom .el { transform:translateY(100%) } 
.gsClass.imgShow.on .el { transform:translate(0) } 

.gsClass.listShow .el { transform:translateY(15%); opacity:0; transition:1s } 
.gsClass.listShow.on .el { transform:translateY(0); opacity:1 } 
.gsClass.listShow.on .el:nth-child(1) { transition-delay:.2s } 
.gsClass.listShow.on .el:nth-child(2) { transition-delay:.4s } 
.gsClass.listShow.on .el:nth-child(3) { transition-delay:.6s } 
.gsClass.listShow.on .el:nth-child(4) { transition-delay:.8s } 
.gsClass.listShow.on .el:nth-child(5) { transition-delay:1s } 
.gsClass.listShow.on .el:nth-child(6) { transition-delay:1.2s } 
.gsClass.listShow.on .el:nth-child(7) { transition-delay:1.4s } 
.gsClass.listShow.on .el:nth-child(8) { transition-delay:1.6s } 
.gsClass.listShow.on .el:nth-child(9) { transition-delay:1.8s } 
.gsClass.listShow.on .el:nth-child(10) { transition-delay:2s } 

.gsClass.accordion .el { transition:1.5s } 
.gsClass.accordion .el:nth-child(1) { transform:translate(100%,0) } 
.gsClass.accordion .el:nth-child(2) { transform:translate(0,0) } 
.gsClass.accordion .el:nth-child(3) { transform:translate(-100%,0) } 
.gsClass.accordion.on .el { transform:translate(0,0) } 
.gsClass.accordion.on .el:nth-child(2) { transform:translate(0,2em) } 

.gsClass.tEffect { --c : #000; background: linear-gradient(90deg, var(--c), var(--c) 50%, rgba(0,0,0,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100% } 
.gsClass.tEffect.on { background-position: 0; transition-duration:1.5s; transition-timing-function:cubic-bezier(0.5, 0, 1, 1) } 
.gsClass.tEffect.white { filter:brightness(0) invert(1) } 
.gsClass.tEffect.siteC { --c : var(--siteC) }