373 lines
12 KiB
HTML
373 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>품질 관리시스템 - 테크니컬코리아</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
color: #333;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border: 2px solid #dc2626;
|
|
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.1);
|
|
min-height: calc(100vh - 40px);
|
|
}
|
|
|
|
/* 브레드크럼 */
|
|
.breadcrumb {
|
|
background: #f8f9fa;
|
|
padding: 15px 30px;
|
|
border-bottom: 1px solid #dc2626;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: #dc2626;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb span {
|
|
color: #6b7280;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.page-header {
|
|
text-align: center;
|
|
padding: 40px 30px;
|
|
border-bottom: 1px solid #dc2626;
|
|
}
|
|
|
|
.page-header h2 {
|
|
color: #dc2626;
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-header p {
|
|
color: #6b7280;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* 메인 컨텐츠 */
|
|
.main-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
/* 문서 목록 */
|
|
.document-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.document-item {
|
|
background: white;
|
|
border: 1px solid #dc2626;
|
|
padding: 25px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.document-item:hover {
|
|
border-color: #991b1b;
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.document-content h3 {
|
|
color: #111827;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.document-content p {
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.document-content {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 검색 섹션 */
|
|
.search-section {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dc2626;
|
|
padding: 25px;
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.search-section h3 {
|
|
color: #111827;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
gap: 10px;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.search-box input {
|
|
flex: 1;
|
|
padding: 12px 15px;
|
|
background: white;
|
|
border: 1px solid #dc2626;
|
|
color: #111827;
|
|
font-size: 0.9rem;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
border-color: #991b1b;
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
}
|
|
|
|
.search-box button {
|
|
background: white;
|
|
color: #dc2626;
|
|
border: 1px solid #dc2626;
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-box button:hover {
|
|
background: #dc2626;
|
|
color: white;
|
|
}
|
|
|
|
/* 푸터 */
|
|
.footer {
|
|
text-align: center;
|
|
padding: 30px;
|
|
border-top: 1px solid #dc2626;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.footer p {
|
|
color: #6b7280;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin: 10px;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-box {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 브레드크럼 네비게이션 -->
|
|
<nav class="breadcrumb">
|
|
<a href="index.html">홈</a>
|
|
<span>></span>
|
|
<strong>품질 관리시스템</strong>
|
|
</nav>
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<header class="page-header">
|
|
<h2>품질 관리시스템</h2>
|
|
<p>Quality Management System - ISO 9001 기반 품질관리 절차 및 매뉴얼</p>
|
|
</header>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="main-content">
|
|
<div class="document-list">
|
|
<!-- 품질매뉴얼 -->
|
|
<div class="document-item" onclick="location.href='quality/QM-001.html'">
|
|
<div class="document-content">
|
|
<h3>QM-001 품질매뉴얼</h3>
|
|
<p>ISO 9001 기반 품질경영시스템 매뉴얼</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 문서관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-001.html'">
|
|
<div class="document-content">
|
|
<h3>QP-001 문서 및 기록관리 절차</h3>
|
|
<p>품질문서 작성, 승인, 배포, 보관 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 고객만족 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-002.html'">
|
|
<div class="document-content">
|
|
<h3>QP-002 고객만족 관리절차</h3>
|
|
<p>고객 요구사항 파악 및 만족도 관리</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 설계관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-003.html'">
|
|
<div class="document-content">
|
|
<h3>QP-003 설계 및 개발관리</h3>
|
|
<p>설계입력, 검토, 검증, 타당성확인 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 구매관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-004.html'">
|
|
<div class="document-content">
|
|
<h3>QP-004 구매 및 외주관리</h3>
|
|
<p>협력업체 평가, 구매품 검증 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 생산관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-005.html'">
|
|
<div class="document-content">
|
|
<h3>QP-005 생산 및 서비스 제공</h3>
|
|
<p>생산공정 관리 및 제품 식별추적성</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검사시험 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-006.html'">
|
|
<div class="document-content">
|
|
<h3>QP-006 검사 및 시험관리</h3>
|
|
<p>원자재, 중간품, 최종제품 검사 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 부적합관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-007.html'">
|
|
<div class="document-content">
|
|
<h3>QP-007 부적합 및 시정조치</h3>
|
|
<p>부적합품 관리 및 시정예방조치 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 내부심사 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-008.html'">
|
|
<div class="document-content">
|
|
<h3>QP-008 내부심사 절차</h3>
|
|
<p>품질경영시스템 내부심사 실시 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 경영검토 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-009.html'">
|
|
<div class="document-content">
|
|
<h3>QP-009 경영검토 절차</h3>
|
|
<p>품질경영시스템 경영검토 실시 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 측정장비관리 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-010.html'">
|
|
<div class="document-content">
|
|
<h3>QP-010 측정장비 관리절차</h3>
|
|
<p>측정장비 교정, 점검, 관리 절차</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 교육훈련 -->
|
|
<div class="document-item" onclick="location.href='quality/QP-011.html'">
|
|
<div class="document-content">
|
|
<h3>QP-011 교육훈련 관리절차</h3>
|
|
<p>품질 관련 교육훈련 계획 및 실시</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검색 섹션 -->
|
|
<div class="search-section">
|
|
<h3>품질문서 검색</h3>
|
|
<div class="search-box">
|
|
<input type="text" id="qualitySearchInput" placeholder="품질문서 검색 (예: ISO, 설계, 검사)">
|
|
<button onclick="filterDocuments(document.getElementById('qualitySearchInput').value)">검색</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>테크니컬코리아 내부 전용 문서시스템</p>
|
|
<p>품질 문의: quality@technicalkorea.co.kr | 내선: 2345</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 문서 필터링 기능
|
|
function filterDocuments(searchTerm) {
|
|
const documents = document.querySelectorAll('.document-item');
|
|
const term = searchTerm.toLowerCase();
|
|
|
|
documents.forEach(doc => {
|
|
const title = doc.querySelector('h3').textContent.toLowerCase();
|
|
const description = doc.querySelector('p').textContent.toLowerCase();
|
|
|
|
if (title.includes(term) || description.includes(term)) {
|
|
doc.style.display = 'block';
|
|
} else {
|
|
doc.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Enter 키로 검색
|
|
document.getElementById('qualitySearchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
filterDocuments(this.value);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |