/* banner start */
.al-banner {
    position:relative;
    padding-top:76px;
    width: 100%;
    height: 344px;
    background-image: var(--bg-banner-mobile);
    background-size: cover;
    background-position: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.al-banner .wrapper {
    display:flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: center;
    gap:0px;
}

.al-banner img {
    vertical-align: middle;
}

.al-banner .al-banner-left {
    width:50%;
}

.al-banner .al-banner-left .al-logo {
    aspect-ratio: 258.6/175.1;
    width:121px;
    height:auto;
}

.al-banner-center {
    pointer-events: none;  
}

.al-banner .al-banner-center {
    width:100%;
    position:absolute;
    bottom:0;
}

.al-banner .al-banner-center .al-girl {
    aspect-ratio: 702/560;
    width:auto;
    height:280px;

}

.al-banner .al-banner-right {
    width:50%;
    padding-bottom:30px;
}
.al-banner .al-banner-right .social {
    gap:10px;
    justify-content: flex-end;
}

.al-banner .al-banner-right img {
    width:15px;
    height:auto;
}

@media (min-width:768px) {
    .al-banner {
        background-image: var(--bg-banner-desktop);
        height: auto;
        padding:0 20px;
    }
    .al-banner .wrapper {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap:5%;
    }

    .al-banner .al-banner-left .al-logo {
        width:100%;
    }

    .al-banner .al-banner-left {
        width: auto;
    }

    .al-banner .al-banner-center {
        width:auto;
        position:initial;
        bottom:auto;
        align-self: flex-end;
    }

    .al-banner .al-banner-center .al-girl {
        aspect-ratio: 550/345;
        width:100%;
        height:auto;
    }

    .al-banner .al-banner-right {
        width: auto;
        padding-bottom:0px;
    }

    .al-banner .al-banner-right img {
        width:25px;
    }
}

@media (min-width:1024px) {
    .al-banner .al-banner-right .social {
        gap:17px;
    }

    .al-banner .al-banner-right img {
        width:25px;
    }    
}
@media (min-width:1366px) {
    .al-banner {
        margin-left:auto;
        margin-right:auto;
        justify-content: center;
        gap:79px;
    }

    .al-banner .al-banner-left .al-logo {
        width:362px;
    }
    .al-banner .al-banner-center .al-girl {
        height:345px;
    }

    .al-banner .al-banner-right img {
        width:35px;
    }    
}
@media (min-width:1400px) {
    .al-banner .wrapper {
        max-width:1400px;
        margin-left:auto;
        margin-right:auto;
    }
}
/* banner ends */