feat : 아이콘 변경 및 반응형 추가

src/css/common.css

@@ -897,20 +897,40 @@ body{overflow-x:hidden;}
 
 .ibe-channel__svg path { fill: none; stroke: rgba(139,92,246,0.35); stroke-width: 2; stroke-dasharray: 12 6; animation: ibe-flow 2s linear infinite; }
 
+.ibe-channel__svg path { fill: none; stroke: rgba(139,92,246,0.35); stroke-width: 2; stroke-dasharray: 12 6; animation: ibe-flow 2s linear infinite; }
+
+
+.ibe-channel__svg path:nth-child(1),
+.ibe-channel__svg path:nth-child(2),
+.ibe-channel__svg path:nth-child(3) { animation-name: ibe-flow-right; }
+
+.ibe-channel__svg path:nth-child(4),
+.ibe-channel__svg path:nth-child(5),
+.ibe-channel__svg path:nth-child(6) { animation-name: ibe-flow-left; }
+
 .ibe-channel__svg path:nth-child(2) { animation-delay: 0.3s; }
 .ibe-channel__svg path:nth-child(3) { animation-delay: 0.6s; }
-.ibe-channel__svg path:nth-child(4) { animation-delay: 0.2s; }
+.ibe-channel__svg path:nth-child(5) { animation-delay: 0.3s; }
-.ibe-channel__svg path:nth-child(5) { animation-delay: 0.5s; }
+.ibe-channel__svg path:nth-child(6) { animation-delay: 0.6s; }
-.ibe-channel__svg path:nth-child(6) { animation-delay: 0.8s; }
-
 .ibe-channel__svg circle { fill: #8b5cf6; opacity: 0.7; }
+.ibe-channel__cols-wrap { display: contents; }
 
 @media (max-width: 1024px) {
-  .ibe-channel__diagram { width: 100%; height: auto; grid-template-columns: 1fr; gap: 24px; }
+  .ibe-channel__diagram { width: 100%; height: auto; display: flex; flex-direction: column; gap: 24px; }
   .ibe-channel__svg { display: none; }
-  .ibe-channel__col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
+  .ibe-channel__center { display: none; }
+  .ibe-channel__col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
   .ibe-channel__col--left, .ibe-channel__col--right { align-items: center; }
-  .ibe-channel__card { width: 220px; height: 72px; }
+  .ibe-channel__card { width: calc(50% - 6px); height: 72px; }
-  .ibe-channel__center-img { width: 240px; }
+  .ibe-channel__cols-wrap { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
+  .ibe-channel__cols-wrap .ibe-channel__col { flex: 1; min-width: 0; flex-direction: column; }
+
+}
+
+@media (max-width: 640px) {
+  .ibe-channel__card { width: 100%; height: 64px; padding: 0 16px; gap: 10px; }
+  .ibe-channel__card img { width: 32px; height: 32px; }
+  .ibe-channel__card span { font-size: 0.85rem; }
 }
-@keyframes ibe-flow { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
+@keyframes ibe-flow-right { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }
+@keyframes ibe-flow-left { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 36; } }

src/pages/solution/IbePage.jsx

@@ -16,8 +16,8 @@ function IbePage() {
   const SOLUTION_NAV = [
     { label: "비행상황관리 시스템", to: "/solution/flight-control" },
     { label: "IBE", to: "/solution/ibe" },
-    { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    // { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
-    { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+    // { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
   ];
   return (
     <article ref={ref}>
@@ -179,6 +179,7 @@ function IbePage() {
                 <circle cx="1190" cy="215" r="4" className="ibe-channel__dot" />
                 <circle cx="1190" cy="335" r="4" className="ibe-channel__dot" />
               </svg>
+              <div className="ibe-channel__cols-wrap">
                 <div className="ibe-channel__col ibe-channel__col--left">
                   {[
                     { img: "ibe_pal_icon1.png", label: "항공사" },
@@ -218,6 +219,7 @@ function IbePage() {
                     </motion.div>
                   ))}
                 </div>
+              </div>
             </motion.div>
           </section>
         </div>