SamProject/sam-sales
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

etc 폴더와 shutter 생성

Browse Source
This commit is contained in:
김보곤
2026-01-01 20:31:49 +09:00
parent 4ce1e3f813
commit 517259c9b5
8 changed files with 2379 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

990
etc/shutter.php Normal file
View File

@@ -0,0 +1,990 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동방화셔터 품질인정제도 가이드</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.gradient-bg {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
}
.fire-gradient {
background: linear-gradient(135deg, #ea580c 0%, #dc2626 50%, #991b1b 100%);
}
.card-glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin: auto;
height: 320px;
}
@media (min-width: 768px) {
.chart-container { height: 360px; }
}
.glow-orange {
box-shadow: 0 0 30px rgba(234, 88, 12, 0.3);
}
.glow-blue {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slideUp 0.5s ease-out forwards;
}
.step-connector {
position: absolute;
left: 24px;
top: 48px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #ea580c, #3b82f6);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.tab-active {
background: linear-gradient(135deg, #ea580c, #dc2626);
color: white;
}
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<!-- Navigation -->
<nav class="bg-slate-900/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700/50">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<div class="font-bold text-xl text-white flex items-center gap-3">
<div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
<span class="text-xl">🔥</span>
</div>
<span>자동방화셔터 가이드</span>
</div>
<div class="hidden md:flex space-x-6 text-sm font-medium text-slate-400">
<button onclick="scrollToSection('section-overview')" class="hover:text-orange-400 transition">개요</button>
<button onclick="scrollToSection('section-types')" class="hover:text-orange-400 transition">셔터 종류</button>
<button onclick="scrollToSection('section-specs')" class="hover:text-orange-400 transition">성능기준</button>
<button onclick="scrollToSection('section-process')" class="hover:text-orange-400 transition">인정절차</button>
<button onclick="scrollToSection('section-install')" class="hover:text-orange-400 transition">설치기준</button>
<button onclick="scrollToSection('section-check')" class="hover:text-orange-400 transition">체크리스트</button>
</div>
<button class="md:hidden text-slate-400 hover:text-white" onclick="toggleMobileMenu()">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-slate-800 border-t border-slate-700">
<div class="px-4 py-3 space-y-2">
<button onclick="scrollToSection('section-overview')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">개요</button>
<button onclick="scrollToSection('section-types')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">셔터 종류</button>
<button onclick="scrollToSection('section-specs')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">성능기준</button>
<button onclick="scrollToSection('section-process')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">인정절차</button>
<button onclick="scrollToSection('section-install')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">설치기준</button>
<button onclick="scrollToSection('section-check')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">체크리스트</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-5xl mx-auto px-4 py-8 space-y-16">
<!-- Hero Section -->
<header class="text-center py-16 relative">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
<div class="absolute top-1/4 right-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10">
<div class="inline-flex items-center gap-2 bg-orange-500/20 text-orange-400 px-4 py-2 rounded-full text-sm font-semibold mb-6 border border-orange-500/30">
<span class="w-2 h-2 bg-orange-400 rounded-full animate-pulse"></span>
국토교통부고시 제2021-1009호 적용
</div>
<h1 class="text-4xl md:text-5xl font-black mb-6 leading-tight">
<span class="text-white">자동방화셔터</span><br>
<span class="bg-gradient-to-r from-orange-400 to-red-500 bg-clip-text text-transparent">품질인정제도 완벽 가이드</span>
</h1>
<p class="text-slate-400 text-lg max-w-2xl mx-auto mb-10 leading-relaxed">
화재 시 연기와 열을 감지하여 자동 폐쇄되는 방화셔터.<br>
<strong class="text-slate-200">2021년 강화된 품질인정제도</strong>의 모든 것을 알아보세요.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button onclick="scrollToSection('section-process')" class="fire-gradient hover:opacity-90 text-white font-bold py-3 px-8 rounded-xl transition shadow-lg glow-orange">
인정 절차 확인하기
</button>
<button onclick="scrollToSection('section-check')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 px-8 rounded-xl transition border border-slate-600">
현장 체크리스트
</button>
</div>
</div>
</header>
<!-- Section 1: Overview -->
<section id="section-overview" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">1</div>
<div>
<h2 class="text-2xl font-bold text-white">자동방화셔터란?</h2>
<p class="text-slate-400 text-sm">Fire Shutter Overview</p>
</div>
</div>
<div class="card-glass rounded-2xl p-8 glow-blue">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="text-2xl">🏢</span> 정의 및 역할
</h3>
<p class="text-slate-300 leading-relaxed mb-4">
자동방화셔터는 <strong class="text-orange-400">방화구획</strong>의 용도로 화재 시 연기 및 열을 감지하여 자동 폐쇄되는 설비입니다.
</p>
<p class="text-slate-400 leading-relaxed">
공항, 체육관, 대형마트 등 넓은 공간에서 내화구조 벽을 설치하기 어려운 경우에 방화구획을 형성하는 핵심 장치입니다.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="text-2xl">⚖️</span> 법적 근거
</h3>
<ul class="space-y-3 text-slate-300">
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">건축법 시행령 제46조</strong> - 방화구획 설치 의무</span>
</li>
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">국토부고시 제2021-1009호</strong> - 방화문 및 자동방화셔터의 인정 및 관리기준</span>
</li>
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">KS F 4510</strong> - 중량셔터 성능 기준</span>
</li>
</ul>
</div>
</div>
<!-- Key Change Alert -->
<div class="mt-8 bg-red-500/10 border border-red-500/30 rounded-xl p-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-2xl">⚠️</span>
</div>
<div>
<h4 class="font-bold text-red-400 text-lg mb-2">2021년 핵심 변화: 일체형 방화셔터 사용 금지</h4>
<p class="text-slate-300 leading-relaxed">
셔터 일부에 피난 출입구가 설치된 <strong class="text-white">일체형 방화셔터</strong>는 피난로 인지 지연 및 처짐으로 인한 비상문 개폐 불량 문제로 <strong class="text-red-400">설치가 금지</strong>되었습니다.
반드시 <strong class="text-white">분리형(60분 방화문 3m 이내 별도 설치)</strong>으로 설계해야 합니다.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Types of Fire Shutters -->
<section id="section-types" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">2</div>
<div>
<h2 class="text-2xl font-bold text-white">방화셔터의 종류</h2>
<p class="text-slate-400 text-sm">Types of Fire Shutters</p>
</div>
</div>
<!-- Type Tabs -->
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
<button id="tab-steel" onclick="showShutterType('steel')" class="tab-active px-6 py-3 rounded-xl font-semibold whitespace-nowrap transition">
철재 방화셔터
</button>
<button id="tab-screen" onclick="showShutterType('screen')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
스크린 방화셔터
</button>
<button id="tab-compare" onclick="showShutterType('compare')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
비교분석
</button>
</div>
<!-- Steel Shutter Content -->
<div id="content-steel" class="card-glass rounded-2xl p-8 animate-slide-up">
<div class="flex items-start gap-4 mb-6">
<div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🔩</div>
<div>
<h3 class="text-2xl font-bold text-white mb-1">철재 방화셔터 (Steel Fire Shutter)</h3>
<p class="text-slate-400">강판 슬랫으로 제작된 전통적인 방화셔터</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 1.55T 전기도금 아연강판</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 72mm 슬랫 포밍 구조</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 스틸 가이드레일</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 전동/수동 개폐 장치</li>
</ul>
</div>
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-blue-400 mb-4">적용 환경</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 외부와 접촉된 방화구획</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 지하주차장 램프</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 가연성 물질 근접 구역</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 바람 영향을 받는 구역</li>
</ul>
</div>
</div>
</div>
<!-- Screen Shutter Content -->
<div id="content-screen" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
<div class="flex items-start gap-4 mb-6">
<div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🧵</div>
<div>
<h3 class="text-2xl font-bold text-white mb-1">스크린 방화셔터 (Screen Fire Shutter)</h3>
<p class="text-slate-400">고순도 실리카 원단을 사용한 경량 방화셔터</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 98% 이상 고순도 실리카 원단</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 유리섬유 + 스테인레스 와이어</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 경량 구조 (철재 대비 1/3)</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 투명/반투명 선택 가능</li>
</ul>
</div>
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-blue-400 mb-4">장점</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 화재 상황 육안 확인 가능</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 폐쇄감 감소로 패닉 방지</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 낙하 시 부상 위험 감소</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 긴급 시 찢고 탈출 가능</li>
</ul>
</div>
</div>
<div class="mt-6 bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
<p class="text-yellow-300 text-sm">
<strong>💡 설치 제한:</strong> 바람의 영향을 받지 않는 <strong>실내 방화구획</strong>에만 설치 가능합니다.
</p>
</div>
</div>
<!-- Comparison Content -->
<div id="content-compare" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
<h3 class="text-xl font-bold text-white mb-6 text-center">철재 vs 스크린 방화셔터 비교</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-600">
<th class="py-4 px-4 text-slate-400 font-medium">비교 항목</th>
<th class="py-4 px-4 text-orange-400 font-bold">철재 방화셔터</th>
<th class="py-4 px-4 text-blue-400 font-bold">스크린 방화셔터</th>
</tr>
</thead>
<tbody class="text-slate-300">
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">내화성능</td>
<td class="py-4 px-4">비차열 1시간 이상</td>
<td class="py-4 px-4">비차열 1시간 이상</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">차연성능</td>
<td class="py-4 px-4">우수</td>
<td class="py-4 px-4">우수</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">중량</td>
<td class="py-4 px-4 text-yellow-400">무거움</td>
<td class="py-4 px-4 text-green-400">경량 (1/3 수준)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">시야 확보</td>
<td class="py-4 px-4 text-red-400">불가능</td>
<td class="py-4 px-4 text-green-400">가능 (반투명)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">외부 설치</td>
<td class="py-4 px-4 text-green-400">가능</td>
<td class="py-4 px-4 text-red-400">불가 (실내만)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">비용</td>
<td class="py-4 px-4">상대적 고가</td>
<td class="py-4 px-4">상대적 저렴</td>
</tr>
<tr>
<td class="py-4 px-4 text-slate-400">긴급 탈출</td>
<td class="py-4 px-4">별도 방화문 필요</td>
<td class="py-4 px-4">찢고 탈출 가능</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 3: Performance Specifications -->
<section id="section-specs" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">3</div>
<div>
<h2 class="text-2xl font-bold text-white">성능 기준</h2>
<p class="text-slate-400 text-sm">Performance Standards</p>
</div>
</div>
<div class="spec-grid">
<!-- 내화성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">🔥</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">내화성능</h3>
<p class="text-slate-400 text-sm mb-4">Fire Resistance</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-orange-400 mb-2">비차열 1시간 이상</p>
<p class="text-slate-300 text-sm">KS F 2268-1에 따른 내화시험 기준</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
화재 시 가열면의 반대쪽으로 화염이 관통하지 않는 성능
</p>
</div>
<!-- 차연성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-gray-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">💨</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">차연성능</h3>
<p class="text-slate-400 text-sm mb-4">Smoke Leakage</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-blue-400 mb-2">KS F 4510 기준</p>
<p class="text-slate-300 text-sm">중량셔터 차연성능 규정 충족</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
연기의 누설을 차단하여 피난 시간 확보
</p>
</div>
<!-- 개폐성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">⚙️</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">개폐성능</h3>
<p class="text-slate-400 text-sm mb-4">Operation</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-green-400 mb-2">전동 + 수동</p>
<p class="text-slate-300 text-sm">KS F 4510 개폐성능 규정 충족</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
정전 시에도 수동으로 개폐 가능해야 함
</p>
</div>
<!-- 감지 연동 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">📡</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">감지기 연동</h3>
<p class="text-slate-400 text-sm mb-4">Detector Integration</p>
<div class="bg-slate-800/50 rounded-lg p-4 space-y-2">
<div class="flex justify-between items-center">
<span class="text-slate-300">연기/불꽃 감지</span>
<span class="text-yellow-400 font-bold">일부 폐쇄</span>
</div>
<div class="flex justify-between items-center">
<span class="text-slate-300">열 감지</span>
<span class="text-red-400 font-bold">완전 폐쇄</span>
</div>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
2단계 폐쇄 시스템으로 피난 시간 확보
</p>
</div>
</div>
<!-- Validity Period Chart -->
<div class="card-glass rounded-2xl p-8 mt-8">
<h3 class="text-xl font-bold text-white mb-6 text-center">품질인정서 유효기간</h3>
<div class="chart-container">
<canvas id="validityChart"></canvas>
</div>
<p class="text-slate-400 text-sm text-center mt-4">
자동방화셔터는 <strong class="text-orange-400">5년</strong> 유효기간이 적용되며, 만료 전 갱신 심사 필요
</p>
</div>
</section>
<!-- Section 4: Recognition Process -->
<section id="section-process" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">4</div>
<div>
<h2 class="text-2xl font-bold text-white">품질인정 절차</h2>
<p class="text-slate-400 text-sm">Recognition Process</p>
</div>
</div>
<div class="card-glass rounded-2xl p-8">
<div class="flex items-center gap-2 mb-8">
<div class="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
<span>🏛️</span>
</div>
<span class="text-slate-300">운영 기관: <strong class="text-white">한국건설기술연구원(KICT)</strong></span>
</div>
<div class="relative">
<!-- Process Steps -->
<div class="space-y-6">
<!-- Step 1 -->
<div id="process-step-1" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(1)">
<div class="absolute left-0 top-0 w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">1</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-orange-500 to-blue-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-orange-500/50 group-hover:border-orange-500 transition">
<h4 class="text-lg font-bold text-white mb-2">성능 시험 신청</h4>
<p class="text-slate-400 text-sm hidden md:block">KOLAS 공인시험기관에서 내화·차연·개폐성능 시험</p>
</div>
</div>
<!-- Step 2 -->
<div id="process-step-2" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(2)">
<div class="absolute left-0 top-0 w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">2</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-green-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-blue-500 transition">
<h4 class="text-lg font-bold text-white mb-2">공장 심사</h4>
<p class="text-slate-400 text-sm hidden md:block">KICT 전문가의 제조 공장 품질관리 시스템 현장 심사</p>
</div>
</div>
<!-- Step 3 -->
<div id="process-step-3" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(3)">
<div class="absolute left-0 top-0 w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">3</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-green-500 to-purple-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-green-500 transition">
<h4 class="text-lg font-bold text-white mb-2">품질인정서 발급</h4>
<p class="text-slate-400 text-sm hidden md:block">성능시험 + 공장심사 합격 시 KICT 원장 명의 인정서 발급</p>
</div>
</div>
<!-- Step 4 -->
<div id="process-step-4" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(4)">
<div class="absolute left-0 top-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">4</div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-purple-500 transition">
<h4 class="text-lg font-bold text-white mb-2">사후 관리</h4>
<p class="text-slate-400 text-sm hidden md:block">매년 정기/불시 점검, 품질 유지 여부 감시 (위반 시 인정 취소)</p>
</div>
</div>
</div>
</div>
<!-- Process Detail Modal -->
<div id="process-detail" class="mt-8 bg-slate-700/50 rounded-xl p-6 hidden animate-slide-up">
<div id="detail-content"></div>
</div>
<!-- Timeline Note -->
<div class="mt-8 flex items-center gap-3 bg-blue-500/10 border border-blue-500/30 rounded-xl p-4">
<span class="text-2xl">⏱️</span>
<p class="text-slate-300 text-sm">
<strong class="text-blue-400">예상 소요기간:</strong> 성능시험부터 인정서 발급까지 통상 <strong class="text-white">3개월 이상</strong> 소요
</p>
</div>
</div>
</section>
<!-- Section 5: Installation Standards -->
<section id="section-install" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">5</div>
<div>
<h2 class="text-2xl font-bold text-white">설치 기준</h2>
<p class="text-slate-400 text-sm">Installation Standards</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- 필수 요건 -->
<div class="card-glass rounded-2xl p-6">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="text-green-400">✓</span> 필수 설치 요건
</h3>
<ul class="space-y-4">
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">01</span>
<div>
<p class="text-white font-medium">방화문 인접 설치</p>
<p class="text-slate-400 text-sm">60분+ 또는 60분 방화문으로부터 <strong class="text-orange-400">3m 이내</strong> 별도 설치</p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">02</span>
<div>
<p class="text-white font-medium">감지기 설치</p>
<p class="text-slate-400 text-sm">불꽃감지기 또는 연기감지기 + 열감지기 <strong class="text-orange-400">동시 설치</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">03</span>
<div>
<p class="text-white font-medium">2단계 폐쇄 구조</p>
<p class="text-slate-400 text-sm">연기감지 → 일부폐쇄 / 열감지 → <strong class="text-orange-400">완전폐쇄</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">04</span>
<div>
<p class="text-white font-medium">상부 밀착</p>
<p class="text-slate-400 text-sm">셔터 상부는 <strong class="text-orange-400">상층 바닥에 직접 닿도록</strong> 설치</p>
</div>
</li>
</ul>
</div>
<!-- 금지 사항 -->
<div class="card-glass rounded-2xl p-6">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="text-red-400">✕</span> 금지 사항
</h3>
<ul class="space-y-4">
<li class="flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<span class="text-red-400 font-bold text-xl">⛔</span>
<div>
<p class="text-white font-medium">일체형 방화셔터 설치 금지</p>
<p class="text-slate-400 text-sm">셔터 일부에 피난 출입구가 설치된 구조는 <strong class="text-red-400">2020년부터 금지</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
<span class="text-yellow-400 font-bold text-xl">⚠️</span>
<div>
<p class="text-white font-medium">틈새 방치 금지</p>
<p class="text-slate-400 text-sm">바닥과의 틈새는 연기/열 이동통로가 되지 않도록 <strong class="text-yellow-400">방화구획 수준</strong>으로 처리</p>
</div>
</li>
<li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
<span class="text-yellow-400 font-bold text-xl">⚠️</span>
<div>
<p class="text-white font-medium">스크린 셔터 외부 설치 금지</p>
<p class="text-slate-400 text-sm">바람의 영향을 받는 <strong class="text-yellow-400">외부 구역</strong>에는 스크린 방화셔터 설치 불가</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 구성요소 다이어그램 -->
<div class="card-glass rounded-2xl p-8 mt-6">
<h3 class="text-lg font-bold text-white mb-6 text-center">자동방화셔터 구성요소</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📦</div>
<p class="text-white font-medium text-sm">셔터박스</p>
<p class="text-slate-500 text-xs">Shutter Box</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🎚️</div>
<p class="text-white font-medium text-sm">가이드레일</p>
<p class="text-slate-500 text-xs">Guide Rail</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📏</div>
<p class="text-white font-medium text-sm">슬랫/커튼</p>
<p class="text-slate-500 text-xs">Slat/Curtain</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">⚡</div>
<p class="text-white font-medium text-sm">개폐기</p>
<p class="text-slate-500 text-xs">Operator</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🔘</div>
<p class="text-white font-medium text-sm">제어반</p>
<p class="text-slate-500 text-xs">Control Panel</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📡</div>
<p class="text-white font-medium text-sm">연기감지기</p>
<p class="text-slate-500 text-xs">Smoke Detector</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🌡️</div>
<p class="text-white font-medium text-sm">열감지기</p>
<p class="text-slate-500 text-xs">Heat Detector</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🚪</div>
<p class="text-white font-medium text-sm">연동 방화문</p>
<p class="text-slate-500 text-xs">Fire Door</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Field Checklist -->
<section id="section-check" class="scroll-mt-24 mb-16">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">6</div>
<div>
<h2 class="text-2xl font-bold text-white">현장 실무 체크리스트</h2>
<p class="text-slate-400 text-sm">Field Checklist</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- 서류 확인 -->
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
<input type="checkbox" id="check1" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">품질인정서</h3>
<p class="text-slate-400 text-sm mb-4">KICT 원장 명의 발급 인정서 원본/사본</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 유효기간 확인 (5년)</p>
<p>✓ 제조 공장 주소 일치 여부</p>
<p>✓ 인정 규격과 납품 제품 일치 여부</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
<input type="checkbox" id="check2" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">품질관리서</h3>
<p class="text-slate-400 text-sm mb-4">제조사 → 감리자 제출 자체 보증서</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ "인정 내용과 동일 생산" 문구</p>
<p>✓ 제조일자 및 LOT 번호</p>
<p>✓ 제조사 직인/서명</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
<input type="checkbox" id="check3" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">설치 상태 점검</h3>
<p class="text-slate-400 text-sm mb-4">현장 설치 적합성 육안 확인</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 방화문 3m 이내 설치 여부</p>
<p>✓ 상부 바닥 밀착 여부</p>
<p>✓ 가이드레일 내화벽체 접촉 여부</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
<input type="checkbox" id="check4" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">작동 시험</h3>
<p class="text-slate-400 text-sm mb-4">감지기 연동 및 폐쇄 동작 확인</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 연기감지 → 일부폐쇄 동작</p>
<p>✓ 열감지 → 완전폐쇄 동작</p>
<p>✓ 수동 개폐 정상 작동</p>
</div>
</div>
</div>
<!-- Status Box -->
<div id="status-box" class="mt-6 p-6 card-glass rounded-xl text-center transition-all duration-500">
<span id="status-text" class="font-bold text-slate-400 text-lg">위 항목들을 모두 확인해주세요.</span>
<div id="status-progress" class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
<div id="progress-bar" class="h-full bg-gradient-to-r from-orange-500 to-red-500 transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<!-- Online Verification -->
<div class="mt-8 card-glass rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center text-2xl">🖥️</div>
<div>
<h4 class="font-bold text-white text-lg">온라인 진위 확인</h4>
<p class="text-slate-400 text-sm">KICT 홈페이지에서 인정 취소/정지 여부 실시간 조회</p>
</div>
</div>
<a href="https://www.kict.re.kr" target="_blank" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-xl transition shadow-lg">
KICT 현황 조회 →
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-900 border-t border-slate-800 py-10">
<div class="max-w-5xl mx-auto px-4 text-center">
<div class="flex items-center justify-center gap-3 mb-4">
<div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
<span class="text-xl">🔥</span>
</div>
<span class="font-bold text-lg text-white">자동방화셔터 품질인정제도 가이드</span>
</div>
<p class="text-slate-500 text-sm mb-2">참고 법령: 방화문 및 자동방화셔터의 인정 및 관리기준 (국토교통부고시 제2021-1009호)</p>
<p class="text-slate-600 text-xs">본 페이지는 교육 및 참고 목적으로 제작되었습니다. 정확한 법적 해석은 관련 기관에 문의하세요.</p>
<p class="text-slate-700 text-xs mt-4">© 2025 Fire Shutter Quality Recognition Guide</p>
</div>
</footer>
<!-- JavaScript -->
<script>
// Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Smooth Scroll
function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
document.getElementById('mobile-menu').classList.add('hidden');
}
// Shutter Type Tabs
function showShutterType(type) {
const types = ['steel', 'screen', 'compare'];
types.forEach(t => {
document.getElementById(`tab-${t}`).classList.remove('tab-active');
document.getElementById(`tab-${t}`).classList.add('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${t}`).classList.add('hidden');
});
document.getElementById(`tab-${type}`).classList.add('tab-active');
document.getElementById(`tab-${type}`).classList.remove('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${type}`).classList.remove('hidden');
}
// Process Detail
const processDetails = {
1: {
title: '1단계: 성능 시험 신청',
icon: '🔬',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-orange-400">시험기관:</strong> KOLAS 인정 공인시험기관 또는 ISO/IEC 17025 인정기관</li>
<li><strong class="text-orange-400">시험항목:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 내화성능 (KS F 2268-1) - 비차열 1시간 이상</li>
<li>• 차연성능 (KS F 4510)</li>
<li>• 개폐성능 (KS F 4510)</li>
</ul>
</li>
<li><strong class="text-orange-400">주의:</strong> 시험체 양면 각 1회씩 시험 실시</li>
</ul>
`
},
2: {
title: '2단계: 공장 심사',
icon: '🏭',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-blue-400">심사기관:</strong> 한국건설기술연구원(KICT) 전문가</li>
<li><strong class="text-blue-400">심사내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 원자재 입고 및 관리 체계</li>
<li>• 제조 공정 표준화 준수</li>
<li>• 품질검사 설비 및 인력</li>
<li>• 출하 전 검사 시스템</li>
</ul>
</li>
<li><strong class="text-blue-400">핵심:</strong> 품질인정제도의 가장 중요한 차별점!</li>
</ul>
`
},
3: {
title: '3단계: 품질인정서 발급',
icon: '📜',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-green-400">발급조건:</strong> 성능시험 + 공장심사 모두 합격</li>
<li><strong class="text-green-400">발급기관:</strong> 한국건설기술연구원장 명의</li>
<li><strong class="text-green-400">유효기간:</strong> 5년 (갱신 심사 필요)</li>
<li><strong class="text-green-400">기재사항:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 규격 (크기, 성능등급)</li>
<li>• 제조 공장 정보</li>
<li>• 인정 조건 및 제한사항</li>
</ul>
</li>
</ul>
`
},
4: {
title: '4단계: 사후 관리',
icon: '🔍',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-purple-400">정기점검:</strong> 매년 실시</li>
<li><strong class="text-purple-400">불시점검:</strong> 공장 또는 건설현장 무작위 점검</li>
<li><strong class="text-purple-400">점검내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 내용대로 생산 여부</li>
<li>• 품질관리 시스템 유지 상태</li>
<li>• 시공 현장 적합성</li>
</ul>
</li>
<li><strong class="text-red-400">제재:</strong> 위반 시 인정 취소 또는 정지 가능</li>
</ul>
`
}
};
function showProcessDetail(step) {
const detail = processDetails[step];
const container = document.getElementById('process-detail');
const content = document.getElementById('detail-content');
content.innerHTML = `
<div class="flex items-center gap-3 mb-4">
<span class="text-3xl">${detail.icon}</span>
<h4 class="text-lg font-bold text-white">${detail.title}</h4>
</div>
${detail.content}
`;
container.classList.remove('hidden');
}
// Checklist Status
function updateChecklistStatus() {
const checks = [
document.getElementById('check1').checked,
document.getElementById('check2').checked,
document.getElementById('check3').checked,
document.getElementById('check4').checked
];
const count = checks.filter(c => c).length;
const percent = (count / 4) * 100;
const box = document.getElementById('status-box');
const text = document.getElementById('status-text');
const bar = document.getElementById('progress-bar');
bar.style.width = percent + '%';
if (count === 4) {
box.classList.remove('card-glass');
box.classList.add('bg-green-500/20', 'border', 'border-green-500/50');
text.className = 'font-bold text-green-400 text-lg';
text.innerHTML = '✅ 모든 항목 확인 완료! 현장 반입 승인 가능';
} else if (count > 0) {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-orange-400 text-lg';
text.innerHTML = `⚠️ ${count}/4 항목 확인됨. 나머지 항목을 확인해주세요.`;
} else {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-slate-400 text-lg';
text.innerHTML = '위 항목들을 모두 확인해주세요.';
}
}
// Chart.js - Validity Period
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('validityChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['방화문', '자동방화셔터', '내화구조', '내화채움구조', '복합자재(패널)'],
datasets: [{
label: '유효기간 (년)',
data: [5, 5, 5, 5, 3],
backgroundColor: [
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 1)',
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 0.8)',
'rgba(245, 158, 11, 0.8)'
],
borderColor: [
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(245, 158, 11)'
],
borderWidth: 2,
borderRadius: 8
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#fff',
bodyColor: '#94a3b8',
borderColor: 'rgba(234, 88, 12, 0.5)',
borderWidth: 1,
padding: 12,
callbacks: {
label: function(context) {
return `유효기간: ${context.raw}년`;
}
}
}
},
scales: {
x: {
beginAtZero: true,
max: 6,
grid: { color: 'rgba(71, 85, 105, 0.3)' },
ticks: { color: '#94a3b8' },
title: {
display: true,
text: '년 (Year)',
color: '#94a3b8'
}
},
y: {
grid: { display: false },
ticks: {
color: '#e2e8f0',
font: { weight: '500' }
}
}
}
}
});
});
</script>
</body>
</html>