diff --git a/src/css/common.css b/src/css/common.css index 3bbecf3..171b405 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -788,64 +788,32 @@ body{overflow-x:hidden;} 반응형 ════════════════ */ @media (max-width: 1024px) { - .fc-overview { - min-height: 420px; - margin: 2rem 0 3rem; - } - .fc-overview__content { - padding: 3rem 2.5rem 3.5rem; - } - .fc-overview__title-inner { - font-size: 1.5rem; - } - .fc-overview__bottom { - grid-template-columns: 1fr; - gap: 1.25rem; - } - .fc-stats { - grid-template-columns: repeat(2, 1fr); - } - .fc-stat-item:nth-child(2) { - border-right: none; - } - .fc-stat-item:nth-child(1), - .fc-stat-item:nth-child(2) { - border-bottom: 1px solid var(--color-primary-soft-border); - } - .fc-domains__grid { - grid-template-columns: repeat(3, 1fr); - } + .fc-overview { min-height: 420px; margin: 2rem 0 3rem; } + .fc-overview__content { padding: 3rem 2.5rem 3.5rem; } + .fc-overview__title-inner { font-size: 1.5rem; } + .fc-overview__bottom { grid-template-columns: 1fr; gap: 1.25rem; } + .fc-stats { grid-template-columns: repeat(2, 1fr); } + .fc-stat-item:nth-child(2) { border-right: none; } + .fc-stat-item:nth-child(1), .fc-stat-item:nth-child(2) { border-bottom: 1px solid var(--color-primary-soft-border); } + .fc-domains__grid { grid-template-columns: repeat(3, 1fr); } .fc-functions__body { flex-direction: column; gap: 2rem; } - - .fc-func-display { - flex: none; - width: 100%; - max-width: 500px; - } - .fc-func-list{ - width: 100%; - } - .fc-flow__row { - flex-direction: column; - gap: 1rem; - } - .fc-flow__item { - flex-direction: row; - text-align: left; - align-items: flex-start; - gap: 1rem; - } - .fc-flow__arrow { - display: none; - } + .fc-func-display { flex: none; width: 100%; max-width: 500px; } + .fc-func-list { width: 100%; } + .fc-flow__row { flex-direction: column; gap: 0; } + .fc-flow__item { flex-direction: row; text-align: left; align-items: center; gap: 1.25rem; padding: 1.25rem 1rem; border-bottom: 1px solid var(--color-primary-soft-border); transition: background .2s; width: 100%; } + .fc-flow__item:last-child { border-bottom: none; } + .fc-flow__item:hover { background: var(--color-primary-soft); } + .fc-flow__step { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; letter-spacing: .05em; } + .fc-flow__text { display: flex; flex-direction: column; gap: .25rem; } + .fc-flow__label { font-size: .92rem; } + .fc-flow__desc { font-size: .76rem; } + .fc-flow__arrow { display: none; } .fc-highlight { grid-template-columns: 1fr; gap: 48px; } .fc-highlight__item { flex-direction: column; } .fc-highlight__img-wrap { width: 100%; } - } - @media (max-width: 640px) { .fc-overview { border-radius: .875rem; @@ -866,7 +834,7 @@ body{overflow-x:hidden;} .fc-intro { flex-direction: column; } .fc-intro__right { width: 100%; } .fc-intro__title { font-size: 1.5rem; } - .fc-highlight { gap: 32px; margin-bottom: 5rem; } + .fc-highlight { gap: 32px; margin-bottom:0rem; } .fc-highlight__item { gap: 16px; } .fc-highlight__title { font-size: 1.3rem; } .fc-highlight__desc { font-size: 0.82rem; } @@ -950,73 +918,17 @@ body{overflow-x:hidden;} .ibe-booking__desc { font-size: 12px; color: #888; line-height: 1.7; text-align: center; } @media (max-width: 768px) { - .ibe-booking__flow { - flex-direction: column; - align-items: flex-start; - gap: 0; - padding-left: 16px; - } - - .ibe-booking__item { - flex-direction: row; - align-items: center; - gap: 20px; - width: 100%; - } - - .ibe-booking__circle { - flex-shrink: 0; - width: 64px; - height: 64px; - margin-bottom: 0; - } - - .ibe-booking__text-wrap { - display: flex; - flex-direction: column; - } - + .ibe-booking__flow { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 16px; } + .ibe-booking__item { flex-direction: row; align-items: center; gap: 20px; width: 100%; } + .ibe-booking__circle { flex-shrink: 0; width: 64px; height: 64px; margin-bottom: 0; } + .ibe-booking__text-wrap { display: flex; flex-direction: column; } .ibe-booking__num { margin-bottom: 2px; } .ibe-booking__desc { text-align: left; } - - /* 커넥터: 원(64px) 중심(32px)에 맞춰 세로선 */ - .ibe-booking__connector { - flex: none; - width: 2px; - height: 40px; - margin: 4px 0 4px 31px; /* 31px = 원 중심 32px - 선 두께 1px */ - position: relative; - } - - .ibe-booking__line-bg { - position: absolute; - top: 0; left: 0; - width: 1px; height: 100%; - right: auto; - background: rgba(139, 92, 246, 0.15); - } - - .ibe-booking__line-flow { - position: absolute; - top: 0; left: 0; - width: 2px; height: 100%; - right: auto; - overflow: hidden; - } - - .ibe-booking__line-flow::after { - content: ''; - position: absolute; - left: 0; - top: -40%; - width: 100%; - height: 40%; - background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.8), transparent); - animation: ibe-booking-flow-v 1.8s linear infinite; - animation-delay: var(--delay, 0s); - } + .ibe-booking__connector { flex: none; width: 2px; height: 40px; margin: 4px 0 4px 31px; position: relative; } + .ibe-booking__line-bg { position: absolute; top: 0; left: 0; width: 1px; height: 100%; right: auto; background: rgba(139,92,246,0.15); } + .ibe-booking__line-flow { position: absolute; top: 0; left: 0; width: 2px; height: 100%; right: auto; overflow: hidden; } + .ibe-booking__line-flow::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, rgba(139,92,246,0.8), transparent); animation: ibe-booking-flow-v 1.8s linear infinite; animation-delay: var(--delay, 0s); } } - @keyframes ibe-booking-flow-v { from { top: -40%; } to { top: 100%; }