@charset "utf-8";
/* CSS reset */
* {
    margin: 0;
    padding: 0;
	position:absolute;
}

/* banner */
#container_dc {
	width:300px;
	height:250px;
	
}

#bg1 {
	width:300px;
	height:250px;
	left:0px;
	top:0px;
	background:url(jar1.jpg) no-repeat;
}
#bg2 {
	width:300px;
	height:250px;
	left:0px;
	top:0px;
	background:url(jar2.jpg) no-repeat;
}
#label {
	width:100%;
	height:50px;
	top:121px;
	
}
#your {
	background:url(your.svg) no-repeat;
	width:80px;
	height:40px;
	left:113px;
	top:0px;
}


#name {
	background:url(name.svg) no-repeat;
	width:100px;
	height:50px;
	left:103px;
	top:0px;
	opacity:0;
}

#here {
	background:url(here.svg) no-repeat;
	width:80px;
	height:40px;
	left:113px;
	top:-5px;
	opacity:0;
}

#logo {
	background: url(logo.svg) no-repeat;
	width:150px;
	height:75px;
	left:20px;
	top:22px;
}

#copy {
	background:url(copy.png) no-repeat;
	width:146px;
	height:130px;
	left:20px;
	top:88px;
}

#arrow{
	background:url(arrow.svg) no-repeat;
	width:36px;
	height:18px;
	left:75px;
	top:198px;
}

#exit_btn{
	top:0px;
	left:0px;
	width:300px;
	height:250px;
	background-color:transparent;
	cursor:pointer;
	z-index:30;
}


/***********/

@-webkit-keyframes fadeIn{
	from{
		opacity:0;
	}
	to
	{
		opacity:1;
	}
}

@keyframes fadeIn{
	from{
		opacity:0;
	}
	to
	{
		opacity:1;
	}
}

@-webkit-keyframes fadeOut{
	from{
		opacity:1;
	}
	to
	{
		opacity:0;
	}
}

@keyframes fadeOut{
	from{
		opacity:1;
	}
	to
	{
		opacity:0;
	}
}

@-webkit-keyframes arrowMove{
	from{
		left:80px;
	}
	to{
		left:100px;
	}
}

@keyframes arrowMove{
	from{
		left:80px;
	}
	to{
		left:100px;
	}
}

@-webkit-keyframes arrowBack{
	from{
		left:100px;
	}
	to{
		left:80px;
	}
}

@keyframes arrowBack{
	from{
		left:100px;
	}
	to{
		left:80px;
	}
}

@-webkit-keyframes arrowBounce{
	0%{ left:75px;}
	20%{left:85px;}
	30%{left:80px;}
	45%{left:85px;}
	100%{left:85px;}
}

@keyframes arrowBounce{
	0%{ left:75px;}
	20%{left:85px;}
	30%{left:80px;}
	45%{left:85px;}
	100%{left:85px;}
}