@charset "utf-8";
@import url('https://css02.v15cdn.com/m421/swiper.css');

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: calc(var(--animate-repeat)*2);
    animation-iteration-count: calc(var(--animate-repeat)*2)
}

.animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: calc(var(--animate-repeat)*3);
    animation-iteration-count: calc(var(--animate-repeat)*3)
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay)*2);
    animation-delay: calc(var(--animate-delay)*2)
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay)*3);
    animation-delay: calc(var(--animate-delay)*3)
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay)*4);
    animation-delay: calc(var(--animate-delay)*4)
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay)*5);
    animation-delay: calc(var(--animate-delay)*5)
}

.animate__animated.animate__faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-duration: calc(var(--animate-duration)/2);
    animation-duration: calc(var(--animate-duration)/2)
}

.animate__animated.animate__fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-duration: calc(var(--animate-duration)*.8);
    animation-duration: calc(var(--animate-duration)*.8)
}

.animate__animated.animate__slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration)*2);
    animation-duration: calc(var(--animate-duration)*2)
}

.animate__animated.animate__slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-duration: calc(var(--animate-duration)*3);
    animation-duration: calc(var(--animate-duration)*3)
}

@media (prefers-reduced-motion:reduce),
print {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important
    }

    .animate__animated[class*=Out] {
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}


.home-product .product-list {
    position: relative;
        padding: 50px 80px 0;
}

.home-product .product-list .home-button-next,
.home-product .product-list .home-button-prev {
    top: 50%
}

.swiper-pagination {
    display: none
}

.home-product .swiper .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0px;
    background: var(--color);
    transition: all .2s linear
}

.home-product .swiper .swiper-slide:hover::after {
    height: 3px
}

.home-product .swiper .swiper-slide:hover .img img {
    transform: scale(1.1)
}

.home-product .swiper .swiper-slide .img {
    width: 100%;
    border: 1px solid #DFDFDF;
    text-align: center;
}

.home-product .swiper .swiper-slide .img a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.home-product .swiper .swiper-slide .img a img {
    /*width: 100%;
    height: 100%;*/
    object-fit: cover;
    transition: all .2s linear
}

.home-product .swiper .swiper-slide .info {
    padding: 20px 30px 30px 10px;
    width: 100%;
    position: relative
}

.home-product .swiper .swiper-slide .info .title {
    font-size: var(--fontsize18);
    color: var(--fontcolor);
    text-transform: capitalize
}

.home-product .swiper .swiper-slide .info .text {
    font-size: var(--fontsize14);
    color: #555
}

.home-product .swiper .swiper-slide .info i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color);
    font-size: var(--fontsize20)
}

.home-button-next,
.home-button-prev {
    position: absolute;
    left: 0px;
    top: 40%;
    background: 0 0;
    width: 40px;
    height: 40px;
    border: 1px solid #DFDFDF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s linear;
    cursor: pointer
}

.home-button-next:hover,
.home-button-prev:hover {
    background: var(--color);
    border-color: var(--color)
}

.home-button-next:hover i,
.home-button-prev:hover i {
    color: #FFF
}

.home-button-next i,
.home-button-prev i {
    color: #000
}

.home-button-next {
    left: auto;
    right: 0px
}


@media(max-width:768px) {

    .home-product .product-list {
        padding: 0px
    }

    .home-product .product-list .swiper {
        padding-bottom: 40px
    }

    .home-button-next,
    .home-button-prev {
        width: 35px;
        height: 35px;
        background: #FFF;
        display: none
    }


    .home-product .swiper .swiper-slide .info {
        padding: 0px 30px 15px 10px;
        margin-top: 15px
    }

    .home-product .swiper .swiper-slide .info .title {
        text-align: center;
        display: block
    }

    .home-product .swiper .swiper-slide .info .text {
        display: none
    }
}



.swiper-slide-active .banner-animote {
    animation: bannerup 1s forwards
}



@keyframes bannerup {
    0% {
        transform: translateY(20px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}