@keyframes scroll-hint-appear {
  0% {
    transform: translateX(px);
    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% - 55px) !important;
  top: calc(50% - 40px) !important;
  box-sizing: border-box !important;
  width: 110px !important;
  height: 80px !important;
  border-radius: 4px !important;
  transition: opacity .3s !important;
  opacity: 0 !important;
  background: rgba(0, 0, 0, .7) !important;
  text-align: center !important;
  padding: 18px 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: 10px !important;
  line-height: 1.3 !important;
  color: #FFF !important;
  margin: 7px -1em 0 !important;
  font-weight: 500 !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: 30px !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 25.785 30.52"><path d="M21.33,30.52H7.85A1.55,1.55,0,0,1,6.3,29a12.46,12.46,0,0,0-.63-4.42,25.16,25.16,0,0,0-4.25-5l-.06-.06A5,5,0,0,1,0,15.86a3.64,3.64,0,0,1,1.17-2.62,3.63,3.63,0,0,1,5.14.07V3.77a3.77,3.77,0,0,1,7.54,0V8.33a3.35,3.35,0,0,1,1.26,0,3,3,0,0,1,2,1.22,3.5,3.5,0,0,1,2-.06,3.21,3.21,0,0,1,2,1.54,3.74,3.74,0,0,1,3,.47A4.21,4.21,0,0,1,25.74,15c0,.11,0,.27,0,.46a19.26,19.26,0,0,1-.84,7c-.14.38-.36.81-.56,1.22l-.11.22c0,.07-.09.14-.14.21a7.13,7.13,0,0,0-1.17,2.17c-.06.56-.06,2.15-.05,2.71a1.55,1.55,0,0,1-1.54,1.53ZM8.61,28.21h12a21.781,21.781,0,0,1,.07-2.23,8.74,8.74,0,0,1,1.59-3.25l.06-.12a10,10,0,0,0,.46-1,16.8,16.8,0,0,0,.7-6.12v-.54h0a2,2,0,0,0-.64-1.52,1.33,1.33,0,0,0-1.55.08,1.13,1.13,0,0,1-1.18.28,1.15,1.15,0,0,1-.78-.94,1.26,1.26,0,0,0-.75-1.11,1,1,0,0,0-1.11.28l-.1.1a1.153,1.153,0,0,1-1.97-.66c-.09-.68-.21-.77-.7-.87a.82.82,0,0,0-1,.48,1.16,1.16,0,0,1-2.16-.58V3.77a1.46,1.46,0,1,0-2.92,0V15.95a1.17,1.17,0,0,1-.83,1.11,1.15,1.15,0,0,1-1.2-.35l-1-.91c-.47-.42-.73-.66-.84-.77a1.35,1.35,0,0,0-2-.12L2.7,15a1.32,1.32,0,0,0-.39,1A2.57,2.57,0,0,0,3,17.85H3a27.24,27.24,0,0,1,4.7,5.62,12.63,12.63,0,0,1,.91,4.74ZM23.2,23.35ZM6.51,16.59Z" transform="translate(0.005)" fill="%23fff"/></svg>') !important;
}

.scroll-hint-icon:after {
  content: "" !important;
  width: 34px !important;
  height: 12px !important;
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  margin-left: -20px !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 33.29 12.01"><g transform="translate(8908 -12431)"><path d="M6.68,11.755l-6.25-5A1.2,1.2,0,0,1,0,5.875,1.139,1.139,0,0,1,.46,5L6.7.235a1.16,1.16,0,0,1,1.4,1.85L4.4,4.865h6a1.16,1.16,0,1,1,0,2.31H4.577L8.12,10.005a1.16,1.16,0,0,1-.72,2h0A1.152,1.152,0,0,1,6.68,11.755Z" transform="translate(-8908 12431)" fill="%23fff"/><path d="M4.278,11.955a1.124,1.124,0,0,1-.73-2L7.1,7.125H1.268a1.16,1.16,0,1,1,0-2.31H7.213L3.578,2.035A1.16,1.16,0,0,1,4.968.185l6.25,4.77a1.158,1.158,0,0,1,.45.91,1.139,1.139,0,0,1-.429.92L5,11.786a1.172,1.172,0,0,1-.613.174Q4.331,11.96,4.278,11.955Z" transform="translate(-8886.378 12431.05)" fill="%23fff"/></g></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;
}