*{
	padding: 0;
	margin: 0;
	border: 0;
}


@font-face{ 
	font-family: 'YUniverse-B'; 
	src: url("../font/YUniverse-B.ttf") format("truetype"); 
}

/* Layout */

body
{
	width: 1920px;
	height: 1080px;
	/*background: black;*/
	/*background:url("../image/2_logo/BUSIDOL_LOGO1280x720x75p.png") no-repeat 0 0;*/ /* SKB의 경우만 이렇게 한다. */
	/*background:url("../image/logo/gamelogo_bg_white.png") no-repeat 0 0;*/ /* AMO의경우 저사양폰의 white화면 제거를 위해 사용 */
	overflow:hidden;
	font-family:'YUniverse-B',sans-serif;
	/*	image-rendering: -webkit-optimize-contrast;*/
}



/* TOPMENU 위에서 아래로 나오기 */
.topmenu_show {
	animation-name: topmenu_show;
	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;		
	/*z-index : 2;*/ /* 제일 위로*/
}
/*오른쪽에서 왼쪽으로 현재 위치까지 이동 */
@keyframes topmenu_show 
{
	0%		{transform: translateY(-100px);} /*현재 위치에서 100px떨어진 곳에서 시작해서 */
	100%	{transform: translateX(0);} /*현재 위치까지 */
}



/* S_GAME에서 Run! 글씨 왼쪽으로 사라지게 하기 */ 
.game_run_string {
	animation-name: game_run_string;
	animation-duration	: 0.7s;  
	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 game_run_string 
{
	0%		{transform: translateX(0);} /*현재 위치에서 시작해서 */
	100%	{transform: translateX(-1500px);} /* 상대적 -1200px까지 이동하라 */
}


/* canvas를 마름모 기울게 하기 위해 -------시작------------*/
.container {
  perspective:1000px; /* 3D 효과를 위한 원근감 설정 */
}
.rotated-image {
  width: 1920px;
  height: 1080px;
  transform-origin: 960px 20%; /* x축 960px, y축 중앙 기준 */
 /* transform: rotateY(20deg) scale(0.7);  x축 기준 45도 회전 */
  transition: transform 1.5s ease; /* 부드러운 전환 효과 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 그림자 추가 */
}

.rotateY20 {
	animation-name: rotateY20;
	animation-duration	: 0.7s;  
	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 rotateY20 
{
	0%		{transform: rotateY(0deg) scale(1);} /*현재 위치에서 시작해서 */
	100%	{transform: rotateY(15deg) scale(0.8);} /* 상대적 -1200px까지 이동하라 */
}


.rotateY90 {
	animation-name: rotateY90;
	animation-duration	: 3.0s;  
	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 rotateY90 
{
	0%		{transform: rotateY(0deg) scale(1);  transform-origin : 100% 50%;} /*현재 위치에서 시작해서 */
	/*50%	{transform: rotateY(90deg) scale(1);}*/
	100%	{transform: rotateY(10deg) scale(1);}
}


.rotate0 {
	animation-name: rotate0;
	animation-duration	: 0.7s;  
	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 rotate0 
{
	0%	{transform: rotateY(15deg) scale(0.8);} 
	100%		{transform: rotateY(0deg) scale(1);} 
}
/* canvas를 마름모 기울게 하기 위해 -------끝------------*/

/* 빙글빙글 도는 effect */
.rotate_forever {
	animation-name: rotate_forever;
	animation-duration	: 5.0s;  
	animation-iteration-count : infinite; /*무한반복 infinite , 1*/
	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_forever 
{
	0%		{transform: rotate(0deg);}
	100%	{transform: rotate(360deg);}
}



/* -------------------------------------------------------------------- */


/* 수직 스크롤바 스타일링 */
::-webkit-scrollbar 
{
	width: 7px; /* 스크롤바의 너비 조정 */
	background-color: #555;
	border-radius: 7px;
}

::-webkit-scrollbar-thumb 
{
	background-color: #4bfff9; /* 스크롤바의 색상 조정 */
	border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover 
{
	background-color: #4bfff9; /* 스크롤바에 호버 효과를 줄 경우 색상 변경 */
}

/* 수평 스크롤바 스타일링 */
::-webkit-scrollbar:horizontal 
{
	height: 7px; /* 수평 스크롤바의 높이 조정 */
	border-radius: 7px;
}

::-webkit-scrollbar-thumb:horizontal 
{
	/*background-color: #5bb79d;*/ /* 수평 스크롤바의 색상 조정 */
	background-color: #4bfff9; /* 수평 스크롤바의 색상 조정 */
}


button:hover
{
  background: #f27212;
  border: 5px solid #ffe600;
}
button:active
{
  background: #b94302;
  border: 5px solid #ffe600;
}

#LOGLOG
{
	left: 760px;
	top: 50px;
	width: 500px;
	height: 650px;
	background: gray;
	opacity: 0.6;
	display: none;
	position:absolute;	
}


#KT_LOADING
{
	background:url("../image/kt/loading_kt.png") no-repeat 0 0;
	background-position:-0px -0px;
	width:124px;
	height:118px;
	left:578px;
	top:301px;
	/*display : none;*/
	display : block;
	opacity : 0;
	position: absolute;
}

/*=======mainmenu에서 top_menu관련 동작 =====*/
.show_top_menu {
	animation-name: show_top_menu;
	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 show_top_menu 
{
	0%		{transform: translateY(-100px);} 
	100%	{transform: translateY(0);}
}
.hide_top_menu {
	animation-name: hide_top_menu;
	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 hide_top_menu 
{
	0%		{transform: translateY(0);} 
	100%	{transform: translateY(-150px);}
}


/*=======mainmenu에서 bottom menu관련 동작 =====*/
/* Y값기준 현재위치에서 150px 위치에서 현재 위치로*/
.show_menu {
	animation-name: show_menu;
	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 show_menu 
{
	0%		{transform: translateY(150px);} 
	100%	{transform: translateY(0);}
}

/*=======mainmenu에서 bottom menu관련 동작 =====*/
/* Y값기준 현재위치에서 150px 아래로 */
.hide_menu {
	animation-name: hide_menu;
	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 hide_menu 
{
	0%		{transform: translateY(0);} 
	100%	{transform: translateY(150px);}
}

/*======Mainmenu의 focus의 오른쪽 왼쪽 이동=====*/
/* 현재 값 기준 x좌표를  +190px  이동 */
.menu_move_right {
	animation-name: menu_move_right;
	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 menu_move_right 
{
	0%		{transform: translateX(0);} 
	100%	{transform: translateX(190px);}
}
/* 현재 값 기준 x좌표를  -190px  이동 */
.menu_move_left {
	animation-name: menu_move_left;
	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 menu_move_left
{
	0%		{transform: translateX(0);} 
	100%	{transform: translateX(-190px);}
}

/*======수조의의 focus의 오른쪽 왼쪽 이동=====*/
/* 현재 값 기준 x좌표를  +561px  이동 */
.tankmenu_move_right {
	animation-name: tankmenu_move_right;
	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 tankmenu_move_right 
{
	0%		
	{
		transform: translateX(0) scale(1.2,1.2);
		transform-origin : 50% 50%;		
	} 
	100%	
	{
		transform: translateX(561px) scale(1.2,1.2);
		transform-origin : 50% 50%;		
	}
}
/* 현재 값 기준 x좌표를  -190px  이동 */
.tankmenu_move_left {
	animation-name: tankmenu_move_left;
	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 tankmenu_move_left
{
	0%		
	{
		transform: translateX(0) scale(1.2,1.2);
		transform-origin : 50% 50%;	
	} 
	100%	
	{
		transform: translateX(-561px) scale(1.2,1.2);
		transform-origin : 50% 50%;	
	}
}

/*===============================물고기 메뉴에서의 focus이동========================*/
.fishmenu_move_right {/* 현재 값 기준 x좌표를  +282px  이동 */
	animation-name: fishmenu_move_right;
	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 fishmenu_move_right 
{
	0%		{	transform: translateX(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateX(282px) scale(1.2,1.2);transform-origin : 50% 50%;}
}
.fishmenu_move_left {/* 현재 값 기준 x좌표를  -282px  이동 */
	animation-name: fishmenu_move_left;
	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 fishmenu_move_left
{
	0%		{	transform: translateX(0) scale(1.2,1.2);				transform-origin : 50% 50%;} 
	100%	{	transform: translateX(-282px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}
.fishmenu_move_down {/* 현재 값 기준 y좌표를  +279px  이동 */
	animation-name: fishmenu_move_down;
	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 fishmenu_move_down
{
	0%		{	transform: translateY(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateY(279px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}
.fishmenu_move_up {/* 현재 값 기준 y좌표를  -279px  이동 */
	animation-name: fishmenu_move_up;
	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 fishmenu_move_up
{
	0%		{	transform: translateY(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateY(-279px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}


/* 스케일 조정 : 100% -> 120% 점점 커지게 하기 */
.scale_up_120 {
	animation-name: scale_up_120;
	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 scale_up_120
{
	0%		
	{
		transform: scale(1.0,1.0);
		transform-origin : 50% 50%;	
	} 
	100%	
	{
		transform: scale(1.2,1.2);
		transform-origin : 50% 50%;	
	}
}
.scale_down_100 {
	animation-name: scale_down_100;
	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 scale_down_100
{
	0%		
	{
		transform: scale(1.2,1.2);
		transform-origin : 50% 50%;	
	} 
	100%	
	{
		transform: scale(1.0,1.0);
		transform-origin : 50% 50%;	
	}
}


/*===============================상점에서 수조 메뉴에서의 focus이동========================*/
.tankshop_move_right {/* 현재 값 기준 x좌표를  +282px  이동 */
	animation-name: tankshop_move_right;
	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 tankshop_move_right 
{
	0%		{	transform: translateX(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateX(399px) scale(1.2,1.2);transform-origin : 50% 50%;}
}
.tankshop_move_left {/* 현재 값 기준 x좌표를  -399px  이동 */
	animation-name: tankshop_move_left;
	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 tankshop_move_left
{
	0%		{	transform: translateX(0) scale(1.2,1.2);				transform-origin : 50% 50%;} 
	100%	{	transform: translateX(-399px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}
.tankshop_move_down {/* 현재 값 기준 y좌표를  +279px  이동 */
	animation-name: tankshop_move_down;
	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 tankshop_move_down
{
	0%		{	transform: translateY(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateY(281px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}
.tankshop_move_up {/* 현재 값 기준 y좌표를  -281px  이동 */
	animation-name: tankshop_move_up;
	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 tankshop_move_up
{
	0%		{	transform: translateY(0) scale(1.2,1.2);			transform-origin : 50% 50%;} 
	100%	{	transform: translateY(-281px) scale(1.2,1.2);	transform-origin : 50% 50%;}
}

/*=======먹이주기에서 먹이통 흔들기 =====*/
.fish_feeder_ani1 {
	animation-name: fish_feeder_ani1;
	animation-duration	: 0.7s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
	transform-origin: 134px 380px; 	
}
@keyframes fish_feeder_ani1 
{
	0%		{transform: rotateZ(0deg) translateX(0) translateY(0); } 
	30%	{transform: rotateZ(-5deg) translateX(15px) translateY(-20px); }
	50%	{transform: rotateZ(0deg) translateX(0) translateY(0);}
	80%	{transform: rotateZ(-5deg) translateX(20px) translateY(-15px);}
	100%	{transform: rotateZ(0deg) translateX(0) translateY(0);}
}

/*===========슬라이드쇼 에서 사용===========*/
.slideshow__ani1  /* 카드 넘기는듯한 느낌 */
{
	animation-name: slideshow__ani1;
	animation-duration	: 1.0s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes slideshow__ani1 
{
	0%		{transform: rotateZ(0deg) translateX(0) translateY(0); transform-origin : 0% 100%;} 
	100%	{transform: rotateZ(90deg) translateX(0) translateY(0);transform-origin : 100% 100%;}
}

.slideshow__ani2  /* 자연스러운 페이드 아웃 */
{
	animation-name: slideshow__ani2;
	animation-duration	: 1.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 slideshow__ani2 
{
	0%		{opacity:1} 
	100%	{opacity:0}
}

.slideshow__ani3 /* 화면을 아래로 내리기 */
{
	animation-name: slideshow__ani3;
	animation-duration	: 1.0s;  
	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 slideshow__ani3 
{
	0%		{transform: translateY(0) scale(1.0);} 
	100%	{transform: translateY(1080px) scale(1);} 
}

.slideshow__ani4 /* 왼쪽 슬라이드 */
{
	animation-name: slideshow__ani4;
	animation-duration	: 1.0s;  
	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 slideshow__ani4 
{
	0%		{transform: translateX(0) scale(1.0); ; transform-origin : 0% 50%;} 
	100%	{transform: translateX(-1920px) scale(0.5);} 
}


/*===========focus 깜빡이게 하기===========*/
.blink  
{
	animation-name: blink;
	animation-duration	: 1.0s;  
	animation-iteration-count : infinite;
	animation-timing-function:ease-out; /* ease-in  ease-out linear ease-in-out*/
	animation-direction : normal;
	animation-fill-mode : forwards;
	animation-play-state	: running;		
}
@keyframes blink 
{
	0%		{opacity : 100} 
	10%		{opacity : 100} 
	60%		{opacity : 0} 
	90%		{opacity : 100}
}

/* ====== 팝업창 효과적으로 커지게 하기 ============*/
.popup_show {
	animation-name: popup_show;
	animation-duration	: 0.35s;  
	animation-iteration-count : 1;
	animation-timing-function:ease-in-ou; /* 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.5); transform-origin : 50% 50%;} 
	60%		{transform: scale(1.02);transform-origin : 50% 50%;} 
	100%	{transform: scale(1.0);transform-origin : 50% 50%;}
}

/*=======왼쪽에서 오른쪽으로======*/
/* X값 기준으로 현재 위치에서 -800px에서 시작해서 현재 위치(0)로 이동한다. */
.move_right_3
{
	animation-name: move_right_3;
	animation-duration	: 0.9s;  
	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 move_right_3 
{
	0%		{transform: translateX(-1200px);} 
	60%		{transform: translateX(-1200px);} 
	100%	{transform: translateX(0);}
}
.move_right_2
{
	animation-name: move_right_2;
	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;		
}
@keyframes move_right_2 
{
	0%		{transform: translateX(-1200px);} 
	40%		{transform: translateX(-1200px);} 
	100%	{transform: translateX(0);}
}
.move_right_1
{
	animation-name: move_right_1;
	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;		
}
@keyframes move_right_1 
{
	0%		{transform: translateX(-1800px);} 
	100%	{transform: translateX(0);}
}