#banner {
    --content-width: 1310px;
    padding-top: 10px;
    padding-bottom: 50px;
}
#banner .banner-inner {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(/themes/arona/images/redesign/home/refer-banner-back.jpg);
    background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-banner-back.jpg") 1x, url("/themes/arona/images/redesign/home/refer-banner-back@2x.jpg") 2x);
}
#banner .banner-inner:before,
#banner .banner-inner:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}
#banner .banner-inner:before {
    width: 716px;
    max-width: 55.9375%;
    height: 80px;
    left: 0;
    background-position: top right;
    background-image: url(/themes/arona/images/redesign/home/refer-clouds-left.png);
    background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-clouds-left.png") 1x, url("/themes/arona/images/redesign/home/refer-clouds-left@2x.png") 2x);
}
#banner .banner-inner:after {
    width: 592px;
    max-width: 46.25%;
    height: 109px;
    right: 0;
    background-position: top left;
    background-image: url(/themes/arona/images/redesign/home/refer-clouds-right.png);
    background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-clouds-right.png") 1x, url("/themes/arona/images/redesign/home/refer-clouds-right@2x.png") 2x);
}
#banner .banner-main {
    padding-top: 41px;
    padding-bottom: 26px;
}
#banner .banner-main:before {
    content: '';
    display: block;
    width: 448px;
    height: auto;
    aspect-ratio: 1 / 0.727678571428571;
    position: absolute;
    left: -326px;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(/themes/arona/images/redesign/home/refer-hero.png);
    background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-hero.png") 1x, url("/themes/arona/images/redesign/home/refer-hero@2x.png") 2x);
}
#banner .button {
    width: 145px;
    height: 35px;
    border-radius: 18px;
    font-size: 16px;
    margin-top: 22px;
}
@media screen and (max-width: 1199px) {
    #banner .banner-main:before {
        width: 380px;
        left: -235px;
    }
}
@media screen and (max-width: 991px) {
    #banner .banner-inner:before,
    #banner .banner-inner:after {
        max-width: 30%;
    }
    #banner .banner-main:before {
        width: 280px;
        left: -135px;
    }
}
@media screen and (max-width: 767px) {
    #banner .banner-inner:before {
        width: 567px;
        max-width: inherit;
        background-image: url(/themes/arona/images/redesign/home/refer-clouds-m.png);
        background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-clouds-m.png") 1x, url("/themes/arona/images/redesign/home/refer-clouds-m@2x.png") 2x);
    }
    #banner .banner-main {
        padding-bottom: 212px;
    }
    #banner .banner-main:before {
        width: 412px;
        aspect-ratio: 1 / 0.512135922330097;
        position: absolute;
        left: inherit;
        margin-left: 155px;
        background-image: url(/themes/arona/images/redesign/home/refer-hero-m.png);
        background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-hero-m.png") 1x, url("/themes/arona/images/redesign/home/refer-hero-m@2x.png") 2x);
    }
}
@media screen and (max-width: 567px) {
    #banner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #banner .container {
        padding: 0;
    }
    #banner .banner-inner {
        padding-left: 15px;
        padding-right: 15px;
        background-image: url(/themes/arona/images/redesign/home/refer-banner-back-m.jpg);
        background-image: -webkit-image-set(url("/themes/arona/images/redesign/home/refer-banner-back-m.jpg") 1x, url("/themes/arona/images/redesign/home/refer-banner-back-m@2x.jpg") 2x);
    }
    #banner .banner-inner:after {
        display: none;
    }
    #banner .banner-main {
        padding-top: 33px;
    }
}