#dec-promo {
    --red: #ee1d25;
    --green: #009047;
}
#dec-hero {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	background-image: url(../images/18-21/back.jpg);
	background-image: -webkit-image-set(url("../images/18-21/back.jpg") 1x, url("../images/18-21/back@2x.jpg") 2x);
}
#dec-hero .dh-left-back {
    width: 50%;
    box-shadow: 2px -4px 20px 0px rgba(0, 0, 0, 0.25);
}
.dh-inner {
    width: calc(74.479167vw + 30px);
    padding: 0 15px;
}
.dh-left {
    width: 50%;
    padding-right: 2.8125vw;
}
.dh-left dotlottie-player {
    width: 112%;
    height: auto;
    margin-left: -6%;
    margin-top: -2%;
}
.dh-main {
    padding-top: 3.385417vw;
    padding-bottom: 2.1875vw;
}
.dh-main .main {
    margin-top: -0.3125vw;
}
.dh-right {
    padding-left: 3.385417vw;
    flex-grow: 0;
    max-width: 29.1vw;
}
.dh-right .dh-product.fp1 {
    column-gap: 3.489583vw;
}
.dh-right .dh-product.fp2 {
    margin-top: 1.197917vw;
    column-gap: 4.322917vw;
}
.dh-right .product-image:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 12.604167vw;
    height: auto;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	background-image: url(../images/18-21/circle.png);
	background-image: -webkit-image-set(url("../images/18-21/circle.png") 1x, url("../images/18-21/circle@2x.png") 2x);
}
.dh-right .fp1 .product-image:before {
    top: 8.5%;
    left: -14%;
    width: 108.035714%;
}
.dh-right .fp2 .product-image:before {
    top: -11%;
    left: -35%;
    width: 152.201258%;
}
#sub1-banner {
	background-image: url(../images/18-21/back-dark-blue.jpg);
	background-image: -webkit-image-set(url("../images/18-21/back-dark-blue.jpg") 1x, url("../images/18-21/back-dark-blue@2x.jpg") 2x);
}
@media screen and (min-width: 992px) {
    .dh-left .button {
        width: 8.854167vw;
        height: 1.822917vw;
        border-radius: 0.9375vw;
        font-size: 0.833333vw;
        padding-top: 0.2em;
        flex-shrink: 0;
        margin-top: 0.9375vw;
    }
    .dh-right .button {
        width: 5.052083vw;
        height: 1.354167vw;
        border-radius: 0.677083vw;
        font-size: 0.625vw;
        margin-top: 0.677083vw;
        flex-shrink: 0;
        padding-top: 0.2em;
    }
}
@media screen and (max-width: 991px) {
    .dh-inner {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .dh-left {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        background-color: var(--red);
        box-shadow: 2px -4px 20px 0px rgba(0, 0, 0, 0.25);
    }
    .dh-left .button {
        width: 142px;
        height: 35px;
        border-radius: 18px;
        font-size: 1em;
        margin-top: 11px;
        padding-top: 0.2em;
        flex-shrink: 0;
    }
    .dh-right {
        flex-grow: 1;
        max-width: 100%;
    }
    .dh-right .button {
        width: 97px;
        height: 26px;
        border-radius: 13px;
        font-size: 12px;
        margin-top: 13px;
        flex-shrink: 0;
        padding-top: 0.2em;
    }
    .dh-main {
        padding-top: 55px;
        padding-right: 0;
        padding-bottom: 33px;
    }
    .dh-right {
        padding: 47px 15px 78px;
    }
    .dh-right .dh-product.fp1 {
        column-gap: 37px;
    }
    .dh-right .product-image:before {
        width: 242px;
    }
    .dh-right .fp1 .product-image:before {
        top: 26px;
        left: -31px;
    }
    .dh-right .fp2 .product-image:before {
        top: -23px;
        left: -55px;
    }
    #dec-hero:before {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .dh-right .product-image:before {
    }
    .dh-right .fp1 .product-image:before {
        top: 14px;
        left: -23px;
        width: 173px;
    }
    .dh-right .fp2 .product-image:before {
        top: -14px;
        left: -37px;
        width: 173px;
    }
}
@media screen and (max-width: 567px) {
    #dec-hero dotlottie-player {
        height: auto;
    }
    #dec-hero {
        background-image: url(../images/18-21/back-m.jpg);
        background-image: -webkit-image-set(url("../images/18-21/back-m.jpg") 1x, url("../images/18-21/back-m@2x.jpg") 2x);
        background-position: bottom center;
    }
    .dh-main .main {
        max-width: calc(100% + 100px);
        margin: 19px -50px 16px;
    }
    .dh-left .button,
    .dh-right .button {
        width: 95px;
        height: 24px;
        border-radius: 12px;
        font-size: 0.6875em;
        margin-top: 10px;
    }
    .dh-left .button {
        margin-top: 21px;
        width: 10em;
        height: 2.2em;
        border-radius: 1.1em;
        font-size: 1.1em;
    }
    .dh-right .dh-product.fp1 {
        column-gap: 28px;
    }
    .dh-right .dh-product.fp2 {
        margin-top: 23px;
        column-gap: 57px;
    }
    #sub1-banner {
        background-image: url(../images/18-21/back-dark-blue-m.jpg);
        background-image: -webkit-image-set(url("../images/18-21/back-dark-blue-m.jpg") 1x, url("../images/18-21/back-dark-blue-m@2x.jpg") 2x);
    }
}