@charset "UTF-8";
/* 메인페이지 CSS
작성자 : 효민디앤피
Date : 2025-00-00
*/
h2 {
	font-size: 2em;
}
/************ main_banner **************/
.video_box {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.main_visual video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.video_box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}
.banner_title {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #eee;
	font-size: 6rem;
	font-weight: 600;
	text-align: center;
}

/************ contents **************/
.wrap {
	width: calc(100% - 32px);
	margin: 0 auto;
	overflow: hidden;
}
section {
	margin-bottom: 120px;
}
.title_box {
	text-align: center;
}
.title_box .index {
	font-size: 1.4rem;
	color: #d80c18;
	margin-bottom: 10px;
	font-weight: 400;
}
.title_box h2 {
	font-size: 2.8rem;
	line-height: 140%;
	margin-bottom: 20px;
}
.title_box h2 span {
	font-weight: 400;
}
.title_box .info {
	font-size: 1.4rem;
	line-height: 150%;
	color: #222;
}

/** about **/
.about {
	margin-top: 80px;
}
.service {
	width: 100%;
	margin-top: 60px;
}
.serv_card {
	display: block;
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
	opacity: 0;
	transform: translateY(40px);
	transition: transform 0.6s ease-out;
}
.serv_card.visible {
	opacity: 1;
	transform: translateY(0);
}
.serv_card .img_box {
	width: 100%;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(0, 0, 0);
	font-size: 0;
}
.serv_card .img_box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: background-color 0.3s ease;
}
.serv_card:hover .img_box::after {
	background: linear-gradient(to bottom, #ea5514, #d80c18);
}
.serv_card .img_box img {
	width: 100%;
	opacity: 40%;
	aspect-ratio: 1 / .6;
	object-position: top;
}
.serv_card .txt_box {
	width: calc(100% - 40px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}
.serv_card .txt_box .index {
	color: #eee;
	font-size: 1.4rem;
	margin-bottom: 6px;
}
.serv_card .txt_box .tit {
	font-size: 2.8rem;
	font-weight: 600;
	margin-bottom: 44px;
}

/** project **/
.fade-up {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.8s ease;
}
.fade-up.up {
	opacity: 1;
	transform: translateY(0);
}
.project h2 {
	font-size: 3.6rem;
	text-align: center;
	margin-bottom: 35px;
}
.gallery {
	width: 100%;
	position: relative;
}
.gallery article {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
}
.project_card {
	position: relative;
}
.gallery .img_box {
	width: 100%;
	height: 100%;
	background-color: #ccc;
	position: relative;
}
.gallery .img_box img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.project_card .img_box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
	cursor: pointer;
	opacity: 0;
}
.project_card:hover .img_box::after {
	background: linear-gradient(to right, #ea5514, #d80c18);
	opacity: 0.8;
}
.gallery .txt_box {
	width: calc(100% - 40px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	transition: all 0.3s ease;
}
.gallery .txt_box {
	opacity: 0;
}
.project_card:hover .txt_box {
	opacity: 1;
}
.gallery .txt_box .index {
	display: inline-block;
	font-size: 1.4rem;
	border: 1px solid #fff;
	border-radius: 20px;
	padding: 8px 20px;
	margin-bottom: 12px;
}
.gallery .txt_box .tit {
	font-size: 2.8rem;
	margin-bottom: 8px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre-line;
	max-height: 80px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.more_btn {
	text-align: center;
	margin-top: 30px;
}
.more_btn a {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 25px;
	padding: 12px 30px;
	color: #666;
	transition: 0.3s ease;
}
.more_btn a:hover {
	background-color: #d80c18;
	color: #fff;
	border: 1px solid #d80c18;
}

/** notice **/
.notice {
	width: 100%;
}
.notice .card_box {
	width: 100%;
	margin-top: 50px;
}
.notice .card {
	display: block;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 20px;
}
.notice .top {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}
.notice .top .index {
	background-color: #fff;
	padding: 6px 20px;
	border-radius: 20px;
	font-size: 1.4rem;
	font-weight: 400;
	float: left;
	margin-right: 15px;
}
.notice .note {
	color: #d80c18;
	border: 1px solid #d80c18;
	box-sizing: border-box;
}
.notice .news {
	color: #666;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.notice .date {
	font-size: 1.4rem;
	line-height: 3rem;
	color: #999;
}
.notice .tit {
	font-size: 2.4rem;
	line-height: 2.8rem;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 줄 수 지정 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
}

/** contact **/
.contact {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.1;
	overflow: hidden;
	position: relative;
	margin-bottom: 0;
}
.contact .img_box {
	height: 100%;
	position: relative;
}
.contact .img_box img {
	height: 100%;
}
.contact .img_box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}
.contact .title_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: calc(100% - 32px);
	color: #fff;
}
.contact .title_box .index {
	color: #fff;
}
.contact a {
	display: inline-block;
	text-align: center;
	font-weight: 500;
	border: 1px solid #fff;
	box-sizing: border-box;
	border-radius: 25px;
	padding: 12px 30px;
	color: #fff;
	margin-top: 50px;
	transition: 0.3s ease;
}
.contact a:hover {
	background-color: #d80c18;
	border: 1px solid #d80c18;
}

/************ 미디어쿼리(태블릿) **************/
@media screen and (min-width: 768px) {
	/******** contents ********/
	.wrap {
		width: calc(100% - 60px);
	}
	.title_box .index {
		font-size: 1.6rem;
	}
	.title_box h2 {
		font-size: 3.4rem;
		margin-bottom: 30px;
	}
	.title_box .info {
		font-size: 1.6rem;
	}

	/* about */
	.about {
		margin-top: 100px;
	}
	.serv_box {
		display: flex;
		gap: 16px;
	}
	.serv_card .txt_box {
		width: calc(100% - 60px);
	}

	/* project */
	.project h2 {
		font-size: 4.2rem;
		margin-bottom: 50px;
	}
	.gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-bottom: 10px;
	}
	.gallery article {
		width: calc(50% - 8px);
		margin-bottom: 10px;
	}
	.more_btn a {
		padding: 14px 50px;
		border-radius: 25px;
	}

	/* notice */
	.notice .card_box {
		display: flex;
		gap: 16px;
	}
	.notice .card_box .card {
		width: calc(50% - 8px);
	}
	.notice .more_btn {
		margin-top: 20px;
	}

	/* contact */
	.contact {
		aspect-ratio: 16 / 9;
	}
	.contact .img_box img {
		width: 100%;
	}
	.contact a {
		padding: 15px 50px;
	}
}

/************ 미디어쿼리(pc) **************/
@media screen and (min-width: 1024px) and (max-width: 1300px) {
	.serv_card .txt_box {
		width: calc(100% - 40px);
	}
	.serv_card .txt_box .index {
		color: #eee;
		font-size: 1.4rem;
	}
	.serv_card .txt_box .tit {
		font-size: 2.4rem;
		margin-bottom: 25px;
	}
	.serv_card .txt_box .item {
		font-size: 1.4rem;
	}
	.contact a {
		margin-top: 0px;
	}
}

@media screen and (min-width: 1024px) {
	/* main_banner */
	.banner_title {
		font-size: 10rem;
	}

	/* contents */
	.wrap {
		max-width: 1600px;
	}
	section {
		margin-bottom: 180px;
	}
	.title_box .index {
		font-size: 2rem;
		margin-bottom: 15px;
	}
	.title_box h2 {
		font-size: 3.8rem;
		margin-bottom: 30px;
	}
	.title_box .info {
		font-size: 2rem;
		line-height: 160%;
	}

	/* about */
	.about {
		margin-top: 160px;
	}
	.service {
		margin-top: 100px;
		display: flex;
		gap: 16px;
		cursor: pointer;
	}

	/* project */
	.gallery article {
		width: calc((100% - 48px) / 4);
		box-sizing: border-box;
	}
	.more_btn a {
		padding: 18px 60px;
		border-radius: 30px;
	}

	/* notice */
	.notice .card_box {
		margin-top: 60px;
	}
	.notice .card {
		padding: 50px;
	}
	.notice .top .index {
		font-size: 1.6rem;
	}
	.notice .date {
		font-size: 1.6rem;
		line-height: 3.4rem;
	}
	.notice .tit {
		font-size: 2.4rem;
	}

	/* contact */
	.contact {
		aspect-ratio: 3 / 1;
	}
	.contact a {
		font-size: 2rem;
		border-radius: 30px;
		padding: 16px 50px;
	}
	.contact .img_box {
		width: 100%;
		height: auto;
	}
	.contact .img_box img {
		width: 100%;
	}
}