/* ================================================================================================================================== ANIMATIONS ================================================================================================================================== */ /* ---------------------------------------- PC ---------------------------------------- */ /* Q1 */ #pc_Q1_01.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_02.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_03.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_04.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_05.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1.25s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q2 */ #pc_Q2_01.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_02.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_03.anim img{animation-name:slideinInsideTtoB; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_04.anim img{animation-name:slideinInsideRtoL; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_05.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_06.anim img{animation-name:slideinInsideTtoB; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_07.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_08.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_09.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_10.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q3 */ #pc_Q3_01.anim img{animation-name:slideinInsideTtoB; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_02.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_03.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_04.anim img{animation-name:slideinInsideRtoL; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_05.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_06.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:1.25s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q4 */ #pc_Q4_01.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_02.anim img{animation-name:slideinInsideTtoB; animation-duration:0.75s; animation-delay:0.75s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_03.anim img{animation-name:slideinInsideRtoL; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_04.anim img{animation-name:slideinInsideLtoR; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_05.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:1s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_06.anim img{animation-name:slideinInsideBtoT; animation-duration:0.75s; animation-delay:1.25s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* ---------------------------------------- SP ---------------------------------------- */ /* Q1 */ #sp_Q1_01.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_02.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_03.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_04.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_05.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q2 */ #sp_Q2_01.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_02.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_03.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_04.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_05.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_06.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_07.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_08.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_09.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_10.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q3 */ #sp_Q3_01.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_02.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_03.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_04.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_05.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_06.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q4 */ #sp_Q4_01.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_02.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_03.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_04.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_05.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_06.anim{animation-name:slideinBtoT; animation-duration:0.75s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* ================================================================================ for webkit ================================================================================ */ /* ---------------------------------------- PC ---------------------------------------- */ /* Q1 */ #pc_Q1_01.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_02.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_03.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_04.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q1_05.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1.25s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q2 */ #pc_Q2_01.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_02.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_03.anim img{-webkit-animation-name:slideinInsideTtoB; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_04.anim img{-webkit-animation-name:slideinInsideRtoL; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_05.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_06.anim img{-webkit-animation-name:slideinInsideTtoB; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_07.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_08.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_09.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q2_10.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q3 */ #pc_Q3_01.anim img{-webkit-animation-name:slideinInsideTtoB; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_02.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_03.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_04.anim img{-webkit-animation-name:slideinInsideRtoL; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_05.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q3_06.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:1.25s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q4 */ #pc_Q4_01.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_02.anim img{-webkit-animation-name:slideinInsideTtoB; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.75s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_03.anim img{-webkit-animation-name:slideinInsideRtoL; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_04.anim img{-webkit-animation-name:slideinInsideLtoR; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_05.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:1s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #pc_Q4_06.anim img{-webkit-animation-name:slideinInsideBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:1.25s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* ---------------------------------------- SP ---------------------------------------- */ /* Q1 */ #sp_Q1_01.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_02.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_03.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_04.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q1_05.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q2 */ #sp_Q2_01.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_02.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_03.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_04.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_05.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_06.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_07.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_08.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_09.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q2_10.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q3 */ #sp_Q3_01.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_02.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_03.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_04.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_05.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q3_06.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* Q4 */ #sp_Q4_01.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_02.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_03.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_04.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_05.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} #sp_Q4_06.anim{-webkit-animation-name:slideinBtoT; -webkit-animation-duration:0.75s; -webkit-animation-delay:0.5s; -webkit-animation-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);} /* ================================================================================================================================== ANIMATION CLASS ================================================================================================================================== */ /* ================================================================================ animin ================================================================================ */ .animin{ opacity:0; } .animin.anim{ -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .animin img{ display:block; } .animin.inside{ overflow:hidden; opacity:1; -webkit-animation:none; animation:none; } .animin.inside img{ -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; opacity:0; } /* ================================================================================================================================== ANIMATION KEYFRAMES ================================================================================================================================== */ /* ================================================================================ fadein / fadeout ================================================================================ */ /* ---------------------------------------- fadein ---------------------------------------- */ .fadein.anim{ -webkit-animation: fadein 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: fadein 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- fadeout ---------------------------------------- */ .fadeout.anim{ -webkit-animation: fadeout 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: fadeout 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ================================================================================ slidein ================================================================================ */ /* ---------------------------------------- slideinBtoT ---------------------------------------- */ .slideinBtoT.anim{ -webkit-animation: slideinBtoT 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinBtoT 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- slideinLtoR ---------------------------------------- */ .slideinLtoR.anim{ -webkit-animation: slideinLtoR 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinLtoR 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ================================================================================ slideinInside ================================================================================ */ .slideinInsideLtoR.anim, .slideinInsideRtoL.anim, .slideinInsideTtoB.anim, .slideinInsideBtoT.anim{ overflow:hidden; opacity:1; -webkit-animation:none; animation:none; } /* ---------------------------------------- slideinInsideLtoR ---------------------------------------- */ .slideinInsideLtoR.anim img{ -webkit-animation: slideinInsideLtoR 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinInsideLtoR 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- slideinInsideRtoL ---------------------------------------- */ .slideinInsideRtoL.anim img{ -webkit-animation: slideinInsideRtoL 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinInsideRtoL 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- slideinInsideTtoB ---------------------------------------- */ .slideinInsideTtoB.anim img{ -webkit-animation: slideinInsideTtoB 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinInsideTtoB 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- slideinInsideBtoT ---------------------------------------- */ .slideinInsideBtoT.anim img{ -webkit-animation: slideinInsideBtoT 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: slideinInsideBtoT 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ================================================================================ zoomin / zoomout ================================================================================ */ /* ---------------------------------------- zoomin ---------------------------------------- */ .zoomin.anim{ -webkit-animation: zoomin 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: zoomin 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ---------------------------------------- zoomout ---------------------------------------- */ .zoomout.anim{ -webkit-animation: zoomout 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; animation: zoomout 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards; } /* ================================================================================================================================== ANIMATION KEYFRAMES ================================================================================================================================== */ /* ---------------------------------------- fadein ---------------------------------------- */ @-webkit-keyframes fadein{ 0%{ opacity:0;} 100%{ opacity:1;} } @keyframes fadein{ 0%{ opacity:0;} 100%{ opacity:1;} } /* ---------------------------------------- fadeout ---------------------------------------- */ @-webkit-keyframes fadeout{ 0%{ opacity:1;} 100%{ opacity:0;} } @keyframes fadeout{ 0%{ opacity:1;} 100%{ opacity:0;} } /* ================================================================================ slidein ================================================================================ */ /* ---------------------------------------- slideinLtoR ---------------------------------------- */ @-webkit-keyframes slideinLtoR{ 0%{ -webkit-transform:translate3d(-200px,0,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinLtoR{ 0%{ transform:translate3d(-200px,0,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ---------------------------------------- slideinRtoL ---------------------------------------- */ @-webkit-keyframes slideinRtoL{ 0%{ -webkit-transform:translate3d(200px,0,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinRtoL{ 0%{ transform:translate3d(200px,0,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ---------------------------------------- slideinTtoB ---------------------------------------- */ @-webkit-keyframes slideinTtoB{ 0%{ -webkit-transform:translate3d(0,-200px,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinTtoB{ 0%{ transform:translate3d(0,-200px,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ---------------------------------------- slideinBtoT ---------------------------------------- */ @-webkit-keyframes slideinBtoT{ 0%{ -webkit-transform:translate3d(0,200px,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinBtoT{ 0%{ transform:translate3d(0,200px,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ================================================================================ slideinInside ================================================================================ */ /* ---------------------------------------- slideinInsideLtoR ---------------------------------------- */ @-webkit-keyframes slideinInsideLtoR{ 0%{ -webkit-transform:translate3d(-200px,0,0); opacity:0;} 100%{ -webkit-transform:translate3d(0%,0,0); opacity:1;} } @keyframes slideinInsideLtoR{ 0%{ transform:translate3d(-200px,0,0); opacity:0;} 100%{ transform:translate3d(0%,0,0); opacity:1;} } /* ---------------------------------------- slideinInsideRtoL ---------------------------------------- */ @-webkit-keyframes slideinInsideRtoL{ 0%{ -webkit-transform:translate3d(200px,0,0); opacity:0;} 100%{ -webkit-transform:translate3d(0%,0,0); opacity:1;} } @keyframes slideinInsideRtoL{ 0%{ transform:translate3d(200px,0,0); opacity:0;} 100%{ transform:translate3d(0%,0,0); opacity:1;} } /* ---------------------------------------- slideinInsideTtoB ---------------------------------------- */ @-webkit-keyframes slideinInsideTtoB{ 0%{ -webkit-transform:translate3d(0,-200px,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinInsideTtoB{ 0%{ transform:translate3d(0,-200px,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ---------------------------------------- slideinInsideBtoT ---------------------------------------- */ @-webkit-keyframes slideinInsideBtoT{ 0%{ -webkit-transform:translate3d(0,200px,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinInsideBtoT{ 0%{ transform:translate3d(0,200px,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } /* ================================================================================ zoomin / zoomout ================================================================================ */ /* ---------------------------------------- zoomin ---------------------------------------- */ @-webkit-keyframes zoomin{ 0%{ -webkit-transform:scale(0.6); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes zoomin{ 0%{ transform:scale(0.6); opacity:0;} 100%{ transform:scale(1); opacity:1;} } /* ---------------------------------------- zoomout ---------------------------------------- */ @-webkit-keyframes zoomout{ 0%{ -webkit-transform:scale(2); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes zoomout{ 0%{ transform:scale(2); opacity:0;} 100%{ transform:scale(1); opacity:1;} } /* ================================================================================ zoominUp ================================================================================ */ @-webkit-keyframes zoominUp{ 0%{ -webkit-transform:translate3d(0,60%,0) scale(0.5); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0) scale(1); opacity:1;} } @keyframes zoominUp{ 0%{ transform:translate3d(0,60%,0) scale(0.5); opacity:0;} 100%{ transform:translate3d(0,0,0) scale(1); opacity:1;} } /* ================================================================================================================================== for SMARTPHONE ================================================================================================================================== */ @media screen and (max-width: 480px) { /* ---------------------------------------- slideinBtoT ---------------------------------------- */ @-webkit-keyframes slideinBtoT{ 0%{ -webkit-transform:translate3d(0,120px,0); opacity:0;} 100%{ -webkit-transform:translate3d(0,0,0); opacity:1;} } @keyframes slideinBtoT{ 0%{ transform:translate3d(0,120px,0); opacity:0;} 100%{ transform:translate3d(0,0,0); opacity:1;} } }