#wrap section.fix {position:fixed;top:0px;width: 100%;transition:0.3s;} #wrap section.notfix {position:absolute;top:0px;width: 100%;transition:0.3s;} #wrap section.nobfix {position:absolute;bottom:0px;width: 100%;transition:0.3s;} /* page motion */ .add-upscroll:not(.play-mo) {transform:translateY(70px) ;opacity:0;} .play-mo.add-upscroll ,.play-mo .add-upscroll {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay10 ,.play-mo .add-upscroll.delay10 {animation: add-upscroll 0.8s 0.1s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay20 ,.play-mo .add-upscroll.delay20 {animation: add-upscroll 0.8s 0.2s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay30 ,.play-mo .add-upscroll.delay30 {animation: add-upscroll 0.8s 0.3s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay40 ,.play-mo .add-upscroll.delay40 {animation: add-upscroll 0.8s 0.4s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay50 ,.play-mo .add-upscroll.delay50 {animation: add-upscroll 0.8s 0.5s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay60 ,.play-mo .add-upscroll.delay60 {animation: add-upscroll 0.8s 0.6s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay70 ,.play-mo .add-upscroll.delay70 {animation: add-upscroll 0.8s 0.7s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll.delay80 ,.play-mo .add-upscroll.delay80 {animation: add-upscroll 0.8s 0.8s ease-in-out;animation-fill-mode: both;} @keyframes add-upscroll { 0% {transform:translateY(70px);opacity:0;} 100% {transform: translateY(0px);opacity:1;} } /* page motion */ .add-upscroll2:not(.play-mo) {transform:translateY(70px) ;opacity:0;} .play-mo.add-upscroll2 ,.play-mo .add-upscroll2 {animation: add-upscroll2 0.7s 0s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay10 ,.play-mo .add-upscroll2.delay10 {animation: add-upscroll2 0.8s 0.1s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay20 ,.play-mo .add-upscroll2.delay20 {animation: add-upscroll2 0.8s 0.2s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay30 ,.play-mo .add-upscroll2.delay30 {animation: add-upscroll2 0.8s 0.3s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay40 ,.play-mo .add-upscroll2.delay40 {animation: add-upscroll2 0.8s 0.4s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay50 ,.play-mo .add-upscroll2.delay50 {animation: add-upscroll2 0.8s 0.5s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay60 ,.play-mo .add-upscroll2.delay60 {animation: add-upscroll2 0.8s 0.6s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay70 ,.play-mo .add-upscroll2.delay70 {animation: add-upscroll2 0.8s 0.7s ease-in-out;animation-fill-mode: both;} .play-mo.add-upscroll2.delay80 ,.play-mo .add-upscroll2.delay80 {animation: add-upscroll2 0.8s 0.8s ease-in-out;animation-fill-mode: both;} @keyframes add-upscroll2 { 0% {transform:translateY(70px) perspective(400px) rotateX(20deg);opacity:0;} 100% {transform: translateY(0px) perspective(400px) rotateX(0deg);opacity:1;} } .add-downscroll:not(.play-mo) {transform:translateY(-70px) ;opacity:0;} .play-mo.add-downscroll ,.play-mo .add-downscroll {animation: add-downscroll 0.7s 0.0s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay20 ,.play-mo .add-downscroll.delay20 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay30 ,.play-mo .add-downscroll.delay30 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay40 ,.play-mo .add-downscroll.delay40 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay50 ,.play-mo .add-downscroll.delay50 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay60 ,.play-mo .add-downscroll.delay60 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay70 ,.play-mo .add-downscroll.delay70 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;} .play-mo.add-downscroll.delay80 ,.play-mo .add-downscroll.delay80 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;} @keyframes add-downscroll { 0% {transform: translateY(-70px) ;opacity:0;} 100% {transform: translateY(0px);opacity:1;} } header.show {animation: showMenu 0.3s ease-out;animation-fill-mode: both;} @keyframes showMenu { 100%{ opacity:1; top:0px; } } .leftorg { transform-origin: left center; } .rightorg { transform-origin: right center; } .add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;} .play-mo.add-qzoom ,.play-mo .add-qzoom {animation: add-qzoom 1.5s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay10 ,.play-mo .add-qzoom.delay10 {animation: add-qzoom 0.7s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay20 ,.play-mo .add-qzoom.delay20 {animation: add-qzoom 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay30 ,.play-mo .add-qzoom.delay30 {animation: add-qzoom 0.7s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay40 ,.play-mo .add-qzoom.delay40 {animation: add-qzoom 0.7s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay50 ,.play-mo .add-qzoom.delay50 {animation: add-qzoom 0.7s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay60 ,.play-mo .add-qzoom.delay60 {animation: add-qzoom 0.7s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay70 ,.play-mo .add-qzoom.delay70 {animation: add-qzoom 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} .play-mo.add-qzoom.delay80 ,.play-mo .add-qzoom.delay80 {animation: add-qzoom 0.7s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} @keyframes add-qzoom { 0% {transform: scale(0.8);opacity:0;} 50% {transform: scale(0.9);opacity:0;} 100% {transform: scale(1);opacity:1;} } .aware-button { -webkit-transition: -webkit-transform 3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 3s cubic-bezier(0.34, 1.56, 0.64, 1); } .aware-button.top, .aware-button.right, .aware-button.bottom, .aware-button.left { transition:0.5s ease-in-out; } .aware-button.top { transform: translateY(20px); } .aware-button.right{ transform: translateX(-20px); } .aware-button.bottom { transform: translateY(-20px); } .aware-button.left { transform: translateX(20px); } .aware-button:focus { transform: scale(1.1); } @keyframes target_image { 0%{ transform: translateY(0px); } 100%{ transform: translateY(10px); } } .add-fade-left:not(.play-mo){ transform: translateX(-100px) ;opacity:0; } .play-mo.add-fade-left,.play-mo .add-fade-left { animation: add-fade-left 0.7s 0s ease-in-out;animation-fill-mode: both; } @keyframes add-fade-left { 0%{ transform: translateX(-200px) perspective(400px) rotateY(-20deg);opacity:0; } 100%{ transform: translateX(0px) perspective(400px) rotateY(0deg);opacity:1; } } .add-fade-right:not(.play-mo){ transform: translateX(100px) ;opacity:0; } .play-mo.add-fade-right,.play-mo .add-fade-right { animation: add-fade-right 0.7s 0s ease-in-out;animation-fill-mode: both; } @keyframes add-fade-right { 0%{ transform: translateX(100px) perspective(400px) rotateY(20deg);opacity:0; } 100%{ transform: translateX(0px) perspective(400px) rotateY(0deg);opacity:1; } } .play-mo t{will-change: transform} .typing_txt:not(.play-mo) t {opacity:0;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(1) {animation: add-typing_txt 0.1s 0.0s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(2) {animation: add-typing_txt 0.1s 0.05s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(3) {animation: add-typing_txt 0.1s 0.1s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(4) {animation: add-typing_txt 0.1s 0.15s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(5) {animation: add-typing_txt 0.1s 0.20s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(6) {animation: add-typing_txt 0.1s 0.25s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(7) {animation: add-typing_txt 0.1s 0.3s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(8) {animation: add-typing_txt 0.1s 0.35s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(9) {animation: add-typing_txt 0.1s 0.4s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(10) {animation: add-typing_txt 0.1s 0.45s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(11) {animation: add-typing_txt 0.1s 0.5s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(12) {animation: add-typing_txt 0.1s 0.55s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(13) {animation: add-typing_txt 0.1s 0.6s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(14) {animation: add-typing_txt 0.1s 0.65s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(15) {animation: add-typing_txt 0.1s 0.7s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(16) {animation: add-typing_txt 0.1s 0.75s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(17) {animation: add-typing_txt 0.1s 0.8s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(18) {animation: add-typing_txt 0.1s 0.85s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(19) {animation: add-typing_txt 0.1s 0.9s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(20) {animation: add-typing_txt 0.1s 0.95s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(21) {animation: add-typing_txt 0.1s 1.0s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(22) {animation: add-typing_txt 0.1s 1.05s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(23) {animation: add-typing_txt 0.1s 1.1s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(24) {animation: add-typing_txt 0.1s 1.15s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(25) {animation: add-typing_txt 0.1s 1.20s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(26) {animation: add-typing_txt 0.1s 1.25s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(27) {animation: add-typing_txt 0.1s 1.3s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(28) {animation: add-typing_txt 0.1s 1.35s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(29) {animation: add-typing_txt 0.1s 1.4s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(30) {animation: add-typing_txt 0.1s 1.45s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(31) {animation: add-typing_txt 0.1s 1.50s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(32) {animation: add-typing_txt 0.1s 1.55s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(33) {animation: add-typing_txt 0.1s 1.60s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(34) {animation: add-typing_txt 0.1s 1.65s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(35) {animation: add-typing_txt 0.1s 1.70s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(36) {animation: add-typing_txt 0.1s 1.75s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(37) {animation: add-typing_txt 0.1s 1.80s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(38) {animation: add-typing_txt 0.1s 1.85s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(39) {animation: add-typing_txt 0.1s 1.90s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(40) {animation: add-typing_txt 0.1s 1.95s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(41) {animation: add-typing_txt 0.1s 2.0s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(42) {animation: add-typing_txt 0.1s 2.05s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(43) {animation: add-typing_txt 0.1s 2.1s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(44) {animation: add-typing_txt 0.1s 2.15s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(45) {animation: add-typing_txt 0.1s 2.20s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(46) {animation: add-typing_txt 0.1s 2.25s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(47) {animation: add-typing_txt 0.1s 2.3s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(48) {animation: add-typing_txt 0.1s 2.35s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(49) {animation: add-typing_txt 0.1s 2.4s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(50) {animation: add-typing_txt 0.1s 2.45s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(51) {animation: add-typing_txt 0.1s 2.50s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(52) {animation: add-typing_txt 0.1s 2.55s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(53) {animation: add-typing_txt 0.1s 2.60s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(54) {animation: add-typing_txt 0.1s 2.65s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(55) {animation: add-typing_txt 0.1s 2.70s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(56) {animation: add-typing_txt 0.1s 2.75s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(57) {animation: add-typing_txt 0.1s 2.80s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(58) {animation: add-typing_txt 0.1s 2.85s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(59) {animation: add-typing_txt 0.1s 2.90s ease-in-out both;} .play-mo.typing_txt ,.play-mo .typing_txt t:nth-of-type(60) {animation: add-typing_txt 0.1s 2.95s ease-in-out both;} @keyframes add-typing_txt { 0% {opacity:0;} 100% {opacity:1;} } #wrap section.headingWrap.fix {position:fixed;bottom:0px;width: 100%;} #wrap section.headingWrap.nofix {position:absolute;bottom:0px;width: 100%;} [data-step] {opacity:0;} @keyframes step02_A { 100% {transform: scale(1);opacity:1;} } @keyframes step02_B { 100% {transform: scale(0.2);opacity:1;} } @keyframes step02_N { 100% {transform: scale(0);opacity:0;} } @keyframes step02_M { 100% {transform: translate(72px,50px) ;} } @keyframes step02_M2 { 100% {transform: translate(293px,187px) ;} } @keyframes step_M { 100% {transform: translate(0px,0px);} } @keyframes step_M2 { 100% {transform: translate(152px,0px);} } @keyframes step_fadeIn { 100% {opacity:1;} } @keyframes step_fadeOut { 100% {opacity:0;} } @keyframes step_show { 100% {transform: translateY(0px);opacity:1;} } @keyframes step_hide { 100% {transform: translateY(72px);opacity:0;} } .check__area .check-item .icon_check {transform:scale(0);opacity:0;} .check__area .check-item .check_active {opacity:0;} .check__area .check-item.active .icon_check { animation: show_btn 0.7s ease-in-out;animation-fill-mode: both; } .check__area .check-item.active .check_active {animation: show_btn2 0.3s ease-in-out;animation-fill-mode: both;} @keyframes show_btn { 50% {transform: scale(1.5);opacity:1;} 100% {transform: scale(1);opacity:1;} } @keyframes show_btn2 { 100% {opacity:1;} } .heading_title li {transform:scaleY(0);} .heading_title .top li:nth-of-type(1) {animation: show_typing 0.1s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(2) {animation: show_typing 0.1s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(3) {animation: show_typing 0.1s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(4) {animation: show_typing 0.1s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(5) {animation: show_typing 0.1s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(6) {animation: show_typing 0.1s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .top li:nth-of-type(7) {animation: show_typing 0.1s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(1) {animation: show_typing 0.1s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(2) {animation: show_typing 0.1s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(3) {animation: show_typing 0.1s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(4) {animation: show_typing 0.1s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(5) {animation: show_typing 0.1s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(6) {animation: show_typing 0.1s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(7) {animation: show_typing 0.1s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(8) {animation: show_typing 0.1s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;} .heading_title .bottom li:nth-of-type(9) {animation: show_typing 0.1s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;} @keyframes show_typing { 0% {transform: scale(0.9);opacity:0;} 100% {transform: scale(1);opacity:1;} } .link_tutorial {animation: show_link_tutorial 0.9s 2.5s cubic-bezier(0.85, 0, 0.15, 1);animation-fill-mode: both;opacity:0;transition:0.3s ;} @keyframes show_link_tutorial { 0% {transform: scale(0.5);opacity:0;} 100% {transform: scale(1);opacity:1;} } .link_tutorial:hover d:nth-of-type(1){animation: show_link_tutorial_hover 0.2s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(2){animation: show_link_tutorial_hover 0.2s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(3){animation: show_link_tutorial_hover 0.2s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(4){animation: show_link_tutorial_hover 0.2s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(5){animation: show_link_tutorial_hover 0.2s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(6){animation: show_link_tutorial_hover 0.2s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(7){animation: show_link_tutorial_hover 0.2s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(8){animation: show_link_tutorial_hover 0.2s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} .link_tutorial:hover d:nth-of-type(9){animation: show_link_tutorial_hover 0.2s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;} /* @keyframes show_link_tutorial_hover { 0% {transform: scale(1);} 100% {transform: scale(1.3);} } */ .headMotion__area .motion_slide {animation: flipInXX 0.9s 2.5s ease-in-out;animation-fill-mode: both;opacity:0;} @keyframes flipInXX{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes flipInX{ 0%{transform:perspective(400px) rotateX(-10deg) translateY(500px);opacity:0;} 100%{transform:perspective(400px) rotateX(0deg) translateY(0px);opacity:1;} } .onBoardingWrap .onBoarding__list li div{transition:0.3s ;} /*.onBoardingWrap .onBoarding__list li:hover div{animation: flipInX2 0.8s 0.0s ease-in-out alternate both; }*/ onBoarding__list li:nth-of-type(1){transform:perspective(400px) rotateY(30deg);} @keyframes flipInX2{ 0%{transform:perspective(400px) rotateX(30deg);} 40%{transform:perspective(400px) rotateX(-10deg);} 70%{transform:perspective(400px) rotateX(10deg)} 100%{transform:perspective(400px) rotateX(0deg)}} } @keyframes flipOutX{ 0%{transform:perspective(400px) rotateX(0deg);opacity:1} 100%{transform:perspective(400px) rotateX(90deg);opacity:0} } .play-mo.add-card li:nth-of-type(1) {animation: show_card 0.8s 0.4s cubic-bezier(0, 0.55, 0.45, 1) both;} .play-mo.add-card li:nth-of-type(2) {animation: show_card 0.8s 0.3s cubic-bezier(0, 0.55, 0.45, 1) both;} .play-mo.add-card li:nth-of-type(3) {animation: show_card 0.8s 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} .play-mo.add-card li:nth-of-type(4) {animation: show_card 0.8s 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;} .play-mo.add-card li:nth-of-type(5) {animation: show_card 0.8s 0.0s cubic-bezier(0, 0.55, 0.45, 1) both;} @keyframes show_card{ 0%{} 60%{transform:perspective(400px) translateX(0) rotateY(-10deg);} 100%{transform:perspective(400px) translateX(0) rotateY(0deg);} } .add_card {transform:perspective(400px) rotateY(-10deg) scale(0.93);transition:0.3s ;} .welcomeBoard__area {} .welcomeBoard__area.play-mo { transform: scale(0.5);opacity:0;display:block; animation: pan_zoom 1.5s alternate both; } @keyframes pan_zoom { 0% {opacity:0; } 100% {transform: scale(1);opacity:1;} } .welcomeBoard__area .board-list .active { opacity:0; } .welcomeBoard__area.play-mo .board-list .items01.active { animation: icon_zoom 0.5s 2s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } .welcomeBoard__area.play-mo .board-list .items02.active { animation: icon_zoom 0.5s 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } .welcomeBoard__area.play-mo .board-list .items03.active { animation: icon_zoom 0.5s 3s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } .welcomeBoard__area.play-mo .board-list .items04.active { animation: icon_zoom 0.5s 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } .welcomeBoard__area.play-mo .board-list .items05.active { animation: icon_zoom 0.5s 4s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } .welcomeBoard__area.play-mo .board-list .items06.active { animation: icon_zoom 0.5s 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) alternate both; } @keyframes icon_zoom { 0% {opacity:0; } 20% {transform: scale(1);opacity:0.5;} 40% {transform: scale(1);opacity:1;} 70% {transform: scale(1);opacity:0.5;} 100% {transform: scale(1);opacity:1;} } .surveyWrap .survey__text:after {animation: icon_light 0.5s .3s alternate infinite;} @keyframes icon_light { 0% {transform: scale(1.0);opacity:0;} 100% {transform: scale(1.0);opacity:0.8;} } .glitchAni .ani {opacity:0;} .glitchAni .ani.bom1{animation: sow_pom1 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom2{animation: sow_pom2 0.3s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom3{animation: sow_pom3 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom4{animation: sow_pom4 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom5{animation: sow_pom5 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom6{animation: sow_pom6 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom7{animation: sow_pom7 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom8{animation: sow_pom8 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom9{animation: sow_pom9 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;} .glitchAni .ani.bom10{animation: sow_pom10 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;} @keyframes sow_pom1 { 0% {transform: scale(0.8); opacity:0; } 100% {transform: scale(1.1);opacity:1;} } @keyframes sow_pom2 { 0% {transform: scale(0.8); opacity:0; } 100% {transform: scale(1.3);opacity:1;} } @keyframes sow_pom3 { 0% {transform: scale(0.8); opacity:0; } 100% {transform: scale(1.2);opacity:1;} } @keyframes sow_pom4 { 0% {transform: scale(0.8); opacity:0; } 100% {transform: scale(0.8);opacity:1;} } @keyframes sow_pom5 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(0.9);opacity:1;} } @keyframes sow_pom6 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(1);opacity:1;} } @keyframes sow_pom { 0% {transform: scale(0.8); opacity:0; } 100% {transform: scale(1.1);opacity:1;} } @keyframes sow_pom7 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(1.2);opacity:1;} } @keyframes sow_pom8 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(1.3);opacity:1;} } @keyframes sow_pom9 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(1.4);opacity:1;} } @keyframes sow_pom10 { 0% {transform: scale(0); opacity:0; } 100% {transform: scale(1.5);opacity:1;} } .welcomeWrap .cover {animation: ani-hide 0.1s;opacity:0;} .welcomeWrap .text01 {animation: ani-sl-hide 0.1s;opacity:0;transform: translateY(70px);} .welcomeWrap .text02 {animation: ani-sl-hide 0.1s;opacity:0;transform: translateY(70px);} .welcomeWrap .text03 {animation: ani-sl-hide 0.1s;opacity:0;transform: translateY(70px);} .welcomeWrap .text04 {animation: ani-sl-hide 0.1s;opacity:0;transform: translateY(70px);} @keyframes cover_show { 0% { opacity:0; } 100% { opacity:1;} } @keyframes ani-show { 100% { opacity:1;} } @keyframes ani-sl-show { 100% {transform: translateY(0px);opacity:1;} } @keyframes ani-hide { 0% { opacity:1;} 100% { opacity:0;} } @keyframes ani-sl-hide { 0% {transform: translateY(0px);opacity:1;} 100% {transform: translateY(70px);opacity:0;} } .benefitWrap .benefitSlide .swiper-slide.active {animation: show_card 0.6s;} @keyframes show_card { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } .slick-dots li {display: none;transition:0.3s ease-out} @keyframes hide_qt { 100% {display: none;} } .slick-dots .slick-active{display: block;transform: scale(1);} .slick-dots .slick-active-left1{display: block;transform: scale(0.7);} .slick-dots .slick-active-left2{display: block;transform: scale(0.3);} .slick-dots .slick-active-right1{display: block;transform: scale(0.7);} .slick-dots .slick-active-right2{display: block;transform: scale(0.3);} .slick-dots .slick-active{display: block;} @keyframes show_qt { 100% {display: block;} }