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

body {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bg-pattern@2x.png');
    background-position: center top 160px;
    background-size: 640px auto;
}

@media screen and (min-width: 768px) {
    #app {
        padding-top: 56px!important;
    }
}
@media screen and (min-width: 991px) {
    #app {
        padding-top: 93px!important;
    }
}

.spotlight-item-view > .container:not(:first-child) {
  background: white;
  max-width: unset;
  width: auto!important;
}

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

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

.over-width,
.spotlight-item-view > .container > .heading,
.spotlight-item-view > .container:not(:first-child) {
    margin-left: calc(-1 * (50vw - 360px));
    margin-right: calc(-1 * (50vw - 360px));
}
@media screen and (max-width: 991px) {
    .over-width,
    .spotlight-item-view > .container > .heading,
    .spotlight-item-view > .container:not(:first-child) {
        margin-left: calc(-1 * (50vw - 285px));
        margin-right: calc(-1 * (50vw - 285px));
    }
}
@media screen and (max-width: 600px) {
    .over-width,
    .spotlight-item-view > .container > .heading,
    .spotlight-item-view > .container:not(:first-child)  {
        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;
    }
}

.spotlight-item-view > .container > .heading {
    background: white;
    padding-left: calc(50vw - 360px);
    padding-right: calc(50vw - 360px);
}
@media screen and (max-width: 991px) {
    .spotlight-item-view > .container > .heading {
        padding-left: calc(50vw - 285px);
        padding-right: calc(50vw - 285px);
    }
}
@media screen and (min-width: 768px) {
    .spotlight-item-view > .container > .heading {
        border-top: 17px solid white;
    }
}
@media screen and (max-width: 600px) {
    .spotlight-item-view > .container > .heading {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.cover.over-width {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/head.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 800px;
    height: 800px;
    margin-bottom: -800px;
}
@media screen and (max-width: 1135px) {
    .cover.over-width {
        background-position: right calc(-1 * (100vw - 1100px)) top;
    }
}

#sec-3 {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/01.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 600px;
    height: 600px;
    position: relative;
}
#sec-4 ul {
    list-style-type: disc;
    padding-left: 30px;
}
@media screen and (max-width: 480px) {
    #sec-4 {
        margin-top: -60px;
    }
}

#sec-5 {    
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bg-kiehls-since-1851.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 730px auto;
    height: 420px;
    padding-top: 60px;
    margin-top: 60px;
    position: relative;
}
#sec-5 .pin {
    position: absolute;
    width: 36px;
    top: -18px;
    left: 50%;
    margin-left: -18px;
}

#sec-6 .item {
    margin-top: 100px;
    margin-bottom: 100px;
}
#sec-6 .item.left .info-wrapper {
    margin-left: calc(-1 * (50vw - 360px));
    margin-right: 75px;
}
#sec-6 .item.left .info-wrapper .wrapper {
    margin-right: 0;
    padding-left: 75px;
    border-right: var(--sub-color) 25px solid;
}
#sec-6 .item.right .info-wrapper {
    margin-right: calc(-1 * (50vw - 285px));
    margin-left: 75px;
}
#sec-6 .item.right .info-wrapper .wrapper {
    margin-left: 0;
    padding-right: 75px;
    border-left: var(--sub-color) 25px solid;
}
@media screen and (max-width: 991px) {
    #sec-6 .item.left .info-wrapper {
        margin-left: calc(-1 * (50vw - 285px));
    }
    #sec-6 .item.right .info-wrapper {
        margin-right: calc(-1 * (50vw - 285px));
    }
}
@media screen and (max-width: 600px) {
    #sec-6 .item.left .info-wrapper {
        margin-left: -15px;
    }
    #sec-6 .item.right .info-wrapper {
        margin-right: -15px;
    }
}

#sec-7 {    
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/cloth18c.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30.5vw;
    max-height: 220px;
    position: relative;
}

#sec-8 .img-wrapper,
#sec-10 .img-wrapper {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bg-item-day.png');
    background-position: center center;
    background-size: cover;
    height: 590px;
    margin-left: -220px;
    margin-right: -220px;
    margin-bottom: -75px;
}
#sec-10 .img-wrapper {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bg-item-night.png');
}
#sec-8 .img-wrapper img {
    margin-top: 30px;
    height: 530px;
}
#sec-10 .img-wrapper img {
    margin-top: -30px;
    height: 600px;
}
#sec-8 .info-wrapper,
#sec-10 .info-wrapper {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bgproduct01.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 730px auto;
    padding-bottom: 75px;
}
#sec-10 .info-wrapper {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/bgproduct02.png');
}

#sec-9,
#sec-11 {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/cloudbg01.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 1180px auto;
    height: auto;
    padding-top: 236px;
    padding-bottom: 118px;
}
#sec-11 {
    /*background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/cloudbg02.png');*/
    padding-top: 118px;
    padding-bottom: 59px;
    position: relative;
}
#sec-9 .header,
#sec-11 .header {
    border-bottom: 1px dashed black;
    height: 90px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
#sec-9 ul,
#sec-11 ul {
    list-style-type: disc;
    padding-left: 30px;
}
#sec-9 p {
    padding-left: 30px;
    margin-top: 2rem;
}

.sec-11-img-arrow,
.sec-11-img-flower {
    position: absolute;
    width: 30vw;
    max-width: 340px;
}
.sec-11-img-arrow {
    top: 50%;
    right: 50%;
    margin-right: 250px;
}
.sec-11-img-flower {
    top: 30%;
    left: 50%;
    margin-left: 250px;
}
@media screen and (max-width: 991px) {
    .sec-11-img-arrow {
        margin-right: 200px
    }
    .sec-11-img-flower {
        margin-left: 200px
    }
}
@media screen and (max-width: 640px) {
    .sec-11-img-arrow {
        margin-right: 25vw;
        width: 30vw;
        top: 80%;
    }
    .sec-11-img-flower {
        width: 30vw;
        top: 65%;
        margin-left: 30vw;
    }
}

#sec-12 {
    border: 10px solid var(--main-color);
    border-style: solid none;
}

@media screen and  (max-width: 600px) {
    #sec-8 .img-wrapper,
    #sec-10 .img-wrapper {
        height: 98vw;
        margin-left: -36.6vw;
        margin-right: -36.6vw;
        margin-bottom: -12.5vw;
    }
    #sec-8 .img-wrapper img {
        height: 85vw;
    }
    #sec-10 .img-wrapper img {
        height: 98vw;
    }
}
@media screen and (max-width: 1180px) {
    #sec-9,
    #sec-11 {
        background-size: 100vw auto;
        padding-top: 20vw;
        padding-bottom: 10vw;
    }    
    #sec-11 {
        padding-top: 10vw;
        padding-bottom: 5vw;
    }
}

@media screen and (max-width: 1100px) {
    .cover.over-width {
        background-position: right -35px top;
    }
}
@media screen and (max-width: 860px) {
    .cover.over-width {
        background-repeat: no-repeat;
        background-size: 130% auto;
    }
}
#sec-1 {
    padding-top: 130px;
    height: 600px;
}
#sec-1 h1.col-sub-color {
    font-size: 56px;
}
#sec-1 h1.col-main-color {
    font-size: 60px;
}
#sec-1 h2 {
    font-size: 70px;
}
#sec-1 h3 {
    font-size: 40px;
}
#sec-1 hr {
    margin-top: .1rem;
    margin-bottom: 0;
    border: 0;
    border-top: 1px dashed black;
}
#sec-2 {
    position: relative;
}
#sec-2 img {
    width: 150px;
}
@media screen and (max-width: 860px) {
    #sec-1 {
        padding-top: calc(100vw * 130/860);
        height: calc(100vw * 600/860);
    }
    #sec-2 img {
        width: calc(100vw * 150/860);
    }
}
@media screen and (max-width: 800px) {
    #sec-1 h1.col-sub-color {
        font-size: calc(100vw * 28/400);
    }
    #sec-1 h1.col-main-color {
        font-size: calc(100vw * 30/400);
    }
    #sec-1 h2 {
        font-size: calc(100vw * 35/400);
    }
    #sec-1 h3 {
        font-size: calc(100vw * 20/400);
    }
}
@media screen and (max-width: 400px) {
    #sec-1 h1.col-sub-color {
        font-size: 28px;
    }
    #sec-1 h1.col-main-color {
        font-size: 30px;
    }
    #sec-1 h2 {
        font-size: 35px;
    }
    #sec-1 h3 {
        font-size: 20px;
    }
}

.cloud-1, .cloud-2, .cloud-3, .cloud-4 {
    position: absolute;
}
.cloud-1 {
    left: 50%;
    margin-top: -50px;
    margin-left: 340px;
    width: 200px;
}
.cloud-2 {
    width: 178.4px;
    left: 50%;
    margin-left: -470px;
    top: 20%;
}
.cloud-3 {
    right: -90px;
    bottom: -30px;
    width: 22vw;
    max-width: 159px;
}
.cloud-4 {
    transform: rotate(5deg);
    left: -100px;
    bottom: -140px;
    height: 20.8vw;
    max-height: 150px;
}
@media screen and (max-width: 720px) {
    .cloud-3 {
        right: -12.5vw;
        bottom: -4.16vw;
    }
    .cloud-4 {
        left: -13.8vw;
        bottom: -19.4vw;
    }
}
@media screen and (max-width: 1100px) {
    .cloud-1 {
        left: unset;
        right: 0;
        width: 200px;
    }
}
@media screen and (max-width: 991px) {
    .cloud-2 {
        width: 18vw;
        margin-left: -48vw;
    }
}
@media screen and (max-width: 860px) {
    .cloud-1 {
        width: 23vw;
        margin-top: calc(-1 * 6vw);
    }
}

#sec-3 {
    z-index: -1;
}
#sec-4,
#sec-4 h2.col-sub-color {
    position: relative;
}

#sec-6 .item-1 .info-wrapper .wrapper,
#sec-6 .item-3 .info-wrapper .wrapper {
    position: relative;
}
#sec-4:before,
#sec-4:after,
#sec-4 h2.col-sub-color:before,
#sec-4 h2.col-sub-color:after,
#sec-6 .item-1 .info-wrapper .wrapper:before,
#sec-6 .item-1 .info-wrapper .wrapper:after,
#sec-6 .item-3 .info-wrapper .wrapper:before {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    position: absolute;
    content: ' ';
}

#sec-4:before {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/retroflowers05.png');
    z-index: -1;
    width: 56.9vw;
    max-width: 410px;
    height: 35.6vw;
    max-height: 256px;
    left: -260px;
    top: 0;
}
#sec-4:after {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/01retroflowers.png');
    z-index: -1;
    width: 43.8vw;
    max-width: 316px;
    height: 61.3vw;
    max-height: 442px;
    top: -260px;
    right: -200px;
}
#sec-4 h2.col-sub-color:before {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/15-random-thing-pngs-by-heykid-13.png');
    transform: rotate(30deg);
    width: 41.5vw;
    max-width: 299px;
    height: 356px;
    max-height: 49.4vw;
    top: -220px;
    left: -160px;
}
#sec-4 h2.col-sub-color:after {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/19-random-pngs-by-heeykiid-10.png');
    width: 44.44vw;
    max-width: 320px;
    height: 27.2vw;
    max-height: 196px;
    top: -70px;
    right: -220px;
}
#sec-6 .item-1 .info-wrapper .wrapper:before {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/retroflowers02.png');
    transform: rotate(-15deg);
    width: 47.2vw;
    max-width: 340px;
    height: 62.5vw;
    max-height: 450px;
    top: -254px;
    right: -150px;
}
#sec-6 .item-1 .info-wrapper .wrapper:after {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/fruit-14-by-kassilly-11.png');
    width: 45.8vw;
    max-width: 330px;
    height: 30.9vw;
    max-height: 223px;
    bottom: -135px;
    right: -30px;
}
#sec-6 .item-3 .info-wrapper .wrapper:before {
    background-image: url('https://www.jeban.com/spotlight-item/kiehls-uv-defense/lg/15-random-thing-pngs-by-heykid-10.png');
    width: 28vw;
    max-width: 197px;
    height: 30vw;
    max-height: 205px;
    top: -140px;
    right: 0;
}
@media screen and (max-width: 991px) {
    #sec-4:after {
        top: -210px;
        right: -180px;
        transform: rotate(21deg)
    }
    #sec-4 h2.col-sub-color:before {
        left: -220px;
    }
}
@media screen and (max-width: 720px) {
    #sec-4:before {
        top: 0;
        left: -36vw;
    }
    #sec-4:after {
        top: -29vw;
        right: -25vw;
    }
    #sec-4 h2.col-sub-color:before {
        top: -33.5vw;
        left: -22.2vw;
    }
    #sec-4 h2.col-sub-color:after {
        top: -9.7vw;
        right: -30.5vw;
    }
    #sec-6 .item-3 .info-wrapper .wrapper:before {
        right: -4vw;
    }
    #sec-6 .item-1 .info-wrapper .wrapper:before {
        top: -35.33vw;
        right: -20.5vw;
    }
    #sec-6 .item-1 .info-wrapper .wrapper:after {
        bottom: -18.75vw;
        right: -4vw;
    }
    #sec-6 .item-3 .info-wrapper .wrapper:before {
        top: -19vw;
    }
}