.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: 24px;
	text-decoration: none!important;
  padding: 8px 50px;
}
.bg-greentea .btn-user-review {
  background: #F7D30B!important;
  color: white!important;
}
.bg-almond .btn-user-review {
  background: #E68648!important;
  color: white!important;
}
.bg-coconut .btn-user-review {
  background: #00619E!important;
  color: white!important;
}
.bg-sakura .btn-user-review {
  background: #F43B74!important;
  color: white!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;
}
.mw-1280px {
	max-width: 1280px;
}
.mw-1000px {
	max-width: 1000px;
}
.text-fat {
	transform: scale(1, .85);
}
.square-box {
    position: relative;
    /*overflow: hidden;*/
}
.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}

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

.cover.over-width {
	background-image: url('https://www.jeban.com/spotlight-item/sunsilk-natural/-top-bg.jpg');
	background-position: top center;
	background-size: 100% 100%;
	position: relative;
	height: calc(100vw * 900 / 1440);
	display: flex;
	flex-flow: column;
	align-items: center;
	z-index: 1;
}
.cover.over-width .title {
	color: #139A4B;
	height: calc(100vw * 320 / 1280);
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}
.cover.over-width .title h1 {
	font-size: calc(100vw * 80 / 1280);
	font-weight: bold;
}
.cover.over-width .title h2 {
	font-family: 'DB-Heavent-li'!important;
	font-size: calc(100vw * 60 / 1280);
}
.cover.over-width .packshot-image {
	display: flex;
	position: absolute;
	top: calc(100vw * 310 / 1280);
	margin: 0 auto;
	width: calc(100vw * 540 / 1280);
}
.cover.over-width .fruits-image {
	display: flex;
    position: absolute;
    top: calc(100vw * 520 / 1280);
	margin: 0 auto;
    width: calc(100vw * 624 / 1280);
}
@media screen and (max-width: 575px) {
	.cover.over-width {
		height: calc(100vw * 553 / 375);
		background-size: auto calc(100vw * 553 / 375);
	}
	.cover.over-width .title {
		height: calc(100vw * 285 / 375);
	}
	.cover.over-width .title h1 {
		font-size: calc(100vw * 52 / 375);
	}
	.cover.over-width .title h2 {
		font-size: calc(100vw * 32 / 375);
	}
	.cover.over-width .packshot-image {
		top: calc(100vw * 270 / 375);
		width: 90%;
	}
	.cover.over-width .fruits-image {
		top: unset;
		bottom: calc(100vw * -25 / 375);
		width: 100%;
		margin-left: 5%;
	}
}

.bg-wooden {
	background-image: url('https://www.jeban.com/spotlight-item/sunsilk-natural/content-bg-wood.jpg');
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 100vw 100%;
}
@media screen and (max-width: 575px) {
	.bg-wooden {
		background-size: 190vw auto;
	}
}

@media screen and (max-width: 575px) {
	.sunsilk-logo-image {
		width: calc(1000px * 275 / 920);
	}
}

.bg-greentea {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/greentea-bg-box.png') center bottom no-repeat;
	background-size: 100% 100%;
	min-height: calc(100vw * 659 / 1241);
	position: relative;
}
.bg-greentea:before {
	content: '';
    position: absolute;
    background: url(https://www.jeban.com/spotlight-item/sunsilk-natural/greentea-lemon-1.png) center center no-repeat;
    width: 17.5%;
    height: 35%;
    background-size: contain;
    top: 5%;
    left: -6.5%;
}
.bg-almond {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/almond-honey-bg-box.png') center center no-repeat;
	background-size: 100% 100%;
	min-height: calc(100vw * 1098 / 1241);
	position: relative;
}
.bg-almond:before {
	content: '';
    position: absolute;
    background: url(https://www.jeban.com/spotlight-item/sunsilk-natural/almond-honey-oil2.png) center center no-repeat;
    width: 12.5%;
    height: 25%;
    background-size: contain;
    bottom: -2.5%;
    left: -3.5%;
}
.bg-coconut {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/coconut-bg-box.png') center bottom no-repeat;
	background-size: 100% 100%;
	min-height: calc(100vw * 631 / 1241);
	position: relative;
}
.bg-coconut:before {
	content: '';
    position: absolute;
    background: url(https://www.jeban.com/spotlight-item/sunsilk-natural/coconut-1.png) center center no-repeat;
    width: 17.5%;
    height: 35%;
    background-size: contain;
    top: 5%;
    left: -6.5%;
}
.bg-sakura {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/sakura-bg-box.png') center center no-repeat;
	background-size: 100% 100%;
	min-height: calc(100vw * 631 / 1241);
	position: relative;
}
.bg-greentea .greentea-lemon-packshot,
.bg-coconut .coconut-packshot {
	position: absolute;
    top: -30px;
    right: 12%;
    width: 20%;
}
.bg-greentea .greentea-lemon-ingre,
.bg-coconut .coconut-ingre {
	position: absolute;
    top: 20%;
    right: -8%;
    width: 50%;
}
.bg-almond .almond-honey-packshot,
.bg-sakura .sakura-raspberry-packshot {
	position: absolute;
    top: -30px;
    left: 12%;
    width: 20%;
}
.bg-almond .almond-honey-ingre {
	position: absolute;
    top: -11%;
    left: -5%;
    width: 49%;
}
.bg-sakura .sakura-raspberry-ingre {
	position: absolute;
    top: -5%;
    left: -7.5%;
    width: 60%;
}
.bg-almond .almond-honey-serum-packshot {
	position: absolute;
    bottom: -5%;
    right: -25%;
    width: 35%;
}
.ingredient-wrapper .formula-title {
	width: 40%;
	margin-left: 20%;
	margin-top: -3%;
}
.bg-almond .formula-title,
.bg-sakura .formula-title {
	width: 46%;
    margin-left: 45%;
    margin-top: -5%;
}
.bg-sakura .formula-title {
    margin-top: -2.5%;
}
.bg-greentea .info,
.bg-coconut .info {
    margin-left: 3.5%;
    width: 57.75%;
}
.bg-almond .info,
.bg-sakura .info {
    margin-left: 40%;
    width: 57.75%;
}
.bg-almond .info-serum {
    margin-left: 16%;
    width: 57.75%;
    position: absolute;
    bottom: 2.5%;
}
.bg-almond .info-serum .formula-title {
	width: 65%;
	margin: 0 auto;
}
.ingredient-wrapper .info h3 {
    display: inline-block;
    width: auto;
    padding: 0 40px;
    margin: .5rem 0;
    border-radius: 20px;	
}
.bg-greentea h3 {
    background: #7ECFA7;
}
.bg-almond h3 {
	background: #E7A880;
}
.bg-coconut h3 {
	background: #B2DFEB;
}
.bg-sakura h3 {
	background: #FAAAC5;
}
.ingredient-wrapper .info .row {
	width: 94%;
}
.ingredient-wrapper ul {
	align-items: center;
	justify-content: center;
}
.ingredient-wrapper ul li {
	padding: 5px 10px;
	margin: 0 .25rem .5rem;
}
.bg-greentea ul li {
	background: #f9ea94;
}
.bg-almond ul li {
	background: #fec5af;
}
.bg-coconut ul li {
	background: #B2DFEB;
}
.bg-sakura ul li {
	background: #f9b9c6;
}
@media screen and (max-width: 767px) {
	.bg-greentea {
		background-image: none;
		background: #D3EDE1;
		border-bottom: 5px solid #9ED8BB;
	}
	.bg-almond {
		background-image: none;
		background: #fed9ca!important;
		border-bottom: 5px solid #D89F8B;
		padding-bottom: 2rem;
	}
	.bg-coconut {
		background-image: none;
		background: #d9eff5!important;
		border-bottom: 5px solid #B2DFEB;
	}
	.bg-sakura {
		background-image: none;
		background: #fbcbd4!important;
		border-bottom: 5px solid #F43B74;
	}
	.ingredient-wrapper:before {
		display: none;
	}
	.ingredient-wrapper .formula-title {
		width: 490px!important;
    	margin-left: calc((100vw - 490px) / 2)!important;
    	margin-right: calc((100vw - 490px) / 2)!important;
    	margin-top: -65px!important;
	}
	.bg-almond .info-serum .almond-honey-serum-title {
		width: 410px!important;
    	margin-left: calc((100vw - 410px) / 2)!important;
    	margin-right: calc((100vw - 410px) / 2)!important;
		margin-top: unset!important;
	}
	.bg-greentea .greentea-lemon-ingre,
	.bg-almond .almond-honey-ingre,
	.bg-coconut .coconut-ingre,
	.bg-sakura .sakura-raspberry-ingre {
		display: none;
	}
	.ingredient-wrapper .greentea-lemon-packshot,
	.ingredient-wrapper .coconut-packshot {
		top: 10%;
	    right: 2.5%;
	    width: 25%;
	}
	.ingredient-wrapper .almond-honey-packshot,
	.ingredient-wrapper .sakura-raspberry-packshot {
		top: 10%;
	    left: 2.5%;
	    width: 25%;
	}
	.ingredient-wrapper .info {
		margin-top: 15px;
		width: 65%;
	}
	.bg-almond .info,
	.bg-sakura .info {
		margin-left: 30%;
    	width: 70%;
	}
	.ingredient-wrapper .info ul,
	.ingredient-wrapper .info-serum ul {
		width: 100%!important;
	}
	.ingredient-wrapper .info ul li,
	.ingredient-wrapper .info-serum ul li {
		width: 45%;
	}
	.ingredient-wrapper .info ul li span,
	.ingredient-wrapper .info-serum ul li span {
		font-size: 125%;
	}
	.bg-almond .info-serum {
		position: relative;
		width: 100%;
		margin-left: unset;
		margin-top: 2rem;
	}
	.bg-almond .almond-honey-serum-packshot {
		position: relative;
		margin: 0 auto;
		right: unset;
		bottom: unset;
		width: 40%;
	}
}
@media screen and (max-width: 575px) {
	.ingredient-wrapper .formula-title {
		width: 100%!important;
    	margin-left: 0!important;
    	margin-right: 0!important;
    	margin-top: -13%!important;
	}
	.ingredient-wrapper .info {
		margin-left: 0;
		margin-top: 15px;
		width: 60%;
	}
	.ingredient-wrapper .info h3 {
		padding: 0;
		width: 100%;
		font-size: calc(100vw * 25/375);
	}
	.ingredient-wrapper .info p,
	.ingredient-wrapper .info-serum p {
		text-align: left;
		font-size: calc(100vw * 23/375);
	}
	.ingredient-wrapper .info p strong {
		display: block;
		text-align: center;
	}
	.ingredient-wrapper .info p br {
		display: none;
	}
	.ingredient-wrapper .info ul,
	.ingredient-wrapper .info-serum ul {
		font-size: calc(100vw * 20/375);
	}
	.ingredient-wrapper .greentea-lemon-packshot,
	.ingredient-wrapper .almond-honey-packshot,
	.ingredient-wrapper .coconut-packshot,
	.ingredient-wrapper .sakura-raspberry-packshot {
		top: 6%;
	    right: 2%;
	    width: 33%;
	    left: unset;
	}
	.ingredient-wrapper .info .row {
		width: 100%;
	}
	.ingredient-wrapper .info-serum p {
		width: 100%!important;
		text-align: center;
	}
	.bg-almond .info-serum .almond-honey-serum-title {
		width: 80%!important;
		margin-top: unset!important;
	}
}
@media screen and (max-width: 991px) {
	.ingredient-wrapper .info ul,
	.ingredient-wrapper .info-serum ul {
		width: 100%!important;
	}
}
@media screen and (min-width: 768px) and (max-width: 975px) {
	.bg-greentea,
	.bg-coconut {
		background-position: left bottom;
		background-size: calc((100vw * 1.304347826086957) - 41.739130434782609px) calc((100vw * 0.410628019323671) + 249.63768115942029px);
	}
	.bg-greentea .greentea-lemon-ingre,
	.bg-almond .almond-honey-ingre,
	.bg-coconut .coconut-ingre,
	.bg-sakura .sakura-raspberry-ingre {
		display: none;
	}
	.bg-greentea .greentea-lemon-packshot,
	.bg-coconut .coconut-packshot {
		position: absolute;
	    top: 7.5%;
	    right: 2.5%;
	    width: 20%;
	}
	.bg-almond .almond-honey-packshot,
	.bg-sakura .sakura-raspberry-packshot {
		position: absolute;
	    top: 2.5%;
	    left: calc((100vw * 0.410628019323671) - 300.36231884057971px);
	    right: unset;
	    width: 20%;
	}
	.ingredient-wrapper .info {
		width: 75%;
	}

	.bg-almond,
	.bg-sakura {
		background-position: right bottom!important;
		background-size: 1000px 100%!important;
	}
	.bg-almond .info,
	.bg-sakura .info {
		margin-left: calc((100vw * 0.990338164251208) - 593.579710144927536px);
		width: 575px;
	}
	.bg-almond .info-serum {
		width: 575px;
		position: relative;
		padding: 1.5rem 0;
		margin-left: calc((100vw * 0.893719806763285) - 736.376811594202899px);
	}

	.ingredient-wrapper .info ul,
	.ingredient-wrapper .info-serum ul {
		width: 85%!important;
	}
}
@media screen and (min-width: 1000px) {
	.bg-greentea,
	.bg-coconut,
	.bg-sakura {
		min-height: calc(1000px * 659 / 1241)
	}
	.bg-almond {
		min-height: calc(1000px * 1098 / 1241)
	}
}

.how-to-use-title {
	width: 30%;
}
.steps-wrapper {
	display: flex;
	justify-content: space-between;
  padding-right: 3%;
}
.step.square-box {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/how2-bg-circle.png') center center;
	background-size: contain;
	width: 30%;
}
.step.square-box .square-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.step h2 {
	color: #944611;
}
.step p {
	font-size: 30px;
	line-height: 1.25;
}
.step-3 p {
	font-size: 22px;
}
.step img {
	height: 85%;
	position: absolute;
	right: -15%;
	top: 0;
}
.step-3 img {
	height: 75%;
	top: 5%;
	right: -12.5%;
}
@media screen and (max-width: 991px) {
	.step.square-box {
		width: 30%;
	}
	.step p {
		font-size: calc(100vw * 30 / 991);
	}
	.step-3 p {
		font-size: calc(100vw * 22 / 991);
	}
}
@media screen and (max-width: 767px) {
	.how-to-use-title {
		width: 75%;
		max-width: 350px;
	}
	.steps-wrapper {
		flex-flow: column;
    padding-right: 0;
	}
	.step.square-box {
		width: 85%;
		max-width: 420px;
		margin: 1rem auto;
	}
	.step h2 {
		font-size: 50px;
	}
	.step p {
		font-size: 42px;
	}
	.step-3 p {
		font-size: 32px;
	}
}
@media screen and (max-width: 529px) {
	.step h2 {
		font-size: calc(100vw * 50/528);
	}
	.step p {
		font-size: calc(100vw * 42/528);
	}
	.step-3 p {
		font-size: calc(100vw * 32/528);
	}
}


#new-sec-7 .wrapper {
	background: url('https://www.jeban.com/spotlight-item/sunsilk-natural/cart-wrapper-bg.png') center top 32px no-repeat;
	background-size: 100% 100%;
}
#new-sec-7 .cart-header {
    padding: 10px 50px;
    border-radius: 50px;
    color: #ffffff;
    background-color: #139B4C;
    line-height: 0.8;
}
#new-sec-7 p span {
	color: #FC1540;
}
@media screen and (max-width: 575px) {
	#new-sec-7 .wrapper {
		background-size: 150% 100%;
	}
	#new-sec-7 .cart-header {
		padding: 8px 20px;
		border-radius: 40px;
	}
	#new-sec-7 .cart-header img {
		height: calc((100vw * 0.03) + 30.75px);
	}
	#new-sec-7 .lazada img {
		height: calc((100vw * 0.08) + 18px);
	}
	#new-sec-7 p br {
		display: none;
	}
}

#new-sec-2, #new-sec-3, #new-sec-4, #new-sec-5 {
	margin-top: 100px!important;
}

.overlapped-left {
	position: absolute;
	z-index: 2;
	left: 0;
	top: calc(100vw * 500 / 1280);
	width: calc(100vw * 242 / 1280);
}

.overlapped-right {
	position: absolute;
	z-index: 2;
	right: 0;
	top: calc(100vw * 450 / 1280);
	width: calc(100vw * 150 / 1280);
}

#new-sec-7 {
	position: relative;
}
.overlapped-footer-left {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: calc(100vw * 120 / 1280);
}
.overlapped-footer-right {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 25%;
	width: calc(100vw * 100 / 1280);
}