.gototop {
    display: none;
    -webkit-animation: hide 350ms ease-out forwards 1;
    animation: hide 350ms ease-out forwards 1;
    padding: 0px 0px;
    border: 0;
    text-align: center;
    z-index: 9;
    position: fixed;
    bottom: 3rem;
    right: 2.5%;
    -webkit-transition: background-color 80ms ease-in-out;
    transition: background-color 80ms ease-in-out;
    cursor: pointer;
}

.gototop > span {
    display: inline-block;
    -webkit-transition: transform 100ms 100ms ease-in-out;
    transition: transform 100ms 100ms ease-in-out;
}

.gototop:hover > span,
.gototop:focus > span {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}
.isvisible {
    -webkit-animation: show 1s ease-out forwards 1;
    animation: show 1s ease-out forwards 1;
}
@media only screen and (max-width: 1680px) {
.gototop{right: 0%;}}
@media only screen and (max-width: 1280px) {
.gototop{right: 0%;}}
@media only screen and (max-width: 1024px) {
.gototop{right: 0%;}}
@media only screen and (max-width: 992px) {
.gototop{right: 0%;}}
@-webkit-keyframes hide{
  0% {
    opacity: 1;
    -webkit-transform:translateY(0);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    -webkit-transform:translateY(100px);
  }
}
@keyframes hide{
  0% {
    opacity: 1;
    transform:translateY(0);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    transform:translateY(100px);
  }
}

@-webkit-keyframes show{
  0% {
    -webkit-transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    -webkit-transform: rotate(0deg);
  }
}

@keyframes show{
  0% {
    transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* ---------  scroll ---------- */
.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	bottom: 8rem;
  z-index: 999;
  
}

.arrows path {
	stroke: yellow;
	fill: transparent;
	stroke-width: 2px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
  box-shadow:2px 2px 3px 3px rgba(24, 24, 23, 0.8);
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}





@media (max-width: 1366px) {
  .arrows {
      bottom: 6rem;
  }
  }
  @media (max-width: 1366px) {
    .arrows {
        bottom: 3rem;
    }
    }
  @media (min-width: 1024px) {
    .arrow2{
      display: none;
    }
  }
  @media (max-width: 1023px) {
    .arrow1{
      display: none;
    }
    .arrows {
      bottom: 5rem;
      
    }
    .arrows path {
      stroke-width: 2px;	
    }
  }
  @media (max-width: 860px) {
    .arrows {
      bottom: 1rem;
      margin-left: -20px;
    }

    
 
  }