디자인 수정

src/pages/maintenance/Performance.tsx

@@ -25,14 +25,19 @@ const Performance = () => {
           <h2 className="text-2xl font-bold text-blue-800 mb-4">
             검증된 정보통신 유지보수(성능점검) 전문 기업
           </h2>
-          <p className="text-gray-700 text-sm mb-6">
-            반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br/>
-            도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br/>
-            정보통신기술자 특급 5명 외 45명 보유.
-          </p>
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
-            <div
-              className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+          {/*<p className="text-gray-700 text-sm mb-6">*/}
+          {/*  반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br/>*/}
+          {/*  도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br/>*/}
+          {/*  정보통신기술자 특급 5명 외 45명 보유.*/}
+          {/*</p>*/}
+            <div className="text-gray-700 text-sm mb-6 leading-relaxed">
+                반도산전(주)는 27년간 전국 2,500여 개 건축물의 전기·통신·소방 설비공사를 준공한 외감 법인입니다.<br />
+                도급순위 상위 0.3% 이내, 건설안전 NICE디앤비 1등급(SA1), ESG 2등급(중소기업 최고등급) 보유.<br />
+                정보통신기술자 특급 5명 외 45명 보유.
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
+            <div className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
               <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                 <p className="font-bold text-blue-900">ISO 45001</p>
               </div>
@@ -86,270 +91,511 @@ const Performance = () => {
           <h2 className="text-2xl font-bold text-blue-800 mb-4">
             정보통신설비 유지보수·관리 및 성능점검 법정장비 보유현황
           </h2>
-          <p className="text-gray-700 text-sm mb-6">
-            광섬유영역반사계, 네트워크측정기, 오실로스코프, 광케이블접속기, 광파워메타, 광심선대조기,<br/>
-            TV ANT 레벨측정기, 방송음향 측정기, 복합가스 측정기, LAN 측정기, 적외선 온도측정기,<br/>
-            AC/DC/저항 측정기, 절연저항 측정기 등 보유.
-          </p>
-          <div className="grid grid-cols-2 sm:grid-cols-7 gap-4">
+            <div className="text-gray-700 text-sm mb-6 leading-relaxed">
+                광섬유영역반사계, 네트워크측정기, 오실로스코프, 광케이블접속기, 광파워메타, 광심선대조기,<br />
+                TV ANT 레벨측정기, 방송음향 측정기, 복합가스 측정기, LAN 측정기, 적외선 온도측정기,<br />
+                AC/DC/저항 측정기, 절연저항 측정기 등 보유.
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-7 gap-4">
             {equipments.map(({ title, imageSrc }) => (
               <div className="flex flex-col items-center" key={title}>
                 <img
                   src={imageSrc}
                   alt={title}
-                  className="w-32 h-32 object-cover mb-2 rounded-lg shadow-md"
+                  className="w-32 h-32 object-contain mb-2 rounded-md hover:scale-105 hover:shadow-md transition-all duration-300"
                 />
-                <p className="text-sm text-center">{title}</p>
+                <p className="font-medium text-sm text-gray-700 text-center">{title}</p>
               </div>
             ))}
           </div>
         </section>
 
-        {/* 제도 도입 배경 */}
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">제도 도입 배경</h2>
-          <ul className="list-disc list-inside space-y-2 text-gray-700">
-            <li>
-              근거 법령: 「정보통신공사업법」 (법률 제19546호, 2023.7.18. 개정, 2024.7.19. 시행)
-            </li>
-            <li>
-              목적: 건축물 정보통신설비의 안전 확보와 통신서비스 품질 향상을 위한 유지보수·관리 제도 도입
-            </li>
-          </ul>
-        </section>
+          {/* 제도 도입 배경 */}
+          <section className="mb-12">
+              <h2 className="text-2xl font-bold text-blue-800 mb-4 ">
+                  제도 도입 배경
+              </h2>
+              <div className="border border-gray-200 rounded-lg  overflow-hidden">
+              {/*<table className="min-w-full text-sm sm:text-base bg-white border border-gray-200 rounded-lg shadow-sm">*/}
+                  <table className="min-w-full text-sm sm:text-base bg-white">
+                  <colgroup>
+                      <col className="w-1/5" /> {/* 20% */}
+                      <col className="w-4/5" /> {/* 80% */}
+                  </colgroup>
+                  <tbody>
+                  <tr className="bg-white">
+                      <td className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-center text-gray-700 bg-blue-50">
+                          근거 법령
+                      </td>
+                      {/*<td className="border-b border-gray-200 px-4 py-3 text-gray-700 leading-relaxed">*/}
+                      <td className="border-b border-gray-200 px-4 py-2 text-gray-700 leading-relaxed">
+                          「정보통신공사업법」 (법률 제19546호, 2023.7.18. 개정, 2024.7.19. 시행)
+                      </td>
+                  </tr>
+                  <tr className="bg-gray-50">
+                      <td className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-center text-gray-700 bg-blue-50">
+                          목적
+                      </td>
+                      <td className="border-b border-gray-200 px-4 py-2 text-gray-700 leading-relaxed">
+                          건축물 정보통신설비의 안전 확보와 통신서비스 품질 향상을 위한 유지보수·관리 제도 도입
+                      </td>
+                  </tr>
+                  </tbody>
+              </table>
+              </div>
+          </section>
 
-        {/* 관리자 선임기준 */}
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">관리자 선임 기준</h2>
-          <table className="w-full border text-sm">
-            <thead className="bg-gray-100">
-            <tr>
-              <th className="border px-2 py-1">건축물 연면적</th>
-              <th className="border px-2 py-1">기술자 등급</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-              <td className="border px-2 py-1">6만㎡ 이상</td>
-              <td className="border px-2 py-1">특급 기술자</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">3만 ~ 6만㎡</td>
-              <td className="border px-2 py-1">고급 기술자 이상</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">1.5만 ~ 3만㎡</td>
-              <td className="border px-2 py-1">중급 기술자 이상</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">0.5만 ~ 1.5만㎡</td>
-              <td className="border px-2 py-1">초급 기술자 이상</td>
-            </tr>
-            </tbody>
-          </table>
-        </section>
 
-        {/* 과태료 기준 */}
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">과태료 기준</h2>
-          <table className="w-full border text-sm">
-            <thead className="bg-gray-100">
-            <tr>
-              <th className="border px-2 py-1">위반행위</th>
-              <th className="border px-2 py-1">과태료 금액</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-              <td className="border px-2 py-1">유지보수 관리기준 미준수</td>
-              <td className="border px-2 py-1">300만원</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">점검기록 미작성 또는 거짓 작성</td>
-              <td className="border px-2 py-1">300만원</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">유지보수‧관리자 미선임 또는 해임 후 30일 내 미선임</td>
-              <td className="border px-2 py-1">300만원</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">점검기록 미보존</td>
-              <td className="border px-2 py-1">150만원</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">지자체 미제출</td>
-              <td className="border px-2 py-1">100만원</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">선·해임 신고 미이행 또는 허위신고</td>
-              <td className="border px-2 py-1">100만원</td>
-            </tr>
-            </tbody>
-          </table>
-          <p className="text-sm text-gray-600 mt-2">
-            ※ 과태료 처분만으로 의무 이행이 완료되는 것은 아니며, 30일 이내 미선임 시 반복 부과될 수 있습니다.
-          </p>
-        </section>
 
-        {/* 대상설비 세부항목 */}
-        <section className="mb-12">
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">대상설비 세부항목</h2>
-          <table className="w-full border text-sm md:text-base">
-            <thead className="bg-gray-100">
-            <tr>
-              <th className="border px-4 py-3 w-1/4 text-center font-semibold">구분</th>
-              <th className="border px-4 py-3 w-3/4 text-center font-semibold">점검대상</th>
-            </tr>
-            </thead>
-            <tbody className="divide-y">
-            {/* 통신설비 */}
-            <tr className="align-middle">
-              <td className="border px-3 py-4 text-center font-medium">
-                <div className="flex flex-col items-center">
-                  <img src="/image/maintenance/통신설비.png" alt="통신설비" className="w-20 h-20 mb-2" />
-                  <span>통신설비</span>
-                </div>
-              </td>
-              <td className="border px-4 py-4 leading-relaxed">
-                <ul className="list-disc list-inside text-left space-y-1">
-                  <li>케이블설비</li>
-                  <li>배관설비</li>
-                  <li>국선인입설비</li>
-                  <li>단자함설비</li>
-                  <li>이동통신구내선로설비</li>
-                  <li>전화설비</li>
-                  <li>방송 공동수신 안테나 시설</li>
-                  <li>종합유선방송 구내전송선로설비</li>
-                </ul>
-              </td>
-            </tr>
-
-            {/* 방송설비 */}
-            <tr className="align-middle">
-              <td className="border px-3 py-4 text-center font-medium">
-                <div className="flex flex-col items-center">
-                  <img src="/image/maintenance/방송설비.png" alt="방송설비" className="w-20 h-20 mb-2" />
-                  <span>방송설비</span>
-                </div>
-              </td>
-              <td className="border px-4 py-4">
-                <ul className="list-disc list-inside text-left">
-                  <li>방송음향설비</li>
-                </ul>
-              </td>
-            </tr>
-
-            {/* 정보설비 */}
-            <tr className="align-middle">
-              <td className="border px-3 py-4 text-center font-medium">
-                <div className="flex flex-col items-center">
-                  <img src="/image/maintenance/정보설비.png" alt="정보설비" className="w-20 h-20 mb-2" />
-                  <span>정보설비</span>
-                </div>
-              </td>
-              <td className="border px-4 py-4 leading-relaxed">
-                <ul className="list-disc list-inside text-left grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-1">
-                  <li>네트워크설비</li>
-                  <li>전자출입(통제)시스템</li>
-                  <li>원격검침시스템</li>
-                  <li>주차관제시스템</li>
-                  <li>주차유도시스템</li>
-                  <li>무인택배시스템</li>
-                  <li>비상벨설비</li>
-                  <li>영상정보처리기기 시스템</li>
-                  <li>홈 네트워크 이용자 설비</li>
-                  <li>빌딩안내시스템(BIS)</li>
-                  <li>전기시계시스템</li>
-                  <li>통합 SI시스템</li>
-                  <li>시설관리시스템(FMS)</li>
-                  <li>건물에너지관리시스템(BEMS)</li>
-                  <li>지능형 인원계수 시스템</li>
-                  <li>지능형 경계 감시 시스템</li>
-                  <li>스마트 병원 설비</li>
-                  <li>스마트 도난방지 시스템</li>
-                  <li>스마트 공장 시스템</li>
-                  <li>스마트 도서관 시스템</li>
-                  <li>지능형 이상 음원 시스템</li>
-                  <li>IoT 기반 지하공간 안전관리 시스템</li>
-                  <li>디지털 사이니지</li>
-                </ul>
-              </td>
-            </tr>
-
-            {/* 기타설비 */}
-            <tr className="align-middle">
-              <td className="border px-3 py-4 text-center font-medium">
-                <div className="flex flex-col items-center">
-                  <img src="/image/maintenance/기타설비.png" alt="기타설비" className="w-20 h-20 mb-2" />
-                  <span>기타설비</span>
-                </div>
-              </td>
-              <td className="border px-4 py-4">
-                <ul className="list-disc list-inside text-left">
-                  <li>통신용 전원설비</li>
-                  <li>통신접지설비</li>
-                </ul>
-              </td>
-            </tr>
-            </tbody>
-          </table>
-        </section>
 
-        {/* 주요내용 */}
-        <section>
-          <h2 className="text-2xl font-bold text-blue-800 mb-4">
-            유지보수·관리 및 성능점검 주요내용
-          </h2>
-          <table className="w-full border text-sm">
-            <thead className="bg-gray-100">
-            <tr>
-              <th className="border px-2 py-1">구분</th>
-              <th className="border px-2 py-1">유지보수·관리</th>
-              <th className="border px-2 py-1">성능점검</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-              <td className="border px-2 py-1">주요내용</td>
-              <td className="border px-2 py-1">
-                일상적 점검을 통해 설비 기능 유지 및 안전 확보
-              </td>
-              <td className="border px-2 py-1">
-                설비 운용에 필요한 성능 점검
-              </td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">주기</td>
-              <td className="border px-2 py-1">반기별 1회 이상</td>
-              <td className="border px-2 py-1">연 1회 이상</td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">주요업무</td>
-              <td className="border px-2 py-1">
-                외관, 기능, 안전 상태 점검 및 기록
-              </td>
-              <td className="border px-2 py-1">
-                점검결과 기록 후 5년간 보존 및 지자체 제출
-              </td>
-            </tr>
-            <tr>
-              <td className="border px-2 py-1">업무위탁</td>
-              <td className="border px-2 py-1">공사업자</td>
-              <td className="border px-2 py-1">공사업자 또는 용역업자</td>
-            </tr>
-            </tbody>
-          </table>
-        </section>
 
-        {/* 연락처 */}
-        <div className="mt-12 text-center text-gray-700">
-          <p className="font-semibold">[견적요청 및 문의]</p>
-          <p>E-MAIL : bando@bdsj.kr</p>
-          <p>대표번호 : 051-808-8556</p>
-          <p className="text-sm mt-2">
-            <a href="/download/견적요청서.hwp" download className="text-blue-700 underline">견적서 다운로드</a>
-          </p>
-        </div>
+          {/* 관리자 선임 기준 */}
+          <section className="mb-12">
+              <h2 className="text-2xl font-bold text-blue-800 mb-4">
+                  관리자 선임 기준
+              </h2>
+
+              <div className="overflow-x-auto">
+                  <div className="overflow-y-auto max-h-[400px] sm:max-h-[500px] border border-gray-200 rounded-lg shadow-sm">
+                      <table className="min-w-full text-xs sm:text-sm table-fixed bg-white">
+                          <thead>
+                          <tr className="bg-blue-50 text-center sticky top-0 z-10">
+                              <th className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/2">
+                                  건축물 연면적
+                              </th>
+                              <th className="border-b border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/2">
+                                  기술자 등급
+                              </th>
+                          </tr>
+                          </thead>
+                          <tbody>
+                          <tr className="bg-white  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  6만㎡ 이상
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
+                                  특급 기술자
+                              </td>
+                          </tr>
+                          <tr className="bg-gray-50  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  3만 ~ 6만㎡
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
+                                  고급 기술자 이상
+                              </td>
+                          </tr>
+                          <tr className="bg-white  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  1.5만 ~ 3만㎡
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
+                                  중급 기술자 이상
+                              </td>
+                          </tr>
+                          <tr className="bg-gray-50  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  0.5만 ~ 1.5만㎡
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center text-gray-700">
+                                  초급 기술자 이상
+                              </td>
+                          </tr>
+                          </tbody>
+                      </table>
+                  </div>
+              </div>
+          </section>
+
+
+          {/* 과태료 기준 */}
+          <section className="mb-12">
+              <h2 className="text-2xl font-bold text-blue-800 mb-4">
+                  과태료 기준
+              </h2>
+              <div className="overflow-x-auto">
+                  <div className="overflow-y-auto max-h-[400px] sm:max-h-[500px] border border-gray-200 rounded-lg shadow-sm">
+                      <table className="min-w-full text-xs sm:text-sm table-fixed bg-white">
+                          <thead>
+                          <tr className="bg-blue-50 text-center sticky top-0 z-10">
+                              <th className="border-b border-r border-gray-200 px-2 py-3 font-semibold text-gray-700 w-2/3">
+                                  위반행위
+                              </th>
+                              <th className="border-b border-gray-200 px-2 py-3 font-semibold text-gray-700 w-1/3">
+                                  과태료 금액
+                              </th>
+                          </tr>
+                          </thead>
+                          <tbody>
+                          <tr className="bg-white  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  유지보수 관리기준 미준수
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  300만원
+                              </td>
+                          </tr>
+                          <tr className="bg-gray-50  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  점검기록 미작성 또는 거짓 작성
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  300만원
+                              </td>
+                          </tr>
+                          <tr className="bg-white  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  유지보수‧관리자 미선임 또는 해임 후 30일 내 미선임
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  300만원
+                              </td>
+                          </tr>
+                          <tr className="bg-gray-50  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  점검기록 미보존
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  150만원
+                              </td>
+                          </tr>
+                          <tr className="bg-white  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  지자체 미제출
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  100만원
+                              </td>
+                          </tr>
+                          <tr className="bg-gray-50  transition-colors">
+                              <td className="border-b border-r border-gray-200 px-2 py-2 text-gray-700 text-center">
+                                  선·해임 신고 미이행 또는 허위신고
+                              </td>
+                              <td className="border-b border-gray-200 px-2 py-2 text-center font-medium text-gray-800">
+                                  100만원
+                              </td>
+                          </tr>
+                          </tbody>
+                      </table>
+                  </div>
+              </div>
+              <p className="text-sm text-gray-600 mt-3 text-center">
+                  ※ 과태료 처분만으로 의무 이행이 완료되는 것은 아니며, 30일 이내 미선임 시 반복 부과될 수 있습니다.
+              </p>
+          </section>
+
+
+          {/* 대상설비 세부항목 */}
+          <section className="mb-12">
+              {/*<div className="text-center mb-6 sm:mb-8">*/}
+              {/*    <div className="inline-block font-bold text-lg sm:text-xl lg:text-2xl text-gray-800 border-b-2 border-blue-900 pb-2">*/}
+              {/*        대상설비 세부항목*/}
+              {/*    </div>*/}
+              {/*</div>*/}
+              <h2 className="text-2xl font-bold text-blue-800 mb-4">
+                  대상설비 세부항목
+              </h2>
+              <div className=" rounded-lg overflow-hidden">
+              <table className="w-full text-xs sm:text-sm md:text-base table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
+                  <thead>
+                  <tr className="bg-blue-50 text-center">
+                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/4">
+                          구분
+                      </th>
+                      <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-3/4">
+                          점검대상
+                      </th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  {/* 통신설비 */}
+                  <tr className="bg-white  transition-colors align-middle">
+                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
+                          <div className="flex flex-col items-center">
+                              <img
+                                  src="/image/maintenance/통신설비.png"
+                                  alt="통신설비"
+                                  className="max-w-[70%] h-auto object-contain mb-2"
+                              />
+                              <span className="text-gray-800">통신설비</span>
+                          </div>
+                      </td>
+                      <td className=" border-gray-200 px-4 py-4 leading-relaxed">
+                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
+                              <li className="border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  케이블설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  배관설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  국선인입설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  단자함설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  이동통신구내선로설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  전화설비
+                              </li>
+                              <li className=" border-gray-200 px-3 py-1.5 font-semibold text-gray-700 ">
+                                  방송 공동수신 안테나 시설
+                              </li>
+                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
+                                  종합유선방송 구내전송선로설비
+                              </li>
+                          </ul>
+                      </td>
+                  </tr>
+
+                  {/* 방송설비 */}
+                  <tr className="bg-gray-50  transition-colors align-middle">
+                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
+                          <div className="flex flex-col items-center">
+                              <img
+                                  src="/image/maintenance/방송설비.png"
+                                  alt="방송설비"
+                                  className="max-w-[70%] h-auto object-contain mb-2"
+                              />
+                              <span className="text-gray-800">방송설비</span>
+                          </div>
+                      </td>
+                      <td className="px-4 py-4">
+                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
+                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
+                                  방송음향설비
+                              </li>
+                          </ul>
+                      </td>
+
+                  </tr>
+
+                  {/* 정보설비 */}
+                  <tr className="bg-white  transition-colors align-middle">
+                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
+                          <div className="flex flex-col items-center">
+                              <img
+                                  src="/image/maintenance/정보설비.png"
+                                  alt="정보설비"
+                                  className="max-w-[70%] h-auto object-contain mb-2"
+                              />
+                              <span className="text-gray-800">정보설비</span>
+                          </div>
+                      </td>
+                      <td className="  px-4 py-4 leading-relaxed">
+                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1   rounded-md">
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  네트워크설비
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  전자출입(통제)시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  원격검침시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  주차관제시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  주차유도시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  무인택배시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  비상벨설비
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  영상정보처리기기 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  홈 네트워크 이용자 설비
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  빌딩안내시스템(BIS)
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  전기시계시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  통합 SI시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  시설관리시스템(FMS)
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  건물에너지관리시스템(BEMS)
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  지능형 인원계수 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  지능형 경계 감시 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  스마트 병원 설비
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  스마트 도난방지 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  스마트 공장 시스템
+                              </li>
+                              <li className=" px-3 py-1.5 font-semibold text-gray-700 ">
+                                  스마트 도서관 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  지능형 이상 음원 시스템
+                              </li>
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  IoT 기반 지하공간 안전관리 시스템
+                              </li>
+                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
+                                  디지털 사이니지
+                              </li>
+                          </ul>
+                      </td>
+                  </tr>
+
+
+                  {/* 기타설비 */}
+                  <tr className="bg-gray-50  transition-colors align-middle">
+                      <td className="border-b border-r border-gray-200 px-3 py-4 text-center font-medium">
+                          <div className="flex flex-col items-center">
+                              <img
+                                  src="/image/maintenance/기타설비.png"
+                                  alt="기타설비"
+                                  className="max-w-[70%] h-auto object-contain mb-2"
+                              />
+                              <span className="text-gray-800">기타설비</span>
+                          </div>
+                      </td>
+                      <td className="  px-4 py-4">
+                          <ul className="list-none text-left grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 rounded-md">
+                              <li className="  px-3 py-1.5 font-semibold text-gray-700 ">
+                                  통신용 전원설비
+                              </li>
+                              <li className="px-3 py-1.5 font-semibold text-gray-700 ">
+                                  통신접지설비
+                              </li>
+                          </ul>
+                      </td>
+                  </tr>
+
+                  </tbody>
+              </table>
+              </div>
+          </section>
+
+
+
+          {/* 주요내용 */}
+          <section className="mb-12">
+              {/*<div className="text-center mb-6 sm:mb-8">*/}
+              {/*    <div className="inline-block font-bold text-lg sm:text-xl lg:text-2xl text-gray-800 border-b-2 border-blue-900 pb-2">*/}
+              {/*        유지보수·관리 및 성능점검 주요내용*/}
+              {/*    </div>*/}
+              {/*</div>*/}
+              <h2 className="text-2xl font-bold text-blue-800 mb-4">
+                  유지보수·관리 및 성능점검 주요내용
+              </h2>
+              <div className=" rounded-lg overflow-hidden">
+              <table className="min-w-full text-xs sm:text-sm table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
+                  <thead>
+                  <tr className="bg-blue-50 text-center">
+                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/5">
+                          구분
+                      </th>
+                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
+                          유지보수·관리
+                      </th>
+                      <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
+                          성능점검
+                      </th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr className="bg-white  transition-colors">
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                          주요내용
+                      </td>
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                          일상적 점검을 통해 설비 기능 유지 및 안전 확보
+                      </td>
+                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                          설비 운용에 필요한 성능 점검
+                      </td>
+                  </tr>
+                  <tr className="bg-gray-50  transition-colors">
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                          주기
+                      </td>
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                          반기별 1회 이상
+                      </td>
+                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                          연 1회 이상
+                      </td>
+                  </tr>
+                  <tr className="bg-white  transition-colors">
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                          주요업무
+                      </td>
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                          외관, 기능, 안전 상태 점검 및 기록
+                      </td>
+                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                          점검결과 기록 후 5년간 보존 및 지자체 제출
+                      </td>
+                  </tr>
+                  <tr className="bg-gray-50 transition-colors">
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                          업무위탁
+                      </td>
+                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                          공사업자
+                      </td>
+                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                          공사업자 또는 용역업자
+                      </td>
+                  </tr>
+                  </tbody>
+              </table>
+              </div>
+          </section>
+
+          {/* 연락처 */}
+          <div className="mt-16 text-center text-gray-700">
+              <h3 className="text-xl sm:text-2xl font-bold text-blue-900 mb-4">
+                  [견적요청 및 문의]
+              </h3>
+              <div className="space-y-2 text-base sm:text-lg">
+                  <p>
+                      <span className="font-semibold text-gray-800">E-MAIL :</span>{" "}
+                      <a href="mailto:bando@bdsj.kr">
+                          bando@bdsj.kr
+                      </a>
+                  </p>
+                  <p>
+                      <span className="font-semibold text-gray-800">대표번호 :</span> 051-808-8556
+                  </p>
+              </div>
+              <div className="mt-6">
+                  <a
+                      href="/download/견적요청서.hwp"
+                      download
+                      className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors"
+                  >
+                      견적서 다운로드
+                  </a>
+              </div>
+          </div>
+
+
+
+
       </div>
     </div>
   );