diff --git a/public/images/ibe_intro_icon1.png b/public/images/ibe_intro_icon1.png index 730477a..466485c 100644 Binary files a/public/images/ibe_intro_icon1.png and b/public/images/ibe_intro_icon1.png differ diff --git a/public/images/ibe_intro_icon2.png b/public/images/ibe_intro_icon2.png index b79e451..4bc1bfc 100644 Binary files a/public/images/ibe_intro_icon2.png and b/public/images/ibe_intro_icon2.png differ diff --git a/public/images/ibe_intro_icon3.png b/public/images/ibe_intro_icon3.png index 4e1eb0f..f358442 100644 Binary files a/public/images/ibe_intro_icon3.png and b/public/images/ibe_intro_icon3.png differ diff --git a/public/images/ibe_intro_icon4.png b/public/images/ibe_intro_icon4.png index f54ef79..44025e3 100644 Binary files a/public/images/ibe_intro_icon4.png and b/public/images/ibe_intro_icon4.png differ diff --git a/public/images/ibe_pal_icon1.png b/public/images/ibe_pal_icon1.png index efe4237..3ba32d8 100644 Binary files a/public/images/ibe_pal_icon1.png and b/public/images/ibe_pal_icon1.png differ diff --git a/public/images/ibe_pal_icon2.png b/public/images/ibe_pal_icon2.png index 721f001..139b50f 100644 Binary files a/public/images/ibe_pal_icon2.png and b/public/images/ibe_pal_icon2.png differ diff --git a/public/images/ibe_pal_icon3.png b/public/images/ibe_pal_icon3.png index 92b8fda..5deea1e 100644 Binary files a/public/images/ibe_pal_icon3.png and b/public/images/ibe_pal_icon3.png differ diff --git a/public/images/ibe_pal_icon4.png b/public/images/ibe_pal_icon4.png index 40e3487..c0dc502 100644 Binary files a/public/images/ibe_pal_icon4.png and b/public/images/ibe_pal_icon4.png differ diff --git a/public/images/ibe_pal_icon5.png b/public/images/ibe_pal_icon5.png index 85d71af..c0e345d 100644 Binary files a/public/images/ibe_pal_icon5.png and b/public/images/ibe_pal_icon5.png differ diff --git a/public/images/ibe_pal_icon6.png b/public/images/ibe_pal_icon6.png index ced7d31..37f24f2 100644 Binary files a/public/images/ibe_pal_icon6.png and b/public/images/ibe_pal_icon6.png differ diff --git a/src/css/common.css b/src/css/common.css index 5911b4d..f0cf784 100644 --- a/src/css/common.css +++ b/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; } } \ No newline at end of file diff --git a/src/pages/solution/IbePage.jsx b/src/pages/solution/IbePage.jsx index 31e371b..c664359 100644 --- a/src/pages/solution/IbePage.jsx +++ b/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 (
@@ -179,44 +179,46 @@ function IbePage() { -
- {[ - { img: "ibe_pal_icon1.png", label: "항공사" }, - { img: "ibe_pal_icon2.png", label: "GDS" }, - { img: "ibe_pal_icon3.png", label: "호텔" }, - ].map((item, i) => ( - - {item.label} - {item.label} - - ))} -
+
+
+ {[ + { img: "ibe_pal_icon1.png", label: "항공사" }, + { img: "ibe_pal_icon2.png", label: "GDS" }, + { img: "ibe_pal_icon3.png", label: "호텔" }, + ].map((item, i) => ( + + {item.label} + {item.label} + + ))} +
-
- PAL IBE -
+
+ PAL IBE +
-
- {[ - { img: "ibe_pal_icon4.png", label: "결제 시스템" }, - { img: "ibe_pal_icon5.png", label: "여행사/OTA" }, - { img: "ibe_pal_icon6.png", label: "보험" }, - ].map((item, i) => ( - - {item.label} - {item.label} - - ))} +
+ {[ + { img: "ibe_pal_icon4.png", label: "결제 시스템" }, + { img: "ibe_pal_icon5.png", label: "여행사/OTA" }, + { img: "ibe_pal_icon6.png", label: "보험" }, + ].map((item, i) => ( + + {item.label} + {item.label} + + ))} +