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

		.main-header {
			height: 440px;
			padding-top: 190px;
			margin: 0 auto;
			background-image: url("/resources/images/solution/solution.png");
			background-size: cover;
			background-position: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-left: 20px;
			padding-right: 20px;

			h1 {
				font-size: 36px;
				font-weight: bold;
				color: #fff;
			}

			p {
				margin-top: 28px;
				font-size: 22px;
				color: #CED4DA;
				text-align: center;
				line-height: 34px;
			}
		}

		.main-content {
			padding: 80px 0 52px 0;
			text-align: center;
			width: 100%;
			box-sizing: border-box;
		}

		.solution-nav {
			min-height: 100px;
			overflow-x: hidden;
			border-bottom: 1px solid #DDDFE1;

			.solution-list {
				display: flex;
				flex-wrap: wrap;
				list-style: none;
				margin: 0 192px;
				padding: 0;
				justify-content: center;
			}

			.solution-item {
				flex: 1 1 auto;
				min-width: 120px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;

				.solution-link {
					display: inline-flex;
					color: #86898B;
					font-size: clamp(13px, 1.5vw, 22px);
					font-weight: bold;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: center;
					text-decoration: none;
					transition: color 0.3s ease;
					padding: 0 10px;
					text-align: center;
					word-break: keep-all;

					&.on, &:hover {
						color: #0C5EC6;
						border-bottom: 2px solid #0C5EC6;
					}
				}
			}
		}

		.title {
			text-align: center;
			margin-top: 84px;
			padding: 0 20px;
		}

		.solution-title {
			color: #0C5EC6;
			font-size: 44px;
			font-weight: 800;
			position: relative;
			display: inline-block;
			line-height: 1.2;
			letter-spacing: 0;
			text-align: center;
			font-family: 'Pretendard', sans-serif;
			opacity: 1;
			word-break: keep-all;
		}

		.solution-subtitle {
			margin-top: 15px;
			color: #717171;
			font-size: 26px;
			letter-spacing: -0.52px;
			line-height: 24px;
			text-align: center;
			font-family: 'Pretendard', sans-serif;
			font-weight: 500;
			opacity: 1;
		}

		.image-area {
			padding: 33px 238px 52px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.image-area img {
			max-width: 100%;
			height: auto;
		}

		/* 태블릿 (1400px 이하) */
		@media (max-width: 1400px) {
			.solution-nav .solution-item {
				min-width: 150px;
			}
		}

		/* 태블릿 (1200px 이하) */
		@media (max-width: 1200px) {
			.main-content {
				padding: 60px 40px 52px;
			}

			.solution-nav .solution-item {
				min-width: 140px;
			}

			.solution-title {
				font-size: 38px;
			}

			.solution-subtitle {
				font-size: 24px;
			}
		}

		/* 태블릿 (992px 이하) */
		@media (max-width: 992px) {
			.main-header {
				height: 360px;
				padding-top: 150px;
			}

			.main-header h1 {
				font-size: 32px;
			}

			.main-header p {
				font-size: 20px;
				line-height: 30px;
			}

			.main-content {
				padding: 50px 30px 52px;
			}

			.solution-nav {
				min-height: 80px;
				margin: 0 -30px;
			}

			.solution-nav .solution-item {
				min-width: 120px;
				height: 80px;
			}

			.title {
				margin-top: 60px;
			}

			.solution-title {
				font-size: 32px;
			}

			.solution-subtitle {
				font-size: 22px;
				margin-top: 12px;
			}

			.image-area {
				padding-top: 60px;
			}
		}

		/* 모바일 (768px 이하) */
		@media (max-width: 768px) {
			.main-header {
				height: 300px;
				padding-top: 120px;
			}

			.main-header h1 {
				font-size: 28px;
			}

			.main-header p {
				font-size: 18px;
				line-height: 26px;
			}

			.main-content {
				padding: 0 20px 40px;
			}

			.solution-nav {
				min-height: auto;
				margin: 0 -20px;
				padding: 0 20px;
			}

			.solution-nav .solution-list {
				margin: 0;
				padding: 0;
				flex-wrap: wrap;
				justify-content: center;
			}

			.solution-nav .solution-item {
				min-width: calc(50% - 10px);
				height: 70px;
				flex: 1 1 calc(50% - 10px);
			}

			.title {
				margin-top: 40px;
				padding: 0;
			}

			.solution-title {
				font-size: 28px;
			}

			.solution-subtitle {
				font-size: 20px;
				margin-top: 10px;
			}

			.image-area {
				padding-top: 40px;
				padding-left: 0;
				padding-right: 0;
			}
		}

		/* 소형 모바일 (414px 이하) */
		@media (max-width: 414px) {
			.main-header {
				height: 260px;
				padding-top: 100px;
			}

			.main-header h1 {
				font-size: 24px;
			}

			.main-header p {
				font-size: 16px;
				line-height: 24px;
			}

			.main-content {
				padding: 30px 15px 30px;
			}

			.solution-nav {
				min-height: auto;
				margin: 0 -15px;
				padding: 0 15px;
			}

			.solution-nav .solution-list {
				margin: 0;
				padding: 0;
				flex-wrap: wrap;
				justify-content: center;
			}

			.solution-nav .solution-item {
				min-width: calc(50% - 8px);
				height: 60px;
				flex: 1 1 calc(50% - 8px);
			}

			.title {
				margin-top: 30px;
				padding: 0;
			}

			.solution-title {
				font-size: 24px;
			}

			.solution-subtitle {
				font-size: 18px;
				margin-top: 8px;
			}

			.image-area {
				padding-top: 30px;
				padding-left: 0;
				padding-right: 0;
			}
		}