반응형

src/components/Header.tsx

@@ -10,10 +10,10 @@ const Header = () => {
   const [isMenuHovered, setIsMenuHovered] = useState(false);
 
   return (
-    <header className="fixed top-0 left-0 right-0 flex items-center h-20 w-full bg-white z-30">
+    <header className="fixed top-0 left-0 right-0 flex items-center h-16 sm:h-20 w-full bg-white z-30">
       <article
         id="sidebar-dimmer"
-        className={`fixed top-20 left-0 w-full h-full transition-opacity duration-500 ease-in-out ${isMenuHovered ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} hidden lg:block`}
+        className={`fixed top-16 sm:top-20 left-0 w-full h-full transition-opacity duration-500 ease-in-out ${isMenuHovered ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} hidden lg:block`}
       />
 
       <Link
@@ -23,7 +23,7 @@ const Header = () => {
           setMobileMenuOpen(false);
           setMobileActiveIndex(null);
         }}
-        className="absolute left-4 sm:left-[40px] top-[26px] flex items-center gap-1 w-32"
+        className="absolute left-4 sm:left-[40px] top-1/2 transform -translate-y-1/2 flex items-center gap-1 w-32"
       >
         <img className="w-10 h-7" src={`${IMAGE_PREFIX}/logo.png`} alt="logo"/>
         <div className="text-gray-600 text-xl font-bold font-['Noto_Sans_KR']">반도산전</div>
@@ -65,7 +65,7 @@ const Header = () => {
       {isMenuHovered && (
         <div 
           id="menuBox" 
-          className="hidden lg:block absolute w-full h-[50vh] top-20 border bg-blue-900"
+          className="hidden lg:block absolute w-full h-[50vh] top-16 sm:top-20 border bg-blue-900"
           onMouseEnter={() => setIsMenuHovered(true)}
           onMouseLeave={() => {
             setIsMenuHovered(false);
@@ -102,7 +102,7 @@ const Header = () => {
       )}
 
       {mobileMenuOpen && (
-        <div className="lg:hidden absolute top-20 left-0 w-full bg-white shadow-lg border-t">
+        <div className="lg:hidden absolute top-16 sm:top-20 left-0 w-full bg-white shadow-lg border-t">
           <nav className="flex flex-col">
             {menuItems.map((item, index) => (
               <div key={index} className="border-b border-gray-200">

src/components/Layout.tsx

@@ -2,6 +2,7 @@ import {Outlet, useLocation} from "react-router-dom";
 import menuItems from "@/data/menuItems";
 import React from "react";
 import TopButton from "./common/TopButton";
+import Footer from "./main/Footer";
 
 const Layout = () => {
   const {pathname} = useLocation();
@@ -26,23 +27,23 @@ const Layout = () => {
   return (
     <>
       <div
-        className="w-full h-[360px] bg-cover bg-center relative"
+        className="w-full h-48 sm:h-64 lg:h-80 bg-cover bg-center relative"
         style={{backgroundImage: `url('${layoutImg}')`}}
       >
         <div className="absolute inset-0 bg-black/40"/>
-        <div className="relative max-w-7xl top-10 h-full mx-auto flex flex-col justify-center gap-2">
-          <div className="text-white text-4xl font-bold font-['Noto_Sans_KR']">{title}</div>
-          <div className="text-white text-lg font-normal font-['Noto_Sans_KR']">{description}</div>
+        <div className="relative px-4 sm:px-8 h-full max-w-7xl mx-auto flex flex-col justify-center gap-2 sm:gap-4">
+          <div className="text-white text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR'] antialiased">{title}</div>
+          <div className="text-white text-sm sm:text-base lg:text-lg font-medium font-['Noto_Sans_KR'] antialiased">{description}</div>
         </div>
       </div>
 
       {/* page header */}
-      <div className="w-full border-b-3 border-gray-300 py-5">
-        <div className="max-w-7xl mx-auto flex flex-col gap-2">
-          <h2 className="text-3xl text-blue-900 font-bold font-['Noto_Sans_KR']">
+      <div className="w-full border-b border-gray-300 py-4 sm:py-5">
+        <div className="max-w-7xl mx-auto px-4 sm:px-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+          <h2 className="text-xl sm:text-2xl lg:text-3xl text-blue-900 font-bold font-['Noto_Sans_KR'] antialiased">
             {subTitle}
           </h2>
-          <div className="text-sm text-gray-400 font-['Noto_Sans_KR'] self-end">
+          <div className="text-xs sm:text-sm text-gray-500 font-medium font-['Noto_Sans_KR'] antialiased">
             {`HOME > ${title} > ${subTitle}`}
           </div>
         </div>
@@ -50,6 +51,9 @@ const Layout = () => {
 
       {/* 하위 라우트 렌더링 */}
       <Outlet/>
+      
+      {/* Footer 추가 */}
+      <Footer />
       <TopButton />
     </>
   );

src/components/ProjectModal.tsx

@@ -27,64 +27,77 @@ export const ProjectModal: React.FC<CommonModalProps> = ({ isOpen, onClose, item
 
     return (
       <div
-        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
         onClick={onClose}
       >
           <div
-            className="relative bg-white w-[1222px] h-[901px] p-10 rounded-lg overflow-hidden"
+            className="relative bg-white w-full max-w-6xl max-h-[90vh] overflow-y-auto p-4 sm:p-6 lg:p-8 rounded-lg"
             onClick={(e) => e.stopPropagation()}
           >
               {/* 닫기 버튼 */}
               <button
-                className="absolute top-6 right-6 text-black text-2xl font-light cursor-pointer"
+                className="absolute top-4 right-4 sm:top-6 sm:right-6 text-black text-2xl sm:text-3xl font-light cursor-pointer hover:text-gray-600 transition-colors"
                 onClick={onClose}
               >
                   ×
               </button>
 
               {/* 제목 및 정보 */}
-              <div className="mb-6">
-                  <h2 className="text-4xl font-extrabold mb-2">{item.title}</h2>
-                  <div className="text-base font-light space-y-1">
-                      <p>발주처 : {item.client}</p>
-                      <p>계약금액 : {item.contractAmount}</p>
-                      <p>공사기간 : {item.period}</p>
+              <div className="mb-6 sm:mb-8 pr-8">
+                  <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-['Noto_Sans_KR'] antialiased mb-3 sm:mb-4 text-gray-800">{item.title}</h2>
+                  <div className="text-sm sm:text-base font-medium font-['Noto_Sans_KR'] antialiased space-y-2 text-gray-700">
+                      {item.client && <p>발주처 : {item.client}</p>}
+                      {item.contractAmount && <p>계약금액 : {item.contractAmount}</p>}
+                      {item.period && <p>공사기간 : {item.period}</p>}
                   </div>
               </div>
 
               {/* 이미지 및 컨트롤 */}
-              <div className="relative w-full h-[578px] flex justify-center items-center">
-                  {images.length > 0 && (
-                    <img
-                      src={images[currentIndex]}
-                      alt={`image-${currentIndex}`}
-                      className="rounded max-h-full object-contain"
-                    />
+              <div className="relative w-full">
+                  {images.length > 0 ? (
+                    <div className="relative flex justify-center items-center bg-gray-100 rounded-lg">
+                      <img
+                        src={images[currentIndex]}
+                        alt={`image-${currentIndex}`}
+                        className="rounded-lg max-w-full h-auto max-h-[50vh] sm:max-h-[60vh] object-contain"
+                      />
+                      
+                      {images.length > 1 && (
+                        <>
+                          <button
+                            onClick={handlePrev}
+                            className="absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white w-10 h-10 sm:w-12 sm:h-12 rounded-full text-lg sm:text-xl cursor-pointer shadow-lg transition-colors flex items-center justify-center"
+                          >
+                              {'<'}
+                          </button>
+                          <button
+                            onClick={handleNext}
+                            className="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white w-10 h-10 sm:w-12 sm:h-12 rounded-full text-lg sm:text-xl cursor-pointer shadow-lg transition-colors flex items-center justify-center"
+                          >
+                              {'>'}
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="w-full h-64 sm:h-96 bg-gray-100 rounded-lg flex items-center justify-center">
+                      <p className="text-gray-500 font-medium font-['Noto_Sans_KR'] antialiased">이미지가 없습니다</p>
+                    </div>
                   )}
-                  <button
-                    onClick={handlePrev}
-                    className="absolute left-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl cursor-pointer"
-                  >
-                      {'<'}
-                  </button>
-                  <button
-                    onClick={handleNext}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl cursor-pointer"
-                  >
-                      {'>'}
-                  </button>
               </div>
 
               {/* 페이지 인디케이터 */}
-              <div className="flex justify-center gap-2 mt-4">
-                  <IndicatorDots
-                    count={images.length}
-                    activeIndex={currentIndex}
-                    onClick={(index) => setCurrentIndex(index)}
-                    activeColorClass="bg-blue-900"
-                    inactiveColorClass="bg-blue-900/20"
-                  />
-              </div>
+              {images.length > 1 && (
+                <div className="flex justify-center mt-4 sm:mt-6">
+                    <IndicatorDots
+                      count={images.length}
+                      activeIndex={currentIndex}
+                      onClick={(index) => setCurrentIndex(index)}
+                      activeColorClass="bg-blue-900"
+                      inactiveColorClass="bg-blue-900/20"
+                    />
+                </div>
+              )}
           </div>
       </div>
     );

src/components/common/Pagination.tsx

@@ -27,14 +27,14 @@ const Pagination: React.FC<PaginationProps> = ({currentPage, totalItems, itemsPe
     };
 
     return (
-        <div className="flex w-[650px] h-12 mx-auto items-center justify-center gap-3 my-16">
+        <div className="flex w-full max-w-lg mx-auto items-center justify-center gap-2 sm:gap-3 my-8 sm:my-12 lg:my-16 px-4">
             {/* Prev 버튼 */}
             <button
-                className="w-12 h-12 outline outline-neutral-200 rounded disabled:opacity-40 enabled:cursor-pointer"
+                className="w-10 h-10 sm:w-12 sm:h-12 border border-gray-300 rounded disabled:opacity-40 enabled:cursor-pointer hover:bg-gray-50 transition-colors font-['Noto_Sans_KR'] antialiased"
                 onClick={() => handleClick(currentPage - 1)}
                 disabled={currentPage === 1}
             >
-                <div className="text-center text-neutral-500 text-2xl">{'<'}</div>
+                <div className="text-center text-gray-600 text-lg sm:text-xl">{'<'}</div>
             </button>
 
             {/* 페이지 버튼들 */}
@@ -46,11 +46,11 @@ const Pagination: React.FC<PaginationProps> = ({currentPage, totalItems, itemsPe
                     <button
                         key={page}
                         onClick={() => handleClick(page)}
-                        className={`w-12 h-12 cursor-pointer rounded ${
+                        className={`w-10 h-10 sm:w-12 sm:h-12 cursor-pointer rounded transition-colors font-['Noto_Sans_KR'] antialiased ${
                             isActive
-                                ? 'bg-blue-900 text-white'
-                                : 'outline outline-neutral-200 text-neutral-500'
-                        } text-2xl`}
+                                ? 'bg-blue-900 text-white font-semibold'
+                                : 'border border-gray-300 text-gray-600 hover:bg-gray-50'
+                        } text-sm sm:text-base lg:text-lg`}
                     >
                         {page}
                     </button>
@@ -59,11 +59,11 @@ const Pagination: React.FC<PaginationProps> = ({currentPage, totalItems, itemsPe
 
             {/* Next 버튼 */}
             <button
-                className="w-12 h-12 outline outline-neutral-200 rounded disabled:opacity-40 enabled:cursor-pointer"
+                className="w-10 h-10 sm:w-12 sm:h-12 border border-gray-300 rounded disabled:opacity-40 enabled:cursor-pointer hover:bg-gray-50 transition-colors font-['Noto_Sans_KR'] antialiased"
                 onClick={() => handleClick(currentPage + 1)}
                 disabled={currentPage === totalPages}
             >
-                <div className="text-center text-neutral-500 text-2xl">{'>'}</div>
+                <div className="text-center text-gray-600 text-lg sm:text-xl">{'>'}</div>
             </button>
         </div>
     );

src/components/common/Tabs.tsx

@@ -22,16 +22,15 @@ const Tabs: React.FC<TabsProps> = ({
                                    }) => {
   return (
     <div className={className}>
-      <div className="flex text-center items-center justify-around h-40">
+      <div className="flex text-center items-center justify-around h-20 sm:h-24">
         {items.map((tab, idx) => (
           <div
             key={tab.id}
-            className={`w-full py-4 cursor-pointer text-sm sm:text-lg lg:text-2xl font-semibold font-['Noto_Sans_KR'] ${
-              idx !== 0 ? 'border-l' : ''} ${
-              idx !== items.length - 1 ? 'border-r' : ''} ${
+            className={`w-full py-3 sm:py-4 cursor-pointer text-sm sm:text-lg lg:text-2xl font-semibold font-['Noto_Sans_KR'] antialiased ${
+              idx !== 0 ? 'border-l border-gray-200' : ''} ${
+              idx !== items.length - 1 ? 'border-r border-gray-200' : ''} ${
               activeTab === tab.id ? 'text-black' : 'text-black/25'
             }`}
-            style={{ borderColor: '#E0E1E2' }}
             onClick={() => onTabChange(tab.id)}
           >
             {tab.label}

src/components/common/TopButton.tsx

@@ -31,9 +31,11 @@ const TopButton = () => {
       }`}
       onClick={scrollToTop}
     >
-      <div className="w-12 h-12 bg-zinc-300 rounded-full shadow-lg hover:bg-zinc-400 transition-colors duration-200" />
-      <div className="w-3 left-[18px] top-[20px] absolute origin-top-left -rotate-90 text-center justify-start text-black text-sm font-thin font-['Noto_Sans_KR']">{">"}</div>
-      <div className="left-[15px] top-[20px] absolute text-center justify-start text-black text-xs font-thin font-['Noto_Sans_KR']">TOP</div>
+      <div className="w-12 h-12 bg-zinc-300 rounded-full shadow-lg hover:bg-zinc-400 transition-colors duration-200 flex items-center justify-center">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 4L6 10H10V20H14V10H18L12 4Z" fill="currentColor"/>
+        </svg>
+      </div>
     </div>
   );
 };

src/components/main/Business.tsx

@@ -5,22 +5,22 @@ import {useScrollAnimation} from "@/hooks/useScrollAnimation";
 
 const RankBox = (title: string, rank: string, topPercent: string) => (
     <div className="flex flex-col items-center justify-center w-full max-w-[280px] mx-auto">
-        <div className="text-center text-black/40 text-xs sm:text-lg lg:text-2xl font-medium font-['Noto_Sans_KR'] mb-3 sm:mb-6 lg:mb-10">
+        <div className="text-center text-black/40 text-xs sm:text-lg lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-3 sm:mb-6 lg:mb-10 antialiased">
             {title}
         </div>
         <div className="flex w-full justify-center items-center mb-2 sm:mb-4">
-            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-medium font-['Noto_Sans_KR'] mr-4 sm:mr-6">
+            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] mr-4 sm:mr-6 antialiased">
                 지역
             </div>
-            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-semibold font-['Noto_Sans_KR']">
+            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR'] antialiased">
                 {rank}
             </div>
         </div>
         <div className="flex w-full justify-center items-center">
-            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-medium font-['Noto_Sans_KR'] mr-4 sm:mr-6">
+            <div className="text-black/40 text-sm sm:text-lg lg:text-3xl font-semibold font-['Noto_Sans_KR'] mr-4 sm:mr-6 antialiased">
                 상위
             </div>
-            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR']">
+            <div className="text-blue-900 text-xl sm:text-3xl lg:text-6xl font-bold font-['Noto_Sans_KR'] antialiased">
                 {topPercent}
             </div>
         </div>
@@ -38,8 +38,8 @@ const Business = () => {
             <div ref={businessRef} className={`transition-all duration-1000 ${businessVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                 {/* 텍스트 영역 */}
                 <div className="space-y-3 mb-8">
-                    <div className="text-blue-900 text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR']">반도산전 Business Solution</div>
-                    <div className="text-zinc-500 text-sm sm:text-md font-bold font-['Noto_Sans_KR']">반도산전이 선도하는 힘</div>
+                    <div className="text-blue-900 text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR'] antialiased">반도산전 Business Solution</div>
+                    <div className="text-zinc-500 text-sm sm:text-md font-semibold font-['Noto_Sans_KR'] antialiased">반도산전이 선도하는 힘</div>
                 </div>
 
                 {/* 이미지 영역 */}
@@ -54,8 +54,8 @@ const Business = () => {
                             <DarkOverlay />
                             
                             <div className="relative p-2 sm:p-4">
-                                <div className="text-white text-xs sm:text-sm lg:text-md font-bold font-['Noto_Sans_KR'] whitespace-pre-line">{item.label}</div>
-                                <div className="text-white text-xs sm:text-sm font-bold font-['Noto_Sans_KR']">→</div>
+                                <div className="text-white text-xs sm:text-sm lg:text-md font-semibold font-['Noto_Sans_KR'] whitespace-pre-line antialiased">{item.label}</div>
+                                <div className="text-white text-xs sm:text-sm font-semibold font-['Noto_Sans_KR'] antialiased">→</div>
                             </div>
                         </a>
                     ))}
@@ -66,17 +66,17 @@ const Business = () => {
             <div ref={rankRef} className={`transition-all duration-1000 ${rankVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                 {/* 텍스트 영역 */}
                 <div className="space-y-2 mb-2.5 pb-6 sm:pb-10">
-                    <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR']">반도산전은</div>
+                    <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR'] antialiased">반도산전은</div>
                 </div>
                 <div>
                     <div className="text-center mb-10 sm:mb-15 px-4">
-                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
+                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl antialiased">
                             1997년부터 2025년까지 <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">27</span>년간 축적된 기술력과 신뢰를 바탕으로,
                         </div>
-                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
+                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl antialiased">
                             부산 · 울산 · 경남 시공능력평가 <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">1</span>위를 달성하였으며,
                         </div>
-                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl">
+                        <div className="text-zinc-600 font-semibold font-['Noto_Sans_KR'] leading-loose sm:leading-[60px] text-xs sm:text-sm lg:text-lg xl:text-xl antialiased">
                             <span className="text-blue-900 text-lg sm:text-xl lg:text-2xl xl:text-3xl">947</span>억 매출을 달성한 외감법인입니다.
                         </div>
                     </div>

src/components/main/Directions.tsx

@@ -65,7 +65,7 @@ const Directions: React.FC<{ disableTitle?: boolean }> = ({disableTitle}) => {
       <div className="max-w-7xl mx-auto">
         {!disableTitle && (
           <div className="space-y-2">
-            <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR']">찾아오시는 길</div>
+            <div className="text-2xl sm:text-3xl lg:text-4xl text-blue-900 font-bold font-['Noto_Sans_KR'] antialiased">찾아오시는 길</div>
           </div>
         )}
         <Tabs
@@ -79,12 +79,12 @@ const Directions: React.FC<{ disableTitle?: boolean }> = ({disableTitle}) => {
             </div>
             <div className="flex flex-col sm:flex-row py-3 sm:py-6 gap-3 sm:gap-0">
               <div className="w-full sm:w-1/2 px-2 sm:px-4">
-                <div className="text-black text-base sm:text-xl lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-1 sm:mb-2">주소</div>
-                <div className="text-black text-sm sm:text-base lg:text-xl font-normal font-['Noto_Sans_KR'] leading-relaxed">{tabContent[activeTab].address}</div>
+                <div className="text-black text-base sm:text-xl lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-1 sm:mb-2 antialiased">주소</div>
+                <div className="text-black text-sm sm:text-base lg:text-xl font-medium font-['Noto_Sans_KR'] leading-relaxed antialiased">{tabContent[activeTab].address}</div>
               </div>
               <div className="w-full sm:w-1/2 px-2 sm:px-4">
-                <div className="text-black text-base sm:text-xl lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-1 sm:mb-2">전화</div>
-                <div className="text-black text-sm sm:text-base lg:text-xl font-normal font-['Noto_Sans_KR']">{tabContent[activeTab].phone}</div>
+                <div className="text-black text-base sm:text-xl lg:text-2xl font-semibold font-['Noto_Sans_KR'] mb-1 sm:mb-2 antialiased">전화</div>
+                <div className="text-black text-sm sm:text-base lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased">{tabContent[activeTab].phone}</div>
               </div>
             </div>
           </div>

src/components/main/Footer.tsx

@@ -4,8 +4,8 @@ import {FOOTER_IMAGE_PREFIX} from "@/constants";
 const Footer = () => {
     return (
         <footer className="relative w-full bg-neutral-800 text-white">
-            <div className="w-full h-0 pt-15 outline outline-offset-[-0.50px] outline-gray-600"></div>
-            
+            <div className="w-full h-0 pt-15 outline-gray-600"></div>
+
             <div className="max-w-screen-xl mx-auto px-4 sm:px-8 mt-6 sm:mt-10 flex flex-col ">
                 {/* 로고 및 텍스트 블럭 */}
                 <div className="flex flex-col sm:flex-row gap-4 sm:gap-8">
@@ -15,10 +15,10 @@ const Footer = () => {
                     </div>
 
                     {/* 회사 정보 2단 그리드 */}
-                    <div className="grid grid-cols-1 sm:grid-cols-2 flex-grow text-xs sm:text-sm font-light leading-relaxed gap-4 sm:gap-0">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 flex-grow text-xs sm:text-sm font-medium leading-relaxed gap-4 sm:gap-0 antialiased">
                         {/* 부산 본사 */}
                         <div className="space-y-3 sm:space-y-5">
-                            <p className="text-gray-300 font-['Noto_Sans_KR']">
+                            <p className="text-gray-300 font-['Noto_Sans_KR'] antialiased">
                                 회사명 : 반도산전(주)<br />
                                 대표자 : 서보석<br />
                                 사업자등록번호 : 605-81-32247<br />
@@ -28,13 +28,13 @@ const Footer = () => {
                             </p>
                             
                             {/*/!* 카피라이트 *!/*/}
-                            <div className="flex text-xs font-light text-right text-gray-500 font-['Noto_Sans_KR']">
+                            <div className="flex text-xs font-medium text-right text-gray-500 font-['Noto_Sans_KR'] antialiased">
                                 © BANDO INDUSTRIAL SYSTEM CO., LTD. All rights reserved.
                             </div>
                         </div>
 
                         {/* 공장 및 지사 */}
-                        <div className="space-y-4 sm:space-y-6 text-gray-300 font-['Noto_Sans_KR']">
+                        <div className="space-y-4 sm:space-y-6 text-gray-300 font-['Noto_Sans_KR'] antialiased">
                             <div className="space-y-1">
                                 <p>경남 김해 공장 : 경남 김해시 서김해산단안길 2 (명법동)</p>
                                 <p>번호 : 055 - 339 - 8550</p>

src/components/main/Hero.tsx

@@ -3,6 +3,7 @@ import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import {IMAGE_PREFIX} from "@/constants";
 import IndicatorDots from "@/components/common/IndicatorDots";
 import {useScrollAnimation} from "@/hooks/useScrollAnimation";
+import { Link } from "react-router-dom";
 
 const images = [
     `${IMAGE_PREFIX}/hero.jpg`,
@@ -38,24 +39,24 @@ const Hero = () => {
 
             {/* 🔹 콘텐츠 */}
             <div className={`relative flex flex-col mt-15 gap-6 lg:gap-10 px-4 lg:px-0 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
-                <div className="text-center justify-center text-white text-3xl sm:text-3xl md:text-4xl lg:text-6xl font-semibold font-['Noto_Sans_KR']">
+                <div className="text-center justify-center text-white text-3xl sm:text-3xl md:text-4xl lg:text-6xl font-semibold font-['Noto_Sans_KR'] antialiased">
                     <div className="flex flex-col sm:flex-row justify-center items-center gap-1 sm:gap-2">
                         <span>스마트 네트워크 리더</span>
                         <span>반도산전</span>
                     </div>
                 </div>
-                <div className="self-stretch text-center justify-start text-zinc-100 font-normal font-['Noto_Sans_KR'] px-4 lg:px-0 space-y-2">
+                <div className="self-stretch text-center justify-start text-zinc-100 font-medium font-['Noto_Sans_KR'] px-4 lg:px-0 space-y-2 antialiased">
                     <div className="text-sm sm:text-base lg:text-lg xl:text-xl">부·울·경 시공능력평가 1위를 넘어</div>
                     <div className="text-sm sm:text-base lg:text-lg xl:text-xl">대한민국 시공능력평가 1위로 도약합니다.</div>
                     <div className="text-sm sm:text-base lg:text-lg xl:text-xl">고객의 스마트 네트워크 산업을</div>
                     <div className="text-sm sm:text-base lg:text-lg xl:text-xl">더욱 가치있게 만들어 나갑니다.</div>
                 </div>
                 <div className="self-stretch p-2.5 inline-flex justify-center items-center gap-4 overflow-hidden">
-                    <div className="flex w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-offset-[-0.5px] outline-white justify-center items-center overflow-hidden hover:bg-white group transition-all duration-300 cursor-pointer">
-                        <div className="text-center justify-start text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] group-hover:text-blue-700">
+                    <Link to="/about/history" className="flex w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-offset-[-0.5px] outline-white justify-center items-center overflow-hidden hover:bg-white group transition-all duration-300 cursor-pointer">
+                        <div className="text-center justify-start text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] group-hover:text-blue-700 antialiased">
                             ABOUT
                         </div>
-                    </div>
+                    </Link>
                 </div>
             </div>
 

src/components/main/Partners.tsx

@@ -17,8 +17,8 @@ const Partners = () => {
             <div className={`max-w-7xl mx-auto relative flex-col justify-items-center px-4 sm:px-0 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                 <div className="w-full mb-6 sm:mb-8 lg:mb-12">
                     <div className="relative w-full space-y-2 text-center sm:text-left">
-                        <div className="text-white text-3xl sm:text-4xl lg:text-5xl font-semibold font-['Noto_Sans_KR']">협력사</div>
-                        <div className="text-white text-sm sm:text-base lg:text-lg font-semibold font-['Noto_Sans_KR']">50개가 넘는 신뢰받는 기업과 상생하고 있습니다.
+                        <div className="text-white text-3xl sm:text-4xl lg:text-5xl font-bold font-['Noto_Sans_KR'] antialiased">협력사</div>
+                        <div className="text-white text-sm sm:text-base lg:text-lg font-semibold font-['Noto_Sans_KR'] antialiased">50개가 넘는 신뢰받는 기업과 상생하고 있습니다.
                         </div>
                     </div>
                 </div>

src/components/main/Project.tsx

@@ -1,23 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import projectList from '@/data/project';
 import {useScrollAnimation} from "@/hooks/useScrollAnimation";
+import { Link } from "react-router-dom";
 
 const Project = () => {
     const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+    const [activeCard, setActiveCard] = useState<number | null>(null);
 
     return (
         <div ref={ref} className="w-full py-8 sm:py-12 px-4 sm:px-10 bg-blue-900">
             <div className={`max-w-7xl mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
                 <div className="pb-5">
-                    <div className="text-white text-2xl sm:text-3xl lg:text-4xl font-semibold font-['Noto_Sans_KR']">주요 랜드마크 프로젝트 시공현장</div>
+                    <div className="text-white text-2xl sm:text-3xl lg:text-4xl font-bold font-['Noto_Sans_KR'] antialiased">주요 랜드마크 프로젝트 시공현장</div>
                 </div>
 
                 {/* cardList */}
-                <div className="relative grid grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-6 sm:gap-y-8 lg:gap-y-10 mt-6 sm:mt-8 lg:mt-10">
+                <div className="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-6 sm:gap-y-8 lg:gap-y-10 mt-6 sm:mt-8 lg:mt-10">
                     {projectList.map((project, index) => (
-                        <div key={index} className="relative shadow-lg group cursor-pointer">
+                        <div 
+                            key={index} 
+                            className="relative shadow-lg group cursor-pointer overflow-hidden"
+                            onClick={() => setActiveCard(activeCard === index ? null : index)}
+                        >
                             {/* 그라디언트 오버레이 */}
-                            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"/>
+                            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 z-[1]"/>
 
                             <img
                                 src={project.imageUrl}
@@ -25,26 +31,70 @@ const Project = () => {
                                 className="w-full aspect-[4/3] object-cover"
                             />
 
-                            <div className="">
-                                <h3 className='absolute z-10 left-3 sm:left-6 top-[77%] group-hover:top-[30%] transition-all duration-500 ease-in-out text-sm sm:text-base lg:text-lg text-white font-semibold'>
-                                    {project.title}
-                                </h3>
-                                <div className="absolute z-10 left-3 sm:left-6 top-[85%] text-xs text-white leading-7">MORE +
+                            {/* 텍스트 영역 - 새로 구조화 */}
+                            <div className="absolute inset-x-0 bottom-0 z-20 p-2 sm:p-4 lg:p-6">
+                                <div className="space-y-1 sm:space-y-2">
+                                    <h3 className='text-sm sm:text-base lg:text-lg text-white font-semibold antialiased leading-tight word-break overflow-hidden' 
+                                        style={{
+                                            display: '-webkit-box',
+                                            WebkitLineClamp: '2',
+                                            WebkitBoxOrient: 'vertical',
+                                            wordBreak: 'keep-all',
+                                            overflowWrap: 'break-word'
+                                        }}>
+                                        {project.title}
+                                    </h3>
                                 </div>
                             </div>
 
-                            <div className="absolute inset-0 bg-gradient-to-t from-black/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out flex flex-col justify-center">
-                                {project.description && (
-                                    <div className="absolute left-3 right-3 sm:left-6 sm:right-6 top-[60%] group-hover:top-[40%] transition-all duration-500 ease-in-out">
-                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
-                                            발주처 : {project.client}
-                                        </p>
-                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
-                                            {project.description}
-                                        </p>
-                                        <p className="text-sm text-white leading-8 whitespace-pre-line">
-                                            계약금액 : {project.contractAmount}
-                                        </p>
+                            {/* 데스크탑 호버 상세 정보 */}
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/20 opacity-0 lg:group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-[3] hidden lg:flex flex-col justify-center">
+                                {(project.description || project.client || project.contractAmount) && (
+                                    <div className="px-4 lg:px-6 space-y-2">
+                                        {project.client && (
+                                            <p className="text-sm text-white leading-6 antialiased">
+                                                발주처 : {project.client}
+                                            </p>
+                                        )}
+                                        {project.description && (
+                                            <p className="text-sm text-white leading-6 antialiased">
+                                                {project.description}
+                                            </p>
+                                        )}
+                                        {project.contractAmount && (
+                                            <p className="text-sm text-white leading-6 antialiased">
+                                                계약금액 : {project.contractAmount}
+                                            </p>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* 모바일 클릭 상세정보 */}
+                            <div className={`absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/20 transition-opacity duration-300 ease-in-out z-[3] flex lg:hidden flex-col justify-center ${
+                                activeCard === index ? 'opacity-100' : 'opacity-0'
+                            }`}>
+                                {(project.description || project.client || project.contractAmount) ? (
+                                    <div className="px-4 space-y-2">
+                                        {project.client && (
+                                            <p className="text-sm text-white leading-6 antialiased text-center">
+                                                발주처 : {project.client}
+                                            </p>
+                                        )}
+                                        {project.description && (
+                                            <p className="text-sm text-white leading-6 antialiased text-center">
+                                                {project.description}
+                                            </p>
+                                        )}
+                                        {project.contractAmount && (
+                                            <p className="text-sm text-white leading-6 antialiased text-center">
+                                                계약금액 : {project.contractAmount}
+                                            </p>
+                                        )}
+                                    </div>
+                                ) : (
+                                    <div className="px-4 text-center">
+                                        <p className="text-lg text-white font-semibold antialiased">바로가기</p>
                                     </div>
                                 )}
                             </div>
@@ -53,9 +103,9 @@ const Project = () => {
                 </div>
 
                 <div className="flex justify-center items-center my-12 sm:my-16 lg:my-20">
-                    <div className="w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-white">
-                        <div className="text-center text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR']">MORE</div>
-                    </div>
+                    <Link to="/business/landmarks" className="w-32 sm:w-36 lg:w-44 px-6 lg:px-8 py-3 outline outline-white hover:bg-white hover:text-blue-900 transition-colors duration-200">
+                        <div className="text-center text-white text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] antialiased hover:text-blue-900">MORE</div>
+                    </Link>
                 </div>
             </div>
         </div>

src/data/partners.ts

@@ -33,12 +33,12 @@ const partnerProjects: PartnerProject[] = [
     imageUrl: `${PARTNER_IMAGE_PREFIX}/GS건설.png`,
   },
   {
-    title: "강서구 BGF 리테일 CU 물류창고",
+    title: "부산 강서구 BGF 리테일 CU 물류창고",
     description: "",
     imageUrl: `${PARTNER_IMAGE_PREFIX}/sk에코플랜트.png`,
   },
   {
-    title: "기장 오시리아 메디타운",
+    title: "부산 동부산 관광단지 오시리아 메디타운",
     description: "",
     imageUrl: `${PARTNER_IMAGE_PREFIX}/KT.png`,
   },

src/data/project.ts

@@ -46,12 +46,12 @@ const projectList: MajorProject[] = [
     imageUrl: `${PROJECT_IMAGE_PREFIX}/덕산병원.jpg`,
   },
   {
-    title: "강서구 BGF 리테일 CU 물류창고",
+    title: "부산 강서구 BGF 리테일 CU 물류창고",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/CU물류창고.jpg`,
   },
   {
-    title: "기장 오시리아 메디타운",
+    title: "부산 동부산 관광단지 오시리아 메디타운",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/메디타운.jpg`,
   },

src/pages/NotFound.tsx

@@ -1,3 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useScrollAnimation } from '@/hooks/useScrollAnimation';
+
 export default function NotFound() {
-  return <div>페이지를 찾을 수 없습니다</div>;
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+
+  return (
+    <div ref={ref} className="min-h-screen flex items-center justify-center bg-gray-50 px-4 sm:px-8">
+      <div className={`text-center max-w-md mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+        
+        {/* 404 숫자 */}
+        <div className="mb-8">
+          <h1 className="text-6xl sm:text-8xl lg:text-9xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+            404
+          </h1>
+        </div>
+
+        {/* 메시지 */}
+        <div className="mb-8 space-y-4">
+          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
+            페이지를 찾을 수 없습니다
+          </h2>
+          <p className="text-base sm:text-lg text-gray-600 font-medium font-['Noto_Sans_KR'] antialiased leading-relaxed">
+            요청하신 페이지가 존재하지 않거나<br />
+            이동되었을 수 있습니다.
+          </p>
+        </div>
+
+        {/* 버튼 */}
+        <div className="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
+          <Link 
+            to="/" 
+            className="inline-block w-full sm:w-auto px-6 py-3 bg-blue-900 text-white font-semibold font-['Noto_Sans_KR'] antialiased rounded-lg hover:bg-blue-800 transition-colors duration-200"
+          >
+            홈으로 돌아가기
+          </Link>
+          <button 
+            onClick={() => window.history.back()} 
+            className="inline-block w-full sm:w-auto px-6 py-3 border-2 border-blue-900 text-blue-900 font-semibold font-['Noto_Sans_KR'] antialiased rounded-lg hover:bg-blue-900 hover:text-white transition-colors duration-200"
+          >
+            이전 페이지
+          </button>
+        </div>
+
+        {/* 장식적 요소 */}
+        <div className="mt-12">
+          <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
+        </div>
+
+      </div>
+    </div>
+  );
 }

src/pages/about/Ceo.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {useScrollAnimation} from "@/hooks/useScrollAnimation";
+
+const Ceo: React.FC = () => {
+    const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
+
+    return (
+        <div ref={ref} className="max-w-4xl mx-auto px-4 sm:px-8 py-12 sm:py-16 lg:py-20">
+            <div className={`transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+                
+                {/* 제목 섹션 */}
+                <div className="text-center mb-16 sm:mb-20 lg:mb-24">
+                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased mb-6">
+                        CEO 인사말
+                    </h1>
+                    <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
+                </div>
+
+                {/* 인사말 내용 - 중앙 정렬 */}
+                <div className="text-center space-y-8 sm:space-y-10 lg:space-y-12">
+                    
+                    <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800">
+                        반도산전(주)는 21세기 디지털 전환의 흐름 속에서 전기·정보통신·소방·제조·친환경 분야의 융합 기술력을 바탕으로 대한민국 스마트 인프라 구축을 선도하는 전문 건설기업입니다.
+                    </p>
+
+                    <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800">
+                        저희는 단순한 시공을 넘어, ICT 기반의 통합 솔루션 제공을 통해 보다 스마트하고 안전한 미래 환경을 구현하고자 합니다. BNK금융그룹 데이터센터, 부산 북항 마리나 G7, 수원 덕산종합병원, 부산 동부산 오시리아 메디타운, 서울 마곡 VL르웨스트 시니어타운, 초고속 국방 광대역 통신망 구축공사 등 다양한 랜드마크 프로젝트를 통해 기술력과 신뢰를 입증해왔습니다.
+                    </p>
+
+                    <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800">
+                        반도산전은 부산·울산·경남 지역 정보통신 부문 1위를 지속적으로 유지하고 있으며, 전기 및 소방 분야에서도 시공능력평가액 상위권을 꾸준히 기록하며 업계의 높은 신뢰를 이어가고 있습니다.
+                    </p>
+
+                    <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800">
+                        현재 본사는 부산에 위치하고 있으며, 서울 경기 지사를 통해 다수의 1군 건설사와 거래를 지속하고 있습니다. 또한 김해에 위치한 자체 생산공장에서는 고품질 전기·통신 자재 및 솔루션 제품의 R&D와 생산 역량을 강화하여 기술의 독립성과 경쟁력을 확보해 나가고 있습니다.
+                    </p>
+
+                    <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800">
+                        저희는 지속 가능한 사회를 위한 친환경 설비 구축, 초연결 시대를 대비한 통합 보안 및 유비쿼터스 솔루션 개발에 집중하며, 앞으로도 반도산전은 '기술과 사람, 환경의 균형 있는 미래'를 함께 설계하는 든든한 파트너가 되겠습니다.
+                    </p>
+
+                    <div className="bg-blue-50 p-8 sm:p-10 lg:p-12 rounded-lg">
+                        <p className="text-base sm:text-lg lg:text-xl font-normal font-['Noto_Sans_KR'] antialiased leading-relaxed text-blue-900">
+                            아울러, 저희 반도산전은 ESG (Environmental, Social, Governance) 경영을 핵심 가치로 삼아, 환경 보호와 사회적 책임, 투명한 지배구조 확립에 대한 노력을 지속하고 있습니다. 매년 외부 전문기관의 ESG 평가를 통해 경영 수준을 진단하고 개선하며, 지속가능한 기업으로서의 역할과 책임을 다하고 있습니다.
+                        </p>
+                    </div>
+
+                    <div className="pt-8 sm:pt-10 lg:pt-12">
+                        <p className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased mb-4">
+                            감사합니다.
+                        </p>
+                        <p className="text-base sm:text-lg lg:text-xl font-semibold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+                            반도산전(주) 대표이사 서보석
+                        </p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Ceo;

src/pages/about/Gallery.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import IndicatorDots from "@/components/common/IndicatorDots";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 
 const Gallery: React.FC = () => {
   // FIXME : public/image/gallery 경로에 사진 추가하면 됨 
@@ -10,6 +11,7 @@ const Gallery: React.FC = () => {
   ];
 
   const [currentIndex, setCurrentIndex] = useState(0);
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
 
   const handlePrev = () => {
     setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
@@ -24,44 +26,55 @@ const Gallery: React.FC = () => {
   };
 
   return (
-    <div className="relative flex flex-col items-center max-w-7xl mx-auto mt-15 mb-10 space-y-10">
-      <img
-        className="w-full h-[849px] object-cover"
-        src={images[currentIndex]}
-        alt={`slide-${currentIndex}`}
-      />
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div className={`relative flex flex-col items-center max-w-6xl mx-auto space-y-6 sm:space-y-8 lg:space-y-10 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+        
+        {/* 이미지 컨테이너 */}
+        <div className="relative w-full">
+          <img
+            className="w-full h-64 sm:h-96 lg:h-[500px] xl:h-[600px] object-cover rounded-lg shadow-lg"
+            src={images[currentIndex]}
+            alt={`slide-${currentIndex}`}
+          />
 
-      {/* 인디케이터 Dots */}
-      <div className="absolute z-10 bottom-[12vh]">
-        <IndicatorDots
-          count={images.length}
-          activeIndex={currentIndex}
-          onClick={handleDotClick}
-        />
-      </div>
-
-      <div className="text-black text-4xl font-bold font-['Noto_Sans_KR']">
-        김해지사 전경
-      </div>
+          {/* 인디케이터 Dots */}
+          <div className="absolute bottom-4 sm:bottom-6 left-1/2 transform -translate-x-1/2 z-10">
+            <IndicatorDots
+              count={images.length}
+              activeIndex={currentIndex}
+              onClick={handleDotClick}
+            />
+          </div>
 
-      {/* 화살표 */}
-      <div className="absolute inset-0 pointer-events-none">
-        <div
-          className="absolute top-1/2 left-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
-          onClick={handlePrev}
-        >
-          <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
-            <div className="text-black text-2xl font-thin">{'<'}</div>
+          {/* 화살표 */}
+          <div className="absolute inset-0 pointer-events-none">
+            <div
+              className="absolute top-1/2 left-2 sm:left-4 lg:left-6 -translate-y-1/2 cursor-pointer pointer-events-auto"
+              onClick={handlePrev}
+            >
+              <div className="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 bg-white/80 hover:bg-white flex items-center justify-center rounded-full shadow-md transition-colors duration-200">
+                <div className="text-gray-800 text-lg sm:text-xl lg:text-2xl font-medium">{'<'}</div>
+              </div>
+            </div>
+            <div
+              className="absolute top-1/2 right-2 sm:right-4 lg:right-6 -translate-y-1/2 cursor-pointer pointer-events-auto"
+              onClick={handleNext}
+            >
+              <div className="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 bg-white/80 hover:bg-white flex items-center justify-center rounded-full shadow-md transition-colors duration-200">
+                <div className="text-gray-800 text-lg sm:text-xl lg:text-2xl font-medium">{'>'}</div>
+              </div>
+            </div>
           </div>
         </div>
-        <div
-          className="absolute top-1/2 right-10 -translate-y-1/2 cursor-pointer pointer-events-auto"
-          onClick={handleNext}
-        >
-          <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center">
-            <div className="text-black text-2xl font-thin">{'>'}</div>
-          </div>
+
+        {/* 제목 */}
+        <div className="text-center">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased">
+            김해지사 전경
+          </h1>
+          <div className="w-20 h-1 bg-blue-900 mx-auto mt-4"></div>
         </div>
+
       </div>
     </div>
   );

src/pages/about/History.tsx

@@ -1,5 +1,6 @@
 import React, {useState} from "react";
 import Tabs, {TabItem} from "@/components/common/Tabs";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 
 const tabItems: TabItem[] = [
   {id: '1', label: '현재'},
@@ -73,6 +74,7 @@ const historyItems = [
 
 const History: React.FC = () => {
   const [activeTab, setActiveTab] = useState('1');
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
   
   // 연도 필터링 함수
   const getFilteredHistory = (tabId: string) => {
@@ -92,47 +94,69 @@ const History: React.FC = () => {
   };
 
   const filteredItems = getFilteredHistory(activeTab);
-  const timeLineClass = 'before:content-[\'\'] before:block before:absolute before:top-[2.4rem] before:left-0 before:w-0.5 before:h-[calc(100%-2.4rem)] before:bg-[#b1b3ba] before:-z-10';
-  const ballClass = 'before:content-[\'\'] before:block before:absolute before:top-[1.5rem] before:left-[-0.4rem] before:w-[1rem] before:h-[1rem] before:bg-[#2C3E50] before:rounded-full';
   const yearRange = tabYears[activeTab];
-  const description = tabDescriptions[activeTab];
   
   return (
-    <div className="max-w-7xl mx-auto my-20">
-      <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Noto_Sans_KR'] leading-10 mb-10">
-        반도산전은 1996년 설립 이래 30년의 시간 동안 멈추지 않고 기술혁신과 내실을 다져왔습니다.<br/>대한민국을 선도하는 기업으로 도약해 나갈 것 입니다.
-      </div>
-      <Tabs
-        items={tabItems}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      >
-        <div className="flex max-w-7xl mx-auto">
-          <div className="flex-1 pt-30 space-y-10 text-center">
-            <h2 className="text-[28px] font-semibold">
-              <span className="text-black text-5xl">{yearRange.start}</span>
-              <span className="relative -top-0 mx-4 text-black text-5xl">-</span>
-              <span className="text-[#0033A0] text-6xl">{yearRange.end}</span>
-            </h2>
-            <p className="mt-1 text-3xl font-semibold text-neutral-600 leading-tight">
-              새로운 출발과 함께<br/>
-              반도산전의 경쟁력 강화
-            </p>
-          </div>
-          <div id="history-list" className={`pt-9 relative flex-1 flex flex-col gap-[3rem] w-[calc(100%-52rem)] ${timeLineClass}`}>
-            {filteredItems.map(({date, description, image}) => (
-              <div key={date + description} className={`relative px-15 ${image && ballClass}`}>
-                <div className="text-[#1e293b] font-bold text-2xl leading-tight">
-                  {date}
-                </div>
-                <div className="text-[#334155] text-xl leading-snug whitespace-pre-line">
-                  {description}
-                </div>
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div className={`max-w-7xl mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+        
+        {/* 소개 텍스트 */}
+        <div className="text-center mb-8 sm:mb-12 lg:mb-16">
+          <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased leading-relaxed text-gray-800 max-w-4xl mx-auto">
+            반도산전은 1996년 설립 이래 30년의 시간 동안 멈추지 않고 기술혁신과 내실을 다져왔습니다.
+            <br className="hidden sm:block" />
+            대한민국을 선도하는 기업으로 도약해 나갈 것 입니다.
+          </p>
+        </div>
+
+        <Tabs
+          items={tabItems}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        >
+          <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
+            
+            {/* 연도 및 설명 섹션 */}
+            <div className="w-full lg:w-1/3 text-center lg:text-left">
+              <div className="space-y-4 sm:space-y-6">
+                <h2 className="font-semibold font-['Noto_Sans_KR'] antialiased">
+                  <span className="text-3xl sm:text-4xl lg:text-5xl text-gray-800">{yearRange.start}</span>
+                  <span className="mx-2 sm:mx-4 text-3xl sm:text-4xl lg:text-5xl text-gray-800">-</span>
+                  <span className="text-3xl sm:text-4xl lg:text-5xl text-blue-900">{yearRange.end}</span>
+                </h2>
+                <p className="text-lg sm:text-xl lg:text-2xl font-semibold font-['Noto_Sans_KR'] antialiased text-gray-600 leading-tight">
+                  {tabDescriptions[activeTab].replace('<br/>', '\n')}
+                </p>
               </div>
-            ))}
+            </div>
+
+            {/* 타임라인 섹션 */}
+            <div className="w-full lg:w-2/3">
+              <div className="relative space-y-6 sm:space-y-8">
+                {/* 타임라인 선 */}
+                <div className="absolute left-4 top-0 w-0.5 h-full bg-gray-300 hidden sm:block"></div>
+                
+                {filteredItems.map(({date, description, image}, index) => (
+                  <div key={date + description} className="relative pl-0 sm:pl-12">
+                    
+                    {/* 타임라인 점 */}
+                    <div className="absolute left-2.5 top-2 w-3 h-3 bg-blue-900 rounded-full hidden sm:block"></div>
+                    
+                    <div className="space-y-2">
+                      <div className="text-base sm:text-lg lg:text-xl font-bold font-['Noto_Sans_KR'] antialiased text-gray-800">
+                        {date}
+                      </div>
+                      <div className="text-sm sm:text-base lg:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed whitespace-pre-line">
+                        {description}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
-        </div>
-      </Tabs>
+        </Tabs>
+      </div>
     </div>
   );
 };

src/pages/about/Partners.tsx

@@ -1,12 +1,14 @@
 import React, { useState, useRef, useEffect } from "react";
 import partnerList from "@/data/partners";
 import Pagination from "@/components/common/Pagination";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 
 const ITEMS_PER_PAGE = 16;
 
 const Partners: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
-  const paginationRef = useRef<HTMLDivElement>(null); // 페이지네이션 ref
+  const paginationRef = useRef<HTMLDivElement>(null);
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
 
   const totalItems = partnerList.length;
   const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
@@ -24,53 +26,61 @@ const Partners: React.FC = () => {
   };
 
   return (
-    <div className="max-w-7xl mx-auto">
-      {/* 상단 소개 영역 */}
-      <div className="flex items-center">
-        <div className="flex-1">
-          <div className="pl-30 mt-10">
-            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">반도산전은 </span>
-            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">50</span>
-            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">
-              개가 넘는 <br />
-              신뢰받는 기업과 함께<br /><br />
-              고객의 가치실현을 <br />
-            </span>
-            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">협력</span>
-            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">으로 이끌어내고 있습니다.</span>
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div className={`max-w-7xl mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+        
+        {/* 상단 소개 영역 */}
+        <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-12 mb-12">
+          <div className="w-full lg:w-1/2 text-center lg:text-left">
+            <div className="space-y-2">
+              <p className="text-lg sm:text-xl lg:text-2xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">
+                반도산전은 <span className="text-blue-900 font-bold">50</span>개가 넘는
+              </p>
+              <p className="text-lg sm:text-xl lg:text-2xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-800">
+                신뢰받는 기업과 함께
+              </p>
+              <p className="text-lg sm:text-xl lg:text-2xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-800 mt-4">
+                고객의 가치실현을 <span className="text-blue-900 font-bold">협력</span>으로 이끌어내고 있습니다.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2">
+            <img
+              className="w-full h-64 sm:h-80 lg:h-96 object-cover object-center rounded-lg shadow-lg"
+              src="/image/협력사.jpg"
+              alt="협력사 이미지"
+            />
           </div>
         </div>
-        <div className="flex-1">
-          <img
-            className="w-full h-[350px] object-cover object-center"
-            src="/image/협력사.jpg"
-          />
+
+        {/* 카드 목록 */}
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5 lg:gap-6">
+          {currentItems.map((partner, index) => (
+            <div
+              key={index}
+              className="flex justify-center items-center h-32 sm:h-40 lg:h-48 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-200"
+            >
+              <img 
+                className="max-w-[80%] max-h-[80%] object-contain" 
+                src={partner.imageUrl} 
+                alt={`협력사 ${index + 1}`} 
+              />
+            </div>
+          ))}
         </div>
-      </div>
 
-      {/* 카드 목록 */}
-      <div className="grid grid-cols-4 gap-5 mt-10 mb-4">
-        {currentItems.map((partner, index) => (
-          <div
-            key={index}
-            className="flex justify-center items-center h-72 bg-white outline outline-offset-[-1px] outline-zinc-300"
-          >
-            <img className="w-50" src={partner.imageUrl} alt={`협력사 ${index}`} />
+        {/* 페이지네이션 */}
+        {totalItems > ITEMS_PER_PAGE && (
+          <div className="flex justify-center" ref={paginationRef}>
+            <Pagination
+              currentPage={currentPage}
+              totalItems={totalItems}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onPageChange={handlePageChange}
+            />
           </div>
-        ))}
+        )}
       </div>
-
-      {/* 페이지네이션 */}
-      {totalItems > ITEMS_PER_PAGE && (
-        <div className="flex justify-center pb-10" ref={paginationRef}>
-          <Pagination
-            currentPage={currentPage}
-            totalItems={totalItems}
-            itemsPerPage={ITEMS_PER_PAGE}
-            onPageChange={handlePageChange}
-          />
-        </div>
-      )}
     </div>
   );
 };

src/pages/business/Landmarks.tsx

@@ -4,29 +4,31 @@ import {getPaginatedList} from "@/utils/pagination";
 import {ProjectModal} from "@/components/ProjectModal";
 import projectList from "@/data/project";
 import type {MajorProject} from "@/data/project";
+import {useScrollAnimation} from "@/hooks/useScrollAnimation";
 
 const ITEMS_PER_PAGE = 12;
 
 const Landmarks = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const [selectedItem, setSelectedItem] = useState<MajorProject | null>(null); // 클릭된 카드
+  const [selectedItem, setSelectedItem] = useState<MajorProject | null>(null);
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
 
   const paginatedList = getPaginatedList<MajorProject>(projectList, currentPage, ITEMS_PER_PAGE);
 
   return (
-    <div>
-      <div className="relative max-w-7xl mx-auto grid grid-cols-3 gap-x-8 gap-y-10 mt-10">
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div className={`relative max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 gap-y-6 sm:gap-y-8 lg:gap-y-10 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
         {paginatedList.map((project, index) => (
           <div
             key={index}
-            className="relative shadow-lg group cursor-pointer"
+            className="relative shadow-lg group cursor-pointer overflow-hidden"
             onClick={() => {
               setSelectedItem(project);
               setIsOpen(true);
             }}
           >
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60"/>
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 z-[1]"/>
 
             <img
               src={project.imageUrl}
@@ -34,28 +36,42 @@ const Landmarks = () => {
               className="w-full aspect-[4/3] object-cover"
             />
 
-            <div className="">
-              <h3
-                className='absolute z-10 left-6 top-[77%] group-hover:top-[30%] transition-all duration-500 ease-in-out text-lg text-white font-semibold'>
-                {project.title}
-              </h3>
-              <div className="absolute z-10 left-6 top-[85%] text-xs text-white leading-7">MORE +</div>
+            {/* 제목 영역 */}
+            <div className="absolute inset-x-0 bottom-0 z-20 p-2 sm:p-4 lg:p-6">
+              <div className="space-y-1 sm:space-y-2">
+                <h3 className='text-sm sm:text-base lg:text-lg text-white font-semibold font-["Noto_Sans_KR"] antialiased leading-tight' 
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: '2',
+                      WebkitBoxOrient: 'vertical',
+                      wordBreak: 'keep-all',
+                      overflowWrap: 'break-word'
+                    }}>
+                  {project.title}
+                </h3>
+                <div className="text-xs text-white/80 font-medium font-['Noto_Sans_KR'] antialiased">MORE +</div>
+              </div>
             </div>
 
-            <div
-              className="absolute inset-0 bg-gradient-to-t from-black/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out flex flex-col justify-center">
-              {project.description && (
-                <div
-                  className="absolute left-6 right-6 top-[60%] group-hover:top-[40%] transition-all duration-500 ease-in-out">
-                  <p className="text-sm text-white leading-8 whitespace-pre-line">
-                    발주처 : {project.client}
-                  </p>
-                  <p className="text-sm text-white leading-8 whitespace-pre-line">
-                    {project.description}
-                  </p>
-                  <p className="text-sm text-white leading-8 whitespace-pre-line">
-                    계약금액 : {project.contractAmount}
-                  </p>
+            {/* 호버 시 상세 정보 */}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-[3] flex flex-col justify-center">
+              {(project.description || project.client || project.contractAmount) && (
+                <div className="px-4 lg:px-6 space-y-2">
+                  {project.client && (
+                    <p className="text-sm text-white leading-6 font-['Noto_Sans_KR'] antialiased">
+                      발주처 : {project.client}
+                    </p>
+                  )}
+                  {project.description && (
+                    <p className="text-sm text-white leading-6 font-['Noto_Sans_KR'] antialiased">
+                      {project.description}
+                    </p>
+                  )}
+                  {project.contractAmount && (
+                    <p className="text-sm text-white leading-6 font-['Noto_Sans_KR'] antialiased">
+                      계약금액 : {project.contractAmount}
+                    </p>
+                  )}
                 </div>
               )}
             </div>

src/pages/business/Sections.tsx

@@ -3,32 +3,28 @@ import businessItems from "@/data/business";
 import type {BusinessItem} from "@/data/business";
 import DarkOverlay from "@/components/common/DarkOverlay";
 import IndicatorDots from "@/components/common/IndicatorDots";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
 
 const Sections = () => {
   const [selectedItem, setSelectedItem] = useState<BusinessItem | null>(null);
   const [currentSubIndex, setCurrentSubIndex] = useState(0);
+  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });
 
   const handleSelectItem = (item: BusinessItem) => {
     setSelectedItem(item);
-    setCurrentSubIndex(0); // 새 항목 선택 시 초기화
+    setCurrentSubIndex(0);
   };
 
   const handlePrev = () => {
     const images = selectedItem?.subImages;
     if (!images) return;
-
-    setCurrentSubIndex((prev) =>
-      prev === 0 ? images.length - 1 : prev - 1
-    );
+    setCurrentSubIndex((prev) => prev === 0 ? images.length - 1 : prev - 1);
   };
 
   const handleNext = () => {
     const images = selectedItem?.subImages;
     if (!images) return;
-
-    setCurrentSubIndex((prev) =>
-      prev === images.length - 1 ? 0 : prev + 1
-    );
+    setCurrentSubIndex((prev) => prev === images.length - 1 ? 0 : prev + 1);
   };
 
   const handleDotClick = (index: number) => {
@@ -38,90 +34,123 @@ const Sections = () => {
   const subImages = selectedItem?.subImages;
 
   return (
-    <div className="relative h-[1453px] px-6 py-10 flex-col">
-      {/* 썸네일 선택 */}
-      <div className="relative grid grid-cols-5 gap-2 w-7xl mx-auto h-44 bg-white">
-        {businessItems.map((item, index) => (
-          <div
-            key={index}
-            className="relative bg-gray-100 bg-cover bg-center cursor-pointer"
-            style={{backgroundImage: `url(${item.image})`}}
-            onClick={() => handleSelectItem(item)}
-          >
-            <DarkOverlay/>
-            <div className="relative p-2">
-              <div className="text-white text-lg font-semibold font-['Noto_Sans_KR']">{item.label}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {selectedItem && (
-        <>
-          {/* 타이틀 */}
-          <div className="h-60 flex flex-col my-10 justify-center items-center gap-9">
-            <div className="text-center text-neutral-800 text-5xl font-extrabold">{selectedItem.label}</div>
-            <div
-              className="text-center text-neutral-800 text-2xl font-medium whitespace-pre-line">{selectedItem.description}</div>
-          </div>
-
-          {/* 그림 및 설명 */}
-          <div className="max-w-7xl mx-auto h-96 bg-zinc-300/75 flex">
-            <div className="w-1/2 h-full">
-              <img className="w-full h-full object-cover" src={selectedItem.image} alt="image"/>
-            </div>
-            <div className="w-1/2 flex items-center justify-center px-4">
-              <div className="text-black text-xl font-light leading-9 whitespace-pre-line">
-                {selectedItem.description2}
+    <div ref={ref} className="px-4 sm:px-8 py-8 sm:py-12">
+      <div className={`transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+        
+        {/* 썸네일 선택 */}
+        <div className="max-w-7xl mx-auto mb-8 sm:mb-12">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-4">
+            {businessItems.map((item, index) => (
+              <div
+                key={index}
+                className="relative h-24 sm:h-32 lg:h-36 bg-cover bg-center cursor-pointer rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200"
+                style={{backgroundImage: `url(${item.image})`}}
+                onClick={() => handleSelectItem(item)}
+              >
+                <DarkOverlay/>
+                <div className="relative p-2 sm:p-3 h-full flex items-end">
+                  <div className="text-white text-xs sm:text-sm lg:text-base font-semibold font-['Noto_Sans_KR'] antialiased leading-tight">
+                    {item.label}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-
-          {/* 중간 타이틀 */}
-          <div className="h-28 flex flex-col justify-center my-10 items-center gap-9">
-            <div className="text-center text-neutral-800 text-2xl font-medium">대표공사실적</div>
+            ))}
           </div>
+        </div>
+
+        {selectedItem && (
+          <div className="space-y-8 sm:space-y-12 lg:space-y-16">
+            
+            {/* 타이틀 */}
+            <div className="text-center space-y-4 sm:space-y-6">
+              <h1 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold font-['Noto_Sans_KR'] antialiased text-gray-800">
+                {selectedItem.label}
+              </h1>
+              <p className="text-base sm:text-lg lg:text-xl font-medium font-['Noto_Sans_KR'] antialiased text-gray-600 whitespace-pre-line max-w-4xl mx-auto">
+                {selectedItem.description}
+              </p>
+            </div>
 
-          {Array.isArray(subImages) && subImages.length > 0 ? (
-            <div
-              className="relative max-w-7xl mx-auto h-128 bg-cover bg-center transition-all duration-500"
-              style={{backgroundImage: `url(${subImages[currentSubIndex]})`}}
-            >
-              <div className="flex items-end w-full h-full px-4 py-3 bg-gradient-to-b from-white/0 to-black/80 gap-0.5">
-                <div className="text-white text-2xl font-bold">BNK 부산은행 전산 & 데이터센터</div>
+            {/* 그림 및 설명 */}
+            <div className="max-w-7xl mx-auto">
+              <div className="flex flex-col lg:flex-row bg-gray-100 rounded-lg overflow-hidden shadow-lg">
+                <div className="w-full lg:w-1/2 h-64 sm:h-80 lg:h-96">
+                  <img className="w-full h-full object-cover" src={selectedItem.image} alt={selectedItem.label}/>
+                </div>
+                <div className="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-8 lg:p-12">
+                  <div className="text-sm sm:text-base lg:text-lg font-medium font-['Noto_Sans_KR'] antialiased text-gray-700 leading-relaxed whitespace-pre-line">
+                    {selectedItem.description2}
+                  </div>
+                </div>
               </div>
+            </div>
 
-              <div className="flex justify-center mt-5 pb-5">
-                <IndicatorDots
-                  count={subImages.length}
-                  activeIndex={currentSubIndex}
-                  onClick={handleDotClick}
-                  activeColorClass="bg-blue-900"
-                  inactiveColorClass="bg-blue-900/20"
-                />
-              </div>
+            {/* 중간 타이틀 */}
+            <div className="text-center">
+              <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-['Noto_Sans_KR'] antialiased text-gray-800">
+                대표공사실적
+              </h2>
+              <div className="w-20 h-1 bg-blue-900 mx-auto mt-4"></div>
+            </div>
 
-              <div className="absolute left-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
-                <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center cursor-pointer"
-                     onClick={handlePrev}>
-                  <span className="text-black text-lg font-thin">{'<'}</span>
+            {/* 이미지 슬라이더 */}
+            {Array.isArray(subImages) && subImages.length > 0 ? (
+              <div className="max-w-7xl mx-auto">
+                <div className="relative">
+                  <div
+                    className="relative h-64 sm:h-80 lg:h-96 xl:h-[30rem] bg-cover bg-center rounded-lg overflow-hidden shadow-lg transition-all duration-500"
+                    style={{backgroundImage: `url(${subImages[currentSubIndex]})`}}
+                  >
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
+                    
+                    <div className="absolute bottom-4 sm:bottom-6 left-4 sm:left-6 right-4 sm:right-6">
+                      <h3 className="text-white text-lg sm:text-xl lg:text-2xl font-bold font-['Noto_Sans_KR'] antialiased">
+                        BNK 부산은행 전산 & 데이터센터
+                      </h3>
+                    </div>
+
+                    {/* 네비게이션 버튼 */}
+                    {subImages.length > 1 && (
+                      <>
+                        <button 
+                          className="absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 bg-white/80 hover:bg-white rounded-full flex items-center justify-center cursor-pointer shadow-lg transition-colors"
+                          onClick={handlePrev}
+                        >
+                          <span className="text-gray-800 text-lg sm:text-xl">{'<'}</span>
+                        </button>
+                        
+                        <button 
+                          className="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 bg-white/80 hover:bg-white rounded-full flex items-center justify-center cursor-pointer shadow-lg transition-colors"
+                          onClick={handleNext}
+                        >
+                          <span className="text-gray-800 text-lg sm:text-xl">{'>'}</span>
+                        </button>
+                      </>
+                    )}
+                  </div>
+
+                  {/* 인디케이터 */}
+                  {subImages.length > 1 && (
+                    <div className="flex justify-center mt-6">
+                      <IndicatorDots
+                        count={subImages.length}
+                        activeIndex={currentSubIndex}
+                        onClick={handleDotClick}
+                        activeColorClass="bg-blue-900"
+                        inactiveColorClass="bg-blue-900/20"
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
-
-              <div className="absolute right-10 top-1/2 -translate-y-1/2 w-24 h-24 flex items-center justify-center">
-                <div className="w-14 h-14 bg-zinc-300/75 flex items-center justify-center cursor-pointer"
-                     onClick={handleNext}>
-                  <span className="text-black text-lg font-thin">{'>'}</span>
-                </div>
+            ) : (
+              <div className="max-w-7xl mx-auto flex items-center justify-center bg-gray-100 min-h-[200px] sm:min-h-[300px] rounded-lg">
+                <span className="text-gray-500 text-lg sm:text-xl font-medium font-['Noto_Sans_KR'] antialiased">이미지가 없습니다</span>
               </div>
-            </div>
-          ) : (
-            <div className="max-w-7xl mx-auto flex items-center justify-center bg-zinc-200 min-h-[300px] mb-10">
-              <span className="text-gray-500 text-xl">이미지가 없습니다</span>
-            </div>
-          )}
-        </>
-      )}
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };