diff --git a/src/css/common.css b/src/css/common.css index a77a016..188a753 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1028,7 +1028,7 @@ body{overflow-x:hidden;} .mt-intro__cta:hover { gap:14px; } /* ── 벤다이어그램 ── */ -.mt-venn { position:relative; width:100%; max-width:640px; } +.mt-venn { position:relative; width:100%; max-width:600px; } .mt-venn__svg { width:100%; height:auto; display:block; overflow:visible; } /* ── KPI 바 ── */ @@ -1254,3 +1254,101 @@ body{overflow-x:hidden;} .utm-cap__card-tags { list-style: none; display: flex; flex-direction: column; gap: 7px; } .utm-cap__card-tags li { font-size: 13px; color: #666; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } .utm-cap__card-tags li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--cap-color); flex-shrink: 0; margin-top: 6px; opacity: 0.6; } + +@media (max-width: 1200px) { + .utm-intro__cards { grid-template-columns: repeat(2, 1fr); } + .utm-intro__card { width: 100%; } + + .utm-what__body { grid-template-columns: 180px 1fr 180px; gap: 12px; } + + .utm-evo { gap: 48px; padding: 80px 32px; } + .utm-evo__left { flex: 0 0 340px; } + + .utm-cap__cards { grid-template-columns: repeat(3, 1fr); } +} + +@media (max-width: 1024px) { + .utm-intro { gap: 36px; padding: 60px 0; } + .utm-intro__title { font-size: 32px; } + .utm-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } + .utm-intro__card { width: 100%; height: auto; min-height: 180px; } + + .utm-what { padding: 80px 0; } + .utm-what__title { font-size: 32px; } + .utm-what__body { grid-template-columns: 160px 1fr 160px; gap: 10px; } + .utm-what__card { height: 68px; padding: 0 12px; } + .utm-what__card-label { font-size: 13px; } + .utm-what__img-wrap { min-height: 440px; } + + .utm-evo { flex-direction: column; gap: 40px; padding: 80px 24px; } + .utm-evo__left { flex: 0 0 auto; width: 100%; } + .utm-evo__title { font-size: 28px; } + + .utm-cap { padding: 60px 0; } + .utm-cap__title { font-size: 32px; } + .utm-cap__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 24px; } +} + +@media (max-width: 768px) { + .utm-intro { gap: 28px; padding: 48px 0; } + .utm-intro__title { font-size: 26px; } + .utm-intro__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; } + .utm-intro__card { padding: 20px 16px 24px; min-height: 160px; } + .utm-intro__card-num { font-size: 40px; } + .utm-intro__card-label { font-size: 15px; } + + .utm-what { padding: 60px 0; } + .utm-what__top { margin-bottom: 40px; } + .utm-what__title { font-size: 26px; } + .utm-what__body { grid-template-columns: 1fr; gap: 20px; } + .utm-what__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; } + .utm-what__card { height: 52px; flex: 1 1 calc(50% - 5px); min-width: 140px; } + .utm-what__card--right { flex-direction: row; } + .utm-what__mockup { order: -1; } + .utm-what__img-wrap { min-height: 300px; } + + .utm-evo { padding: 60px 0; } + .utm-evo__title { font-size: 24px; } + .utm-evo__item { grid-template-columns: 1fr 44px; } + .utm-evo__empty { display: none; } + .utm-evo__card-wrap--right { padding-left: 0; grid-column: 1; grid-row: 1; } + .utm-evo__dot-wrap { grid-column: 2; grid-row: 1; } + .utm-evo__card { flex-direction: column; align-items: flex-start; gap: 12px; } + .utm-evo__card-img { width: 80px; height: 80px; } + .utm-evo__line-bg { left: calc(100% - 22px); } + .utm-evo__line-fill { left: calc(100% - 22px); } + + .utm-cap { padding: 48px 0; } + .utm-cap__title { font-size: 26px; } + .utm-cap__cards { grid-template-columns: 1fr; gap: 10px; padding: 20px; } + .utm-cap__card-num { font-size: 52px; } + .utm-cap__card-name { font-size: 16px; } +} + +@media (max-width: 480px) { + .utm-intro__title { font-size: 22px; } + .utm-intro__cards { grid-template-columns: 1fr 1fr; gap: 8px; } + .utm-intro__card { padding: 16px 12px 20px; } + .utm-intro__card-label { font-size: 13px; } + + .utm-what__title { font-size: 22px; } + .utm-what__card { flex: 1 1 100%; } + .utm-what__img-wrap { min-height: 240px; } + + .drone__badge { min-width: 110px; } + .drone__badge-id { font-size: 10px; } + .drone__badge-status { font-size: 9px; } + + .utm-evo__title { font-size: 20px; } + .utm-evo__item { grid-template-columns: 1fr 36px; padding: 28px 0; } + .utm-evo__dot { width: 36px; height: 36px; font-size: 11px; } + .utm-evo__card { padding: 14px; } + .utm-evo__card-img { width: 64px; height: 64px; } + .utm-evo__card-name { font-size: 14px; } + .utm-evo__card-desc { font-size: 12px; } + + .utm-cap__title { font-size: 22px; } + .utm-cap__cards { padding: 16px; } + .utm-cap__card { padding: 20px 16px; } +} + \ No newline at end of file