.spotlight-item-view .container {
    overflow-x: visible;
}
.flex-media {
    display: flex;
    align-items: flex-start;
}
.flex-media .body {
    flex: 1;
}
.btn-user-review {
    height: auto;
    background: white!important;
    border-color: var(--main-color)!important;
    border-radius: 32px;
}
.border-main-color {
    border: 2px solid var(--main-color);
}

.over-width {
    margin-left: calc(-1 * (50vw - 360px));
    margin-right: calc(-1 * (50vw - 360px));
}
@media screen and (max-width: 991px) {
    .over-width {
        margin-left: calc(-1 * (50vw - 285px));
        margin-right: calc(-1 * (50vw - 285px));
    }
}
@media screen and (max-width: 600px) {
    .over-width  {
        margin-left: -15px;
        margin-right: -15px;
    }
}
@media screen and (max-width: 581px) {
    .over-width .container .wrapper {
        max-width: 100vw;
    }
    .over-width > .container > .wrapper {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
}

.cover.over-width {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
}
.cover.over-width .bg-white {
    opacity: .85;    
}
.cover.over-width img.logo {
    width: 340px;
}
@media screen and (min-width: 992px) {
    .cover.over-width {
        background-image: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/top_bg_2x.jpg');
        background-position: center top;
        background-size: auto 485px;
        min-height: 485px;
    }
    .cover.over-width .title {
        margin-left: 40%!important;
    }
    .cover.over-width .bg-white {
        margin: 0 auto;
        width: 540px;
    }
    .cover.over-width .bg-white .border-main-color {
        padding: 16px 40px;
    }
    .cover.over-width img.logo {
        width: 300px;
        margin-top: 155px;
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 991px) {
    .cover.over-width {
        background-image: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/top_bg_md_2x.jpg');
        background-position: center -7.5vw;
        background-size: auto 100vw;
        min-height: 92.5vw;
    }    
    .cover.over-width img.logo {
        width: 45vw;
        max-width: 340px;
        margin-top: 10vw;
        margin-bottom: calc((100vw * 0.783475783475783) - 156.424501424501425px);
    }
    .cover.over-width .title {
        max-width: 640px;
    }
    .cover.over-width .title h1 {
        width: 75%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 640px) {
    .cover.over-width img.logo {
        margin-bottom: calc((100vw * 0.584905660377358) - 29.339622641509434px);
    }
}

#sec-1 {
    position: relative;
}
.img-divine {
    width: 45vw;
    max-width: 250px;
}
.img-divine-sep {
    width: 4.5vw;
    max-width: 28px;
}
.img-divine-oil {
    position: absolute;
    left: 50%;
    bottom: -80px;
    z-index: 0;
    width: 150px;
    margin-left: -360px;
}
.brand-info {
    position: relative;
    margin-top: 100px;
    margin-bottom: 180px;
    z-index: 1;
}
.brand-info:before {
    content: '';
    display: block;
    background-position: center top;
    background-size: contain;
    background-image: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/lc_logo_rotation_2x.png');
    background-repeat: no-repeat;
    width: auto;
    height: 140px;
    margin-top: -100px;
    margin-bottom: 35px;
}
.brand-info:after {
    content: '';
    display: block;
    background-position: center top;
    background-size: contain;
    background-image: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/photo_oliver_2x.png');
    background-repeat: no-repeat;
    width: 405px;
    height: 360px;
    margin-top: 0;
    margin-bottom: -180px;
    margin-left: 325px;
}
@media screen and (max-width: 800px) {
    .brand-info:after {
        margin-left: calc((100vw * -0.37) + 621px);
    }
}
@media screen and (max-width: 720px) {
    .img-divine-oil {
        left: 0;
        margin-left: calc(-0.466666666666667 * ((100vw * 0.202898550724638) + 3.91304347826087px));
        bottom: calc(-0.533333333333333 * ((100vw * 0.202898550724638) + 3.91304347826087px));
        width: calc((100vw * 0.202898550724638) + 3.91304347826087px);
    }
    .brand-info {
        margin-top: calc((100vw * 0.072463768115942) + 47.826086956521739px);
        margin-bottom: 25vw;
    }
    .brand-info:before {
        height: calc((100vw * 0.144927536231884) + 35.652173913043478px);
        margin-top: calc((100vw * -0.072463768115942) - 47.826086956521739px);
        margin-bottom: calc((100vw * 0.057971014492754) - 6.739130434782609px);
    }
    .brand-info:after {
        width: 56.25vw;
        height: 50vw;
        margin-top: 0;
        margin-bottom: -25vw;
        margin-left: 47vw;
    }
}
@media screen and (max-width: 575px) {
    .brand-info {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

#sec-2 hr,
#sec-3 hr,
#sec-4 hr {
    width: 128px;
    border-width: 2px;
}
#sec-2 hr {
    margin-top: 0;
    margin-left: 0;
}
@media screen and (max-width: 640px) {
    #sec-2 hr,
    #sec-3 hr,
    #sec-4 hr {
        width: calc((100vw * 0.173584905660377) + 16.905660377358491px);
    }
}
@media screen and (max-width: 575px) {
    #sec-2 hr,
    #sec-3 hr,
    #sec-4 hr {
        border-width: 1px;
    }
}

@media screen and (max-width: 575px) {
    #sec-3 .packshot {
        width: 75%!important;
    }
}

#sec-4 {
    background: var(--main-color-20);
    background: -moz-linear-gradient(top, var(--main-color-20) 0%, #ffffff 65%, var(--main-color-20) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, var(--main-color-20)), color-stop(65%, #ffffff), color-stop(100%, var(--main-color-20)));
    background: -webkit-linear-gradient(top, var(--main-color-20) 0%, #ffffff 65%, var(--main-color-20) 100%);
    background: -o-linear-gradient(top, var(--main-color-20) 0%, #ffffff 65%, var(--main-color-20) 100%);
    background: -ms-linear-gradient(top, var(--main-color-20) 0%, #ffffff 65%, var(--main-color-20) 100%);
    background: linear-gradient(to bottom, var(--main-color-20) 0%, #ffffff 65%, var(--main-color-20) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--main-color-20)', endColorstr='var(--main-color-20)', GradientType=0 );
}
#sec-4 .flex-media .w-25 {
    z-index: 1;
}
#sec-4 .flex-media .body > div {
    background-color: #F4F4F4;
    margin-left: -20%;
    padding-left: 22%;
    z-index: 0;
}
#sec-4 li h3,
#sec-4 li p,
#sec-4 .promotion li {
    padding-left: 48px;
}
#sec-4 li h3,
#sec-4 .promotion li {
    position: relative;
}
#sec-4 li h3:before,
#sec-4 .promotion li:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/doublestipe_2x.png') left center no-repeat transparent;
    background-size: auto 28px;
}
#sec-4 .promotion li:before {
    height: 40px;
}
#sec-4 .how-to-use h3 {
    margin-top: -50px;
}
#sec-4 .shopping-p a {
    color: initial;
    text-decoration: underline;
}
#sec-4 .promotion {
    position: relative;
    margin-top: 80px;
}
#sec-4 .promotion:before {
    content: '';
    display: block;
    background-position: left top;
    background-size: contain;
    background-image: url('https://www.jeban.com/spotlight-item/divine-youth-face-oil/promotion_2x.png');
    background-repeat: no-repeat;
    width: auto;
    height: 80px;
    margin-top: -80px;
    margin-bottom: 20px;
}
#sec-4 .promotion h4 {
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: .25rem;
}
@media screen and (min-width: 992px) {
    #sec-4 .remark {
        margin-left: auto;
        width: 80%;
    }
}
@media screen and (max-width: 720px) {
    #sec-4 li h3,
    #sec-4 li p,
    #sec-4 .promotion li {
        padding-left: calc((100vw * 0.046376811594203) + 14.608695652173913px);
    }
    #sec-4 li h3:before,
    #sec-4 .promotion li:before {
        background-size: auto calc((100vw * 0.028985507246377) + 7.130434782608696px);
    }
    #sec-4 .promotion li:before {
        height: calc((100vw * 0.028985507246377) + 7.130434782608696px);   
    }
    #sec-4 .promotion {
        margin-top: calc((100vw * 0.072463768115942) + 27.826086956521739px);
    }
    #sec-4 .promotion:before {
        height: calc((100vw * 0.072463768115942) + 27.826086956521739px);
        margin-top: calc((100vw * -0.072463768115942) - 27.826086956521739px);;
    }
}
@media screen and (max-width: 640px) {
    #sec-4 .how-to-use h3 {
        margin-top: calc((100vw * -0.060377358490566) - 11.358490566037736px);
    }
}