/* ----------$Catalog--------
$Jumbotron
$Productarea
$Drawer
------------------------------ */


/* --------------------
/*      $Jumbotron
----------------------- */

.jumbotron {
    width: 100%;
    height: 505px;
}

.jumbotron__bg {
    width: 100%;
    height: 100%;
    background-image: url('../images/idx-banner-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: jumbobganimate 26s linear infinite both alternate;
    -webkit-animation: jumbobganimate 26s linear infinite both alternate;
}

.jumbotron__person {
    width: 317px;
    height: 400px;
    background-image: url('../images/idx-banner-women.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    animation: jumbopersonanimate 5s infinite both ease-out;
    -webkit-animation: jumbopersonanimate 5s infinite both ease-out;
}

@keyframes jumbobganimate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
    }
}

@keyframes jumbopersonanimate {
    0% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
    5% {
        filter: brightness(1.2);
        -webkit-filter: brightness(1.2);
    }
    10% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
    20% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
    25% {
        filter: brightness(1.2);
        -webkit-filter: brightness(1.2);
    }
    30% {
        filter: brightness(1);
        -webkit-filter: brightness(1);
    }
}

@media(max-width:767px) {
    .jumbotron {
        height: 40vh;
    }
    .jumbotron__person {
        width: 170px;
        height: 214px;
    }
}

.jumbotron__slogan {
    position: absolute;
    top: 40%;
    left: 40%;
    font-size: 3rem;
    color: #fff;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    text-align: center;
}


/* --------------------
/*      $Productarea
----------------------- */

.productarea {
    width: 100%;
    min-height: 942px;
    background-color: #F8FCE1;
}

.productarea__container {
    padding: 90px 85px;
}

.heading-index__subname {
    color: #ecf6c7;
    font-size: 50px;
}

.heading-index__chicken {
    position: absolute;
    top: -36px;
    left: -30px;
    animation: threeDrotate 3s 1 forwards ease-out;
    -webkit-animation: threeDrotate 3s 1 forwards ease-out;
}

.heading-index__name {
    font-size: 30px;
    position: absolute;
    bottom: -6px;
    left: 2px;
}

@media(max-width:767px) {
    .productarea__container {
        padding: 90px 30px;
    }
    .heading-index__subname {
        font-size: 38px;
    }
    .heading-index__name {
        font-size: 25px;
    }
}

@keyframes threeDrotate {
    0% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(540deg);
        -webkit-transform: rotateY(540deg);
        -moz-transform: rotateY(540deg);
        -ms-transform: rotateY(540deg);
        -o-transform: rotateY(540deg);
    }
    35% {
        transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
    }
    45% {
        transform: rotateY(270deg);
        -webkit-transform: rotateY(270deg);
        -moz-transform: rotateY(270deg);
        -ms-transform: rotateY(270deg);
        -o-transform: rotateY(270deg);
    }
    55% {
        transform: rotateY(140deg);
        -webkit-transform: rotateY(140deg);
        -moz-transform: rotateY(140deg);
        -ms-transform: rotateY(140deg);
        -o-transform: rotateY(140deg);
    }
    100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
}

.productarea__content {
    line-height: 28px;
}

.productarea__context {
    min-height: 130px;
}

.slick-productarea {
    padding: 55px 0px;
}

.slick-productarea .slick-list .slick-track {
    height: 405px;
}

.slick-productarea .slick-list .slick-track>div {
    outline: 0;
}

@media(min-width:768px) {
    .slick-productarea .slick-list .slick-track>div:nth-child(3n+1) {
        top: 26px;
    }
    .slick-productarea .slick-list .slick-track>div:nth-child(3n+2) {
        top: 47px;
    }
}

@media(max-width:767px) {
    .slick-productarea .slick-list .slick-track {
        height: auto;
    }
}

.productarea__bottom {
    width: 100%;
    height: 122px;
    background-image: url('../images/idx-products-bottom.png');
    background-position: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
}

.productarea__left {
    width: 626px;
    height: 574px;
    background-image: url('../images/idx-products-left.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -60px;
    left: -270px;
    transition: 0.3s left;
    -webkit-transition: 0.3s left;
    -moz-transition: 0.3s left;
    -ms-transition: 0.3s left;
    -o-transition: 0.3s left;
}

.productarea__waterdevice {
    width: 391px;
    height: 632px;
    background-image: url('../images/watering-device.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: -40px;
}

.productarea__plant {
    width: 500px;
    height: 354px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 68px;
    right: 86px;
    background-image: url('../images/idx-products-plant-2.png');
}

.productarea__plant--animated {
    animation: plantgrow 5s 2s 1 forwards ease;
    -webkit-animation: plantgrow 5s 2s 1 forwards ease;
}

@keyframes plantgrow {
    0% {
        background-image: url('../images/idx-products-plant-2.png');
        opacity: 1;
    }
    40% {
        background-image: url('../images/idx-products-plant-2.png');
        opacity: 1;
    }
    45% {
        background-image: url('../images/idx-products-plant-2.png');
        opacity: 0;
    }
    48% {
        background-image: url('../images/idx-products-plant-1.png');
        opacity: 0;
    }
    53% {
        background-image: url('../images/idx-products-plant-1.png');
        opacity: 1;
    }
    100% {
        background-image: url('../images/idx-products-plant-1.png');
        opacity: 1;
    }
}

@media(max-width:767px) {
    .productarea__plant {
        display: none;
    }
    .productarea__left {
        left: -450px;
    }
}

.productarea__drops {
    width: 153px;
    height: 135px;
    background-image: url('../images/drops.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    visibility: hidden;
}

.productarea__drops--animated {
    animation: drop 0.66s 2s 3 forwards;
    -webkit-animation: drop 0.66s 2s 3 forwards;
}

@keyframes drop {
    0% {
        visibility: visible;
        right: 160px;
        top: 400px;
        opacity: 1;
    }
    100% {
        opacity: 0.2;
        right: 240px;
        top: 700px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
    }
}

.productarea__beetle {
    width: 61px;
    height: 81px;
    background-image: url('../images/beetle.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    visibility: hidden;
}

.productarea__beetle--animated {
    animation: beetlefly 2s 1 forwards linear;
    -webkit-animation: beetlefly 2s 1 forwards linear;
}

@keyframes beetlefly {
    0% {
        visibility: visible;
        left: 4%;
        top: 700px;
    }
    25% {
        left: 6%;
        top: 500px;
        transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    50% {
        left: 12%;
        top: 550px;
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
    }
    75% {
        left: 13%;
        top: 450px;
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
    }
    100% {
        visibility: visible;
        left: 14%;
        top: 400px;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@media(max-width:767px) {
    .productarea__beetle,
    .productarea__waterdevice {
        display: none;
    }
}


/* --------------------
/*      $Drawer
----------------------- */

.drawer {
    width: 100%;
    height: 410px;
    background-image: url('../images/drawerpic.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.drawer__left,
.drawer__right {
    display: block;
    width: 100%;
    height: 100%;
}

.drawer__left-inner,
.drawer__right-inner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transition: 0.8s all;
    -webkit-transition: 0.8s all;
    -moz-transition: 0.8s all;
    -ms-transition: 0.8s all;
    -o-transition: 0.8s all;
}

@media(max-width: 1269px) {
    .drawer__left-inner,
    .drawer__right-inner {
        padding-top: calc(100% * 410 / 642);
    }
}

.drawer__left-inner {
    background-image: url('../images/idx-link-1.jpg');
}

.drawer__right-inner {
    background-image: url('../images/idx-link-2.jpg');
}

.drawer__left:hover .drawer__left-inner,
.drawer__right:hover .drawer__right-inner {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.drawer__left__text,
.drawer__right__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    color: white;
    font-size: 30px;
}

.drawer__left:hover .drawer__left__text,
.drawer__right:hover .drawer__right__text {
    font-size: 32px;
}

.newsarea {
    padding-top: 87px;
    padding-bottom: 40px;
    padding-left: 51px;
    padding-right: 51px;
    height: 100%;
    width: 100%;
}

.newsarea__beam {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}

.newsarea__beam .btn {
    margin-top: 40px;
}

.newsarea__tomato {
    position: absolute;
    top: 0px;
    right: -43px;
    overflow: hidden;
    width: 176px;
    height: 108px;
}

.newsarea__tomato-inner {
    position: absolute;
    top: -10px;
    width: 176px;
    height: 108px;
    background-image: url('../images/tomato.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media(max-width:1269px) {
    .drawer {
        overflow: hidden;
        height: auto;
        min-height: 410px;
    }
    .newsarea {
        padding-left: 15px;
        padding-right: 15px;
        width: 750px;
    }
}

@media(max-width:767px) {
    .newsarea {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }
    .newsarea__beam {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 40px;
    }
    .newsarea__beam .btn {
        margin-top: 20px;
    }
    .newsarea__tomato {
        right: -30px;
    }
}

.newsarea__triangle {
    width: 100%;
    position: absolute;
    bottom: -111px;
    left: 0;
}

.newsarea__triangle-inner {
    width: 100%;
    padding-top: calc(100% * 111 / 645);
    background-image: url('../images/idx-news-pic.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}