@charset "UTF-8";
/* CSS Document */


/*=================================
Related Cases Slider
=================================*/

.cases-related{

    position:relative;
    width:100%;
    max-width:100%;
    margin:100px auto 0 auto;
    overflow:hidden;

}

/*----------------------------------
Swiper
----------------------------------*/

.cases-related .casesSwiper{

    width:100%;
    overflow:visible;
    padding:40px 0 80px;

}

/*----------------------------------
Slide
----------------------------------*/

.cases-related .swiper-slide{

    width:1100px ;

    opacity:.45;
    transition:opacity .4s ease;
   

}

.cases-related .swiper-slide-active{

    opacity:1;
 

}

/*----------------------------------
Card
----------------------------------*/

.cases-related .cases-card{
width:100%;
    height:460px;

    background:#fff;
    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transform:scale(.9);

    transition:
        transform .4s ease,
        opacity .4s ease;

}

.cases-related .swiper-slide-active .cases-card{

    transform:scale(1);

}

.cases-related .cases-card__content{

    display:flex;
    height:100%;

}

.cases-related .cases-card__left{

    flex:0 0 42%;
    padding:56px;

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.cases-related .cases-card__right{

    flex:0 0 58%;
    overflow:hidden;

}

.cases-related .cases-card__right img{

    width:90%;
    height:100%;

    display:block;

    object-fit:contain;

}



/*----------------------------------
Tag
----------------------------------*/

.cases-related .case-industry{

    display:inline-flex;
    align-self:flex-start;

    padding:8px 18px;
    margin-bottom:0;

    border-radius:999px;

    background:#e3f2df;
    color:#0F5132;

    font-size:14px;
    font-weight:700;

}

/*----------------------------------
Title
----------------------------------*/

.cases-related .cases-card h3{

    margin:24px 0 0 0;

    font-size:24px;

    line-height:1.5;

    font-weight:500;

}

/*----------------------------------
Company
----------------------------------*/

.cases-related .company{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:auto;
    border-top: 1px solid #ccc;
    padding: 1rem 0 0 0;
}

.cases-related .company img{

    width:82px;

    height:82px;

    border-radius:50%;

    object-fit:contain;

    background:#fff;

}

.cases-related .company span{

    font-weight:600;

}

/*----------------------------------
Arrow
----------------------------------*/

.cases-related .cases-prev,
.cases-related .cases-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    background:#333;

    z-index:100;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.cases-related .cases-prev{

    left:40px;

}

.cases-related .cases-next{

    right:40px;

}

.cases-related .cases-prev::before,
.cases-related .cases-next::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:12px;

    height:12px;

    border-top:3px solid #fff;

    border-right:3px solid #fff;

}

.cases-related .cases-prev::before{

    transform:translate(-40%,-50%) rotate(-135deg);

}

.cases-related .cases-next::before{

    transform:translate(-60%,-50%) rotate(45deg);

}

/*----------------------------------
Pagination
----------------------------------*/

.cases-related .swiper-pagination{

    bottom:0 !important;

}

.cases-related .swiper-pagination-bullet-active{

    background:#2563EB;

}

/*----------------------------------
SP
----------------------------------*/

@media (max-width:991px){

    .cases-related{

        overflow:visible;

    }

    .cases-related .casesSwiper{

        padding:20px 15px 60px;

    }

    .cases-related .swiper-slide{

        width:90vw !important;

    }

    .cases-related .cases-card{

        height:auto;

    }

    .cases-related .cases-card__content{

        flex-direction:column;

    }

    .cases-related .cases-card__right{

        order:-1;

    }

    .cases-related .cases-card__right img{

        height:240px;

    }

    .cases-related .cases-card__left{

        padding:28px;

    }

    .cases-related .cases-prev,
    .cases-related .cases-next{

        display:none;

    }

}