#july-promo {
    font-size: 16px;
    --red: #ed1c24;
    --blue: #2d8df3;
}
#july-hero{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../../../images/25/july/hero/back.jpg);
	background-image: -webkit-image-set(url("../../../images/25/july/hero/back.jpg") 1x, url("../../../images/25/july/hero/back@2x.jpg") 2x);
}
.jh-inner {
    padding: 0 15px;
}
.jh-inner  dotlottie-player {
    height: auto;
}
.jh-inner .jh-animation {
    z-index: -1;
}
.jh-inner .button{
    width: 13vw;
    height: 2.3vw;
    border-radius: 22px;
    font-size: 1.4vw;
    margin-top: 27px;
}
.jh-left {
    left: -60.507363%;
    bottom: 4vw;
    max-width: 55.801814%;
}
.jh-right {
    right: -55.497992%;
    max-width: 65.519191%;
    top: 1vw;
}
.jh-left dotlottie-player {
    width: 113%;
    left: -10%;
}
.jh-main {
    padding-top: 3vw;
    padding-bottom: 4vw;
}
.jh-main img {
    width: 30vw;
}

@media screen and (max-width: 767px) {
    .jh-inner {
        flex-direction: column;
        width: 100%;
    }
    .jh-main {
        margin-top: 12%;
        width: 100%;
    }
    .jh-main img {
        width: 95%;
    }
    #july-hero {
        background-image: url(../../../images/25/july/hero/back-m.jpg);
        background-image: -webkit-image-set(url("../../../images/25/july/hero/back-m.jpg") 1x, url("../../../images/25/july/hero/back-m@2x.jpg") 2x);
        height: 147vw;
    }
    .jh-right {
        right: 0;
        bottom: -13%;
        max-width: inherit;
    }
    .jh-inner .button{
        width: 46%;
        height: 9vw;
        border-radius: 17px;
        font-size: 5vw;
        margin-top: 19px;
    }
}