body {
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			position: relative;
		}

		main {
			position: relative;

.slide {
				position: relative;
				height: 860px;
				background-image: url("/resources/images/main/main1.png");
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				.slide-text {
					position: absolute;
					top: 280px;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
					max-width: 800px;
					padding: 0 20px;
					width: 100%;
				}

				.slide-subtitle {
					font-size: 22px;
					font-weight: 300;
					color: #E9E9E9;
					letter-spacing: -0.44px;
					display: block;
					margin-bottom: 16px;
					line-height: 1.4;
				}

				.slide-title {
					font-size: 40px;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: -0.8px;
					line-height: 1.3;
					word-break: keep-all;
					margin: 0;
				}

				&::after {
					content: "";
					display: block;
					width: 26px;
					height: 64px;
					position: absolute;
					background-image: url("/resources/images/main/ic_mouse-scroll.png");
					bottom: 0;
					margin-bottom: 40px;
					left: 50%;
					right: 50%;
					transform: translateX(-50%);
				}
			}
			.solution {
				height: auto;
				min-height: 1664px;
				padding: 120px 192px 140px 192px;
				background-image: url("/resources/images/main/solution.png");
				background-size: cover;
				background-position: center;
				display: flex;
				flex-direction: column;

				.content-box {
					text-align: center;
					margin-bottom: 80px;

					span {
						font-size: 24px;
						color: #EE770C;
						font-weight: 600;
					}

					h2 {
						font-size: 36px;
						color: #212529;
						font-weight: 800;
						margin-top: 10px;
						margin-bottom: 16px;
					}

					pre {
						white-space: pre-line;
						font-size: 20px;
						color: #343A40;
						line-height: 32px;
						margin-top: 20px;
					}

					button {
						width: 282px;
						height: 54px;
						border-radius: 27px;
						background-color: #F9F9F9;
						border: 1px solid #CED4DA;
						color: #212529;
						font-size: 20px;
						font-weight: 600;
						margin-top: 60px;
						display: inline-flex;
						align-items: center;
						justify-content: center;

						&::after {
							content: "";
							display: inline-block;
							width: 26px;
							height: 26px;
							background-image: url("/resources/images/main/ic_move.svg");
							margin-left: 16px;
						}

						&:hover {
							background-color: #053F8B;
							color: white;

							&::after {
								background-image: url("/resources/images/main/ic_move_white.svg");
							}
						}
					}
				}

				.link-area {
					width: 100%;
					max-width: 1536px;
					margin: 0 auto;
					display: flex;
					flex-direction: row;
					gap: 20px;

					.hardware, .software {
						flex: 1;
						height: 1088px;
						background-color: #F7F7F7;

						.hardware-top, .software-top {
							text-align: center;
							margin-bottom: 54px;

							h3 {
								font-size: 30px;
								font-weight: 700;
								color: #333333;
								padding-top: 80px;
								margin-bottom: 16px;
								line-height: 1.3;
							}

							pre {
								font-size: 20px;
								font-weight: 400;
								color: #666666;
								line-height: 1.6;
								font-family: inherit;
								white-space: pre-wrap;
								padding: 0 20px;
							}
						}

						.hardware-bottom, .software-bottom {
							ul {
								list-style: none;
								display: flex;
								flex-direction: column;
								gap: 32px;
								padding: 0 78px;
							}

							li {
								width: 100%;
							}

							a {
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 100%;
								max-width: 602px;
								height: 80px;
								padding: 20px 24px;
								border: 1px solid #000000;
								text-decoration: none;
								color: #000000;
								font-size: 22px;
								transition: all 0.3s ease;
								position: relative;
								overflow: hidden;
								margin: 0 auto;

								&:hover {
									background: #212529;
									color: #FFFFFF;
									transform: translateY(-2px);
									box-shadow: 0 6px 20px rgba(107, 182, 214, 0.3);
								}

								&::after {
									content: '';
									width: 24px;
									height: 24px;
									background-repeat: no-repeat;
									background-position: center;
									background-image: url("/resources/images/main/ic_move.svg");
									background-size: contain;
									flex-shrink: 0;
									transition: transform 0.3s ease;
								}

								&:hover::after {
									background-image: url("/resources/images/main/ic_move_white.svg");
								}
							}
						}
					}

					.solution-link {
						flex: 1;

						&:hover {
							button {
								background-color: #EE770C;

								path {
									fill: #FFF;
								}
							}
						}

						div {
							height: 100%;
							position: relative;

							&.hardware {
								background-image: url("/resources/images/main/hardware.png");
							}

							&.software {
								background-image: url("/resources/images/main/business-software.png");
							}

							button {
								width: 72px;
								height: 72px;
								position: absolute;
								right: 0;
								background-color: #212529;
							}

							h3 {
								position: absolute;
								bottom: 0;
								color: #FFFFFF;
								font-size: 26px;
								font-weight: bold;
								margin: 0 0 40px 40px;

								&::before {
									content: "";
									display: block;
									width: 62px;
									height: 4px;
									background-color: #FFFFFF;
									margin-bottom: 12px;
								}
							}
						}
					}
				}
			}



			.business {

				padding-top: 100px;
				padding-bottom: 100px;
				background-color: #F7F7F7;

				.content-box {

					text-align: center;

					span {
						font-size: 24px;
						color: #EE770C;
						font-weight: 600;
					}

					h2 {
						font-size: 36px;
						color: #212529;
						font-weight: 800;
						margin-top: 10px;
					}

					pre {
						white-space: pre-line;
						font-size: 18px;
						color: #343A40;
						line-height: 32px;
						margin-top: 20px;
						height: 56px;
					}
				}

				.link-area {
					display: flex;
					margin-top: 80px;
					padding: 0 192px;
					gap: 28px;

					.business-link {
						flex: 1;

						&:hover {
							button {
								background-color: #EE770C;

								path {
									fill: #FFF;
								}
							}
						}

						> div {
							height: 472px;
							display: flex;
							flex-direction: column;
							padding-top: 24px;
							/*justify-content: center;*/
							align-items: center;
							background-color: #FFFFFF;
							background-size: cover;

							h3 {
								font-size: 21px;
								font-weight: bold;
								color: #000000;
							}

							pre {
								white-space: pre-line;
								margin-top: 28px;
								color: #000000;
								font-size: 18px;
								text-align: center;
								line-height: 32px;
							}

							button {
								margin-top: 20px;
								width: 54px;
								height: 54px;
								background-color:#F7F7F7;
							}
						}

						/*.software {*/
						/*	background-image: url("/resources/images/main/business-business-software.png");*/
						/*}*/

						/*.information {*/
						/*	background-image: url("/resources/images/main/business-business-information.png");*/
						/*}*/

						/*.consulting {*/
						/*	background-image: url("/resources/images/main/business-business-consulting.png");*/
						/*}*/

						/*.surveying {*/
						/*	background-image: url("/resources/images/main/business-surveying.png");*/
						/*}*/

					}
				}
			}

			/* 수정된 .about 섹션 CSS */
			.about {
				position: relative;
				height: 640px;
				padding-top: 120px; /* margin-top 대신 padding-top 사용 */

				a {
					display: inline-block;

					&:hover {
						button {
							background-color: #EE770C;

							path {
								fill: #FFF;
							}
						}
					}
				}

				.content-box {
					text-align: center;
					width: 100%;
					height: 400px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: flex-end; /* 버튼들을 아래쪽 기준으로 정렬 */
				}

				.content {
					height: 100%;
					width: 368px;
					display: flex;
					flex-direction: column;
					align-items: center; /* 모든 내용을 가운데 정렬 */
					text-align: center;

					img {
						margin-top: 64px;
						width: auto; /* 이미지 원본 비율 유지 */
						height: auto;
						max-width: 100%; /* 반응형 대응 */
						padding: 0 64px;
					}

					pre {
						margin-top: 48px;
						margin-bottom: auto; /* 핵심! 버튼을 아래로 밀어냄 */
						font-size: 18px;
						white-space: pre-line;
						color: #343A40;
						line-height: 32px;
						font-family: inherit;
					}

					a {
						background-repeat: no-repeat;
						background-position: center;
						background-size: contain;
						display: block;
						transition: transform 0.3s ease;
						margin-bottom: 50px;
						width: 54px;
						height: 54px;
						background-image: url("/resources/images/main/plus-btn.svg"); /* 기본 이미지를 CSS에 */

					}

					a:hover {

						background-image: url("/resources/images/main/plus-hover.png");
					}
				}
			}
			/* ====== 레이아웃 & 오버레이 ====== */
			.welcome-modal-overlay {
				position: fixed;
				inset: 0;

				background: rgba(0,0,0,0.55);
				display: none; /* JS에서 제어 */
				align-items: center;
				justify-content: center;
				z-index: 10000;

			}

			/* 스크롤 잠금용 */
			.body-lock {
				overflow: hidden;
			}

			/* ====== 모달 박스 ====== */
			.welcome-modal {
				--modal-w: min(1117px, 92vw); /* 원하는 최대폭 */
				max-width: 95vw;   /* 작은 화면에서는 줄어들도록 */
				width: min(1117px, 92vw); /* 핵심 */

				background: transparent;
				box-shadow: none;             /* 필요시 조정 */
				border: 0;
			}

			/* ====== 이미지 영역 ====== */
			.picture {
				line-height:0;
				position: relative;
				overflow: hidden;              /* 둥근모서리 밖 흰 배경 차단 */
				/* padding: 0; border: 0;  반드시 공백 없음 */
			}
			.background-img {
				display: block;				
				width: 100%;
			}

			/* 이미지 위 버튼 */
			.overlay-btn {
				position: absolute;
				left: 59px;          /* 스샷처럼 좌측 상단 쪽 */
				top: 169px;
				/*width: 236px;*/
				height: 38px;
				text-align: center;
				max-width: 95vw;   /* 작은 화면에서는 줄어들도록 */
				width: min(236px, 92vw); /* 핵심 */


				font-size: 17px;
				font-weight: 700;
				background: #fff;
				color: #217767;
				border: 0;
				border-radius: 999px;
				box-shadow: 0 6px 16px rgba(0,0,0,0.18);
				cursor: pointer;
				transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
			}
			.overlay-btn:hover {
				color: #217767;
				transform: translateY(-1px);
				box-shadow: 0 10px 20px rgba(0,0,0,0.22);
			}

			/* ====== 하단 바 ====== */
			.modal-bottom-btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 8px;
				background: #ffffff;
				border-top: 1px solid #e9ecef;
				width: 100%;
			}

			.modal-bottom-btn .left-btn,
			.modal-bottom-btn .right-btn {
				flex: 1 1 0;
				text-align: center;
				padding: 14px 10px;
				font-size: 15px;
				background: none;
				border: 0;
				cursor: pointer;
				color: #111827;


			}

			.modal-bottom-btn .left-btn:hover {
				background: #f6f7f9;
			}

			.modal-bottom-btn .right-btn {
				border-left: 1px solid #e9ecef;
			}
			.modal-bottom-btn .right-btn:hover {
				background: #f6f7f9;
			}

			/* ====== 반응형 미디어 쿼리 ====== */

			/* 1600px 이하 */
			@media (max-width: 1600px) {
				.solution {
					padding: 120px 100px 140px 100px;

					.link-area {
						.hardware, .software {
							.hardware-bottom, .software-bottom {
								ul {
									padding: 0 40px;
								}
							}
						}
					}
				}

				.business {
					padding: 120px 100px 140px 100px;

					.link-area {
						padding: 0 40px;
					}
				}
			}

			/* 1400px 이하 */
			@media (max-width: 1400px) {
				.business {
					padding: 120px 60px 140px 60px;
					height: auto !important;
					min-height: 0 !important;
					position: relative;
					background-color: #F7F7F7;
				}

				.business + .solution {
					margin-top: 0;
				}

				.solution {
					padding: 120px 60px 140px 60px;

					.link-area {
						.hardware, .software {
							.hardware-top, .software-top {
								h3 {
									font-size: 26px;
								}

								pre {
									font-size: 18px;
								}
							}

							.hardware-bottom, .software-bottom {
								ul {
									padding: 0 30px;
								}

								a {
									font-size: 20px;
									padding: 18px 20px;
								}
							}
						}
					}
				}
			}

			/* 1200px 이하 */
			@media (max-width: 1200px) {
				.welcome-modal {
					width: min(900px, 90vw);
					max-width: 90vw;
				}

				.overlay-btn {
					left: 40px;
					top: 140px;
					width: min(200px, 25vw);
					font-size: 16px;
					height: 36px;
				}

				.modal-bottom-btn .left-btn,
				.modal-bottom-btn .right-btn {
					padding: 12px 8px;
					font-size: 14px;
				}

				.business {
					padding: 100px 40px 120px 40px;
				}

				.solution {
					padding: 100px 40px 120px 40px;
					min-height: auto;

					.content-box {
						margin-bottom: 60px;

						h2 {
							font-size: 32px;
						}

						span {
							font-size: 22px;
						}

						pre {
							font-size: 18px;
							line-height: 28px;
						}
					}

					.link-area {
						flex-direction: column;
						gap: 40px;

						.hardware, .software {
							width: 100%;
							max-width: 800px;
							margin: 0 auto;
							height: auto;
							min-height: 900px;

							.hardware-top, .software-top {
								padding-top: 60px;
								margin-bottom: 40px;

								h3 {
									font-size: 28px;
									padding-top: 60px;
								}
							}

							.hardware-bottom, .software-bottom {
								ul {
									padding: 0 60px 60px 60px;
								}
							}
						}
					}
				}
			}

			/* 992px 이하 */
			@media (max-width: 992px) {
				.welcome-modal {
					width: min(700px, 85vw);
					max-width: 85vw;
				}

				.overlay-btn {
					left: 30px;
					top: 120px;
					width: min(180px, 30vw);
					font-size: 15px;
					height: 34px;
					padding: 8px 14px;
				}

				.modal-bottom-btn .left-btn,
				.modal-bottom-btn .right-btn {
					padding: 12px 6px;
					font-size: 14px;
				}
			}

			/* 768px 이하 */
			@media (max-width: 768px) {
				.welcome-modal {
					width: min(600px, 95vw);
					max-width: 95vw;
				}

				.overlay-btn {
					left: 20px;
					top: 100px;
					width: min(160px, 35vw);
					max-width: 25vw;
					font-size: 14px;
					height: 32px;
					padding: 10px 16px;
				}

				.modal-bottom-btn {
					flex-direction: column;
					gap: 0;
				}

				.modal-bottom-btn .left-btn,
				.modal-bottom-btn .right-btn {
					width: 100%;
					padding: 14px 10px;
					font-size: 14px;
					border-left: 0;
					border-top: 1px solid #e9ecef;
				}

				.modal-bottom-btn .left-btn {
					border-top: 0;
				}

				.about {
					.content {
						img {
							padding: 0;
						}
					}
				}

				.slide {
					height: 530px;

					.slide-text {
						font-size: 20px;
						top: 140px;

						.slide-title {
							font-size: 30px;
						}
					}
				}

				.business {
					padding: 80px 20px 100px 20px;

					.content-box {
						.link-area {
							padding: 0 30px 50px 30px;
						}
					}
				}

				.solution {
					padding: 80px 20px 100px 20px;

					.content-box {
						margin-bottom: 50px;

						h2 {
							font-size: 28px;
						}

						span {
							font-size: 20px;
						}

						pre {
							font-size: 16px;
							line-height: 26px;
							padding: 0 10px;
						}

						button {
							width: 250px;
							height: 50px;
							font-size: 18px;
							margin-top: 40px;
						}
					}

					.link-area {
						gap: 30px;

						.hardware, .software {
							min-height: 800px;

							.hardware-top, .software-top {
								margin-bottom: 30px;

								h3 {
									font-size: 24px;
									padding-top: 50px;
								}

								pre {
									font-size: 16px;
									line-height: 1.5;
								}
							}

							.hardware-bottom, .software-bottom {
								ul {
									padding: 0 30px 50px 30px;
									gap: 24px;
								}

								a {
									font-size: 18px;
									height: 70px;
									padding: 15px 20px;

									&::after {
										width: 20px;
										height: 20px;
									}
								}
							}
						}
					}
				}
			}

			/* 414px 이하 */
			@media (max-width: 414px) {
				.welcome-modal {
					width: 95vw;
					max-width: 95vw;
				}

				.overlay-btn {
					left: 15px;
					top: 80px;
					width: min(140px, 40vw);
					max-width: 30vw;
					font-size: 14px;
					height: 30px;
					padding: 10px 16px;
				}

				.modal-bottom-btn .left-btn,
				.modal-bottom-btn .right-btn {
					padding: 12px 8px;
					font-size: 13px;
				}

				.about {
					.content-box {
						pre {
							font-size: 15px;
						}
					}
				}

				.business {
					padding: 60px 15px 80px 15px;
				}

				.solution {
					padding: 60px 15px 80px 15px;

					.content-box {
						h2 {
							font-size: 24px;
						}

						span {
							font-size: 18px;
						}

						pre {
							font-size: 14px;
							line-height: 24px;
						}

						button {
							width: 220px;
							height: 48px;
							font-size: 16px;
						}
					}

					.link-area {
						.hardware, .software {
							.hardware-top, .software-top {
								h3 {
									font-size: 22px;
									padding-top: 40px;
								}

								pre {
									font-size: 14px;
								}
							}

							.hardware-bottom, .software-bottom {
								ul {
									padding: 0 20px 40px 20px;
									gap: 20px;
								}

								a {
									font-size: 16px;
									height: 65px;
									padding: 12px 16px;
								}
							}
						}
					}
				}
			}


		}
		.business .link-area {
			display: flex;
			flex-wrap: wrap;
			gap: 28px;
		}

		.business .business-link {
			flex: 1 1 calc(25% - 28px);
			min-width: 260px;
			display: block;
		}

		.business .business-link > div {
			height: auto !important;
			padding: 24px 20px 28px;
			align-items: center;
		}

		.business .content-box pre {
			height: auto !important;
		}

		.business .business-link img {
			width: 100%;
			height: auto !important;
			aspect-ratio: 16 / 9;
			object-fit: cover;
			display: block;
			margin-top: 24px;
			border-radius: 6px;
		}

		@media (max-width: 1200px) {
			.business .link-area { padding: 0 40px; }
			.business .business-link { flex: 1 1 calc(50% - 28px); }
		}

		@media (max-width: 768px) {
			.business .link-area { gap: 20px; padding: 0 20px; }
			.business .business-link { flex: 1 1 100%; }
			.business .business-link > div { padding: 20px 16px 24px; }
			.business .business-link h3 { font-size: 18px; }
			.business .business-link pre { font-size: 16px; line-height: 26px; }
		}

		@media (max-width: 414px) {
			.business .business-link pre { font-size: 14px; line-height: 24px; }
		}