@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../../common/css/font/Outfit-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}


@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes bounce {
	0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
	}
	50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
	}
}

* {
	box-sizing: border-box;
	line-height: normal;
	letter-spacing: 1;
}

body {
	background: oklch(.985 .002 95 / 1);
}



.main_wrapper section.top_banner {
	min-height: 60vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.banner_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		img {
			width: 100%;
			height: 100%;
			position: relative;
			object-fit: cover;
			object-position: top;
		}
		&:after {
			content:"";
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left:0;
			background: linear-gradient(to bottom, #00000080, #00000059 , #0009);
		}
	}
	.text_box {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: fadeIn 1s ease-out forwards;
		padding: 5rem 1.5rem;
		
		.txt_line1 {
			background-color: #ffffff0d;
			border: 1px solid  #fff3;
			border-radius: 1rem;
			width: 5rem;
			height: 5rem;
			color: #fff;
			letter-spacing: -.05em;
			line-height: 1;
			font-weight: 900;
			font-size: 1.875rem;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-bottom: 1rem;
			font-family: "Outfit", "Noto Sans KR", sans-serif;
			
			&:before {
				content: "";
				background: #ea9941;
				width: .625rem;
				height: .625rem;
				position: absolute;
				border-radius: 100%;
				right: -.3rem;
				top: -.3rem;
			}
			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;				
				background: linear-gradient(to bottom right, oklch(.75 .14 65 / .2), transparent);
				border-radius: 1rem;
			}
		}
		.txt_line2{
			color: #ffffff80;
			font-weight: 300;
			letter-spacing: .35em;
			text-transform: uppercase;
			font-size: .75rem;
			line-height: 1rem;
			display: flex;
			align-items: center;
			gap: .5rem;
			margin-bottom: 2.5rem;
			
			&:before,
			&:after {
				content: "";
				width: 2rem;
				height: 1px;
				background-color: #ffffff40;
			}
		}
		.txt_line3{
			font-size: 4.5rem;
      line-height: 1;
			color: #fff;
			letter-spacing: -.025em;
			font-weight: 700;
			margin-bottom: 1.5rem;
			font-family: "Outfit", "Noto Sans KR", sans-serif;
		}
		.txt_line4{
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 2rem;
			
			span {
				background: #ea9941;
				width: .5rem;
				height: .5rem;
				border-radius: 100%;
			}
			&:before,
			&:after {
				content: "";
				width: 4rem;
				height: 1px;
				background-color: #ffffff4d;
			}
		}
		.txt_line5{
			font-size: 2.25rem;
      line-height: 2.5rem;
			color: #fff;
			font-weight: 600;
			margin-bottom: 1rem;
			font-family: "Outfit", "Noto Sans KR", sans-serif;
		}
		.txt_line6{
			color: #ffffffb3;
			font-size: 1.125rem;
      line-height: 1.75rem;
			max-width: 32rem;
			margin: 0 auto;
			text-align: center;
		}
	}
	
	.icon_arrow {
		font-size: 1.25rem;
    line-height: 1.75rem;
		color: #ffffff4d;
		animation: 1s infinite bounce;
		position: absolute;
		bottom: 2rem;
		left: 50%;
	}
}


.main_container {
	max-width: 64rem;
	margin: 0 auto;
}


.main_wrapper section.banner_info {
	background-color: oklch(.96 .003 95);
	border-bottom: 1px solid #e7e3e4b3;
	
	.text_box {
		padding: 1.25rem 3rem;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
		
		.txt_item {
			display: flex;
			align-items: center;
			gap: .75rem;
			
			.img_icon {
				width: 2.25rem;
				height: 2.25rem;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: .5rem;
				color: #e27900;
				background: #fbf9fa;
				transition-duration: .3s;
				transition-property: all;
				transition-timing-function: cubic-bezier(.4, 0, .2, 1);
				font-size: 1rem;
				flex-shrink: 0;
			}
			.txt_info {
				.title {
					letter-spacing: .05em;
					text-transform: uppercase;
					font-size: 10px;
					margin-bottom: .125rem;
					color: #928e8f;
				}
				.detail {
					font-size: .875rem;
					line-height: 1.25rem;
					color: #242121;
					
					> a:hover {
						color: #e27900;
					}
				}
				.locat {
					line-height:1.375;
					
					> a {
						line-height: inherit;
					}
				}
			}
			&:hover {
				.img_icon {
					background: #e27900;
					color: #fff;
				}
			}
		}
	}
}

.main_container {
	.main_top_txtbox {
		text-align: center;
		
		.txt1 {
			color: #928e8f;
			letter-spacing: .1em;
			text-transform: uppercase;
			font-size: .75rem;
			line-height: 1rem;
			margin-bottom: .75rem;
		}
		.txt2 {
			font-family: "Outfit", "Noto Sans KR", sans-serif;
			font-size: 2.25rem;
			line-height: 2.5rem;
			color: #070506;
			font-weight: 300;
			margin-bottom: .75rem;
			
			* {
				line-height: inherit;
			}
			b {
				font-weight: 700;
				font-family: "Outfit", "Noto Sans KR", sans-serif;
			}
			c {
				color: #e27900;
				font-weight: 700;
				font-family: "Outfit", "Noto Sans KR", sans-serif;
			}
		}
		.txt3 {
			color: #747071;
			font-size: .875rem;
			line-height: 1.25rem;
		}
	}
}
.main_wrapper section.portfolio {
	background-color: oklch(.985 .002 95 / 1);
	
	.portfolio_content {
		padding: 5rem 3rem;
		
		.main_top_txtbox {			
			.txt3 {
				max-width: 36rem;
				margin: 0 auto;
				line-height: 1.625;
			}
		}
		.p_itembox {
			margin-top: 2.5rem;
			.p_category {
				display: flex;
				flex-wrap:wrap;
				justify-content: center;
				align-items: center;
				gap: .5rem;
				
				> li button {
					font-size: .875rem;
			    line-height: 1.25rem;
					padding: 0.5rem 1.25rem;
					font-weight: 500;
					color: oklch(.45 .005 260 / 1);
					background: oklch(.96 .003 95 / 1);
					border-radius: 9999px;
					cursor: pointer;
				}
				> li button.on {
					background: oklch(.68 .17 60 / 1);
					color: #fff;
				}
			}
			.p_boardlist {
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				gap: 0.75rem;
				transition-duration: .3s;
				border-radius: .5rem;
				margin-top: 2.5rem;
				
				> li {
					background: oklch(.985 .002 95 / 1);
					border: 1px solid oklch(.92 .004 95 / 1);
					border-radius: .5rem;
					overflow: hidden;
					
					&:hover {
						border-color: oklch(.88 .006 95);
						
						.img {
							img {
								transform: scale(1.05);
							}
						}
					}
					.img {
						height: 14rem;
						position: relative;
						background: oklch(.96 .003 95 / 1);
						overflow: hidden;
						
						img{
							-o-object-fit: cover;
							object-fit: cover;
							-o-object-position: top;
							object-position: top;
							transition-duration: .5s;
							width: 100%;
							height: 100%;
						}
						.category {
							font-size: .75rem;
							line-height: 1rem;
							padding: 0.25rem 0.75rem;
							background: oklch(.6 .085 185 / 1);
							color: #fff;
							border-radius: 9999px;
							position: absolute;
							top: 0.75rem;
							left: 0.75rem;
							z-index: 10;
							font-weight: 600;
						}
					}
					.txt_box {
						padding: 1.25rem;
						
						.title {
							font-size: 1.125rem;
			        line-height: 1.75rem;
							font-weight: 700;
							margin-bottom: .5rem;
							font-family: "Outfit", "Noto Sans KR", sans-serif;
						}
						.detail {
							color: oklch(.55 .005 260 / 1);
							font-size: .875rem;
							line-height: 1.625;
						}
						.tag_box {
							margin-top: 1rem;
							display: flex;
							flex-wrap: wrap;
							gap: .5rem;
							
							.tag_item {
								font-size: .75rem;
								line-height: 1rem;
								background: oklch(.94 .022 80 / 1);
								color: oklch(.28 .025 80 / 1);
								padding: 0.25rem 0.625rem;
								border-radius: .375rem;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}
}
.main_wrapper section.contact {
  background-color: oklch(.985 .002 95 / 1);
	
	.contact_content {
		padding: 4rem 3rem;
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		
		.q_itembox {
			display: flex;
			flex-direction: column;
			gap: 2.5rem;
			
			.q_item {
				.q_title {
					display: flex;
					align-items: center;
					gap: .75rem;
					border-bottom: 1px solid #e7e3e4;
					padding-bottom: 1rem;
					margin-bottom: 1.25rem;
					
					.num {
						background: #e27900;
						color: #fff;
						font-size: .75rem;
				    line-height: 1rem;
						font-weight: 700;
						width: 1.75rem;
						height: 1.75rem;
						border-radius: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.txt {
						color: #131111;
						font-size: 1rem;
				    line-height: 1.5rem;
						font-weight: 600;
					}
					.txt2 {
						color: #747071;
						font-size: .75rem;
				    line-height: 1rem;
						font-weight: 400;
						margin-top: auto;
						margin-bottom: 0.3rem;
						margin-left: -0.25rem;
					}
				}
			}
			.q_con {
				display: grid;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: .75rem;
				
				.inp_chk {
					color: #3d393a;
					padding: .75rem 1rem;
					border: 1px solid #e7e3e4;
					background: #fff;
					border-radius: .5rem;
					display: flex;
					align-items: center;
					gap: .625rem;
					cursor: pointer;
					
					input {
						display: none;
					}
					.inp_bar {
						border: 1px solid #dbd6d7;
						background: #fff;
						width: 1rem;
						height: 1rem;
						border-radius: .25rem;
					}
					.inp_txt {
						font-size: .75rem;
						line-height: 1.375;
					}
				}
				.inp_chk:has(input:checked) {
					border-color: #ea9941;
					background: #fdf4e7;
					color: #b0540e;
					
					.inp_bar {
						background: #e27900;
						border-color: #e27900;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&:after {
							content: "\eb7b";
							font-family: remixicon !important;
							font-style: normal;
							-webkit-font-smoothing: antialiased;
							-moz-osx-font-smoothing: grayscale;
							font-size: .75rem;
							line-height: 1rem;
							color: #fff;
						}
					}
				}
				.inp_chk:hover {
					border-color: #ea9941;
					background: #fdf4e7;
					color: #b0540e;
				}
			}
			.q_con2 {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 1rem;
				
				.items {
					display: flex;
					flex-direction: column;
					gap: .375rem;
					
					label {
						font-size: .75rem;
				    line-height: 1rem;
						color: #585455;
						
						strong {
							font: inherit;
							color: #f87171;
						}
					}
					input {
						font-size: .875rem;
						line-height: 1.25rem;
						padding: .75rem 1rem;
						border: 1px solid #e7e3e4;
						border-radius: .375rem;
						transition-property: all;
						transition-duration: .15s;
						transition-timing-function: cubic-bezier(.4, 0, .2, 1);
						cursor: text;
						color: oklch(.18 .004 260 / 1);
					}
					input:focus {
						box-shadow: 0 0 0 0px #fff, 0 0 0 calc(1px + 0px) #eeb97b, 0 0 0 0px #fff;
						border-color: #eeb97b;
						outline: 0;
					}
					input[readonly] {
						background: #fff;
					}
					input.s_date {
						background: #fff url('../img/main/calendar-line.png') no-repeat right 1rem center;
						background-size: 0.8rem;
						cursor: pointer;
					}
					input::placeholder {
						color: #949899;
					}
				}
			}
			.q_con3 {
				textarea {
					width: 100%;
					font-size: .875rem;
			    line-height: 1.25rem;
					padding: 0.75rem 1rem;
					border: 1px solid #e7e3e4;
					border-radius: .375rem;
					transition-property: all;
					transition-duration: .15s;
					transition-timing-function: cubic-bezier(.4, 0, .2, 1);
					cursor: text;
				}
				textarea::placeholder {
					color: #949899;
				}
				textarea:focus {
					box-shadow: 0 0 0 0px #fff, 0 0 0 calc(1px + 0px) #eeb97b, 0 0 0 0px #fff;
					border-color: #eeb97b;
					outline: 0;
					background: #fff;
				}
				textarea:hover {
					background: #fff;
				}
				.agree_box {
					padding: 1.25rem;
					background: oklch(.96 .003 95);
					margin-top: 2.5rem;
					border-radius: .5rem;
					
					.agree_info {
						display: flex;
						align-items: flex-start;
						gap: .75rem;
						
						.inp_chk {
							margin-top: .125rem;
							input {
								display: none;
							}
							.inp_bar {
								border: 1px solid #dbd6d7;
								background: #fff;
								width: 1.25rem;
								height: 1.25rem;
								border-radius: .25rem;
								display: flex;
								cursor: pointer;
								align-items: center;
								justify-content: center;
							}
							input:checked + .inp_bar {
								background: #e27900;
								border-color: #e27900;
								
								&:after {
									content: "\eb7b";
									font-family: remixicon !important;
									font-style: normal;
									-webkit-font-smoothing: antialiased;
									-moz-osx-font-smoothing: grayscale;
									font-size: .75rem;
									line-height: 1rem;
									color: #fff;
								}
							}
						}
						.txt {
							color: #3d393a;
							font-size: .875rem;
					    line-height: 1.25rem;
							
							button {
								color: #cc6600;
								font-weight: 500;
								
								&:hover {
									text-decoration-line: underline;
								}
							}
							strong {
								font: inherit;
                color: #f87171;
							}
						}
					}
					.agree_list_box {
						display: none;
					}
					.agree_list {
						
						background: #fff;
						padding: 1rem;
						font-size: 0.75rem;
						border-radius: 0.25rem;
						border: 1px solid #e7e3e4;
						max-height: 10rem;
						margin-top: .75rem;
						overflow-y: auto;
						color: #585455;
						display: flex;
						flex-direction: column;
						gap: 0.5rem;
						
						> li strong {
							font: inherit;
							font-weight: 700;
							line-height: 1.625;
						}
					}
				}
			}
		}
		.btn_area {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 0.5rem;
			
			button {
				transition-property: all;
				transition-duration: .2s;
				transition-timing-function: cubic-bezier(.4, 0, .2, 1);
				border-radius: .5rem;
				display: flex;
				align-items: center;
				gap: .75rem;
				padding: 1rem 3.5rem;
				background: #e27900;
				color: #fff;
				font-size: 1rem;
		    line-height: 1.5rem;
				font-weight: 600;
				
				i {
					font-weight: inherit;
				}
				
				&:hover {
					background: #cc6600;
				}
			}
		}
	}
}



@media (max-width: 1024px) {
	.main_wrapper section.top_banner {
    .text_box {
      .txt_line3 {
				font-size: 3.75rem;
        line-height: 1;
			}
			.txt_line5 {
				font-size: 1.875rem;
        line-height: 2.25rem;
			}
		}
	}
	.main_wrapper section.banner_info {
    .text_box {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	.main_wrapper section.portfolio {
    .portfolio_content {
      .p_itembox {
				.p_boardlist {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
			}
		}
	}
	.main_wrapper section.contact {
    .contact_content {
      .q_itembox {
				.q_con {
					grid-template-columns: repeat(3, minmax(0, 1fr));
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.main_wrapper section.top_banner {
    .text_box {
      .txt_line3 {
				font-size: 2.25rem;
        line-height: 2.5rem;
			}
			.txt_line4 {
				&:before, &:after {
					width: 3rem;
				}
			}
			.txt_line5 {
				font-size: 1.5rem;
				line-height: 2rem;
			}
			.txt_line6 {
				font-size: 1rem;
				line-height: 1.625;
			}
		}
	}
	.main_wrapper section.banner_info {
		.text_box{
			padding: 1.2rem 1.5rem;
		}
	}
	.main_wrapper section.portfolio {
    .portfolio_content {
			padding: 4rem 1.5rem;
      .p_itembox {
				.p_boardlist {
					grid-template-columns: repeat(2, minmax(0, 1fr));
					
					> li {
						.img {
							height: 13rem;
						}
						.txt_box {
							.title {
								font-size: 1rem;
								line-height: 1.5rem;
							}
						}
					}
				}
			}
		}
	}
	.main_container {
		.main_top_txtbox {
			.txt2 {
				font-size: 1.875rem;
				line-height: 2.25rem;
			}
		}
	}
	.main_wrapper section.contact {
		.contact_content {
			padding: 4rem 1.5rem;
			
			
		}
	}
}

@media (max-width: 640px) {
	.main_wrapper section.banner_info {
    .text_box {
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}
	}
	.main_wrapper section.portfolio {
    .portfolio_content {
      .p_itembox {
				.p_boardlist {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}
			}
		}
	}
	.main_wrapper section.contact {
    .contact_content {
      .q_itembox {
				.q_con {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
				.q_con2 {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}
			}
		}
	}
}