.carousel-area {
    position: relative;
}

.carousel-area .img-area {
    width: 100%;
    height: 100%;
    position: absolute;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.carousel-area .first {
    width: 270px;
    height: 180px;
    transform: translate3d(0px, 100px, 0px) !important;
    transition: ease .5s;
}
.carousel-area .img-area img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.carousel-area .last {
    width: 270px;
    height: 180px;
    transform: translate3d(978px, 100px, 0px);
    transition: ease .5s;
}
.carousel-area .none {
    transform: translate3d(978px, 100px, 0px);
    width: 0;
    height: 0;
    opacity: 0;
    transition: ease .5s;
}
.carousel-area .center {
    width: 370px ;
    height: 247px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    transform: translate3d(458px, 70px, 0px);
    transition: ease .5s;
}
.carousel-area .center img {
    width: 100%;
    height: 100%;
}
.carousel-area .img-area .text {
    width: 100%;
    height: 44px;
    background-color: #00b5b390 ;
    position: absolute;
    border-radius: 20px;
    bottom: 0;
    padding-top: 7px;
    display: none;
}
.carousel-area .center a:hover .text{
    display: block;
}
.carousel-area .none a:hover .text,
.carousel-area .first a:hover .text,
.carousel-area .last a:hover .text{
    opacity: 0;
}
.carousel-area .center .text .btn-area {
    width: 128px;
    height: 30px;
    border-radius: 10px;
    border: 2px solid #fff;
    margin: 0 auto;
    text-align: center;
    padding-top: 2px;
    color: #fff;
    font-weight: bolder;
    position: relative;
}