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 146px;
			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-box {
				margin-top: 100px;
				padding: 0;




				.content-key{
					align-items: center;
					display: inline-flex;
					gap: 10px;
					margin-bottom: 20px;
					position: relative;
					border-radius: 25px;
					border: 2px solid #CED4DA;
					justify-content: center;


					.tab-item {
						padding: 12px 24px;
						font-size: 16px;
						font-weight: 500;
						border-radius: 25px;
						cursor: pointer;
						transition: all 0.3s ease;
						background: #ffffff;
						color: #666;
						text-decoration: none;
						display: inline-block;
						margin: 6px;
					}

					.tab-item.active {
						background: #003375;
						color: white;
						border: 2px solid #003375;

						font-weight: 600;
					}

					.tab-item:not(.active) {

					}

				}

				.certificate-list {
					display: flex;
					margin: 88px auto 0;
					flex-wrap: wrap;
					gap: 60px 32px;
					justify-content: flex-start;
					max-width: 1568px;

					.certificate-item {
						width: 288px;
						height: 420px;
						border: 1px solid #C7C7C7;
						opacity: 0.8;
						display: flex;
						flex-direction: column;
						align-items: center;

						img {
							max-width: 100%;
							height: auto;
							max-height: 369px;
						}

						&.hidden {
							display: none;
						}

						h3 {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							color: #000000;
							font-weight: 500;
							letter-spacing: -0.36px;
							text-align: center;
							line-height: 34px;
							border-radius: 10px;
							font-size: 18px;
							word-break: keep-all;
							padding: 0 10px;
						}
					}
				}
			}
		}

		@media (max-width: 1902px) {
			.main-content {
				& .content-box {
					.certificate-list {
						justify-content: flex-start;
						max-width: 1248px;
					}
				}
			}
		}

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

			.content-box {
				padding: 0;
			}

		}

		/* 태블릿 (1200px 이하) */
		@media (max-width: 1447px) {
			.main-content {
				& .content-box {
					.certificate-list {
						max-width: 928px;
					}
				}
			}
		}

		@media (max-width: 1200px) {
			.main-content {
				padding: 60px 60px 120px;
			}

			.content-box {
				padding: 0;
			}

			.certificate-list {
				gap: 40px 24px;
				max-width: 798px;
			}


			.certificate-item {
				width: 250px;
				height: auto;
				min-height: 380px;
			}

		}
		


		/* 태블릿 (992px 이하) */
		@media (max-width: 1063px) {
			.main-content {
				& .content-box {
					.certificate-list {
						max-width: 608px;
					}

				}
			}
		}

		@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-box {
				margin-top: 60px;
			}

			.content-key {
				flex-wrap: wrap;
				justify-content: center;
			}

			.tab-item {
				font-size: 14px;
				padding: 10px 20px;
			}

			.certificate-list {
				margin-top: 60px;
				gap: 30px 20px;
				max-width: 520px;
			}

			.certificate-item {
				width: calc(50% - 10px);
				height: auto;
				min-height: 350px;
			}
		}

		/* 모바일 (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-box {
				margin-top: 50px;
			}

			.content-key {
				padding: 0 10px;
			}

			.tab-item {
				font-size: 13px;
				padding: 8px 16px;
				margin: 4px;
			}

			.certificate-list {
				margin-top: 40px;
				gap: 24px 16px;
				max-width: 516px;
			}

			.certificate-item {
				width: calc(50% - 8px);
				height: auto;
				min-height: 300px;
			}

			.certificate-item h3 {
				font-size: 16px;
			}
			.main-content {
				& .content-box {
					.certificate-list {
						justify-content: center;
					}
				}
			}
		}

		/* 소형 모바일 (450px 이하) */
		@media (max-width: 450px) {
			.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 {
				margin-top: 40px;
			}

			.tab-item {
				font-size: 12px;
				padding: 6px 12px;
			}

			.certificate-list {
				margin-top: 30px;
				gap: 20px 12px;
				max-width: 288px;
			}

			.certificate-item {
				width: 100%;
				height: auto;
				min-height: 280px;
			}

			.certificate-item h3 {
				font-size: 15px;
			}


		}