/* CSS Document */
.scrolldown{
	position: absolute;
	right: 20px;
	bottom: 0px;
	width: 2px;
	height: 300px;
	z-index: 3;
}

/* 背景線 */
.scrolldown::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,.5);
}

/* 流動的光線 */
.scrolldown::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0px;
	width: 4px;
	height: 150px;
	background: linear-gradient(
		to bottom,
		rgba(212,190,120,0),
		rgba(212,190,120,.95),
		rgba(212,190,120,0)
	);
	animation: scrollLine 3s ease-in-out infinite;
}

@keyframes scrollLine{
	0%{
		transform: translateY(0);
		opacity: 0;
	}

	15%{
		opacity: .3;
	}

	35%{
		opacity: 1;
	}

	85%{
		opacity: .3;
	}

	100%{
		transform: translateY(150px);
		opacity: 0;
	}
}




@media(max-width: 600px){

  .scrolldown {
    display: none;
  }
}