65103af5c0
- 외주/자체제작 프로세스를 가로에서 세로 방향으로 변경 - 이모지 제거하여 전문적인 프레젠테이션 스타일 적용 - 화살표 방향을 → 에서 ↓ 로 변경 - 불필요한 견적 요청 문구 제거 - 자체제작 프로세스 최적화: 8단계 → 7단계로 단순화 - 최종 검사를 검수 및 보관 단계에 통합 - 상세한 프로세스 내용 복원 및 가독성 향상
478 lines
19 KiB
HTML
478 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
|
|
min-height: 100vh;
|
|
color: #333;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.presentation-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.slide-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
color: white;
|
|
}
|
|
|
|
.slide-title {
|
|
font-size: 5em;
|
|
font-weight: 800;
|
|
margin-bottom: 30px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.slide-subtitle {
|
|
font-size: 2.2em;
|
|
font-weight: 300;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.back-btn {
|
|
position: fixed;
|
|
top: 30px;
|
|
left: 30px;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
padding: 15px 25px;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 프로세스 슬라이드 스타일 */
|
|
.process-slides {
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.slide-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 60px;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.process-slide {
|
|
background: #FFFFFF;
|
|
border-radius: 30px;
|
|
padding: 60px 50px;
|
|
box-shadow: 0 20px 60px rgba(128,128,128,0.3);
|
|
transition: all 0.3s ease;
|
|
min-height: 800px;
|
|
}
|
|
|
|
.process-slide:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 30px 80px rgba(128,128,128,0.4);
|
|
}
|
|
|
|
.slide-icon {
|
|
font-size: 5em;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.process-slide h2 {
|
|
font-size: 3.2em;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
color: #333333;
|
|
}
|
|
|
|
.process-flow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.flow-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 25px;
|
|
padding: 25px;
|
|
background: #f7fafc;
|
|
border-radius: 20px;
|
|
border-left: 6px solid #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.flow-step:hover {
|
|
background: #edf2f7;
|
|
border-left-color: #87CEEB;
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
.flow-step.highlight {
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
border-left-color: #FF8C00;
|
|
box-shadow: 0 10px 30px rgba(255, 140, 0, 0.2);
|
|
}
|
|
|
|
.step-number {
|
|
background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
|
|
color: white;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 8px 20px rgba(135, 206, 235, 0.3);
|
|
}
|
|
|
|
.flow-step.highlight .step-number {
|
|
background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%);
|
|
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
|
|
}
|
|
|
|
.step-content h3 {
|
|
font-size: 1.8em;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.step-content p {
|
|
font-size: 1.3em;
|
|
color: #666666;
|
|
line-height: 1.5;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.flow-arrow {
|
|
text-align: center;
|
|
font-size: 2.5em;
|
|
color: #87CEEB;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.flow-arrow::before {
|
|
content: '↓';
|
|
text-shadow: 2px 2px 4px rgba(135, 206, 235, 0.3);
|
|
}
|
|
|
|
/* 검수 시스템 하이라이트 섹션 */
|
|
.inspection-highlight {
|
|
background: rgba(255,255,255,0.95);
|
|
border-radius: 30px;
|
|
padding: 60px 50px;
|
|
margin: 80px 0;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
|
backdrop-filter: blur(10px);
|
|
text-align: center;
|
|
}
|
|
|
|
.inspection-title {
|
|
font-size: 3.5em;
|
|
font-weight: 800;
|
|
color: #2d3748;
|
|
margin-bottom: 30px;
|
|
background: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.inspection-subtitle {
|
|
font-size: 1.6em;
|
|
color: #4a5568;
|
|
margin-bottom: 50px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.key-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 40px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: #f7fafc;
|
|
border-radius: 20px;
|
|
padding: 40px 30px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
background: #edf2f7;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 3.5em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 1.1em;
|
|
color: #4a5568;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 프레젠테이션용 - 모바일 반응형 제거 */
|
|
.step-details {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.step-details li {
|
|
font-size: 0.95em;
|
|
color: #666666;
|
|
margin: 0;
|
|
padding-left: 5px;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="../presentation.html" class="back-btn">← 돌아가기</a>
|
|
|
|
<div class="presentation-container">
|
|
<div class="slide-header">
|
|
<h1 class="slide-title">2단계: 프로젝트 진행</h1>
|
|
<p class="slide-subtitle">외주 vs 자체제작 프로세스</p>
|
|
</div>
|
|
|
|
<!-- 프로세스 비교 슬라이드 -->
|
|
<div class="process-slides">
|
|
<div class="slide-row">
|
|
<div class="process-slide outsourcing-slide">
|
|
<h2>외주 프로세스</h2>
|
|
<div class="process-flow">
|
|
<div class="flow-step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h3>도면 업로드</h3>
|
|
<p><strong>설계 도면 및 사양서 올리기</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 설계 도면 파일 (2D/3D)</li>
|
|
<li>• 재료 종류와 크기 정보</li>
|
|
<li>• 품질 기준과 검사 방법</li>
|
|
<li>• 언제까지 몇 개 필요한지</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h3>견적 진행</h3>
|
|
<p><strong>여러 외주업체 견적 받고 비교하기</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 가격, 품질, 납기일 종합 평가</li>
|
|
<li>• 업체 기술력과 믿을 수 있는지 확인</li>
|
|
<li>• 과거 거래 기록과 평가 반영</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h3>발주</h3>
|
|
<p><strong>가장 좋은 업체 골라 계약하기</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 평가 점수 높은 업체 선정</li>
|
|
<li>• 계약서 쓰고 법적으로 문제 없는지 확인</li>
|
|
<li>• 품질 보증서와 보험 확인</li>
|
|
<li>• 발주서 보내고 계약금 주기</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step highlight">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<h3>관리페이지</h3>
|
|
<p><strong>실시간으로 진행 상황과 품질 확인하기</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 제작 진행률 실시간으로 보기</li>
|
|
<li>• 중간중간 검사할 부분 관리</li>
|
|
<li>• 납기일 늦어지면 자동으로 알려주기</li>
|
|
<li>• 마지막 검사와 물건 받기</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="process-slide manufacturing-slide">
|
|
<h2>자체제작 프로세스</h2>
|
|
<div class="process-flow">
|
|
<div class="flow-step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h3>자재 명세서 업로드</h3>
|
|
<p><strong>필요한 모든 자재 목록 정리</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 파이프, 밸브, 피팅 등 자재 목록</li>
|
|
<li>• 각 자재별 규격과 수량</li>
|
|
<li>• 재질 정보와 품질 기준</li>
|
|
<li>• 프로젝트별 필요 시기</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h3>자재 분류</h3>
|
|
<p><strong>자재 종류별로 체계적 분류</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 파이프류 (탄소강, 스테인리스)</li>
|
|
<li>• 밸브류 (볼밸브, 체크밸브)</li>
|
|
<li>• 피팅류 (엘보, 티, 플랜지)</li>
|
|
<li>• 특수자재 (가스켓, 볼트)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h3>구매 신청</h3>
|
|
<p><strong>분류된 자재별 구매 요청서 작성</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 자재별 상세 사양서 작성</li>
|
|
<li>• 필요 수량과 납기일 명시</li>
|
|
<li>• 예산 범위 및 품질 요구사항</li>
|
|
<li>• 부서장 승인 및 구매팀 전달</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<h3>견적 및 발주</h3>
|
|
<p><strong>공급업체 선정 및 주문 처리</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 여러 업체 견적 비교 검토</li>
|
|
<li>• 가격, 품질, 납기 종합 평가</li>
|
|
<li>• 최적 업체 선정 및 계약</li>
|
|
<li>• 발주서 발행 및 일정 확정</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">5</div>
|
|
<div class="step-content">
|
|
<h3>자재 입고</h3>
|
|
<p><strong>주문한 자재 입고 및 기본 확인</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 납품서와 주문서 대조 확인</li>
|
|
<li>• 수량 및 외관 상태 점검</li>
|
|
<li>• 포장 상태 및 손상 여부</li>
|
|
<li>• 입고 일시 및 담당자 기록</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step highlight">
|
|
<div class="step-number">6</div>
|
|
<div class="step-content">
|
|
<h3>검수 및 보관</h3>
|
|
<p><strong>철저한 품질 검사 후 체계적 보관</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 규격 및 재질 정밀 검사</li>
|
|
<li>• 품질 기준 적합성 확인</li>
|
|
<li>• 생산 일정에 맞춰 재검사</li>
|
|
<li>• 보관 중 손상 여부 확인</li>
|
|
<li>• 필요시 추가 성능 테스트</li>
|
|
<li>• 최종 합격 판정 및 승인</li>
|
|
<li>• 구역별 체계적 보관 배치</li>
|
|
<li>• 위치 정보 시스템 등록</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flow-arrow"></div>
|
|
<div class="flow-step">
|
|
<div class="step-number">7</div>
|
|
<div class="step-content">
|
|
<h3>생산 불출</h3>
|
|
<p><strong>생산라인으로 자재 공급</strong></p>
|
|
<ul class="step-details">
|
|
<li>• 생산 계획에 따른 불출 일정</li>
|
|
<li>• 필요 수량만큼 정확히 불출</li>
|
|
<li>• 불출 기록 및 재고 업데이트</li>
|
|
<li>• 생산팀 인수 확인 완료</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검수 및 보관 시스템 하이라이트 -->
|
|
<div class="inspection-highlight">
|
|
<h2 class="inspection-title">🔍 검수 및 보관 관리 시스템</h2>
|
|
<p class="inspection-subtitle">Zero Defect를 위한 완벽한 품질 관리</p>
|
|
|
|
<div class="key-features">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">✓</div>
|
|
<h3 class="feature-title">3단계 검수</h3>
|
|
<p class="feature-desc">입고확인 → 품질검수 → 최종판정<br>체계적인 검수 프로세스</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">✓</div>
|
|
<h3 class="feature-title">QR 추적 시스템</h3>
|
|
<p class="feature-desc">실시간 위치 추적<br>3초 내 즉시 확인</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">✓</div>
|
|
<h3 class="feature-title">실시간 모니터링</h3>
|
|
<p class="feature-desc">24/7 자동 알림<br>95% 재고 정확도</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|