@charset "utf-8";

/*-------------------------------------------------------------------------------------*
 *     밀리언카지노                                                                      *
 *-------------------------------------------------------------------------------------*/
.logo{
    -webkit-animation: wobble-hor-top 5.8s ease-in-out infinite both;
    animation: wobble-hor-top 5.8s ease-in-out infinite both;
}
@keyframes wobble-hor-top {
    0% {
        -webkit-transform: rotateX(00deg) translateY(00px) translateZ(-100px) skewX(5deg);
        transform: rotateX(00deg) translateY(00px) translateZ(-100px) skewX(5deg);
        opacity: 0;
    }
    20% {
        -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) skewX(0deg);
        transform: rotateX(0deg) translateY(0) translateZ(0) skewX(0deg);
        opacity: 1;
    }
    90% {
        -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) skewX(0deg);
        transform: rotateX(0deg) translateY(0) translateZ(0) skewX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(00deg) translateY(00px) translateZ(-100px) skewX(5deg);
        transform: rotateX(00deg) translateY(00px) translateZ(-100px) skewX(5deg);
        opacity: 0;
    }
}


.left_icon{
    -webkit-animation: left_icon 1.9s ease-in-out infinite both;
    animation: left_icon 1.9s ease-in-out infinite both;
}
@keyframes left_icon{
    0% {
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
    25% {
        -webkit-filter: brightness(1.5);
        filter: brightness(1.5);
    }
    50% {
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
}


.event_wrap li:hover a 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(0.97);
        transform: scale(0.97);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px) brightness(1.0);
        filter: blur(0px) brightness(1.0);
        opacity: 1;
    }
}

/*-------------------------------------------------------------------------------------*
 *  일반적인  슈웅~                                                                         *
 *-------------------------------------------------------------------------------------*/
.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.fadeInUp {
    -webkit-animation-duration: 0.5s;
    animation-duration:  0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.fadeInLeft {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.fadeInRight {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.animated.fadeInline2{
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}



.animated.fadeInUp_his {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInline2 {
    0% {
        -webkit-transform: all 100s;
        transform: all 100s;
        height:1px;	  background:#000;
    }

    to {
        -webkit-transform: all 100s;
        transform: all 100s;
        height:3000px;	 background:#000;
    }
}

@keyframes fadeInline2 {
    0% {
        -webkit-transform: all 100s;
        transform: all 100s;
        height:1px;		 background:#000;
    }

    to {
        -webkit-transform: all 100s;
        transform: all 100s;
        height:3000px;  background:#000;
    }
}

.fadeInline2 {
    -webkit-animation-name: fadeInline2;
    animation-name: fadeInline2;
}



@-webkit-keyframes fadeInUp_his {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp_his {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp_his {
    -webkit-animation-name: fadeInUp_his;
    animation-name: fadeInUp_his;
}
/*-------------------------------------------------------------------------------------*
 *  일반적인                                                                           *
 *-------------------------------------------------------------------------------------*/
/* 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.03);
    }
    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.07); opacity:0.1;
    }
    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;}
}