.marquee {
	width:100%;
	height:40px;
	margin:0;
	overflow: hidden;
	position: relative;
	background-color:#fff;
	transition: background-color 350ms;
}

.marquee p {
	position: absolute;
	font:300 10pt/40px '¸¼Àº °íµñ', 'Malgun Gothic', 'µ¸¿ò', Dotum, 'Apple Gothic', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	text-align:left;
	transform:translateX(100%);
}
.marquee p:nth-child(1) {
	animation: left-one 10s ease infinite;
}
.marquee p:nth-child(2) {
	animation: left-two 10s ease infinite;
}
.marquee.down p {
	transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
	animation: down-one 10s ease infinite;
}
.marquee.down p:nth-child(2) {
	animation: down-two 10s ease infinite;
}
.marquee.up p {
	transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
	animation: up-one 10s ease infinite;
}
.marquee.up p:nth-child(2) {
	animation: up-two 10s ease infinite;
}
.marquee p > a{
	width:100%;
	height:40px;
	position:relative;
	display:block;
}
/*================================
	Move the Marquee to the Left
==================================*/
@keyframes left-one {
	0% {
		transform:translateX(100%);
	}
	10% {
		transform:translateX(0);
	}
	40% {
		transform:translateX(0);
	}
	50% {
		transform:translateX(-100%);
	}
	100%{
		transform:translateX(-100%);
	}
}
@keyframes left-two {
	0% {
		transform:translateX(100%);
	}
	50% {
		transform:translateX(100%);
	}
	60% {
		transform:translateX(0);
	}
	90% {
		transform:translateX(0);
	}
	100%{
		transform:translateX(-100%);
	}
}

/*================================
	Move the Marquee Downwards
==================================*/
@keyframes down-one {
	0%	{
		transform:translateY(0);
	}
	5% {
		transform:translateY(0);
	}
	95% {
		transform:translateY(0);
	}
	100%{
		transform:translateY(100%);
	}
}
@keyframes down-two {
	0% {
		transform:translateY(-100%);
	}
	5% {
		transform:translateY(0);
	}
	95% {
		transform:translateY(0);
	}
	100%{
		transform:translateY(100%);
	}
}
/*================================
	Move the Marquee Upwards
==================================*/
@keyframes up-one {
	0% {
		transform:translateY(100%);
	}
	10% {
		transform:translateY(0);
	}
	40% {
		transform:translateY(0);
	}
	50% {
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(-100%);
	}
}
@keyframes up-two {
	0% {
		transform:translateY(100%);
	}
	50% {
		transform:translateY(100%);
	}
	60% {
		transform:translateY(0);		
	}
	90% {
		transform:translateY(0);		
	}
	100%{
		transform:translateY(-100%);
	}
}