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/about/about.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 360px 180px;
			text-align: center;

			.title-box {
				h2 {
					font-size: 34px;
					font-weight: bold;
					color: #212529;
					position: relative;
					display: inline-block;

					&::after {
						content: "";
						display: block;
						width: 79px;
						height: 4px;
						background-color: #003375;
						margin-top: 21px;
						position: relative;
						left: 50%;
						transform: translateX(-50%);
					}
				}

				p {
					font-size: 18px;
					color: #495057;
					margin-top: 30px;
					line-height: 26px;
					word-break: keep-all;
				}
			}

			.content-area {
				margin-top: 80px;

				.content-box {
					h3 {
						font-size: 28px;
						font-weight: bold;
						color: #212529;
						display: inline-block;
						margin: 50px 0 20px 0;
						letter-spacing: -0.56px;

						&::before {
							content: "";
							display: inline-block;
							width: 10px;
							height: 10px;
							background-color: #EE770C;
							border-radius: 50%;
							margin-right: 8px;
							vertical-align: top;
						}
					}

					&:not(&:last-child)::after {
						content: "";
						display: block;
						width: 44px;
						height: 60px;
						margin-top: 50px;
						position: relative;
						background-image: url("/resources/images/about/down-triple-arrow.png");
						left: 50%;
						right: 50%;
						transform: translateX(-50%);
					}

					.brackets-box {
						height: 163px;
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						gap: 20px;

						&::before {
							content: "";
							display: inline-block;
							width: 17px;
							height: 163px;
							position: absolute;
							left: 0;
							background-image: url("/resources/images/about/left-brackets.png");
						}

						&::after {
							content: "";
							display: inline-block;
							width: 17px;
							height: 163px;
							position: absolute;
							right: 0;
							background-image: url("/resources/images/about/right-brackets.png");
						}
					}

					.core-value-box {
						background-color: #336AA233;
						padding: 20px;
						.core-value-list {
							display: flex;
							flex-direction: column;
							gap: 10px;
							.core-value-item {
								height: auto;
								min-height: 152px;
								background-color: #FFF;								
								flex-wrap: wrap;
								padding: 26px;

								img {
									max-width: 100%;
									height: auto;
								}
							}

							.core-value-title-box {
								width: 190px;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: start;
							}

							.explain {
								white-space: pre-line;
								text-align: left;
								font-size: 24px;
								letter-spacing: -0.48px;
								line-height: 36px;
								color: #212529;
								display: inline-flex;
								align-items: center;
							}
						}
					}
				}
			}
		}

		.vision-box {
			background: transparent linear-gradient(90deg, #3A80D9 0%, #1E4D8B 100%) 0 0 no-repeat padding-box;
			height: 160px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: #fff;
			line-height: 43px;
		}

		.vision-text {
			font-size: 26px;
			font-weight: 500;
		}

		.vision-text-bold {
			font-size: 26px;
			font-weight: bold;
		}

		.vision-subtitle {
			font-size: 26px;
		}

		.mission-text {
			font-size: 26px;
			font-weight: 500;
			letter-spacing: -0.52px;
			color: #003375;
		}

		.mission-subtitle {
			white-space: pre-line;
			font-size: 24px;
			line-height: 29px;
			letter-spacing: -0.48px;
			color: #003375;
			opacity: 0.5;
			text-align: center;
		}

		.core-value-title {
			font-size: 26px;
			font-weight: 600;
			color: #212529;
		}

		.core-value-title-en {
			font-size: 24px;
			font-weight: 500;
			color: #212529;
		}

		/* 태블릿 (1400px 이하) */
		@media (max-width: 1400px) {
			.main-content {
				padding: 80px 200px 180px;
			}
		}

		/* 태블릿 (1200px 이하) */
		@media (max-width: 1200px) {
			.main-content {
				padding: 60px 100px 150px;
			}

			.content-box h3 {
				font-size: 26px;
			}

			.core-value-item {
				padding: 26px;
				gap: 40px;
			}

			.core-value-title-box {
				width: 160px;
			}

			.explain {
				font-size: 22px;
				line-height: 32px;
			}
		}

		/* 태블릿 (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 40px 120px;
			}

			.title-box h2 {
				font-size: 30px;
			}

			.title-box p {
				font-size: 16px;
				line-height: 24px;
			}

			.content-area {
				margin-top: 60px;
			}

			.content-box h3 {
				font-size: 24px;
			}

			.core-value-item {
				flex-direction: column;
				padding: 24px 30px;
				gap: 20px;
				height: auto;
			}

			.core-value-title-box {
				width: 100%;
				align-items: center;
			}

			.explain {
				font-size: 20px;
				line-height: 30px;
				width: 100%;
			}
		}

		/* 모바일 (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: 40px 20px 100px;
			}

			.title-box {
				padding: 0 10px;
			}

			.title-box h2 {
				font-size: 26px;
			}

			.title-box p {
				font-size: 15px;
				line-height: 22px;
			}

			.content-area {
				margin-top: 50px;
			}

			.content-box h3 {
				font-size: 22px;
			}

			.brackets-box {
				height: auto;
				min-height: 163px;
				padding: 20px;
			}

			.core-value-item {
				padding: 20px;
			}

			.explain {
				font-size: 18px;
				line-height: 28px;
			}
		}

		/* 소형 모바일 (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 80px;
			}

			.title-box h2 {
				font-size: 22px;
			}

			.title-box p {
				font-size: 14px;
				line-height: 20px;
			}

			.content-box h3 {
				font-size: 20px;
			}

			.vision-box {
				height: auto;
				min-height: 160px;
				padding: 20px;
			}

			.vision-text, .vision-text-bold, .vision-subtitle {
				font-size: 20px;
			}

			.mission-text {
				font-size: 20px;
			}

			.mission-subtitle {
				font-size: 18px;
			}

			.brackets-box {
				padding: 16px;
			}

			.core-value-item {
				padding: 16px;
			}

			.core-value-title {
				font-size: 22px;
			}

			.core-value-title-en {
				font-size: 20px;
			}

			.explain {
				font-size: 16px;
				line-height: 24px;
			}
		}
