<div class="wrapper">
	<a href="#service">	
		<div class="arrow">
			<ul>
				<li></li>
				<li></li>
			</ul>
		</div>
	</a>
</div>

body
	background: #21242C
	
.wrapper
	width: 100%
	height: 100%

.arrow
	width: 38px
	height: 14px
	margin: auto
	text-transform: uppercase
	letter-spacing: 3px
	text-align: center
	position: absolute
	left: 0
	right: 0
	bottom: 20px
	opacity: 0.5
	transition: (ease 1s)
	animation: bouncey 1.6s linear infinite
	//:border 1px solid gold
	ul
		list-style: none
		li
			width: 24px
			height: 4px
			background: white
			&:nth-child(1)
				left: 0
				top: 0
				position: absolute
				transform: (rotate(45deg))
				border-radius: (5px 0 0 5px)
			&:nth-child(2)
				left: 14px
				position: absolute
				border-radius: (0 5px 5px 0)
				top: 0
				transform: (rotate(-45deg))
	&:hover
		opacity: 1
	

@keyframes bouncey
	0%
		transform: (translateY(0))
	50%
		transform: (translateY(4px))
	100%
		transform: (translateY(0))

// ╭( ･ㅂ･)و