@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}


.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)) !important;
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)) !important;
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)) !important;
}

.scroll-hint-icon {
  position: absolute !important;
  left: calc(50% - 60px) !important;
  top: calc(50% - 60px) !important;
  box-sizing: border-box !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  transition: opacity .3s !important;
  opacity: 0 !important;
  background: rgba(0, 0, 0, .6) !important;
  text-align: center !important;
  padding: 30px 5px 5px 5px !important;
}

.scroll-hint-icon-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
}

.scroll-hint-text {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #FFF !important;
  margin: 10px -1em 0 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8 !important;
}

.scroll-hint-icon:before {
  display: inline-block !important;
  width: 100% !important;
  height: 46px !important;
  color: #FFF !important;
  vertical-align: middle !important;
  text-align: center !important;
  content: "" !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 45.35"><path d="M28.02,11.39c.2,0,.4-.06.56-.17.46-.31.57-.93.26-1.39-1.15-1.69-1.16-3.92-.02-5.61,1.54-2.29,4.65-2.9,6.94-1.35,2.29,1.54,2.9,4.65,1.35,6.94-.31.46-.19,1.08.27,1.39s1.08.19,1.39-.27c1.61-2.38,1.6-5.5-.02-7.87-2.18-3.19-6.54-4.01-9.73-1.83-3.19,2.18-4.01,6.54-1.83,9.73.19.27.49.43.82.43Z" fill="%23fff"/><polygon points="28.02 11.39 28.02 11.39 28.02 11.39 28.02 11.39" fill="%23fff"/><path d="M44.98,19.35h-1.18c-.17-.44-.44-.83-.78-1.15-.55-.53-1.27-.83-2.04-.85h-1.54c-.68-.61-1.55-.97-2.46-1h-1v-8.27c0-1.66-1.34-3-3-3s-3,1.34-3,3h0c0,.1.11,8.66,0,14.48-.07.99-.26,1.97-.58,2.91-.46-.27-.89-.61-1.26-.99-.05-.05-.16-.18-.26-.31-.89-1.17-1.97-2.17-3.2-2.97-1.59-.84-3.54-.56-4.83.71-.69.57-.86,1.55-.41,2.32.31.48.8,1.15,1.43,1.98.72.96,1.62,2.16,2.41,3.34.42.73.76,1.5,1.01,2.3.5,1.68,1.33,3.24,2.43,4.6,1.33,1.41,2.42,3.03,3.25,4.78v4.12h2v-4.14c0-.26,0-.97-1.43-3.1-.71-1.06-1.49-2.06-2.34-3.01-.92-1.17-1.61-2.51-2.03-3.94-.31-.95-.72-1.86-1.23-2.72-.82-1.23-1.74-2.45-2.48-3.44-.5-.67-.94-1.25-1.22-1.67.25-.24.55-.42.87-.51.49-.18,1.04-.15,1.51.09,1.03.68,1.94,1.53,2.69,2.52.16.19.27.33.37.44.85.93,1.96,1.57,3.19,1.85.41.04.81-.19.99-.56.64-1.44,1.01-2.98,1.1-4.56.11-5.77,0-14.22,0-14.52,0-.55.45-1,1-1s1,.45,1,1v13.46h2v-3.19h1c.37.03.72.17,1,.4v2.8c0,.55.45,1,1,1s1-.45,1-1v-2.21h1c.53.05.95.47,1,1,0,.03.01.05.02.08,0,.03-.02.05-.02.08v2.1c0,.55.45,1,1,1s1-.45,1-1v-1.26h1c.55,0,1,.45,1,1v9c-.23,1.91-.61,3.8-1.12,5.65-.41,1.42-.7,2.88-.88,4.35v4h2v-4c.2-1.31.47-2.61.82-3.88.57-2,.96-4.05,1.18-6.12v-9c0-1.66-1.34-3-3-3Z" fill="%23fff"/></svg>') !important;
}

.scroll-hint-icon:after {
  content: "" !important;
  width: 68px !important;
  height: 46px !important;
  display: block !important;
  position: absolute !important;
  top: 30px !important;
  left: 50% !important;
  margin-left: -34px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 45.35"><path d="M67.92,25.64c.05-.11.07-.23.07-.36,0,0,0-.02,0-.03,0,0,0-.02,0-.02,0-.12-.02-.24-.07-.36-.05-.12-.12-.23-.22-.33l-5.5-5.5c-.39-.37-1-.37-1.39,0-.4.38-.41,1.02-.02,1.41l3.79,3.79h-11.59c-.55,0-1,.45-1,1s.45,1,1,1h11.59l-3.79,3.79c-.19.19-.29.44-.29.71,0,.55.45,1,1,1,.27,0,.52-.11.71-.29l5.5-5.5c.09-.09.17-.2.22-.33Z" fill="%23fff"/><path d="M15,24.26H3.41l3.79-3.79c.37-.39.37-1,0-1.39-.38-.4-1.02-.41-1.41-.02L.29,24.55c-.09.09-.17.2-.22.33-.05.11-.07.23-.07.35,0,.01,0,.02,0,.03,0,.01,0,.02,0,.04,0,.12.02.24.07.35.05.12.12.23.22.33l5.5,5.5c.19.19.44.29.71.29.27,0,.52-.11.71-.29.39-.39.39-1.02,0-1.41l-3.79-3.79h11.59c.55,0,1-.45,1-1s-.45-1-1-1Z" fill="%23fff"/></svg>') !important;
  background-size: contain !important;
  opacity: 0 !important;
  transition-delay: 2.4s !important;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1 !important;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear !important;
  animation-iteration-count: 2 !important;
}