@charset "utf-8";

/* =========================================================
   메인 시공사례 최신글 스킨
   ========================================================= */

.case-slide{
	height:auto;
}

.case-card{
	display:block;
	width:100%;
	text-align:center;
}

.case-thumb{
	position:relative;
	width:100%;
	aspect-ratio:1.42 / 1;
	overflow:hidden;
	border-radius:22px;
	background:#eee;
}

.case-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .65s ease;
}

.case-thumb-dim{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.15) 100%);
	opacity:.25;
	transition:opacity .35s ease;
}

.case-info{
	padding-top:24px;
}

.case-category{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:150px;
	min-height:44px;
	padding:10px 24px;
	border-radius:999px;
	background:#ef543c;
	color:#fff;
	font-size:17px;
	font-weight:600;
	line-height:1.2;
	letter-spacing:-.035em;
}

.case-subject{
	margin:20px 0 0;
	color:#222;
	font-size:20px;
	font-weight:600;
	line-height:1.35;
	letter-spacing:-.035em;
}

.case-card:hover .case-thumb img,
.case-card:focus .case-thumb img{
	transform:scale(1.06);
}

.case-card:hover .case-thumb-dim,
.case-card:focus .case-thumb-dim{
	opacity:.55;
}

.case-card:hover .case-subject,
.case-card:focus .case-subject{
	color:#ef543c;
}

.case-empty{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:360px;
	border:1px solid #e5e5e5;
	border-radius:20px;
	background:#fafafa;
	color:#777;
	font-size:16px;
}

@media screen and (max-width:1024px){
	.case-category{
		min-width:130px;
		min-height:40px;
		padding:9px 20px;
		font-size:15px;
	}

	.case-subject{
		margin-top:16px;
		font-size:18px;
	}
}

@media screen and (max-width:699px){
	.case-thumb{
		border-radius:16px;
	}

	.case-info{
		padding-top:18px;
	}

	.case-category{
		min-width:120px;
		min-height:38px;
		font-size:14px;
	}

	.case-subject{
		font-size:17px;
	}
}


/* =========================================================
   메인 시공사례 섹션 레이아웃
   ========================================================= */
.main-case-section{
	position:relative;
	width:100%;
	overflow:hidden;
	background:#fff;
}

.main-case-inner{
	position:relative;
	width:100%;
	max-width:1380px;
	margin:0 auto;
	padding:100px 70px 120px;
}

.main-case-head{
	margin-bottom:52px;
	text-align:center;
}

.main-case-kicker{
	margin:0 0 10px;
	color:#ef6a2f;
	font-size:18px;
	font-weight:700;
	line-height:1.2;
}

.main-case-title{
	margin:0;
	color:#3a3a3a;
	font-size:58px;
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.05em;
}

.main-case-slider-wrap{
	position:relative;
	padding:0 48px;
}

.caseSwiper{
	overflow:hidden;
}

.main-case-prev,
.main-case-next{
	position:absolute;
	top:38%;
	z-index:5;
	width:54px;
	height:54px;
	padding:0;
	border:0;
	border-radius:17px !important;
	background:#222;
	cursor:pointer;
	transform:translateY(-50%);
	transition:background .25s ease,transform .25s ease;
}

.main-case-prev{
	left:-22px;
}

.main-case-next{
	right:-22px;
}

.main-case-prev span,
.main-case-next span{
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
}

.main-case-prev span{
	transform:translate(-38%,-50%) rotate(-135deg);
}

.main-case-next span{
	transform:translate(-62%,-50%) rotate(45deg);
}

.main-case-prev:hover,
.main-case-next:hover{
	background:#ef543c;
	transform:translateY(-50%) scale(1.05);
}

.main-case-more{
	position:absolute;
	top:110px;
	right:70px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	border:1px solid #333;
	background:#fff;
	transition:background .25s ease,border-color .25s ease;
}

.main-case-more span,
.main-case-more span:after{
	display:block;
	width:28px;
	height:1px;
	background:#222;
	content:"";
	transition:background .25s ease;
}

.main-case-more span:after{
	transform:rotate(90deg);
}

.main-case-more:hover{
	border-color:#ef543c;
	background:#ef543c;
}

.main-case-more:hover span,
.main-case-more:hover span:after{
	background:#fff;
}

/* 제목 모션 */
.case-motion .main-case-kicker,
.case-motion .main-case-title{
	opacity:0;
	transform:translateY(30px);
	transition:opacity .7s ease,transform .7s ease;
}

.case-motion .main-case-title{
	transform:translateY(42px);
}

.case-motion.is-active .main-case-kicker,
.case-motion.is-active .main-case-title{
	opacity:1;
	transform:translateY(0);
}

.case-motion.is-active .main-case-kicker{
	transition-delay:.05s;
}

.case-motion.is-active .main-case-title{
	transition-delay:.18s;
}

@media screen and (max-width:1200px){
	.main-case-inner{
		padding-left:50px;
		padding-right:50px;
	}

	.main-case-title{
		font-size:50px;
	}

	.main-case-more{
		right:50px;
	}
}

@media screen and (max-width:900px){
	.main-case-inner{
		padding:80px 30px 95px;
	}

	.main-case-head{
		margin-bottom:42px;
	}

	.main-case-title{
		font-size:42px;
	}

	.main-case-slider-wrap{
		padding:0 34px;
	}

	.main-case-prev{
		left:-8px;
	}

	.main-case-next{
		right:-8px;
	}

	.main-case-more{
		top:82px;
		right:30px;
		width:54px;
		height:54px;
	}
}

@media screen and (max-width:640px){
	.main-case-inner{
		padding:68px 18px 80px;
	}

	.main-case-kicker{
		font-size:15px;
	}

	.main-case-title{
		font-size:34px;
	}

	.main-case-more{
		position:relative;
		top:auto;
		right:auto;
		width:52px;
		height:52px;
		margin:42px auto 0;
	}

	.main-case-slider-wrap{
		padding:0 28px;
	}

	.main-case-prev,
	.main-case-next{
		top:40%;
		width:46px;
		height:46px;
		border-radius:14px !important;
	}

	.main-case-prev{
		left:-10px;
	}

	.main-case-next{
		right:-10px;
	}
}

@media (prefers-reduced-motion:reduce){
	.case-motion .main-case-kicker,
	.case-motion .main-case-title{
		opacity:1;
		transform:none;
		transition:none;
	}
}