.eena.active{transition:.2s ease;animation:eena_active .3s}@keyframes eena_active{ 0%{ transform: scale(1);} 25%{ transform: scale(1.2);} 50%{ transform: scale(0.95);} }.anim_wrap{position:absolute;top:0;left:0;width:100%;height:100%}.anim_wrap .heart{color:#eb0808;margin:0;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;text-align:center;position:absolute;width:100%;height:100%}.anim_wrap .heart img{width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.anim_wrap.is-show .heart{animation:bobble 1.2s;animation-delay:.2s;animation-fill-mode:both;opacity:1;z-index:2}@keyframes bobble { 0% { transform: translate(-50%,-50%) scale(0, 0); color: #ff6464; opacity: 1;} 10% { transform: translate(-50%,-50%) scale(1.3, 1.3); opacity: 1;} 15% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;} 50% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 0;} }.anim_wrap.is-show .heart span{position:absolute;font-size:10px;font-weight:bold;white-space:nowrap;color:#fff;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-9deg)}.anim_wrap:after,.anim_wrap:before{border-radius:50%;content:"";display:block;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;z-index:1;width:100px;height:100px}.anim_wrap.is-show:before{animation:character-defaultAnim-before .3s!important}.anim_wrap.is-show:after{animation:character-defaultAnim-after .3s!important}#contTopics .anim_wrap.is-show:before,#contRanking .anim_wrap.is-show:before,#contCharacter .anim_wrap.is-show:before{animation:character-defaultAnim-before2 .3s!important}#contTopics .anim_wrap.is-show:after,#contRanking .anim_wrap.is-show:after,#contCharacter .anim_wrap.is-show:after{animation:character-defaultAnim-after2 .3s!important}@keyframes character-defaultAnim-before { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #7de8dc; opacity: 1;} 50% {background-color: #7de8dc;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #4dcdd4; opacity: 0;} }@keyframes character-defaultAnim-after { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;} 50% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff; opacity: 0;} }@keyframes character-defaultAnim-before2 { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;} 50% {background-color: #fff;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff; opacity: 0;} }@keyframes character-defaultAnim-after2 { 0% { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0; opacity: 1;} 50% { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0;} 99% { opacity: 1;} 100% { transform: translate(-50%,-50%) scale(1, 1); background-color: #c2eef0; opacity: 0;} }.anim_wrap .bobble_particle{width:100%;height:100%;position:absolute;top:0;left:0}.anim_wrap .bobble_particle i{border-radius:50%;display:block;width:30px;height:30px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);opacity:0}@media only screen and (max-width:768px){.anim_wrap .bobble_particle i{width:5vw;height:5vw}}.anim_wrap.is-show .bobble_particle i{transition:.2s;opacity:1}.anim_wrap.is-show .bobble_particle i:nth-child(1){animation:bobble_particle_01 1s ease-out .3s}@keyframes bobble_particle_01 { 0% { transform: rotate(10deg) translate(200px, 0); background-color: #f7cbb2;} 80% { transform: rotate(10deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #f7cbb2;} }.anim_wrap.is-show .bobble_particle i:nth-child(2){animation:bobble_particle_02 1s ease-out .3s}@keyframes bobble_particle_02 { 0% { transform: rotate(70deg) translate(200px, 0); background-color: #b7daf2;} 80% { transform: rotate(70deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} }.anim_wrap.is-show .bobble_particle i:nth-child(3){animation:bobble_particle_03 1s ease-out .3s}@keyframes bobble_particle_03 { 0% { transform: rotate(130deg) translate(200px, 0); background-color: #fbdf84;} 80% { transform: rotate(130deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} }.anim_wrap.is-show .bobble_particle i:nth-child(4){animation:bobble_particle_04 1s ease-out .3s}@keyframes bobble_particle_04 { 0% { transform: rotate(190deg) translate(200px, 0); background-color: #f7cbb2;} 80% { transform: rotate(190deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #f09664;} }.anim_wrap.is-show .bobble_particle i:nth-child(5){animation:bobble_particle_05 1s ease-out .3s}@keyframes bobble_particle_05 { 0% { transform: rotate(250deg) translate(200px, 0); background-color: #b7daf2;} 80% { transform: rotate(250deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} }.anim_wrap.is-show .bobble_particle i:nth-child(6){animation:bobble_particle_06 1s ease-out .3s}@keyframes bobble_particle_06 { 0% { transform: rotate(310deg) translate(200px, 0); background-color: #fbdf84;} 80% { transform: rotate(310deg) translate(20px, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(1){animation:bobble_particle2_02 1s ease-out .3s forwards}@keyframes bobble_particle2_01 { 0% { transform: rotate(20deg) translate(200px, 0); background-color: #f7cbb2;} 40% { transform: rotate(20deg) translate(205px, 0); } 60%,100% { transform: rotate(20deg) translate(205px, 0); width: 0; height: 0; background-color: #f7cbb2;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(2){animation:bobble_particle2_03 1s ease-out .3s forwards}@keyframes bobble_particle2_02 { 0% { transform: rotate(80deg) translate(200px, 0); background-color: #b7daf2;} 40% { transform: rotate(80deg) translate(205px, 0); } 60%,100% { transform: rotate(80deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(3){animation:bobble_particle2_04 1s ease-out .3s forwards}@keyframes bobble_particle2_03 { 0% { transform: rotate(140deg) translate(200px, 0); background-color: #fbdf84;} 40% { transform: rotate(140deg) translate(205px, 0); } 60%,100% { transform: rotate(140deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(4){animation:bobble_particle2_05 1s ease-out .3s forwards}@keyframes bobble_particle2_04 { 0% { transform: rotate(200deg) translate(200px, 0); background-color: #f7cbb2;} 40% { transform: rotate(200deg) translate(205px, 0); } 60%,100% { transform: rotate(200deg) translate(205px, 0); width: 0; height: 0; background-color: #f09664;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(5){animation:bobble_particle2_06 1s ease-out .3s forwards}@keyframes bobble_particle2_05 { 0% { transform: rotate(260deg) translate(200px, 0); background-color: #b7daf2;} 40% { transform: rotate(260deg) translate(205px, 0); } 60%,100% { transform: rotate(260deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;} }.anim_wrap.is-show .bobble_particle2 i:nth-child(6){animation:bobble_particle2_01 1s ease-out .3s forwards}@keyframes bobble_particle2_06 { 0% { transform: rotate(320deg) translate(200px, 0); background-color: #fbdf84;} 40% { transform: rotate(320deg) translate(205px, 0); } 60%,100% { transform: rotate(320deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;} }@keyframes bobble_particle_01_sp { 0% { transform: rotate(10deg) translate(25vw, 0); background-color: #f7cbb2;} 80% { transform: rotate(10deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #f7cbb2;} }@keyframes bobble_particle_02_sp { 0% { transform: rotate(70deg) translate(25vw, 0); background-color: #b7daf2;} 80% { transform: rotate(70deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} }@keyframes bobble_particle_03_sp { 0% { transform: rotate(130deg) translate(25vw, 0); background-color: #fbdf84;} 80% { transform: rotate(130deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} }@keyframes bobble_particle_04_sp { 0% { transform: rotate(190deg) translate(25vw, 0); background-color: #f7cbb2;} 80% { transform: rotate(190deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #f09664;} }@keyframes bobble_particle_05_sp { 0% { transform: rotate(250deg) translate(25vw, 0); background-color: #b7daf2;} 80% { transform: rotate(250deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #6eb4e6;} }@keyframes bobble_particle_06_sp { 0% { transform: rotate(310deg) translate(25vw, 0); background-color: #fbdf84;} 80% { transform: rotate(310deg) translate(2vw, 0); } 100% { width: 0; height: 0; background-color: #fac80f;} }@keyframes bobble_particle2_01_sp { 0% { transform: rotate(20deg) translate(25vw, 0); background-color: #f7cbb2;} 40% { transform: rotate(20deg) translate(27vw, 0); } 60%,100% { transform: rotate(20deg) translate(27vw, 0); width: 0; height: 0; background-color: #f7cbb2;} }@keyframes bobble_particle2_02_sp { 0% { transform: rotate(80deg) translate(25vw, 0); background-color: #b7daf2;} 40% { transform: rotate(80deg) translate(27vw, 0); } 60%,100% { transform: rotate(80deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;} }@keyframes bobble_particle2_03_sp { 0% { transform: rotate(140deg) translate(25vw, 0); background-color: #fbdf84;} 40% { transform: rotate(140deg) translate(27vw, 0); } 60%,100% { transform: rotate(140deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;} }@keyframes bobble_particle2_04_sp { 0% { transform: rotate(200deg) translate(25vw, 0); background-color: #f7cbb2;} 40% { transform: rotate(200deg) translate(27vw, 0); } 60%,100% { transform: rotate(200deg) translate(27vw, 0); width: 0; height: 0; background-color: #f09664;} }@keyframes bobble_particle2_05_sp { 0% { transform: rotate(260deg) translate(25vw, 0); background-color: #b7daf2;} 40% { transform: rotate(260deg) translate(27vw, 0); } 60%,100% { transform: rotate(260deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;} }@keyframes bobble_particle2_06_sp { 0% { transform: rotate(320deg) translate(25vw, 0); background-color: #fbdf84;} 40% { transform: rotate(320deg) translate(27vw, 0); } 60%,100% { transform: rotate(320deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;} }@media only screen and (max-width:768px){.anim_wrap.is-show .bobble_particle i:nth-child(1){animation:bobble_particle_01_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle i:nth-child(2){animation:bobble_particle_02_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle i:nth-child(3){animation:bobble_particle_03_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle i:nth-child(4){animation:bobble_particle_04_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle i:nth-child(5){animation:bobble_particle_05_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle i:nth-child(6){animation:bobble_particle_06_sp 1s ease-out .3s}.anim_wrap.is-show .bobble_particle2 i:nth-child(1){animation:bobble_particle2_02_sp 1s ease-out .3s forwards}.anim_wrap.is-show .bobble_particle2 i:nth-child(2){animation:bobble_particle2_03_sp 1s ease-out .3s forwards}.anim_wrap.is-show .bobble_particle2 i:nth-child(3){animation:bobble_particle2_04_sp 1s ease-out .3s forwards}.anim_wrap.is-show .bobble_particle2 i:nth-child(4){animation:bobble_particle2_05_sp 1s ease-out .3s forwards}.anim_wrap.is-show .bobble_particle2 i:nth-child(5){animation:bobble_particle2_06_sp 1s ease-out .3s forwards}.anim_wrap.is-show .bobble_particle2 i:nth-child(6){animation:bobble_particle2_01_sp 1s ease-out .3s forwards}}