모바일 구매요청현황 수정

src/main/webapp/mobile/app/mpomng/MPOMNG02010.html

@@ -4,17 +4,20 @@
       <form id="ITP_FORM_MPOMNG02010_LIST_SEARCH" class="form-horizontal" onsubmit="return false;">
         <input type="hidden" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_BRAND_ID" name="sbrandId" value="">
         <input type="hidden" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_STORE_ID" name="sstoreId" value="">
+   	    <div class="line header">
+			<div class="itp_search_header">구매요청현황</div>
+      	</div>
         <div class="line">
           <label>구매요청일</label>
-        <div class="input-group date_to date">
-          <input type="date" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_FROM_DT" name="fromDt" pattern="\d{4}.\d{2}.\d{2}">
-          <div class="at">~</div>
-          <input type="date" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_TO_DT" name="toDt" pattern="\d{4}.\d{2}.\d{2}">
-        </div>
-      </div>
+	        <div class="date_to date">
+	          <input type="date" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_FROM_DT" name="fromDt" pattern="\d{4}.\d{2}.\d{2}">
+	          <div class="at">~</div>
+	          <input type="date" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_TO_DT" name="toDt" pattern="\d{4}.\d{2}.\d{2}">
+	        </div>
+		</div>
       <div class="line">
         <label>구매요청상태</label>
-        <div class="line_right">
+        <div class="float_left">
           <select id="ITP_FORM_MPOMNG02010_LIST_SEARCH_PCH_REQ_ST_CD" data-select-code="PCH_REQ_ST_CD" class="stcd" name="spchReqStCd">
             <option value="">상태</option>
           </select>
@@ -22,15 +25,15 @@
       </div>
       <div class="line">
         <label>납품장소</label>
-        <div class="search_wrap">
-	        <div class="float_left">
-	          <input id="ITP_FORM_MPOMNG02010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" type="text" placeholder="납품창고" readonly>
-              <input type="hidden" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_WHS_ID" name="swhsId" value="">
-	        </div>
-	        <div class="float_left_btn">
-	          <button id="ITP_BTN_MPOMNG02010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
-	          <button id="ITP_BTN_MPOMNG02010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
-	        </div>
+        <div class="float_left">
+          <input id="ITP_FORM_MPOMNG02010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" type="text" placeholder="납품창고" readonly>
+             <input type="hidden" id="ITP_FORM_MPOMNG02010_LIST_SEARCH_WHS_ID" name="swhsId" value="">
+             <div class="itp_input_btn">
+         		 <button id="ITP_BTN_MPOMNG02010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+  			</div>
+        </div>
+        <div class="float_right_btn">
+          <button id="ITP_BTN_MPOMNG02010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
         </div>
       </div>
       <div class="line" style="height:50px;">
@@ -39,13 +42,13 @@
         </div>
       </div>
       <div class="table_header">
-        <h1>>구매 요청 내역</h1>
+        <h1><구매 요청 내역></h1>
       </div>
       </form>
     </div>
-    <div id="ITP_LIST_MPOMNG02010_LIST_AREA" class="scroll_area row-1-1">
-      <ul id="ITP_LIST_MPOMNG02010_LIST_ROWS" class="panel-group"></ul>
-      <div id="ITP_LIST_MPOMNG02010_LIST_ROWCOPY" style="display:none;">
+    <div id="ITP_LIST_MPOMNG02010_LIST_AREA" class="scroll_area row-1">
+      <ul id="ITP_LIST_MPOMNG02010_LIST_ROWS" class="mb_0"></ul>
+      <div id="ITP_LIST_MPOMNG02010_LIST_ROWCOPY" style="display: block;">
         <li class="history_list list-row">
           <div class="left">
             <div class="nomal">
@@ -77,7 +80,7 @@
           </div>
           <div class="left">
             <div class="nomal">
-              <label style="width: 127px;">구매요청 정보</label>
+              <label>구매요청 정보</label>
               <span>:</span>
               <div class="history">
                 <div class="fnPchReqItemQty">품목수(3)</div>
@@ -91,7 +94,7 @@
               <label>결재정보 </label>
               <span>:</span>
               <div class="history">
-                <div class="fnPchReqRjctNm"></div>
+                <div class="fnPchReqRjctNm">결제완료</div>
               </div>
             </div>
           </div>
@@ -104,7 +107,7 @@
       <div class="line">
         <label>납기요청일</label>
         <div class="line_right">
-          <div class="fnDlvReqDt"></div>
+          <div class="fnDlvReqDt">2022.10.12</div>
         </div>      
       </div>
       <div class="line">
@@ -126,26 +129,27 @@
         </div>
       </div>
       <div class="table_header">
-        <h1>>구매 품목</h1>
+        <h1><구매 품목></h1>
       </div>
     </div>
     <div id="ITP_LIST_MPOMNG02010_VIEW_AREA" class="scroll_area row-2">
-      <ul id="ITP_LIST_MPOMNG02010_VIEW_ROWS" class="panel-group"></ul>
-      <div id="ITP_LIST_MPOMNG02010_VIEW_ROWCOPY" style="display:none;">
+      <ul id="ITP_LIST_MPOMNG02010_VIEW_ROWS" class="mb_0"></ul>
+      <div id="ITP_LIST_MPOMNG02010_VIEW_ROWCOPY" style="display: block;">
         <li class="list-row">
           <div class="left_info">
-            <div class="thick">
-              <div class="fnItemNm">품목명</div>
-              <div>-</div>
-              <div class="fnUnit">2EA</div>
-            </div>
-            <div class="thick">
-              <label class="space0">구매가 :</label>
-              <div class="fnPchReqAmt">1,120,000</div>
-            </div>
-          </div>
+             <div class="thick">
+                <div class="itp_item fnItemNm">품목명</div>
+                <div class="itp_item fnUnit">EA</div>
+              </div>
+              <div class="thick">
+                <div class="itp_gram fnUnitAmt">700g</div>
+              </div>
+              <div class="thick">
+                <div class="itp_amt fnUnitAmt">1,120,000원</div>
+              </div>
+           </div>   
           <div class="right">
-            <div class="fnPchReqQty">2</div>
+            <div class="fnnum fnPchReqQty">2</div>
           </div>
         </li>
       </div>
@@ -166,6 +170,9 @@
       <input type="hidden" id="ITP_FORM_MPOMNG02010_MODIFY_PCH_REQ_ST_CD" name="pchReqStCd" value="">
       <input type="hidden" id="ITP_FORM_MPOMNG02010_MODIFY_MALL_ID" name="mallId" value="">
       <div class="content">
+      	<div class="line header">
+			<div class="itp_search_header fnMenuNm">구매요청현황</div>
+      	</div>
         <div class="line">
           <label>납기요청일</label>
           <input id="ITP_FORM_MPOMNG02010_MODIFY_DLV_REQ_DT" name="dlvReqDt" class="date fnDlvReqDt" data-check-required="empty" type="date" placeholder="">
@@ -173,53 +180,54 @@
         <div class="line">
           <label>구매요청금액</label>
           <div class="line_right">
-            <div class="fnPchReqAmtTot">0원</div>
+            <div class="fnPchReqAmtTot">0 원</div>
           </div>
         </div>
         <div class="line">
           <label>구매가능금액</label>
           <div class="line_right">
-            <div class="fnOrdUseAmt">0원</div>
+            <div class="fnOrdUseAmt">0 원</div>
           </div>
         </div>
         <div class="line">
           <label>납품장소</label>
-          <div class="search_nm">
             <div class="float_left">
               <input type="text" id="ITP_FORM_MPOMNG02010_MODIFY_WHS_NM" class="" name="whsNm" data-check-required="empty" placeholder="매장명" readonly />
               <input type="hidden" id="ITP_FORM_MPOMNG02010_MODIFY_WHS_ID" class="form-control itp_input" name="whsId" value="" />
               <input type="hidden" id="ITP_FORM_MPOMNG02010_MODIFY_LOCATION" class="form-control itp_input" name="location" value="" />
+              <div class="itp_input_btn">
+              	<button id="ITP_BTN_MPOMNG02010_MODIFY_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+              </div>
             </div>
-            <div class="float_left_btn">
-              <button id="ITP_BTN_MPOMNG02010_MODIFY_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+            <div class="float_right_btn">
               <button id="ITP_BTN_MPOMNG02010_MODIFY_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
             </div>
-          </div>
         </div>
-        <div class="line">
+        <div class="header line">
           <div class="table_header">
-            <h1>>구매 품목</h1>
+            <h1><구매 품목></h1>
             <button type="button" id="ITP_BTN_MPOMNG02010_MODIFY_DEL_ROW" class="btn-primary btn-sm ADB">품목삭제</button>
             <button type="button" id="ITP_BTN_MPOMNG02010_MODIFY_ADD_ROW" class="btn-primary btn-sm ADB">품목추가</button>
           </div>
         </div>
       </div>
       <div id="ITP_LIST_MPOMNG02010_MODIFY_AREA" class="scroll_area row-1-1">
-        <ul id="ITP_LIST_MPOMNG02010_MODIFY_ROWS" class="panel-group"></ul>
-        <div id="ITP_LIST_MPOMNG02010_MODIFY_ROWCOPY" style="display:none;">
+        <ul id="ITP_LIST_MPOMNG02010_MODIFY_ROWS" class="mb_0"></ul>
+        <div id="ITP_LIST_MPOMNG02010_MODIFY_ROWCOPY" style="display: block;">
           <li class="list-row">
             <div class="left_info">
-              <div class="check_box"><!-- class 변경 -->
+              <div class="check_box">
                 <div><input type="checkbox" name="brandUnitUnqNo" class="fnBrandUnitUnqNo" /></div>
               </div>
               <div class="thick">
-                <div class="fnItemNm">품목명</div>
-                <div>-</div>
-                <div class="fnUnit">EA</div>
+                <div class="itp_item fnItemNm">품목명</div>
+                <div class="itp_item fnUnit">EA</div>
               </div>
               <div class="thick">
-                <label class="space0">구매가 :</label>
-                <div class="fnUnitAmt"></div>
+                <div class="itp_gram fnUnitAmt">700g</div>
+              </div>
+              <div class="thick">
+                <div class="itp_amt fnUnitAmt">1,120,000원</div>
               </div>
             </div>
             <div class="right">
@@ -259,11 +267,11 @@
     </div>
   </div>
   <div id="ITP_MOBILE_JS"></div>
-  <div id="ITP_POP_MPOMNG02010_WHS_AREA" class="popup2 mobile-pop-close" style="display: none;">
+  <div id="ITP_POP_MPOMNG02010_WHS_AREA" class="popup2 mobile-pop-close" style="display: block;">
     <div class="pop">
       <div class="header">
         <div class="header_left">
-          <label>> 납품장소</label>
+          <label>납품장소</label>
         </div>
         <div class="header_right">
           <button type="button" id="ITP_BTN_MPOMNG02010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
@@ -277,16 +285,17 @@
           <button id="ITP_BTN_MPOMNG02010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
         </form>
       </div>
-      <div class="search_bar">
-        <button id="ITP_BTN_MPOMNG02010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
+      <div class="select_btn">
+        <button id="ITP_BTN_MPOMNG02010_POP_WHS_NM" class="btn_blue">납품장소 V</button>
       </div>
       <div id="ITP_LIST_MPOMNG02010_POP_WHS_AREA" class="popup_scroll">
-        <ul id="ITP_LIST_MPOMNG02010_POP_WHS_ROWS" class="panel-group itp_nav"></ul>
-        <div id="ITP_LIST_MPOMNG02010_POP_WHS_ROWCOPY" style="display:none;">
-          <li class="list-row">
+        <ul id="ITP_LIST_MPOMNG02010_POP_WHS_ROWS" class="mb_0 itp_nav"></ul>
+        <div id="ITP_LIST_MPOMNG02010_POP_WHS_ROWCOPY" style="display: block;">
+          <li class="row_2">
             <div class="scroll_left">
-              <div class="fnWhsNm"></div>
-              <div class="fnLocationNm"></div>
+              <div class="fnWhsNm">브랜드 창고 명A</div>
+              <div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
+              <div class="sub fnLocationNm">누리자 B/D</div>
             </div>
             <div class="scroll_right">
               <button id="ITP_BTN_MPOMNG02010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>
@@ -300,7 +309,7 @@
     <div class="pop">
       <div class="header">
         <div class="header_left">
-          <label>> 품목 검색</label>
+          <label><품목 검색></label>
         </div>
         <div class="header_right">
           <button type="button" id="ITP_BTN_MPOMNG02010_POP_ITEM_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
@@ -313,37 +322,30 @@
           <input id="ITP_FORM_MPOMNG02010_POP_ITEM_KEYWORD" name="sitemNm" type="text" placeholder="품목명/품목번호" />
           <button id="ITP_BTN_MPOMNG02010_POP_ITEM_SEARCH"><img src="../img/search.png"></button>
         </div>
-        <div class="search_bar">
+        <div class="select_btn">
           <button id="ITP_BTN_MPOMNG02010_POP_ITEM_NM" class="btn_blue">품목명▼</button>
         </div>
       </form>
       <div id="ITP_LIST_MPOMNG02010_POP_ITEM_AREA" class="popup_scroll">
-        <ul id="ITP_LIST_MPOMNG02010_POP_ITEM_ROWS" class="panel-group"></ul>
-        <div id="ITP_LIST_MPOMNG02010_POP_ITEM_ROWCOPY" style="display:none;">
-          <li class="row_2">
-            <div class="left" style="width:180px;">
-              <!--<div class="check_box">
-                  <input type="checkbox" id="ITP_FORM_MPOMNG02010_POP_ITEM_CHECKBOX" name="itemId" />
-              </div>-->
-              <div class="thick">
-                <div class="fnItemNm">품목명</div>
-                <div>-</div>
-                <div class="fnUnit">EA</div>
-              </div>
-              <div class="thick" style="font-weight:100;">
-                <div class="space">구매가 :</div>
-                <div class="fnUnitAmt">0</div>
-              </div>
-            </div>
-            <div class="right">
-              <button id="ITP_BTN_MPOMNG02010_POP_ITEM_MINUS" class="POP_ITEM_MINUS">-</button>
-              <div class="num fnPchReqQty">1</div>
-              <button id="ITP_BTN_MPOMNG02010_POP_ITEM_PLUS" class="POP_ITEM_PLUS">+</button>
-            </div>
-            <div class="add">
-              <button id="ITP_BTN_MPOMNG02010_POP_ITEM_ADD" class="POP_ITEM_ADD">추가</button>
-            </div>
-          </li>
+        <ul id="ITP_LIST_MPOMNG02010_POP_ITEM_ROWS" class="mb_0"></ul>
+        <div id="ITP_LIST_MPOMNG02010_POP_ITEM_ROWCOPY" style="display: block;">
+           <li class="row_2">
+             <div class="scroll_left">
+                 <div class="fnItemNm">품목명 001</div>
+                 <div class="sub fnKg">700g</div>
+                 <div class="amt fnItemAmt">30,500원</div>
+             </div>
+             <div class="scroll_right">
+                 <button id="ITP_BTN_MPOMNG01010_POP_ITEM_ADD" class="POP_ITEM_ADD">추가</button>
+             </div>
+           	<div class="itp_num_set">
+             <div class="right">
+			    <button id="ITP_BTN_MPOMNG01010_DETAIL_MINUS">-</button>
+			    <div class="num fnPchReqQty">1</div>
+			    <button id="ITP_BTN_MPOMNG01010_DETAIL_PLUS">+</button>
+			  </div>
+		   </div>
+         </li>
         </div>
       </div>
     </div>

src/main/webapp/mobile/css/style.css

@@ -11,13 +11,13 @@ body{background: #fff; position: relative; width: 100%; height: auto; font-famil
 /* 팝업 */
 section .popup { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
 section .popup .pop { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 70%; height: 250px; padding-top: 30px; background: #fff; border: 2px solid #000; border-top-left-radius: 10px; border-top-right-radius: 10px;}
-section .popup .pop label.pop_label {position:relative; top:10px; font-size: 1.2rem;}
-section .popup .pop div.pop_msg {position:relative; top:10px; font-size: 18px;}
+section .popup .pop label.pop_label {position:relative; top:10px; font-size: 16px;}
+section .popup .pop div.pop_msg {position:relative; top:10px; font-size: 16px;}
 section .popup .pop .pop_line { width: 100%; height: 30px;}
 section .popup .pop .pop_line label { font-size: 16px; margin-left: 20px; float: left; width: auto; text-align: left;}
 section .popup .pop .pop_line div {text-align: right; float: right; font-size: 16px; margin-right: 20px; width: auto;}
 section .popup .pop .popup_btn { position: absolute; background-color: #ccc; bottom: 0; width: 100%; height: 51px; border-top: 2px solid #000;}
-section .popup .pop .popup_btn button { position: relative; float: left; width: 100%; height: 50px; font-size: 1rem; font-weight: 700; border-radius: 0px; border: none;}
+section .popup .pop .popup_btn button { position: relative; float: left; width: 100%; height: 50px; font-size: 18px; font-weight: 100; border-radius: 0px; border: none;}
 section .popup .pop .popup_btn button.ok { width: 64%; border-left: 2px solid #000;}
 section .popup .pop .popup_btn button.cancel {width: 36%;}
 
@@ -266,26 +266,27 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 }
 .content {position:fixed; z-index: 10; padding-top: 10px; width:100%; background: #f4f5f4; border-bottom:1px solid #E0B8AB;}
 .content .header {width:100% !important; height:55px !important; margin:0 !important;}
-.content .line {position: relative; display: inline-block; width: 90%; height: 45px; margin:auto 5%; margin-bottom: -10px;}
+.content .line {position: relative; display: inline-block; width: 99%; height: 45px; margin:auto 1%; margin-bottom: -10px;}
 .content .line div {font-weight: 700;}
 .content .line div.itp_search_header {font-weight:100; background:#fff; margin:5px 10px; padding:9px 10px 4px 9px; text-align: left; color:#b88278;border: 1px solid #aaa; border-radius: 5px;}
 .content .line label {min-width:110px; color:#666; font-size: 18px; margin-left: 10px; float: left; text-align: left; margin-top: 10px; font-weight:100;}
 .content .line label.pay_label {margin:38px 1%; width:98%;}
 .content .line select.label {border: 1px solid #000; font-size: 0.9rem;margin:9px 0 0 5px; float: left; width: 120px; height: 30px; text-align: left;}
 .content .line .search_wrap {float:right; margin-right:10px;}
-.content .line .float_left {float: left; margin-top:2px; width:200px;}
-.content .line .float_left button {top:5px; left:280px; position:absolute; background:transparent; border:none; width:36px; height:36px; padding:0;} 
+.content .line .float_left {float: left; margin-top:2px; width:50%;}
+.content .line .float_left button {float:right; left:-5px; position:relative; background:transparent; border:none; width:36px; height:36px; padding:0;} 
 .content .line .float_left button img {width:22px;}
-.content .line .float_left input {width:200px;}
+.content .line .float_left input {width:100%; font-size:14px;}
 .content .line .float_left.note {width: 100%; padding: 10px;}
 .content .line .float_left.note textarea {width: 100%; height: 100px; border: 1px solid #000; text-align: left;}
 .content .line .float_left div {font-size: 1rem; margin-top: 8px;}
+.content .line .float_left .itp_input_btn {top:5px; margin:0; position:absolute; width:50%;}
 .content .line .float_right_btn {float: left; margin-top: 5px; margin-left: 5px;}
 .content .line .float_right_btn button {padding:0; width:36px; height:36px; border-radius:5px; border:1px solid #aaa;}
 .content .line .float_right_btn button img {width:20px; height:20px;}
-.content .line .float_left select {float: left; width: 150px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem;}
-.content .line .line_right {font-size: 2rem; float: right; margin-right: 0%;}
-.content .line .line_right div {float: right; font-size: 18px;; margin-top: 12px; margin-right: 30px; color:#555;}
+.content .line .float_left select {float: left; width: 100%; height: 36px; border: 1px solid #aaa; border-radius:5px; font-size: 1rem;}
+.content .line .line_right {font-size: 2rem; float: left; margin-right: 0%; width:50%}
+.content .line .line_right div {float: right; font-size: 18px;; margin-top: 12px; color:#555;}
 .content .line .line_right input {position: relative; text-align: right; margin-right: 84px;}
 .content .line .line_right input.m9 {margin-right:93px;}
 .content .line .line_right input.left {text-align: left;}
@@ -293,12 +294,13 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .content .line .line_right select.m9 {margin-right:83px;}
 .content .line .line_right input.date{width:140px; margin-right:132px; height:35px;} 
 .content .line .line_right select {float: right; width: 180px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem; margin-right:93px;}
-.content .line input.date {width: 200px; margin: 5px 0; height: 35px; float: left; text-align:center; font-size:14px;background: url(../img/calender.png)no-repeat 95% 50%/20px auto #fff;}
+.content .line input.date {width: 50%; margin: 5px 0; height: 35px; float: left; text-align:center; font-size:14px;background: url(../img/calender.png)no-repeat 95% 50%/20px auto #fff;}
 .content .line input.date2 {width: 140px; height: 30px; margin-right:133px;}
-.content .line div.date_to {float: right; margin-right:10px;}
+.content .line div.date_to {width:60%; float: left; margin-right:10px;}
+.content .line div.date_to input {width:45%}
 .content .line div.date_to input.year {width: 120px; height: 30px;}
 .content .line div.date_to div.at {width: 3%;  font-size: 1rem; float: right; display: contents;}
-.content .line .search {width: 100%; height: 50px;}
+.content .line .search {width: 100%; height: 50px; padding-top:8px;}
 .content .line .search button {width: 50%; height: 35px; font-size: 1rem; padding: 0;}
 .content .line .search button.col_3 {width: 25%; margin:0 12px;}
 .content .list_line {width:98%; float:left; height:50px;display: inline-flex; margin:0 1%; font-size:12px;}
@@ -355,9 +357,9 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 
 /* scroll_area 조정 */
 .scroll_area {position: absolute; width: 100%; height: 1090px; bottom: 30px; overflow: auto; background: #fff;}
-.row-1{top: 240px;}
-.row-1-1{top:288px;}
-.row-2{top: 282px;}
+.row-1{top: 350px;}
+.row-1-1{top:364px;}
+.row-2{top: 300px;}
 
 .row-3{top: 363px;}
 .row-4{top: 377px;}
@@ -371,18 +373,19 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .scroll_area ul.mb_0 {margin-bottom:0 !important;}
 .scroll_area .itp_non_data {margin:35% auto;}
 .scroll_area li {margin:0; list-style: none; width: 100%; height: 85px; border: 1px solid #ccc; background-color: #fff;}
-.scroll_area li.list-row {height:110px;}
-.scroll_area li .left_info {width:35%; float:left; font-size:1rem;}
+.scroll_area li.list-row {height:100px;}
+.scroll_area li .left_info {width:155px; float:left; font-size:1rem; margin-top:6px;}
 .scroll_area li .left_info div {display: inline-block;}
 .scroll_area li .left_info label{font-size: 1.1rem; font-weight:100; margin-left:10px;}
-.scroll_area li .left_info .thick {float:left;  margin: 2px 0 0 20px; font-size: 18px; text-align: left; width: 90%; font-weight: 100;}
+.scroll_area li .left_info .check_box {padding:20px 3px; height:88px; float:left; width:13px;}
+.scroll_area li .left_info .thick {float:left;  margin: 2px 0 0 8px; font-size: 18px; text-align: left; width: 85%; font-weight: 100;}
 .scroll_area li .left_info .thick .itp_item {color:gray;}
 .scroll_area li .left_info .thick .itp_gram {color:#aaa; font-size:16px;}
 .scroll_area li .left_info .thick .itp_amt {color:#b88278; margin-top: 4px;}
 .scroll_area li .left_info .history {font-weight: 700; font-size: 1.1rem; margin-top:-2px;}
 .scroll_area li .left_info .history input{width: 150px;}
-.scroll_area li .md_info{width:35%; float:left; font-size:1rem; margin-top:25px;}
-.scroll_area li .md_info .thick {float:left;  margin: 2px 0 0 20px; font-size: 18px; text-align: left; width: 90%; font-weight: 100;}
+.scroll_area li .md_info{width:140px; float:right; font-size:1rem; margin-top:17px;}
+.scroll_area li .md_info .thick {float:left;  margin: 2px; font-size: 18px; text-align: left; width: 90%; font-weight: 100;}
 .scroll_area li .md_info .thick div{color:gray;}
 .scroll_area li.history_list {height: 140px; padding-top:8px;}
 .scroll_area li.history_list .btn_check {height:158px; margin-top:-5px; width:90%; float:right; padding-top:7px; }
@@ -420,30 +423,32 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .scroll_area li .detail_right .detail_info div {width: auto; font-size: 1rem; font-weight: 700;}
 .scroll_area li .detail_right .detail_info i {width: auto; font-size: 1rem; margin: 0 20px;}
 .scroll_area li .left .nomal  {width: 100%; float:left; text-align: left; font-size: 1.2rem;}
-.scroll_area li .left .nomal .half {width:50%; float:left;}
-.scroll_area li .left .nomal .half label {font-weight:100;}
+.scroll_area li .left .nomal .half {float:left;}
+.scroll_area li .left .nomal .half label {min-width:auto;}
+.scroll_area li .left .nomal .half div {min-width:auto; margin-right:5px;}
 .scroll_area li .left .nomal  input{width: 85px; height:30px;}
 
 .scroll_area li .scroll_btn {width:10%; height:158px; margin-top:-5px; display:inline-flex;}
 
 .scroll_area li .scroll_btn input {width:15px; margin:auto 10px;}
 .scroll_area li .scroll_btn input:checked ~ .scroll_btn {background:#eee;}
-.scroll_area li .left .nomal span {margin:0 10px;}
+.scroll_area li .left .nomal span {margin:0 5px;}
 
 .scroll_area li .left .nomal .btn_bar{position: relative; width: auto; font-size: 2.2rem;}
 .scroll_area li .left .nomal .btn_bar button{width: 25px; height: 30px; font-size: 1rem; padding: 0;}
 .scroll_area li .left .nomal .btn_bar .col_0{min-width: auto; margin: 5px 20px;}
 
-.scroll_area li .left .nomal label{position:relative; margin-left: 10px;}
+.scroll_area li .left .nomal label{position:relative; margin-left: 10px; font-size:15px; font-weight:100; min-width:100px; text-align:left;}
 .scroll_area li .left .nomal label.sub_info{min-width: 70px; display: inline-flex;}
 .scroll_area li .left .nomal label.col_0{width: auto;}
 .scroll_area li .left .nomal label.col_2{width: 95px;}
 .scroll_area li .left .nomal i{width: 50px; text-align: center;}
-.scroll_area li .left .nomal div{min-width:90px; display: inline-flex; font-weight: 700; font-size: 1.1rem;}
+.scroll_area li .left .nomal div{ display: inline-flex; font-weight: 100; font-size: 15px;}
 .scroll_area li .left .nomal .col_5{min-width:50px;}
 
-.scroll_area li .right {margin: 42px 10px 0 0; position: relative; display: flex; height:35px; font-size: 1.4rem; font-weight: 700; float: right;}
+.scroll_area li .right {margin: 28px 10px 0 0; position: relative; display: flex; height:35px; font-size: 1.4rem; font-weight: 700; float: right;}
 .scroll_area li .right .num {padding:8px 22px; width: auto; border-top:1px solid #E0B8AB; border-bottom:1px solid #E0B8AB;}
+.scroll_area li .right .fnnum {margin:13px 30px;}
 .scroll_area li .right button {background:#e1cac1; color:#fff; border:1px solid #E0B8AB; padding:0px 7px; font-size: 1.5rem; border-radius: 0px;}
 
 /* ITP_FOOTER */
@@ -476,3 +481,15 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 #ITP_FOOTER .itp_modal .itp_mg_top {margin-top: 10px;} 
 #ITP_FOOTER .itp_modal .itp_form .itp_mlb {font-size:13px; height:42px; text-align:left; padding:12px 5px 8px 10px; color:#333; border:1px solid #ccc;}
 #ITP_FOOTER .itp_modal .itp_form .itp_mip {padding: 8px 5px 4px 12px; height:42px; text-align: left; font-size: 16px; border:1px solid #ccc;}
+
+@media screen and (min-width: 550px) {
+	.content .line input.date {width: 70%;}
+	.content .line .line_right {width:70%}
+	.content .line .float_left .itp_input_btn {width:70%;}
+	.content .line .float_left {width:70%;}
+	.content .line div.date_to {width:70%;}
+	.content .line div.date_to input {width:45%}
+	.content .line {margin:-5px 3%;}
+}
+
+