diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
new file mode 100644
index 00000000..7bb08f96
--- /dev/null
+++ b/hwe/scss/map.scss
@@ -0,0 +1,665 @@
+.map_title_tooltiptext .tooltip-inner {
+  max-width: 220px;
+  width: 220px;
+  text-align: left;
+}
+
+.map_title_text {
+  margin: auto;
+  text-align: center;
+  width: 160px;
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.map_body .map_bglayer1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bglayer2 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_bgroad {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.map_body .map_button_stack {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  text-align: right;
+}
+
+.map_body .map_toggle_cityname::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_cityname.active::after {
+  content: " 켜기";
+}
+
+.map_body .map_toggle_single_tap::after {
+  content: " 끄기";
+}
+
+.map_body .map_toggle_single_tap.active::after {
+  content: " 켜기";
+}
+
+.world_map .city_tooltip {
+  position: absolute;
+  z-index: 16;
+  display: none;
+  min-width: 120px;
+  border: 0.02em gray solid;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.world_map .city_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+}
+
+.world_map .nation_name {
+  background-color: rgb(30, 164, 255);
+  z-index: 6;
+  line-height: 15px;
+  height: 15px;
+  border-top: 0.02em gray solid;
+  text-align: right;
+}
+
+@keyframes blink-my-city-d1 {
+  0% {
+    outline: solid 4px transparent;
+  }
+
+  50% {
+    outline: solid 4px rgba(255, 0, 0, 1);
+  }
+
+  100% {
+    outline: solid 4px transparent;
+  }
+}
+
+@keyframes blink-my-city-d2 {
+  0% {
+    outline: double 4px transparent;
+  }
+
+  50% {
+    outline: double 4px rgba(192, 192, 192, 1);
+  }
+
+  100% {
+    outline: double 4px transparent;
+  }
+}
+
+/* Basic */
+
+@keyframes blink-my-city {
+  0% {
+    outline: dashed 5px transparent;
+  }
+
+  50% {
+    outline: dashed 5px white;
+  }
+
+  100% {
+    outline: dashed 5px transparent;
+  }
+}
+
+@keyframes blink-my-city2 {
+  0% {
+    outline: dashed 4px transparent;
+  }
+
+  50% {
+    outline: dashed 4px red;
+  }
+
+  100% {
+    outline: dashed 4px transparent;
+  }
+}
+
+.btn.btn-minimum {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.world_map.hide_cityname .city_detail_name {
+  display: none;
+}
+
+.city_base .city_bg {
+  z-index: 1;
+  position: absolute;
+  background-position: center;
+}
+
+.city_base div {
+  z-index: 2;
+}
+
+$cityBaseWidth: 40px;
+$cityBaseHeight: 30px;
+
+$detailMapCitySizes: (
+  (1, 48px, 45px, 16px, 15px, -8px, -4px),
+  (2, 60px, 42px, 20px, 14px, -8px, -4px),
+  (3, 42px, 42px, 14px, 14px, -8px, -4px),
+  (4, 60px, 45px, 20px, 15px, -6px, -3px),
+  (5, 72px, 48px, 24px, 16px, -6px, -4px),
+  (6, 78px, 54px, 26px, 18px, -6px, -4px),
+  (7, 84px, 60px, 28px, 20px, -6px, -4px),
+  (8, 96px, 72px, 32px, 24px, -6px, -3px)
+);
+
+$basicMapCitySize: (
+  (1, 12px, 12px),
+  (2, 12px, 12px),
+  (3, 14px, 14px),
+  (4, 16px, 14px),
+  (5, 18px, 16px),
+  (6, 20px, 16px),
+  (7, 22px, 18px),
+  (8, 24px, 18px)
+);
+.city_img {
+  position: absolute;
+}
+
+.world_map.full_width_map {
+  width: 700px;
+  background: black;
+  font-size: 14px;
+  color: white;
+  position: relative;
+
+  .map_title {
+    width: 700px;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -10px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth;
+          height: $cityAreaHeight;
+          background-size: $cityAreaWidth $cityAreaHeight;
+          left: calc(($cityBaseWidth - $cityAreaWidth) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          background-size: $cityIconWidth $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+
+          > img {
+            width: $cityIconWidth;
+            height: $cityIconHeight;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 5px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 0;
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+
+        .city_capital {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+
+      .city_flag > img {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth;
+          height: $cityIconHeight;
+          left: calc(($cityBaseWidth - $cityIconWidth) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: -2px;
+        left: -4px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
+
+$smV: calc(500 / 700);
+
+.world_map.small_width_map {
+  width: 500px;
+  background: black;
+  font-size: 12px;
+  color: white;
+  position: relative;
+
+  .map_body {
+    .map_bglayer1,
+    .map_bglayer2,
+    .map_bgroad {
+      background-size: calc(700px * $smV) calc(500px * $smV);
+    }
+  }
+
+  .map_title {
+    width: 700px * $smV;
+    height: 20px;
+    text-align: center;
+  }
+
+  .map_body {
+    width: 700px * $smV;
+    height: 500px * $smV;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .city_base {
+    position: absolute;
+    width: $cityBaseWidth;
+    height: $cityBaseHeight;
+  }
+
+  .city_detail_name {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    white-space: nowrap;
+    left: 70%;
+    font-size: 10px;
+    bottom: -12px;
+    color: white;
+  }
+
+  &.map_detail {
+    @each $cityIdx, $cityAreaWidth, $cityAreaHeight, $cityIconWidth, $cityIconHeight, $flagRight,
+      $flagTop in $detailMapCitySizes
+    {
+      .my_city {
+        border-radius: 33%;
+      }
+
+      .my_city:before {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d1;
+        animation-iteration-count: infinite;
+      }
+
+      .my_city:after {
+        content: "";
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        position: absolute;
+        border-radius: 33%;
+        overflow: hidden;
+
+        animation-duration: 3.9s;
+        animation-name: blink-my-city-d2;
+        animation-iteration-count: infinite;
+      }
+
+      .city_filler {
+        position: absolute;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        left: -1px;
+        top: -1px;
+        background: transparent;
+      }
+
+      .city_base.city_level_#{$cityIdx} {
+        .city_bg {
+          width: $cityAreaWidth * $smV;
+          height: $cityAreaHeight * $smV;
+          background-size: calc($cityAreaWidth * $smV) calc($cityAreaHeight * $smV);
+          left: calc(($cityBaseWidth - $cityAreaWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityAreaHeight * $smV) / 2);
+        }
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          background-size: calc($cityIconWidth * $smV) calc($cityIconHeight * $smV);
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+
+          > img {
+            width: $cityIconWidth * $smV;
+            height: $cityIconHeight * $smV;
+          }
+        }
+        .city_flag {
+          right: $flagRight;
+          top: $flagTop;
+        }
+      }
+    }
+
+    .city_base {
+      .city_state {
+        position: absolute;
+        top: 8px;
+        /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+        left: 5px;
+        > img {
+          width: 10px;
+          object-fit: contain;
+        }
+      }
+
+      .city_flag {
+        position: absolute;
+        width: 12px * $smV;
+        height: 12px * $smV;
+
+        > img {
+          width: 12px * $smV;
+          height: 12px * $smV;
+        }
+
+        .city_capital {
+          position: absolute;
+          width: 10px * $smV;
+          height: 10px * $smV;
+          top: 0;
+          right: -1px;
+
+          > img {
+            width: 10px * $smV;
+            height: 10px * $smV;
+          }
+        }
+      }
+    }
+  }
+
+  &.map_basic {
+    .city_filler {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background: transparent;
+    }
+
+    .my_city:before {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city;
+      animation-iteration-count: infinite;
+    }
+
+    .my_city:after {
+      content: "";
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      position: absolute;
+
+      animation-duration: 2s;
+      animation-name: blink-my-city2;
+      animation-iteration-count: infinite;
+    }
+
+    .city_img {
+      background-color: white;
+    }
+
+    @each $cityIdx, $cityIconWidth, $cityIconHeight in $basicMapCitySize {
+      .city_base.city_level_#{$cityIdx} {
+        .city_img {
+          width: $cityIconWidth * $smV;
+          height: $cityIconHeight * $smV;
+          left: calc(($cityBaseWidth - $cityIconWidth * $smV) / 2);
+          top: calc(($cityBaseHeight - $cityIconHeight * $smV) / 2);
+        }
+      }
+    }
+
+    .city_base {
+      .city_capital {
+        position: absolute;
+        width: 5px;
+        height: 5px;
+        top: -2px;
+        right: -2px;
+        background-color: yellow;
+      }
+
+      .city_state {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: -2px;
+        left: -4px;
+        background-color: white;
+      }
+
+      .city_state.city_state_war {
+        background-color: red;
+      }
+
+      .city_state.city_state_bad {
+        background-color: orange;
+      }
+
+      .city_state.city_state_good {
+        background-color: blue;
+      }
+    }
+  }
+}
diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index 43b47e22..21a192e0 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -1,10 +1,7 @@
 <template>
   <div
     :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
-    :style="{
-      left: `${city.x - 20}px`,
-      top: `${city.y - 15}px`,
-    }"
+    :style="cityPos"
     @mouseenter="silent"
     @mouseleave="silent"
   >
@@ -41,9 +38,9 @@
 
 <script lang="ts" setup>
 import type { MapCityParsed } from "@/map";
-import { toRef, type PropType } from "vue";
+import { ref, toRef, watch, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", evnet: MouseEvent|TouchEvent): void;
+  (event: "click", evnet: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -62,8 +59,31 @@ const props = defineProps({
     required: false,
     defeault: false,
   },
+  isFullWidth: {
+    type: Boolean,
+    required: true,
+  },
 });
+
+
 const city = toRef(props, "city");
+const cityPos = ref({
+  left: "0px",
+  top: "0px",
+});
+watch(
+  () => props.isFullWidth,
+  (isFullWidth) => {
+    const { x, y } = city.value;
+    if (isFullWidth) {
+      cityPos.value = {
+        left: `${x - 20}px`,
+        top: `${y - 15}px`,
+      };
+    }
+  },
+  { immediate: true }
+);
 
 function getCityState(): string {
   const state = city.value.state;
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index 886d717d..42836431 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -1,10 +1,7 @@
 <template>
   <div
     :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
-    :style="{
-      left: `${city.x - 20}px`,
-      top: `${city.y - 15}px`,
-    }"
+    :style="cityPos"
     @mouseenter="silent"
     @mouseleave="silent"
   >
@@ -23,7 +20,7 @@
       :data-id="city.id"
       :href="props.href"
       :style="{
-        cursor: city.clickable?'pointer':'default',
+        cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
       @touchend="touchend"
@@ -51,9 +48,9 @@
 
 <script lang="ts" setup>
 import type { MapCityParsed } from "@/map";
-import { toRef, type PropType } from "vue";
+import { ref, toRef, watch, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", e: MouseEvent|TouchEvent): void;
+  (event: "click", e: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -76,8 +73,35 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isFullWidth: {
+    type: Boolean,
+    required: true,
+  },
 });
 const city = toRef(props, "city");
+const cityPos = ref({
+  left: "0px",
+  top: "0px",
+});
+watch(
+  () => props.isFullWidth,
+  (isFullWidth) => {
+    const { x, y } = city.value;
+    if (isFullWidth) {
+      cityPos.value = {
+        left: `${x - 20}px`,
+        top: `${y - 15}px`,
+      };
+    } else {
+      cityPos.value = {
+        left: `${(x * 5) / 7 - 20}px`,
+        top: `${(y * 5) / 7 - 18}px`,
+      };
+    }
+  },
+  { immediate: true }
+);
+
 const imagePath = toRef(props, "imagePath");
 
 function clicked(event: MouseEvent) {
@@ -99,17 +123,32 @@ function touchend(event: TouchEvent) {
   emit("click", event);
 }
 
-function silent(event: MouseEvent){
+function silent(event: MouseEvent) {
   event.stopPropagation();
 }
 </script>
 
 <style lang="scss" scoped>
-a,
-div,
-img,
-span {
-  line-height: 1.3;
-  font-size: 14px;
+.full_width_map{
+  a,
+  div,
+  img,
+  span {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+}
+.small_width_map {
+  a,
+  div,
+  img {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+
+  span {
+    line-height: 1.0;
+    font-size: 11px;
+  }
 }
 </style>
diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue
index eeb86db5..f50b183a 100644
--- a/hwe/ts/components/StaticMapTemplate.vue
+++ b/hwe/ts/components/StaticMapTemplate.vue
@@ -7,6 +7,7 @@
       drawableMap ? '' : 'draw_required',
       props.isDetailMap ? 'map_detail' : 'map_basic',
       hideMapCityName ? 'hide_cityname' : '',
+      isFullWidth ? 'full_width_map' : 'small_width_map',
       getMapSeasonClassName(),
     ]"
   >
@@ -59,6 +60,7 @@
           :city="city"
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -70,6 +72,7 @@
           :key="city.id"
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -82,7 +85,7 @@
         display: isOutside || !activatedCity ? 'none' : 'block',
         position: 'absolute',
         left: `${(() => {
-          if (cursorX + tooltipWidth + 10 > 700) {
+          if (cursorX + tooltipWidth + 10 > (isFullWidth ? 700 : 500)) {
             return cursorX - tooltipWidth - 5;
           }
           return cursorX + 10;
@@ -148,7 +151,7 @@ export type CityPositionMap = {
 };
 </script>
 <script lang="ts" setup>
-import "@/../css/map.css";
+import "@/../scss/map.scss";
 import type { loadMapOption } from "@/map";
 import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
@@ -165,6 +168,7 @@ import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
 import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
 import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
+import { is1000pxMode } from "@/state/is1000pxMode";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -182,7 +186,25 @@ const emit = defineEmits<{
   (event: "parsed", drawable: MapCityDrawable): void;
 }>();
 
+const isFullWidth = ref(true);
+
+function setWidthMode([widthMode, is1000pxMode]: ["auto" | "full" | "small" | undefined, boolean]): void {
+  if (widthMode == "full") {
+    isFullWidth.value = true;
+  }
+  if (widthMode == "small") {
+    isFullWidth.value = false;
+  }
+  isFullWidth.value = is1000pxMode;
+}
+watch([() => props.width, is1000pxMode], setWidthMode, { immediate: true });
+
 const props = defineProps({
+  width: {
+    type: String as PropType<"full" | "small" | "auto" | undefined>,
+    default: undefined,
+    required: false,
+  },
   serverNick: {
     type: String,
     required: true,
diff --git a/hwe/ts/state/is1000pxMode.ts b/hwe/ts/state/is1000pxMode.ts
new file mode 100644
index 00000000..cd062030
--- /dev/null
+++ b/hwe/ts/state/is1000pxMode.ts
@@ -0,0 +1,3 @@
+import { useMediaQuery } from "@vueuse/core";
+
+export const is1000pxMode = useMediaQuery('(min-width:900px');
\ No newline at end of file