@charset "UTF-8";

/* ------------MV-------------- */






/* --------SCROLL DOWN--------- */
.arrowWrap { 
  height: 150px;
  left: 30px;
}

.arrowInner p {
position: absolute;
	top: 84.5%;
	left: 28.5px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow {
position: absolute;
top: 87%;
  left: 7.5px;
  width: 1px;
  height: 110px;
  margin: 40px 0 0 62px;
  background-color:#9E9E9E;
  overflow: hidden;
}



.arrow::before {
  content: '';
  width: 1px;
  height: 140px;
  margin: 40px 0 0 0px; /*����*/
  background-color: #000;
  position: absolute;
  top: -11px; /*������ʒu*/
  left: 0px;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}


@media screen and (max-width:1500px) {

	.arrowInner p {
	top: 82.5%;
	left: 32px;
}

.arrow {
position: absolute;
top: 84%;
  left: 7.4px;
}
}
  @media screen and (max-width:1350px) {

	.arrowInner p {
	top: 82.5%;
	left: 20px;
}

.arrow {
position: absolute;
top: 84%;
  left: -7px;
}
 }
    
@media screen and (max-width:1100px) {

	.arrowInner p {
	top: 82.5%;
	left: 37px;
}

.arrow {
position: absolute;
top: 84%;
  left: 7.4px;
}
	
}

@media screen and (max-width:950px) {
	.arrowInner p {
	top: 82.5%;
	left: 3px;
}

.arrow {
top: 83.5%;
  left: -28px;
  height: 90px;
}

}

@media screen and (max-width:850px) {
	.arrowInner p {
	top: 82.5%;
	left: 0;
}

.arrow {
top: 82.5%;
  left: -33px;
  height: 90px;
}

}


/* -------------One Stop--------------- */

.one_stop {
  animation: float_8642 2.5s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_8642 {
  0% { transform: translateY(0) }
  25% { transform: translateY(-6px) }
  50% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

/* -------- fade -------- */

.img_side_slider li {

  opacity: 0;
}

.img_side_slider li:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}

.img_side_slider li:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}

.img_side_slider li:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}