@import '../component/form-messages.css';

@import '../component/title-effect.css';

@import '../component/breadcrumb.css';








.list-service .lists

{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-evenly;

    margin: 70px 0 30px;

}



section.main-content

{

    min-height: 450px;

    padding-bottom: 80px;

}





.list-service .lists .item

{

    width: 30%;
    margin-bottom: 30px;
    border-bottom: #C4C4C4 solid 2px;

}



.list-service .lists .item .image

{

    display: block;

    width: 100%;

    padding-top: 100%;

    position: relative;
    overflow: hidden;

}



.list-service .lists .item .image > img

{

    right: 0;

    width: 100%;

    height: calc(100% - 25px);

    bottom: 0;

    left: 0;

    top: 0;

    position: absolute;

    object-position: 50% 50%;

    object-fit: cover;

    font-family: 'object-fit: cover;';

}





.list-service .lists .item .image span

{

    position: absolute;

    width: 50px;

    height: 50px;

    border-radius: 100%;

    background: #D83131;

    bottom: 0;

    right: 30px;

}

.list-service .lists .item .image .item-content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: linear-gradient(180deg, #670D05 0%, #FB3323 100%);
    padding: 30px 10px;
    transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.list-service .lists .item .image .item-content img
{
    width: 40%;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.list-service .lists .item .image .item-content p {
    margin: 15px 0;
    font-size: 16px;
    color: #fff;
}

.list-service .lists .item .image .item-content a {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    text-decoration: underline;
}

.list-service .lists .item:hover .image .item-content
{
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}


.list-service .lists .item .text

{

    padding-bottom: 20px;

    border-bottom: #C4C4C4 solid 2px;

}



.list-service .lists .item .text .title

{

    margin: 15px 0;

}



.list-service .lists .item .text .title a

{

    display: block;

    font-weight: bold;

    font-size: 24px;

    line-height: 28px;

    letter-spacing: 0.07em;

    color: #000000;

    text-decoration: none;

    height: 56px;

    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;

}
.list-service .lists .item:hover .text .title a
{
    color: #d83131;
}



.list-service .lists .item .text .short_desc

{

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    line-height: 21px;

    color: #808080;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    -webkit-line-clamp: 4;

}


.slidebg
{
    background: #fff;
    margin-bottom: 30px;
}






@media (max-width: 768px)

{

    section.main-content
    {
        padding-bottom: 15px;
    }

    .list-service .lists .item

    {

        width: 100%;

    }

    .list-service .lists .item .text .title a
    {
        height: unset;
    }


    .slidebg
    {
        margin-bottom: 0;
    }

    .list-service .lists .item .text .title
    {
        margin-top: 15px;
    }

}