From 8300b2749aa574e3cf82b9fb972ae2f535b12930 Mon Sep 17 00:00:00 2001
From: jiHyung <njh4803@gmail.com>
Date: Fri, 11 Nov 2022 15:02:19 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B5=AD=EC=A0=9C=EB=B2=94=EC=A3=84=EA=B2=80?=
 =?UTF-8?q?=EA=B1=B0=ED=98=84=ED=99=A9=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../faStatistics/internationalCrimeArrest.js  |  62 +++++-----
 .../internationalCrimeArrest.html             |  14 +--
 .../internationalCrimeArrestEditModal.html    | 108 ++++++++--------
 .../internationalCrimeArrestViewModal.html    | 116 +++++++++---------
 4 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/src/main/resources/static/js/faStatistics/internationalCrimeArrest.js b/src/main/resources/static/js/faStatistics/internationalCrimeArrest.js
index 023de1ce..4c73f46c 100644
--- a/src/main/resources/static/js/faStatistics/internationalCrimeArrest.js
+++ b/src/main/resources/static/js/faStatistics/internationalCrimeArrest.js
@@ -69,19 +69,19 @@ $(document).on('click', '#spiAddBtn', function (){
 
     $("#spiDiv").append(
         '<div class="row dynamic spi-list">'
-        + '<label class="col-sm-1 col-form-label text-center">성별</label>'
+        + '<label class="col-sm-1 col-form-label col-form-label-sm text-center">성별</label>'
         + '<div class="col-sm-2" id="sexFormDiv">'
         + '<select class="form-select form-select-sm" name="sex">'
         + sex
         + '</select>'
         + '</div>'
-        + '<label class="col-sm-1 col-form-label text-center">나이</label>'
+        + '<label class="col-sm-1 col-form-label col-form-label-sm text-center">나이</label>'
         + '<div class="col-sm-2" id="ageFormDiv">'
         + '<select class="form-select form-select-sm" name="age">'
         + age
         + '</select>'
         + '</div>'
-        + '<label class="col-sm-1 col-form-label text-center">국적</label>'
+        + '<label class="col-sm-1 col-form-label col-form-label-sm text-center">국적</label>'
         + '<div class="col-sm-2" id="countryFormDiv">'
         + '<select class="form-select form-select-sm country" name="country">'
         + country
@@ -97,7 +97,7 @@ $(document).on('change', '.country', function (){
     if ($(this).val() == 'etc') {
         $(this).parent().after(
             '<div class="col-auto">'
-            + '<input type="text" class="form-control" name="countryEtc">'
+            + '<input type="text" class="form-control form-control-sm" name="countryEtc">'
             + '</div>'
         );
     } else {
@@ -109,7 +109,7 @@ $(document).on('change', '#processResult', function (){
     if ($(this).val() == 'etc') {
         $(this).after(
             '<div class="col-auto">'
-            + '<input type="text" class="form-control" name="processResultEtc">'
+            + '<input type="text" class="form-control form-control-sm" name="processResultEtc">'
             + '</div>'
         );
     } else {
@@ -136,7 +136,7 @@ $(document).on('change', '#crimeType', function (){
     if ($(this).val() == 'CTH2') {
         makeArrestAreaDiv('장소');
         $('#smugglingAmountDiv').append(
-            '<label class="col-sm-2 col-form-label text-center">밀수입출 품목</label>'
+            '<label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수입출 품목</label>'
             + '<div class="col-sm-2">'
             + '<select class="form-select form-select-sm" name="smuggledGoods" id="smugglingAmount">'
             + '<option>선택</option>'
@@ -144,20 +144,20 @@ $(document).on('change', '#crimeType', function (){
             + '<option value="etc">기타</option>'
             + '</select>'
             + '</div>'
-            + '<label class="col-sm-2 col-form-label text-center">밀수가액</label>'
+            + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수가액</label>'
             + '<div class="col-sm-2">'
-            + '<input type="number" min="0" name="smugglingAmount">'
+            + '<input class="form-control form-control-sm" type="number" min="0" name="smugglingAmount">'
             + '</div>'
-            + '<label class="col-sm-2 col-form-label text-center">단속 인원(경찰관)</label>'
+            + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">단속 인원(경찰관)</label>'
             + '<div class="col-sm-2">'
-            + '<input type="number" min="0" name="caseNum">'
+            + '<input class="form-control form-control-sm" type="number" min="0" name="caseNum">'
             + '</div>'
         );
     } else {
         $("#crimeNameDiv").append(
-            '<label class="col-sm-2 col-form-label text-center">죄명</label>'
+            '<label class="col-sm-2 col-form-label col-form-label-sm text-center">죄명</label>'
             + '<div class="col-sm-10 input-daterange">'
-            + '<input type="text" class="form-control" name="crimeName">'
+            + '<input type="text" class="form-control form-control-sm" name="crimeName">'
             + '</div>'
         );
     }
@@ -223,7 +223,7 @@ $(document).on('change', '#smugglingAmount', function (){
     if ($(this).val() == 'etc') {
         $(this).parent().append(
             '<div class="col-auto">'
-            + '<input type="text" class="form-control" name="smuggledGoodsEtc">'
+            + '<input type="text" class="form-control form-control-sm" name="smuggledGoodsEtc">'
             + '</div>'
         );
     } else {
@@ -235,7 +235,7 @@ $(document).on('change', '#means', function (){
     if ($(this).val() == 'etc') {
         $(this).parent().append(
             '<div class="col-auto">'
-            + '<input type="text" class="form-control" name="meansEtc">'
+            + '<input type="text" class="form-control form-control-sm" name="meansEtc">'
             + '</div>'
         );
     } else {
@@ -247,7 +247,7 @@ $(document).on('change', '#purpose', function (){
     if ($(this).val() == 'etc') {
         $(this).parent().append(
             '<div class="col-auto">'
-            + '<input type="text" class="form-control" name="purposesEtc">'
+            + '<input type="text" class="form-control form-control-sm" name="purposesEtc">'
             + '</div>'
         );
     } else {
@@ -264,9 +264,9 @@ $(function(){
 
 function makeEntryVisaDiv() {
     $('#spiWrapper').prepend(
-        '<label class="col-sm-2 col-form-label text-center entryVisa">입국비자</label>'
+        '<label class="col-sm-2 col-form-label col-form-label-sm text-center entryVisa">입국비자</label>'
         + '<div class="col-sm-2 entryVisa">'
-        + '<input type="text" class="form-control" name="entryVisa">'
+        + '<input type="text" class="form-control form-control-sm" name="entryVisa">'
         + '</div>'
     );
 }
@@ -274,16 +274,16 @@ function makeEntryVisaDiv() {
 function makeSpiInfoDiv(name) {
     $('#spiParentDiv').after(
         '<div class="mb-3 row" id="spiInfoDiv">'
-        + '<label class="col-sm-2 col-form-label text-center">' + name + '</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">' + name + '</label>'
         + '<div class="col-sm-10">'
         + '<div class="row" id="spiWrapper">'
-        + '<label class="col-sm-2 col-form-label text-center">체류 자격</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">체류 자격</label>'
         + '<div class="col-sm-2">'
-        + '<input type="text" class="form-control" name="stayQualification">'
+        + '<input type="text" class="form-control form-control-sm" name="stayQualification">'
         + '</div>'
-        + '<label class="col-sm-2 col-form-label text-center">체류기간 만료일</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">체류기간 만료일</label>'
         + '<div class="col-sm-2 input-daterange" id="stayQualificationDiv">'
-        + '<input type="text" class="form-control" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" readonly>'
+        + '<input type="text" class="form-control form-control-sm" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" readonly>'
         + '</div>'
         + '</div>'
         + '</div>'
@@ -303,7 +303,7 @@ function makeSeaAreaDiv(name) {
     })
 
     $('#arrestAreaDiv').append(
-        '<label class="col-sm-2 col-form-label text-center">' + name + '시도 해역(해안)</label>'
+        '<label class="col-sm-2 col-form-label col-form-label-sm text-center">' + name + '시도 해역(해안)</label>'
         + '<div class="col-sm-3">'
         + '<select class="form-select form-select-sm" name="seaArea">'
         + '<option>선택</option>'
@@ -322,9 +322,9 @@ function makeArrestAreaDiv(name) {
 
     $('#spiParentDiv').after(
         '<div class="mb-3 row" id="arrestAreaDiv">'
-        + '<label class="col-sm-2 col-form-label text-center">검거' + name + '</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">검거' + name + '</label>'
         + '<div class="col-sm-2">'
-        + '<input type="text" class="form-control" name="arrestArea">'
+        + '<input type="text" class="form-control form-control-sm" name="arrestArea">'
         + '</div>'
         + '</div>'
     );
@@ -344,7 +344,7 @@ function makeMeansDiv(name, code) {
 
     $('#spiParentDiv').after(
         '<div class="mb-3 row" id="meansDiv">'
-        + '<label class="col-sm-2 col-form-label text-center">' + name + ' 수단(방법)</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">' + name + ' 수단(방법)</label>'
         + '<div class="col-sm-2">'
         + '<select class="form-select form-select-sm" name="means" id="means">'
         + '<option>선택</option>'
@@ -364,7 +364,7 @@ function makePurposeDiv(name) {
     })
 
     $('#meansDiv').append(
-        '<label class="col-sm-2 col-form-label text-center">' + name + ' 목적(사유)</label>'
+        '<label class="col-sm-2 col-form-label col-form-label-sm text-center">' + name + ' 목적(사유)</label>'
         + '<div class="col-sm-2">'
         + '<select class="form-select form-select-sm" name="purpose" id="purpose">'
         + '<option>선택</option>'
@@ -377,9 +377,9 @@ function makePurposeDiv(name) {
 
 function makeDestinationDiv(name) {
     $('#meansDiv').append(
-        '<label class="col-sm-2 col-form-label text-center">' + name + '</label>'
+        '<label class="col-sm-2 col-form-label col-form-label-sm text-center">' + name + '</label>'
         + '<div class="col-sm-2">'
-        + '<input type="text" class="form-control" name="destination">'
+        + '<input type="text" class="form-control form-control-sm" name="destination">'
         + '</div>'
     );
 }
@@ -387,9 +387,9 @@ function makeDestinationDiv(name) {
 function makeViolationAmountDiv() {
     $('#spiParentDiv').after(
         '<div class="mb-3 row" id="violationAmountDiv">'
-        + '<label class="col-sm-2 col-form-label text-center">표시위반 금액(만원)</label>'
+        + '<label class="col-sm-2 col-form-label col-form-label-sm text-center">표시위반 금액(만원)</label>'
         + '<div class="col-sm-2">'
-        + '<input type="number" min="0" class="form-control" name="violationAmount">'
+        + '<input type="number" min="0" class="form-control form-control-sm" name="violationAmount">'
         + '</div>'
         + '</div>'
     );
diff --git a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrest.html b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrest.html
index 18ca1d3d..c7ca60f6 100644
--- a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrest.html
+++ b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrest.html
@@ -24,7 +24,7 @@
                         <input type="hidden" name="dateSelector" value="wrtDt">
                         <div class="row justify-content-between pe-3 py-1">
                             <div class="col-auto">
-                                <select class="form-select" name="rowCnt" id="rowCnt">
+                                <select class="form-select form-select-sm" name="rowCnt" id="rowCnt">
                                     <th:block th:each="num : ${#numbers.sequence(1,5)}">
                                         <option th:value="${num*10}" th:text="${num*10}" th:selected="${searchParams.rowCnt eq num*10}"></option>
                                     </th:block>
@@ -89,8 +89,8 @@
                     </form>
                     <div class="tab-pane fade show active" id="ica" role="tabpanel"
                          aria-labelledby="arrest-tab">
-                        <table class="table table-striped" id="ivsgtTable">
-                            <thead>
+                        <table class="table table-hover table-bordered ws-nowrap" id="ivsgtTable">
+                            <thead class="align-middle text-center">
                                 <tr>
                                     <th rowspan="2">지방청</th>
                                     <th rowspan="2">경찰서</th>
@@ -120,7 +120,7 @@
                                     <th>국적</th>
                                 </tr>
                             </thead>
-                            <tbody>
+                            <tbody class="table-group-divider">
                                 <th:block th:each="internationalCrimeArrest:${internationalCrimeArrestList}">
                                     <tr class="tr" th:data-key="${internationalCrimeArrest.icaKey}">
                                         <th:block th:if="${internationalCrimeArrest.organ eq null || internationalCrimeArrest.organ eq ''}">
@@ -191,9 +191,9 @@
                                 </th:block>
                             </tbody>
                         </table>
-                        <button id="ivsgtAddBtn">관리자마감</button>
-                        <button id="icaExcelDownBtn">엑셀 다운로드</button>
-                        <button id="icaAddBtn">등록</button>
+                        <button class="btn btn-sm btn-primary col-auto" id="ivsgtAddBtn">관리자마감</button>
+                        <button class="btn btn-sm btn-primary col-auto" id="icaExcelDownBtn">엑셀 다운로드</button>
+                        <button class="btn btn-sm btn-primary col-auto" id="icaAddBtn">등록</button>
                     </div>
                     <!-- 페이징 -->
                     <div class="row justify-content-center">
diff --git a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestEditModal.html b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestEditModal.html
index 66e08252..39bb2173 100644
--- a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestEditModal.html
+++ b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestEditModal.html
@@ -17,11 +17,11 @@
     <div class="mb-3 row">
       <label class="col-sm-2 col-form-label text-center">사건번호</label>
       <div class="col-sm-2">
-        <input type="text" class="form-control" name="caseNum" th:value="${internationalCrimeArrest.caseNum}">
+        <input type="text" class="form-control form-control-sm" name="caseNum" th:value="${internationalCrimeArrest.caseNum}">
       </div>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">지방청</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">지방청</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="organ">
           <option value="">선택</option>
@@ -32,7 +32,7 @@
           </th:block>
         </select>
       </div>
-      <label class="col-sm-2 col-form-label text-center">관할서</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">관할서</label>
       <div class="col-sm-2" id="departmentDiv">
        <select class="form-select form-select-sm" name="department">
          <option value="">선택</option>
@@ -44,14 +44,14 @@
         </select>
       </div>
       <div class="col-sm-4 row" id="crimeNameDiv">
-        <label class="col-sm-2 col-form-label text-center">죄명</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">죄명</label>
         <div class="col-sm-10 input-daterange">
-          <input type="text" class="form-control" name="crimeName" th:value="${internationalCrimeArrest.crimeName}">
+          <input type="text" class="form-control form-control-sm" name="crimeName" th:value="${internationalCrimeArrest.crimeName}">
         </div>
       </div>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범죄테마</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범죄테마</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="crimeType" id="crimeType">
           <option value="">선택</option>
@@ -61,7 +61,7 @@
           </th:block>
         </select>
       </div>
-      <label class="col-sm-2 col-form-label text-center">위반유형</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">위반유형</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="violationType" id="violationType">
           <option value="">선택</option>
@@ -75,7 +75,7 @@
     </div>
     <div class="mb-3 row" id="smugglingAmountDiv">
       <th:block th:if="${internationalCrimeArrest.crimeType eq 'CTH002'}">
-        <label class="col-sm-2 col-form-label text-center">밀수입출 품목</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수입출 품목</label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="smuggledGoods" id="smugglingAmount">
             <option value="">선택</option>
@@ -86,37 +86,37 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.smuggledGoods ne null && internationalCrimeArrest.smuggledGoods ne '' && !#strings.contains(internationalCrimeArrest.smuggledGoods, 'SG')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="smuggledGoodsEtc" th:value="${internationalCrimeArrest.smuggledGoods}">
+              <input type="text" class="form-control form-control-sm" name="smuggledGoodsEtc" th:value="${internationalCrimeArrest.smuggledGoods}">
             </div>
           </th:block>
         </div>
-        <label class="col-sm-2 col-form-label text-center">밀수가액</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수가액</label>
         <div class="col-sm-2">
-          <input type="number" min="0" name="smugglingAmount" th:value="${internationalCrimeArrest.smugglingAmount}">
+          <input type="number" min="0" class="form-control form-control-sm" name="smugglingAmount" th:value="${internationalCrimeArrest.smugglingAmount}">
         </div>
-        <label class="col-sm-2 col-form-label text-center">단속 인원(경찰관)</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">단속 인원(경찰관)</label>
         <div class="col-sm-2">
-          <input type="number" min="0" name="caseNum" th:value="${internationalCrimeArrest.caseNum}">
+          <input type="number" min="0" class="form-control form-control-sm" name="caseNum" th:value="${internationalCrimeArrest.caseNum}">
         </div>
       </th:block>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">발생원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">발생원표</label>
       <div class="col-sm-2">
-        <input type="text" name="occurTable" th:value="${internationalCrimeArrest.occurTable}">
+        <input type="text" class="form-control form-control-sm" name="occurTable" th:value="${internationalCrimeArrest.occurTable}">
       </div>
-      <label class="col-sm-2 col-form-label text-center">검거원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거원표</label>
       <div class="col-sm-2">
-        <input type="text" name="arrestTable" th:value="${internationalCrimeArrest.arrestTable}">
+        <input type="text" class="form-control form-control-sm" name="arrestTable" th:value="${internationalCrimeArrest.arrestTable}">
       </div>
-      <label class="col-sm-2 col-form-label text-center">피의자원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">피의자원표</label>
       <div class="col-sm-2">
-        <input type="text" name="suspectTable" th:value="${internationalCrimeArrest.suspectTable}">
+        <input type="text" class="form-control form-control-sm" name="suspectTable" th:value="${internationalCrimeArrest.suspectTable}">
       </div>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범행형태</label>
-      <div class="col-sm-2" id="crimeFormDiv">
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범행형태</label>
+      <div class="col-auto" id="crimeFormDiv">
         <select class="form-select form-select-sm" name="crimeForm" id="crimeForm">
           <th:block th:each="commonCode:${session.commonCode.get('CMF')}">
             <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}"
@@ -129,11 +129,11 @@
       </th:block>
     </div>
     <div class="mb-3 row" id="spiParentDiv">
-      <label class="col-sm-2 col-form-label text-center">피의자 인적사항</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">피의자 인적사항</label>
       <div class="col-sm-10" id="spiDiv">
         <th:block th:if="${#lists.isEmpty(internationalCrimeArrest.suspectPersonInfoList)}">
           <div class="row spi-list">
-            <label class="col-sm-1 col-form-label text-center">성별</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">성별</label>
             <div class="col-sm-2" id="sexFormDiv">
               <select class="form-select form-select-sm" name="sex">
                 <th:block th:each="commonCode:${session.commonCode.get('SEX')}">
@@ -141,7 +141,7 @@
                 </th:block>
               </select>
             </div>
-            <label class="col-sm-1 col-form-label text-center">나이</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">나이</label>
             <div class="col-sm-2" id="ageFormDiv">
               <select class="form-select form-select-sm" name="age">
                 <th:block th:each="commonCode:${session.commonCode.get('AGE')}">
@@ -149,7 +149,7 @@
                 </th:block>
               </select>
             </div>
-            <label class="col-sm-1 col-form-label text-center">국적</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">국적</label>
             <div class="col-sm-2" id="countryFormDiv">
               <select class="form-select form-select-sm country" name="country">
                 <th:block th:each="commonCode:${session.commonCode.get('NNY')}">
@@ -164,7 +164,7 @@
           <th:block th:each="suspectPersonInfo, i : ${internationalCrimeArrest.suspectPersonInfoList}">
             <div class="row spi-list" th:classappend="${i.index > 0 ? 'dynamic' : ''}">
               <input type="hidden" name="spiKey" th:value="${suspectPersonInfo.spiKey}">
-              <label class="col-sm-1 col-form-label text-center">성별</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">성별</label>
               <div class="col-sm-2" id="sexFormDiv">
                 <select class="form-select form-select-sm" name="sex">
                   <th:block th:each="commonCode:${session.commonCode.get('SEX')}">
@@ -173,7 +173,7 @@
                   </th:block>
                 </select>
               </div>
-              <label class="col-sm-1 col-form-label text-center">나이</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">나이</label>
               <div class="col-sm-2" id="ageFormDiv">
                 <select class="form-select form-select-sm" name="age">
                   <th:block th:each="commonCode:${session.commonCode.get('AGE')}">
@@ -182,7 +182,7 @@
                   </th:block>
                 </select>
               </div>
-              <label class="col-sm-1 col-form-label text-center">국적</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">국적</label>
               <div class="col-sm-2" id="countryFormDiv">
                 <select class="form-select form-select-sm country" name="country" id="country">
                   <th:block th:each="commonCode:${session.commonCode.get('NNY')}">
@@ -194,7 +194,7 @@
               </div>
               <th:block th:if="${suspectPersonInfo.country ne null && suspectPersonInfo.country ne '' && !#strings.contains(suspectPersonInfo.country, 'NNY')}">
                 <div class="col-sm-2">
-                  <input type="text" class="form-control" name="countryEtc" th:value="${suspectPersonInfo.country}">
+                  <input type="text" class="form-control form-control-sm" name="countryEtc" th:value="${suspectPersonInfo.country}">
                 </div>
               </th:block>
               <th:block th:if="${i.index > 0}">
@@ -208,22 +208,22 @@
     <div class="mb-3 row" id="spiInfoDiv">
       <th:block th:if="${!#lists.isEmpty(internationalCrimeArrest.suspectPersonInfoList)}">
         <th:block th:if="${internationalCrimeArrest.crimeType eq 'CTH002' || internationalCrimeArrest.violationType eq 'VLT005'}">
-          <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT005' ? '불법체류 및 취업' : '피의자 정보'}">피의자 정보</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT005' ? '불법체류 및 취업' : '피의자 정보'}">피의자 정보</label>
           <div class="col-sm-10">
             <div class="row" id="spiWrapper">
               <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT005'}">
-                <label class="col-sm-2 col-form-label text-center entryVisa">입국비자</label>
+                <label class="col-sm-2 col-form-label col-form-label-sm text-center entryVisa">입국비자</label>
                 <div class="col-sm-2 entryVisa">
-                  <input type="text" class="form-control" name="entryVisa" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].entryVisa}">
+                  <input type="text" class="form-control form-control-sm" name="entryVisa" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].entryVisa}">
                 </div>
               </th:block>
-              <label class="col-sm-2 col-form-label text-center">체류 자격</label>
+              <label class="col-sm-2 col-form-label col-form-label-sm text-center">체류 자격</label>
               <div class="col-sm-2">
-                <input type="text" class="form-control" name="stayQualification" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].stayQualification}">
+                <input type="text" class="form-control form-control-sm" name="stayQualification" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].stayQualification}">
               </div>
-              <label class="col-sm-2 col-form-label text-center">체류기간 만료일</label>
+              <label class="col-sm-2 col-form-label col-form-label-sm text-center">체류기간 만료일</label>
               <div class="col-sm-2 input-daterange" id="stayQualificationDiv">
-                <input type="text" class="form-control" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" th:value="${#temporals.format(internationalCrimeArrest.suspectPersonInfoList[0].stayPeriodExpiredDt, 'yyyy-MM-dd HH:mm')}">
+                <input type="text" class="form-control form-control-sm" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" th:value="${#temporals.format(internationalCrimeArrest.suspectPersonInfoList[0].stayPeriodExpiredDt, 'yyyy-MM-dd HH:mm')}">
               </div>
             </div>
           </div>
@@ -233,12 +233,12 @@
     <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT001' || internationalCrimeArrest.violationType eq 'VLT002' || internationalCrimeArrest.violationType eq 'VLT003'|| internationalCrimeArrest.violationType eq 'VLT004'}">
       <div class="mb-3 row" id="meansDiv">
         <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT001' || internationalCrimeArrest.violationType eq 'VLT003'|| internationalCrimeArrest.violationType eq 'VLT004'}">
-          <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 출발지(국가)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 행선지(도착예정지)' : '밀항 행선지(도착예정지)')}"></label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 출발지(국가)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 행선지(도착예정지)' : '밀항 행선지(도착예정지)')}"></label>
           <div class="col-sm-2">
-            <input type="text" class="form-control" name="destination">
+            <input type="text" class="form-control form-control-sm" name="destination">
           </div>
         </th:block>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 수단(방법)' : '밀항 수단(방법)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 수단(방법)' : '밀항 수단(방법)'))}"></label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="means" id="means">
             <option value="">선택</option>
@@ -254,11 +254,11 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.means ne null && internationalCrimeArrest.means ne '' && !#strings.contains(internationalCrimeArrest.means, 'MS1') && !#strings.contains(internationalCrimeArrest.means, 'MS2')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="meansEtc" th:value="${internationalCrimeArrest.means}">
+              <input type="text" class="form-control form-control-sm" name="meansEtc" th:value="${internationalCrimeArrest.means}">
             </div>
           </th:block>
         </div>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 목적(사유)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 목적(시유)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 목적(사유)' : '밀항 목적(사유)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 목적(사유)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 목적(시유)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 목적(사유)' : '밀항 목적(사유)'))}"></label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="purpose" id="purpose">
             <option value="">선택</option>
@@ -270,17 +270,17 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.purpose ne null && internationalCrimeArrest.purpose ne '' && !#strings.contains(internationalCrimeArrest.purpose, 'PPS')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="purposeEtc" th:value="${internationalCrimeArrest.purpose}">
+              <input type="text" class="form-control form-control-sm" name="purposeEtc" th:value="${internationalCrimeArrest.purpose}">
             </div>
           </th:block>
         </div>
       </div>
       <div class="mb-3 row" id="arrestAreaDiv">
-        <label class="col-sm-2 col-form-label text-center">검거 지역 </label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거 지역 </label>
         <div class="col-sm-2">
-          <input type="text" class="form-control" name="arrestArea" th:value="${internationalCrimeArrest.arrestArea}">
+          <input type="text" class="form-control form-control-sm" name="arrestArea" th:value="${internationalCrimeArrest.arrestArea}">
         </div>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 시도 해역(해안)' : '밀항 시도 해역(해안)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 시도 해역(해안)' : '밀항 시도 해역(해안)'))}"></label>
         <div class="col-sm-3">
           <select class="form-select form-select-sm" name="seaArea">
             <option value="">선택</option>
@@ -294,22 +294,22 @@
     </th:block>
     <th:block th:if="${internationalCrimeArrest.violationAmount ne null}">
       <div class="mb-3 row" id="violationAmountDiv">
-        <label class="col-sm-2 col-form-label text-center">표시위반 금액(만원)</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">표시위반 금액(만원)</label>
         <div class="col-sm-2">
-          <input type="number" min="0" class="form-control" name="violationAmount" th:value="${internationalCrimeArrest.violationAmount}">
+          <input type="number" min="0" class="form-control form-control-sm" name="violationAmount" th:value="${internationalCrimeArrest.violationAmount}">
         </div>
       </div>
     </th:block>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범죄인지</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범죄인지</label>
       <div class="col-sm-2 input-daterange" id="crimeAwarenessDtDiv">
-        <input type="text" class="form-control" name="crimeAwarenessDt" id="crimeAwarenessDt" th:value="${#temporals.format(internationalCrimeArrest.crimeAwarenessDt, 'yyyy-MM-dd HH:mm')}">
+        <input type="text" class="form-control form-control-sm" name="crimeAwarenessDt" id="crimeAwarenessDt" th:value="${#temporals.format(internationalCrimeArrest.crimeAwarenessDt, 'yyyy-MM-dd HH:mm')}">
       </div>
-      <label class="col-sm-2 col-form-label text-center">사건송치</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">사건송치</label>
       <div class="col-sm-2 input-daterange" id="caseSentDtDiv">
-        <input type="text" class="form-control" name="caseSentDt" id="caseSentDt" th:value="${#temporals.format(internationalCrimeArrest.caseSentDt, 'yyyy-MM-dd HH:mm')}">
+        <input type="text" class="form-control form-control-sm" name="caseSentDt" id="caseSentDt" th:value="${#temporals.format(internationalCrimeArrest.caseSentDt, 'yyyy-MM-dd HH:mm')}">
       </div>
-      <label class="col-sm-2 col-form-label text-center">신병처리</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">신병처리</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="processResult" id="processResult">
           <option value="">선택</option>
@@ -321,13 +321,13 @@
         </select>
         <th:block th:if="${internationalCrimeArrest.processResult ne null && internationalCrimeArrest.processResult ne '' && !#strings.contains(internationalCrimeArrest.processResult, 'PCR')}">
           <div class="col-auto">
-            <input type="text" class="form-control" name="processResultEtc" th:value="${internationalCrimeArrest.processResult}">
+            <input type="text" class="form-control form-control-sm" name="processResultEtc" th:value="${internationalCrimeArrest.processResult}">
           </div>
         </th:block>
       </div>
     </div>
     <div class="mb-3 row justify-content-center">
-      <label for="caseOverviewDiv" class="col-sm-2 col-form-label text-center">범죄사실(사건개요)</label>
+      <label for="caseOverviewDiv" class="col-sm-2 col-form-label col-form-label-sm text-center">범죄사실(사건개요)</label>
       <div class="col-sm-10" id="caseOverviewDiv">
         <textarea type='text' name='caseOverview' th:utext="${internationalCrimeArrest.caseOverview}"></textarea>
       </div>
diff --git a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestViewModal.html b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestViewModal.html
index cdaf35b0..5f9e5f83 100644
--- a/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestViewModal.html
+++ b/src/main/resources/templates/faStatistics/internationalCrimeArrest/internationalCrimeArrestViewModal.html
@@ -14,13 +14,13 @@
     <input type="hidden" name="wrtDt" th:value="${#temporals.format(internationalCrimeArrest.wrtDt, 'yyyy-MM-dd HH:mm')}">
     <input type="hidden" id="contentStatus" name="contentStatus">
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">사건번호</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">사건번호</label>
       <div class="col-sm-2">
-        <input type="text" name="caseNum" class="form-control border-0" th:value="${internationalCrimeArrest.caseNum}" readonly>
+        <input type="text" name="caseNum" class="form-control form-control-sm" th:value="${internationalCrimeArrest.caseNum}" readonly>
       </div>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">지방청</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">지방청</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="organ" disabled>
           <option value=""></option>
@@ -31,7 +31,7 @@
           </th:block>
         </select>
       </div>
-      <label class="col-sm-2 col-form-label text-center">관할서</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">관할서</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="department" disabled>
           <option value="">선택</option>
@@ -44,15 +44,15 @@
       </div>
       <th:block th:if="${internationalCrimeArrest.crimeType ne 'CTH002'}">
         <div class="col-sm-4 row" id="crimeNameDiv">
-          <label class="col-sm-2 col-form-label text-center">죄명</label>
-          <div class="col-sm-10 input-daterange">
-            <input type="text" class="form-control border-0" name="crimeName" th:value="${internationalCrimeArrest.crimeName}" readonly>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-center">죄명</label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control form-control-sm" name="crimeName" th:value="${internationalCrimeArrest.crimeName}" readonly>
           </div>
         </div>
       </th:block>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범죄테마</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범죄테마</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="crimeType" id="crimeType" disabled>
           <option value="">선택</option>
@@ -62,7 +62,7 @@
           </th:block>
         </select>
       </div>
-      <label class="col-sm-2 col-form-label text-center">위반유형</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">위반유형</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="violationType" id="violationType" disabled>
           <option value="">선택</option>
@@ -77,7 +77,7 @@
     </div>
     <div class="mb-3 row" id="smugglingAmountDiv">
       <th:block th:if="${internationalCrimeArrest.crimeType eq 'CTH002'}">
-        <label class="col-sm-2 col-form-label text-center">밀수입출 품목</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수입출 품목</label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="smuggledGoods" id="smugglingAmount" disabled>
             <option>선택</option>
@@ -88,37 +88,37 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.smuggledGoods ne null && internationalCrimeArrest.smuggledGoods ne '' && !#strings.contains(internationalCrimeArrest.smuggledGoods, 'SG')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="smuggledGoodsEtc" th:value="${internationalCrimeArrest.smuggledGoods}" readonly>
+              <input type="text" class="form-control form-control-sm" name="smuggledGoodsEtc" th:value="${internationalCrimeArrest.smuggledGoods}" readonly>
             </div>
           </th:block>
         </div>
-        <label class="col-sm-2 col-form-label text-center">밀수가액</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">밀수가액</label>
         <div class="col-sm-2">
           <input type="number" min="0" name="smugglingAmount" th:value="${internationalCrimeArrest.smugglingAmount}" readonly>
         </div>
-        <label class="col-sm-2 col-form-label text-center">단속 인원(경찰관)</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">단속 인원(경찰관)</label>
         <div class="col-sm-2">
           <input type="number" min="0" name="caseNum" th:value="${internationalCrimeArrest.caseNum}" readonly>
         </div>
       </th:block>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">발생원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">발생원표</label>
       <div class="col-sm-2">
-        <input type="text" class="form-control border-0" name="occurTable" th:value="${internationalCrimeArrest.occurTable}" readonly>
+        <input type="text" class="form-control form-control-sm" name="occurTable" th:value="${internationalCrimeArrest.occurTable}" readonly>
       </div>
-      <label class="col-sm-2 col-form-label text-center">검거원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거원표</label>
       <div class="col-sm-2">
-        <input type="text" class="form-control border-0" name="arrestTable" th:value="${internationalCrimeArrest.arrestTable}" readonly>
+        <input type="text" class="form-control form-control-sm" name="arrestTable" th:value="${internationalCrimeArrest.arrestTable}" readonly>
       </div>
-      <label class="col-sm-2 col-form-label text-center">피의자원표</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">피의자원표</label>
       <div class="col-sm-2">
-        <input type="text" class="form-control border-0" name="suspectTable" th:value="${internationalCrimeArrest.suspectTable}" readonly>
+        <input type="text" class="form-control form-control-sm" name="suspectTable" th:value="${internationalCrimeArrest.suspectTable}" readonly>
       </div>
     </div>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범행형태</label>
-      <div class="col-sm-2" id="crimeFormDiv">
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범행형태</label>
+      <div class="col-auto" id="crimeFormDiv">
         <select class="form-select form-select-sm" name="crimeForm" id="crimeForm" disabled>
           <th:block th:each="commonCode:${session.commonCode.get('CMF')}">
             <option th:value="${commonCode.itemCd}" th:text="${commonCode.itemValue}"
@@ -128,11 +128,11 @@
       </div>
     </div>
     <div class="mb-3 row" id="spiParentDiv">
-      <label class="col-sm-2 col-form-label text-center">피의자 인적사항</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">피의자 인적사항</label>
       <div class="col-sm-10" id="spiDiv">
         <th:block th:if="${#lists.isEmpty(internationalCrimeArrest.suspectPersonInfoList)}">
           <div class="row spi-list">
-            <label class="col-sm-1 col-form-label text-center">성별</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">성별</label>
             <div class="col-sm-2" id="sexFormDiv">
               <select class="form-select form-select-sm" name="sex" disabled>
                 <th:block th:each="commonCode:${session.commonCode.get('SEX')}">
@@ -140,7 +140,7 @@
                 </th:block>
               </select>
             </div>
-            <label class="col-sm-1 col-form-label text-center">나이</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">나이</label>
             <div class="col-sm-2" id="ageFormDiv">
               <select class="form-select form-select-sm" name="age" disabled>
                 <th:block th:each="commonCode:${session.commonCode.get('AGE')}">
@@ -148,7 +148,7 @@
                 </th:block>
               </select>
             </div>
-            <label class="col-sm-1 col-form-label text-center">국적</label>
+            <label class="col-sm-1 col-form-label col-form-label-sm text-center">국적</label>
             <div class="col-sm-2" id="countryFormDiv">
               <select class="form-select form-select-sm country" name="country" disabled>
                 <th:block th:each="commonCode:${session.commonCode.get('NNY')}">
@@ -162,7 +162,7 @@
         <th:block th:if="${!#lists.isEmpty(internationalCrimeArrest.suspectPersonInfoList)}">
           <th:block th:each="suspectPersonInfo:${internationalCrimeArrest.suspectPersonInfoList}">
             <div class="row spi-list">
-              <label class="col-sm-1 col-form-label text-center">성별</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">성별</label>
               <div class="col-sm-2" id="sexFormDiv">
                 <select class="form-select form-select-sm" name="sex" disabled>
                   <th:block th:each="commonCode:${session.commonCode.get('SEX')}">
@@ -171,7 +171,7 @@
                   </th:block>
                 </select>
               </div>
-              <label class="col-sm-1 col-form-label text-center">나이</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">나이</label>
               <div class="col-sm-2" id="ageFormDiv">
                 <select class="form-select form-select-sm" name="age" disabled>
                   <th:block th:each="commonCode:${session.commonCode.get('AGE')}">
@@ -180,7 +180,7 @@
                   </th:block>
                 </select>
               </div>
-              <label class="col-sm-1 col-form-label text-center">국적</label>
+              <label class="col-sm-1 col-form-label col-form-label-sm text-center">국적</label>
               <div class="col-sm-2" id="countryFormDiv">
                 <select class="form-select form-select-sm country" name="country" id="country" disabled>
                   <th:block th:each="commonCode:${session.commonCode.get('NNY')}">
@@ -192,7 +192,7 @@
               </div>
               <th:block th:if="${suspectPersonInfo.country ne null && suspectPersonInfo.country ne '' && !#strings.contains(suspectPersonInfo.country, 'NNY')}">
                 <div class="col-sm-2">
-                  <input type="text" class="form-control" name="countryEtc" th:value="${suspectPersonInfo.country}" readonly>
+                  <input type="text" class="form-control form-control-sm" name="countryEtc" th:value="${suspectPersonInfo.country}" readonly>
                 </div>
               </th:block>
             </div>
@@ -203,22 +203,22 @@
     <div class="mb-3 row" id="spiInfoDiv">
       <th:block th:if="${!#lists.isEmpty(internationalCrimeArrest.suspectPersonInfoList)}">
         <th:block th:if="${internationalCrimeArrest.crimeType eq 'CTH002' || internationalCrimeArrest.violationType eq 'VLT005'}">
-          <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT005' ? '불법체류 및 취업' : '피의자 정보'}">피의자 정보</label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT005' ? '불법체류 및 취업' : '피의자 정보'}">피의자 정보</label>
           <div class="col-sm-10">
             <div class="row" id="spiWrapper">
               <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT005'}">
-                <label class="col-sm-2 col-form-label text-center entryVisa">입국비자</label>
+                <label class="col-sm-2 col-form-label col-form-label-sm text-center entryVisa">입국비자</label>
                 <div class="col-sm-2 entryVisa">
-                  <input type="text" class="form-control" name="entryVisa" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].entryVisa}" readonly>
+                  <input type="text" class="form-control form-control-sm" name="entryVisa" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].entryVisa}" readonly>
                 </div>
               </th:block>
-              <label class="col-sm-2 col-form-label text-center">체류 자격</label>
+              <label class="col-sm-2 col-form-label col-form-label-sm text-center">체류 자격</label>
               <div class="col-sm-2">
-                <input type="text" class="form-control" name="stayQualification" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].stayQualification}" readonly>
+                <input type="text" class="form-control form-control-sm" name="stayQualification" th:value="${internationalCrimeArrest.suspectPersonInfoList[0].stayQualification}" readonly>
               </div>
-              <label class="col-sm-2 col-form-label text-center">체류기간 만료일</label>
-              <div class="col-sm-2 input-daterange" id="stayQualificationDiv">
-                <input type="text" class="form-control" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" th:value="${#temporals.format(internationalCrimeArrest.suspectPersonInfoList[0].stayPeriodExpiredDt, 'yyyy-MM-dd HH:mm')}" readonly>
+              <label class="col-sm-2 col-form-label col-form-label-sm text-center">체류기간 만료일</label>
+              <div class="col-sm-2" id="stayQualificationDiv">
+                <input type="text" class="form-control form-control-sm" name="stayPeriodExpiredDt" id="stayPeriodExpiredDt" th:value="${#temporals.format(internationalCrimeArrest.suspectPersonInfoList[0].stayPeriodExpiredDt, 'yyyy-MM-dd HH:mm')}" readonly>
               </div>
             </div>
           </div>
@@ -228,12 +228,12 @@
     <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT001' || internationalCrimeArrest.violationType eq 'VLT002' || internationalCrimeArrest.violationType eq 'VLT003'|| internationalCrimeArrest.violationType eq 'VLT004'}">
       <div class="mb-3 row" id="meansDiv">
         <th:block th:if="${internationalCrimeArrest.violationType eq 'VLT001' || internationalCrimeArrest.violationType eq 'VLT003'|| internationalCrimeArrest.violationType eq 'VLT004'}">
-          <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 출발지(국가)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 행선지(도착예정지)' : '밀항 행선지(도착예정지)')}"></label>
+          <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 출발지(국가)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 행선지(도착예정지)' : '밀항 행선지(도착예정지)')}"></label>
           <div class="col-sm-2">
-            <input type="text" class="form-control" name="destination" readonly>
+            <input type="text" class="form-control form-control-sm" name="destination" readonly>
           </div>
         </th:block>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 수단(방법)' : '밀항 수단(방법)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 수단(방법)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 수단(방법)' : '밀항 수단(방법)'))}"></label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="means" id="means" disabled>
             <option>선택</option>
@@ -249,11 +249,11 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.means ne null && internationalCrimeArrest.means ne '' && !#strings.contains(internationalCrimeArrest.means, 'MS1') && !#strings.contains(internationalCrimeArrest.means, 'MS2')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="meansEtc" th:value="${internationalCrimeArrest.means}" readonly>
+              <input type="text" class="form-control form-control-sm" name="meansEtc" th:value="${internationalCrimeArrest.means}" readonly>
             </div>
           </th:block>
         </div>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 목적(사유)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 목적(시유)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 목적(사유)' : '밀항 목적(사유)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 목적(사유)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 목적(시유)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 목적(사유)' : '밀항 목적(사유)'))}"></label>
         <div class="col-sm-2">
           <select class="form-select form-select-sm" name="purpose" id="purpose" disabled>
             <option>선택</option>
@@ -265,17 +265,17 @@
           </select>
           <th:block th:if="${internationalCrimeArrest.purpose ne null && internationalCrimeArrest.purpose ne '' && !#strings.contains(internationalCrimeArrest.purpose, 'PPS')}">
             <div class="col-auto">
-              <input type="text" class="form-control" name="purposeEtc" th:value="${internationalCrimeArrest.purpose}" readonly>
+              <input type="text" class="form-control form-control-sm" name="purposeEtc" th:value="${internationalCrimeArrest.purpose}" readonly>
             </div>
           </th:block>
         </div>
       </div>
       <div class="mb-3 row" id="arrestAreaDiv">
-        <label class="col-sm-2 col-form-label text-center">검거 지역 </label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">검거 지역 </label>
         <div class="col-sm-2">
-          <input type="text" class="form-control" name="arrestArea" th:value="${internationalCrimeArrest.arrestArea}" readonly>
+          <input type="text" class="form-control form-control-sm" name="arrestArea" th:value="${internationalCrimeArrest.arrestArea}" readonly>
         </div>
-        <label class="col-sm-2 col-form-label text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 시도 해역(해안)' : '밀항 시도 해역(해안)'))}"></label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center" th:text="${internationalCrimeArrest.violationType eq 'VLT001' ? '밀입국 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT002' ? '도외이탈 시도 해역(해안)' : (internationalCrimeArrest.violationType eq 'VLT003' ? '밀출국 시도 해역(해안)' : '밀항 시도 해역(해안)'))}"></label>
         <div class="col-sm-3">
           <select class="form-select form-select-sm" name="seaArea" disabled>
             <option>선택</option>
@@ -290,22 +290,22 @@
 
     <th:block th:if="${internationalCrimeArrest.violationAmount ne null}">
       <div class="mb-3 row" id="violationAmountDiv">
-        <label class="col-sm-2 col-form-label text-center">표시위반 금액(만원)</label>
+        <label class="col-sm-2 col-form-label col-form-label-sm text-center">표시위반 금액(만원)</label>
         <div class="col-sm-2">
-          <input type="number" min="0" class="form-control" name="violationAmount" th:value="${internationalCrimeArrest.violationAmount}" readonly>
+          <input type="number" min="0" class="form-control form-control-sm" name="violationAmount" th:value="${internationalCrimeArrest.violationAmount}" readonly>
         </div>
       </div>
     </th:block>
     <div class="mb-3 row">
-      <label class="col-sm-2 col-form-label text-center">범죄인지</label>
-      <div class="col-sm-2 input-daterange" id="crimeAwarenessDtDiv">
-        <input type="text" class="form-control border-0" name="crimeAwarenessDt" id="crimeAwarenessDt" th:value="${#temporals.format(internationalCrimeArrest.crimeAwarenessDt, 'yyyy-MM-dd HH:mm')}" readonly>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">범죄인지</label>
+      <div class="col-sm-2" id="crimeAwarenessDtDiv">
+        <input type="text" class="form-control form-control-sm" name="crimeAwarenessDt" id="crimeAwarenessDt" th:value="${#temporals.format(internationalCrimeArrest.crimeAwarenessDt, 'yyyy-MM-dd HH:mm')}" readonly>
       </div>
-      <label class="col-sm-2 col-form-label text-center">사건송치</label>
-      <div class="col-sm-2 input-daterange" id="caseSentDtDiv">
-        <input type="text" class="form-control border-0" name="caseSentDt" id="caseSentDt" th:value="${#temporals.format(internationalCrimeArrest.caseSentDt, 'yyyy-MM-dd HH:mm')}" readonly>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">사건송치</label>
+      <div class="col-sm-2" id="caseSentDtDiv">
+        <input type="text" class="form-control form-control-sm" name="caseSentDt" id="caseSentDt" th:value="${#temporals.format(internationalCrimeArrest.caseSentDt, 'yyyy-MM-dd HH:mm')}" readonly>
       </div>
-      <label class="col-sm-2 col-form-label text-center">신병처리</label>
+      <label class="col-sm-2 col-form-label col-form-label-sm text-center">신병처리</label>
       <div class="col-sm-2">
         <select class="form-select form-select-sm" name="processResult" id="processResult" disabled>
           <option>선택</option>
@@ -317,15 +317,15 @@
         </select>
         <th:block th:if="${internationalCrimeArrest.processResult ne null && internationalCrimeArrest.processResult ne '' && !#strings.contains(internationalCrimeArrest.processResult, 'PCR')}">
           <div class="col-auto">
-            <input type="text" class="form-control" name="processResultEtc" th:value="${internationalCrimeArrest.processResult}" readonly>
+            <input type="text" class="form-control form-control-sm" name="processResultEtc" th:value="${internationalCrimeArrest.processResult}" readonly>
           </div>
         </th:block>
       </div>
     </div>
     <div class="mb-3 row justify-content-center">
-      <label for="caseOverviewDiv" class="col-sm-2 col-form-label text-center">범죄사실(사건개요)</label>
+      <label for="caseOverviewDiv" class="col-sm-2 col-form-label col-form-label-sm text-center">범죄사실(사건개요)</label>
       <div class="col-sm-10" id="caseOverviewDiv">
-        <div name='caseOverview' th:utext="${internationalCrimeArrest.caseOverview}"></div>
+        <div class="form-control form-control-sm" name='caseOverview' th:utext="${internationalCrimeArrest.caseOverview}"></div>
       </div>
     </div>
   </form>