feat : utm/uatm 반응형 추가

src/css/common.css

@@ -1292,8 +1292,8 @@ body{overflow-x:hidden;}
 @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__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; margin-left: 0; }
+  .utm-intro__card { width: 100%; height: auto; min-height: 160px; padding: 28px 24px 12px; }
   .utm-intro__card-num { font-size: 40px; }
   .utm-intro__card-label { font-size: 15px; }
  
@@ -1301,23 +1301,40 @@ body{overflow-x:hidden;}
   .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__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
+  .utm-what__card { height: 52px; flex: 1 1 calc(50% - 5px); min-width: 140px; justify-content: flex-start;}
   .utm-what__card--right { flex-direction: row; }
+  .utm-what__card--right .utm-what__card-icon { order: -1; }
   .utm-what__mockup { order: -1; }
   .utm-what__img-wrap { min-height: 300px; }
  
+  .drone--1 { left: 35% !important; }
+  .drone--2 { left: 5% !important; }
+  .drone--3 { top: 24% !important; right: 20% !important; }
+
+  .drone__badge { min-width: 90px; }
+  .drone__badge-id { font-size: 9px; }
+  .drone__badge-status { font-size: 8px; }
+
+
+
   .utm-evo { padding: 60px 0; }
   .utm-evo__title { font-size: 24px; }
-  .utm-evo__item { grid-template-columns: 1fr 44px; }
+  .utm-evo__item { grid-template-columns: 44px 1fr; }
   .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__dot-wrap { grid-column: 1; 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-evo__line-bg { left: 22px; }
+  .utm-evo__line-fill { left: 22px; }
+
+ .utm-evo__card-wrap--left { padding-right: 0; }
+
+  .utm-evo__card-wrap--left,
+  .utm-evo__card-wrap--right { grid-column: 2; grid-row: 1; padding: 0 0 0 16px; }
+  .utm-evo__card { width: 100%; box-sizing: border-box; }
+
   .utm-cap { padding: 48px 0; }
   .utm-cap__title { font-size: 26px; }
   .utm-cap__cards { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
@@ -1327,26 +1344,40 @@ body{overflow-x:hidden;}
  
 @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-what__cards { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
   .utm-intro__card-label { font-size: 13px; }
  
   .utm-what__title { font-size: 22px; }
-  .utm-what__card { flex: 1 1 100%; }
+  .utm-what__card { flex: 1 1 calc(50% - 5px); min-width: 0; justify-content: flex-start;}
   .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-what__card--right { flex-direction: row;}
+  .utm-what__card--right .utm-what__card-icon { order: -1; }
+  .drone--1 { left: 35% !important; }
+  .drone--2 { left: 5% !important; }
+  .drone--3 { top: 24% !important; right: 20% !important; }
+
+  .drone__badge { min-width: 90px; }
+  .drone__badge-id { font-size: 9px; }
+  .drone__badge-status { font-size: 8px; }
+  
   .utm-evo__title { font-size: 20px; }
-  .utm-evo__item { grid-template-columns: 1fr 36px; padding: 28px 0; }
+  .utm-evo__item { grid-template-columns: 36px 1fr; }
   .utm-evo__dot { width: 36px; height: 36px; font-size: 11px; }
+  .utm-evo__dot-wrap { grid-column: 1; grid-row: 1; }
+
   .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-evo__card-wrap--left { padding-right: 0; }
+  .utm-evo__card-wrap--left,
+  .utm-evo__card-wrap--right { grid-column: 2; grid-row: 1; padding: 0 0 0 12px; }
+  .utm-evo__card { width: 100%; box-sizing: border-box; }
+
+  .utm-evo__line-bg { left: 18px; }
+  .utm-evo__line-fill { left: 18px; }
+
   .utm-cap__title { font-size: 22px; }
   .utm-cap__cards { padding: 16px; }
   .utm-cap__card { padding: 20px 16px; }