diff --git a/css/login.css b/css/login.css
index 0dc81843..c1aaf6d1 100644
--- a/css/login.css
+++ b/css/login.css
@@ -127,8 +127,75 @@ input::-webkit-input-placeholder {
     border-radius: .2rem;
 }
 
-#running_map{
-    overflow: hidden;
+#running_map {
     border: none;
-    width:700px;
+    width: 700px;
+}
+
+
+#map-subframe {
+    display: none;
+    width: 700px;
+}
+
+@media only screen and (min-width : 360px) {
+    #map-subframe {
+        display: block;
+        transform: scale(calc(330 / 700));
+        transform-origin: 350px 0px;
+        margin-bottom: -400px;
+    }
+}
+
+
+@media only screen and (min-width : 440px) {
+    #map-subframe {
+        transform: scale(calc(410 / 700));
+        margin-bottom: -300px;
+    }
+}
+
+@media only screen and (min-width : 480px) {
+    #map-subframe {
+        transform: scale(calc(450 / 700));
+        margin-bottom: -250px;
+    }
+}
+
+
+@media only screen and (min-width : 520px) {
+    #map-subframe {
+        transform: scale(calc(490 / 700));
+        margin-bottom: -200px;
+    }
+}
+
+@media only screen and (min-width : 576px) {
+    #map-subframe {
+        transform: scale(calc(546 / 700));
+        margin-bottom: -150px;
+    }
+}
+
+@media only screen and (min-width : 640px) {
+    #map-subframe {
+        transform: scale(calc(600/700));
+        margin-bottom: -100px;
+    }
+}
+
+
+@media only screen and (min-width : 700px) {
+    #map-subframe {
+        transform: scale(calc(670 / 700));
+        margin-bottom: -20px;
+    }
+}
+
+
+@media only screen and (min-width : 730px) {
+    #map-subframe {
+        transform: none;
+        margin-bottom: 0;
+    }
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index b3d3c979..86ea421c 100644
--- a/index.php
+++ b/index.php
@@ -80,8 +80,8 @@ foreach (ServConfig::getServerList() as $setting) {
         </div>
     </nav>
     <div class="container" style="margin-top:120px;">
-        <h1 class="row justify-content-md-center">삼국지 모의전투 HiDCHe</h1>
-        <div class="row justify-content-md-center">
+        <h1 class="row justify-content-center">삼국지 모의전투 HiDCHe</h1>
+        <div class="row justify-content-center">
             <div class="col" style="max-width:450px;">
                 <div class="card" id="login_card">
                     <h3 class="card-header">
@@ -126,13 +126,14 @@ foreach (ServConfig::getServerList() as $setting) {
             </div>
         </div>
         <?php if ($runningServer) : ?>
-            <div class="row justify-content-md-center" style='margin-top:20px;'>
-                <div class="col" style="max-width:750px;">
+            <div class="d-flex justify-content-center" id="map-subframe-p" style='margin-top:20px;'>
+                <div id="map-subframe">
                     <iframe id="running_map" src="<?= $runningServer['name'] ?>/recent_map.php"></iframe>
                 </div>
             </div>
         <?php endif; ?>
     </div>
+
     <div id="bottom_box">
         <div class="container"><a href="terms.2.html">개인정보처리방침</a> &amp; <a href="terms.1.html">이용약관</a><br>© 2020 • HideD
             <br>크롬과 파이어폭스에 최적화되어있습니다.