.hero{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
    background:#000;
}

.hero picture{

    display:block;

    width:100%;

    max-width:1700px;

    margin:0 auto;

}

.hero-banner{

    display:block;

    width:100%;

    height:360px;

    object-fit:cover;

    object-position:center;

}

.hero-scroll{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#FFFEF9;

    z-index:20;

}

.hero-scroll span{

    font-size:.9rem;

    margin-bottom:12px;

    letter-spacing:1px;

}

.mouse{

    width:28px;

    height:48px;

    border:2px solid #fff;

    border-radius:20px;

    display:flex;

    justify-content:center;

}

.wheel{

    width:4px;

    height:8px;

    background:#FE6601;

    border-radius:50px;

    margin-top:8px;

    animation:scroll 1.6s infinite;

}

@keyframes scroll{

0%{

opacity:1;

transform:translateY(0);

}

100%{

opacity:0;

transform:translateY(16px);

}

}