body.on::before {
	content: '';
	position: absolute; top: 0px; left: 0px;
	width: 100vw; height: 120vh;
	background-color: #000;
	z-index: 1;
}

#header { background-color: #d0d3d9; }
/*
#header { position: relative; background-color: #d0d3d9; }
#header .contact { display: none; }



#header {
	width: 100%; height: auto;
	padding: 100px 80px 70px;
	z-index: 101;
}

#header > div {
	width: 100%; height: auto;
	display: flex;
	
}

#header .logo {
	width: 120px; height: auto;
	
}

#header .logo > img { width: 100%; height: auto; }


#header .nav_btn,
#header .icon_btn { display: none; }


#header > div { justify-content: center; }
#header .logo { width: 145px; }

#nav { display: none; }

#header .nav_btn,
#header .icon_btn { display: inline-block; }

#header .nav_btn {
	position: absolute; top: 6px; left: 0px;
	width: 36px; height: 33px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	cursor: pointer;
}


#header .nav_btn > div {
	width: 100%; height: 4px;
	border-radius: 4px;
	background-color: #fff;
}

#header .icon_btn {
	position: absolute; top: 6px; right: 0px;
	width: auto; height: auto;
	display: flex;
	align-items: center;
	gap: 25px;
	cursor: pointer;
}

#header .icon_btn a:nth-child(1) { width: auto; height: 34px; }
#header .icon_btn a:nth-child(2) { width: auto; height: 34px; }
#header .icon_btn a:nth-child(3) { width: auto; height: 29px; }

#header .icon_btn a img {
	transition: all 150ms ease-in-out;
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
}

#header .icon_btn a img.blank { width: auto; height: 100%; }
#header .icon_btn a img.white,
#header .icon_btn a img.color {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	opacity: 0;
}

#header .icon_btn a img.white { opacity: 1; }
#header .icon_btn a img.color { opacity: 0; }

#header .icon_btn a:hover img.white { opacity: 0; }
#header .icon_btn a:hover img.color { opacity: 1; }

*/






















#wrap { padding-top: 306px; }

input {
  white-space: nowrap;        /* 줄바꿈 금지 */
  overflow: hidden;           /* 넘친 부분 숨김 */
  text-overflow: ellipsis;    /* ... 표시 */
}

.form_box {
	left: 50%;
	width: 100%; height: auto; max-width: 1350px;
	transform: translate(-50%, 0%);

	padding: 0px 100px;

}

.title_box { width: 100%; height: auto; }
.title_box.top { margin-top: 150px; }

.title_box .sub {
	width: 100%; height: auto; line-height: 1;
	font-size: 20px; color: #4a4a4a; text-align: left;
	font-weight: 500;
	letter-spacing: -0.4px;
}

.title_box .title {
	width: 100%; height: auto; line-height: 1.2;
	font-size: 36px; color: #589dff; text-align: left;
	font-weight: 700;
	margin-top: 15px;
	letter-spacing: -0.4px;
}

.form_item {
	width: 100%; height: auto; 
	margin-top: 90px;
}

.form_item .txt_label {
	width: 100%; height: auto; line-height: 1.2;
	font-size: 20px; color: #000000; text-align: left;
	font-weight: 700;
}	

.form_item .val_item { 
	width: 100%; height: auto;
	margin-top: 20px;
}

.form_item .val_item.flex { 
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

.form_item .val_item.flex.flex3 { gap: 15px; }
.form_item .val_item.flex.flex3 > div { margin-left: 25px }
.form_item .val_item.flex.flex3 > div:nth-child(4n+1) { margin-left: 0px }
.form_item .val_item.flex.flex3 .check_box label { width: 30px; }

.break { width: 100%; }


.form_item .val_item.grid { 
	display: grid;
	align-items: center;
	gap: 25px;
}

.form_item .val_item .check_box {
	width: auto; height: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.form_item .val_item .check_box input[type='checkbox']{
	width: 23px; height: 23px;
	border: 2px solid #589dff;
	border-radius: 3px;
	cursor: pointer;
}

.form_item .val_item .check_box input[type='checkbox']:checked{
	background-color: #589dff;


}

.form_item .val_item .check_box input[type='checkbox']:checked::before{
	content: '';
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-image: url("../images/form_check_icon.png");
	background-size: 15px;
	background-position: center center;
	background-repeat: no-repeat;
}

.form_item .val_item .check_box label {
	width: auto; height: auto;
	font-size: 20px; color: #4a4a4a; text-align: left;
	font-weight: 500;
	cursor: pointer;;
}

.form_item .val_item .check_box input {
	width: 280px; height: 25px;
	border: 0px;
	border-bottom: 1px solid #c8c8c8;
	font-size: 20px; color: #4a4a4a;

}

.form_item .val_item .check_box input::placeholder  {
	color: rgba(74, 74, 74, 0.5);
}

.txt_box { 
	width: 100%; height: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.txt_box label { 
	width: auto; height: auto;
	font-size: 20px; color: #4a4a4a; text-align: left;
	font-weight: 500;
}

.txt_box input { 
	width: 100%; max-width: 280px; height: 25px;
	border: 0px;
	border-bottom: 1px solid #c8c8c8;
	font-size: 20px; color: #4a4a4a;
}

.txt_box.full input {  }
.txt_box.full input:focus  { 
	width: 100%; max-width: 610px;
	height: 50px; border: 2px solid #4793ff;
	padding: 0px 10px;
}

.submit_btn {
	width: 300px; height: 102px;
	border-radius: 10px;
	border: 0px;
	color: #fff; font-size: 30px; text-align: center;
	font-weight: 800;
	background-color: #589dff;
	margin-top: 90px; 
	cursor: pointer;
	border: 2px solid #589dff;

	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;

}

.submit_btn:hover {
	color: #589dff;
	background-color: #fff;
}





@media (max-width: 479px){ 
	#wrap { padding-top: 166px; }
	.title_box.top { margin-top: 90px; }
	

	.title_box .sub { font-size: 16px; }
	.title_box .title { font-size: 24px; letter-spacing: -0.9px; }

	.form_box { padding: 0px 20px; }
	.form_item { margin-top: 60px; }
	.form_item .txt_label { font-size: 16px; }
	.form_item .val_item.flex { gap: 20px; }
	.form_item .val_item .check_box { gap: 10px; }
	.form_item .val_item .check_box input[type='checkbox'] { width: 20px; height: 20px; }
	.form_item .val_item .check_box input[type='checkbox']:checked::before { background-size: 10px; }
	.form_item .val_item .check_box label { font-size: 16px; }
	.form_item .val_item .check_box input { width: 180px; font-size: 16px; }
	.txt_box { flex-wrap: wrap; }
	.txt_box label { width: 100%; font-size: 16px; }
	.form_item .val_item.grid { gap: 20px; }
	.txt_box input { font-size: 16px; }

	.submit_btn {
		width: 180px; height: 60px;
		font-size: 16px;
		margin-top: 60px;
	}

}

@media (max-width: 749px) and (min-width: 480px) { 
	#wrap { padding-top: 180px; }
	.title_box.top { margin-top: 120px; }
	

	.title_box .sub { font-size: 18px; }
	.title_box .title { font-size: 32px; }

	.form_box { padding: 0px 20px; }
	.form_item { margin-top: 60px; }
	.form_item .txt_label { font-size: 18px; }
	.form_item .val_item.flex { gap: 20px; }
	.form_item .val_item .check_box { gap: 10px; }
	.form_item .val_item .check_box input[type='checkbox'] { width: 20px; height: 20px; }
	.form_item .val_item .check_box input[type='checkbox']:checked::before { background-size: 10px; }
	.form_item .val_item .check_box label { font-size: 18px; }
	.form_item .val_item .check_box input { width: 250px; font-size: 18px; }
	.txt_box label { font-size: 18px; }
	.form_item .val_item.grid { gap: 20px; }
	.txt_box input { font-size: 18px; }

	.submit_btn {
		width: 180px; height: 60px;
		font-size: 18px;
		margin-top: 60px;
	}

}

@media (max-width: 1023px) and (min-width: 750px) { 
	#wrap { padding-top: 220px; }
	.title_box.top { margin-top: 120px; }
	

	.title_box .sub { font-size: 18px; }
	.title_box .title { font-size: 32px; }

	.form_box { padding: 0px 20px; }
	.form_item { margin-top: 60px; }
	.form_item .txt_label { font-size: 18px; }
	.form_item .val_item.flex { gap: 30px; }
	.form_item .val_item .check_box { gap: 10px; }
	.form_item .val_item .check_box input[type='checkbox'] { width: 20px; height: 20px; }
	.form_item .val_item .check_box input[type='checkbox']:checked::before { background-size: 10px; }
	.form_item .val_item .check_box label { font-size: 18px; }
	.form_item .val_item .check_box input { width: 250px; font-size: 18px; }
	.txt_box label { font-size: 18px; }
	.form_item .val_item.grid { gap: 20px; }
	.txt_box input { font-size: 18px; }

	.submit_btn {
		width: 250px; height: 80px;
		font-size: 22px;
		margin-top: 60px;
	}

}


@media (max-width: 1279px) and (min-width: 1024px) { 
	#wrap { padding-top: 300px; }
	.title_box.top { margin-top: 120px; }

}





.complete_box {
	left: 50%;
	width: 100%; height: auto; max-width: 704px;
	transform: translate(-50%, 0%);
	padding: 50px 20px;
	border: 1px solid #589dff;
	border-radius: 20px;
}


.complete_title {
	width: 100%; height: auto; line-height: 1;
	font-size: 36px; color: #589dff; text-align: center;
	font-weight: 700;
	letter-spacing: -0.4px;
}

.complete_desc {
	width: 100%; height: auto; line-height: 1.5;
	font-size: 20px; color: #4a4a4a; text-align: center;
	font-weight: 500;
	letter-spacing: -0.4px;
	margin-top: 30px;
	word-break: keep-all;
}

@media (max-width: 479px){ 
	.complete_box { max-width: calc(100vw - 40px); padding: 40px 15px; border-radius: 10px; }
	.complete_title { font-size: 24px; }
	.complete_desc { font-size: 18px; }
}

@media (max-width: 749px) and (min-width: 480px) { 
	.complete_box { max-width: calc(100vw - 40px); }
	.complete_title { font-size: 24px; }
	.complete_desc { font-size: 18px; }

}

@media (max-width: 1023px) and (min-width: 750px) { 
}


@media (max-width: 1279px) and (min-width: 1024px) { 

}






#nav {
	position: fixed; top: 0px; left: 0px;
	width: 100%; height: 100vh; min-height: 100vh;
	z-index: 100;
	background-color: #d0d3d9;

}

#nav div {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
    justify-content: center;
	overflow: hidden;
	overflow-y: scroll;
    flex-wrap: wrap;
	padding: 240px 0px;
}



	#nav div::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; width: 0px; height: 0px; background: #efefef; }
	#nav div::-webkit-scrollbar {width: 0px; height: 0px; border: 0px solid #fff; }
	#nav div::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; width: 0px; height: 0px; background: #efefef; }
	#nav div::-webkit-scrollbar-track {width: 0px; height: 0px;background: #efefef; -webkit-border-radius: 0px; border-radius:0px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); }
	#nav div::-webkit-scrollbar-thumb {height: 0px; width: 0px; background: rgba(0,0,0,0); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); }




#nav ul {
	display: grid;

}

#nav ul li { 
	width: auto; height: auto; line-height: 1; 
	display: flex;
	align-items: center;
    justify-content: center;	
}

#nav ul li a {
	width: auto; height: auto; line-height: 1;
	font-size: 150px; color: #ffffff; 
	text-align: center;


}


#nav ul li a {
  position: relative;
  display: inline-block;
  color: #fff;                 /* 기본 색상 */
  text-decoration: none;
  font-size: 150px;
	transition: color 0.3s ease, opacity 0.3s ease;
}

/* hover 시 텍스트를 그라데이션으로 채움 */
#nav ul li a:hover {
	background: linear-gradient(90deg, #7d9fff, #d6aaff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text; /* 파이어폭스 */
	color: transparent;    /* 파이어폭스 */

	transform: skewX(-10deg);
	transition: transform 0.2s ease;

}

/* 밑줄 효과 (기본은 숨김) */
#nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px; /* 글자와의 간격 */
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #7d9fff, #d6aaff);
  transition: width 0.3s ease;
}

/* hover 시 밑줄 나타남 */
#nav ul li a:hover::after {
  width: 100%;
}



/*
@media (max-width: 479px){ 
	#header { padding: 20px 20px 20px; }
	#header .logo { width: 90px; } 
	#nav div { padding: 90px 0px; }
	#nav ul li a { font-size: 90px; }
	#nav ul { margin-top: -45px; }
	#nav ul li a::after { bottom: 5px; }

	#header .logo { width: 80px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 12px; }
	#header .icon_btn a:nth-child(1) { width: auto; height: 20px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 20px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 14px; }

}

@media (max-width: 749px) and (min-width: 480px) { 
	#header { padding: 20px 20px 20px; }
	#header .logo { width: 90px; } 
	#nav div { padding: 90px 0px; }
	#nav ul li a { font-size: 90px; }
	#nav ul li a::after { bottom: 5px; }

	#header .logo { width: 100px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 20px; }

	#header .icon_btn a:nth-child(1) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 22px; }


}

@media (max-width: 1023px) and (min-width: 750px) { 
	#header { padding: 30px 20px 30px; }
	#header .logo { width: 100px; } 
	#nav div { padding: 120px 0px; }
	#nav ul li a { font-size: 90px; }
	#nav ul li a::after { bottom: 5px; }

	#header .logo { width: 100px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 20px; }

	#header .icon_btn a:nth-child(1) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 22px; }

}


@media (max-width: 1279px) and (min-width: 1024px) { 

}
*/



#wrap.work { padding: 156px 0px 0px; }
.work_article {
	width: 100%; height: auto;
	display: flex;
	flex-wrap: wrap;
}

.work_article .work_item {
	width: 25%; height: auto;
}

.work_article .work_item .work_img {
	width: 100%; height: auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.work_article .work_item .work_img img { width: 100%; height: auto; }

.work_article .work_item .work_title {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0;
	display: flex;
	justify-content: center;
    align-items: center;

	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.work_article .work_item:hover .work_title { opacity: 0.77; }


.work_article .work_item .work_title > div {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 24px; color: #fff; text-align: center;
	padding: 0px 15px;
    word-break: break-all;
}


.content_article {
	width: 100%; height: auto;
}

.content_article > div {
	width: 100%; max-width: 1012px; height: auto;
	left: 50%; 
	transform: translate(-50%, 0%);
}

.content_article .video_box {
	width: 100%; height: auto;
}

.content_article .video_box img {
	width: 100%; height: auto;
}
.content_article .video_box iframe {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
}	

.content_article .info_box {
	width: 100%; height: auto;
	margin-top: 25px;
}


.content_article .info_box .title {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 36px; color: #fff;
	font-weight: 700;
	text-align: left;
}

.content_article .info_box .sub {
	width: 100%; height: auto; line-height: 1.2;

	font-size: 22px; color: #fff;
	font-weight: 400;
	text-align: left;
}

.content_article .more_box {
	width: 100%; height: auto;
	margin-top: 180px;

	display: flex;
	justify-content: center;
    align-items: center;
}

.content_article .more_box button {
	width: auto; height: auto;
	border: 1px solid #fff;
	font-size: 22px; color: #fff; text-align: center;
	background-color: #000;

	padding: 15px 25px;
	cursor: pointer;


	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.content_article .more_box button:hover {
	border: 1px solid #33abff;
	background-color: #33abff;
}






@media (max-width: 479px){ 

	
	.work_article .work_item { width: 100%; }
	.work_article .work_item .work_title > div { font-size: 18px; }


	.content_article .info_box .title { font-size: 26px; }
	.content_article .info_box .sub { font-size: 16px; }
	.content_article .more_box { margin-top: 60px; }
	.content_article .more_box button { font-size: 16px; padding: 10px 25px; }



 
}

@media (max-width: 749px) and (min-width: 480px) { 
	.work_article .work_item { width: 50%; }
	.work_article .work_item .work_title > div { font-size: 18px; }


	.content_article .info_box .title { font-size: 28px; }
	.content_article .info_box .sub { font-size: 18px; }
	.content_article .more_box { margin-top: 90px; }
	.content_article .more_box button { font-size: 18px; }




}

@media (max-width: 1023px) and (min-width: 750px) { 


	.work_article .work_item { width: 33.333%; }
	.work_article .work_item .work_title > div { font-size: 20px; }

	.content_article .info_box .title { font-size: 28px; }
	.content_article .info_box .sub { font-size: 18px; }
	.content_article .more_box { margin-top: 90px; }
	.content_article .more_box button { font-size: 18px; }
}


@media (max-width: 1279px) and (min-width: 1024px) { 

	.work_article .work_item { width: 33.333%; }

	.content_article .info_box .title { font-size: 32px; }
	.content_article .info_box .sub { font-size: 20px; }
	.content_article .more_box { margin-top: 120px; }
	.content_article .more_box button { font-size: 20px; }
	


}



@media (max-width: 1560px) and (min-width: 1280px) { 

}




@media (max-width: 479px){ 

}

@media (max-width: 749px) and (min-width: 480px) { 

}

@media (max-width: 1023px) and (min-width: 750px) { 
	#wrap.work { padding: 100px 0px 0px; } 
}


@media (max-width: 1279px) and (min-width: 1024px) { 

}




.contact_article {
	width: 100%; max-width: 1760px; height: auto;
	padding: 0px 100px;

	left: 50%;
	transform: translate(-50%, 0%);

}

.contact_article > div {
	width: 100%; max-width: 1620px; height: auto;
	left: 50%; 
	transform: translate(-50%, 0%);
}

.contact_article .map,
.contact_article .map img {
	width: 100%; height: auto; min-height: 360px;
}

.contact_article .map iframe {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
}

.contact_article .addr {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 20px; color: #545454;
	font-weight: 500;
	margin-top: 15px;
}

.contact_article .info {
	width: 100%; height: auto;
	margin-top: 150px;
	display: grid;
	gap: 15px;
}

.contact_article .info .info_item {
	width: 100%; height: auto; line-height: 1.5;
	display: flex;
	align-items: center;
	font-size: 20px; color: #545454; text-align: left;
}

.contact_article .info .info_item .label {
	width: 100px; 
}




@media (max-width: 479px){ 

	.contact_article .map, .contact_article .map img { min-height: 250px; }
	.contact_article .addr { font-size: 16px; }
	.contact_article .info .info_item .label { width: 80px; }
	.contact_article .info .info_item { font-size: 16px; }
	.contact_article .info { margin-top: 90px; gap: 10px; }
 	.contact_article { padding: 0px 20px; }

}

@media (max-width: 749px) and (min-width: 480px) { 


	.contact_article .addr { font-size: 18px; }
	.contact_article .info .info_item { font-size: 18px; }
	.contact_article .info { margin-top: 90px; gap: 10px; }
	.contact_article { padding: 0px 20px; }

}

@media (max-width: 1023px) and (min-width: 750px) { 

	.contact_article .addr { font-size: 18px; }
	.contact_article .info .info_item { font-size: 18px; }
	.contact_article .info { margin-top: 90px; }

	.contact_article { padding: 0px 20px; }

}


@media (max-width: 1279px) and (min-width: 1024px) { 


	.contact_article .info { margin-top: 120px; }



}



@media (max-width: 1560px) and (min-width: 1280px) { 

}