/*=======위에서 아래로======*/
/* Y값기준 현재위치에서 -200px 위에서 현재위치로 애니메이션*/
.y_minus200_to0 {
	animation-name: y_minus200_to0;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes y_minus200_to0 
{
	0%		{transform: translateY(-200px);} 
	100%	{transform: translateY(0);}
}

.y_0_to_minus400 {
	animation-name: y_0_to_minus400;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes y_0_to_minus400 
{
	0%		{transform: translateY(0);} 
	100%	{transform: translateY(-400px);}
}

.y_0_to400 { /* 키보드 내릴때 사용함 */
	animation-name: y_0_to400;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes y_0_to400 
{
	0%		{transform: translateY(0);} 
	100%	{transform: translateY(400px);}
}





/*=======아래에서 우로======*/
.y_plus200_to0 {
	animation-name: y_plus200_to0;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes y_plus200_to0 
{
	0%		{transform: translateY(+200px);} 
	100%	{transform: translateY(0);}
}


/*=======왼쪽에서 오른쪽으로======*/
/* X값 기준으로 현재 위치에서 -800px에서 시작해서 현재 위치(0)로 이동한다. */
.x_minus800_to0 {
	animation-name: x_minus800_to0;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes x_minus800_to0 
{
	0%		{transform: translateX(-800px);} 
	100%	{transform: translateX(0);}
}

/*=======오른쪽에서 왼쪽으로======*/
.x_plus800_to0 {
	animation-name: x_plus800_to0;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes x_plus800_to0 
{
	0%		{transform: translateX(+800px);} 
	100%	{transform: translateX(0);}
}

.x_plus1000_to0_1 { /* 상점에서 번개 카드 나오는 순서 */
	animation-name: x_plus1000_to0;
	animation-duration	: 0.2s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
.x_plus1000_to0_2 { /* 상점에서 번개 카드 나오는 순서 */
	animation-name: x_plus1000_to0;
	animation-duration	: 0.4s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
.x_plus1000_to0_3 { /* 상점에서 번개 카드 나오는 순서 */
	animation-name: x_plus1000_to0;
	animation-duration	: 0.6s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
.x_plus1000_to0_4 { /* 상점에서 번개 카드 나오는 순서 */
	animation-name: x_plus1000_to0;
	animation-duration	: 0.8s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes x_plus1000_to0
{
	0%		{transform: translateX(+1000px);} 
	100%	{transform: translateX(0);}
}


.x_0_to_minus800 {
	animation-name: x_0_to_minus800;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes x_0_to_minus800 
{
	0%		{transform: translateX(0);} 
	100%	{transform: translateX(-800px);}
}

.x_0_to_minus1920 {
	animation-name: x_0_to_minus1920;
	animation-duration	: 0.5s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes x_0_to_minus1920 
{
	0%		{transform: translateX(0);} 
	100%	{transform: translateX(-1920px);}
}

/*=======빙글빙글돌게 만들기======*/
.rotate_repeat {
	animation-name: rotate_repeat;
	animation-duration	: 3.0s;  
	animation-iteration-count : infinite;
	animation-timing-function:linear; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes rotate_repeat 
{
	0%		{transform: rotateZ(0deg);} 
	100%	{transform: rotateZ(360deg);}
}

/* ====== focus 깜빡임 구현 ============*/
.focus 
{
  animation: blink2 1s infinite;
}

@keyframes blink1 { /*좀 퍼져 보인다. */
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0px);
  }
}

@keyframes blink2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ====== 팝업창 효과적으로 커지게 하기 ============*/
.popup_show {
	animation-name: popup_show;
	animation-duration	: 0.35s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes  popup_show  
{
	0%		{transform: scale(0.0);} 
	60%		{transform: scale(1.02);} 
	100%	{transform: scale(1.0);}
}

/* ====== mainmenu에서 new tag 커지게 계속하기 ============*/
.new_tag {
	animation-name: new_tag;
	animation-duration	: 0.6s;  
	animation-iteration-count : infinite;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes  new_tag  
{
	0%		{transform: scale(0.7);} 
	50%		{transform: scale(0.9);}
	100%	{transform: scale(0.7);}
}


/*=======mainmneu에서 왼쪽상단 로고 움직이게======*/
.mainmenu_logo {
	animation-name: mainmenu_logo;
	animation-duration	: 6.0s;  
	animation-iteration-count : infinite;
	animation-timing-function:ease-in-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		

}
@keyframes mainmenu_logo 
{
	0%		{transform: translateY(0);} 
	50%		{transform: translateY(50px);} 
	100%	{transform: translateY(0) ;}
}

/*=======mainmneu에서 보물상자,우편함 커지고 좌우 흔들기 ======*/
.mainmenu_mailbox {
	transform-origin: 50% 50%;
	animation-name: mainmenu_mailbox;
	animation-duration	: 0.8s;  
	animation-iteration-count : infinite;
	animation-timing-function:ease-in; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
	
}
@keyframes mainmenu_mailbox 
{
	0%		{transform: rotateZ(-15deg);} 
	50%		{transform: rotateZ(15deg);}
	100%	{transform: rotateZ(-15deg);} 
}

/* ======= loading 화면 구현 ====== 사용안함: 캐릭터 로딩으로 변경함. */
#loading-screen 
{
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-color: rgba(0, 0, 0, 0.7); /* 배경 어둡게 설정 */
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading-text 
{
  margin-top: 0px; /* 아이콘 아래 여백 */
  color: #fff; /* 텍스트 색상 */
  font-size: 18px;
  position : absolute;
}
#loading-icon 
{
  width: 90px;
  height: 90px;
  border: 15px solid #f3f3f3;
  border-top: 15px solid #3498db;
  border-radius: 50%; /* 이게 원으로 만들어 준다. 없으면 사각형이다.*/
  animation: spin 1s linear infinite;
  align-items: center;
}
@keyframes spin 
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}