.shadow-top-only {
    box-shadow: 0 -4px 5px -2px rgba(0, 0, 0, .14);
}
.shadow-bottom-only {
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .14);
}

.spotlight-item-view .container {
    overflow-x: visible;
}

.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;
    }
}

.cover.over-width {
    background-image: url('https://www.jeban.com/spotlight-item/namu-life/gold02_2x.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 589px;
    height: 589px;
    margin-bottom: -589px;
}
@media screen and (max-width: 1080px) {
    .cover.over-width {
        background-size: auto calc(100vw * 589/1080);
        height: calc(100vw * 589/1080);
        margin-bottom: calc(-100vw * 589/1080);
    }
}
@media screen and (max-width: 375px) {
    .cover.over-width {
        background-size: auto calc(375px * 589/1080);
        height: calc(375px * 589/1080);
        margin-bottom: calc(-375px * 589/1080);
    }
}
.over-width > .container {
    max-width: 1218px!important;
}

:root {
    --sec2-gradient-top: #FDF0DF;
    --sec2-gradient-bottom: #FCE7C7;
    --sec3-gradient-top: #FCE7C7;
    --sec3-gradient-bottom: #FFFFFF;
    --sec5-gradient-top: #FFFFFF;
    --sec5-gradient-bottom: #FFF2E4;
    --sec6-gradient-top: #FFF2E4;
    --sec6-gradient-bottom: #FFFFFF;

    --col-ruby: #E21168;
}

.col-ruby {
    color: var(--col-ruby);
}
.bg-ruby {
    background-color: var(--col-ruby);
}

.bg-gradient-sec2 {
    background: -moz-linear-gradient(top, var(--sec2-gradient-top) 0%, var(--sec2-gradient-bottom) 100%);
    background: -webkit-linear-gradient(top, var(--sec2-gradient-top) 0%, var(--sec2-gradient-bottom) 100%);
    background: linear-gradient(to bottom, var(--sec2-gradient-top) 0%, var(--sec2-gradient-bottom) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--sec2-gradient-top)', endColorstr='var(--sec2-gradient-bottom)', GradientType=0);
}
.bg-gradient-sec3 {
    background: -moz-linear-gradient(top, var(--sec3-gradient-top) 0%, var(--sec3-gradient-bottom) 100%);
    background: -webkit-linear-gradient(top, var(--sec3-gradient-top) 0%, var(--sec3-gradient-bottom) 100%);
    background: linear-gradient(to bottom, var(--sec3-gradient-top) 0%, var(--sec3-gradient-bottom) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--sec3-gradient-top)', endColorstr='var(--sec3-gradient-bottom)', GradientType=0);
}
.bg-gradient-sec5 {
    background: -moz-linear-gradient(top, var(--sec5-gradient-top) 0%, var(--sec5-gradient-bottom) 100%);
    background: -webkit-linear-gradient(top, var(--sec5-gradient-top) 0%, var(--sec5-gradient-bottom) 100%);
    background: linear-gradient(to bottom, var(--sec5-gradient-top) 0%, var(--sec5-gradient-bottom) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--sec5-gradient-top)', endColorstr='var(--sec5-gradient-bottom)', GradientType=0);
}
.bg-gradient-sec6 {
    background: -moz-linear-gradient(top, var(--sec6-gradient-top) 0%, var(--sec6-gradient-bottom) 100%);
    background: -webkit-linear-gradient(top, var(--sec6-gradient-top) 0%, var(--sec6-gradient-bottom) 100%);
    background: linear-gradient(to bottom, var(--sec6-gradient-top) 0%, var(--sec6-gradient-bottom) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--sec6-gradient-top)', endColorstr='var(--sec6-gradient-bottom)', GradientType=0);
}

#sec-0 {
    height: 589px;
}
#sec-0 .brand-logo {
    height: 260px;
    width: 260px;
    margin-top: -40px;
    margin-bottom: -40px;
}
#sec-0 h1, #sec-0 h2 {
    line-height: .9;
    transform: scale(1, .9)
}
.font-fatter {
    line-height: .9;
    transform: scale(1, .9)
}
#sec-0 h1 {
    font-size: calc(1080px * 30/375);
}
#sec-0 h2 {
    font-size: calc(1080px * 35/375);
}
#sec-0 p {
    font-size: calc(1080px * 13/375);
}
@media screen and (max-width: 1080px) {
    #sec-0 {
        height: calc(100vw * 589/1080);
    }
    #sec-0 .brand-logo {
        height: calc(100vw * 260/1080);
        width: calc(100vw * 260/1080);
        margin-top: calc(-100vw * 40/1080);
        margin-bottom: calc(-100vw * 40/1080);
    }
    #sec-0 h1 {
        font-size: calc(100vw * 30/375);
    }
    #sec-0 h2 {
        font-size: calc(100vw * 35/375);
    }
    #sec-0 p {
        font-size: calc(100vw * 13/375);
    }
}
@media screen and (max-width: 375px) {
    #sec-0 {
        height: calc(375px * 589/1080);
    }
    #sec-0 .brand-logo {
        height: calc(375px * 260/1080);
        width: calc(375px * 260/1080);
        margin-top: calc(-375px * 40/1080);
        margin-bottom: calc(-375px * 40/1080);
    }
    #sec-0 h1 {
        font-size: 30px;
    }
    #sec-0 h2 {
        font-size: 35px;
    }
    #sec-0 p {
        font-size: 13px;
    }
}
.w-90 {
    width: 90%;
}
.w-65 {
    width: 65%;
}
.w-40 {
    width: 40%;
}
.wrapper.p-0 {
    padding: 0!important;
}

#sec-1 h2 {
    position: relative;
}
#sec-1 h2:after {
    content: ' ';
    bottom: 0;
    right: -75px;
    background: url('https://www.jeban.com/spotlight-item/namu-life/group_523_2x.png') center bottom no-repeat;
    background-size: contain;
    width: 380px;
    height: 510px;
    position: absolute;
}
@media screen and (max-width: 1080px) {
    #sec-1 h2:after {
        right: calc(-100vw * 75/1080);
        width: calc(100vw * 380/1080);
        height: calc(100vw * 500/1080);
    }
}

#sec-2 ul li {
    padding: 2rem 3.5rem!important;
    padding-right: 60px!important;
    margin-right: 55px;
    position: relative;
}
#sec-2 ul li:after {
    content: ' ';
    bottom: 50%;
    margin-bottom: -62.5px;
    right: 0;
    margin-right: -62.5px;
    background: url('https://www.jeban.com/spotlight-item/namu-life/group_520_2x.png') right center no-repeat;
    background-size: contain;
    width: 125px;
    height: 125px;
    position: absolute;
}
#sec-2 ul li strong {
    position: relative;
}
#sec-2 ul li strong:before {
    content: '\2022';
    color: var(--col-ruby);
    left: -1.25rem;
    position: absolute;
}

@media (max-width: 768px) { 
    #sec-2 ul li {
        padding: 1.25rem 3rem!important;
        padding-right: 55px!important;
        margin-right: 45px;
        position: relative;
    }
    #sec-2 ul li:after {
        margin-bottom: -50px;
        margin-right: -50px;
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 576px) { 
    #sec-2 ul li {
        padding: 1rem 2.5rem!important;
        padding-right: 50px!important;
        margin-right: 35px;
        position: relative;
    }
    #sec-2 ul li:after {
        margin-bottom: -45px;
        margin-right: -45px;
        width: 90px;
        height: 90px;
    }
}

.arrowbox {
    background: url('https://www.jeban.com/spotlight-item/namu-life/chevron-bg.png') right center no-repeat transparent;
    background-size: 100% 100%;    
}
.arrowbox li {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.arrowbox li:first-child {
    padding-left: 6%;
    padding-right: 1%!important;
}
.arrowbox li:last-child {
    padding-right: 5%;
}
.arrowbox li strong {
    font-weight: normal
}

#sec-4 .div-bullet-ruby .col-12:first-child,
#sec-4 ul.list-bullet-ruby li {
    position: relative;
    padding-left: 2rem;
}
#sec-4 .div-bullet-ruby .col-12:first-child {
    padding-left: 3rem;
}
#sec-4 .div-bullet-ruby .col-12:first-child {
    font-weight: bold;
}
#sec-4 .div-bullet-ruby .col-12:first-child:before,
#sec-4 ul.list-bullet-ruby li:before {
    content: '\2022';
    color: var(--col-ruby);
    left: 0;
    position: absolute;
}
#sec-4 .div-bullet-ruby .col-12:first-child:before {
    left: 1rem;
}
#sec-4 .col-12.col-sm-6 img {
    width: 75%
}
@media screen and (max-width: 581px) {
    #sec-4 .div-bullet-ruby .col-12:last-child {
        padding-left: 3rem;
    }
    #sec-4 .col-12.col-sm-6 img {
        width: 50%
    }
}

#sec-5 .item img,
#sec-6 .item img {
    max-width: 60%;
}
#sec-5 .item .info-wrapper,
#sec-6 .item .info-wrapper {
    margin-top: -8%;
    padding-top: 10%;
}
#sec-5 .item.left .info-wrapper,
#sec-6 .item.left .info-wrapper {
    margin-left: calc(-1 * ((100vw -720px) / 2));
}
#sec-5 .item.left .info-wrapper .wrapper,
#sec-6 .item.left .info-wrapper .wrapper {
    margin-right: 0;
}
#sec-5 .item.right .info-wrapper,
#sec-6 .item.right .info-wrapper {
    margin-right: calc(-1 * ((100vw -720px) / 2));
}
#sec-5 .item.right .info-wrapper .wrapper,
#sec-6 .item.right .info-wrapper .wrapper {
    margin-left: 0;
}
@media screen and (max-width: 581px) {
    #sec-5 .item.left .info-wrapper,
    #sec-6 .item.left .info-wrapper {
        margin-left: 0;
    }
    #sec-5 .item.left .info-wrapper,
    #sec-6 .item.left .info-wrapper {
        margin-right: 1rem;
    }
    #sec-5 .item.right .info-wrapper,
    #sec-6 .item.right .info-wrapper {
        margin-right: 0;
    }
    #sec-5 .item.right .info-wrapper,
    #sec-6 .item.right .info-wrapper {
        margin-left: 1rem;
    }
}


#sec-8 > .container {
    background-color: #FCE8CD;
    border-bottom: 10px solid var(--col-ruby);
}

.products-wrapper .items-wrapper .jeban-selected-product {
  flex: 1 1 0;
}