@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,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,0.15) 0,rgba(0,0,0,0) 16px,rgba(0,0,0,0)),linear-gradient(270deg,rgba(0,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,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:80px;
border-radius:5px;
transition:opacity .3s;
opacity:0;
background:rgba(0, 0, 0, .7);
text-align:center;
padding:20px 10px 10px 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:5px;}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon{
opacity:0.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:10px;
left:50%;
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,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;}