<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
  --main-color: #F0E959;
  --main-color-50: #f8f4ac;
  --main-color-20: #fcfbde;
  --sub-color: #070707;
  --sub-color-50: #838383;
  --sub-color-20: #cecece;
}
.bg-main-color {
    background-color: var(--main-color) !important;
    color: white;
}
.col-main-color {
    color: var(--main-color) !important;
}
.bg-main-color-50 {
    background-color: var(--main-color-50) !important;
    color: black;
}
.col-main-color-50 {
    color: var(--main-color-50) !important;
}
.bg-main-color-20 {
    background-color: var(--main-color-20) !important;
    color: black;
}
.col-main-color-20 {
    color: var(--main-color-20) !important;
}
.bg-sub-color {
    background-color: var(--sub-color) !important;
}
.col-sub-color {
    color: var(--sub-color) !important;
}
.bg-sub-color-50 {
    background-color: var(--sub-color-50) !important;
}
.col-sub-color-50 {
    color: var(--sub-color-50) !important;
}
.bg-sub-color-20 {
    background-color: var(--sub-color-20) !important;
}
.col-sub-color-20 {
    color: var(--sub-color-20) !important;
}

.border-main-color {
	border-color: var(--main-color)!important;
}
.border-main-color-50 {
	border-color: var(--main-color-50)!important;
}
.border-main-color-20 {
	border-color: var(--main-color-20)!important;
}
	.font-22 {
		font-size: 22px;
	}
	.font-30 {
		font-size: 30px;
	}
	.font-16 {
		font-size: 16px;
	}
	.font-20 {
		font-size: 20px;
	}
@media  screen and (min-width: 420px) {
			.font-22 {
			font-size: calc(100vw * 22/420);
		}
			.font-30 {
			font-size: calc(100vw * 30/420);
		}
			.font-16 {
			font-size: calc(100vw * 16/420);
		}
			.font-20 {
			font-size: calc(100vw * 20/420);
		}
	}
@media  screen and (min-width: 640px) {
			.font-22 {
			font-size: calc(640px * 22/420);
		}
			.font-30 {
			font-size: calc(640px * 30/420);
		}
			.font-16 {
			font-size: calc(640px * 16/420);
		}
			.font-20 {
			font-size: calc(640px * 20/420);
		}
	}
.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: white!important;
    border-color: var(--sub-color)!important;
    color: var(--sub-color)!important;
    border-radius: 2px;
    text-decoration: none!important;
}
.border-main-color {
    border: 2px solid var(--main-color);
}
.border-main-bottom {
    border-bottom: 10px solid var(--main-color);
}
.w-20 {
    width: 20%!important;
}
.mw-100vw {
    /*max-width: 100vw;*/
    max-width: 1280px;
}
.mw-1280px {
    max-width: 1280px;
}
.mw-1000px {
    max-width: 1000px;
}
.text-fat {
    transform: scale(1, .85);
}

.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 &gt; .container .wrapper:not(.px-0) {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
}

.spotlight-item-view {
    background-repeat: repeat-y;
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/bg-page.png');
    background-position: center top;
    background-size: cover;
}
.spotlight-item-view &gt; .container:not(:first-child) {
  background: white;
  max-width: unset;
  width: auto!important;
}

/*
.cover.over-width {
    background-repeat: no-repeat;
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/bg-page.png');
    background-position: center top;
    background-color: #f6f6f6;
    background-size: cover;
}
*/
.cover.over-width .title {
    position: relative;
    padding: calc(100vw * 5 / 128) 0;
}
.cover.over-width .title:after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/glow_spot_yellow.png');
    background-position: left bottom;
    background-size: contain;
    left: 0;
    bottom: -5%;
    width: 100%;
    height: 45%;
}
.cover.over-width img {
    transition: all linear 300ms;
}
.over-width img.logo {
    width: 30%;
    margin-bottom: calc(100vw * 5 / 256);
}
.cover.over-width h1 {
    font-size: calc((100vw * 11/256) + 17px);
}
.cover.over-width h2 {
    font-size: calc((100vw * 1/64) + 14px);
    margin: calc(100vw * 5 / 512) 0;
}
.cover.over-width h3 {
    font-size: calc((100vw * 5/128) + 2px);
    margin: calc(100vw * 5 / 128) 0 0;
}
@media screen and (max-width: 575px) {
    .cover.over-width .title:after {
        height: 35%;
    }
    .over-width img.logo {
        width: 75%;
    }
    .cover.over-width img.main {
        max-width: unset!important;
        width: 200%;
        margin-left: -65%;
    }
    .cover.over-width h1 {
        font-size: calc((100vw * 0.129353233830846) - 2.507462686567164px);
        line-height: .9;
    }
    .cover.over-width h2 {
        font-size: calc((100vw * 0.069651741293532) - 0.119402985074627px);
    }
    .cover.over-width h3 {
        font-size: calc((100vw * 0.099502487562189) + 0.686567164179104px);
    }
}
@media screen and (min-width: 1280px) {
    .cover.over-width {
        background-size: 1280px auto;
    }
    .cover.over-width .title {
        padding-bottom: 50px;
    }
    .over-width img.logo {
        margin: 50px 0 25px;
    }
    .cover.over-width h1 {
        font-size: 72px;
    }
    .cover.over-width h2 {
        font-size: 34px;
        margin: 12.5px 0;
    }
    .cover.over-width h3 {
        font-size: 52px;
        margin: 50px 0 0;
    }
}

#sec-1 {    
    background-repeat: no-repeat;
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/text_highlight_2x.png');
    background-position: center top;
    background-color: #f6f6f6;
    background-size: 101vw auto;
    height: calc(100vw * 1358 / 2888);

    display: flex;
    justify-content: center;
    align-items: center;
}
#sec-1 .wrapper.mw-1000px {
    margin-top: 10%;
}
#sec-1 .wrapper.mw-1000px p {
    font-size: calc((100vw * 0.03125) + 6px);
}
@media screen and (max-width: 575px) {
    #sec-1 {
        height: calc(100vw * 500 / 376);
        background-size: 300vw auto;
        background-position: right -40px top;
    }
    #sec-1 .wrapper.mw-1000px {
        margin-top: 0;
    }
    #sec-1 .wrapper.mw-1000px p {
        font-size: calc((100vw * 0.079601990049751) + 0.149253731343284px);
    }
}
@media screen and (min-width: 1280px) {
    #sec-1 {
        background-size: 1280px auto;
        height: calc(1280px * 1358 / 2888);        
    }
    #sec-1 .wrapper.mw-1000px p {
        font-size: calc((1280px * 0.03125) + 6px);
    }
}

#sec-2 {
    padding-bottom: 100px;
}
#sec-2 h2 {
    font-family: 'DB-Heavent-li'!important;
    font-size: calc((100vw * 0.028409090909091) + 29.636363636363636px);
}
#sec-2 h1 {
    font-size: calc((100vw * 0.028409090909091) + 39.636363636363636px);
}
#sec-2 h3 {
    font-size: calc((100vw * 0.014204545454545) + 21.818181818181818px);
}
@media screen and (max-width: 575px) {

}
@media screen and (min-width: 1280px) {
    #sec-2 h2 {
        font-size: 66px;
    }
    #sec-2 h1 {
        font-size: 76px;
    }
    #sec-2 h3 {
        font-size: 40px;
    }
}
@media screen and (min-width: 768px) and (max-width: 850px) {
    .wrapper.mw-1000px {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
}
@media screen and (max-width: 575px) {
    #sec-2 img.cream-body {
        width: 55%;
        margin-left: 50%;
        margin-bottom: -7.5%;
        transform: rotate(-25deg);
    }
}
@media screen and (min-width: 576px) {
    #sec-2 img.cream-body {
        width: 35%;
        margin-left: 65%;
        margin-bottom: -25%;
    }
    #sec-2 img.bubble_clean-shield {
        width: 55%;
        margin-right: 25%;
    }
    #sec-2 img.bubble_hyaluronic {
        width: 60%;
        margin-right: 40%;
    }

    #sec-2 ul,
    #sec-2 ul h4 {
        font-size: calc((100vw * 0.02122641509434) + 10.773584905660377px)!important;
    }
    #sec-2 ul.clean-shield-ul {
        width: calc((100vw -30px) * .5);
        margin-left: calc((100vw -30px) * .45);
    }
    #sec-2 ul.glycerol-ul {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        width: calc((100vw -30px) * .5);
        margin-left: calc((100vw -30px) * .45);
        /*margin-top: calc(((100vw - 30px) * .6 * 1650 / 2193 * -1) - 4rem);*/
        margin-top: calc((100vw * -0.424528301886792) - 25.471698113207547px);
        height: calc((100vw * 0.127840909090909 + 86.363636363636364px) + 1rem);
    }
    #sec-2 ul.hyaluronic-ul {
        /*margin-top: calc((100vw * 0.235849056603774) + 4.150943396226415px);*/
        margin-top: calc((100vw * 0.235849056603774) - 55.849056603773585px);
        max-width: 50%;
    }
    #sec-2 ul.sunflower-seed-ul {
        margin-top: calc((100vw * -0.216981132075472) + 49.981132075471698px);
        margin-bottom: calc((100vw * 0.117924528301887) - 17.924528301886792px);
        max-width: 65%;
    }

    #sec-2 .group-of-3-wrapper {
        margin-top: calc((100vw * -0.070754716981132) - 89.245283018867925px);
    }
    #sec-2 img.bubble_group-of-3 {
        width: 50%;
        margin-left: 50%;
    }

    #sec-2 .claim-ref {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 1000px) {
    #sec-2 ul,
    #sec-2 ul h4 {
        font-size: 32px!important;
    }
    #sec-2 ul.clean-shield-ul {
        width: 650px;
        margin-left: 450px;
    }
    #sec-2 ul.glycerol-ul {
        width: 650px;
        margin-left: 450px;
        /*margin-top: -500px;*/
        margin-top: -450px;
        height: 250px;
    }    
    #sec-2 ul.hyaluronic-ul {
        margin-top: 180px;
    }
    #sec-2 ul.sunflower-seed-ul {
        margin-top: -167px;
        margin-bottom: 100px;
    }

    #sec-2 .group-of-3-wrapper {
        margin-top: -160px;
    }

    #sec-2 .claim-ref {
        width: 800px;
    }
}

#sec-3 {
    padding: 1.25rem 0;
}
#sec-3 &gt; .container {
    position: relative;
}
#sec-3 &gt; .container:before,
#sec-3 &gt; .container:after {
    position: absolute;

    content: '';
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/fade-shadow-top.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    width: 100%;
    padding-bottom: 1rem;
}
#sec-3 &gt; .container:before {
    background-position: center bottom;
    top: 0;
    margin-top: -1rem;
}
#sec-3 &gt; .container:after {
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/fade-shadow-bottom.png');
    background-position: top bottom;
    bottom: 0;
    margin-bottom: -1rem;
}

#sec-4 {
    padding-top: 50px;
}
#sec-4 .container {
    position: relative;
    z-index: 2;
}
#sec-4 h3 {
    font-size: calc((100vw * 0.047169811320755) + 2.830188679245283px);
}
#sec-4 ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 1.5rem;
}
#sec-4 ul li {
    margin-bottom: .5rem;
}
#sec-4 img.how-to-use-hands {
    margin-top: calc((100vw * -0.653409090909091) + 116.363636363636364px);
    position: relative;
    z-index: 0;
}
@media screen and (max-width: 575px) {
    #sec-4 h3 {
        font-size: calc((100vw * 0.1) + 2.5px);
        line-height: .9;
    }
    #sec-4 img.product-2 {
        margin-bottom: calc((100vw * -1.35) + 36.25px);
    }
    #sec-4 img.how-to-use-hands {
        margin-top: calc((100vw * -.5) - 112.5px);
    }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    #sec-4 .wrapper {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
}
@media screen and (min-width: 576px) {
    #sec-4 img.product-2 {
        width: 120%;
        height: auto;
        margin-left: -10%;
        margin-bottom: calc((100vw * -0.542452830188679) - 7.547169811320755px);
    }
}
@media screen and (min-width: 768px) {
    #sec-4 ul {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    #sec-4 .how-to-use-wrapper ul {
        width: 100%;
    }
}
@media screen and (min-width: 1000px) {
    #sec-4 h3 {
        font-size: 50px;
    }
    #sec-4 img.product-2 {
        margin-bottom: -550px;
    }
}
@media screen and (min-width: 1280px) {
    #sec-4 img.how-to-use-hands {
        margin-top: -720px;
    }
}

#sec-5 {    
    background-repeat: no-repeat;
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/fong_2x.png');
    background-position: center bottom;
    background-size: 101vw auto;
    min-height: calc(100vw * 866 / 2888);

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: calc((100vw * -0.142045454545455) - 18.181818181818182px);
}
#sec-5 .wrapper.mw-1000px {
    padding-top: 30%;
}
#sec-5 .wrapper.mw-1000px p {
    font-size: calc((100vw * 0.03125) + 6px);
}
#sec-5 .wrapper.mw-1000px p.smaller-p {
    font-size: calc((100vw * 0.028409090909091) + 5.636363636363636px);
}
@media screen and (max-width: 575px) {
    #sec-5 {
        margin-top: 0;
    }
    #sec-5 .wrapper.mw-1000px {
        margin-top: 0;
    }
    #sec-5 .wrapper.mw-1000px p {
        margin-bottom: calc((100vw * 0.1) + 2.5px)!important;
        line-height: 1;
    }
    #sec-5 .wrapper.mw-1000px p:not(.smaller-p) {
        font-size: calc((100vw * 0.1) + 2.5px);
    }
    #sec-5 .wrapper.mw-1000px p.smaller-p {
        font-size: calc((100vw * 0.1) - 3.5px);
    }
}
@media screen and (min-width: 1280px) {
    #sec-5 {
        background-size: 1280px auto;
        height: calc(1280px * 866 / 2888);        
    }
    #sec-5 .wrapper.mw-1000px p {
        font-size: calc((1280px * 0.03125) + 6px);
    }
    #sec-5 .wrapper.mw-1000px p.smaller-p {
        font-size: 42px;
    }
}

#sec-6 {
    padding-top: 1.25rem;
}
#sec-6 &gt; .container {
    position: relative;
}
#sec-6 &gt; .container:before {
    position: absolute;

    content: '';
    background-image: url('https://www.jeban.com/spotlight-item/dramatically-different-hydrating-jelly/fade-shadow-top.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 1rem;
    margin-top: -1rem;
}
#sec-6 p {
    padding: calc(((100vw * 0.025568181818182) + 7.272727272727273px) * 2) 0;
    font-size: calc((100vw * 0.025568181818182) + 7.272727272727273px);
}
#sec-6 strong.large {
    font-size: calc((100vw * 0.042613636363636) + 13.454545454545455px);
}
#sec-6 hr {
    border-width: 2px;
    border-color: black;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 575px) {
    #sec-6 hr {
        border-width: 1px;
        border-color: black;
        width: 25%;
    }
    #sec-6 p {
        font-size: calc((100vw * .1) - 15.5px);
    }
    #sec-6 strong.large {
        font-size: calc((100vw * 0.13) - 6.75px);
    }
}
@media screen and (min-width: 1280px) {
    #sec-6 p {
        padding: 80px 0;
        font-size: 40px;
    }
    #sec-6 strong.large {
        font-size: 68px;
    }
}</pre></body></html>