모바일 팝업 수정

src/main/webapp/mobile/app/popup/biz/BIZPOP_PO_PAYMENT.html

@@ -7,8 +7,8 @@
 			</div>
 			<div class="modal-body">
 
-				<div class="itp_form itp_type1 fix">
-					<div class="col-xs-12 itp_ip">
+				<div class="itp_form itp_type1 fix" >
+					<div class="col-xs-12 itp_ip" style="top:-30px;">
 						수발주 <b><span id="ITP_BIZPOP_PO_PAYMENT_PAY_TP_NM"></span></b>을 위해 아래 항목을 입력을 한 후에 결제 버튼을 클릭하여 PG사 결제 절차에 따라 결재을 진행해 주시기 바랍니다.
 						<br>
 						<br>
@@ -36,52 +36,72 @@
 								<input type="hidden" id="ITP_FORM_PO_PAYMENT_POPUP_KICC_ACTION_MOBILE_URL" name="kiccActionMobileUrl" value="" />
 								<input type="hidden" id="ITP_FORM_PO_PAYMENT_POPUP_MALL_ID" name="mallId" value="" />
 
-								<div class="form-group shot">
-									<label class="col-xs-4 itp_lb shot">주문번호</label>
-									<div class="col-xs-9 itp_ip fnPoOrdNo"></div>
+								<div class="line shot">
+									<div class="label_box">
+										<label class="shot">주문번호</label>
+									</div>
+									<div class="info_box">
+										<div class="fnPoOrdNo">ㅁㅇㄹㄴㄹㄴㅁㅇㄹㄴ</div>
+									</div>
 								</div>
-								<div class="form-group shot">
-									<label class="col-xs-4 itp_lb shot">구매자명</label>
-									<div class="col-xs-9 itp_ip fnOrdNm"></div>
+								<div class="line shot">
+									<div class="label_box">
+										<label class="shot">구매자명</label>
+									</div>
+									<div class="info_box">
+										<div class="fnOrdNm"></div>
+									</div>
 								</div>
-								<div class="form-group shot">
-									<label class="col-xs-4 itp_lb shot">상품명</label>
-									<div class="col-xs-9 itp_ip fnGoodsNm"></div>
+								<div class="line shot">
+									<div class="label_box">
+										<label class="itp_lb shot">상품명</label>
+									</div>
+									<div class="info_box">
+										<div class="fnGoodsNm">삼풍명ㅁ</div>
+									</div>
 								</div>
-								<div class="form-group">
-									<label class="col-xs-4 itp_lb">결제금액*</label>
-									<div class="col-xs-9 itp_ip">
-										<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_GOODS_AMT" class="form-control itp_input" name="goodsAmt" />
+								<div class="line">
+									<div class="label_box">
+										<label class="itp_lb">결제금액*</label>
+									</div>
+									<div class="info_box">
+										<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_GOODS_AMT" class="itp_input" name="goodsAmt" />
 									</div>
 								</div>
-								<div class="form-group shot">
-									<label class="col-xs-4 itp_lb shot">결제방법*</label>
-									<div class="col-xs-9 itp_ip">
-										<select id="ITP_FORM_PO_PAYMENT_POPUP_PAY_METHOD" class="form-control itp_input" name="payMethod">
+								<div class="line shot">
+									<div class="label_box">
+										<label class="itp_lb shot">결제방법*</label>
+									</div>
+									<div class="info_box">
+										<select id="ITP_FORM_PO_PAYMENT_POPUP_PAY_METHOD" class="itp_input" name="payMethod">
 											<option value="11">신용카드</option>
 											<option value="21">계좌이체</option>
 										</select>
 									</div>
 								</div>
-								<div class="form-group">
-									<label class="col-xs-4 itp_lb">휴대폰번호*</label>
-									<div class="col-xs-9 itp_ip">
-										<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_TEL" class="form-control itp_input" name="ordTel" placeholder="010-0000-0000" />
+								<div class="line">
+									<div class="label_box">
+										<label class="">휴대폰번호*</label>
+									</div>
+									<div class="info_box">
+										<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_TEL" class="itp_input" name="ordTel" placeholder="010-0000-0000" />
 									</div>
 								</div>
-								<div class="form-group shot">
-									<label class="col-xs-4 itp_lb shot">이메일</label>
-									<div class="col-xs-9 itp_ip">
-										<div class="col-xs-3 itp_pd_none">
+								<div class="line border shot">
+									<div class="label_box">
+										<label class="shot">이메일</label>
+									</div>
+									<div class="info_box">
+										<div class="itp_pd_none email">
 											<input id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL" name="ordEmail" class="" type="hidden">
-											<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL_ID" class="form-control itp_input" name="emailId" />
+											<input type="text" id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL_ID" class="itp_input" name="emailId" />
 										</div>
-										<div class="col-xs-a" style="padding:0 5px;">@</div>
-										<div class="col-xs-3 itp_pd_none">
-											<input id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL_NM" name="emailNm" class="form-control itp_input" type="text" data-check-required="empty">
+										<div style="padding:0 5px;">@</div>
+										<div class="itp_pd_none email">
+											<input id="ITP_FORM_PO_PAYMENT_POPUP_ORD_EMAIL_NM" name="emailNm" class="itp_input" type="text" data-check-required="empty">
 										</div>
 										<div class="col-xs-5">
-											<select name="emailCd" id="ITP_FORM_PO_PAYMENT_POPUP_EMAIL_CD" data-select-code="EMAIL_CD" class="form-control itp_input">
+											<select name="emailCd" id="ITP_FORM_PO_PAYMENT_POPUP_EMAIL_CD" data-select-code="EMAIL_CD" class="itp_input">
 											</select>
 										</div>
 									</div>
@@ -302,8 +322,10 @@
 				</div>
 			</div>
 			<div class="modal-footer">
-				<button type="button" id="ITP_BTN_PO_PAYMENT_CLOSE_POP" class="btn btn-danger btn-sm CLB">&nbsp;&nbsp;취소&nbsp;&nbsp;</button>
-				<button type="button" id="ITP_BTN_PO_PAYMENT_CONFIRM_POP" class="btn btn-primary btn-sm SAB" style="display: inline-block;">&nbsp;&nbsp;결제요청&nbsp;&nbsp;</button>
+				<div class="pop_btn_bar">
+					<button type="button" id="ITP_BTN_PO_PAYMENT_CLOSE_POP" class="btn btn-danger btn-sm CLB">&nbsp;&nbsp;취소&nbsp;&nbsp;</button>
+					<button type="button" id="ITP_BTN_PO_PAYMENT_CONFIRM_POP" class="btn btn-primary btn-sm SAB" style="display: inline-block;">&nbsp;&nbsp;결제요청&nbsp;&nbsp;</button>
+				</div>
 			</div>
 		</div>
 	</div>

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

@@ -576,12 +576,24 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .modal {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; outline: 0;}
 .itp_modal {z-index: 10000;}
 .modal-dialog {position: relative; width: auto; margin: 10px;}
+.modal-dialog .line {display:flex;border:1px solid #aaa; border-bottom:none; height:40px;}
+.modal-dialog .border{border-bottom:1px solid #aaa;}
+.modal-dialog .border .label_box {height:38px !important;}
+.modal-dialog .line .label_box {padding:8px; width:100px; height:39px; background:#eee; border-right:1px solid #aaa;}
+.modal-dialog .line .label_box label {font-size:14px; font-weight:100;}
+.modal-dialog .line .info_box {width: calc(100% - 100px); padding:10px; display:flex;}
+.modal-dialog .line .info_box .email {width:30%;}
+.modal-dialog .line .info_box input{position:relative; top:-4px; width:100%; margin:0;}
+.modal-dialog .line .info_box select{position:relative; top:-4px; width:100%; height:27px;}
+.modal-dialog .line .info_box div{font-size:14px; font-weight:100;}
 .modal-content {position: relative; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; outline: 0; box-shadow: 0 3px 9px rgb(0 0 0 / 50%);}
-.modal-header {min-height: 16.43px; padding: 15px; border-bottom: 1px solid #e5e5e5; padding: 12px 15px 12px 15px; background: #337ab7; cursor: move;}
+.modal-header {min-height: 16.43px; padding: 15px; border-bottom: 1px solid #e5e5e5; color:#fff; padding: 12px 15px 12px 15px; background: #337ab7; cursor: move;}
 .modal-header .close { margin-top: -2px; color: #fff; opacity: 1;}
 button.close {-webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0;}
 .close {float: right; font-size: 21px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #fff;}
 .modal-body {position: relative; padding: 15px;}
 .modal-footer {padding: 15px; text-align: right; border-top: 1px solid #e5e5e5;}
+.modal-footer .pop_btn_bar {float:right; margin-top:12px;}
 .modal-footer .btn {border-radius:6px; padding: 6px 12px;}
 
+