@charset "UTF-8";

#portfolios{
}

.case{
	/* width: calc(100% + -140px) !important;
	margin-left: 140px !important; */
}

/* ~~ */
.case .img_box{
	display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    height: 100vh;
}
.case .img_box{
    grid-template-rows: 33.333% 33.333% 33.333%;
}

/* ~~ */
.case .img_box .title{
    z-index: 1;
    position: relative;
}
#business .img_box .title{
    grid-area: 1/1/2/3;
    background-color: #000;
}
#estate .img_box .title{
    grid-area: 1/3/2/5;
    background-color: #fff;
}


/* ~~ */
.case .img_box .title ~ li{
    z-index: 2;
}

.case .img_box .title ~ li a{
    width: 100%;
     height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ~~ */
.case .img_box .title .img_area{
	background-size: cover;
    background-position: 40%;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
}
#business .img_box .title .img_area{
    background-image: url(../images/commonType.jpg);
}
#estate .img_box .title .img_area{
	background-image: url(../images/commonType2.jpg);
}


/* ~~ */
.case .img_box .title .text_area{
	border: #fff solid 3px;
    position: absolute;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}
#business .img_box .title .text_area{
    width: 80%;
    height: 60%;
}
#estate .img_box .title .text_area{
    width: 90%;
    height: 70%;
	text-align: center;
}


/* ~~ */
.case .img_box .title .text_area ::after{
    content: "";
    width: 100px;
    height: 100px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    right: -30px;
    top: -30px;
}

.case .img_box .title .text_area ::before{
    content: "";
    width: 100px;
    height: 100px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    position: absolute;
    left: -30px;
    bottom: -30px;
}


/* ~~ */
.case .img_box .title .text_area span{
    display: block;
    font-size: 80px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-shadow: -5px 5px 5px #333;
    letter-spacing: 20px;
    text-indent: 20px;
}


/* ~~ */
.case .img_box li{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case .img_box .item{
    background-size: cover;
    position: relative;
}
.case .img_box .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case .img_box .item .txt{
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background-color: rgba(0,0,0,.6);
	display: flex;
	opacity: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: scale(0);
    transition: .5s;
}
/* .item:first-child .txt{
    width: calc(100% + -143px);
    margin-left: 143px;
} */
.case .img_box .item:hover .txt{
	transform: scale(1);
	opacity: 1;
}


/* ~~ */




@media screen and (max-width: 1440px){
    li img{
        max-width: 130%;
        max-height: 100%;
    }
}

@media screen and (max-width: 767px){
    .case .img_box .title .text_area span{
        font-size: 40px;
        text-align: center;
        font-weight: 600;
        letter-spacing: 10px;
        text-indent: 10px;
    }
    #portfolios .img_box{
        grid-template-rows: 18% 18% 18% 18% 18% 100px;
        grid-template-columns: 33.333% 33.333% 33.333%;
    }
    #portfolios .img_box .title {
        grid-area: 1/1/2/4;
    }
    

    
}