﻿

#Home {
    position: relative;
    width: 100%;
}

    #Home p {
        margin: 0 0 25px;
        font-family: 'Halogen';
        font-size: 16px;
        color: black;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.125px;
    }

    #Home .h1 {
        margin: 0 0 30px;
        font-family: 'LoveYaLikeASister-Regular';
        font-size: 30px;
        color: #674130;
        line-height: 22px;
        text-align: center;
        letter-spacing: 2.768px;
        text-transform: uppercase;
    }

    #Home .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8.065vw;
        width: 90%;
        margin: auto;
        max-width: 77.581vw;
    }

    #Home .footer2 {
        position: absolute;
        right: -10.5vw;
        bottom: -0.689vw;
        width: 10.608vw;
    }

.owl-carousel .owl-dots .owl-dot span {
    background: rgba(231, 74, 72, 0.54);
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
    background: #e74a48;
}

#owl-News .owl-stage-outer,
#owl-Banner .owl-stage-outer,
#owl-Product .owl-stage-outer {
    overflow: visible;
}

#owl-Product .owl-item {
    z-index: 1;
}

    #owl-Product .owl-item.active {
        z-index: 2;
    }

#owl-Product .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

#owl-Product .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

    #owl-Product .owl-nav .owl-prev,
    #owl-Product .owl-nav .owl-next {
        position: absolute;
        font-size: 0;
        width: 4.122vw;
        height: 3.851vw;
        background-size: cover;
        transform: translateY(-50%);
        background-position: center;
        background-repeat: no-repeat;
        -moz-transition: background-image 300ms;
        -webkit-transition: background-image 300ms;
        -o-transition: background-image 300ms;
        transition: background-image 300ms;
    }

    #owl-Product .owl-nav .owl-prev {
        left: 1%;
        background-image: url(../images/Home/arrowLeft.png);
    }

        #owl-Product .owl-nav .owl-prev:hover {
            background-image: url(../images/Home/arrowLeft2.png);
        }

    #owl-Product .owl-nav .owl-next {
        right: 1%;
        background-image: url(../images/Home/arrowRight.png);
    }

        #owl-Product .owl-nav .owl-next:hover {
            background-image: url(../images/Home/arrowRight2.png);
        }

#owl-Product .owl-dots {
    margin: 0;
    bottom: 0;
}

#owl-News .owl-item {
    opacity: 0;
    -moz-transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}

    #owl-News .owl-item.active {
        opacity: 1;
    }

.banner {
    position: relative;
    width: 100%;
}

    .banner .bg {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        display: block;
    }

    .banner.one .oneBg,
    .banner.two .twoBg,
    .banner.three .threeBg {
        opacity: 1;
    }

    .banner .item {
        position: relative;
        width: 100%;
    }

        .banner .item .img {
            position: relative;
            z-index: 2;
        }

    .banner #one .object1 {
        position: absolute;
        top: -2.392vw;
        left: -3.73vw;
        width: 13.581vw;
    }

    .banner #one .object2 {
        position: absolute;
        top: 12.541vw;
        left: 1.149vw;
        width: 10.135vw;
    }

    .banner #one .object3 {
        position: absolute;
        top: 4.541vw;
        left: 12.649vw;
        width: 9.392vw;
    }

    .banner #one .object4 {
        position: absolute;
        top: 14.041vw;
        right: 4.649vw;
        width: 12.703vw;
    }

    .banner #one .object5 {
        position: absolute;
        top: 26.041vw;
        right: 9.649vw;
        width: 3.784vw;
    }

    .banner #one .object6 {
        position: absolute;
        top: 31.041vw;
        right: 1.049vw;
        width: 10.527vw;
    }

    .banner #one .object7 {
        position: absolute;
        top: 36.108vw;
        left: 2.27vw;
        width: 11.419vw;
    }

    .banner #one .object8 {
        position: absolute;
        top: 36.441vw;
        left: 20.249vw;
        width: 9.392vw;
    }

    .banner #one .object9 {
        position: absolute;
        top: 28.841vw;
        left: 33.649vw;
        width: 18.446vw;
    }

    .banner #one .object10 {
        position: absolute;
        top: 38.541vw;
        right: 11.749vw;
        width: 9.189vw;
    }

    .banner #one .object11 {
        position: absolute;
        top: 39.041vw;
        right: -1.351vw;
        width: 12.432vw;
    }

    .banner #one .product {
        transform: scale(0);
    }

    .banner .active #one .product {
        transform: scale(1);
        -moz-transition: all 500ms 300ms;
        -webkit-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    .banner #two .object1 {
        position: absolute;
        top: -1.22vw;
        left: 8.27vw;
        width: 23.176vw;
    }

    .banner #two .object2 {
        position: absolute;
        top: 2.208vw;
        right: -0.73vw;
        width: 10vw;
    }

    .banner #two .object3 {
        position: absolute;
        top: 34.608vw;
        left: -2.73vw;
        width: 14.730vw;
    }

    .banner #two .object4 {
        position: absolute;
        top: 32.608vw;
        right: 8.27vw;
        width: 9.324vw;
    }

    .banner #two .object5 {
        position: absolute;
        top: 5.908vw;
        right: 8.8vw;
        width: 13.378vw;
    }

    .banner #two .absolute {
        transform: scale(0);
    }

    .banner .active #two .absolute {
        transform: scale(1);
        -moz-transition: all 500ms 300ms;
        -webkit-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    .banner #three .object1 {
        position: absolute;
        top: 0.78vw;
        left: 1.27vw;
        width: 14.865vw;
        opacity: 0;
    }

        .banner #three .object1 .img {
            -moz-transition: all 300ms;
            -webkit-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .banner #three .object1:hover .img {
            transform: scale(1.1);
        }

    .banner .active #three .object1 {
        opacity: 1;
        -moz-transition: opacity 300ms 1.2s;
        -webkit-transition: opacity 300ms 1.2s;
        -o-transition: opacity 300ms 1.2s;
        transition: opacity 300ms 1.2s;
    }

    .banner #three .object2 {
        position: absolute;
        top: -5.792vw;
        right: -7.73vw;
        width: 23.716vw;
        opacity: 0;
    }

        .banner #three .object2 .img {
            -moz-transition: all 300ms;
            -webkit-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .banner #three .object2:hover .img {
            transform: scale(1.1);
        }

    .banner .active #three .object2 {
        opacity: 1;
        -moz-transition: opacity 300ms 1.4s;
        -webkit-transition: opacity 300ms 1.5s;
        -o-transition: opacity 300ms 1.5s;
        transition: opacity 300ms 1.5s;
    }

    .banner #three .object3 {
        position: absolute;
        top: 37.608vw;
        right: -3.13vw;
        width: 15.811vw;
        opacity: 0;
    }

        .banner #three .object3 .img {
            -moz-transition: all 300ms;
            -webkit-transition: all 300ms;
            -o-transition: all 300ms;
            transition: all 300ms;
        }

        .banner #three .object3:hover .img {
            transform: scale(1.1);
        }

    .banner .active #three .object3 {
        opacity: 1;
        -moz-transition: opacity 300ms 1.6s;
        -webkit-transition: opacity 300ms 1.8s;
        -o-transition: opacity 300ms 1.8s;
        transition: opacity 300ms 1.8s;
    }

    .banner #three .product {
        transform: scale(0);
    }

    .banner .active #three .product {
        transform: scale(1);
        -moz-transition: all 500ms 500ms;
        -webkit-transition: all 500ms 500ms;
        -o-transition: all 500ms 500ms;
        transition: all 500ms 500ms;
    }

#About {
    position: relative;
    width: 100%;
    z-index: 1;
}

    #About .row {
        max-width: 610px;
        margin-bottom: 3.716vw;
    }

    #About .line {
        width: 142px;
    }

    #About .object1 {
        position: absolute;
        top: -25px;
        left: -435px;
        width: 383px;
    }

    #About .object2 {
        position: absolute;
        top: 95px;
        right: -435px;
        width: 328px;
    }

#Product {
    position: relative;
    width: 100%;
}

    #Product .h1 {
        margin: 0;
    }

    #Product .item {
        display: block;
        /*overflow: hidden;*/
        position: relative;
        /*padding-top: 59.122vw;*/
    }

    #Product .line {
        width: 160px;
    }

    #Product .ingredient {
        position: absolute;
        z-index: 2;
        opacity: 0;
    }

    #Product .active .ingredient {
        opacity: 1;
    }

    #Product .arrow {
        position: absolute;
        z-index: 2;
    }

    #Product .arrow .img {
        opacity: 0;
    }

    #Product .active .ingredient .rotate {
        -o-animation: rotateIngredient 10s ease;
        -moz-animation: rotateIngredient 10s ease;
        -webkit-animation: rotateIngredient 10s ease;
        animation: rotateIngredient 10s ease;
    }

    #Product .active .ingredient:hover .zoom {
        transform: scale(1.2);
    }

    #Product .object {
        position: absolute;
        z-index: 1;
        opacity: 0;
    }

    #Product .active .object {
        opacity: 1;
        -webkit-transition: all 500ms 500ms;
        -moz-transition: all 500ms 500ms;
        -o-transition: all 500ms 500ms;
        transition: all 500ms 500ms;
    }

    #Product #p1 .object {
        top: -0.676vw;
        right: -8.784vw;
        width: 67.838vw;
        transform: translateX(100%);
    }

    #Product .active #p1 .object {
        transform: translateX(0);
    }

    #Product .active #p1 .object:hover .img {
        transform: scale(1.1);
    }

    #Product #p1 .ingredient.one {
        top: 9.459vw;
        left: 0;
        width: 18.378vw;
        transform: translateX(-100%);
    }
    #Product #p1 .ingredient.one .txt {
        position: absolute;
        right: 10%;
        bottom: 10%;
        width: 7.568vw;
    }
    #Product .active #p1 .ingredient.one {
        transform: translateX(0);
        -webkit-transition: all 500ms 200ms;
        -moz-transition: all 500ms 200ms;
        -o-transition: all 500ms 200ms;
        transition: all 500ms 200ms;
    }

    #Product #p1 .ingredient.two {
        top: 10.459vw;
        left: 0;
        width: 17.568vw;
        transform: translateX(-100%);
    }
    #Product #p1 .ingredient.two .txt {
        position: absolute;
        top: -1%;
        right: 25%;
        width: 7.905vw;
    }
    #Product .active #p1 .ingredient.two {
        left: 28.041vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 300ms;
        -moz-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    #Product #p1 .ingredient.three {
        top: 37.838vw;
        left: 0;
        width: 27.838vw;
        transform: translateX(-100%);
    }
    #Product #p1 .ingredient.three .txt {
        position: absolute;
        top: 0;
        left: 23%;
        width: 9.730vw;
    }
    #Product .active #p1 .ingredient.three {
        left: 8.108vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 400ms;
        -moz-transition: all 500ms 400ms;
        -o-transition: all 500ms 400ms;
        transition: all 500ms 400ms;
    }

    #Product #p1 .ingredient.one .arrow {
        top: 17.324vw;
        left: 18.216vw;
        width: 30.068vw;
    }

    #Product #p1 .ingredient.one .arrow .absolute {
        width: 0;
        background: url(../images/Home/product1-arrow1.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p1 .ingredient.one .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p1 .ingredient.two .arrow {
        top: 12.324vw;
        left: 18.216vw;
        width: 7.703vw;
    }

    #Product #p1 .ingredient.two .arrow .absolute {
        width: 0;
        background: url(../images/Home/product1-arrow2.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p1 .ingredient.two .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p1 .ingredient.three .arrow {
        top: 3.324vw;
        left: 28.216vw;
        width: 16.959vw;
        transform: rotate(23deg);
    }

    #Product #p1 .ingredient.three .arrow .absolute {
        width: 0;
        background: url(../images/Home/product1-arrow3.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p1 .ingredient.three .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p2 .object {
        left: 0;
        right: 0;
        bottom: 0.338vw;
        width: 67.838vw;
        margin: auto;
    }

    #Product .active #p2 .object:hover .img {
        transform: scale(1.1);
    }

    #Product #p2 .ingredient.one {
        top: 18.459vw;
        left: -5.405vw;
        width: 30.338vw;
        transform: translateX(-100%);
    }

    #Product .active #p2 .ingredient.one {
        transform: translateX(0);
        -webkit-transition: all 500ms 200ms;
        -moz-transition: all 500ms 200ms;
        -o-transition: all 500ms 200ms;
        transition: all 500ms 200ms;
    }

    #Product #p2 .ingredient.two {
        top: 7.459vw;
        right: 0;
        width: 21.149vw;
        transform: translateX(100%);
    }

    #Product .active #p2 .ingredient.two {
        right: 7.041vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 300ms;
        -moz-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    #Product #p2 .ingredient.three {
        top: 31.838vw;
        right: 0;
        width: 19.054vw;
        transform: translateX(100%);
    }

    #Product .active #p2 .ingredient.three {
        right: 8.108vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 400ms;
        -moz-transition: all 500ms 400ms;
        -o-transition: all 500ms 400ms;
        transition: all 500ms 400ms;
    }

    #Product #p2 .ingredient.one .arrow {
        top: 16.324vw;
        left: 23.216vw;
        width: 11.149vw;
    }

    #Product #p2 .ingredient.one .arrow .absolute {
        width: 0;
        background: url(../images/Home/product2-arrow1.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p2 .ingredient.one .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p2 .ingredient.two .arrow {
        top: 5.324vw;
        right: 20.216vw;
        width: 7.838vw;
    }

    #Product #p2 .ingredient.two .arrow .absolute {
        left: auto;
        right: 0;
        width: 0;
        background: url(../images/Home/product2-arrow2.png) right top no-repeat;
        background-size: cover;
    }

    #Product .active #p2 .ingredient.two .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p2 .ingredient.three .arrow {
        top: 11.324vw;
        right: 16.216vw;
        width: 8.108vw;
    }

    #Product #p2 .ingredient.three .arrow .absolute {
        left: auto;
        right: 0;
        width: 0;
        background: url(../images/Home/product2-arrow3.png) right top no-repeat;
        background-size: cover;
    }

    #Product .active #p2 .ingredient.three .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p3 .object {
        left: -9.122vw;
        bottom: 0.676vw;
        width: 67.838vw;
        transform: translateX(-100%);
    }

    #Product .active #p3 .object {
        transform: translateX(0);
    }

    #Product .active #p3 .object:hover .img {
        transform: scale(1.1);
    }

    #Product #p3 .ingredient.one {
        top: 9.459vw;
        right: 0;
        width: 16.757vw;
        transform: translateX(100%);
    }

    #Product .active #p3 .ingredient.one {
        z-index: 3;
        right: 27.041vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 200ms;
        -moz-transition: all 500ms 200ms;
        -o-transition: all 500ms 200ms;
        transition: all 500ms 200ms;
    }

    #Product #p3 .ingredient.two {
        top: 8.041vw;
        right: 0;
        width: 14.662vw;
        transform: translateX(100%);
    }

    #Product .active #p3 .ingredient.two {
        right: 9.041vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 300ms;
        -moz-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    #Product #p3 .ingredient.three {
        top: 35.838vw;
        right: 0;
        width: 19.257vw;
        transform: translateX(100%);
    }

    #Product .active #p3 .ingredient.three {
        right: 17.108vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 400ms;
        -moz-transition: all 500ms 400ms;
        -o-transition: all 500ms 400ms;
        transition: all 500ms 400ms;
    }

    #Product #p3 .ingredient.one .arrow {
        top: 10.624vw;
        right: 17.216vw;
        width: 7.162vw;
    }

    #Product #p3 .ingredient.one .arrow .absolute {
        left: auto;
        right: 0;
        width: 0;
        background: url(../images/Home/product3-arrow1.png) right top no-repeat;
        background-size: cover;
    }

    #Product .active #p3 .ingredient.one .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p3 .ingredient.two .arrow {
        top: 13.324vw;
        right: 12.216vw;
        width: 26.689vw;
    }

    #Product #p3 .ingredient.two .arrow .absolute {
        left: auto;
        right: 0;
        width: 0;
        background: url(../images/Home/product3-arrow2.png) right top no-repeat;
        background-size: cover;
    }

    #Product .active #p3 .ingredient.two .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p3 .ingredient.three .arrow {
        top: 2.724vw;
        right: 19.616vw;
        width: 16.351vw;
    }

    #Product #p3 .ingredient.three .arrow .absolute {
        left: auto;
        right: 0;
        width: 0;
        background: url(../images/Home/product3-arrow3.png) right top no-repeat;
        background-size: cover;
    }

    #Product .active #p3 .ingredient.three .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p4 .object {
        right: 0;
        bottom: 7.503vw;
        width: 58.784vw;
        transform: translateX(100%);
    }

    #Product .active #p4 .object {
        transform: translateX(0);
    }

    #Product .active #p4 .object .img {
        transform: scale(1.2);
    }
    #Product .active #p4 .object:hover .img {
        transform: scale(1.3);
    }

    #Product #p4 .ingredient.one {
        top: 7.459vw;
        left: 22.297vw;
        width: 22.162vw;
        transform: translateX(-100%);
    }
    #Product #p4 .ingredient.one .txt {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 7.973vw;
    }
    #Product .active #p4 .ingredient.one {
        transform: translateX(0);
        -webkit-transition: all 500ms 200ms;
        -moz-transition: all 500ms 200ms;
        -o-transition: all 500ms 200ms;
        transition: all 500ms 200ms;
    }

    #Product #p4 .ingredient.two {
        top: 13.459vw;
        left: 0;
        width: 17.095vw;
        transform: translateX(-100%);
    }
    #Product #p4 .ingredient.two .txt {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 7.635vw;
    }
    #Product .active #p4 .ingredient.two {
        left: 5.041vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 300ms;
        -moz-transition: all 500ms 300ms;
        -o-transition: all 500ms 300ms;
        transition: all 500ms 300ms;
    }

    #Product #p4 .ingredient.three {
        top: 35.838vw;
        left: 0;
        width: 24.324vw;
        transform: translateX(-100%);
    }
    #Product #p4 .ingredient.three .txt {
        position: absolute;
        left: 0;
        bottom: 3.2vw;
        width: 9.865vw;
    }
    #Product .active #p4 .ingredient.three {
        left: 8.108vw;
        transform: translateX(0);
        -webkit-transition: all 500ms 400ms;
        -moz-transition: all 500ms 400ms;
        -o-transition: all 500ms 400ms;
        transition: all 500ms 400ms;
    }

    #Product #p4 .ingredient.one .arrow {
        top: 14.324vw;
        left: 24.216vw;
        width: 7.230vw;
    }

    #Product #p4 .ingredient.one .arrow .absolute {
        width: 0;
        background: url(../images/Home/product4-arrow1.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p4 .ingredient.one .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p4 .ingredient.two .arrow {
        top: 12.324vw;
        left: 18.216vw;
        width: 30.743vw;
    }

    #Product #p4 .ingredient.two .arrow .absolute {
        width: 0;
        background: url(../images/Home/product4-arrow2.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p4 .ingredient.two .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

    #Product #p4 .ingredient.three .arrow {
        top: 4.324vw;
        left: 26.216vw;
        width: 16.554vw;
        transform: rotate(30deg);
    }

    #Product #p4 .ingredient.three .arrow .absolute {
        width: 0;
        background: url(../images/Home/product4-arrow3.png) left top no-repeat;
        background-size: cover;
    }

    #Product .active #p4 .ingredient.three .arrow .absolute {
        width: 100%;
        -webkit-transition: all 500ms 800ms;
        -moz-transition: all 500ms 800ms;
        -o-transition: all 500ms 800ms;
        transition: all 500ms 800ms;
    }

#Product #p5 .object {
    left: 0;
    bottom: 6.576vw;
    width: 62.500vw;
    transform: translateX(-100%);
}
#Product .active #p5 .object {
    transform: translateX(0);
}
#Product .active #p5 .object .img {
    transform: scale(1.2);
}
#Product .active #p5 .object:hover .img {
    transform: scale(1.3);
}
#Product #p5 .ingredient.one {
    top: 9.459vw;
    right: 0;
    width: 15.068vw;
    transform: translateX(100%);
}
#Product #p5 .ingredient.one .txt {
    position: absolute;
    left: 2.25vw;
    bottom: 0;
    width: 7.973vw;
}
#Product .active #p5 .ingredient.one {
    z-index: 3;
    right: 28.041vw;
    transform: translateX(0);
    -webkit-transition: all 500ms 200ms;
    -moz-transition: all 500ms 200ms;
    -o-transition: all 500ms 200ms;
    transition: all 500ms 200ms;
}
#Product #p5 .ingredient.two {
    top: 11.311vw;
    right: 0;
    width: 18.311vw;
    transform: translateX(100%);
}
#Product #p5 .ingredient.two .txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 9.797vw;
}
#Product .active #p5 .ingredient.two {
    right: 5.041vw;
    transform: translateX(0);
    -webkit-transition: all 500ms 300ms;
    -moz-transition: all 500ms 300ms;
    -o-transition: all 500ms 300ms;
    transition: all 500ms 300ms;
}
#Product #p5 .ingredient.three {
    top: 37.838vw;
    right: 0;
    width: 16.892vw;
    transform: translateX(100%);
}
#Product #p5 .ingredient.three .txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 7.703vw;
}
#Product .active #p5 .ingredient.three {
    right: 14.108vw;
    transform: translateX(0);
    -webkit-transition: all 500ms 400ms;
    -moz-transition: all 500ms 400ms;
    -o-transition: all 500ms 400ms;
    transition: all 500ms 400ms;
}
#Product #p5 .ingredient.one .arrow {
    top: 6.624vw;
    right: 16.216vw;
    width: 7.230vw;
}
#Product #p5 .ingredient.one .arrow .absolute {
    left: auto;
    right: 0;
    width: 0;
    background: url(../images/Home/product5-arrow1.png) right top no-repeat;
    background-size: cover;
}
#Product .active #p5 .ingredient.one .arrow .absolute {
    width: 100%;
    -webkit-transition: all 500ms 800ms;
    -moz-transition: all 500ms 800ms;
    -o-transition: all 500ms 800ms;
    transition: all 500ms 800ms;
}
#Product #p5 .ingredient.two .arrow {
    top: 13.324vw;
    right: 18.216vw;
    width: 30.743vw;
}
#Product #p5 .ingredient.two .arrow .absolute {
    left: auto;
    right: 0;
    width: 0;
    background: url(../images/Home/product5-arrow2.png) right top no-repeat;
    background-size: cover;
}
#Product .active #p5 .ingredient.two .arrow .absolute {
    width: 100%;
    -webkit-transition: all 500ms 800ms;
    -moz-transition: all 500ms 800ms;
    -o-transition: all 500ms 800ms;
    transition: all 500ms 800ms;
}
#Product #p5 .ingredient.three .arrow {
    top: 4.724vw;
    right: 19.616vw;
    width: 17.703vw;
}
#Product #p5 .ingredient.three .arrow .absolute {
    left: auto;
    right: 0;
    width: 0;
    background: url(../images/Home/product5-arrow3.png) right top no-repeat;
    background-size: cover;
}
#Product .active #p5 .ingredient.three .arrow .absolute {
    width: 100%;
    -webkit-transition: all 500ms 800ms;
    -moz-transition: all 500ms 800ms;
    -o-transition: all 500ms 800ms;
    transition: all 500ms 800ms;
}

#News {
    position: relative;
    min-height: 127.419vw;
    background: url(../images/Home/newsBg.jpg) center no-repeat;
    background-size: cover;
}
#News .bg {
    opacity: 0;
}
#News .row {
    width: 95%;
    max-width: 572px;
}
#News .line {
    width: 227px;
}
#News .h1 {
    margin-bottom: 12.902vw;
}
#News .item {
    position: relative;
    width: 100%;
    max-width: 572px;
}
#News .date {
    position: relative;
    width: 45.161vw;
    transform: rotate(-36deg) translate(-4.032vw, -0.806vw);
}
#News .date .absolute {
    font-family: 'OpenSans';
    font-size: 2.581vw;
    color: white;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.212vw;
    padding: 3.226vw 0 8.065vw;
}
#News .icon {
    position: absolute;
    width: 9.194vw;
}
#News .icon.pdf {
    right: 22.581vw;
    bottom: 6.452vw;
}
#News .icon.link {
    right: 11.290vw;
    bottom: 11.290vw;
}
#News .content {
    width: 64.69%;
    margin: auto;
}
#News .content .title {
    font-family: 'OpenSans';
    font-weight: bold;
    font-size: 2.903vw;
    color: #d4ae44;
    line-height: 3.871vw;
    margin-bottom: 3.226vw;
}
#News .content .desc {
    font-family: 'OpenSans';
    font-weight: bold;
    font-size: 2.258vw;
    color: black;
    line-height: 3.547vw;
    letter-spacing: 0.098vw;
}


@media screen and (max-width: 499px) {

    #owl-Product .owl-dots {
        bottom: -5%;
    }
    #Product #p5 .ingredient.one .txt {
        transform: translate(-40%, 50%);
    }
    #Product #p5 .ingredient.two .txt {
        transform: translate(-30%, -40%);
    }
    #Product #p5 .ingredient.three .txt {
        transform: translate(20%, -30%);
    }
}

@media screen and (max-width: 569px) {

    #News {
        min-height: 145vw;
    }
}

@media screen and (max-width: 599px) {

    #Home #About .h1 {
        margin: 15px 0;
    }
}

@media screen and (min-width: 620px) {

    #News {
        min-height: 790px;
    }
    #News .h1 {
        margin-bottom: 79.994px;
    }
    #News .date {
        width: 280px;
        transform: rotate(-36deg) translate(-25px, -5px);
    }
    #News .date .absolute {
        font-size: 16px;
        letter-spacing: 1.317px;
        padding: 20px 0 50px;
    }
    #News .icon {
        position: absolute;
        width: 57px;
    }
    #News .icon.pdf {
        right: 140px;
        bottom: 40px;
    }
    #News .icon.link {
        right: 70px;
        bottom: 70px;
    }
    #News .content .title {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 20px;
    }
    #News .content .desc {
        font-size: 14px;
        line-height: 21.993px;
        letter-spacing: 0.607px;
    }
    #Home .footer {
        bottom: -50px;
        max-width: 481px;
    }
}

@media screen and (max-width: 767px) {

    #Product #p1 .ingredient.one .txt {
        transform: translate(15%, 85%);
    }
    #Product #p1 .ingredient.two .txt {
        transform: translate(0, -65%);
    }
    #Product #p1 .ingredient.three .txt {
        transform: translate(-50%, -40%);
    }
    #Product #p4 .ingredient.one .txt {
        transform: translate(70%, -45%);
    }
    #Product #p4 .ingredient.two .txt {
        transform: translate(-5%, 50%);
    }
    #Product #p4 .ingredient.three .txt {
        transform: translate(-35%, 85%);
    }
}

@media screen and (max-width: 1023px) {

    #News .h1 {
        margin-top: 50px
    }
    #Product #p1 .ingredient.one .txt {
        width: 77px;
    }
    #Product #p1 .ingredient.two .txt {
        width: 81px;
    }
    #Product #p1 .ingredient.three .txt {
        width: 100px;
    }
    #Product #p4 .ingredient.one .txt {
        width: 82px;
    }
    #Product #p4 .ingredient.two .txt {
        width: 78px;
    }
    #Product #p4 .ingredient.three .txt {
        width: 101px;
    }
    #Product #p5 .ingredient.one .txt {
        top: auto;
        bottom: 0;
        width: 82px;
    }
    #Product #p5 .ingredient.two .txt {
        width: 100px;
    }
    #Product #p5 .ingredient.three .txt {
        width: 79px;
    }
    #Product .active #p5 .ingredient.two {
        right: 0;
    }
    #Home .footer2 {
        display: none;
    }
}

@media screen and (min-width: 1024px) {

    #News {
        min-height: 790px;
    }
    #News .row {
        width: 93%;
        max-width: 1235px;
    }
    #News .date {
        width: 22.64vw;
        transform: rotate(-36deg) translate(-3vw, -1vw);
    }
    #News .date .absolute {
        font-size: 1.280vw;
        letter-spacing: 0.105vw;
        padding: 1.763vw 0 3.9vw;
    }
    #News .icon {
        width: 4.560vw;
    }
    #News .icon.pdf {
        right: 11.200vw;
        bottom: 3.200vw;
    }
    #News .icon.link {
        right: 5.600vw;
        bottom: 5.600vw;
    }
    #Home .footer {
        bottom: -75px;
    }
}

@media screen and (max-width: 1079px) {

    #Product {
        background: url(../images/Home/productBg.png) top center no-repeat;
        background-size: cover;
    }
    #Product .bg {
        opacity: 0;
    }
    #Product #p1 .ingredient.one {
        top: 4.459vw;
    }
    #Product #p1 .ingredient.two {
        top: 5.459vw;
    }
    #Home .h1 {
        padding-top: 7.407vw;
    }
}

@media screen and (min-width: 1080px) {

    .banner #one .object1 {
        display: block;
    }
    /*#Home .footer {
        bottom: -75px;
    }*/
    /*#News .date {
        width: 333px;
    }*/
    #Product .h1 {
        position: absolute;
        top: 7.365vw;
        z-index: 2;
        width: 100%;
    }
    /*#News .content .title {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 20px;
    }*/
    /*#News .content .desc {
        font-size: 13px;
        width: 90%;
        margin-left: 7%;
    }*/
    /*#News .content {
        width: 370px;
    }*/
}

@media screen and (min-width: 1180px) {

}

@media screen and (min-width: 1250px) {

    #News .date {
        width: 333px;
        transform: rotate(-36deg) translate(-50px, -25px);
    }
    #News .date .absolute {
        font-size: 16px;
        letter-spacing: 1.317px;
        padding: 27.04px 0 40px;
    }
    #News .icon {
        width: 57px;
    }
    #News .icon.pdf {
        right: 140px;
        bottom: 40px;
    }
    #News .icon.link {
        right: 70px;
        bottom: 70px;
    }
}

@media screen and (min-width: 1480px) {

    #Home p {
        margin: 0 0 1.689vw;
        font-size: 1.081vw;
        line-height: 1.486vw;
        letter-spacing: 0.008vw;
    }
    #Home .h1 {
        margin: 0 0 2.027vw;
        font-size: 2.027vw;
        line-height: 1.486vw;
        letter-spacing: 0.187vw;
    }
    #Home .footer {
        bottom: -5.068vw;
        max-width: 32.5vw;
    }
    #About .row {
        max-width: 41.216vw;
    }
    #About .line {
        width: 9.595vw;
    }
    #About .object1 {
        top: -1.689vw;
        left: -29.392vw;
        width: 25.878vw;
    }
    #About .object2 {
        top: 6.419vw;
        right: -29.392vw;
        width: 22.162vw;
    }
    #Product .line {
        width: 10.811vw;
    }
    #News {
        min-height: 41.146vw;
    }
    #News .h1 {
        margin-bottom: 5.405vw;
    }
    #News .row {
        max-width: 83.446vw;
    }
    #News .item {
        max-width: 38.648vw;
    }
    #News .line {
        width: 15.338vw;
    }
    #News .date {
        width: 22.5vw;
        transform: rotate(-36deg) translate(-3.378vw, -1.689vw);
    }
    #News .date .absolute {
        font-size: 1.081vw;
        letter-spacing: 0.089vw;
        padding: 1.827vw 0 2.703vw;
    }
    #News .icon {
        width: 3.851vw;
    }
    #News .icon.pdf {
        right: 9.459vw;
        bottom: 2.703vw;
    }
    #News .icon.link {
        right: 4.730vw;
        bottom: 4.730vw;
    }
    /*#News .content {
        width: 25vw;
        height: 12.162vw;
    }*/
    #News .content .title {
        font-size: 1.216vw;
        line-height: 1.622vw;
        margin-bottom: 1.351vw;
    }
    #News .content .desc {
        font-size: 0.946vw;
        line-height: 1.486vw;
        letter-spacing: 0.041vw;
    }
}
