diff --git a/hwe/js/select_npc.js b/hwe/js/select_npc.js
index b41713ff..4393193d 100644
--- a/hwe/js/select_npc.js
+++ b/hwe/js/select_npc.js
@@ -3,11 +3,19 @@ var templateGeneralCard =
     <h4 class="bg1 with_border"><%name%></h4>\
     <h4><img src="<%iconPath%>" height=64 width=64></h4>\
     <p><%leader%> / <%power%> / <%intel%><br>\
-    <%special%> / <%special2%></p>\
+    <%specialText%> / <%special2Text%></p>\
     <button type="subject" class="with_skin with_border select_btn" value="<%no%>" name="pick">빙의하기</button>\
     <label><input <%keepCnt?"":disabled="disabled"%> type="checkbox" value="<%no%>" name="keep[]" class="keep_select">보관(<%keepCnt%>회)</label>\
 </div>';
 
+var templateSpecial = 
+'<span class="obj_tooltip" data-toggle="tooltip" data-placement="top"><%text%>\
+    <span class="tooltiptext">\
+        <%info%>\
+    </span>\
+</span>\
+';
+
 function pickGeneral(){
     $btn = $(this);
 
@@ -85,12 +93,38 @@ function printGenerals(value){
     
     $.each(pick, function(idx, cardData){
         cardData.iconPath = getIconPath(cardData.imgsvr, cardData.picture);
+        if(cardData.special in specialInfo){
+            cardData.specialText = TemplateEngine(templateSpecial, {
+                text:cardData.special,
+                info:specialInfo[cardData.special]
+            });
+        }
+        else{
+            cardData.specialText = special;
+        }
+
+        if(cardData.special2 in specialInfo){
+            cardData.special2Text = TemplateEngine(templateSpecial, {
+                text:cardData.special2,
+                info:specialInfo[cardData.special2]
+            });
+        }
+        else{
+            cardData.special2Text = cardData.special2;
+        }
+        
 
         var $card = $(TemplateEngine(templateGeneralCard, cardData));
         console.log($card);
 
         $('.card_holder').append($card);
         $card.find('.select_btn').click(pickGeneral);
+        $card.find('.obj_tooltip').tooltip({
+            title:function(){
+                return $(this).find('.tooltiptext').html();
+            },
+            html:true
+        });
     });
 
     updatePickMoreTimer();
diff --git a/hwe/select_npc.php b/hwe/select_npc.php
index 442fc840..cabafc1a 100644
--- a/hwe/select_npc.php
+++ b/hwe/select_npc.php
@@ -27,15 +27,35 @@ $nationList = $db->query('SELECT nation,`name`,color,scout,scoutmsg FROM nation
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=1024" />
-<?=WebUtil::printCSS('css/normalize.css')?>
+<?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
 <?=WebUtil::printCSS('../d_shared/common.css')?>
 <?=WebUtil::printCSS('../css/config.css')?>
 <?=WebUtil::printCSS('css/common.css')?>
 <?=WebUtil::printCSS('css/select_npc.css')?>
 
+<script>
+var specialInfo = 
+<?php
+$specialAll = [];
+foreach (SpecialityConst::DOMESTIC as $id=>$values) {
+   $name = $values[0];
+   $text = getSpecialInfo($id);
+   $specialAll[$name] = $text;
+}
+foreach (SpecialityConst::WAR as $id=>$values) {
+    $name = $values[0];
+    $text = getSpecialInfo($id);
+    $specialAll[$name] = $text;
+}
+echo Json::encode($specialAll);
+?>
+;    
+</script>
+
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('../e_lib/jquery-3.3.1.min.js')?>
-<?=WebUtil::printJS('../js/common.js')?>
+<?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
+<?=WebUtil::printJS('js/common.js')?>
 <?=WebUtil::printJS('js/select_npc.js')?>
 
 </head>