.invisible.visible {
    visibility: visible!important;
}
.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: var(--sub-color)!important;
    color: white!important;
    border: 1px solid white!important;
    box-shadow: none;
    border-radius: 1.75rem;
    padding: .25rem 4rem;
}
@media screen and (max-width: 575px) {
    .btn-user-review {
        padding: .25rem 2rem;
    }
}
.border-main-color {
    border: 2px solid var(--main-color);
}
.mw-100vw {
    /*max-width: 100vw;*/
    max-width: 1280px;
}
.mw-1000px {
    max-width: 1000px;
}
.text-fat {
    transform: scale(1, .9);
}

.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;
    }
}
@media screen and (min-width: 992px) {
    .over-width {
        margin-left: calc(-1 * (50vw - 360px));
        margin-right: calc(-1 * (50vw - 360px));
    }
}
@media screen and (min-width: 1280px) {
    .over-width {
        margin-left: calc(-1 * (640px - 360px));
        margin-right: calc(-1 * (640px - 360px));
    }
}

.cover.over-width {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    height: calc(100vw * 600/1280);

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_green_01.png') center bottom no-repeat transparent;
    background-size: 100vw auto;

    display: flex;
    flex-flow: column;
    align-items: center;

    z-index: 1;
}
.cover.over-width .logo {
    width: calc((100vw * 0.302734375) + 42.5px);
}
.cover.over-width .title {
    width: 62.5%;
}
.cover.over-width .title h1 {
    font-size: calc((100vw * 0.0234375) + 12px);
    position: relative;
}
.cover.over-width .title h1:before,
.cover.over-width .title h1:after {
    content: '\2022';
    position: absolute;
    color: var(--sub-color);
}
.cover.over-width .title h1:before {
    margin-left: calc((100vw * -0.088397790055249) - 36.850828729281768px);
    left: 50%;
}
.cover.over-width .title h1:after {
    margin-right: calc((100vw * -0.088397790055249) - 36.850828729281768px);
    right: 50%;
}
.cover.over-width .title h2 {
    font-size: calc((100vw * 0.0234375) + 14px);
}
.cover.over-width .hero-product-cover {
    position: absolute;
    left: 50%;
    width: calc(100vw * (600 / 1280));
}
.cover.over-width .bubble_top {
    position: absolute;
    right: 46%;
    width: calc((100vw * 0.13671875) + 135px);
    bottom: -130px;
}
@media screen and (min-width: 1280px) {
    .cover.over-width {
        height: 600px;
        background-size: 1280px auto;
    }
    .cover.over-width .logo {
        width: 430px;
    }
    .cover.over-width .title {
        width: 800px;
    }
    .cover.over-width .title h1 {
        font-size: 40px;
    }
    .cover.over-width .title h1:before {
        margin-left: -150px;
    }
    .cover.over-width .title h1:after {
        margin-right: -150px;
    }
    .cover.over-width .title h2 {
        font-size: 42px;
    }
    .cover.over-width .hero-product-cover {
        width: 600px;
    }
    .cover.over-width .bubble_top {
        width: 310px;
    }
}
@media screen and (max-width: 767px) {
    .cover.over-width {
        height: calc((100vw * 0.790816326530612) + 33.443877551020408px);
    }
    .cover.over-width .logo {
        width: 75%;
    }
    .cover.over-width .title {
        width: 75%;
    }
    .cover.over-width .title h1 {
        font-size: calc((100vw * 0.045918367346939) + 4.780612244897959px);
    }
    .cover.over-width .title h2 {
        font-size: calc((100vw * 0.045918367346939) + 6.780612244897959px);
    }
    .cover.over-width .title h1:before {
        margin-left: calc((100vw * -0.165816326530612) - 12.818877551020408px);
    }
    .cover.over-width .title h1:after {
        margin-right: calc((100vw * -0.165816326530612) - 12.818877551020408px);
    }
    .cover.over-width .hero-product-cover {
        left: unset;
        right: 0;
        width: 65%;
        top: calc((100vw * 0.318877551020408) + 30.420918367346939px);
    }
    .cover.over-width .bubble_top {
        right: unset;
        left: 5%;
        width: 52%;
        bottom: calc((100vw * -0.573979591836735) + 0.24234693877551px);
    }
}

#sec-1,
#sec-3 {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_green_02.png') center top no-repeat transparent;
    background-size: 100vw auto;

    display: flex;
    flex-flow: column;
    align-items: center;

    z-index: 0;

    margin-top: calc((100vw * -0.05859375) + 25px);
    padding-top: calc((100vw * 0.05859375) + 45px);
    padding-bottom: 50px;
}
#sec-3 {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_green_03.jpg') center top no-repeat transparent;
    background-size: 100vw auto;
    height: auto;
    margin-top: unset;
    padding-top: 120px;
}
#sec-1 .brush-wrapper,
#sec-3 .brush-wrapper {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    height: calc(100vw * 499 / 1119);

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_brush_01.png') center top no-repeat transparent;
    background-size: contain;
    display: flex;
    flex-flow: column;
    justify-content: space-around;

    line-height: 1.3;
    font-size: calc((100vw * 0.043103448275862) - 5.103448275862069px);
}
@media screen and (max-width: 767px) {
    #sec-1 {
        margin-top: calc((100vw * 0.102040816326531) + 1.73469387755102px);
        padding-top: calc((100vw * 0.408163265306122) - 13.061224489795918px);
    }
    #sec-3 {
        padding-top: calc((100vw * 0.204081632653061) - 36.530612244897959px);
    }
    #sec-1 > .container > .wrapper,
    #sec-3 > .container > .wrapper {
        padding: 0!important;
    }
    #sec-1 .brush-wrapper,
    #sec-3 .brush-wrapper {
        font-size: calc((100vw * 0.053571428571429) + 0.910714285714286px);
        background-size: 100% 100%;
        height: auto;
    }
    #sec-1 .brush-wrapper.d-md-none,
    #sec-3 .brush-wrapper.d-md-none {
        padding-top: calc((100vw * 0.127551020408163) + 2.168367346938776px);
    }
}
@media screen and (min-width: 1000px) {
    #sec-1 .brush-wrapper,
    #sec-3 .brush-wrapper {
        height: 446px;
        font-size: 38px;
    }
}
@media screen and (min-width: 1280px) {
    #sec-1,
    #sec-3 {
        background-size: 1280px auto;
        margin-top: -50px;
        padding-top: 120px;
    }
}


@media screen and (min-width: 768px) {
    #sec-2 .my-5 {
        margin-top: 4rem!important;
        margin-bottom: 4rem!important;
    }
}
@media screen and (min-width: 991px) {
    #sec-2 .my-5 {
        margin-top: 5rem!important;
        margin-bottom: 5rem!important;
    }
}

#sec-3 .text-bigger-20 {
    font-size: 120%;
}
#sec-3 img.items-header {
    width: 60%;
    margin-right: auto;
    display: flex;
    margin-left: 5%;
    z-index: 2;
    position: relative;

    margin-bottom: calc((100vw * -0.176) - 4px);
}
#sec-3 img.bubble {
    width: 47%;
    margin-left: auto;
    margin-right: 2%;
    display: flex;
    z-index: 1;
    position: relative;
}
#sec-3 img.item-435g {
    display: flex;
    width: 60%;
    margin-left: 2%;
    margin-top: calc((100vw * -0.216) + 6px);
}
#sec-3 img.item-50g {
    display: flex;
    margin-left: auto;
    margin-right: 2%;
    width: 35%;
    margin-top: calc(100vw * -.4);
}
#sec-3 img.item-435g-pricetag {
    width: 25%;
    margin-left: 1%;
    display: flex;
    margin-top: calc((100vw * -0.176) - 4px);
}
#sec-3 img.item-50g-pricetag {
    width: 25%;
    display: flex;
    margin-left: auto;
    margin-right: 1%;
    margin-top: calc((100vw * -0.024) + 4px);
}
#sec-3 {
    padding-bottom: calc((100vw * 0.185546875) - 92.5px);
}
@media screen and (max-width: 767px) {
    #sec-3 {
        padding-bottom: calc((100vw * 0.178571428571429) - 41.964285714285714px);
    }
}
@media screen and (min-width: 1000px) {
    #sec-3 {
        padding-bottom: 145px;
    }
    #sec-3 img.items-header {
        margin-bottom: -180px;
    }
    #sec-3 img.item-435g {
        margin-top: -210px;
    }
    #sec-3 img.item-50g {
        margin-top: -400px;
    }
    #sec-3 img.item-435g-pricetag {
        margin-top: -180px;
    }
    #sec-3 img.item-50g-pricetag {
        margin-top: -20px;
    }
}

#sec-4 {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/bg-white-wave.png') center top no-repeat transparent;
    background-size: 100vw auto;

    display: flex;
    flex-flow: column;
    align-items: center;

    z-index: 1;

    margin-top: calc((100vw * -0.1328125) + 20px);
    padding: calc((100vw * 0.1328125) - 20px) 0;
}
#sec-4 .cloud-wrapper {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    display: flex;
    flex-flow: column;
    justify-content: space-around;

    line-height: 1.3;
    font-size: calc((100vw * 0.043103448275862) - 5.103448275862069px);

    /*padding: 5rem 2rem;*/
    padding: 75px 0;
}
#sec-4 .cloud-wrapper.c1 {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/cloud_01.png') center top no-repeat transparent;
    background-size: 100% 100%;
}
#sec-4 .cloud-wrapper.c2 {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/cloud_02.png') center top no-repeat transparent;
    background-size: 100% 100%;
}
#sec-4 .cloud-wrapper.c3 {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/cloud_03.png') center top no-repeat transparent;
    background-size: 100% 100%;
}
@media screen and (max-width: 767px) {
    #sec-4 .cloud-wrapper {
        font-size: calc((100vw * 0.053571428571429) + 0.910714285714286px);
        padding: calc((100vw * 0.051020408163265) + 7.908163265306122px) 0;
    }
}
@media screen and (min-width: 768px) {
    #sec-4 .cloud-wrapper {
        width: 70%;
        /*padding: calc((100vw * 0.107758620689655) - 7.758620689655172) 0;*/
    }
    #sec-4 .cloud-wrapper:nth-child(even) {
        margin-left: auto;
    }
    #sec-4 .cloud-wrapper:not(:last-child) {
        margin-bottom: calc((100vw * -0.107758620689655) + 32.758620689655172px);        
    }
}
@media screen and (min-width: 1000px) {
    #sec-4 .cloud-wrapper {
        font-size: 38px;
        /*padding: 100px 0;*/
    }
    #sec-4 .cloud-wrapper:not(:last-child) {
        margin-bottom: -75px;        
    }
}
@media screen and (min-width: 1280px) {
    #sec-4 {
        background-size: 1280px auto;
        margin-top: calc((1280px * -0.1328125) + 20px);
        padding: calc((1280px * 0.1328125) - 20px) 0;
    }
}

#sec-5 {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    min-height: calc(100vw * 600/1280);

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_green_04.png') center bottom no-repeat transparent;
    background-size: 100vw auto;

    display: flex;
    flex-flow: column;
    align-items: center;

    z-index: 1;
    padding-bottom: calc((100vw * 0.127551020408163) + 2.168367346938776px);
}
#sec-5 h2.top {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/line_bar_01.png') center center no-repeat transparent;
    background-size: contain;
    color: white;
    padding: 1.5rem 0;
}
#sec-5 .container .wrapper {
    padding-left: 0!important;
    padding-right: 0!important;
}
#sec-5 .ingredient-bubbles img {
    display: flex;
    width: 65%;
}
#sec-5 .ingredient-bubbles img.bubble-emollients {
    margin-right: auto;
    margin-top: -10%;
    margin-bottom: -45%
}
#sec-5 .ingredient-bubbles img.bubble-paraben {
    margin-left: auto;
    margin-bottom: -10%;
}
#sec-5 h2.left,
#sec-5 h2.right {
    padding: .5rem 1rem;
    color: white;
    flex: 0 auto;
}
#sec-5 h2.left {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/line_bar_02.png') right center no-repeat transparent;
    background-size: 100% 100%;
    text-align: left;
}
#sec-5 h2.right {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/line_bar_03.png') left center no-repeat transparent;
    background-size: 100% 100%;
    text-align: right;
}
@media screen and (max-width: 575px) {
    #sec-5 h2.top {
        padding: .75rem 0;
    }
}
@media screen and (min-width: 768px) {
    #sec-5 {
        padding-bottom: calc((100vw * 0.09765625) + 25px);
    }
    /*
    #sec-5 h2.right {
        margin-top: -10%;
    }
    */
}
@media screen and (min-width: 1280px) {
    #sec-5 {
        padding-bottom: 150px;
    }
}

 .mw-1000px .max-width {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}
@media screen and (max-width: 575px) {
     .mw-1000px .max-width {
        margin-left: 0;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media screen and (min-width: 1000px) {
    .mw-1000px .max-width {
        margin-left: calc(-1 * (50vw - 500px));
        margin-right: calc(-1 * (50vw - 500px));
        padding-left: calc(50vw - 500px)!important;
        padding-right: calc(50vw - 500px)!important;
    }
}
@media screen and (min-width: 1280px) {
    .mw-1000px .max-width {
        margin-left: calc(-1 * (640px - 500px));
        margin-right: calc(-1 * (640px - 500px));
        padding-left: calc(640px - 500px)!important;
        padding-right: calc(640px - 500px)!important;
    }
}

#sec-6 .how-to-use-heading-img {
    width: 60%;
    margin-top: -5%;
    margin-right: auto;
    display: flex;
}
#sec-6 .how-to-use-product-01 {
    width: 50%;
    margin-left: auto;
    display: flex;
    margin-top: calc((100vw * -0.13671875) - 215px);
    margin-bottom: calc(((100vw * -0.13671875) - 215px) * 3/4);
    position: relative;
}
#sec-6 p {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/how_to_use_01_bg.png') center center no-repeat transparent;
    background-size: 100% 100%;
    padding: 50px;
    padding-left: calc(100vw * 0.09765625);
    margin-left: 50px;
    width: 75%;

    margin-top: calc((100vw * 0.09765625) + 25px);
    position: relative;
}
#sec-6 p:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/how_to_use_01.png') center center no-repeat transparent;
    background-size: 100% 100%;
    left: -25px;
    top: -40px;
}
@media screen and (max-width: 767px) {
    #sec-6 p {
        padding: calc((100vw * 0.063775510204082) + 1.084183673469388px);
        padding-left: calc((100vw * 0.102040816326531) - 3.26530612244898px);
        margin-top: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        margin-left: calc((100vw * 0.127551020408163) - 47.831632653061224px);
    }
    #sec-6 p:before {
        width: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        height: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        left: calc((100vw * -0.025510204081633) - 5.433673469387755px);
        top: calc((100vw * -0.051020408163265) - 0.86734693877551px);
    }
    #sec-6 .how-to-use-product-01 {
        margin-top: calc((100vw * -0.395408163265306) - 16.721938775510204px);
        margin-bottom: calc(((100vw * -0.395408163265306) - 16.721938775510204px) * 3/4);
    }
}
@media screen and (min-width: 1280px) {
    #sec-6 .how-to-use-product-01 {
        margin-top: -320px;
        margin-bottom: -240px;
    }
    #sec-6 p {
        margin-top: 150px;
    }
}

#sec-7 {
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    min-height: calc(100vw * 809/1475);
    padding-bottom: calc((100vw * 0.127551020408163) + 2.168367346938776px);

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/bg-green-outset-shadow.png') center top no-repeat transparent;
    background-size: 100vw auto;

    z-index: 1;
    margin-top: calc((100vw * -0.107421875) - 22.5px);
}
#sec-7 .how-to-use-product-02 {
    width: 100%;
    position: relative;
}
#sec-7 p {
    width: 45%;

    margin-top: calc(((100vw * -0.09765625) - 75px) * 1.25);
    margin-right: calc((100vw * 0.15625) - 100px);
    position: relative;
    text-align: right;
}
#sec-7 p:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/how_to_use_02.png') center center no-repeat transparent;
    background-size: 100% 100%;
    right: 0;
    top: -115px;
}
@media screen and (max-width: 575px) {
    #sec-7 .wrapper.mw-1000px {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}
@media screen and (max-width: 767px) {
    #sec-7 {
        margin-top: calc((100vw * -0.153061224489796) + 12.397959183673469px);
    }
    #sec-7 p {
        margin-top: calc(((100vw * -0.153061224489796) - 32.602040816326531px) * 1.25);
        margin-right: 20px;
    }
    #sec-7 p:before {
        width: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        height: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        top: calc((100vw * -0.165816326530612) + 12.181122448979592px);
    }
}
@media screen and (min-width: 1000px) {
    #sec-7 {
        min-height: calc(1000px * 809/1475);
    }
}
@media screen and (min-width: 1280px) {
    #sec-7 {
        margin-top: -160px;
        background-size: 1280px auto;
        padding-bottom: 165px;
    }
    #sec-7 p {
        margin-top: -250px;
    }
}

#sec-8 {
    background-repeat: no-repeat;
    position: relative;

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/bg-white-inset-shadow.png') center top no-repeat transparent;
    background-size: 100vw auto;

    z-index: 1;
    padding-bottom: calc((100vw * 0.127551020408163) + 2.168367346938776px);
    margin-top: calc((100vw * -0.107421875) - 22.5px);
    padding-top: calc((100vw * 0.107421875) + 22.5px);
}
@media screen and (max-width: 767px) {
    #sec-8 {
        margin-top: calc((100vw * -0.153061224489796) + 12.397959183673469px);
        padding-top: calc((100vw * 0.153061224489796) - 12.397959183673469px);
    }
}
@media screen and (min-width: 1280px) {
    #sec-8 {
        margin-top: -160px;
        padding-top: 160px;
        background-size: 1280px auto;
    }
}
#sec-8 .how-to-use-product-03 {
    width: 50%;
    margin-left: auto;
    display: flex;
    position: absolute;
    right: 0;
    top: calc((100vw * 0.09765625) + 15px);
    z-index: 1
}
#sec-8 p {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/how_to_use_03_bg.png') center center no-repeat transparent;
    background-size: 100% 100%;
    padding: 50px;
    padding-left: calc(100vw * 0.09765625);
    margin-left: 50px;

    margin-top: calc((100vw * 0.09765625) + 25px);
    position: relative;
    text-align: left;

    max-width: 70%;
}
#sec-8 p:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/how_to_use_03.png') center center no-repeat transparent;
    background-size: 100% 100%;
    left: -25px;
    top: -40px;
}
@media screen and (max-width: 767px) {
    #sec-8 p {
        padding: calc((100vw * 0.063775510204082) + 1.084183673469388px);
        padding-left: calc((100vw * 0.102040816326531) - 3.26530612244898px);
        margin-top: calc((100vw * 0.153061224489796) + 12.602040816326531px);
        margin-left: calc((100vw * 0.127551020408163) - 47.831632653061224px);

        width: calc((100vw * 0.538265306122449) + 28.150510204081633px);
    }
    #sec-8 p:before {
        width: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        height: calc((100vw * 0.127551020408163) + 2.168367346938776px);
        left: calc((100vw * -0.025510204081633) - 5.433673469387755px);
        top: calc((100vw * -0.051020408163265) - 0.86734693877551px);
    }
    #sec-8 .how-to-use-product-03 {
        margin-top: calc((100vw * 0.063775510204082) + 26.084183673469388px);
        top: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 850px) {
    #sec-8 p {
        width: 57.5%;
    }
}
@media screen and (min-width: 851px) and (max-width: 991px) {
    #sec-8 p {
        width: 60%;
    }
    #sec-8 .how-to-use-product-03 {

    }
}
@media screen and (min-width: 1280px) {
    #sec-8 {
        padding-bottom: 165px;
    }
    #sec-8 .how-to-use-product-03 {
        top: 140px;
    }
    #sec-8 p {
        margin-top: 150px;
    }
}

#sec-9 {
    background-repeat: no-repeat;
    position: relative;

    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/background_green_02.png') center top no-repeat transparent;
    background-size: 100vw auto;

    z-index: 1;
    margin-top: calc((100vw * 0.263671875) - 257.5px);
    padding-top: calc((100vw * 0.09765625) + 25px);
}
#sec-9 .shopping-frame {
    background: url('https://www.jeban.com/spotlight-item/cetaphil-moisturizing-cream/bubble_watsons_online.png') center center no-repeat transparent;
    background-size: contain;
    height: calc((100vw * 260/1053));
}
@media screen and (max-width: 767px) {
    #sec-9 {
        margin-top: calc((100vw * 0.076530612244898) - 2.449324324324324px);
        padding-top: calc((100vw * 0.127551020408163) + 2.168367346938776px);
    }
}
@media screen and (min-width: 834px) {
    #sec-9 {
        margin-top: calc((100vw * 0.201793721973094) - 178.295964125560538px);
    }
}
@media screen and (min-width: 1280px) {
    #sec-9 {
        margin-top: 80px;
        padding-top: 150px;
        background-size: 1280px auto;
    }
}