#march-hero {
    --yellow: #ffc32c;
    font-size: 16px;
}
#march-hero .march-inner .button:hover {
    text-decoration: none;
}

#march-hero {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../../../images/26/march/hero/back.jpg);
    background-image: -webkit-image-set(url("../../../images/26/march/hero/back.jpg") 1x,
            url("../../../images/26/march/hero/back@2x.jpg") 2x);
}

#march-hero .march-main {
    margin-right: -35px;
    padding-top: 100px;
    padding-bottom: 116px;
}
#march-hero .march-animation {
    margin-bottom: 23px;
}
#march-hero .march-animation dotlottie-player {
    width: 109%;
    height: auto;
    top: -15%;
}
#march-hero .button {
    width: 226px;
    height: 38px;
    border-radius: 19px;
    font-size: 21px;
    margin-top: 29px;
    line-height: 1;
    -webkit-box-shadow: 2px 2px 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 2px 2px 1px 2px rgba(0, 0, 0, 0.15);
}

@supports (background: -webkit-named-image(i)) {
    #march-hero .button {
        padding-top: 2px;
    }
}

@media screen and (max-width: 767px) {
    #march-hero .march-main {
        padding-top: 50px;
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 567px) {
    #march-hero {
        background-image: url(../../../images/26/march/hero/back-m.jpg);
        background-image: -webkit-image-set(url("../../../images/26/march/hero/back-m.jpg") 1x,
                url("../../../images/26/march/hero/back-m@2x.jpg") 2x);
    }
    #march-hero .march-main {
        padding-top: 12px;
        padding-bottom: 239px;
        margin-right: 0;
    }
    #march-hero .march-animation {
        margin-bottom: 15px;
    }
    #march-hero .march-animation dotlottie-player {
        width: 104%;
        top: -6%;
    }
    #march-hero .button {
        width: 177px;
        height: 31px;
        border-radius: 16px;
        font-size: 16px;
        margin-top: 19px;
    }
}