Browse Source

feat : 비행관리시스템 반응형 수정

remotes/origin/main
이시연 3 weeks ago
parent
commit
a225721605
  1. 144
      src/css/common.css

144
src/css/common.css

@ -788,64 +788,32 @@ body{overflow-x:hidden;}
반응형 반응형
*/ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.fc-overview { .fc-overview { min-height: 420px; margin: 2rem 0 3rem; }
min-height: 420px; .fc-overview__content { padding: 3rem 2.5rem 3.5rem; }
margin: 2rem 0 3rem; .fc-overview__title-inner { font-size: 1.5rem; }
} .fc-overview__bottom { grid-template-columns: 1fr; gap: 1.25rem; }
.fc-overview__content { .fc-stats { grid-template-columns: repeat(2, 1fr); }
padding: 3rem 2.5rem 3.5rem; .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-overview__title-inner { .fc-domains__grid { grid-template-columns: repeat(3, 1fr); }
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-functions__body { flex-direction: column; gap: 2rem; }
.fc-func-display { flex: none; width: 100%; max-width: 500px; }
.fc-func-display { .fc-func-list { width: 100%; }
flex: none; .fc-flow__row { flex-direction: column; gap: 0; }
width: 100%; .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%; }
max-width: 500px; .fc-flow__item:last-child { border-bottom: none; }
} .fc-flow__item:hover { background: var(--color-primary-soft); }
.fc-func-list{ .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; }
width: 100%; .fc-flow__text { display: flex; flex-direction: column; gap: .25rem; }
} .fc-flow__label { font-size: .92rem; }
.fc-flow__row { .fc-flow__desc { font-size: .76rem; }
flex-direction: column; .fc-flow__arrow { display: none; }
gap: 1rem;
}
.fc-flow__item {
flex-direction: row;
text-align: left;
align-items: flex-start;
gap: 1rem;
}
.fc-flow__arrow {
display: none;
}
.fc-highlight { grid-template-columns: 1fr; gap: 48px; } .fc-highlight { grid-template-columns: 1fr; gap: 48px; }
.fc-highlight__item { flex-direction: column; } .fc-highlight__item { flex-direction: column; }
.fc-highlight__img-wrap { width: 100%; } .fc-highlight__img-wrap { width: 100%; }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.fc-overview { .fc-overview {
border-radius: .875rem; border-radius: .875rem;
@ -866,7 +834,7 @@ body{overflow-x:hidden;}
.fc-intro { flex-direction: column; } .fc-intro { flex-direction: column; }
.fc-intro__right { width: 100%; } .fc-intro__right { width: 100%; }
.fc-intro__title { font-size: 1.5rem; } .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__item { gap: 16px; }
.fc-highlight__title { font-size: 1.3rem; } .fc-highlight__title { font-size: 1.3rem; }
.fc-highlight__desc { font-size: 0.82rem; } .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; } .ibe-booking__desc { font-size: 12px; color: #888; line-height: 1.7; text-align: center; }
@media (max-width: 768px) { @media (max-width: 768px) {
.ibe-booking__flow { .ibe-booking__flow { flex-direction: column; align-items: flex-start; gap: 0; padding-left: 16px; }
flex-direction: column; .ibe-booking__item { flex-direction: row; align-items: center; gap: 20px; width: 100%; }
align-items: flex-start; .ibe-booking__circle { flex-shrink: 0; width: 64px; height: 64px; margin-bottom: 0; }
gap: 0; .ibe-booking__text-wrap { display: flex; flex-direction: column; }
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__num { margin-bottom: 2px; }
.ibe-booking__desc { text-align: left; } .ibe-booking__desc { text-align: left; }
.ibe-booking__connector { flex: none; width: 2px; height: 40px; margin: 4px 0 4px 31px; position: relative; }
/* 커넥터: 원(64px) 중심(32px)에 맞춰 세로선 */ .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__connector { .ibe-booking__line-flow { position: absolute; top: 0; left: 0; width: 2px; height: 100%; right: auto; overflow: hidden; }
flex: none; .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); }
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);
}
} }
@keyframes ibe-booking-flow-v { @keyframes ibe-booking-flow-v {
from { top: -40%; } from { top: -40%; }
to { top: 100%; } to { top: 100%; }

Loading…
Cancel
Save