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.5s; }
-.ibe-channel__svg path:nth-child(6) { animation-delay: 0.8s; }
-
+.ibe-channel__svg path:nth-child(5) { animation-delay: 0.3s; }
+.ibe-channel__svg path:nth-child(6) { animation-delay: 0.6s; }
 .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__center-img { width: 240px; }
+  .ibe-channel__card { width: calc(50% - 6px); height: 72px; }
+  .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: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+    // { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    // { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
   ];
   return (
     <article ref={ref}>
@@ -179,44 +179,46 @@ 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__col ibe-channel__col--left">
-                {[
-                  { img: "ibe_pal_icon1.png", label: "항공사" },
-                  { img: "ibe_pal_icon2.png", label: "GDS" },
-                  { img: "ibe_pal_icon3.png", label: "호텔" },
-                ].map((item, i) => (
-                  <motion.div key={i} className="ibe-channel__card">
-                    <img
-                      src={`${basePath}images/${item.img}`}
-                      alt={item.label}
-                    />
-                    <span>{item.label}</span>
-                  </motion.div>
-                ))}
-              </div>
+              <div className="ibe-channel__cols-wrap">
+                <div className="ibe-channel__col ibe-channel__col--left">
+                  {[
+                    { img: "ibe_pal_icon1.png", label: "항공사" },
+                    { img: "ibe_pal_icon2.png", label: "GDS" },
+                    { img: "ibe_pal_icon3.png", label: "호텔" },
+                  ].map((item, i) => (
+                    <motion.div key={i} className="ibe-channel__card">
+                      <img
+                        src={`${basePath}images/${item.img}`}
+                        alt={item.label}
+                      />
+                      <span>{item.label}</span>
+                    </motion.div>
+                  ))}
+                </div>
 
-              <div className="ibe-channel__center">
-                <img
-                  src={`${basePath}images/ibe_pal_item.png`}
-                  alt="PAL IBE"
-                  className="ibe-channel__center-img"
-                />
-              </div>
+                <div className="ibe-channel__center">
+                  <img
+                    src={`${basePath}images/ibe_pal_item.png`}
+                    alt="PAL IBE"
+                    className="ibe-channel__center-img"
+                  />
+                </div>
 
-              <div className="ibe-channel__col ibe-channel__col--right">
-                {[
-                  { img: "ibe_pal_icon4.png", label: "결제 시스템" },
-                  { img: "ibe_pal_icon5.png", label: "여행사/OTA" },
-                  { img: "ibe_pal_icon6.png", label: "보험" },
-                ].map((item, i) => (
-                  <motion.div key={i} className="ibe-channel__card">
-                    <img
-                      src={`${basePath}images/${item.img}`}
-                      alt={item.label}
-                    />
-                    <span>{item.label}</span>
-                  </motion.div>
-                ))}
+                <div className="ibe-channel__col ibe-channel__col--right">
+                  {[
+                    { img: "ibe_pal_icon4.png", label: "결제 시스템" },
+                    { img: "ibe_pal_icon5.png", label: "여행사/OTA" },
+                    { img: "ibe_pal_icon6.png", label: "보험" },
+                  ].map((item, i) => (
+                    <motion.div key={i} className="ibe-channel__card">
+                      <img
+                        src={`${basePath}images/${item.img}`}
+                        alt={item.label}
+                      />
+                      <span>{item.label}</span>
+                    </motion.div>
+                  ))}
+                </div>
               </div>
             </motion.div>
           </section>