@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% - 90px);
box-sizing: border-box;
width: 180px;
height: 120px;
border-radius: 5px;
transition: opacity .3s;
opacity: 0;
background: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 40px 10px 40px 10px;
}

.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: 10px;
color: #FFF;
margin-top: 10px;
}

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

.scroll-hint-icon:before {
display: inline-block;
width: 40px;
height: 40px;
color: #FFF;
vertical-align: middle;
text-align: center;
content: "";
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image:url(../img/hint.svg);}

.scroll-hint-icon:after {
content: "";
width: 34px;
height: 14px;
display: block;
position: absolute;
top: 16px;
left: 52%;
margin-left: -20px;
background-repeat: no-repeat;
background-image:url(../img/hint_ar.svg);
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(../img/hint_b.svg);
}

.scroll-hint-icon-white:after {
background-image:url(../img/hint_b_ar.svg);
}

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