317 lines
9.0 KiB
HTML
317 lines
9.0 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>Management Policy - 회사 방침 및 정책 문서</p>
|
|
</header>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="main-content">
|
|
<div class="document-list">
|
|
<!-- 경영방침서 -->
|
|
<div class="document-item" onclick="location.href='policy/MP-001.html'">
|
|
<div class="document-content">
|
|
<h3>MP-001 경영방침서</h3>
|
|
<p>테크니컬코리아 경영이념 및 기본방침</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 윤리강령 -->
|
|
<div class="document-item" onclick="location.href='policy/MP-002.html'">
|
|
<div class="document-content">
|
|
<h3>MP-002 윤리강령</h3>
|
|
<p>임직원 윤리행동 기준 및 가이드라인</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 정보보안정책 -->
|
|
<div class="document-item" onclick="location.href='policy/MP-003.html'">
|
|
<div class="document-content">
|
|
<h3>MP-003 정보보안 정책</h3>
|
|
<p>회사 정보자산 보호 및 보안 정책</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 조직도 -->
|
|
<div class="document-item" onclick="location.href='policy/MP-004.html'">
|
|
<div class="document-content">
|
|
<h3>MP-004 조직도</h3>
|
|
<p>회사 조직도 및 부서별 역할</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한위임규정 -->
|
|
<div class="document-item" onclick="location.href='policy/MP-005.html'">
|
|
<div class="document-content">
|
|
<h3>MP-005 권한위임 규정</h3>
|
|
<p>의사결정 권한 및 위임 규정</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검색 섹션 -->
|
|
<div class="search-section">
|
|
<h3>경영방침 검색</h3>
|
|
<div class="search-box">
|
|
<input type="text" id="policySearchInput" placeholder="경영방침 검색 (예: 윤리, 보안, 조직)">
|
|
<button onclick="filterDocuments(document.getElementById('policySearchInput').value)">검색</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>테크니컬코리아 내부 전용 문서시스템</p>
|
|
<p>경영방침 문의: policy@technicalkorea.co.kr | 내선: 5678</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('policySearchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
filterDocuments(this.value);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |