@charset "utf-8";

/*-------------------------------------------------------------------------------------*
 *   전설 전용                                                                     *
 *-------------------------------------------------------------------------------------*/

.main_game li:hover a, .mini_bet_c a:hover {
	-webkit-animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: puff-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes puff-in-center {
	0% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		-webkit-filter: blur(2px);
		filter: blur(2px);
		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;
	}
}

@keyframes sparkle {
	from {
		background-position: 0% 100%;
	}

	to {
		background-position: 200% 200%;
	}
}

.game_list li:hover .slot_img_div:before {
	animation: sparkle 6s infinite linear;
	background: linear-gradient(90deg, #bb3b3b 0%, #f09595 10%, #bb3b3b 20%, #f09595 30%, #bb3b3b 40%, #f09595 50%, #bb3b3b 60%, #f09595 70%, #bb3b3b 80%, #f09595 90%, #bb3b3b 100%);
	background-size: 300% 300%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 0px;
	filter: blur(5px);
	z-index: -1;
	transform: scale(1.05) translateY(0px);
}

.game_list li:hover a:before {
	animation: sparkle 6s infinite linear;
	background: linear-gradient(90deg, #bb3b3b 0%, #f09595 10%, #bb3b3b 20%, #f09595 30%, #bb3b3b 40%, #f09595 50%, #bb3b3b 60%, #f09595 70%, #bb3b3b 80%, #f09595 90%, #bb3b3b 100%);
	background-size: 300% 300%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 0px;
	filter: blur(5px);
	z-index: -1;
	transform: scale(1.05) translateY(0px);
}

.logo {
	animation-fill-mode: forwards;
	animation-name: slide-in-blurred-top, login_box_title;
	animation-delay: 0s, 0.7s;
	animation-duration: 1s, 5s;
	animation-iteration-count: 1, infinite;
	animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000), ease-in-out;
}

@keyframes slide-in-blurred-top {
	0% {
		-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translateX(-50%);
		transform: translateY(-1000px) scaleY(2.5) scaleX(0.2) translateX(-50%);
		-webkit-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-filter: blur(40px);
		filter: blur(40px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0) scaleY(1) scaleX(1) translateX(-50%);
		transform: translateY(0) scaleY(1) scaleX(1) translateX(-50%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

@keyframes login_box_title {
	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);
	}
}

/*-------------------------------------------------------------------------------------*
 *  일반적인                                                                           *
 *-------------------------------------------------------------------------------------*/
/* 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;
	}
}