@charset "utf-8";

/* Style for our header texts
* --------------------------------------- */
/*h1{*/
/*    font-size: 5em;*/
/*    font-family: arial,helvetica;*/
/*    color: #fff;*/
/*    margin:0;*/
/*}*/
/*.intro p{*/
/*    color: #fff;*/
/*}*/

/* Centered texts in each section
* --------------------------------------- */
.section{
    text-align:center;
}


/* Bottom menu
* --------------------------------------- */
/*#infoMenu li a {*/
/*    color: #fff;*/
/*}*/

.mb-6 {margin-bottom: 6rem !important; }
.cursorPointer {cursor: pointer !important; }
a:focus {outline: none; }

.fancybox-close-small {width: 40px; height: 40px; right: 15px !important; top: 15px  !important; padding: 0; }
.fancybox-close-small::before,
.fancybox-close-small::after {content: ""; position: absolute; top: 50%; left: 0; height: 1px; width: 100%; background: #fff; }
.fancybox-close-small::before {transform: rotate(45deg) }
.fancybox-close-small::after {transform: rotate(-45deg) }

body {background: url(https://static.ncsoft.jp/lineageM/event/1911update/bg.jpg) center top #000; }


.menu {position: fixed; top: 50%; left: 60px; z-index: 2; transform: translateY(-50%); transform-origin: left center; padding: 0; transition: 1s all; }
.menu__li {margin-bottom: 1.5em; list-style: none; padding-left: 30px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/menuIcon.png) left center no-repeat; }
.menu__li.active {opacity: 1}
.menu__li a {display: block; height: 24px; width: 200px; background-position: left -100px; background-repeat: no-repeat; }
.menu__li.active a {background-position: left top; }
.menu__home a {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/menu1.png);}
.menu__story a {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/menu2.png);}
.menu__job a {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/menu3.png);}
.menu__transform a {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/menu4.png);}
.menu__event a {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/menu5.png);}

.lmLogo {position: fixed; left: 60px; top: 25px; }

.lmLogo__btn {visibility: hidden; opacity: 0; transition: all .5s ease-in-out; margin-left: 10px;  }
/*body:not(.fp-viewing-homePage) .lmLogo__btn {}*/
body.fp-viewing-storyPage .lmLogo__btn,
body.fp-viewing-jobPage .lmLogo__btn,
body.fp-viewing-transformPage .lmLogo__btn,
body.fp-viewing-eventPage .lmLogo__btn,
body.fp-viewing-footerPage .lmLogo__btn {visibility: visible; opacity: 1;}

.links {position: fixed; right: 60px; top: 30px; }
.links__itemTwitter {margin-bottom: 10px; }
.links__itemAppStore {margin-bottom: 5px; }

.page {background-size: cover !important; }
.page__inner {position: relative; height: 100%; width: 100%; /* max-width: 1920px; margin: auto; */ overflow: hidden; background-size: cover !important;}


/*.homePage .page__inner {background: url(https://static.ncsoft.jp/lineageM/event/1911update/section0.jpg) center top no-repeat; }*/
.storyPage .page__inner {background: url(https://static.ncsoft.jp/lineageM/event/1911update/section1.jpg) center top no-repeat; }
.jobPage .page__inner  {background: url(https://static.ncsoft.jp/lineageM/event/1911update/section2.jpg) center top no-repeat; }
.transformPage .page__inner  {background: url(https://static.ncsoft.jp/lineageM/event/1911update/section3.jpg) center top no-repeat; }
.eventPage {background: #000; }
.footerPage {background: #000; color: #999; font-size: .8rem;  }

/*************
 * intro
 *************/
.intro {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url(https://static.ncsoft.jp/lineageM/event/1911update/bg.jpg) center top #000; z-index: 10; transition: 1s opacity ease-in-out, 1s visibility ease-in-out; }
.intro.hide {visibility: hidden; opacity: 0; }
.intro__imgArea {position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 700px; background: center top no-repeat; background-size: auto 100%;}
.intro__imgArea1.show {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/intro1.jpg); animation: shake 1s; }
.intro__imgArea2.show {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/intro2.jpg); animation: shake 1s; }
.intro__imgArea3.show {background-image: url(https://static.ncsoft.jp/lineageM/event/1911update/intro3.jpg); animation: shake2 2s; }
.intro__imgArea3.expand {animation: expand .6s cubic-bezier(.65,.07,.9,.33) both; transform-origin: 48.6% 56.6%;}

@keyframes expand {
    0% {transform: scale(1); }
    100% {transform: scale(60); }
}



/*************
 * homePage
 *************/

.homePage.shake {animation: 2s shake3;}
.homePage .page__inner {animation: flash2 7s 8s infinite; }
/*.homePage .page__inner {background-size: 5760px 3240px !important; transition: background-size 2.5s cubic-bezier(.33,.52,.61,.81); background-position: center top; }*/
/*.homePage .page__inner.animate {background-size: 1920px 1080px !important;}*/
.homePage__bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://static.ncsoft.jp/lineageM/event/1911update/section0.jpg) center top no-repeat; background-size: cover; transform: scale(3); transform-origin: center 70%; }
.homePage__bg.animate {transform: scale(1); transition: 2.5s cubic-bezier(.33,.52,.61,.81); }

.mainLogo {margin-bottom: 30px; transform-origin: center 70%; }
.mainLogo.animate {animation: mainLogo 5s cubic-bezier(.33,.52,.61,.81) .5s both;}
.cha {transform: scale(.5); transition: 2.5s transform cubic-bezier(.33,.52,.61,.81); }
.cha.shake {animation: 2s shake3;}
.cha1 {position: absolute; left: 54%; top: 7vh; transform-origin: 0% 90%; /*animation: cha1 1s ease-out both;*/}
.cha2 {position: absolute; right: 45%; top: 11vh; transform-origin: 100% 90%;/*animation: cha2 1s ease-out both .2s;*/}
.cha.animate {transform: scale(1);}
.homePage__cover {position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.homePage__cover::after {content: ""; display: block; margin: auto; width: 100%; height: 100%; /* max-width: 1920px; */ background: url(https://static.ncsoft.jp/lineageM/event/1911update/homeCover.png) center top no-repeat,  linear-gradient(to top, rgba(18,9,6,1) 0%, rgba(18,9,6,0) 10%); background-size: cover; }
.homePage__btn {display: block; visibility: hidden; opacity: 0; transform: translateY(70px); transition: 1s all .5s;}
.homePage__movie {display: block; visibility: hidden; opacity: 0; transform: translateY(50px); transition: 1s all .8s;}
.homePage__btn.show,
.homePage__movie.show {visibility: visible; opacity: 1; transform: translateY(0);}


@keyframes mainLogo {
    0% {transform: scale(1.5); opacity: 0; visibility: hidden; }
    39% {transform: scale(0.98);}
    40% {transform: scale(1); opacity: 1; visibility: visible; filter: brightness(1); }
    42% {filter: brightness(8)}
    99% {filter: brightness(0.98)}
    100% {filter: brightness(1);}
}

@keyframes cha1 {
    0% {transform: translateX(-1000px); opacity: 0}
    99% {transform: translateX(-98px);}
    100% {transform: translateX(-100px); opacity: 1}
}
@keyframes cha2 {
    0% {transform: translateX(1000px); opacity: 0}
    99% {transform: translateX(-2px);}
    100% {transform: translateX(0px); opacity: 1}
}




/*************
 * stroryPage
 *************/
.storyPage.active {animation: flash 5s .5s; }
.storyPage__inner {display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20vh 0 19vh; }
.storyPage__shead {z-index: 2; }
.storyPage__swipeArea {width: 100%; }
.storyPage__swipeBase {position: relative; z-index: 2; max-width: 1560px; height: 450px; margin: auto; padding: 0 280px; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%); transition: 1s padding;}
.storyPage__swipeBase .swiper-slide {padding: 0 50px; }
.storyPage__swiper {min-height: 80px; }

.storyPage__deco {position: absolute; left: 50%; top: 230px; transform: translate(-300px, 1000px) rotate(-800deg); width: 275px; height: 163px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/deco_bullet1.png); }
.active .storyPage__deco {transform: translate(-1350px, -900px); transition: 1s transform .3s ease-out;}

.storyPage__deco2,
.storyPage__deco3 {position: absolute;  width: 813px; height: 155px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/deco_bullet4.png); opacity: 0; }
.storyPage__deco2 {left: 200px; top: 115px; transform: translateX(-1000px)}
.storyPage__deco3 {left: 200px; top: 115px; transform: translateX(-1000px)}
.active .show .storyPage__deco2,
.active .show .storyPage__deco3 {transform: translateX(0); opacity: 1; transition: all 1s cubic-bezier(.09,.75,.12,.98) .5s; }
.storyPage__deco3 {left: 220px; top: 210px; }


@keyframes flash {
    0% {filter: brightness(1)}
    25% {filter: brightness(1)}
    30% {filter: brightness(1.5)}
    45% {filter: brightness(1)}
    60% {filter: brightness(1)}
    65% {filter: brightness(1.8)}
    100% {filter: brightness(1)}
}

@keyframes flash2 {
    0% {filter: brightness(1)}
    15% {filter: brightness(1)}
    20% {filter: brightness(1.35)}
    35% {filter: brightness(1)}
    37% {filter: brightness(1.1)}
    40% {filter: brightness(1)}
    45% {filter: brightness(1)}
    47% {filter: brightness(1.1)}
    50% {filter: brightness(1)}
    55% {filter: brightness(1.3)}
    100% {filter: brightness(1)}
}


/*************
 * jobPage
 *************/
.jobPage.active {animation: flash 7s .5s; }
.jobPage__inner {padding-top: 20vh; height: auto; }
.jobPage__shead {margin-bottom: 20px; z-index: 2; }
/*.jobPage__img {height: 65vh; max-height: 734px; }*/
/*.jobPage__img2 {height: 60vh; max-height: 584px; }*/
.jobPage__tabArea {position: relative; height: 860px;}
.jobPage__tabAreaItem {visibility: hidden; opacity: 0; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); transition: .5s all ease-out; z-index: 2;}
.jobPage__tabAreaItem.show {visibility: visible; opacity: 1; }
.jobPage__tabAreaTab {/* position: absolute; top: -72px; left: 50%; transform: translateX(260px); */width: 318px; height: 40px; margin: auto; background: url(https://static.ncsoft.jp/lineageM/event/1911update/jobTab.png); cursor: pointer; }
.jobPage__tabAreaTab.tab2 {background-position: 0 -100px;}

.jobPage__btn {height: 5.8vh; max-height: 62px; }

.jobPage__deco {position: absolute; left: 50%; top: 230px; transform: translate(300px, 900px); width: 128px; height: 169px; }
.jobPage__deco::after {content: ""; display: block; width: 100%; height: 100%; background: url(https://static.ncsoft.jp/lineageM/event/1911update/deco_bullet2.png); transform: rotate(0) }
.active .jobPage__deco {transform: translate(1060px, -700px); transition: 1.5s transform .3s ease-out;}
.active .jobPage__deco::after {transform: rotate(2000deg); transition: transform 1.5s ease-out; }







/*************
 * transformPage
 *************/
.transformPage.active {animation: flash 5s .5s; }
.transformPage__inner {display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20vh 0 15vh; }
.transformPage__shead {z-index: 2; }
.transformPage__swipeArea {position: relative; width: 100%; }
.transformPage__swipeBase {position: relative; display: flex; justify-content: center; align-items: center; max-width: 1000px; height: 310px; margin: auto; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%); z-index: 2;}

.transformPage__title {visibility: hidden; opacity: 0; position: absolute; top: -80px; left: 50%; transform: translateX(0); transition: .3s all; z-index: 2; }
.transformPage__title.show {visibility: visible; opacity: 1; transform: translateX(200px); }

.transformPage__cha {visibility: hidden; opacity: 0; transition: .5s visibility, .5s opacity; }
.active .transformPage__cha.show {visibility: visible; opacity: 1; }

.transformPage__cha1 {position: absolute; top: 0; left: 50%; transform: translate(-1070px, 500px) scaleY(1.3); filter: brightness(0); transition: 1.5s all .4s cubic-bezier(.1,.73,.39,1.12); }
.transformPage__cha2 {position: absolute; top: 12vh; left: 50%; transform: translate(-1070px, 500px) scaleY(1.3); filter: brightness(0); transition: 1.5s all .4s cubic-bezier(.1,.73,.39,1.12); }
.transformPage__cha3 {position: absolute; top: 6vh; left: 50%; transform: translate(-990px, 500px) scaleY(1.3); filter: brightness(0); transition: 1.5s all .4s cubic-bezier(.1,.73,.39,1.12); }

.transformPage__svgWrapper {position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 11.875%; }
.transformPage__svg {width: 100%; height: 100%; }

.active .transformPage__cha1.show {transform: translate(-870px, 0) scaleY(1); filter: brightness(1)}

.active .transformPage__cha2.show {transform: translate(-870px, 0) scaleY(1); filter: brightness(1)}
.active .transformPage__cha3.show {transform: translate(-790px, 0) scaleY(1); filter: brightness(1)}



.transformPage__deco {position: absolute; left: 50%; top: 230px; transform: translate(200px, 1000px); width: 128px; height: 169px; }
.transformPage__deco::after {content: ""; display: block; width: 100%; height: 100%; background: url(https://static.ncsoft.jp/lineageM/event/1911update/deco_bullet2.png);  transform: rotate(-1700deg) }
.active .transformPage__deco {transform: translate(1500px, -200px); transition: 1s transform .5s ease-out;}
.active .transformPage__deco::after {transform: rotate(0); transition: transform 1.5s ease-out .5s;}


.transformPage__deco2 {position: absolute; left: 50%; top: 200px; transform: translate(-250px, 1000px); width: 262px; height: 196px; }
.transformPage__deco2::after {content: ""; display: block; width: 100%; height: 100%; background: url(https://static.ncsoft.jp/lineageM/event/1911update/deco_bullet3.png); transform: rotate(2000deg) }
.active .transformPage__deco2 {transform: translate(1050px, -500px); transition: 1s transform .5s ease-out;}
.active .transformPage__deco2::after {transform: rotate(0); transition: transform 1.5s ease-out .5s; }




/*************
 * eventPage
 *************/
.eventPage__inner {padding: 20vh 0 5vh}
.transformPage__shead {margin-bottom: 20px; z-index: 2; }


/* コンテンツ内スクロールのバー */
.iScrollIndicator {background-color: rgba(255,255,255,.5) !important; }

/* swiper */
.swiper-button-next, .swiper-button-prev {
    background: rgba(255,255,255,.9);
    width: 50px; height: 50px;
    transform: rotate(45deg);
}
.swiper-button-next:after,
.swiper-button-prev:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #000000 transparent transparent;
    transform: rotate(135deg) translateX(-3px);
}
.swiper-button-prev:after {
    transform: rotate(-45deg) translateX(-3px);
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 1;}
.swiper-button-next.swiper-button-disabled:after, .swiper-button-prev.swiper-button-disabled:after {opacity: .3;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 12px; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 12px; }

.swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 6px;  background: #fff; border-radius: 0; transform: rotate(45deg)}
.storyPage__swiperPagination {position: static; margin-top: 20px;  }
.transformPage__swiperPagination {position: static; margin-top: 20px;  }


/* layer */
.layer.fancybox-content {width: 960px; padding: 0; max-width: 80%; overflow: visible; background: #223540; }
.layer__inner {position: relative; width: 100%; height: 100%; padding: 38px 38px 38px 240px; min-height: 450px; overflow: hidden; }
.layer__kazari {position: absolute; bottom: 0; left: -115px; width: 450px; height: 685px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/popChara.png); transition: .5s all; pointer-events: none; }
.layer__kazariShadow {content: ""; position: absolute; bottom: 0; left: -180px; width: 661px; height: 797px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/popCharaShadow.png); pointer-events: none; }
.layer__cage {background: rgba(255,255,255,.05); padding: 15px; }


/* loading */
.loadingCover {visibility: visible; opacity: 1; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: #000; transition: all 1.7s; z-index: 10; }
.loadingCover.hide {visibility: hidden; opacity: 0; }

.loadingIcon {position: relative; width: 85px; height: 85px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/loadingBase.png); }
.loadingIcon__bullet {opacity: 0; position: absolute; width: 18px; height: 18px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/loadingBullet.png); transition: opacity .2s;}
.loadingIcon__bullet1 {left: 48px; top: 9px;}
.loadingIcon__bullet2 {left: 62px; top: 34px;}
.loadingIcon__bullet3 {left: 48px; top: 58px;}
.loadingIcon__bullet4 {right: 47px; top: 58px;}
.loadingIcon__bullet5 {right: 61px; top: 34px;}
.loadingIcon__bullet6 {right: 47px; top: 9px;}

.loadingIcon.bullet1 .loadingIcon__bullet1 {opacity: 1;}
.loadingIcon.bullet2 .loadingIcon__bullet2 {opacity: 1;}
.loadingIcon.bullet3 .loadingIcon__bullet3 {opacity: 1;}
.loadingIcon.bullet4 .loadingIcon__bullet4 {opacity: 1;}
.loadingIcon.bullet5 .loadingIcon__bullet5 {opacity: 1;}
.loadingIcon.bullet6 .loadingIcon__bullet6 {opacity: 1;}

.loadingText {margin-top: 15px; width: 92px; height: 30px; background: url(https://static.ncsoft.jp/lineageM/event/1911update/loadingText.png) no-repeat; animation: loading .7s steps(4) infinite;}

@keyframes loading {
    to {
        background-position: 0 -400px;
    }
}



@media screen and (max-width: 960px) {
    .layer__kazari,
    .layer__kazariShadow {visibility: hidden; opacity: 0; }
    .layer__inner {padding-left: 38px}
}

@media screen and (max-width: 1400px) {
    .menu {transform: translateY(-50%) scale(0.6); left: 30px; }
    .storyPage__swipeBase {padding: 0 170px;}
}

/*@media screen and (min-width: 1920px) {*/
/*    .page {background-size: 1920px !important; }*/
/*}*/



@keyframes shake {
     0% {transform: translate(0,0); opacity: 0; filter: brightness(100%);}
     5% { transform: translate(-2px, 15px); opacity: 1; filter: brightness(500%);}
     10% { transform: translate(2px, -15px); opacity: 0.2; filter: brightness(300%); }
     15% { transform: translate(0px, 8px); opacity: 0.8; filter: brightness(100%); }
     20% { transform: translate(2px, -8px); opacity: 0.4;  }
     25% { transform: translate(-2px, 4px); opacity: 1; }
     30% { transform: translate(-4px, -4px); }
     35% { transform: translate(2px, 2px); }
     40% { transform: translate(-1px, -2px); }
     45% { transform: translate(2px, 1px); }
     50% { transform: translate(-2px, -1px); }
     55% { transform: translate(1px, 1px); }
     60% { transform: translate(-1px, -1px); }
     65% { transform: translate(1px, 1px); }
     70% { transform: translate(-1px, -1px); }
     75% { transform: translate(1px, 1px); }
     80% { transform: translate(-1px, -1px); }
     85% { transform: translate(1px, 1px) }
     90% { transform: translate(0px, 0px) }
     95% { transform: translate(1px, 1px) }
     100% {transform: translate(0,0) }
 }

@keyframes shake2 {
    0% {transform: translate(0,0); opacity: 0; filter: brightness(100%);}
    2.5% { transform: translate(-2px, 17px); opacity: 1; filter: brightness(500%);}
    5% { transform: translate(2px, -17px); opacity: 0.2; filter: brightness(300%); }
    7.5% { transform: translate(0px, 9px); opacity: 0.8; filter: brightness(100%); }
    10% { transform: translate(2px, -9px); opacity: 0.4;  }
    10.25% { transform: translate(-2px, 5px); opacity: 1; }
    15% { transform: translate(-4px, -5px); }
    17.5% { transform: translate(2px, 2px); }
    20% { transform: translate(-1px, -2px); }
    22.5% { transform: translate(2px, 1px); }
    25% { transform: translate(-2px, -1px); }
    27.5% { transform: translate(1px, 1px); }
    30% { transform: translate(-1px, -1px); }
    32.5% { transform: translate(1px, 1px); }
    35% { transform: translate(-1px, -1px); }
    37.5% { transform: translate(1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    42.5% { transform: translate(1px, 1px) }
    45% { transform: translate(0px, 0px) }
    47.5% { transform: translate(1px, 1px) }
    50% {transform: translate(0,0) }
    52.5% { transform: translate(1px, 1px) }
    55% {transform: translate(0,0) }
    57.5% { transform: translate(1px, 1px) }
    60% {transform: translate(0,0) }
    62.5% { transform: translate(1px, 1px) }
    65% {transform: translate(0,0) }
    67.5% { transform: translate(1px, 1px) }
    70% {transform: translate(0,0) }
    75% { transform: translate(1px, 1px) }
    80% {transform: translate(0,0) }
    85% { transform: translate(0, 1px) }
    90% {transform: translate(0,0) }
    95% { transform: translate(0, 1px) }
    100% {transform: translate(0,0) }
}


@keyframes shake3 {
    0% {transform: translate(0,0); opacity: 0; filter: brightness(100%);}
    2.5% { transform: translate(-2px, 15px); opacity: 1; filter: brightness(200%);}
    5% { transform: translate(2px, -15px); opacity: 0.9; filter: brightness(150%); }
    7.5% { transform: translate(0px, 8px); opacity: 0.95; filter: brightness(180%); }
    10% { transform: translate(2px, -8px); opacity: 0.85; filter: brightness(100%)  }
    12.5% { transform: translate(-2px, 4px); opacity: 1; }
    15% { transform: translate(-4px, -5px); }
    17.5% { transform: translate(2px, 2px); }
    20% { transform: translate(-1px, -2px); }
    22.5% { transform: translate(2px, 1px); }
    25% { transform: translate(-2px, -1px); }
    27.5% { transform: translate(1px, 1px); }
    30% { transform: translate(-1px, -1px); }
    32.5% { transform: translate(1px, 1px); }
    35% { transform: translate(-1px, -1px); }
    37.5% { transform: translate(1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    42.5% { transform: translate(1px, 1px) }
    45% { transform: translate(0px, 0px) }
    47.5% { transform: translate(1px, 1px) }
    50% {transform: translate(0,0) }
    52.5% { transform: translate(1px, 1px) }
    55% {transform: translate(0,0) }
    57.5% { transform: translate(1px, 1px) }
    60% {transform: translate(0,0) }
    62.5% { transform: translate(1px, 1px) }
    65% {transform: translate(0,0) }
    67.5% { transform: translate(1px, 1px) }
    70% {transform: translate(0,0) }
    75% { transform: translate(1px, 1px) }
    80% {transform: translate(0,0) }
    85% { transform: translate(0, 1px) }
    90% {transform: translate(0,0) }
    95% { transform: translate(0, 1px) }
    100% {transform: translate(0,0) }
}