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 160px 160px;
			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: 90px;
				width: 100%;
				max-width: 1600px;
				margin-left: auto;
				margin-right: auto;

				.content-box {
					display: flex;
					height: auto;
					min-height: 360px;
					flex-wrap: wrap;

					.content {
						width: 580px;
						flex: 1 1 580px;
						min-width: 300px;
						height: auto;
						min-height: 360px;
						display: flex;
						flex-direction: column;
						align-items: start;
						background-color: #F3F3F4;
						padding: 50px;

						h3 {
							font-size: 24px;
							font-weight: bold;
							color: #003375;
							margin-bottom: 40px;
						}

						.info-area {
							display: flex;
							flex-direction: column;
							align-items: start;
							gap: 19px;

							.info-box {
								display: flex;

								&.address {
									.info-title::before {
										background-image: url("/resources/images/about/address.png");
									}
								}

								&.phone {
									.info-title::before {
										background-image: url("/resources/images/about/phone.png");
									}
								}

								&.fax {
									.info-title::before {
										background-image: url("/resources/images/about/fax.png");
									}
								}

								span {
									font-size: 19px;

									&.info-title {
										width: 94px;
										color: #495057;
										display: inline-flex;

										&::before {
											content: "";
											display: inline-block;
											width: 22px;
											height: 22px;
											margin-right: 8px;
										}
									}
									&.info {
										display: flex;
										align-items: baseline;
										text-align: start;
										font-weight: 500;
										color: #343A40;
										letter-spacing: -0.38px;

										&::before {
											content: "";
											display: block;
											width: 1px;
											height: 14px;
											margin-right: 20px;
											background-color: #ADB5BD;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		/* 태블릿 (1400px 이하) */
		@media (max-width: 1400px) {
			.main-content {
				padding: 80px 100px 160px;
			}

			.content-box .content {
				width: 500px;
				flex: 1 1 auto;
			}
		}



		/* 태블릿 (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 100px;
			}

			.title-box h2 {
				font-size: 30px;
			}

			.title-box p {
				font-size: 16px;
				line-height: 24px;
			}

			.content-area {
				margin-top: 60px;
			}

			.content-box .content {
				padding: 40px 30px;
			}

			.content-box h3 {
				font-size: 22px;
			}

			.info-title, .info {
				font-size: 17px;
			}
		}

		/* 모바일 (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 80px;
			}

			.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 {
				margin-top: 30px !important;
			}

			.content-box .content {
				padding: 30px 20px;
				min-height: auto;
			}

			.content-box h3 {
				font-size: 20px;
				margin-bottom: 30px;
			}

			.info-area {
				gap: 15px;
			}

			.info-title, .info {
				font-size: 16px;
			}

			#map, #spaceBuildersMap {
				height: 300px !important;
			}
		}

		/* 소형 모바일 (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 60px;
			}

			.title-box h2 {
				font-size: 22px;
			}

			.title-box p {
				font-size: 14px;
				line-height: 20px;
			}

			.content-box .content {
				padding: 24px 16px;
			}

			.content-box h3 {
				font-size: 18px;
				margin-bottom: 24px;
			}

			.info-title, .info {
				font-size: 14px;
			}

			#map, #spaceBuildersMap {
				height: 250px !important;
			}
		}