@charset "utf-8";

/*-------------------------------------------------------------------------------------*
 *   썬더 전용                                                                          *
 *-------------------------------------------------------------------------------------*/
.quick_game li:hover a {
    -webkit-animation: quick_game 0.4s ease-in-out both;
    animation: quick_game 0.4s ease-in-out both;
}

@keyframes quick_game {
    0% {
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }

    100% {
        -webkit-filter: brightness(1.2);
        filter: brightness(1.2);
    }
}

.logo {
    -webkit-animation: login_box_title 3.9s ease-in-out infinite both;
    animation: login_box_title 3.9s ease-in-out infinite both;
}

@keyframes login_box_title {
    0% {
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }

    25% {
        -webkit-filter: brightness(1.7);
        filter: brightness(1.7);
    }

    50% {
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
}

.mc_btn:hover a {
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

.game_list li:hover div, .main_game_list li:hover img {
    -webkit-animation: puff-in-center 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: puff-in-center 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@keyframes puff-in-center {
    0% {
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px) brightness(1.5);
        filter: blur(0px) brightness(1.5);
        opacity: 1;
    }
}

/*-------------------------------------------------------------------------------------*
 *  일반적인                                                                           *
 *-------------------------------------------------------------------------------------*/
/* mouseover1 */
.mouseover1 {
    animation-name: mouseover1;
    -webkit-animation-name: mouseover1;
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@keyframes mouseover1 {
    0% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}


/* mouseover2 */
.mouseover2 {
    animation-name: mouseover2;
    -webkit-animation-name: mouseover2;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    visibility: visible !important;
}

@keyframes mouseover2 {
    0% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1.0;
    }
}


/*-------------------------------------------------------------------------------------*
 *  레이어팝업 띄우는 스타일 시작                                                      *
 *-------------------------------------------------------------------------------------*/
/* 한개의 스타일 */
.popup_style01 {
    animation-name: popup_style01;
    -webkit-animation-name: popup_style01;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes popup_style01 {
    0% {
        transform: scaleY(0.1);
    }

    40% {
        transform: scaleY(1.02);
    }

    60% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(0.98);
    }

    80% {
        transform: scaleY(1.01);
    }

    100% {
        transform: scaleY(1);
    }
}

/* 한개의 스타일 */
.popup_style02 {
    animation-name: popup_style02;
    -webkit-animation-name: popup_style02;
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes popup_style02 {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}

/* 한개의 스타일 */
.popup_style03 {
    animation-name: popup_style03;
    -webkit-animation-name: popup_style03;
    animation-duration: 1.0s;
    -webkit-animation-duration: 1.0s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
}

@keyframes popup_style03 {
    0% {
        transform: scaleX(0.3);
    }

    40% {
        transform: scaleX(1.02);
    }

    60% {
        transform: scaleX(0.98);
    }

    80% {
        transform: scaleX(1.01);
    }

    100% {
        transform: scaleX(0.98);
    }

    80% {
        transform: scaleX(1.01);
    }

    100% {
        transform: scaleX(1);
    }
}

/* 한개의 스타일 */
.popup_style04 {
    animation-name: popup_style04;
    -webkit-animation-name: popup_style04;
    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes popup_style04 {
    0% {
        transform: translateY(-300%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* 한개의 스타일 */
.popup_style05 {
    animation-name: popup_style05;
    -webkit-animation-name: popup_style05;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes popup_style05 {
    0% {
        transform: translateY(-300%) scaleX(4.0);
    }

    100% {
        transform: translateY(0%) scaleX(1);
    }
}

/* 한개의 스타일 */
.popup_style06 {
    animation-name: popup_style06;
    -webkit-animation-name: popup_style06;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes popup_style06 {
    0% {
        transform: translateY(-300%) scaleX(4.0);
    }

    50% {
        transform: translateY(2%) scaleX(1.3);
    }

    100% {
        transform: translateY(0%) scaleX(1);
    }
}



/*-------------------------------------------------------------------------------------*
 *  게임 (큰이미지)                                                                    *
 *-------------------------------------------------------------------------------------*/
/* game1 */
.game1 {
    animation-name: game1;
    -webkit-animation-name: game1;
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    visibility: visible !important;
}

@keyframes game1 {
    0% {
        transform: scale(1) scaleX(1);
    }

    50% {
        transform: scale(1.03) scaleX(1.1);
        box-shadow: #fffc00 2px 2px 30px -1px;
    }

    100% {
        transform: scale(1.05) scaleX(1);
        box-shadow: #3e62e1 2px 2px 30px -1px;
    }
}