@charset "utf-8";

.updown{background:none !important}

#page-top{
display:flex;
justify-content:center;
align-items:center;
/*width: 5vw;
min-width:40px;
max-width:50px;
*/
color: #fff;
  text-align: right;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a{background:none! important}

#page-top img{
width: 6vw;
min-width:40px;
max-width:80px;
background:none !important

}

#page-top {
	position: fixed;
	right:1.5vw;
	top:40vw;
	z-index: 3000;
	opacity: 0;
	transform: translateX(0);
}


#page-top.LeftMove{
  animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}


#page-top.RightMove{
  animation: RightAnime 5s forwards;
}
@keyframes RightAnime{
  from {
    opacity: 1;
  transform: translateX(0);
  }
  to {
    opacity: 1;
  transform: translateX(300px);
  }
}


.updown{
	animation-name:sample;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}

@keyframes sample {
	0% {
		transform: translate(0,0px);
	}

	100% {
		transform: translate(0,-15px)
	}
}