@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));
}

.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));
}

.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));
}

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

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

.scroll-hint-text {
  font-size: 11px;
  font-weight: bold;
  color: #FFF;
  padding-top: 98px;
  box-shadow: 0 0 8px 0 rgba(59, 65, 74, 0.3);
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .6;
}

.scroll-hint-icon:before {
  position: absolute;
  right: 0;
  left: 0;
  top: 38px;
  margin: auto;
  display: inline-block;
  width: 54px;
  height: 54px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMCAwaDUwdjUwaC01MHoiIG9wYWNpdHk9IjAiLz48cGF0aCBkPSJtMzEuMjE1NjU2NSAxYzIuNDYzOTY0MyAwIDQuNDY5MjM3MyAyLjAwNTI3Mjk5IDQuNDY5MjM3MyA0LjQ2OTIzNzI4bC0uMDAwODkzOCAxOC4xODc3NjI3Mi4xNjg3NDc3LjAxNjYyMmMyLjg5NjQzOTMuMzM3MjUgNS4xNjQ5NjAyIDIuNzUzMTExNSA1LjI3Mzg5NjggNS43MTAwMTlsLjAwNDA5NzEuMjIyNzU4NXY1LjQwNTIwNzFjMCA1LjU0MjIxNzktMy4yOTc0MTk4IDEwLjUxNTU4NjctOC40MDMyNjA1IDEyLjY3MzE4MjFsLTUuMjA0NzExNyAyLjE5NjI0NTJjLS4xODc2NTIzLjA4MTE0Ny0uMzg3MjQzMi4xMjIzNTI4LS41OTEzMTUyLjEyMjM1MjhoLTEyLjQwMjE3MzJjLS4yODczMjIzIDAtLjU3MDg5ODMtLjA4MjcwOTYtLjgxMDI0NzMtLjIzNzMwMzMtMi45NTQwNzI3LTEuODc5MjE3My00LjcxOTAzMzctNS4wOTU5MDczLTQuNzE5MDMzNy04LjU5NzQxNzZ2LTE3LjYzODA0NDJjMC0uMDQ3NDM3NC4wMDIyNDYwOC0uMDg0MjEzMy4wMDc3NDg5NC0uMTMxNDk4bC4wMDEyNTEwNi0uMDEzMTIzNmMtLjAwNDAwMjQ5LS4wMzIwMDczLS4wMDU5Mzk3Mi0uMDUzMDIyNS0uMDA3MTg5MS0uMDc0MDU2N2wtLjAwMTgxMDktLjA2NTgwNjN2LTEuMTkyMTI1OWMwLTIuNDYzOTY0MiAyLjAwNTI3My00LjQ2OTIzNzIgNC40NjkyMzczLTQuNDY5MjM3Mi41NDgwNjk5IDAgMS4wODE2NTYzLjEwMDE5NDEgMS41ODEwMjEzLjI5MTMzOTZsLjE1Mjc0MTQuMDYzODg2NWMuNjIxMjc2My0xLjY0ODcyNTQgMi4xNjg3OTYxLTIuODA2Nzg4OSAzLjk2NjAxNzUtMi44OTM0MzYzbC4yMTY4MjE4LS4wMDUyMTc1YzEuMDQ4MDUxOCAwIDIuMDM1Njc5NS4zNjM4NDc1IDIuODIyMzMxMyAxLjAwODIyNTNsLjEzNzgyOTQuMTE4NDI4NS4xMzY0NTM2LS4xMTczODM3Yy43MjU1MDQ0LS41OTQxNDI0IDEuNjI0MzMyOC0uOTUxMzc2MyAyLjU3OTk2MzktMS4wMDI4MTk3bC4yNDAwMjM4LS4wMDY0NTA0Yy40MjkyNDYxIDAgLjg1MTQ2MzIuMDYyNTE5MSAxLjI1NjQwMjcuMTgyNzA4MWwuMTg3MTU2LjA2MTk0NTcuMDAwNDE5Mi05LjgxNjc2MjcyYzAtMi4zOTM1NjUzMSAxLjg5MjMyMy00LjM1NDI3NTgxIDQuMjU5MTk5OC00LjQ2NDM2MjQ4em0tLjAxNjkzMzYgMy4wMjE4NzI1N2MtLjc5NzQ0ODIgMC0xLjQ0NzM2NDcuNjQ5OTE2NDYtMS40NDczNjQ3IDEuNDQ3MzY0NzF2MTcuNzgwMjg2NDJjMCAuODMyNDc2NS0uNjc1MTk5OSAxLjUwOTI0My0xLjUwOTI0MjkgMS41MDkyNDMtLjgzMjQ3NjQgMC0xLjUwOTI0MjktLjY3NTItMS41MDkyNDI5LTEuNTA5MjQzbC4wMDAwNDA4LTMuNzUyODcxM2MtLjAxMDEyLS43OTE4ODk1LS42NDk1Mjk3LTEuNDI2NjYwMi0xLjQ0NDAxODgtMS40MjY2NjAyLS43OTc0NDgzIDAtMS40NDczNjQ3LjY0OTkxNjUtMS40NDczNjQ3IDEuNDQ3MzY0N3YzLjczMjE2NjhjMCAuODMxNTY0Ny0uNjc3Njc4MyAxLjUwOTI0My0xLjUwOTI0MyAxLjUwOTI0My0uODMyNDc2NCAwLTEuNTA5MjQyOS0uNjc1Mi0xLjUwOTI0MjktMS41MDkyNDN2LTMuNzMyMTY2OGMwLS43OTc0NDgyLS42NDk5MTY0LTEuNDQ3MzY0Ny0xLjQ0NzM2NDctMS40NDczNjQ3LS43OTc0NDgyIDAtMS40NDczNjQ3LjY0OTkxNjUtMS40NDczNjQ3IDEuNDQ3MzY0N3YzLjczMjE2NjhjMCAuODMxNTY0Ny0uNjc3Njc4MyAxLjUwOTI0My0xLjUwOTI0MjkgMS41MDkyNDMtLjgzMjQ3NjQgMC0xLjUwOTI0My0uNjc1Mi0xLjUwOTI0My0xLjUwOTI0M3YtMS4xOTIxMjU4YzAtLjc5NzQ0ODMtLjY0OTkxNjQtMS40NDczNjQ3LTEuNDQ3MzY0Ny0xLjQ0NzM2NDctLjc5NzQ0ODIgMC0xLjQ0NzM2NDcuNjQ5OTE2NC0xLjQ0NzM2NDcgMS40NDczNjQ3djEuMTkyMTI1OGMwIC4wNDc0Mzc0LS4wMDIyNDYxLjA4NDIxMzMtLjAwNzQwNC4xMjg5MjIybC0uMDAyNjk1MS4wMTE1NTQxLjAwMjM1MDIuMDEyNTEwM2MuMDAyNzUxNC4wMjM2NDI0LjAwNDY4ODcuMDQ0NjU3NS4wMDU5MzguMDY1NjkxOGwuMDAxODEwOS4wNjU4MDYydjE3LjYzODA0NDJjMCAyLjI3NjQ5NDkgMS4wNTgzNjc0IDQuMzgwOTc2MyAyLjg2NjAzNzEgNS43MzI3MTA2bC4xMDY4NjM4LjA3NjIzNjloMTEuNjNsNC45MjgwMzQ3LTIuMDgwMTY1M2MzLjc5ODc0NS0xLjYwNDY2OSA2LjMxNjgyODMtNS4yMDkyMzMgNi41NDI4NTA2LTkuMjg4OTc3MmwuMDA3MTE0Ny0uMTc4ODU3NS0uMDEwODM4MS0uMDAxMjE2NnYtNS44Mjg3NzA2YzAtMS40NDE1NjU5LTEuMDQzMzgyMS0yLjY0NzI1MTgtMi40MTczNzg4LTIuODk5MzcyOWwtLjAwMzIwOTYgNC4zNzkzN2MwIC43ODUzNjY3LS42MDQ0NzIzIDEuNDMzNDcwNC0xLjM3MjE2MzUgMS41MDMwNThsLS4xMzcwNzk0LjAwNjE4NWMtLjgzMjQ3NjUgMC0xLjUwOTI0My0uNjc1Mi0xLjUwOTI0My0xLjUwOTI0M3YtMjUuNjEzNzcyNjJjMC0uNzk3NDQ4MjUtLjY0OTkxNjQtMS40NDczNjQ3MS0xLjQ0NzM2NDctMS40NDczNjQ3MXoiLz48L2c+PC9zdmc+);
}

.scroll-hint-icon:after {
  content: "";
  width: 50px;
  height: 16px;
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgNTAgMTgiIHdpZHRoPSI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Im0wIDBoNTB2MThoLTUweiIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy41IC41KSI+PHJlY3QgaGVpZ2h0PSIzIiByeD0iMS41IiB3aWR0aD0iMzkiIHg9IjIiIHk9IjciLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzA3MTA2NzggLS43MDcxMDY3OCAuNzA3MTA2NzggLjcwNzEwNjc4IC4wMDAwMTkgOC40ODUzKSI+PHJlY3QgaGVpZ2h0PSIzIiByeD0iMS41IiB3aWR0aD0iMTIiLz48cmVjdCBoZWlnaHQ9IjEyIiByeD0iMS41IiB3aWR0aD0iMyIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgtLjcwNzEwNjc4IC43MDcxMDY3OCAtLjcwNzEwNjc4IC0uNzA3MTA2NzggNDIuOTcwNTgxIDguNDg1MykiPjxyZWN0IGhlaWdodD0iMyIgcng9IjEuNSIgd2lkdGg9IjEyIi8+PHJlY3QgaGVpZ2h0PSIxMiIgcng9IjEuNSIgd2lkdGg9IjMiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
  opacity: 0;
  transition-delay: 2.4s;
}

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

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

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}