모바일 배송지 변경 개발중

src/main/webapp/WEB-INF/views/mob/common/fragments/FooterMob.html

@@ -64,6 +64,46 @@
 			</div>
 		</section>
 	</footer>
+	
+	<!-- 배송지관리_팝업 -->
+	<div class="modal pop_full adrsChange_Pop" id="adrsChangePop" tabindex="-1" role="dialog" aria-labelledby="adrsChangeLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+	</div>
+	<!-- //배송지관리_팝업 -->
+	
+	<!-- 배송지추가_팝업 -->
+	<div class="modal pop_full adrsAdd_pop" id="adrsAddPop" tabindex="-1" role="dialog" aria-labelledby="adrsAddLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+		<a href="#close-modal" rel="modal:close" id="refundPop_close" class="close-modal">Close</a>
+	</div>
+	<!-- //배송지추가_팝업 -->
+	
+	<!-- 배송지수정_팝업 -->
+	<div class="modal pop_full adrsModify_pop" id="adrsModifyPop" tabindex="-1" role="dialog" aria-labelledby="adrsModifyLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+			</div>
+		</div>
+		<a href="#close-modal" rel="modal:close" id="adrsAddPop_close" class="close-modal">Close</a>
+	</div>
+	<!-- //배송지수정_팝업 -->
+	
+	<!-- daum 우편번호_팝업 -->
+	<!-- 2021.04.02 다음우편번호 공통화 작업 -->
+	<!-- 다음우편번호 팝업 -->
+	<div class="modal pop_full couponModify_pop" id="daumZipcodePop" tabindex="-1" role="dialog" aria-labelledby="couponModifyLabel" aria-hidden="true" style="z-index:3000;">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div id="zipcode_layer"></div>
+			</div>
+		</div>
+	</div>
 
 <script th:inline="javascript">
 /*<![CDATA[*/
@@ -72,6 +112,99 @@
 /*]]>*/
 </script>
 
+<script th:inline="javascript">
+/*<![CDATA[*/
+var element_layer = document.getElementById('zipcode_layer');
+var cfnGetDaumRoadAddr = function(data) {
+	// 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분입니다.
+	// 예제를 참고하여 다양한 활용법을 확인해 보세요.
+	// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분
+
+	// 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
+	// 내려오는 변수가 값이 없는 경우엔 공백('') 값을 가지므로, 이를 참고하여 분기한다.
+	let fullRoadAddr = data.roadAddress; // 도로명 주소 변수
+	let extraRoadAddr = ''; // 도로명 조합형 주소 변수
+
+	// 법정동명이 있을 경우 추가한다. (법정리는 제외)
+	// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
+	if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
+		extraRoadAddr += data.bname;
+	}
+
+	// 건물명이 있고, 공동주택일 경우 추가한다.
+	if (data.buildingName !== '' && data.apartment === 'Y') {
+		extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
+	}
+	
+	// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
+	if (extraRoadAddr !== '') {
+		extraRoadAddr = ' (' + extraRoadAddr + ')';
+	}
+	
+	// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
+	if (fullRoadAddr !== '') {
+		fullRoadAddr += extraRoadAddr;
+	}
+	
+	return fullRoadAddr;
+}
+
+var cfnOpenDaumAddr = function(daumZip) {
+	// 다은우편번호팝업 노출
+	$("#daumZipcodePop").modal("show");
+	
+	if ($('html').hasClass('is-ie')) {
+		daumZip.open();
+	} else {
+		daumZip.embed(element_layer);
+		
+		// iframe을 넣은 element를 보이게 한다.
+		element_layer.style.display = 'block';
+
+		// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
+		cfnInitLayerPosition();
+	}
+}
+
+var cfnCloseDaumAddr = function() {
+	
+	// iframe을 넣은 element를 안보이게 한다.
+	element_layer.style.display = 'none';
+	
+	// 다음우편번호팝업 닫기
+	$("#daumZipcodePop").modal("hide");
+}
+
+// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
+// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
+// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
+var cfnInitLayerPosition = function() {
+	//let width = 420; //우편번호서비스가 들어갈 element의 width
+	//let height = 502; //우편번호서비스가 들어갈 element의 height
+	let borderWidth = 1; //샘플에서 사용하는 border의 두께
+
+	// 위에서 선언한 값들을 실제 element에 넣는다.
+	//element_layer.style.width = width + 'px';
+	//element_layer.style.height = height + 'px';
+	element_layer.style.border = borderWidth + 'px solid';
+	
+	// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
+	/*
+	element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth) + 'px';
+	element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth) + 'px';
+	*/
+	
+	// 다음 레이어 적용
+	$("#__daum__layer_1").css("z-index", 3000);
+}
+
+// 다음우편번호팝업 닫기
+$("#daumZipcodePop_close").on("click", function(){
+	$("#daumZipcodePop").hide();
+});
+/*]]>*/
+</script>
+
 </th:block>
 
 </html>

src/main/webapp/WEB-INF/views/mob/order/OrderDeliveryAddrInfoMob.html

@@ -29,9 +29,7 @@
 			<div class="fold_head">
 				<a href="javascript:void(0)">
 					<div>
-						<div class="fold_tit">
-							<span>배송지 정보</span>
-						</div>
+						<div class="fold_tit"><span>배송지 정보</span></div>
 						<div class="data">
 							<span id="recipAddr" th:text="${deliveryAddrInfo.recipBaseAddr} + '   ' + ${deliveryAddrInfo.recipDtlAddr}"></span>
 						</div>
@@ -46,9 +44,7 @@
 					</button>
 					<dl>
 						<div class="company">
-							<dt>
-								<span class="sr-only">배송지명</span>
-							</dt>
+							<dt><span class="sr-only">배송지명</span></dt>
 							<dd>
 								<th:block th:text="${deliveryAddrInfo.recipNm}"></th:block> 
 								<span class="icon_tag"> 
@@ -60,37 +56,39 @@
 							</dd>
 						</div>
 						<div class="phone">
-							<dt>
-								<span class="sr-only">휴대폰 번호</span>
-							</dt>
-							<dd th:text="${deliveryAddrInfo.recipPhnno}">010-1234-5647</dd>
+							<dt><span class="sr-only">휴대폰 번호</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipPhnno}"></dd>
 						</div>
 						<div class="addr">
-							<dt>
-								<span class="sr-only">배송주소</span>
-							</dt>
-							<dd th:text="${deliveryAddrInfo.recipBaseAddr} + '    ' + ${deliveryAddrInfo.recipDtlAddr}">서울시 영등포구 은행로 11,8층(여의도동,일신빌딩)</dd>
+							<dt><span class="sr-only">배송주소</span></dt>
+							<dd th:text="${deliveryAddrInfo.recipBaseAddr} + '    ' + ${deliveryAddrInfo.recipDtlAddr}"></dd>
 						</div>
+						
 						<div class="ship_request ship_select">
 							<span>배송요청 사항</span>
 							<div class="ship_option">
 								<div class="form_field">
-									<div class="select_custom delivery_list">
-										<!-- 비활성화시 disabled 추가 -->
+									<div class="select_custom delivery_list"> <!-- 비활성화시 disabled 추가 -->
 										<div class="combo">
-											<div class="select">선택</div>
+											<div class="select" th:text="${deliveryAddrInfo.delvMemo}">선택</div>
 											<ul class="list">
 												<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
-												<li>문 앞</li>
+												<li>문 앞</li> 
 												<li>직접 받고 부재 시 문 앞</li>
-												<li>경비실</li>
+												<li>경비실</li> 
 												<li>택배함</li>
-												<li>기타사항</li>
+												<li class="select_etc">기타사항</li>
 											</ul>
 										</div>
 									</div>
 								</div>
 							</div>
+							<div class="ship_etc">
+								<div class="form_text etc">
+									<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+									<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+								</div>
+							</div>
 						</div>
 					</dl>
 				</div>
@@ -103,6 +101,7 @@
 
 <script th:inline="javascript">
 var dispYn = [[${order.dispYn}]]; // 노출여부
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]]; // 노출여부
 
 //화면노출
 var deliveryAddrInfoDispYn = function(temp) {
@@ -117,8 +116,47 @@ var deliveryAddrInfoDispYn = function(temp) {
 
 //컨텐츠 호출
 $(document).ready( function() {
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	$("#orderForm .ship_request .delivery_list li").removeClass("selected");
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+
+	// 배송메모설정
+	$("#orderForm .ship_request .delivery_list li").each(function(){
+		if (delvMemo == $(this).text()) {
+			$(this).addClass("selected");
+		}
+	});
+	
+	if (tempMemo) {
+		$("#orderForm .ship_request .delivery_list .select").text("기타사항");
+		$("#orderForm input[name=delvMemoText]").attr("disabled", false);
+		$("#orderForm input[name=delvMemoText]").val(delvMemo);
+		$("#orderForm .delvMemo li").eq(4).addClass("selected");
+		$(".ship_etc").show();
+	}
+	
 	// 화면펼침
 	deliveryAddrInfoDispYn(dispYn);
+	
+	// 콤보박스 
+	var od_delivery_list = new sCombo('#orderForm .ship_select .select_custom.delivery_list');
+	
+	// 210405_배송요청 사항 기타사항 selected시 기타사항 input 구현
+	$("#orderForm .select_custom.delivery_list .combo .list > li").on("click", function(){
+		if ($("#orderForm .select_etc").hasClass("selected")){
+			$(".ship_etc").show();
+		} else {
+			$(".ship_etc").hide();
+		}
+	});
 });
 </script>
 

src/main/webapp/WEB-INF/views/mob/order/OrderFormMob.html

@@ -28,7 +28,8 @@
 <form id="order_info" name="order_info" method="post" action="/order/pay/result/response" ></form>
 
 <!-- 주문금액정보표현 -->
-<form id="order_info" name="orderAmtForm">
+<form id="orderAmtForm" name="orderAmtForm">
+	<!-- 고객정보 -->
 	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="orderInfo" id="orderInfo">
 		<tbody>
 			<tr style="height:30px;">
@@ -55,6 +56,7 @@
 			</tr>
 		</tbody>
 	</table>
+	<!-- //고객정보 -->
 	
 	<!-- 사은품정보 -->
 	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="freegiftInfo">
@@ -71,6 +73,7 @@
 			<td class="freegiftGoodsArr"></td>
 		</tr>
 	</table>
+	<!-- //사은품정보 -->
 	
 	<!-- 주문상세금액 -->
 	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="orderDetailInfo" id="orderDetailInfo">
@@ -163,6 +166,7 @@
 			</th:block>
 		</th:block>
 	</table>
+	<!-- //주문상세금액 -->
 	
 	<!-- 배송단위목록 -->
 	<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none; width:100%;" name="delvFeeCdInfo" id="delvFeeCdInfo">
@@ -183,6 +187,7 @@
 			</tr>
 		</th:block>
 	</table>
+	<!-- //배송단위목록 -->
 	
 	<!-- 주문금액합계 -->
 	<table border="1" style="font-size:10px; text-align:center;  margin-top:20px; display:none; width:100%;" name="orderSumAmtInfo" id="orderSumAmtInfo">
@@ -225,6 +230,7 @@
 			<td class="savePntSumAmt">0</td>
 		</tr>
 	</table>
+	<!-- //주문금액합계 -->
 </form>
 <!-- //주문금액정보표현 -->
 
@@ -234,43 +240,35 @@
 	<section class="content odPayment">
 		<form action="" class="form_wrap">
 			<!-- 주문내역 -->
-			<div class="inner wide" id="orderListInfo"  style="display:none">
-			</div>
+			<div class="inner wide" id="orderListInfo"  style="display:none"></div>
 			<!-- //주문내역 -->
 
 			<!-- 주문고객 -->
-			<div class="inner wide" id="custemerInfo"  style="display:none">
-			</div>
+			<div class="inner wide" id="custemerInfo"  style="display:none"></div>
 			<!-- //주문고객 -->
 
 			<!-- 배송지 정보 -->
-			<div class="inner wide" id="deliveryAddrInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="deliveryAddrInfo" style="display:none"></div>
 			<!-- //배송지 정보 -->
 
 			<!-- 개인통관고유부호 -->
-			<div class="inner wide" id="entryInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="entryInfo" style="display:none"></div>
 			<!-- //개인통관고유부호 -->
 
 			<!-- 주문제작상품동의 -->
-			<div class="inner wide" id="madeInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="madeInfo" style="display:none"></div>
 			<!-- //주문제작상품동의 -->
 
 			<!-- 사은품 -->
-			<div class="inner wide" id="freegiftInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="freegiftInfo" style="display:none"></div>
 			<!-- //사은품 -->
 
 			<!-- 할인/혜택 사용 -->
-			<div class="inner wide" id="dcAmtInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="dcAmtInfo" style="display:none"></div>
 			<!-- //할인/혜택 사용 -->
 
 			<!-- 결제수단 선택 -->
-			<div class="inner wide" id="paymentInfo" style="display:none">
-			</div>
+			<div class="inner wide" id="paymentInfo" style="display:none"></div>
 			<!-- //결제수단 선택 -->
 
 			<!-- 결제 정보 -->
@@ -278,7 +276,7 @@
 				<div class="tbl_wrap pay_wrap">
 					<div class="tbl_tit">
 						<h3>결제 예정금액</h3>
-						<strong class="pay"><span>123,456,789</span>원</strong>
+						<strong class="pay"><span class="realOrdAmt"></span>원</strong>
 					</div>
 					<div class="tbl type1">
 						<table>
@@ -375,6 +373,25 @@
 	</section>
 </main>
 
+<!-- 할인쿠폰 변경 팝업 -->
+<div class="modal pop_full couponModify_pop" id="couponModifyPop" tabindex="-1" role="dialog" aria-labelledby="couponModifyLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+		</div>
+	</div>
+	<a href="#close-modal" rel="modal:close" id="couponModifyPop_close" class="close-modal">Close</a>
+</div>
+<!-- //할인쿠폰 변경 팝업 -->
+
+<!-- 배송비 쿠폰선택_팝업 -->
+<div id="couponSelectPop02" class="popup_box couponSelectPop couponSelectPop02">
+	<div class="lap">
+	</div>
+</div>
+<!-- //배송비 쿠폰선택_팝업 -->
+	
+	
+
 <script th:inline="javascript">
 // 배송관련정보 변수선언
 var cartGoodsList		= [[${cartGoodsList}]]			// 배송목록
@@ -411,7 +428,7 @@ var jsonObj 			= {};
 // 컨텐츠 호출
 $(document).ready( function() {
 	// 999. 개발화면정보설정
-	var devTemp = true;
+	var devTemp = false;
 	var arr = []
 	arr[0] = "orderInfo";
 	arr[1] = "freegiftInfo";
@@ -559,14 +576,13 @@ var deliveryAddrInfoSet = function(delvObj, temp) {
 			$("#deliveryAddrInfo").html(result);
 			
 			// 배송정보설정
-			$(".recipNm").text($("#orderForm input[name='recipNm']").val());
-			$(".recipPhnno").text($("#orderForm input[name='recipPhnno']").val());
-			$(".recipZipcode").text($("#orderForm input[name='recipZipcode']").val());
-			$(".recipBaseAddr").text($("#orderForm input[name='recipBaseAddr']").val());
-			$(".recipDtlAddr").text($("#orderForm input[name='recipDtlAddr']").val());
-			$(".delvMemo").text($("#orderForm input[name='delvMemo']").val());
-			
-			/*
+			$("#orderAmtForm .recipNm").text($("#orderForm input[name='recipNm']").val());
+			$("#orderAmtForm .recipPhnno").text($("#orderForm input[name='recipPhnno']").val());
+			$("#orderAmtForm .recipZipcode").text($("#orderForm input[name='recipZipcode']").val());
+			$("#orderAmtForm .recipBaseAddr").text($("#orderForm input[name='recipBaseAddr']").val());
+			$("#orderAmtForm .recipDtlAddr").text($("#orderForm input[name='recipDtlAddr']").val());
+			$("#orderAmtForm .delvMemo").text($("#orderForm input[name='delvMemo']").val());
+
 			// 2. 버튼기능구현
 			// 2.1 회원 배송지변경 팝업열기
 			$('#btn_adrsChange_pop').on("click", function(){
@@ -610,6 +626,7 @@ var deliveryAddrInfoSet = function(delvObj, temp) {
 				}
 			});
 			
+			/*
 			// 2.2 배송요청사항 팝업열기
 			$("#btn_rqstModify_pop").on("click", function(e){
 				var jsonObj = new Object();
@@ -979,14 +996,14 @@ var paymentInfoSet = function() {
 					
 					// 주문데이타 생성
 					var orderData = {
-						"custNm"				: $(".custNm").text()
-						,"email"				: $(".email").text()
-						,"recipNm"				: $(".recipNm").text()
-						,"recipPhnno"			: $(".recipPhnno").text()
-						,"recipZipcode"			: $(".recipZipcode").text()
-						,"recipBaseAddr"		: $(".recipBaseAddr").text()
-						,"recipDtlAddr"			: $(".recipDtlAddr").text()
-						,"delvMemo"				: $(".delvMemo").text()
+						"custNm"				: $("#orderAmtForm .custNm").text()
+						,"email"				: $("#orderAmtForm .email").text()
+						,"recipNm"				: $("#orderAmtForm .recipNm").text()
+						,"recipPhnno"			: $("#orderAmtForm .recipPhnno").text()
+						,"recipZipcode"			: $("#orderAmtForm .recipZipcode").text()
+						,"recipBaseAddr"		: $("#orderAmtForm .recipBaseAddr").text()
+						,"recipDtlAddr"			: $("#orderAmtForm .recipDtlAddr").text()
+						,"delvMemo"				: $("#orderAmtForm .delvMemo").text()
 						,"prePntDcAmtYn"		: prePntDcAmtYn
 						,"orderDetailList"		: orderDetailList
 						,"delvFeeCdList"		: delvFeeCdList
@@ -994,15 +1011,15 @@ var paymentInfoSet = function() {
 						,"entryNo"				: entryNo
 						,"pgGb"					: pgGb
 						,"payMeans"				: payMeans // 네이버페이, 카카오페이
-						,"payAmt"				: $(".realOrdSumAmt").text()
-						,"ordNm"				: $(".custNm").text()
-						,"ordPhnno"				: $(".cellPhnno").text()
-						,"goodsNm"				: $(".goodsNm").eq(0).text()
+						,"payAmt"				: $("#orderAmtForm .realOrdSumAmt").text()
+						,"ordNm"				: $("#orderAmtForm .custNm").text()
+						,"ordPhnno"				: $("#orderAmtForm .cellPhnno").text()
+						,"goodsNm"				: $("#orderAmtForm .goodsNm").eq(0).text()
 						,"ordGoodsQty"			: ordGoodsQty
-						,"freegiftValArr"		: $(".freegiftValArr").text().split(",")
-						,"freegiftSqArr"		: $(".freegiftSqArr").text().split(",")
-						,"freegiftGoodsArr"		: $(".freegiftGoodsArr").text().split(",")
-						,"freegiftUsePointArr"	: $(".freegiftUsePointArr").text().split(",")
+						,"freegiftValArr"		: $("#orderAmtForm .freegiftValArr").text().split(",")
+						,"freegiftSqArr"		: $("#orderAmtForm .freegiftSqArr").text().split(",")
+						,"freegiftGoodsArr"		: $("#orderAmtForm .freegiftGoodsArr").text().split(",")
+						,"freegiftUsePointArr"	: $("#orderAmtForm .freegiftUsePointArr").text().split(",")
 					};
 					
 					$.ajax( {
@@ -1175,7 +1192,7 @@ var dcAmtInfoSet = function() {
 					var rmPntAmt 			= parseInt($("#orderForm input[name='rmPntAmt']").val());
 					var freegiftUsePnt 		= parseInt($(".freegiftUsePnt").text());
 					var pntDcAmt 			= parseInt($("#orderForm input[name='pntDcAmtStr']").val());
-					var realOrdAmt 			= parseInt($(".realOrdSumAmt").text());
+					var realOrdAmt 			= parseInt($("#orderAmtForm .realOrdSumAmt").text());
 					var applyPntDcAmt 		= (realOrdAmt * 40) / 100;
 					
 					rmPntAmt				= rmPntAmt - freegiftUsePnt;
@@ -1219,7 +1236,7 @@ var dcAmtInfoSet = function() {
 					}
 					
 					// 포인트 적용
-					$(".pntDcSumAmt").text(pntDcAmt);
+					$("#orderAmtForm .pntDcSumAmt").text(pntDcAmt);
 					$("#pntDcAmt").text("-"+pntDcAmt.addComma()+" 원");
 					
 					// 상품권리렛기능
@@ -1263,7 +1280,7 @@ var dcAmtInfoSet = function() {
 					}
 					
 					// 상품권 적용
-					$(".gfcdUseSumAmt").text(gfcdUseAmt);
+					$("#orderAmtForm .gfcdUseSumAmt").text(gfcdUseAmt);
 					$("#gfcdUseAmt").text("-"+gfcdUseAmt.addComma()+" 원");
 					
 					// 금액전체계산
@@ -1493,7 +1510,7 @@ var custCpnApplyTemp = function(obj) {
 	var goodsCartCpnSumAmt 	= 0;
 	var cpnType				= "";
 	
-	$("input[name='cpnDcAmt']").each(function(){
+	$("#orderForm input[name='cpnDcAmt']").each(function(){
 		cpnType = $(this).parent().find("input[name=cpnType]").val();
 		
 		// 상품, 장바구니쿠폰 할인 금액만 합계 적용
@@ -1748,8 +1765,8 @@ var prePntDcAmtReset = function() {
 
 // 1.15 포인트리셋기능
 var pntDcAmtReset = function() {
-	$(".pntDcSumAmt").text("0");
-	$("input[name='pntDcAmtStr']").val("");
+	$("#orderAmtForm .pntDcSumAmt").text("0");
+	$("#orderFrom input[name='pntDcAmtStr']").val("");
 	$("#pntDcAmt").text("0");
 	
 	// 상품권리셋기능
@@ -1758,8 +1775,8 @@ var pntDcAmtReset = function() {
 
 // 1.16 상품권리셋기능
 var gfcdUseAmtReset = function() {
-	$(".gfcdUseSumAmt").text("0");
-	$("input[name='gfcdUseAmtStr']").val("");
+	$("#orderAmtForm .gfcdUseSumAmt").text("0");
+	$("#orderForm input[name='gfcdUseAmtStr']").val("");
 	$("#gfcdUseAmt").text("0");
 	
 	// 금액전체계산
@@ -1773,7 +1790,7 @@ var custCpnSumAmtCal = function() {
 	var goodsCartCpnSumAmt 	= 0;
 	var cpnType				= "";
 	
-	$("input[name='cpnDcAmt']").each(function(){
+	$("#orderForm input[name='cpnDcAmt']").each(function(){
 		cpnType = $(this).parent().find("input[name=cpnType]").val();
 		cpnDcSumAmt = cpnDcSumAmt + parseInt($(this).val());
 		
@@ -1791,10 +1808,10 @@ var custCpnSumAmtCal = function() {
 	// 상품, 장바구니쿠폰 할인 금액만 합계 적용
 	if (goodsCartCpnSumAmt > 0) {
 		$(".maxdisc_amount .goodsCartCpnDcAmt").text("-"+goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
-		$(".goodsCartCpnSumAmt").text("-"+goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
+		$("#orderAmtForm .goodsCartCpnSumAmt").text("-"+goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
 	} else {
 		$(".maxdisc_amount .goodsCartCpnDcAmt").text(goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
-		$(".goodsCartCpnSumAmt").text(goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
+		$("#orderAmtForm .goodsCartCpnSumAmt").text(goodsCartCpnSumAmt.addComma()); // 쿠폰할인금액합계
 	}
 	
 	// 전체쿠폰 할인 금액 합계 적용
@@ -1806,7 +1823,7 @@ var custCpnSumAmtCal = function() {
 		$("#couponDcSumAmt").text(cpnDcSumAmt.addComma()); // 쿠폰할인금액합계
 	}
 
-	$(".cpnDcSumAmt").text(cpnDcSumAmt);
+	$("#orderAmtForm .cpnDcSumAmt").text(cpnDcSumAmt);
 	
 	var delvSumAmt = orgSumDelvFee;
 	
@@ -1824,9 +1841,9 @@ var custCpnSumAmtCal = function() {
 	
 	// 2021.03.06 주문상세 테이블 적용
 	// 포인트금액 상품상세에 포인트금액 분배 작업
-	var prePntDcAmtYn 		= $("input[name='rdi-beforpoint']:checked").val();
-	var leftPntAmt			= parseInt($(".pntDcSumAmt").text());
-	var leftGfcdAmt			= parseInt($(".gfcdUseSumAmt").text());
+	var prePntDcAmtYn 		= $("#orderForm input[name='rdi-beforpoint']:checked").val();
+	var leftPntAmt			= parseInt($("#orderAmtForm .pntDcSumAmt").text());
+	var leftGfcdAmt			= parseInt($("#orderAmtForm .gfcdUseSumAmt").text());
 	var cartSqLenght		= $(".cartSq").length; 
 	var index				= 1;
 	
@@ -1841,12 +1858,12 @@ var custCpnSumAmtCal = function() {
 	var delvCpnDcSumAmt		= 0;
 	var cpnDcSumAmt			= 0;
 	var prePntDcSumAmt		= 0;
-	var pntDcSumAmt 		= parseInt($(".pntDcSumAmt").text());
-	var gfcdUseSumAmt 		= parseInt($(".gfcdUseSumAmt").text());
+	var pntDcSumAmt 		= parseInt($("#orderAmtForm .pntDcSumAmt").text());
+	var gfcdUseSumAmt 		= parseInt($("#orderAmtForm .gfcdUseSumAmt").text());
 	var realOrdSumAmt		= 0;
 	var savePntSumAmt		= 0;
 	
-	$(".cartSq").each(function(){
+	$("#orderAmtForm .cartSq").each(function(){
 		var orgCurrPrice 	= parseInt($(this).parent().find(".orgCurrPrice").text());
 		var cpn1DcAmt		= parseInt($(this).parent().find(".cpn1DcAmt").text());
 		var optAddPrice 	= parseInt($(this).parent().find(".optAddPrice").text());
@@ -1889,7 +1906,7 @@ var custCpnSumAmtCal = function() {
 	});
 	
 	// 포인트, 상품권 금액 분배
-	$(".cartSq").each(function(){
+	$("#orderAmtForm .cartSq").each(function(){
 		var ordAmt 			= parseInt($(this).parent().find(".ordAmt").text());
 		var dcSumAmt		= parseInt($(this).parent().find(".dcSumAmt").text()); 
 		var tempDiv 		= parseInt((ordAmt / ordSumAmt) * 100);
@@ -1931,21 +1948,17 @@ var custCpnSumAmtCal = function() {
 	$("#orderAmtForm .realOrdSumAmt").text(realOrdSumAmt);
 	$("#orderAmtForm .savePntSumAmt").text(savePntSumAmt);
 	
-	$("#realOrdAmt").text(realOrdSumAmt.addComma()); // 총 결제 예정 금액
-	$(".realOrdAmt").text(realOrdSumAmt.addComma() + " 원"); // 총 결제 예정 금액
-	
+	$("#realOrdAmt").text(realOrdSumAmt.addComma()); 					// 총 결제 예정 금액
+	$("#orderForm .realOrdAmt").text(realOrdSumAmt.addComma()); 		// 총 결제 예정 금액
 	$("#orderForm .orgGoodsSumAmt").text(orgGoodsSumAmt.addComma());
 	
 	var tempSavePnt			= savePntSumAmt - prePntDcAmt;
 	
 	// 사은품사용 후 보유포인트	
-	var rmPntAmt 			= parseInt($("input[name='rmPntAmt']").val());
-	var freegiftUsePnt 		= parseInt($(".freegiftUsePnt").text());
+	var rmPntAmt 			= parseInt($("#orderForm input[name='rmPntAmt']").val());
+	var freegiftUsePnt 		= parseInt($("#orderAmtForm .freegiftUsePnt").text());
 	rmPntAmt 				= rmPntAmt - freegiftUsePnt; 
-	$(".rmPntAmt").text(rmPntAmt.addComma());
-	
-	// 걸제영역
-	//$("#btn_payment").text("동의 후 "+realOrdSumAmt.addComma()+" 원 결제하기");
+	$("#orderAmtForm .rmPntAmt").text(rmPntAmt.addComma());
 	
 	// 적립포인트
 	$("#savePntSumAmt").text(savePntSumAmt.addComma()+" P");
@@ -1973,8 +1986,8 @@ var custCpnSumAmtCal = function() {
 		});
 	});
 	
-	$(".freegiftValArr").text(freegiftValArr);				// 사은품시퀀스배열
-	$(".freegiftUsePointArr").text(freegiftUsePointArr);	// 사은품사용포인트배열
+	$("#orderAmtForm .freegiftValArr").text(freegiftValArr);				// 사은품시퀀스배열
+	$("#orderAmtForm .freegiftUsePointArr").text(freegiftUsePointArr);	// 사은품사용포인트배열
 };
 
 // 1.18 배송지정보 설정
@@ -2000,7 +2013,7 @@ var delvMemoSet = function(delvMemoObj) {
 	
 	$("#orderForm input[name=delvMemo]").val(delvMemoObj.delvMemo);		// input 값에 설정
 	$("#delvMemo").text(delvMemoObj.delvMemo);							// 메모 text 설정
-	$(".delvMemo").text(delvMemoObj.delvMemo);							// 메모 text 설정
+	$("#orderAmtForm .delvMemo").text(delvMemoObj.delvMemo);							// 메모 text 설정
 }
 </script>
 

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrAddPopMob.html

@@ -0,0 +1,280 @@
+<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsAddLabel">배송지 추가</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text" class="form_control" name="recipNm" placeholder="받는분">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
+											<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked="">
+												<label for="chk-default-addrs"><span>기본 배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-11" value="문 앞">
+											<label for="rdi-11"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-21" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-21"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-31" value="경비실">
+											<label for="rdi-31"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-41" value="택배함">
+											<label for="rdi-41"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-51" value="기타사항">
+											<label for="rdi-51"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText" placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var isLogin				= [[${isLogin}]];				// 로그인여부
+
+//컨텐츠 호출
+$(document).ready( function() {
+	// 배송요청사항 버튼기능
+	$("#deliveryAddForm input[name=rdi-request1]").each(function(){
+		// 기타기능 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryAddForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryAddForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_addr_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryAddFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryAddForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
+	}
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: 0
+		, "dispYn"			: "Y"
+		, "defaultYn"		: defaultYn
+		, "recipNm"			: $("#deliveryAddForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryAddForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryAddForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryAddForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryAddForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	// 비회원
+	if (isLogin == false) {
+		// 부모장으로 값 전닫
+		delvAddrSet(delvObj);
+		// 팝업닫기
+		$(".close-modal").trigger("click");
+		return false;
+	}
+	
+	var jsonData = JSON.stringify(delvObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/createCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			if (result != null) {
+				delvObj.custDelvAddrSq = result;
+				
+				// 부모장으로 값 전닫
+				delvAddrSet(delvObj);
+			}
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryAddFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryAddForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipPhnno]").val())) {
+		mcxDialog.alert("휴대폰번호를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipPhnno]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryAddForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsAddPop").modal("show");
+		},
+		width: '100%'
+	});
+	cfnOpenDaumAddr(daumZip);
+}
+</script>
+
+
+
+
+
+
+
+
+

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrChangePopMob.html

@@ -0,0 +1,146 @@
+<!-- 배송지변경 팝업 -->
+<form name="delvAddrChangeForm" id="delvAddrChangeForm">
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsChangeLabel">배송지 관리</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="delivery_list">
+					<!-- 배송지목록 -->
+					<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
+						<div class="ship_info">
+							<dl>
+								<div class="name">
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd>
+										<th:block th:text="${deliveryAddr.recipNm}"></th:block>
+										<div class="badge_wrap">
+											<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
+												<em class="order_badge">기본배송지</em> 
+											</th:block>
+											<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
+												<em class="order_badge order_bullet_badge">총알배송</em>
+											</th:block>
+										</div>
+									</dd>
+								</div>
+								<div class="phone">
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd th:text="${deliveryAddr.recipPhnno}"></dd>
+								</div>
+								<div class="addr">
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
+								</div>
+								<div class="ship_request">
+									<dl>
+										<dt>배송요청 사항</dt>
+										<dd th:text="${deliveryAddr.delvMemo}"></dd>
+									</dl>
+								</div>
+							</dl>
+							<div class="btn_group btn_group_flex">
+								<div><button type="button" class="btn btn_gost btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}" id="btn_addrModify_pop"><span>수정</span></button></div>
+								<div><button type="button" class="btn btn_dark btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button></div>
+							</div>
+							
+							<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
+							<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
+							<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
+							<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
+							<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
+							<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
+						</div>
+					</th:block>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop">
+			<span>배송지 추가</span>
+		</button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+//컨텐츠 호출
+$(document).ready( function() {
+});
+
+// 2. 버튼기능구현
+// 2.1 배송지선택버튼
+$(".btn_sel_delvAddr").on("click", function(){
+	
+	// custDelvAddrSq 부모창으로 전달
+	var delvObj = {
+		"custDelvAddrSq"	: $(this).attr("value")
+		, "dispYn"			: "Y"
+		, "recipNm"			: $(this).parent().find("input[name=recipNm]").val()
+		, "recipPhnno"		: $(this).parent().find("input[name=recipPhnno]").val()
+		, "recipZipcode"	: $(this).parent().find("input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $(this).parent().find("input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $(this).parent().find("input[name=recipDtlAddr]").val()
+		, "delvMemo"		: $(this).parent().find("input[name=delvMemo]").val()
+	}
+	
+	// 부모장으로 값 전닫
+	deliveryAddrInfoSet(delvObj);
+	
+	// 팝업닫기
+	$(".close-modal").trigger("click");
+});
+
+// 2.2 배송지수정버튼
+$(".btn_addrModify_pop").on("click", function(){
+		
+	var obj = {
+		"custDelvAddrSq" : $(this).attr("value")
+	} 
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrModifyPop',
+		data		: JSON.stringify(obj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsModifyPop .modal-dialog .modal-content").html(result);
+			$("#adrsModifyPop").modal("show");
+		}
+	});	
+});
+
+
+// 2.3 배송지추가 팝업열기
+$('#btn_adrsAdd_pop').on("click", function(){
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/delvAddrAddPop',
+		data		: JSON.stringify(jsonObj),
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			$("#adrsAddPop .modal-dialog .modal-content").html(result);
+			$("#adrsAddPop").modal("show");
+		}
+	});	
+});
+
+
+
+
+
+
+</script>

src/main/webapp/WEB-INF/views/mob/popup/DelvAddrModifyPopMob.html

@@ -0,0 +1,295 @@
+<form name="deliveryModifyForm" id="deliveryModifyForm">
+	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
+	
+	<div class="modal-header htop">
+		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<div class="inner wide">
+				<div class="tbl_wrap">
+					<div class="tbl tbl_dlvr">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<td>
+										<span class="sr-only">받는분</span>
+										<input type="text"class="form_control" name="recipNm" placeholder="받는분" th:value="${deliveryAddrInfo.recipNm}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">휴대폰 번호</span>
+										<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="sr-only">배송 주소</span>
+										<div class="input_wrap">
+											<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
+											<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							
+											<input type="text" class="form_control" placeholder="배송주소" name="recipAddr" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+											<input type="text" class="form_control" placeholder="상세주소" name="recipDtlAddr" th:value="${deliveryAddrInfo.recipDtlAddr}">
+											<button type="button" class="btn btn_sch" onclick="fnOpenDaumAddr();">
+												<span class="sr-only">우편번호 찾기</span>
+											</button>
+										</div>
+										<div class="default_addrs">
+											<div class="form_field">
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'Y'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn" checked>
+												</th:block>
+												<th:block th:if="${deliveryAddrInfo.defaultYn} == 'N'">
+													<input id="chk-default-addrs" type="checkbox" name="defaultYn">
+												</th:block>
+												<label for="chk-default-addrs"><span>기본배송지로 등록</span></label>
+											</div>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="tbl_wrap">
+					<div class="tbl_tit">
+						<h3>배송 요청사항</h3>
+					</div>
+					<div class="tbl tbl_request">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>
+							<tbody>
+								<tr>
+									<th class="sr-only">문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-1" value="문 앞">
+											<label for="rdi-1"><span>문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">직접 받고 부재 시 문 앞</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-2" value="직접 받고 부재 시 문 앞">
+											<label for="rdi-2"><span>직접 받고 부재 시 문 앞</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">경비실</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-3" value="경비실"><label
+												for="rdi-3"><span>경비실</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">택배함</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-4" value="택배함">
+											<label for="rdi-4"><span>택배함</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">기타사항</th>
+									<td>
+										<div class="form_field">
+											<input type="radio" name="rdi-request1" id="rdi-5" value="5">
+											<label for="rdi-5"><span>기타사항</span></label>
+										</div>
+									</td>
+								</tr>
+								<tr>
+									<th class="sr-only">보관 장소만 입력(필수)</th>
+									<td>
+										<div class="form_text">
+											<input type="text" name="delvMemoText"  placeholder="보관 장소만 입력 (필수)" maxlength="30" disabled>
+											<p class="desc_txt">보관 장소 외 다른 내용 입력시 통보 없이 삭제 될 수 있습니다.</p>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
+	</div>
+</form>
+
+<script th:inline="javascript">
+var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
+//컨텐츠 호출
+$(document).ready( function() {
+	
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var tempMemo = true;
+	
+	// 배송요청사항설정
+	for (i=0 ; i<delvMemoArr.length ; i++) {
+		if (delvMemoArr[i] == delvMemo) {
+			tempMemo = false;
+		}
+	}
+	
+	if (tempMemo) {
+		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
+		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
+	}
+	
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		var temp = $(this).parent().find('span').text();
+		if (delvMemo == temp) {
+			$(this).attr("checked", true);
+		}
+	});
+	
+	// 배송요청사항 버튼기능
+	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
+		// 버튼기능
+		$(this).on("click", function(){
+			var temp = $(this).parent().find('span').text();
+			$("#deliveryModifyForm input[name=delvMemoText]").val("");
+			if (temp == "기타사항") {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+			} else {
+				$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", true);
+			}
+		});
+	});
+});
+
+// 배송지등록버튼
+$("#btn_delivery_modi_save").on("click", function(){
+	
+	// 유효성체크
+	if (!deliveryModifyFormCheck()){
+		return false;
+	}
+	
+	// 기본배송지여부
+	var defaultYn = "N";
+	if ($("#deliveryModifyForm input[name=defaultYn]").is(":checked")) {
+		defaultYn = "Y";
+	}
+	
+	// 기타사항일때 텍스트 등록
+	var delvMemo = $("#deliveryModifyForm input[name=rdi-request1]:checked").parent().find('span').text();
+	if ("기타사항" == delvMemo) {
+		delvMemo = $("#deliveryModifyForm input[name=delvMemoText]").val();
+	}
+	
+	// 배송지정보설정
+	var jsonObj = {
+		"defaultYn"			: defaultYn
+		, "custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+		, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+		, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+		, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+		, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+		, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+		, "delvMemo"		: delvMemo
+	}
+	
+	var jsonData = JSON.stringify(jsonObj);
+	
+	$.ajax( {
+		type		: "POST",
+		url 		: '/common/updateCustDeliveryAddr',
+		data		: jsonData,
+		dataType 	: 'html',
+		beforeSend : function(xhr, settings) {
+			xhr.setRequestHeader("AJAX"			, "true");
+			xhr.setRequestHeader('Accept'		, 'application/json');
+			xhr.setRequestHeader('Content-Type'	, 'application/json');
+			gagajf.showProgressbar(true);
+		},
+		success 	: function(result) {
+			// custDelvAddrSq 부모창으로 전달
+			var delvObj = {
+				"custDelvAddrSq"	: parseInt($("#deliveryModifyForm input[name=custDelvAddrSq]").val())
+				, "dispYn"			: "Y"
+				, "recipNm"			: $("#deliveryModifyForm input[name=recipNm]").val()
+				, "recipPhnno"		: $("#deliveryModifyForm input[name=recipPhnno]").val()
+				, "recipZipcode"	: $("#deliveryModifyForm input[name=recipZipcode]").val()
+				, "recipBaseAddr"	: $("#deliveryModifyForm input[name=recipBaseAddr]").val()
+				, "recipDtlAddr"	: $("#deliveryModifyForm input[name=recipDtlAddr]").val()
+				, "delvMemo"		: delvMemo
+			}
+			
+			// 부모장으로 값 전닫
+			delvAddrSet(delvObj);
+			
+			// 팝업닫기
+			$(".close-modal").trigger("click");
+		}
+	});
+});
+
+// 유효성체크 함수
+var deliveryModifyFormCheck = function() {
+	// TODO 유효성 체크 추가
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
+		mcxDialog.alert("이름을 입력해주세요.");
+		$('#deliveryModifyForm input[name=custNm]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipZipcode]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipBaseAddr]").val())) {
+		mcxDialog.alert("배송주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipAddr]').focus();
+		return false;
+	}
+	
+	if (gagajf.isNull($("#deliveryModifyForm input[name=recipDtlAddr]").val())) {
+		mcxDialog.alert("상세주소를 입력해주세요.");
+		$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+		return false;
+	}
+	
+	return true;
+}
+
+// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	$("body").css("overflow", "hidden");
+	
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+			
+			cfnCloseDaumAddr();
+			
+			$("#adrsModifyPop").modal("show");
+		},
+		width: '100%'
+	});
+	
+	cfnOpenDaumAddr(daumZip);
+}
+</script>

src/main/webapp/WEB-INF/views/web/order/OrderFormWeb.html

@@ -30,7 +30,7 @@
 <!-- //주문정보form -->
 
 <!-- 주문금액정보표현 -->
-<form id="orderForm" name="orderAmtForm">
+<form id="orderAmtForm" name="orderAmtForm">
 	<table border="1" style="font-size:10px; text-align:center; margin-top:20px; display:none; width:100%;" name="orderInfo" id="orderInfo">
 		<tbody>
 			<tr style="height:30px;">

src/main/webapp/WEB-INF/views/web/popup/DelvAddrAddPopWeb.html

@@ -1,9 +1,9 @@
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsAddLabel">배송지 등록</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+<form class="form_wrap form_full" name="deliveryAddForm" id="deliveryAddForm">
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsAddLabel">배송지 등록</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
 			<div class="area_adrsinfo">
 				<h6>배송지 정보</h6>
 				<div class="default_addrs">
@@ -16,7 +16,7 @@
 					<label class="input_label sr-only">받는 분</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" id="">
+							<input type="text" class="form_control" name="recipNm" placeholder="받는 분">
 						</div>
 					</div>
 				</div>	
@@ -24,7 +24,7 @@
 					<label class="input_label sr-only">휴대폰 번호</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" id="">
+							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호">
 						</div>
 					</div>
 				</div>
@@ -52,8 +52,8 @@
 				<h6>배송요청 사항</h6> 
 					<div class="form_field">
 					<div>
-						<input type="radio" name="rdi-request1" id="rdi-request11" value="문앞" >
-						<label for="rdi-request11"><span>문앞</span></label>
+						<input type="radio" name="rdi-request1" id="rdi-request11" value="문 앞" >
+						<label for="rdi-request11"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접받고 부재시 문 앞" checked>
@@ -72,19 +72,19 @@
 						<label for="rdi-request15"><span>기타사항</span></label>
 						<div class="info_box">
 							<div class="input_wrap">
-								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)">
+								<input type="text" name="delvMemoText" class="form_control" maxlength="30" placeholder="보관장소만 입력 (필수)" disabled>
 								<p>보관 장소 외 다른 내용 입력시 통보없이 삭제 될 수 있습니다.</p>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-		</form>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
-</div>
+</form>
 
 <script th:inline="javascript">
 var isLogin				= [[${isLogin}]];				// 로그인여부
@@ -107,21 +107,6 @@ $(document).ready( function() {
 	});
 });
 
-// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
-var fnOpenDaumAddr = function() {
-	let daumZip = new daum.Postcode({
-		oncomplete: function(data) {
-			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
-			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
-			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
-			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
-			cfnCloseDaumAddr();
-		},
-		width: '100%'
-	});
-	cfnOpenDaumAddr(daumZip);
-}
-
 // 배송지등록버튼
 $("#btn_delivery_addr_save").on("click", function(){
 	
@@ -139,7 +124,7 @@ $("#btn_delivery_addr_save").on("click", function(){
 	// 기타사항일때 텍스트 등록
 	var delvMemo = $("#deliveryAddForm input[name=rdi-request1]:checked").parent().find('span').text();
 	if ("기타사항" == delvMemo) {
-		delvMemo = $("input[name=delvMemoText]").val();
+		delvMemo = $("#deliveryAddForm input[name=delvMemoText]").val();
 	}
 	
 	// custDelvAddrSq 부모창으로 전달
@@ -225,7 +210,22 @@ var deliveryAddFormCheck = function() {
 	}
 	
 	return true;
-} 
+}
+
+//우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryAddForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryAddForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryAddForm input[name=recipDtlAddr]').focus();
+			cfnCloseDaumAddr();
+		},
+		width: '100%'
+	});
+	cfnOpenDaumAddr(daumZip);
+}
 </script>
 
 

src/main/webapp/WEB-INF/views/web/popup/DelvAddrChangePopWeb.html

@@ -1,61 +1,61 @@
 <!-- 배송지변경 팝업 -->
 <form name="delvAddrChangeForm" id="delvAddrChangeForm">
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsChangeLabel">배송지 선택</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<ul>
-			<!-- 배송지목록 -->
-			<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
-				<li>
-					<div class="adrs_box">
-						<dl>
-							<div>
-								<dt><span class="sr-only">배송지명</span></dt>
-								<dd>
-									<th:block th:text="${deliveryAddr.recipNm}"></th:block>
-									<span class="icon_tag">
-										<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
-											<em class="tag">기본 배송지</em>
-										</th:block>
-										<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
-											<em class="tag primary_line">총알배송</em>
-										</th:block>
-									</span>
-								</dd>
-							</div>
-							<div>
-								<dt><span class="sr-only">휴대폰 번호</span></dt>
-								<dd th:text="${deliveryAddr.recipPhnno}"></dd>
-							</div>
-							<div>
-								<dt><span class="sr-only">배송주소</span></dt>
-								<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
-							</div>
-							<div>
-								<dt>배송요청 사항&nbsp;:&nbsp;</dt>
-								<dd th:text="${deliveryAddr.delvMemo}"></dd>
-							</div>
-						</dl>
-						<button type="button" class="btn btn_default btn_sm btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}"><span>수정</span></button>
-						<button type="button" class="btn btn_dark btn_sm btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button>
-						
-						<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
-						<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
-						<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
-						<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
-						<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
-						<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
-					</div>
-				</li>
-			</th:block>
-		</ul>
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsChangeLabel">배송지 선택</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
+			<ul>
+				<!-- 배송지목록 -->
+				<th:block th:each="deliveryAddr, index : ${deliveryAddrList}">
+					<li>
+						<div class="adrs_box">
+							<dl>
+								<div>
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd>
+										<th:block th:text="${deliveryAddr.recipNm}"></th:block>
+										<span class="icon_tag">
+											<th:block th:if="${deliveryAddr.defaultYn} == 'Y'">
+												<em class="tag">기본 배송지</em>
+											</th:block>
+											<th:block th:if="${deliveryAddr.shotDelvUseYn} == 'Y'">
+												<em class="tag primary_line">총알배송</em>
+											</th:block>
+										</span>
+									</dd>
+								</div>
+								<div>
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd th:text="${deliveryAddr.recipPhnno}"></dd>
+								</div>
+								<div>
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd th:text="${deliveryAddr.recipBaseAddr} + ' ' + ${deliveryAddr.recipDtlAddr}"></dd>
+								</div>
+								<div>
+									<dt>배송요청 사항&nbsp;:&nbsp;</dt>
+									<dd th:text="${deliveryAddr.delvMemo}"></dd>
+								</div>
+							</dl>
+							<button type="button" class="btn btn_default btn_sm btn_addrModify_pop" th:value="${deliveryAddr.custDelvAddrSq}"><span>수정</span></button>
+							<button type="button" class="btn btn_dark btn_sm btn_sel_delvAddr" th:value="${deliveryAddr.custDelvAddrSq}"><span>선택</span></button>
+							
+							<input type="hidden" name="recipNm" 			th:value="${deliveryAddr.recipNm}"/>
+							<input type="hidden" name="recipPhnno" 			th:value="${deliveryAddr.recipPhnno}"/>
+							<input type="hidden" name="recipZipcode" 		th:value="${deliveryAddr.recipZipcode}"/>
+							<input type="hidden" name="recipBaseAddr" 		th:value="${deliveryAddr.recipBaseAddr}"/>
+							<input type="hidden" name="recipDtlAddr" 		th:value="${deliveryAddr.recipDtlAddr}"/>
+							<input type="hidden" name="delvMemo" 			th:value="${deliveryAddr.delvMemo}"/>
+						</div>
+					</li>
+				</th:block>
+			</ul>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop"><span>배송지 추가</span></button>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_adrsAdd_pop"><span>배송지 추가</span></button>
-</div>
 </form>
 
 <script th:inline="javascript">

src/main/webapp/WEB-INF/views/web/popup/DelvAddrModifyPopWeb.html

@@ -1,11 +1,11 @@
-<div class="modal-header">
-	<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
-</div>
-<div class="modal-body">
-	<div class="pop_cont">
-		<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
-			<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
-			
+<form class="form_wrap form_full" name="deliveryModifyForm" id="deliveryModifyForm">
+	<input type="hidden" class="form_control" name="custDelvAddrSq" th:value="${deliveryAddrInfo.custDelvAddrSq}">
+	
+	<div class="modal-header">
+		<h5 class="modal-title" id="adrsModifyLabel">배송지 수정</h5>
+	</div>
+	<div class="modal-body">
+		<div class="pop_cont">
 			<div class="area_adrsinfo">
 				<h6>배송지 정보</h6>
 				<div class="default_addrs">
@@ -23,7 +23,7 @@
 					<label class="input_label sr-only">받는 분</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" id="" th:value="${deliveryAddrInfo.recipNm}">
+							<input type="text" class="form_control" name="recipNm" placeholder="받는 분" th:value="${deliveryAddrInfo.recipNm}">
 						</div>
 					</div>
 				</div>	
@@ -31,7 +31,7 @@
 					<label class="input_label sr-only">휴대폰 번호</label>
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
-							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" id="" th:value="${deliveryAddrInfo.recipPhnno}">
+							<input type="text" class="form_control" name="recipPhnno" placeholder="휴대폰 번호" th:value="${deliveryAddrInfo.recipPhnno}">
 						</div>
 					</div>
 				</div>
@@ -40,8 +40,8 @@
 					<div class="ui_col_12">
 						<div class="input_wrap"> 
 							<input type="hidden" name="recipZipcode" placeholder="우편번호" th:value="${deliveryAddrInfo.recipZipcode}" readonly="readonly">
-							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소"th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
-							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" th:value="${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
+							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" th:value="${deliveryAddrInfo.recipZipcode} + '    '+ ${deliveryAddrInfo.recipBaseAddr}" readonly="readonly">
 						</div>
 						<button type="button" class="btn btn_dark btn_sm" onclick="fnOpenDaumAddr();">
 							<span>우편번호 찾기</span>
@@ -57,12 +57,12 @@
 					</div>
 				</div>
 			</div>
-			<div class="area_request">       
+			<div class="area_request">
 				<h6>배송요청 사항</h6> 
 				<div class="form_field">
 					<div>
-						<input type="radio" name="rdi-request1" id="rdi-request11" value="문앞">
-						<label for="rdi-request11"><span>문앞</span></label>
+						<input type="radio" name="rdi-request1" id="rdi-request11" value="문 앞">
+						<label for="rdi-request11"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request1" id="rdi-request12" value="직접받고 부재시 문 앞">
@@ -88,19 +88,19 @@
 					</div>
 				</div>
 			</div>
-		</form>
+		</div>
 	</div>
-</div>
-<div class="modal-footer">
-	<button type="button" class="btn btn_dark" id="btn_delivery_addr_save"><span>배송지 등록</span></button>
-</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn_dark" id="btn_delivery_modi_save"><span>배송지 등록</span></button>
+	</div>
+</form>
 
 <script th:inline="javascript">
 var delvMemo = [[${deliveryAddrInfo.delvMemo}]];
 //컨텐츠 호출
 $(document).ready( function() {
 	
-	var delvMemoArr = ["문앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
 	var tempMemo = true;
 	
 	// 배송요청사항설정
@@ -112,8 +112,8 @@ $(document).ready( function() {
 	
 	if (tempMemo) {
 		$("#deliveryModifyForm input[name=rdi-request1]").eq(4).attr("checked", true);
-		$("input[name=delvMemoText]").attr("disabled", false);
-		$("input[name=delvMemoText]").val(delvMemo);
+		$("#deliveryModifyForm input[name=delvMemoText]").attr("disabled", false);
+		$("#deliveryModifyForm input[name=delvMemoText]").val(delvMemo);
 	}
 	
 	$("#deliveryModifyForm input[name=rdi-request1]").each(function(){
@@ -138,27 +138,11 @@ $(document).ready( function() {
 	});
 });
 
-// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
-var fnOpenDaumAddr = function() {
-	let daumZip = new daum.Postcode({
-		oncomplete: function(data) {
-			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
-			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
-			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
-			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
-			cfnCloseDaumAddr();
-		},
-		width: '100%'
-	});
-	
-	cfnOpenDaumAddr(daumZip);
-}
-
 // 배송지등록버튼
-$("#btn_delivery_addr_save").on("click", function(){
+$("#btn_delivery_modi_save").on("click", function(){
 	
 	// 유효성체크
-	if (!deliveryAddFormCheck()){
+	if (!deliveryModifyFormCheck()){
 		return false;
 	}
 	
@@ -222,7 +206,7 @@ $("#btn_delivery_addr_save").on("click", function(){
 });
 
 // 유효성체크 함수
-var deliveryAddFormCheck = function() {
+var deliveryModifyFormCheck = function() {
 	// TODO 유효성 체크 추가
 	if (gagajf.isNull($("#deliveryModifyForm input[name=recipNm]").val())) {
 		mcxDialog.alert("이름을 입력해주세요.");
@@ -250,4 +234,20 @@ var deliveryAddFormCheck = function() {
 	
 	return true;
 } 
+
+//우편번호 DAUM을 이용한 우편번호 팝업 레이어
+var fnOpenDaumAddr = function() {
+	let daumZip = new daum.Postcode({
+		oncomplete: function(data) {
+			$('#deliveryModifyForm input[name=recipAddr]').val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipZipcode]').val(data.zonecode);
+			$('#deliveryModifyForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
+			$('#deliveryModifyForm input[name=recipDtlAddr]').focus();
+			cfnCloseDaumAddr();
+		},
+		width: '100%'
+	});
+	
+	cfnOpenDaumAddr(daumZip);
+}
 </script>

src/main/webapp/WEB-INF/views/web/popup/DelvMemoChangePopWeb.html

@@ -9,7 +9,7 @@
 				<div class="form_field">
 					<div>
 						<input type="radio" name="rdi-request3" id="rdi-request31">
-						<label for="rdi-request31"><span>문앞</span></label>
+						<label for="rdi-request31"><span>문 앞</span></label>
 					</div>
 					<div>
 						<input type="radio" name="rdi-request3" id="rdi-request32">
@@ -47,7 +47,7 @@ var delvMemo				= [[${delvMemo}]];				// 로그인여부
 
 // 초기배송메모설정
 $(document).ready( function() {
-	var delvMemoArr = ["문앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
+	var delvMemoArr = ["문 앞", "직접받고 부재시 문 앞", "경비실", "택배함"];
 	var tempMemo = true;
 	
 	// 배송요청사항설정

src/main/webapp/ux/mo/css/common_m.css

@@ -249,7 +249,7 @@ input[type="reset"], input[type="button"], input[type="submit"], button {line-he
 
 /* 체크박스 */
 .form_field input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
-.form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; font-size: 12px; line-height: 1.4;font-weight: 300;letter-spacing: 0;} 
+.form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:2.6rem; cursor:pointer; font-size: 1.2rem; line-height: 2.0;font-weight: 300;letter-spacing: 0;} 
 .form_field input[type="checkbox"] + label:before{ 
   content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
   background: url('/images/mo/ico_chk_rdi.png') no-repeat;
@@ -811,12 +811,12 @@ main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;}
 .tabbar{-webkit-transform: translate(0, 55px);-ms-transform: translate(0, 55px);-moz-transform: translate(0, 55px); transform: translate(0, 55px);transition-duration: 0.3s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 10; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
 .tabbar.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);}
 .tabbar .tabbar-inner{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify;-moz-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; padding: 10px 20px;}
-.tabbar .tabbar-inner [class*=btn-]{display: block; width: 35px; height: 35px; font-size: 0;position: relative;}
-.tabbar .tabbar-inner [class*=btn-].btn-menu{background: url(/images/mo/ico_tabbar_menu.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-my{background: url(/images/mo/ico_tabbar_my.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-home{background: url(/images/mo/ico_tabbar_home.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-wish{background: url(/images/mo/ico_tabbar_wish.png) no-repeat center; background-size: 30px 25px;}
-.tabbar .tabbar-inner [class*=btn-].btn-history{background: url(/images/mo/ico_tabbar_history.png) no-repeat center; background-size: 30px 25px;}
+.tabbar .tabbar-inner [class*=btn-]{display: block;width: 2.50rem; height: 2.2666rem; font-size: 0;position: relative;background: url(/images/mo/ico_tabbar.png) no-repeat center;background-size: 18.0rem 2.16rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-menu{background-position: 0.1rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-my{background-position: -3.7rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-home{background-position: -7.5rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-wish{background-position: -11.5rem;}
+.tabbar .tabbar-inner [class*=btn-].btn-history{background-position: -15.6rem;}
 
 
 /* Full메뉴 */
@@ -1342,6 +1342,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 /* 닫기 아이콘 */
 .dialog-close-btn {
+	display: none;
 	position:absolute;
 	top:0;
 	right:0;

src/main/webapp/ux/mo/css/layout_m.css

@@ -34,14 +34,14 @@
 .cs .faq .quick_list ul li:nth-child(10) {border-bottom: none;}
 .cs .quick_list ul li a {display: flex; display: -ms-flexbox; justify-content: center; width:100%; height: 100%; line-height:2.6rem; font-size:1.6rem; font-weight: 200; align-items: center; color:#222; letter-spacing:-0.025em;}
 .cs .search_wrap .faq_search {height:19rem; background:#f5f5f5; padding:5rem; box-sizing:border-box; text-align:center;}
-.cs .search_wrap .faq_search .search_box {display:inline-block; position:relative; width:600px; padding-right:5rem; border-bottom:0.2rem solid #222; box-sizing: border-box; text-align:left;}
+.cs .search_wrap .faq_search .search_box {display:inline-block; position:relative; width:60.0rem; padding-right:5rem; border-bottom:0.2rem solid #222; box-sizing: border-box; text-align:left;}
 .cs .search_wrap .faq_search .search_box input[type='text'] {display:inline-block; width:100%; height:5rem; padding-left:0; border:none; background:none; color:#222; font-size:3rem; font-weight:200; letter-spacing:-0.025em; line-height:1;}
 .cs .search_wrap .faq_search .search_box input[type='text']::placeholder {color:#888;}
 .cs .search_wrap .faq_search .search_box .btn_search {display:inline-block; position:absolute; right:0; top:1.1rem; width:2.8rem; height:2.8rem; overflow:hidden; background:url('/images/pc/ico_search_faq.png') no-repeat 50% 50%; font-size:0.1rem; text-indent:-9999px; z-index:2}
 .cs .search_wrap .faq_search .t_info {width:60rem; margin:1.5rem auto 0; font-weight:200; text-align:left;}
 .cs .search_wrap p{margin-top:0.8rem; font-size:1.2rem; color:#666666;}
 .cs .fold_nav {width:100%;}
-.cs .fold_nav ul {display: flex; display: -ms-flexbox; flex-wrap: wrap; /*margin-top:-12px*/}
+.cs .fold_nav ul {display: flex; display: -ms-flexbox; flex-wrap: wrap; /*margin-top:-1.2rem*/}
 .cs .fold_nav ul li {margin:0.4rem 0.4rem 0 0;}
 .cs .fold_nav ul li a {display:inline-block;padding:1rem 1.6rem;border: 0.1rem solid #ddd;font-size:1.2rem;font-weight: 300;line-height: 1; letter-spacing:-0.025em; border-radius:2rem;}
 .cs .fold_nav ul li a.on {position: relative; background: #222; color:#fff; border: 0.1rem solid #222;}
@@ -82,7 +82,7 @@
 .cs .cs_contactUs_1{background-color:#f5f5f5}
 .cs .cs_contactUs_1 .inner{margin-bottom:1.2rem; padding-top:2.5rem; padding-bottom:2.5rem; background-color:#fff;}
 .cs .cs_contactUs_1 .inner:last-child{padding-top:0; margin-bottom:0;}
-.cs .cs_contactUs_1 .inner.m_pb45{padding-bottom:45px;}
+.cs .cs_contactUs_1 .inner.m_pb45{padding-bottom:4.5rem;}
 .cs .cs_contactUs_1 .qna_list{transition:0.4s;}
 .cs .cs_contactUs_1 .qna_list > li{display:flex; justify-content:space-between; padding:2.6rem 2.0rem; border-bottom:1px solid #e1e1e1; position:relative; margin:0 -2.0rem;}
 .cs .cs_contactUs_1 .qna_list > li > div.title{width:90%; overflow:hidden;}
@@ -121,7 +121,7 @@
 .cs_contactUs_my {}
 .cs_contactUs_my .header { height: 2rem; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 2rem; font-weight: bold; margin: 1.6rem 0;}
 .cs_contactUs_my .header .close{position: relative; height:5.2rem;}
-.cs_contactUs_my .header .close span{position:absolute; left:50%; margin-left:-0.5px; display:inline-block; width:1px; height:18px; background-color:#000; transform:rotate(45deg);}
+.cs_contactUs_my .header .close span{position:absolute; left:50%; margin-left:-0.5px; display:inline-block; width:1px; height:1.8rem; background-color:#000; transform:rotate(45deg);}
 .cs_contactUs_my .header .close span:first-child{transform:rotate(-45deg);}
 .cs_contactUs_my .header .close a{position:absolute; top:50%; right:0; margin-top:-0.8rem; width:1.8rem; height:1.8rem; font-size:0; background-color:#fff;}
 .cs_contactUs_my .inner { padding-bottom: 0;}
@@ -150,7 +150,7 @@
 .cs_contactUs_my .contactus_cnt {color:#888}
 .cs_contactUs_my .select {height:4.2rem; font-size:1.2rem;}
 .cs_contactUs_my .select .select_dress {color:#222; font-weight:200;}
-.cs_contactUs_my .select .select_dress:after {top:16px; right:1.5rem; border-color:#888 transparent transparent transparent;}
+.cs_contactUs_my .select .select_dress:after {top:1.6rem; right:1.5rem; border-color:#888 transparent transparent transparent;}
 .cs_contactUs_my .select .select_dress.active:after {top:1rem; border-color: transparent transparent #888 transparent;}
 .cs_contactUs_my .select .select_options {color:#666}
 .cs_contactUs_my .help_block {margin-top:1rem; text-indent:0;}
@@ -228,7 +228,7 @@
 .mb .form_wrap .form_info {text-align:center;}
 .mb .form_wrap .form_info p {font-size:1.4rem; font-weight:300; letter-spacing:-0.025em; line-height:1.6;}
 .mb .form_wrap .form_info p.t_info {font-size:1.2rem; color:#888; font-weight:300; line-height:1.625;}
-.mb .find_result {padding:0px 0px 40px; font-weight:200;}
+.mb .find_result {padding:0px 0px 4.0rem; font-weight:200;}
 .mb .find_result .help_block {text-align:left}
 .mb .find_result input {font-size:1.2rem;}
 .mb .find_result .form_print_bar {padding:3.4rem 0; margin-top:2.5rem; display: flex; display: -ms-flexbox; justify-content: center; align-items: center; background: #f5f5f5; text-align: left; color:#222; font-size:1.2rem;}
@@ -261,7 +261,7 @@
 .mb .mb_login .captcha .captcha_btn_dual button:first-child {margin-bottom:0.6rem;}
 .mb .mb_login .captcha .captcha_btn_dual button:last-child {background-position:center -3.1rem;}    
 .mb .mb_login .captcha .captcha_area {margin-top:0.6rem;}
-.mb .mb_login .captcha .captcha_area input {padding:1.3rem 0 15px 1.3rem;}
+.mb .mb_login .captcha .captcha_area input {padding:1.3rem 0 1.5rem 1.3rem;}
 .mb .mb_login .captcha .captcha_area label { display: block; width: 100%; margin:-0.8rem 0 0.4rem 0;}
 .mb .mb_login .btn{width:100%; height:4.5rem;}
 
@@ -312,7 +312,7 @@
 
 /* mb_join_2 */
 .mb .mb_join_2 .form_field{display:block;}
-.mb .mb_join_2 .form_wrap .desc_wrap p {font-size:12px; line-height:1.75; font-weight:200; color:#888;}
+.mb .mb_join_2 .form_wrap .desc_wrap p {font-size:1.2rem; line-height:1.75; font-weight:200; color:#888;}
 .mb .mb_join_2 .form_wrap .desc_wrap p a {color:#666; font-weight:300;}
 .mb .mb_join_2 .help_block::after {clear:both; display:block; width:100%;}
 .mb .mb_join_2 .help_block .btn.btn_sm {float:left; margin-right:0.4rem; border-color:#222; font-size:1.2rem;}
@@ -329,7 +329,7 @@
 /* common으로 이사갈것들 */
 .pb0{padding-bottom:0!important;}
 .ico_besttag{height:1.5rem; vertical-align:middle;}
-.ico_besttag::before {content: ""; width: 31px; height: 15px; background: url(/images/mo/ico_besttag.png) no-repeat 50% 50%; background-size: cover;}
+.ico_besttag::before {content: ""; width: 3.1rem; height: 1.4rem; background: url(/images/mo/ico_besttag.png) no-repeat 50% 50%; background-size: cover;}
 
 /* button*/
 .pd_detail .btn_coupon,
@@ -339,7 +339,7 @@
 .pd_detail .btn_brandHome{border-color:#a7a7a7;}
 
 /* 슬라이드아이템*/
-.item_prod {display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.2px;}
+.item_prod {display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.025em;}
 .item_prod .item_state {position: relative; padding:0; box-sizing: border-box;}
 .item_prod .itemLike {position: absolute;top:1rem;right:1rem;font-size: 0px;z-index: 2;width: 1.7rem;height: 1.7rem; background: url('/images/mo/ico_like.png');background-size: 3.4rem;background-position:0px 0px;background-repeat: no-repeat;}
 .item_prod .itemLike::before, 
@@ -351,10 +351,10 @@
 /* .item_prod .itemLike.active::before {opacity: 1;} */
 .itemLike.likeit::before {opacity: 1;}
 .item_prod .itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
-.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 15px;padding-top: 150%;font-size: 0px;overflow: hidden;}
+.item_prod .itemPic {position: relative;width: 100%;margin-bottom: 1.5rem;padding-top: 150%;font-size: 0px;overflow: hidden;}
 .item_prod .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .item_prod .itemPic .pd_img {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
-.item_prod .itemBrand {display: inline-block; margin: 0px 0.5rem 0.3rem; font-size: 1rem;font-weight: 300;color: rgb(137, 137, 137);}
+.item_prod .itemBrand {display: inline-block; margin: 0px 0.5rem 0.3rem; font-size: 1rem;font-weight: 300;color: rgb(137, 137, 137); text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:10rem;overflow:hidden;}
 .item_prod .itemComment{margin: 0.8rem 0.5rem 0px;line-height: 1; font-size: 1.1rem;font-weight: 300;color: #fd4802;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
 .item_prod .itemName {margin: 0px 0.5rem 0.8rem; font-size: 1.1rem; font-weight:300; color: rgb(31, 31, 31); max-height: 3rem; position: relative; overflow: hidden; white-space: normal; overflow-wrap: break-word; display: block;}
 .item_prod .itemName {display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
@@ -363,13 +363,13 @@
 .item_prod .itemPrice_original {position: relative; margin-bottom:0.5rem; display:block; line-height:1; font-size: 1rem; font-weight: 300; color: rgb(204, 204, 204); text-decoration:line-through;}
 .item_prod .itemText{margin-top:0.5rem; font-size:1.1rem; color:#888888; font-weight:300;} 
 /* .item_prod .itemPrice_original::after{content: ''; display: inline-block; position: absolute; top: 50%; left: 0; bottom:auto; right:auto; width: 100%; height: 1px; background: rgb(204, 204, 204) ; transform: translateY(-50%);} */
-.item_prod .itemPercent {position: absolute;top: auto;right: 0px;bottom: 0;left: auto;margin-left: 15px;line-height:1;font-size: 1.5rem;font-weight: 300;color: #fd4802;}
-.rank {position: absolute; z-index: 1; font-size: 14px; color: #ffffff; top: 0; left: 0; width: auto; height: auto; min-width: 40px; max-height: 40px; text-align: center; line-height: 0.9; padding: 14px 0px;}
+.item_prod .itemPercent {position: absolute;top: auto;right: 0px;bottom: 0;left: auto;margin-left: 1.5rem;line-height:1;font-size: 1.5rem;font-weight: 300;color: #fd4802;}
+.rank {position: absolute; z-index: 1; font-size: 1.4rem; color: #ffffff; top: 0; left: 0; width: auto; height: auto; min-width: 4.0rem; max-height: 4.0rem; text-align: center; line-height: 0.9; padding: 1.4rem 0px;}
 .rank::after {content: ""; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: currentColor; background: #222222; clip-path: polygon(40px 0, 40px 30px, 30px 40px, 0 40px, 0 0); clip-path: polygon(100% 0, 100% 75%, 75% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% calc( 100% - 10px), calc( 100% - 10px) 100%, 0 100%, 0 0);}
 
 /* pd 상품상세 공통 */
 .pd .swiper-container{overflow:visible;}
-.pd .tit{margin-bottom:1.5rem; font-size:1.4rem; font-weight:500; color:#222}
+.pd .tit{margin-bottom:1.5rem; font-size:1.5rem; font-weight:500; color:#222}
 .pd .ptok{padding-top:3rem!important;}
 .pd .ptok2{padding-top:4rem!important; padding-bottom:4rem!important;}
 .pd .area_slider{text-align:left;}
@@ -419,14 +419,14 @@
 /* 2 */
 .pd_detail .desc_status{padding:1.5rem 2rem; margin-bottom:-1.2rem; color: #fd4802; border-bottom:1px solid #dddddd;}
 .pd_detail .timer_box{position: absolute; height:3.6rem; line-height:3.6rem; font-size:1.2rem; color:#fff; text-align:center; background-color: #000; left: 2rem; right: 2rem; top: -5.5rem; z-index: 10;}
-/* .pd_detail .timer_box::after{content:''; position:absolute; right:-12px; bottom:-18px; border:12px solid transparent; border-top:12px solid #fff; transform:rotate(-45deg);} */
+/* .pd_detail .timer_box::after{content:''; position:absolute; right:-1.2rem; bottom:-1.8rem; border:1.2rem solid transparent; border-top:1.2rem solid #fff; transform:rotate(-45deg);} */
 .pd_detail .timer_box::after{content:''; position:absolute; right:0; bottom:0; display:block; width:0px; border:0.5rem solid transparent; border-bottom-color:#fff; border-right-color:#fff;}
 .pd_detail .timer_box p::after {content:''; clear:both; display:block;}
 .pd_detail .timer_box p span {display:inline-block; position:relative; }
-.pd_detail .timer_box p .tt {position:relative; padding-left:28px; color:#fff; font-size:1.3rem;}
-.pd_detail .timer_box p .tt::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url('/images/mo/ico_timer2.png') no-repeat 0 50%;}
+.pd_detail .timer_box p .tt {position:relative; padding-left:2.8rem; color:#fff; font-size:1.3rem;}
+.pd_detail .timer_box p .tt::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.8rem; height:1.8rem; background:url('/images/mo/ico_timer2.png') no-repeat 0 50%;}
 .pd_detail .timer_box p .timer {color:#fff; font-size:1.4rem; font-weight:300;}
-.pd_detail .timer_box p .timer em {display:inline-block; position:relative; padding-left:6px;}
+.pd_detail .timer_box p .timer em {display:inline-block; position:relative; padding-left:0.6rem;}
 .pd_detail .timer_box p .timer em::before {content:':'; position:absolute; left:-1px; top:50%; transform:translateY(-50%);}
 .pd_detail .timer_box p .timer em:first-of-type {padding-left:0.8rem;}
 .pd_detail .timer_box p .timer em:first-of-type::before {display:none;}
@@ -458,7 +458,7 @@
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle{margin-bottom:1.5rem;}
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle:last-child{margin-bottom:0;}
 .pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_name {margin-bottom:0.5rem; color:#222; font-size:1.3rem; font-weight:300;}
-.pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_option {font-size:1.1rem; color:#666;}
+.pd_detail .option_box .opt_result .result_item .opt_header .bundle .item_option {font-size:1.1rem; color:#666; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:30rem;overflow:hidden;}
 .pd_detail .option_box .opt_result .result_item .item_price {position:absolute; right:2rem; bottom:3.2rem; color:#222; font-size:1.5rem; font-weight:500;}
 .pd_detail .option_box .opt_result .result_item .item_price em{font-weight:600;}
 .pd_detail .option_box .opt_result .result_item .btn_delete_item {position:absolute; right:2rem; top:2rem; width:1.3rem; height:1.3rem; font-size:0; overflow:hidden; background:url('/images/mo/btn_delete_item.png') no-repeat 50% 50%;}
@@ -467,34 +467,34 @@
 .pd_detail .option_box .opt_result .result_item .number_count span,
 .pd_detail .option_box .opt_result .result_item .number_count input[type='text']{float:left;}
 .pd_detail .option_box .opt_result .result_item .number_count span {cursor:pointer; position:relative; display:inline-block; width:3.2rem; height:3.2rem; text-align:center;}
-.pd_detail .option_box .opt_result .result_item .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:12px; height:12px; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
+.pd_detail .option_box .opt_result .result_item .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:1.2rem; height:1.2rem; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
 .pd_detail .option_box .opt_result .result_item .number_count .plus::after {content:''; background-position:100% 0;}
 .pd_detail .option_box .opt_result .result_item .number_count .minus::after {content:''; background-position:0 0;}
-.pd_detail .option_box .opt_result .result_item .number_count input[type='text'] {width:32px; height:32px; padding:0; text-align:center; color:#222; font-size:1.3rem; font-weight:300; border:none; font-family:'LATO','Noto Sans CJK kr','Noto Sans kr',sans-serif;}
+.pd_detail .option_box .opt_result .result_item .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:1.3rem; font-weight:300; border:none; font-family:'LATO','Noto Sans CJK kr','Noto Sans kr',sans-serif;}
 .option_box .opt_size .form_field2 {display:block;}
 .option_box .opt_size .form_field2 .lap{margin:-0.25rem -0.25rem 0; overflow:hidden;}
 .option_box .opt_size .form_field2 .lap > div {margin:0.25rem; float:left; width:auto;}
 .option_box .opt_size .form_field2 label > span{position:relative; display:block; width:6rem; height:3.4rem; padding:0; line-height:3.4rem; text-align:center; background:#fff; box-sizing:border-box; color:#222; font-weight:200; font-size:1.2rem; border:1px solid #ddd; cursor: pointer;}
 .option_box .opt_size .form_field2 label input[type="radio"]{position:absolute; width:0; height:0; visibility:hidden;}
-.option_box .opt_size .form_field2 label input[type="radio"]:checked + span{border:1px solid #fd4802;}
+.option_box .opt_size .form_field2 label input[type="radio"]:checked + span{border:1px solid #000;}
 .option_box .opt_size .form_field2 label input[type="radio"]:disabled + span{text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
 .pd_detail .option_box .info_restock{margin-top:1rem;}
 .pd_detail .option_box .info_restock a.btn_popup {position:relative; padding-left:1.9rem; padding-right:1.2rem; color:#666; font-size:1.3rem; font-weight:300; border:none;}
 .pd_detail .option_box .info_restock a.btn_popup::before {content:''; position:absolute; left:0; top:50%; margin-top:-1px; transform:translateY(-50%); width:1.3rem; height:1.3rem; background:url('/images/mo/ico_bell.png') no-repeat 0 0;}
-.pd_detail .option_box .info_restock a.btn_popup::after {content:''; position:absolute; right:0px; top:50%; margin-top:-1px; transform:translateY(-50%); width:5px; height:9px; background:url('/images/mo/ico_more_lg.png') no-repeat 100% 50%; background-size:contain;}
+.pd_detail .option_box .info_restock a.btn_popup::after {content:''; position:absolute; right:0px; top:50%; margin-top:-1px; transform:translateY(-50%); width:0.5rem; height:0.9rem; background:url('/images/mo/ico_more_lg.png') no-repeat 100% 50%; background-size:contain;}
 .pd_detail .option_box .opt_count {padding-bottom:0; margin-top:2.8rem; overflow:hidden;}
 .pd_detail .option_box .opt_count .number_count {display:inline-block; border:1px solid #ddd}
 .pd_detail .option_box .opt_count .number_count::after {content:''; clear:both; display:block;}
 .pd_detail .option_box .opt_count .number_count span,
 .pd_detail .option_box .opt_count .number_count input[type='text']{float:left;}
 .pd_detail .option_box .opt_count .number_count span {cursor:pointer; position:relative; display:inline-block; width:3.2rem; height:3.2rem; text-align:center;}
-.pd_detail .option_box .opt_count .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:12px; height:12px; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
+.pd_detail .option_box .opt_count .number_count span::after {content:''; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);; width:1.2rem; height:1.2rem; background:url('/images/pc/btn_count.png') no-repeat 100% 0; image-rendering:pixelated;}
 .pd_detail .option_box .opt_count .number_count .plus::after {content:''; background-position:100% 0;}
 .pd_detail .option_box .opt_count .number_count .minus::after {content:''; background-position:0 0;}
-.pd_detail .option_box .opt_count .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:15px; font-weight:200; border:none; font-family:'LATO','Noto Sans kr',sans-serif;}
+.pd_detail .option_box .opt_count .number_count input[type='text'] {width:3.2rem; height:3.2rem; padding:0; text-align:center; color:#222; font-size:1.5rem; font-weight:200; border:none; font-family:'LATO','Noto Sans kr',sans-serif;}
 .pd_detail .price_box {padding:1rem 2rem; border-top:1px solid #222;}
 .pd_detail .price_box::after {content:''; clear:both; display:block;}
-.pd_detail .price_box .number {float:left; color:#666; font-size:1.2rem; font-weight:200; margin-top:3px}
+.pd_detail .price_box .number {float:left; color:#666; font-size:1.2rem; font-weight:200; margin-top:0.3rem}
 .pd_detail .price_box .price {float:right; color:#222; font-size:1.5rem; font-weight:500;}
 .pd_detail .price_box .price em {font-size:1.5rem;}
 /* 3 */
@@ -521,7 +521,7 @@
 .pd_detail .content.pd_descrp{padding-top:3rem;}
 [class*="pd_descrp"] .btn_group_flex button{border: 1px solid #fd4802; color: #fd4802; background: #fff;}
 [class*="pd_descrp"] .btn_group_flex button span{position:relative; padding-right:2rem;}
-[class*="pd_descrp"] .btn_group_flex button span::after {content:""; position:absolute; right:4px; top:1px; transform:rotate(90deg); width:7px; height:13px; background:url(/images/mo/ico_mb_arrow2.png) no-repeat 0 0; background-size:auto 100%;} 
+[class*="pd_descrp"] .btn_group_flex button span::after {content:""; position:absolute; right:0.4rem; top:0.1rem; transform:rotate(90deg); width:0.7rem; height:1.3rem; background:url(/images/mo/ico_mb_arrow2.png) no-repeat 0 0; background-size:auto 100%;} 
 [class*="pd_descrp"] .btn_group_flex button.active span::after {transform:rotate(-90deg);}
 [class*="pd_descrp"] {width:100%;}
 [class*="pd_descrp"] .cont_body {max-height:58rem; overflow:hidden;}
@@ -542,7 +542,7 @@
 [class*="pd_descrp"] [class^="view_"] .tit_view {display:block; color:#222; font-size:2.1rem; font-weight:400; text-align:center;}
 [class*="pd_descrp"] [class^="view_"] .model_info {display:block; margin-top:1rem; color:#666; font-size:1.2rem; font-weight:200; text-align:center;}
 [class*="pd_descrp"] [class^="view_"] .view {margin-top:2rem}
-[class*="pd_descrp"] [class^="view_"] .view img {display:block; margin:5px auto 0}
+[class*="pd_descrp"] [class^="view_"] .view img {display:block; margin:0.5rem auto 0}
 [class*="pd_descrp"] [class^="view_"] .view img:first-child {margin-top:0}
 [class*="pd_descrp"] .view_label_box .view span {display:block; margin:0 -0.5rem; overflow:hidden;}
 [class*="pd_descrp"] .view_label_box .view span img {float:left; width:50%; margin-top:0; padding:0 0.5rem; box-sizing:border-box;}
@@ -552,7 +552,7 @@
 [class*="pd_descrp"] .brand_box {padding:3rem 2rem; margin:6rem -2rem 0; width:auto!important; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; box-sizing:border-box;}
 [class*="pd_descrp"] .brand_box .name {margin-bottom:1rem; color:#222; font-size:1.8rem; font-weight:bold;}
 [class*="pd_descrp"] .brand_box a {display:inline-block; border:1px solid #ddd; font-size:1.3rem; color:#222; font-weight:300; line-height: 4.3rem; width: 100%;}
-[class*="pd_descrp"] .required_box {margin-bottom:40px}
+[class*="pd_descrp"] .required_box {margin-bottom:4.0rem;}
 [class*="pd_descrp"] .required_box .area_detail {text-align:center;} 
 [class*="pd_descrp"] .required_box .area_detail img {max-width:100%;}
 [class*="pd_descrp"] .required_box .area_infotbl {margin-top:4rem;}
@@ -564,7 +564,7 @@
 [class*="pd_descrp"] .required_box .area_kcl p a{position:relative; color:#666; cursor: pointer;}
 [class*="pd_descrp"] .required_box .area_kcl p a:after{display:block; content:''; position:absolute; left:0; bottom:-0.2rem; width:100%; height:1px; background:#666666;}
 [class*="pd_descrp"] .required_box .area_kcl .tit {margin-top:0; margin-bottom:0.5rem; font-size:1.3rem;}
-[class*="pd_descrp"] .required_box .area_kcl a.linktxt3 {margin-left:20px; color:#888; font-weight:200; text-decoration:none !important;}
+[class*="pd_descrp"] .required_box .area_kcl a.linktxt3 {margin-left:2.0rem; color:#888; font-weight:200; text-decoration:none !important;}
 [class*="pd_descrp"] .required_box .area_kcl .ico_kcl {position:relative;}
 [class*="pd_descrp"] .required_box .tbl.type1 {border-top:1px solid #000; border-bottom:1px solid #ddd;} 
 [class*="pd_descrp"] .required_box .tbl.type1 table {width:100%; text-align:left; word-break:keep-all;}
@@ -581,26 +581,26 @@
 [class*="pd_descrp"] .btn_more_box {position:relative; width:100%; background:#fff; text-align:center; z-index:2;}
 [class*="pd_descrp"] .btn_more_box.covered::after {content:''; position:absolute; left:0; right:0; top:-8rem; width:100%; height:8rem; background:linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255,255,255,1) 50%, rgba(255, 255, 255, 0) 100%); z-index:2; }
 [class*="pd_descrp"] .btn_more_box .btnL {border:1px solid #fd4802; color:#fd4802;}
-[class*="pd_descrp"] .btn_more_box .btnL span {position:relative; padding-right:35px;}
-[class*="pd_descrp"] .btn_more_box .btnL .ico {margin-left:20px; margin-right:0;}
+[class*="pd_descrp"] .btn_more_box .btnL span {position:relative; padding-right:3.5rem;}
+[class*="pd_descrp"] .btn_more_box .btnL .ico {margin-left:2.0rem; margin-right:0;}
 /* 6 */
 .riview_box .swiper-pagination {display:inline-block; width:auto; padding:0.2rem 1rem; border-radius:2rem; font-size:1.2rem; color:#fff; background-color:rgba(34,34,34,.5);}
-.riview_box .area_slider{margin-bottom:3rem; text-align:center;}
+.riview_box .area_slider{margin-bottom:1.5rem; text-align:center;}
 .riview_box .ex_review {padding:1.8rem 0;}
 .riview_box .ex_review a:after{content:''; clear:both; display:block;}
 .riview_box .ex_review .tit{float:left; margin-bottom:0;}
 .riview_box .ex_review .tit .number{color:#888; font-weight:300;}
-.riview_box .ex_review .star_score {float:right; padding-right:2.5rem; height:14px; margin-bottom:0.7rem; vertical-align: middle; background:url('/images/mo/ico_more_lg.png') right center no-repeat; image-rendering:pixelated;}
-.riview_box .ex_review .star_score .star {display:inline-block; position:relative; width:95px; height:14px; background:#ddd;}
-.riview_box .ex_review .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:14px; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.riview_box .ex_review .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802}
+.riview_box .ex_review .star_score {float:right; padding-right:2.5rem; height:1.4rem; margin-bottom:0.7rem; vertical-align: middle; background:url('/images/mo/pd_arrow.png') right center no-repeat; image-rendering:pixelated;}
+.riview_box .ex_review .star_score .star {display:inline-block; position:relative; width:9.5rem; height:1.4rem; background:#ddd;}
+.riview_box .ex_review .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.4rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
+.riview_box .ex_review .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802}
 .riview_box .ex_review .star_score .score {color:#222; font-size:1.4rem; font-weight:500;}
 .riview_box .best_review {margin-bottom:1.4rem; text-align:left;}
 .riview_box .best_review a {display:block; position:relative; padding:2rem; border:1px solid #eee;}
-.riview_box .best_review a .star_score .star {display:inline-block; position:relative; width:83px; height:14px; background:#ddd;}
-.riview_box .best_review a .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.5rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.riview_box .best_review a .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802; vertical-align:top;}
-.riview_box .best_review a .star_score .ico {margin-left:10px}
+.riview_box .best_review a .star_score .star {display:inline-block; position:relative; width:8.3rem; height:1.4rem; background:#ddd;}
+.riview_box .best_review a .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.4rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
+.riview_box .best_review a .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802; vertical-align:top;}
+.riview_box .best_review a .star_score .ico {margin-left:1.0rem}
 .riview_box .best_review a .star_score .ico::before {vertical-align:inherit;}
 .riview_box .best_review a .lap{display:table; width:100%;}
 .riview_box .best_review a .lap > div{display:table-cell; vertical-align:middle;}
@@ -617,11 +617,11 @@
 .pd_detail .exinfo_box ul {border-top:1px solid #ddd}
 .pd_detail .exinfo_box ul li {padding:1.8rem 2rem; border-bottom:1px solid #ddd}
 .pd_detail .exinfo_box ul li:last-child {border-bottom:0}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a {display:block; background:url('/images/mo/ico_more_lg.png') right center no-repeat; image-rendering:pixelated;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a {display:block; background:url('/images/mo/pd_arrow.png') right center no-repeat; image-rendering:pixelated;}
 .pd_detail .exinfo_box ul li [class^="ex_"] > a::after {content:''; clear:both; display:block;}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit {color:#222; font-size:14px; font-weight:300;}
-.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit em.number {margin-left:4px; color:#666; font-weight:200;}
-.pd_detail .exinfo_box ul li .ex_shipping {color:#666; font-size:14px; font-weight:200;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit {color:#222; font-size:1.4rem; font-weight:300;}
+.pd_detail .exinfo_box ul li [class^="ex_"] > a .tit em.number {margin-left:0.4rem; color:#666; font-weight:200;}
+.pd_detail .exinfo_box ul li .ex_shipping {color:#666; font-size:1.4rem; font-weight:200;}
 .pd_detail .exinfo_box ul li .ex_shipping span {display:block;}
 .pd_detail .exinfo_box ul li .ex_shipping .a{margin-bottom:0.9rem;}
 /* 7 */
@@ -631,7 +631,7 @@
 .pd_detail .recommendedArea > div[class*="pd_"] .tit{text-align:center;}
 .pd_detail .pd_clickother {}
 .pd_detail .pd_clickother .area_slider {}
-.pd_detail .pd_clickother .area_slider .itemName {height:32px}
+.pd_detail .pd_clickother .area_slider .itemName {height:3.2rem;}
 .pd_detail .pd_recommend {}
 .pd_detail .pd_recommend .area_slider {}
 .pd_detail .pd_recommend .area_slider .swiper-pagination {display:inline-block; width:auto; margin:0; padding:0.2rem 1rem; border-radius:2rem; font-size:1.2rem; color:#fff; background-color:rgba(34,34,34,.5);position:absolute; left:50%; bottom:2rem; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
@@ -640,21 +640,21 @@
 .pd_detail .pd_recommend .area_slider .page .pic {position:relative;}
 .pd_detail .pd_recommend .area_slider .page .pic span.thumb {display:block; width:100%; height:0; padding-top:100%; background-color:#f5f5f5; background-repeat:no-repeat; background-position:50% 50%; background-size:contain;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap {}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area {position:relative; display:block; height:100%; width:100%; padding:10px; box-sizing:border-box; vertical-align:middle;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 {margin: 0 0 30px;color:#222;font-size:20px;font-weight:500;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area {position:relative; display:block; height:100%; width:100%; padding:1.0rem; box-sizing:border-box; vertical-align:middle;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 {margin: 0 0 3.0rem;color:#222;font-size:2.0rem;font-weight:500;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area h5 span {color:#666; font-weight:200;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item {height:calc(100% - 140px); overflow-y:auto;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar {width: 2px;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item {height:calc(100% - 14.0rem); overflow-y:auto;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar {width: 0.2rem;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar-thumb {background-color:#888888; border-radius: 0px; background-clip: padding-box;border: 0px solid transparent;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item::-webkit-scrollbar-track {background-color: #dddddd;border-radius: 0px;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li {position:relative; height:150px; margin-top:20px}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li {position:relative; height:15.0rem; margin-top:2.0rem;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li:first-child {margin-top:0;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod {display:block; width:100%;}
 .pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state {display:table; width:100%;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:150px; padding-left:130px; box-sizing:border-box; vertical-align:middle;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state .itemPic {position:absolute; left:0; top:0; width:100px; height:0; padding-top:150px; margin-bottom:0}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:15.0rem; padding-left:13.0rem; box-sizing:border-box; vertical-align:middle;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .li_item ul li .item_prod .item_state .itemPic {position:absolute; left:0; top:0; width:10.0rem; height:0; padding-top:15.0rem; margin-bottom:0}
 .pd_detail .pd_recommend .item_area .itemPrice .itemPercent {position:relative;}
-.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .btn {margin-top:30px; border-color:#fd4802; color:#fd4802;}
+.pd_detail .pd_recommend .area_slider .page .item_wrap .item_area .btn {margin-top:3.0rem; border-color:#fd4802; color:#fd4802;}
 .pd_detail .pd_recommend .item_picker{position:absolute; width:8.33%;}
 .pd_detail .pd_recommend .item_picker > div{padding-top:100%; background:#000; border-radius:50%; background:url(/images/pc/ico_picker.png) no-repeat 50% 50%; background-size:cover;}
 .pd_detail .pd_recommend .item_picker > div button{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
@@ -664,7 +664,10 @@
 .pd_detail .pd_recommend .pic_list .btn_group_flex button{border: 1px solid #fd4802; color: #fd4802; background-color:#fff;}
 .pd_detail .pd_samebrand{}
 .pd_detail .pd_relate{}
-.pd_detail .pd_relate .area_slider .itemName {height:32px}
+.pd_detail .pd_relate .area_slider .itemName {height:3.2rem}
+/* 210405 */
+header .htop.trans{position:absolute; background:transparent !important;}
+.pd_qnalist_pop .btn_group_flex > div > .btn{height:5.5rem;}
 
 /* 플롯팅 메뉴 > 구매하기 */
 .product_floormenu{position:fixed; bottom:0; left:0; width:100%; height:5.8rem; line-height:5.8rem; z-index:20;}
@@ -694,8 +697,8 @@
 .pd_pop.Purchase_pop .option_box .opt_color{padding-top:0}
 .pd_pop.Purchase_pop .btn_box{}
 .pd_pop.Purchase_pop .btn_box:after{content:''; display:block; clear:both;}
-.pd_pop.Purchase_pop .btn_box button {display: block; width: 100%; height: 5.8rem; line-height: 5.8rem; font-size: 1.6rem; font-weight: 500; float:left; width:33.33%; color:#fff; border-top:1px solid #ddd; box-sizing:border-box;}
-.pd_pop.Purchase_pop .btn_box button.gift{position:relative; background:#444 url(/images/mo/ico_present_purchase.png) center center no-repeat; background-size:1.8rem; font-size:0;}
+.pd_pop.Purchase_pop .btn_box button {display: block; height: 5.8rem; line-height: 5.8rem; font-size: 1.6rem; font-weight: 500; float:left; width:43%; color:#fff; border-top:1px solid #ddd; box-sizing:border-box;}
+.pd_pop.Purchase_pop .btn_box button.gift{position:relative; background:#444 url(/images/mo/ico_present_purchase.png) center center no-repeat; background-size:1.8rem; font-size:0; width:14%;}
 .pd_pop.Purchase_pop .btn_box button.gift > span{position:relative; display:inline-block; width:1.8rem; height:1.9rem;}
 .pd_pop.Purchase_pop .btn_box button.gift > span > span{position:absolute; left:0; top:0; display:inline-block; padding:0.3rem 1rem; font-size:1.2rem; color:#fff; background-color:#fd4801; -webkit-transform:translate(0 ,-125%); transform:translateX(0 ,-125%);}
 .pd_pop.Purchase_pop .btn_box button.gift > span > span{
@@ -737,10 +740,10 @@
 .pd_pop.Purchase_pop .pop_option_select .setOption .form_wrap:first-child{margin-top:0;}
 
 /* pd_popup 공통 */
-.modal.pd_pop .opt_select .form_field {margin-top:5px;}
-.modal.pd_pop .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:3px;}
+.modal.pd_pop .opt_select .form_field {margin-top:0.5rem;}
+.modal.pd_pop .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:0.3rem;}
 .modal.pd_pop .info_txt ul li:last-child {margin-bottom:0;}
-.modal.pd_pop .info_txt ul li:after {content:''; position: absolute; display:inline-block; top:6px; left:0; background:#858585; width:2px; height:2px;}
+.modal.pd_pop .info_txt ul li:after {content:''; position: absolute; display:inline-block; top:0.6rem; left:0; background:#858585; width:0.2rem; height:0.2rem;}
 
 /* 테이블 type1 수평 행,열별 구분선 없음*/
 /* .tbl.type1 {border-top:1px solid #000; border-bottom:1px solid #ddd;} 
@@ -769,18 +772,18 @@
 .modal.pd_pop.salecoupon_pop .coupon_list li:first-child {margin-top:0}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon {position:relative; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div {position:relative; padding:3rem 0;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:15px; height:30px; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:15px; border-bottom-left-radius:15px; overflow:hidden;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon p {padding:0 20px;}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon p {padding:0 2.0rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_name {color:#222; font-size:1.4rem; font-weight:300;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont {margin-top:0.7rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont span {color:#fd4802; font-size:1.8rem; font-weight:500;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_cont span em {font-size:1.8rem; font-weight:600;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition {margin-top:1rem; color:#888; font-size:1.2rem; font-weight:300; line-height:1.3;}
-.modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition span {display:block; margin-top:5px}
+.modal.pd_pop.salecoupon_pop .coupon_list li .coupon .cp_condition span {display:block; margin-top:0.5rem;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .btn_group_flex{margin-top:0; padding:0;}
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon .btn_group_flex::after{display:none;}
-.modal.pd_pop.salecoupon_pop button span:first-child{position:relative; display:inline-block; padding-right:24px;}
-.modal.pd_pop.salecoupon_pop button span:first-child::after {content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:14px; height:15px; margin-left:10px; background:url('/images/mo/ico_cp_down.png') no-repeat 0 0;}
+.modal.pd_pop.salecoupon_pop button span:first-child{position:relative; display:inline-block; padding-right:2.4rem;}
+.modal.pd_pop.salecoupon_pop button span:first-child::after {content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1.4rem; height:1.5rem; margin-left:1.0rem; background:url('/images/mo/ico_cp_down.png') no-repeat 0 0;}
 .modal.pd_pop.salecoupon_pop button span:nth-child(1){display:inline-block;}
 .modal.pd_pop.salecoupon_pop button span:nth-child(2){display:none;}
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(1){display:none;}
@@ -792,14 +795,14 @@
 .modal.pd_pop.epcoupon_pop .modal-body{padding:0rem 2rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon {position:relative; max-width:60rem; margin:auto; border:1px solid #222;  background:#fff; padding:4rem 0; text-align:center; line-height:1;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div {position:relative;}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:15px; height:30px; background:#fff; z-index:2; border:1px solid #222; border-right:none; border-top-left-radius:15px; border-bottom-left-radius:15px; overflow:hidden;}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_title {color:#222; font-size:1.2rem; font-weight:600; letter-spacing:4px;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #222; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_title {color:#222; font-size:1.2rem; font-weight:600; letter-spacing:0.4rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont {margin-top:1rem;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span {display:block; color:#222;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span em.number {font-size:3rem; font-weight:600;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span em.unit {font-size:2.4rem; font-weight:500;}
 .modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_won {}
-.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_percent {font-size:16px; font-weight:500;}
+.modal.pd_pop.epcoupon_pop .ep_coupon > div .cp_cont span.unit_percent {font-size:1.6rem; font-weight:500;}
 .modal.pd_pop.epcoupon_pop .info_txt {margin-top:1.5rem; font-size:1.2rem;}
 .modal.pd_pop.epcoupon_pop .info_txt ul li{position:relative; padding-left:1rem;}
 .modal.pd_pop.epcoupon_pop .info_txt ul li:before{content:'·'; display:inline-block; position:absolute; left:0; top:0; font-weight:bold;}
@@ -838,7 +841,7 @@
 .modal.pd_pop.bnf_card_pop table .info_card p:first-child {margin-top:0}
 .modal.pd_pop.bnf_card_pop table tr td {color:#666;}
 .modal.pd_pop.bnf_card_pop table a.link {display:inline-block; position:relative; margin-top:1rem; padding-right:1.2rem; color:#888;}
-.modal.pd_pop.bnf_card_pop table a.link:after {content:''; display:block; position:absolute; top:6px; right:0; width:5px; height:5px; border:1px solid #888; border-width:1px 1px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
+.modal.pd_pop.bnf_card_pop table a.link:after {content:''; display:block; position:absolute; top:0.6rem; right:0; width:0.5rem; height:0.5rem; border:1px solid #888; border-width:1px 1px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
 .modal.pd_pop.bnf_card_pop .info_txt {margin-top:2rem;}
 
 /* pd_popup > 사이즈정보 */
@@ -850,7 +853,7 @@
 .modal.pd_pop.info_size_pop .tab_nav ul li {float:left; width:33.33%; text-align:center; background:#fff; box-sizing:border-box;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active {background:#fff;}
 .modal.pd_pop.info_size_pop .tab_nav ul li a {position:relative; display:block; color:#888; font-size:1.4rem; font-weight:300; padding:1.2rem 0;}
-.modal.pd_pop.info_size_pop .tab_nav ul li a:after{display:block; content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background-color:#fd4802;}
+.modal.pd_pop.info_size_pop .tab_nav ul li a:after{display:block; content:''; position:absolute; left:0; bottom:0; width:0; height:0.3rem; background-color:#fd4802;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active a {color:#fd4802; font-weight:500;}
 .modal.pd_pop.info_size_pop .tab_nav ul li.active a:after {width:100%;}
 .modal.pd_pop.info_size_pop .tab_cont_wrap {display:block; margin-top:3rem}
@@ -860,7 +863,7 @@
 .modal.pd_pop.info_size_pop .size_head .tit_sub {display:block; margin-bottom:1rem; font-size:1.3rem; font-weight:300;}
 .modal.pd_pop.info_size_pop .size_head .tit_header {display:block; color:#222; font-size:1.4rem; font-weight:500;}
 .modal.pd_pop.info_size_pop .size_cont {}
-.modal.pd_pop.info_size_pop .size_cont .size_tbl_box {margin-top:40px; position:relative;}
+.modal.pd_pop.info_size_pop .size_cont .size_tbl_box {margin-top:4.0rem; position:relative;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box:first-of-type {margin-top:0;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box h6 {margin-bottom:1.6rem; font-size:1.4rem; color:#222; font-weight:500;}
 .modal.pd_pop.info_size_pop .size_cont .size_tbl_box .size_unit {position:absolute; right:0; color:#888; font-size:1.1rem; -webkit-transform: translateY(-2.5rem); transform: translateY(-2.5rem);}
@@ -880,7 +883,7 @@
 .modal.pd_pop.info_size_pop .sub_tab_nav ul li a {display:inline-block; color:#666; font-size:1.3rem; font-weight:300; color:inherit;}
 .modal.pd_pop.info_size_pop .sub_tab_nav ul li.active{border-color:#fd4802; color:#fd4802; font-weight:500;}
 .modal.pd_pop.info_size_pop .category_open{position:relative; padding: 1.1rem 1.5rem; font-size:1.3rem; color:#222; font-weight: 300; text-align:left; background-color: #ffffff; border: 1px solid #dddddd; box-sizing: border-box;}
-.modal.pd_pop.info_size_pop .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 6px solid transparent; border-color: #888888 transparent transparent transparent;}
+.modal.pd_pop.info_size_pop .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 0.6rem solid transparent; border-color: #888888 transparent transparent transparent;}
 .modal.pd_pop.info_size_pop .category_box{display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.5); z-index:500;}
 .modal.pd_pop.info_size_pop .category_box .lap{position:absolute; bottom:0; left:0; padding:3rem 0; width:100%; background:#fff;}
 .modal.pd_pop.info_size_pop .category_box .category_list{min-height:25rem; max-height:40rem; overflow-y:auto;}
@@ -909,8 +912,8 @@
 .modal.pd_pop.push_restock_pop .item_blk {padding-bottom:2rem; border-bottom:1px solid #dddddd;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod {width:100%; display:block; line-height: 1.4;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state {padding:0;}
-.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink {display:table-cell; width:100%; height:105px; padding-left:90px; vertical-align:middle;}
-.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; width:70px; height:105px; padding:0; margin-bottom:0; z-index:2;}
+.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink {display:table-cell; width:100%; height:10.5rem; padding-left:9.0rem; vertical-align:middle;}
+.modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; width:7.0rem; height:10.5rem; padding:0; margin-bottom:0; z-index:2;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemBrand {display:block; margin:0;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-left:0;}
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice {margin:0;}
@@ -918,16 +921,16 @@
 .modal.pd_pop.push_restock_pop .item_blk .item_prod .item_state .itemLink .itemPrice .lap .itemPercent {position:relative;}
 .modal.pd_pop.push_restock_pop .select_blk {margin-top:3rem;}
 .modal.pd_pop.push_restock_pop .select_blk h6 {margin-bottom:1rem; font-size:1.4rem; font-weight:500;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field {display:block; margin-top:-8px;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {margin-left:8px; margin-top:8px;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field {display:block; margin-top:-0.8rem;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {margin-left:0.8rem; margin-top:0.8rem;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div:nth-child(7n-6) {margin-left:0px;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label {display:block; width:66px; height:42px; padding:0; line-height:42px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label {display:block; width:6.6rem; height:4.2rem; padding:0; line-height:4.2rem; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:1.4rem;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label::before,
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"] + label::after {display:none;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"]:checked + label {border:1px solid #222;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field input[type="radio"]:disabled + label {text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
 .modal.pd_pop.push_restock_pop .select_blk .opt_size .form_field > div {float:left; width:auto;}
-.modal.pd_pop.push_restock_pop .select_blk .opt_select .select_blk {display:block; max-height:300px; overflow-y:scroll;}
+.modal.pd_pop.push_restock_pop .select_blk .opt_select .select_blk {display:block; max-height:30.0rem; overflow-y:scroll;}
 .modal.pd_pop.push_restock_pop .modal-footer {position:fixed; width:100%; bottom:0; margin-top:0;}
 
 /* pd_pop > 상품문의 페이지 */
@@ -942,8 +945,8 @@
 .pd_qnalist .qna_list .form_field input[type="checkbox"] + label:after {top:50%; transform:translateY(-50%); margin-top:0;}
 .pd_qnalist .qna_list .foldGroup .fold_head a{padding: 1.4rem 1.33rem;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico {display:inline-block; width:auto; height:auto; vertical-align:middle;}
-.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_myqna::after {content:'내문의'; display:inline-block; margin-right:1rem; color:#fd4802; font-size:11px; text-align:center; box-sizing:border-box; line-height:20px;}
-.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_secret::after {content:''; display:inline-block; margin-right:1rem; width:12px; height:12px; background:url('/images/mo/ico_secret.png') no-repeat 50% 50%; background-size:contain;}
+.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_myqna::after {content:'내문의'; display:inline-block; margin-right:1rem; color:#fd4802; font-size:1.1rem; text-align:center; box-sizing:border-box; line-height:20px;}
+.pd_qnalist .qna_list .foldGroup .fold_head .fold_tit .ico_secret::after {content:''; display:inline-block; margin-right:1rem; width:1.2rem; height:1.2rem; background:url('/images/mo/ico_secret.png') no-repeat 50% 50%; background-size:contain;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_tit span{vertical-align:middle;}
 .pd_qnalist .qna_list .foldGroup .my_qna .fold_head {background-color:#fff6f2;}
 .pd_qnalist .qna_list .foldGroup .fold_head .fold_state{font-size:1.1rem;}
@@ -953,9 +956,9 @@
 .pd_qnalist .qna_list .nodata .txt_box {color:#666; font-size:1.3rem; font-weight:300; color:#888;}
 .pd_qnalist .info_txt{padding:0 1.33rem; margin-top:3rem;}
 .pd_qnalist .info_txt::after {content:''; clear:both; display:block;}
-.pd_qnalist .info_txt ul li {position:relative; font-size:11px; color:#888; padding-left:0.8rem; margin-bottom:0.5rem;}
+.pd_qnalist .info_txt ul li {position:relative; font-size:1.1rem; color:#888; padding-left:0.8rem; margin-bottom:0.5rem;}
 .pd_qnalist .info_txt ul li:last-child {margin-bottom:0;}
-.pd_qnalist .info_txt ul li:after {content:''; position: absolute; top:5px; left:0; background:#858585; width:2px; height:2px;}
+.pd_qnalist .info_txt ul li:after {content:''; position: absolute; top:0.5rem; left:0; background:#858585; width:0.2rem; height:0.2rem;}
 .pd_qnalist .info_txt .btn_group_flex{margin-top:2rem;}
 .pd_qnalist .info_txt .btn_group_flex button{font-size:1.3rem; color:#222; border:1px solid #a7a7a7;}
 .pd_qnalist > .btn_group_flex{margin-top:0;}
@@ -1048,7 +1051,7 @@
 .pd_review .area_rv_average .average .part_average .pa_body{display:none; margin-top:1.3rem;}
 .pd_review .area_rv_average .average .btn_group_flex{margin-top:2.4rem;}
 .pd_review .area_rv_average .average .btn_group_flex button{border:1px solid #a7a7a7; color:#222;}
-.pd_review .area_rv_average .average .btn_group_flex button span:after{content:''; display:inline-block; margin-left:0.8rem; width:10px; height:7px; background: url(/images/mo/ico_btn_more.png) center center no-repeat; background-size:contain; vertical-align:middle;}
+.pd_review .area_rv_average .average .btn_group_flex button span:after{content:''; display:inline-block; margin-left:0.8rem; width:1.0rem; height:7px; background: url(/images/mo/ico_btn_more.png) center center no-repeat; background-size:contain; vertical-align:middle;}
 .pd_review .area_rv_average .average .btn_group_flex button span:before{display:"inline-block"; content:'자세히보기'; vertical-align:middle;}
 .pd_review .area_rv_average .average .btn_group_flex button.active span:before{display:"inline-block"; content:'접기'; }
 .pd_review .area_rv_average .average .btn_group_flex button.active span:after{transform:rotate(180deg);}
@@ -1063,7 +1066,7 @@
 .pd_review .area_rv_average .average .part_average dl dd .ratio .progbar {display:inline-block; position:relative; height:8px; background:#ddd; vertical-align:top; margin-left:0}
 .pd_review .area_rv_average .average .part_average dl dd .ratio .progbar::after {content:''; position:absolute; right:-8px; top:0; width:0; height:0; border:4px solid #ddd; border-bottom-color:transparent;border-right-color:transparent;}
 .pd_review .area_rv_average .average .part_average dl dd .percent {position:absolute; right:0; font-size:1.4rem;}
-.pd_review .area_rv_average .average .part_average dl dd .line {width:100%; height:0px; margin-top:10px; border-top:2px dashed #ddd;}
+.pd_review .area_rv_average .average .part_average dl dd .line {width:100%; height:0px; margin-top:1.0rem; border-top:2px dashed #ddd;}
 .pd_review .area_rv_average .average .part_average dl.on dt,
 .pd_review .area_rv_average .average .part_average dl.on dd {color:#222; font-weight:300;}
 .pd_review .area_rv_average .average .part_average dl.on dd .ratio .progbar {background:#222;}
@@ -1085,7 +1088,7 @@
 .pd_review .area_rv_photo .photo_list ul li {float:left; position:relative; padding:0.4rem; width:25%; box-sizing:border-box;}
 .pd_review .area_rv_photo .photo_list > div{position:absolute; right:0; bottom:0; width:25%; padding:0.4rem; box-sizing:border-box }
 .pd_review .area_rv_photo .photo_list > div > div{position:relative; width:100%; padding-bottom:100%;}
-.pd_review .area_rv_photo .photo_list button {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; font-size:14px; z-index:1; text-align:center; box-sizing:border-box; z-index:2;}
+.pd_review .area_rv_photo .photo_list button {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); color:#fff; font-size:1.4rem; z-index:1; text-align:center; box-sizing:border-box; z-index:2;}
 .pd_review .area_rv_photo .photo_list button::before {content:''; display:block; margin:0 auto; width:2rem; height:2rem; background:url('/images/mo/ico_plus_white.png') no-repeat 50% 50%; z-index:1;}
 .pd_review .area_rv_photo .photo_list button span{margin-top:0.5vw; display:block; font-size:1rem;}
 .pd_review .area_rv_all {}
@@ -1095,7 +1098,7 @@
 .pd_review .area_rv_all .review_list > ul > li .review {}
 .pd_review .area_rv_all .review_list .review .info_box {}
 .pd_review .area_rv_all .review_list .review .info_box .star_score {float:left}
-.pd_review .area_rv_all .review_list .review .info_box .star_score .star {display:inline-block; position:relative; width:83px; height:13px; background:#ddd;}
+.pd_review .area_rv_all .review_list .review .info_box .star_score .star {display:inline-block; position:relative; width:83px; height:1.3rem; background:#ddd;}
 .pd_review .area_rv_all .review_list .review .info_box .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:100%; background:url('/images/mo/star_empty_big.png') no-repeat 0 0; background-size:contain; image-rendering:pixelated;}
 .pd_review .area_rv_all .review_list .review .info_box .star_score .star .progbar {display:inline-block; height:100%; background:#fd4802; vertical-align:top;}
 .pd_review .area_rv_all .review_list .review .info_box .writer {float:right;}
@@ -1107,13 +1110,13 @@
 .pd_review .area_rv_all .review_list .review .response_box > div:first-child {margin-top:0}
 .pd_review .area_rv_all .review_list .review .response_box > div dl div {display:flex; font-size:1.1rem;}
 .pd_review .area_rv_all .review_list .review .response_box > div dl div dt {width:4.5rem; color:#888}
-.pd_review .area_rv_all .review_list .review .response_box > div dl div dd {margin-left:12px; color:#fd4802}
+.pd_review .area_rv_all .review_list .review .response_box > div dl div dd {margin-left:1.2rem; color:#fd4802}
 .pd_review .area_rv_all .review_list .review .response_box2 {margin-top:1.4rem;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div:first-child {margin-top:0; overflow:hidden;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div {float:left; width:50%; max-width:400px; display:flex; font-size:1.1rem;}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div dt {position:relative; padding-left:0.8rem; color:#888}
 .pd_review .area_rv_all .review_list .review .response_box2 > div dl div dt:before{content:''; position:absolute; left:0; top:0.6rem; display:block; width:2px; height:2px; background-color:#888;}
-.pd_review .area_rv_all .review_list .review .response_box2 > div dl div dd {margin-left:12px; color:#222}
+.pd_review .area_rv_all .review_list .review .response_box2 > div dl div dd {margin-left:1.2rem; color:#222}
 .pd_review .area_rv_all .review_list .review .info_box{line-height:1;}
 .pd_review .area_rv_all .review_list .review .photo_box {margin: 1rem -1.33rem 0;}
 .pd_review .area_rv_all .review_list .review .photo_box .photo_list {font-size:0; white-space:nowrap; overflow-x:auto;}
@@ -1123,19 +1126,19 @@
 .pd_review .area_rv_all .review_list .review .txt_review_box {margin-top:1.6rem; font-size:1.3rem; overflow:hidden;}
 .pd_review .area_rv_all .review_list .review .reply_box {margin-top:1.5rem; padding-top:1.5rem;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply {position:relative; padding:2rem; background:#f5f5f5;}
-.pd_review .area_rv_all .review_list .review .reply_box .reply::after {content:''; position:absolute; left:0px; top:-15px; width:0px; height:0px; border:15px solid #f5f5f5; border-top-color:transparent; border-right-color:transparent;}
+.pd_review .area_rv_all .review_list .review .reply_box .reply::after {content:''; position:absolute; left:0px; top:-1.5rem; width:0px; height:0px; border:1.5rem solid #f5f5f5; border-top-color:transparent; border-right-color:transparent;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer {}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer span {display:inline-block; position:relative;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_name {padding-left:2.2rem; font-size:1.3rem; font-weight:300;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_name::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5rem; height:1.5rem; background:url('/images/mo/ico_admin.png') no-repeat 0 0; background-size:contain;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date {padding-left:1rem; margin-left:1rem; font-size:1.1rem; color:#888; font-size:200;}
-.pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:12px; width:1px; background:#ddd;}
+.pd_review .area_rv_all .review_list .review .reply_box .reply .reply_writer .wr_date::after {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:1.2rem; width:1px; background:#ddd;}
 .pd_review .area_rv_all .review_list .review .reply_box .reply .reply_txt {margin-top:1.2rem; color:#666; font-size:1.3rem;}
 .pd_review .area_rv_all .review_last{padding:2.5rem 0; font-size:1.1rem; color:#888888; font-weight:300; text-align:center;}
 .pd_review .area_rv_all .nodata {padding:10rem 0; border-top:1px solid #ddd; text-align:center;}
 .pd_review .area_rv_all .nodata .txt_box {color:#666; font-size:1.3rem; font-weight:300;}
 .pd_review .area_rv_all .nodata .btn_box {margin-top:1.5rem;}
-.pd_review .area_rv_all .nodata .btn_box .btn span {color:#222; font-size:14px; font-weight:300;}
+.pd_review .area_rv_all .nodata .btn_box .btn span {color:#222; font-size:1.4rem; font-weight:300;}
 .pd_review .category_open {position:relative; margin:-1.2rem -1.33rem -1px; border-bottom: 1px solid #ddd; overflow-x:auto;}
 .pd_review .category_open {font-size:0; white-space:nowrap;}
 .pd_review .category_open > li {position:relative; display:inline-block; padding:0 2rem; font-size:1.1rem; color:#222; line-height: 4.5rem;}
@@ -1154,7 +1157,7 @@
 .pd_review .category_box .category_list .category ul.n1 li{width:100%;}
 .pd_review .category_box .category_list .category ul.n2 li{float:left; width:50%;}
 .pd_review .category_box .category_close{opacity: 1; position: absolute; z-index: 98; top: -3.8rem; left: 50%; transform: translate(-50%); display: block; border: 0; width: 1.6rem; height: 1.6rem; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(/images/mo/ico_pop_cls_w.png); background-color: transparent;}
-.pd_review .area_rv_all .nodata .btn_group_flex button{margin:0 auto; padding:0; width:10.8rem; height:3rem; line-height:3rem!important; font-size:11px; border:1px solid #ddd;}
+.pd_review .area_rv_all .nodata .btn_group_flex button{margin:0 auto; padding:0; width:10.8rem; height:3rem; line-height:3rem!important; font-size:1.1rem; border:1px solid #ddd;}
 
 /* pd_popup > 포토영상 리뷰 리스트 */
 .modal.pd_pop.pd_photoreviewlist_pop {}
@@ -1237,24 +1240,24 @@
 
 /* 옵션셀렉트 */
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item,
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .select {height:110px; background:transparent;}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .select {height:11.0rem; background:transparent;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod {width:100%; z-index:-1;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state {display:table; width:100%; height:70px; padding:0; margin:0}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a {display:table-cell; position:relative; width:100%; height:70px; padding-left:70px; padding-right:40px; vertical-align:middle;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPic {position:absolute; left:0; top:0; width:50px; height:70px; padding:0; margin:0}
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName {max-width:100%; height:20px; margin-bottom:0px; line-height:20px; font-size:14px; -webkit-line-clamp:1;}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName {max-width:100%; height:20px; margin-bottom:0px; line-height:20px; font-size:1.4rem; -webkit-line-clamp:1;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemName .tit_option {font-weight:500;}
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice {margin-top:13px}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice {margin-top:1.3rem}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPercent {position:relative;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPrice_original {margin-right:0;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a .itemPercent {margin-right:0;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .item_prod .item_state a > [class^="item"] {margin-left:0; margin-right:0;} 
-.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list {top:110px}
+.pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list {top:11.0rem}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li {border-bottom:1px solid #eee;}
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li[aria-disabled="true"] a [class^="item"] {color:#bbb; text-decoration:line-through;} 
 .pd_detail .area_desc .desc_wrap .option_box .opt_select .select_custom.deal_opt_item .combo .list > li[aria-disabled="true"] a img {opacity:0.3;}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item,
-.pd.deal .tab_detail_cont .select_custom.deal_opt_item .select {height:110px}
+.pd.deal .tab_detail_cont .select_custom.deal_opt_item .select {height:11.0rem}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod {width:100%;}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod .item_state {padding:0; margin:0}
 .pd.deal .tab_detail_cont .select_custom.deal_opt_item .item_prod .item_state a {position:relative; padding-left:70px}
@@ -1271,7 +1274,7 @@
 .pd_pop[class*="pd_list"].pd_listDescrp_pop{top:5.2rem;}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content{top:0; background-color:#646464;}
 .pd_pop[class*="pd_list"].pd_listDescrp_pop .modal_content:after{}
-.deal_list_select .select {cursor: pointer;display: inline-block; position: relative;font-size: 16px;color: #333333;width: 100%; height:66px;}
+.deal_list_select .select {cursor: pointer;display: inline-block; position: relative;font-size: 1.6rem;color: #333333;width: 100%; height:66px;}
 .deal_list_select .list{background-color:#fff;}
 .deal_list_select .list li{position: relative; border-bottom:1px solid #eeeeee;}
 .deal_list_select .list li:first-child{margin-top:0;}
@@ -1310,7 +1313,7 @@
 .item_blk .item_prod .item_state {position: relative; display:table; width:100%; box-sizing: border-box;}
 .item_blk .item_prod .itemLink{position: relative; display:table-cell; width: 100%; height:60px; padding-left:56px; vertical-align: middle;}
 .item_blk .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding: 0; width:40px; height:60px; z-index:2;}
-.item_blk .item_prod .item_state .itemLink .itemBrand {display:block; font-size:1rem; color:#888888; font-weight:300; margin-left:0; margin-right:0;}
+.item_blk .item_prod .item_state .itemLink .itemBrand {display:block; font-size:1rem; color:#888888; font-weight:300; margin-left:0; margin-right:0; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:30rem;overflow:hidden;}
 .item_blk .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
 .item_blk .item_prod .item_state .itemLink .itemPrice{margin-left:0; margin-right:0;}
 /*select_custom > item_prod*/
@@ -1320,7 +1323,7 @@
 .select_custom .select .item_prod .item_state .itemLink .itemPic{display:none;}
 .select_custom .select .item_prod .item_state .itemLink .itemPrice{display:none;}
 .select_custom .select .item_prod .item_state .itemLink .itemName{-webkit-line-clamp:1; font-size:1.3rem; padding-right:1rem;}
-.select_custom .item_prod {margin:15px 0; padding-right:4rem; line-height: 1.4;}
+.select_custom .item_prod {margin:1.5rem 0; padding-right:4rem; line-height: 1.4;}
 .select_custom .item_prod .item_state {position: relative; display:table; width:100%; box-sizing: border-box;}
 .select_custom .item_prod .itemLink{position: relative; display:table-cell; width: 100%; height:60px; padding-left:59px; vertical-align: middle;}
 .select_custom .item_prod .item_state .itemLink .itemPic {position:absolute; left:0; top:0; padding: 0; margin-bottom:0; width:44px; height:66px; z-index:2;}
@@ -1342,10 +1345,10 @@
 .deal_list_select .item_prod .item_state .itemLink .itemBrand{padding-right:0; margin:0; margin-bottom:0.3rem;}
 .deal_list_select .item_prod .item_state .itemLink .itemName{-webkit-line-clamp:1; padding-right:0; margin:0;}
 
-.odPayment .paymentinfo .payinfo_blk .infotxt {display:none; max-height:190px; margin-top:20px; color:#888; font-size:14px; line-height:26px; overflow-y:scroll;}
+.odPayment .paymentinfo .payinfo_blk .infotxt {display:none; max-height:190px; margin-top:20px; color:#888; font-size:1.4rem; line-height:26px; overflow-y:scroll;}
 .odPayment .paymentinfo .payinfo_blk.on .infotxt {display:block; margin:0px 40px 40px;}
-.odPayment .area_paymentinfo .agree_payment {margin:40px 0 30px; color:#666; font-size:16px; font-weight:200;}
-.odPayment .area_paybtn .btn {height:80px; font-size:18px; font-weight:300;}
+.odPayment .area_paymentinfo .agree_payment {margin:40px 0 30px; color:#666; font-size:1.6rem; font-weight:200;}
+.odPayment .area_paybtn .btn {height:80px; font-size:1.8rem; font-weight:300;}
 
 
 /* ============================================ 전시 ============================================ */
@@ -1574,8 +1577,8 @@
 .dp .coupon_list li .cp_detail .sale_t.won_t {font-size:2.1rem; line-height: 1;}
 .dp .coupon_list li .cp_detail .sale_t.won_t span {font-size: 30px;}
 .dp .coupon_list li .cp_detail .cp_cont {margin-bottom: 0; font-weight: 300; color: #888; font-size:1.2rem; line-height: 1.5; min-height: 36px; word-break: keep-all;}
-.dp .coupon_list li .cp_detail .cp_cnt {display: none; background: #fff5f3; margin-top:0.5rem; padding:5px 8px; border:1px solid #fd4802; font-size: 10px; color: #fd4802 !important; font-weight: 500;}
-.dp .coupon_list li .cp_shape {position: absolute; top: 50%; right: -13px; z-index: 101; width: 26px; height: 26px; margin-top: -13px; border:1px solid #ddd; background: #fff; border-radius: 50%; z-index: 96;}
+.dp .coupon_list li .cp_detail .cp_cnt {display: none; background: #fff5f3; margin-top:0.5rem; padding:5px 8px; border:1px solid #fd4802; font-size: 1.0rem; color: #fd4802 !important; font-weight: 500;}
+.dp .coupon_list li .cp_shape {position: absolute; top: 50%; right: -1.3rem; z-index: 101; width: 26px; height: 26px; margin-top: -1.3rem; border:1px solid #ddd; background: #fff; border-radius: 50%; z-index: 96;}
 .dp .coupon_list li .cp_date {border:1px solid #222; background: #222; font-weight: 300; text-align: center;}
 .dp .coupon_list li .cp_date button {display: block; width: 100%; padding:1.1rem 5px; font-size: 1.2rem; font-weight: 300; color: #fff;}
 .dp .coupon_list li .cp_date button span {background: url(/images/mo/ico_cp_down.png) no-repeat right top; padding-right: 28px;}
@@ -1588,7 +1591,7 @@
 .dp .dp_coupon_wrap .dp_coupon_tip .dp_coupon_notice::before {content:''; display: block; width:36px; height: 46px; margin: 0 auto; background: url(/images/pc/ico_null.png)no-repeat;}
 .dp .dp_coupon_wrap .dp_coupon_tip .dp_coupon_notice::after {content:'유의사항'; display: inline-block; margin-top: 20px; color:#888;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul {margin-left: 90px;}
-.dp .dp_coupon_wrap .dp_coupon_tip ul li {position: relative; padding-left: 12px; margin-bottom: 12px; color:#888;}
+.dp .dp_coupon_wrap .dp_coupon_tip ul li {position: relative; padding-left: 1.2rem; margin-bottom: 1.2rem; color:#888;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul li:last-child {margin-bottom: 0;}
 .dp .dp_coupon_wrap .dp_coupon_tip ul li::before {content:''; position: absolute; width:2px; height: 2px; top:46%; left:0; transform: scaleY(-50%); background: #888;}
 .dp .dp_coupon_wrap .announce_txt {position: relative; margin: 0 auto; padding-top: 30px; border-top:1px solid #dddddd;}
@@ -1607,10 +1610,10 @@
 .dp .dp_exhibition .review .best_review {position:relative; text-align:center;}
 .dp .dp_exhibition .review .best_review:after{content:''; display:block; position:absolute; bottom:0; left:2rem; right:2rem; height:1px; background-color:#eee;}
 .dp .dp_exhibition .review .best_review a {display:block; position:relative; background-color:#fff;}
-.dp .dp_exhibition .review .best_review a .info .star_score .star {display:inline-block; position:relative; width:83px; height:14px; background:#ddd;}
+.dp .dp_exhibition .review .best_review a .info .star_score .star {display:inline-block; position:relative; width:83px; height:1.4rem; background:#ddd;}
 .dp .dp_exhibition .review .best_review a .info .star_score .star::after {content:''; position:absolute; left:0; top:0; z-index:3; width:100%; height:1.5rem; background:url('/images/mo/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
-.dp .dp_exhibition .review .best_review a .info .star_score .star .progbar {display:inline-block; height:14px; background:#fd4802; vertical-align:top;}
-.dp .dp_exhibition .review .best_review a .info .star_score .ico {margin-left:10px}
+.dp .dp_exhibition .review .best_review a .info .star_score .star .progbar {display:inline-block; height:1.4rem; background:#fd4802; vertical-align:top;}
+.dp .dp_exhibition .review .best_review a .info .star_score .ico {margin-left:1.0rem}
 .dp .dp_exhibition .review .best_review a .info .star_score .ico::before {vertical-align:inherit;}
 .dp .dp_exhibition .review .best_review a .info .star_score{margin-bottom:1rem;}
 .dp .dp_exhibition .review .best_review a .info .star_score .star{vertical-align:middle;}
@@ -1634,16 +1637,16 @@
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemName {display:block; margin-top:0.5rem; font-size:1.3rem; max-height: 3.3rem; margin-left:0; margin-right:0; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 3.3rem; overflow: hidden; white-space: normal; overflow-wrap: break-word;}
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemPrice{margin-left:0; margin-right:0;}
 .dp .dp_exhibition .review .product_view .item_prod .item_state .itemLink .itemPrice .itemPrice_sale{font-weight:700;}
-.dp .dp_exhibition .review .swiper-container .swiper-slide{box-shadow:0 0 10px rgba(0,0,0,0.2);}
+.dp .dp_exhibition .review .swiper-container .swiper-slide{box-shadow:0 0 1.0rem rgba(0,0,0,0.2);}
 .dp .dp_exhibition .review .swiper-container .swiper-pagination-fraction {position: relative; display:inline-block; margin-top:2rem; bottom:0; width:auto; background: rgba(34,34,34,.5); color: #fff; font-weight: 300; padding:0.5rem 0.7rem; line-height: 1; font-size: 1.2rem; border-radius:2rem;}
 .dp .dp_exhibition .review .swiper-container .swiper-pagination-current {font-weight: 600;}
 
 /* .dp > .dp_util > select 커스텀 (전시공통) */
 .dp .dp_util .select {cursor: pointer;display: inline-block;position: relative;top:-1px; font-size: 1.2rem;color: #333333;width: 100%;height:1.6rem; line-height:1.6rem;}
-.dp .dp_util .select+.select{margin-left: 10px;}
-.dp .dp_util .select_hidden {display: none;visibility: hidden;padding-right: 10px;}
+.dp .dp_util .select+.select{margin-left: 1.0rem;}
+.dp .dp_util .select_hidden {display: none;visibility: hidden;padding-right: 1.0rem;}
 .dp .dp_util .select_dress {
-  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 15px 0 3px;
+  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 1.5rem 0 3px;
   background-color: #ffffff;border: 1px solid #fff;box-sizing: border-box;
   -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
   -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
@@ -1721,7 +1724,7 @@
 .filter_list{font-size:1.4rem; background:#fff; position:fixed; top:0; right:-80%; width:80%; height:100%; transition:right 0.4s;}
 .filter_list::after{content:''; display: block; clear:both;}
 .filter_list .form_field{display:block;}
-.filter_list .form_field input[type="checkbox"] + label {display: block; position: relative; padding-left:0; padding-right: 26px; cursor: pointer; font-size: 12px; line-height: 1.4; font-weight: 300; letter-spacing: 0;}
+.filter_list .form_field input[type="checkbox"] + label {display: block; position: relative; padding-left:0; padding-right: 26px; cursor: pointer; font-size: 1.2rem; line-height: 1.4; font-weight: 300; letter-spacing: 0;}
 .filter_list .form_field div label span{color:#222!important;}
 .filter_list .form_field input[type="checkbox"] + label:before{left:auto; right:0}
 .filter_list .form_field input[type="checkbox"]:checked + label:after{left:auto; right:0}
@@ -1730,7 +1733,7 @@
 .filter_top > div:nth-child(1){float:left;}
 .filter_top > div:nth-child(2){float:right;}
 .filter_top .fillter_reset {position:relative; padding-left:1.5rem; vertical-align:middle;}
-.filter_top .fillter_reset::before { content:''; position: absolute; top:50%; left:0; transform: translateY(-50%); width:12px; height:12px; background: url(/images/mo/ico_filter_reset.png)no-repeat; background-size:contain;}
+.filter_top .fillter_reset::before { content:''; position: absolute; top:50%; left:0; transform: translateY(-50%); width:1.2rem; height:1.2rem; background: url(/images/mo/ico_filter_reset.png)no-repeat; background-size:contain;}
 .filter_top .tt{font-size:1.6rem; font-weight:500; color:#222;}
 .filter_top .close{display:inline-block; margin-left:1.8rem; width:1.6rem; height:1.6rem; background:url(/images/mo/ico_pop_cls.png) center center no-repeat; background-size:contain; font-size:0; vertical-align:middle;}
 .filter_con{position:absolute; top:5rem; left:0; width:100%; height:calc(100% - 5rem); overflow-y:auto;}
@@ -1872,7 +1875,7 @@
 
 /*===================== item_prod쪽으로 이동 예정===================*/
 /* 아이템컬러칩 */
-.itemcolorchip {margin:1.5rem 5px 0px;}
+.itemcolorchip {margin:1.5rem 0.5rem 0;}
 .itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width:1rem; height:1rem; font-size: 0; vertical-align: middle; margin:0 0 0 2px;}
 .itemcolorchip [class*="chip_"]:before {content: "";display: inline-block;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;}
 .itemcolorchip [class*="chip_"]:first-child {margin-left:0}
@@ -1881,8 +1884,8 @@
 .chip_color35::before {background-color: #cbaf6f;}
 
 /* 상품아이콘*/
-.itemBadge {margin:20px 5px 0; margin-top:1rem; font-size: 0px; overflow:hidden;}
-.itemBadge [class*="badge"] {display:inline-block; height:22px; margin:0 0 0 5px; padding:0 8px; border:1px solid #888888; background: #fff; color:#888888; font-size: 11px; font-weight: 300; line-height: 21px;}
+.itemBadge {margin:2.0rem 0.5rem 0; margin-top:1rem; font-size: 0px; overflow:hidden;}
+.itemBadge [class*="badge"] {display:inline-block; height:2.2rem; margin:0 0 0 0.5rem; padding:0 0.8rem; border:1px solid #888888; background: #fff; color:#888888; font-size: 1.1rem; font-weight: 300; line-height: 21px;}
 .itemBadge [class*="badge"]:first-child {margin-left:0}
 .itemBadge .badge13 {background:#f5f5f5; border-color:#f5f5f5;}
 
@@ -1999,7 +2002,7 @@
 /* br_main - brand_product */
 .br .br_main .brand_product{margin-top:2rem;}
 .br .br_main .brand_product .swiper-container{overflow:visible;}
-.br .br_main .brand_product .btn:after{content: ''; display: inline-block; margin-left: 8px; width: 11px; height: 11px; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(/images/mo/ico_more_lg.png);}
+.br .br_main .brand_product .btn:after{content: ''; display: inline-block; margin-left: 8px; width: 1.1rem; height: 1.1rem; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(/images/mo/ico_more_lg.png);}
 /* 브랜드 - 룩북 */
 .htop.br_lookbook { overflow: hidden; border: none !important;}
 .htop.br_lookbook .btn_back span i { background: #fff;}
@@ -2044,7 +2047,7 @@
 .br .br_otherbrand .thumb img {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:1}
 .br .br_otherbrand .txt {margin-top:1rem; padding:0px 0.5rem 0px}
 .br .br_otherbrand .txt .tt {display:block; display: -webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#222; font-weight:500; font-size:1.3rem; word-break:keep-all; white-space:normal;}
-.br .br_otherbrand .txt .date {display:block; margin-top:15px; color:#888; font-size:14px; font-weight:300;}
+.br .br_otherbrand .txt .date {display:block; margin-top:1.5rem; color:#888; font-size:1.4rem; font-weight:300;}
 /* 브랜드 - br_search */
 .br_search_wrap .swiper-pagination{margin:0;}
 .br_search_wrap .swiper-container { width: 100%; height: 21.4rem; margin-left: auto; margin-right: auto; }
@@ -2077,7 +2080,7 @@
 .htop.br { overflow: hidden;}
 .htop.br .button_wrap {height: 5.5rem; display: inline-block; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
 .htop.br .button_wrap .br_search { margin: 0 2.5rem 0 0; }
-.htop.br .button_wrap .br_store img:nth-child(1) { width: 1.6rem; height: 2rem; }
+.htop.br .button_wrap .br_store img:nth-child(1) { height: 2rem; }
 .htop.br .button_wrap .br_store span { width: 2.1rem; height: 1.5rem; position: absolute; top: 1.2rem; right: 1.5rem; background: #fd4802; border-radius: 0.8rem; font-size: 0.8rem; color: #fff; line-height: 1.6rem;}
 
 
@@ -2268,25 +2271,25 @@
 
 /* select 커스텀 (필터용) */
 .sch .sch_util .select {cursor: pointer;display: inline-block;position: relative;top:-1px; font-size: 1.2rem;color: #333333;width: 100%;height:1.6rem; line-height:1.6rem;}
-.sch .sch_util .select+.select{margin-left: 10px;}
-.sch .sch_util .select_hidden {display: none;visibility: hidden;padding-right: 10px;}
+.sch .sch_util .select+.select{margin-left: 1.0rem;}
+.sch .sch_util .select_hidden {display: none;visibility: hidden;padding-right: 1.0rem;}
 .sch .sch_util .select_dress {
-  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 15px 0 3px;
+  position: relative;top: 0;right: 0;bottom: 0;left: 0;padding:0 1.5rem 0 0.3rem;
   background-color: #ffffff;border: 1px solid #fff;box-sizing: border-box;
   -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
   -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
 }
 .sch .sch_util .select_dress:after {
-  content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top:5px;right:0;
-  border: 5px solid transparent; border-color: #222222 transparent transparent transparent;  
+  content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top:0.5rem;right:0;
+  border: 0.5rem solid transparent; border-color: #222222 transparent transparent transparent;  
 }
 .sch .sch_util .select_options {
   display: none;position: absolute;top:2rem;right: 0;left: 0;z-index: 2;
   margin: 0;padding: 0;list-style: none;background-color: #ffffff;
-  box-sizing: border-box;border:0;border-top: 0px solid #222222;
+  box-sizing: border-box;border:0;border-top: 0 solid #222222;
 }
 .sch .sch_util .select_options li {
-  margin: 0;padding:3px 3px;text-indent:0; display:block; text-align:left;
+  margin: 0;padding:0.3rem 0.3rem;text-indent:0; display:block; text-align:left;
   -moz-transition: all 0.08s ease-in;-o-transition: all 0.08s ease-in;
   -webkit-transition: all 0.08s ease-in;transition: all 0.08s ease-in;
 }
@@ -2299,7 +2302,7 @@
 
 /* 전시 카테고리 공통 */
 .sch .category_open{position:relative; padding: 1.1rem 1.5rem; font-size:1.3rem; color:#222; font-weight: 300; text-align:left; background-color: #ffffff; border: 1px solid #dddddd; box-sizing: border-box;}
-.sch .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 6px solid transparent; border-color: #888888 transparent transparent transparent;}
+.sch .category_open:after {content: ""; width: 0; height: 0; box-sizing: border-box; position: absolute; top: 1.8rem; right: 1.5rem; border: 0.6rem solid transparent; border-color: #888888 transparent transparent transparent;}
 .sch .category_box{visibility:hidden; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.5); z-index:500;}
 .sch .category_box.active{visibility:visible;}
 .sch .category_box .lap{position:absolute; bottom:0; left:0; padding:3rem 0; width:100%; background:#fff;}

src/main/webapp/ux/mo/css/style24_m.css

@@ -475,57 +475,51 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 /* main.container .inner:last-child {padding-bottom: 0;} */
 /* .select_custom .combo .select > div {position: relative; z-index: -1;} */
 
-
-
-
-	/* 이용약관,개인정보취급방침,업체리스트 */
-	.ps p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
-	.ps {padding:0;} 
-	.ps table {word-break:keep-all;margin-top: 3.0rem;width: 100%;border-top: 1px solid #222222;}
-	.ps table th,
-	.ps table td {position:relative; padding:1.0rem 1.0rem; font-size:1.1rem;line-height: 1.4;color: #222222;letter-spacing:-0.025em;}
-	.ps table td {border-bottom:1px solid #ddd;border-right: 1px solid #ddd;font-weight:200;}
-	.ps table td:last-child {border-right: 1px solid transparent;}
-	.ps table th {border-top: 0;border-bottom: 0;border-right: 0;font-weight: 600;text-align: center;background: #f5f5f5;}
-  .ptn, #partnersPop .pop_cont {height: auto;background: #ffffff;}
-  .ps.ptn table {margin-top:0;}
-  .ps.ptn table th, .ps.ptn table td {text-align: center;padding: 1.6rem 0;}
-  .ps.ptn table th {font-size: 1.3rem; font-weight: 500; line-height:1.3rem;}
-  .ps.ptn table td {font-size: 1.2rem; font-weight: 300; line-height: 1.2rem;}
-  .hookGrp{margin-top: 1.333rem;}
-	.hookGrp .hook_list{border: 1px solid #f5f5f5;padding: 1.333rem;}
-	.hookGrp .hook_list ul{}
-	.hookGrp .hook_list ul:after{content: ''; clear:both; display: block;}
-	/* .hookGrp .hook_list ul li{float: left;width: 33.333%;} */
-	.hookGrp .hook_list ul li a{display: table; color: #222222;}
-	.hookGrp .hook_list ul li a span{margin: 0px 0px 0.5rem 0;display: block;font-size: 1.1rem;font-weight: 300;}
-	.hookGrp .hook_list ul li a span::after{content: ''; display: block; box-sizing: border-box; border: 1px solid transparent;}
-	.hookGrp .hook_list ul li a:hover,
-	.hookGrp .hook_list ul li a:focus{color: #fd4802;}
-	.hookGrp .hook_list ul li a:hover span:after,
-	.hookGrp .hook_list ul li a:focus span:after{content: '';display: block; color: #fd4802; box-sizing: border-box; border-bottom: 1px solid #fd4802;}
-	.hookGrp .hook_cont {font-size:1.6rem;color:#666666;line-height:2.6rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont div{margin-top: 2.6rem;}
-	.hookGrp .hook_cont div:last-child{margin-bottom: 5.0rem;}
-	.hookGrp .hook_cont h4 {font-size:1.4rem;font-weight:500;color:#222222;line-height:1.6rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont p em{font-size:1.2rem;font-weight:400;color:#222222;line-height:2.2rem;letter-spacing:-0.025em;}
-	.hookGrp .hook_cont ol li {font-size:1.2rem;padding-left: 0.3rem;}
-
-  .pager {height: 100%;margin-top: 2.0rem;margin-bottom: 2.0rem;}
-  .pager .pageNav {display: table;margin-left: auto;margin-right: auto;}
-  .pager .pageNav > li {display: inline;}
-  .pager .pageNav > li::after {content: '';clear: both; display: inline-block;}
-  .pager .pageNav > li > a, .pager .pageNav > li > span {position: relative;float: left;font-size: 1.6rem;font-weight: 400;padding: 0.6rem 0.2rem;line-height: 1.42857143;color: #666666;text-decoration: none;background-color: #ffffff;}
-  .pager .pageNav .prev a , .pager .pageNav .next a {width: 3.4rem;height: 3.4rem;margin-left: 0;border: 1px solid #888888;background: url('/images/mo/ico_paging.png')no-repeat;background-size: 6.8rem 2.866rem;text-indent: -999.9rem;}
-  .pager .pageNav .prev a {background-position: 0rem 0rem;}
-  .pager .pageNav .next a {background-position: -3.5rem 0rem;}
-  .pager .pageNav .active a {color: #222222;margin-left: 1.5rem;}
-  .pager .pageNav .lastpage a {color: #888888;margin-right: 1.5rem;}
-  .pager .pageNav .lastpage a::before {content: '/';padding-right: 0.3rem;}
-
-
-
+/* 이용약관,개인정보취급방침,업체리스트 */
+.ps p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
+.ps {padding:0;} 
+.ps table {word-break:keep-all;margin-top: 3.0rem;width: 100%;border-top: 1px solid #222222;}
+.ps table th,
+.ps table td {position:relative; padding:1.0rem 1.0rem; font-size:1.1rem;line-height: 1.4;color: #222222;letter-spacing:-0.025em;}
+.ps table td {border-bottom:1px solid #ddd;border-right: 1px solid #ddd;font-weight:200;}
+.ps table td:last-child {border-right: 1px solid transparent;}
+.ps table th {border-top: 0;border-bottom: 0;border-right: 0;font-weight: 600;text-align: center;background: #f5f5f5;}
+.ptn, #partnersPop .pop_cont {height: auto;background: #ffffff;}
+.ps.ptn table {margin-top:0;}
+.ps.ptn table th, .ps.ptn table td {text-align: center;padding: 1.6rem 0;}
+.ps.ptn table th {font-size: 1.3rem; font-weight: 500; line-height:1.3rem;}
+.ps.ptn table td {font-size: 1.2rem; font-weight: 300; line-height: 1.2rem;}
+.hookGrp{margin-top: 1.333rem;}
+.hookGrp .hook_list{border: 1px solid #f5f5f5;padding: 1.333rem;}
+.hookGrp .hook_list ul{}
+.hookGrp .hook_list ul:after{content: ''; clear:both; display: block;}
+/* .hookGrp .hook_list ul li{float: left;width: 33.333%;} */
+.hookGrp .hook_list ul li a{display: table; color: #222222;}
+.hookGrp .hook_list ul li a span{margin: 0px 0px 0.5rem 0;display: block;font-size: 1.1rem;font-weight: 300;}
+.hookGrp .hook_list ul li a span::after{content: ''; display: block; box-sizing: border-box; border: 1px solid transparent;}
+.hookGrp .hook_list ul li a:hover,
+.hookGrp .hook_list ul li a:focus{color: #fd4802;}
+.hookGrp .hook_list ul li a:hover span:after,
+.hookGrp .hook_list ul li a:focus span:after{content: '';display: block; color: #fd4802; box-sizing: border-box; border-bottom: 1px solid #fd4802;}
+.hookGrp .hook_cont {font-size:1.6rem;color:#666666;line-height:2.6rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont div{margin-top: 2.6rem;}
+.hookGrp .hook_cont div:last-child{margin-bottom: 5.0rem;}
+.hookGrp .hook_cont h4 {font-size:1.4rem;font-weight:500;color:#222222;line-height:1.6rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont p {font-size:1.2rem;color:#666666;line-height:2.2rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont p em{font-size:1.2rem;font-weight:400;color:#222222;line-height:2.2rem;letter-spacing:-0.025em;}
+.hookGrp .hook_cont ol li {font-size:1.2rem;padding-left: 0.3rem;}
+
+.pager {height: 100%;margin-top: 2.0rem;margin-bottom: 2.0rem;}
+.pager .pageNav {display: table;margin-left: auto;margin-right: auto;}
+.pager .pageNav > li {display: inline;}
+.pager .pageNav > li::after {content: '';clear: both; display: inline-block;}
+.pager .pageNav > li > a, .pager .pageNav > li > span {position: relative;float: left;font-size: 1.6rem;font-weight: 400;padding: 0.6rem 0.2rem;line-height: 1.42857143;color: #666666;text-decoration: none;background-color: #ffffff;}
+.pager .pageNav .prev a , .pager .pageNav .next a {width: 3.4rem;height: 3.4rem;margin-left: 0;border: 1px solid #888888;background: url('/images/mo/ico_paging.png')no-repeat;background-size: 6.8rem 2.866rem;text-indent: -999.9rem;}
+.pager .pageNav .prev a {background-position: 0rem 0rem;}
+.pager .pageNav .next a {background-position: -3.5rem 0rem;}
+.pager .pageNav .active a {color: #222222;margin-left: 1.5rem;}
+.pager .pageNav .lastpage a {color: #888888;margin-right: 1.5rem;}
+.pager .pageNav .lastpage a::before {content: '/';padding-right: 0.3rem;}
 
 /* ev_공통 */
 .ev .inner {background: #fff; padding-bottom: 0;}
@@ -1004,6 +998,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .part_goods .point {margin-bottom: 0.7rem; font-size: 1.1rem; color: #888; background: url(/images/mo/ico_point.png) no-repeat left top 1px; background-size:1.2rem; padding-left: 1.6rem;}
 .part_goods .od_calc .sale_price {font-size: 1.1rem; color: #888; font-weight: 300;}
+.part_goods .od_calc .sale_percent {font-size: 1.3rem; color:#fd4802;}
 .part_goods .od_calc .price {font-size: 0;}
 .part_goods .od_calc .price .selling_price {display:inline-block; color:#222; font-size:1.3rem; font-weight:600;}
 .part_goods .od_calc .price .selling_price em {font-size:1.6rem;}
@@ -1585,9 +1580,16 @@ background-size:100%;}
 .od .info_txt ul li:last-child {margin-bottom: 0;}
 .od .info_txt ul li:after {content:''; position: absolute; top:0.6rem; left: 0; background: #858585; width: 0.2rem; height: 0.2rem;}
 
-.od .inner:last-child .btn_group_flex {margin-top: -1.2rem;}
+.od .inner .area_paybtn {margin-top: -1.2rem;}
+.od .inner .area_paybtn .btn_group_flex {margin-top: 0;}
 .od .inner .shipfold .btn_group_flex {margin-top: 3rem;}
 
+.ship_etc {display:none; margin-top: 0.5rem;}
+.ship_etc input[type="text"] {width: 100%; height: 4.5rem; font-size: 1.3rem; color: #888; font-weight: 300;}
+.ship_etc input[type="text"]::placeholder {}
+.ship_etc .desc_txt {position: relative; padding-left: 0.8rem; margin-top: 1rem; font-size: 1.1rem; }
+.ship_etc .desc_txt:after {content:''; position: absolute; top: 0.6rem; left: 0; background: #888; width: 0.2rem; height: 0.2rem;}
+
 /* od_테이블 */
 .od .pay_wrap {padding-top: 4rem;}
 .od .goods_top {position: relative; padding: 1.5rem 0; border-bottom: 1px solid #ddd; font-size: 0; margin-bottom: 2.5rem;}
@@ -1711,6 +1713,8 @@ background-size:100%;}
 .odPayment .fold_cont .area_overseas .info_box {font-size:16px;}
 .odPayment .fold_cont .area_overseas .info_box .t_err {margin-top:5px; font-size:1.1rem;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 {margin-right:0}
+.odPayment .fold_cont .area_overseas .info_box.overs1 .recipient {margin-bottom: 0.5rem; font-size: 1.3rem;}
+.odPayment .fold_cont .area_overseas .info_box.overs1 .recipient em {font-weight: 200;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 .input_wrap {display: block; width: 100%;}
 .odPayment .fold_cont .area_overseas .info_box.overs1 .input_wrap .form_control {width: 100%; color: #222;}
 .odPayment .fold_cont .area_overseas .info_box.overs2 {margin-top:0; margin-right:0; color:#666; font-size: 1.4rem;}
@@ -1719,6 +1723,9 @@ background-size:100%;}
 .odPayment .fold_cont .area_overseas .info_box .agree_overs label::before,
 .odPayment .fold_cont .area_overseas .info_box .agree_overs label::after {top:10px !important; transform:translateY(0%) !important;}
 .odPayment .agree_insurance, .od .agree_insurance {display:none; margin:1rem 0 0;}
+.odPayment .agree_insurance .form_field .agree_insurance label, .od .form_field .agree_insurance label {font-size: 1.3rem;}
+.od .agree_insurance p {margin:1rem 0; font-weight: 200; font-size: 1.2rem;}
+.od .agree_insurance .btn {height:auto; padding:1rem 1.3rem; font-weight: 300; font-size: 1.3rem;}
 .od .foldGroup .fold_head .data .total_gift,
 .od .foldGroup .fold_head .data .total_deduct {color:#fd4802; font-weight:500;}
 
@@ -1852,7 +1859,7 @@ background-size:100%;}
 .adrsModify_pop .default_addrs {margin-top: 1.5rem;}
 /* //주문결제_배송지수정 팝업 */
 
-/* 주문결제_할인쿠폰변경 팝업 */	
+/* 주문결제_할인쿠폰변경 팝업 */
 .modal .modal-footer .btn.btn_primary {background: #fd4802;}
 .modal.couponModify_pop .modal-body .pop_cont {line-height:1; font-size: 1.3rem;}
 .modal.couponModify_pop .modal-footer {margin-top:0;}
@@ -1887,7 +1894,7 @@ background-size:100%;}
 .modal.couponModify_pop .area_cart_coupon {margin-bottom:6rem;}
 .modal.couponModify_pop .area_cart_coupon .form_field > div {border-bottom:1px solid #ddd}
 .modal.couponModify_pop .area_cart_coupon .form_field > div:first-child {border-top:1px solid #ddd;}
-.modal.couponModify_pop .area_cart_coupon .form_field > div label {width:100%;}
+.modal.couponModify_pop .area_cart_coupon .form_field > div label {width:100%; color:#222;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon {padding:20px 0px;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon .name {color:#222; font-size:14px; font-weight:300;}
 .modal.couponModify_pop .area_cart_coupon .cart_coupon .txt {margin-top:10px; color:#888; font-size:14px; font-weight:200;}
@@ -1920,7 +1927,8 @@ background-size:100%;}
 .od .area_selgift .agree_gift .txt {font-size: 1.3rem; margin:1rem 0;}
 .od .area_selgift .agree_gift .btn_link_popup {font-size: 1.1rem; color:#666; border-bottom: 1px solid #666;}
 .od .area_selgift .agree_gift_con {display: none; width: 100%; border:1px solid #ddd; border-top: 0; padding:1.8rem;}
-.od .area_selgift .agree_gift_con p {height: 10rem; overflow-y: auto; padding-right: 0.5rem;}
+.od .area_selgift .agree_gift_con p {position: relative; padding-left: 1rem; font-size: 1.2rem; color: #888;}
+.od .area_selgift .agree_gift_con p:before {content:'-'; position: absolute; left: 0; top: 0;}
 
 .od .area_selpoint dl > div {margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid #ddd;}
 .od .area_selpoint dl > div:first-child {margin-top: 0;}
@@ -1929,8 +1937,9 @@ background-size:100%;}
 .od .area_seldiscount dl > div {border-bottom: 1px solid #eee; margin-bottom: 1.5rem; padding-bottom: 1.5rem;}
 .od .area_seldiscount dl > div:last-child {border-bottom: 0;}
 .od .area_seldiscount dl > div:first-child {}
-.od .area_seldiscount #btn_couponModify_pop {width: 100%; display: block; height: 4.5rem; margin:1.5rem 0; border:1px solid #a7a7a7;}
-.od .area_seldiscount dt {position: relative; font-size: 1.4rem; color: #222; font-weight: 300;}
+.od .area_seldiscount dl > div:nth-child(2) {border-bottom: 1px dashed #eee;}
+.od .area_seldiscount #btn_couponModify_pop {width: 100%; display: block; height: 4.5rem; margin:0 0 1.5rem; border:1px solid #a7a7a7;}
+.od .area_seldiscount dt {position: relative; margin-bottom: 1.5rem; font-size: 1.4rem; color: #222; font-weight: 500;}
 .od .area_seldiscount dt .maxdisc_amount {position: absolute; top: 0; right: 0;}
 
 .od .area_seldiscount .input_wrap, .od .area_selpoint .input_wrap {display: block;}
@@ -1950,10 +1959,10 @@ background-size:100%;}
 .od .area_seldiscount .dlvr_fee_box .select_custom .combo .dlvr_coupon .empty {margin-top:2rem; color:#888; font-size:1.3rem; font-weight:300;}
 .od .area_seldiscount .dlvr_fee_box .select_custom .combo .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
 
-.od .tmark_required {color:#fd4802; font-size:1.3rem; font-weight:300;}
+.od .tmark_required {color:#fd4802; font-size:1.2rem; font-weight:300;}
 
 .od .area_selpoint {}
-.od .area_selpoint dl > div dt {font-size: 1.4rem; color: #222;}
+.od .area_selpoint dl > div dt {font-size: 1.4rem; color: #222; font-weight: 500;}
 .od .area_selpoint dl > div dt span {font-size: 1.2rem; color:#888; margin-left: 0.5rem;}
 .od .area_selpoint .form_field > div {margin:1rem 0;}
 .od .area_selpoint .form_field > div.input_wrap {float:none; margin-right:0;}
@@ -1985,8 +1994,8 @@ background-size:100%;}
 .od .paymentinfo .payinfo_blk.on {background:#f5f5f5;}
 .od .paymentinfo .payinfo_blk.on a span::after {top:3px; transform:rotate(-180deg);}
 .od .paymentinfo .payinfo_blk.on .infotxt {display:block; margin:0px 1.9rem 1.9rem;}
-.od .area_paymentinfo .agree_payment {margin:4rem 0 4.2rem; color:#222; font-size:1.4rem; font-weight:200; text-align:center;}
-.od .area_paybtn .btn {height:80px; font-size:20px; font-weight:300;}
+.od .area_paymentinfo .agree_payment {margin:4rem 0 4.8rem; color:#222; font-size:1.4rem; font-weight:200; text-align:center;}
+.od .area_paybtn .btn {height:6rem; font-size:1.6rem; font-weight:500;}
 .od .area_paybtn .btn em {font-weight:500;}
 
 .od .extra_pay {padding:0px 30px 40px; margin-bottom: 20px; border-top:1px solid #222; border-bottom:1px solid #ddd;}
@@ -2022,12 +2031,8 @@ background-size:100%;}
 .od .completed .info_complete .report_box div.closedate dt,
 .od .completed .info_complete .report_box div.closedate dd {margin:0; color:#888; font-size:16px; font-weight:200;}
 .od .completed .info_complete .report_box div.closedate dd span {font-weight:300;}
-.od .completed .od_cont {width:100%;}
-.od .completed .od_cont h3 {margin-bottom:20px; font-size:18px; font-weight:500;}
-.od .completed .od_cont .order_amount dl div {margin-top:20px;}
-.od .completed .od_cont .order_amount dl div:first-child {margin-top:0}
-.od .completed .od_cont [class^='area_']{margin-top:60px}
-.od .completed .od_cont .sec_foot {margin-top:60px}
+
+.od .completed .btn_group_flex {margin-top: 0;}
 .od .completed .btn_group_md {text-align:center;}
 .od .completed .btn_group_md::after {}
 .od .completed .btn_group_md .btn {margin:0px 3px; width:230px;}
@@ -2092,10 +2097,8 @@ background-size:100%;}
 .nonMBorder .cont_head h3 {margin-bottom:40px; font-size:40px; font-weight:500;} 
 .nonMBorder input[type="text"] {float:none; width:100%; height:4.5rem; padding:1.7rem 1.5rem; color:#222; font-size:1.3rem; font-weight:300;}
 .nonMBorder input[type="text"]::placeholder {color:#888; font-weight:200;}
-.nonMBorder .form_field {display:block; margin-top:10px;}
+.nonMBorder .form_field {display:block; margin-top:1rem;}
 .nonMBorder .form_field:first-of-type {margin-top:0px;}
-.nonMBorder .form_field .ui_col_9 input[type="text"] {width:388px;}
-.nonMBorder .form_field .ui_col_3 .btn {width:132px; height:52px; padding:17px 0px 17px; font-weight:200;}
 .nonMBorder .cont_foot {position:relative; width:530px; margin:40px auto 0; color:#888; font-size:16px; line-height:1;}
 .nonMBorder .cont_foot::after {content:''; clear:both; display:block;}
 .nonMBorder .cont_foot p span {display:block;}
@@ -2106,17 +2109,22 @@ background-size:100%;}
 .nonMBorder .btn_group_md .btn {padding:19px; font-weight:300; height:60px;}
 .nonMBorder .btn_group_md .btn_default {border-color:#a7a7a7;}
 .nonMBorder .agree_nombPrivacy {}
-.nonMBorder .agree_nombPrivacy label span {font-size:18px;}
-.nonMBorder .agree_nombPrivacy label span .tmark_required {display:inline-block; margin-top:2px; font-size:14px; vertical-align:top;}
+.nonMBorder .agree_nombPrivacy label span {font-size:1.3rem;}
+.nonMBorder .agree_nombPrivacy label span .tmark_required {display:inline-block; font-size:1.3rem; vertical-align:top;}
 .nonMBorder .agree_nomb_txt_box {margin-bottom:40px; padding:1.5rem; border:1px solid #ddd;}
 .nonMBorder .agree_nomb_txt_box > div {overflow:auto; max-height:160px; color:#888; font-size:14px; line-height:1.5; font-weight:200;}
+.nonMBorder .agree_nomb_txt_box > div.agree_nombPrivacy {margin-bottom: 1rem;}
 .nonMBorder .adress_area {}
 .nonMBorder .adress_area dl {padding:20px 0 0}
 .nonMBorder .adress_area dl div {margin-top:15px;} 
 .nonMBorder .adress_area dl div:first-of-type {margin-top:0}
-.nonMBorder .adress_area dl div dt {float:left;}
-.nonMBorder .adress_area dl div dt span {display:inline-block; width:46px; height:22px; padding:4px 0; margin-top:-4px; margin-right:10px; border:1px solid #ddd; font-size:12px; text-align:center; vertical-align:top;}
+.nonMBorder .adress_area dl div dt {float:left; margin-top:-0.4rem;}
+.nonMBorder .adress_area dl div dt span {display:inline-block; width:46px; height:22px; padding:4px 0; margin-right:10px; border:1px solid #ddd; font-size:12px; text-align:center; vertical-align:top;}
 .nonMBorder .adress_area dl div dd {padding-left:53px; color:#666; font-size:14px;}
+.nonMBorder input[type="text"] {color:#222;}
+.nonMBorder input[type="text"]:read-only {background: #f5f5f5;}
+.nonMBorder .input_wrap .btn_hp_certi {position: absolute; top: 0; right: 0; height: 4.5rem; margin-left: 0; font-size: 1.4rem; font-weight: 300;}
+.nonMBorder .detail_addr {margin-top: -1.1rem;}
 .nonMBorder .btn_addr_sch {position: absolute; right: 0; top: 0; padding: 0; border:none; width: 4.5rem; height: 4.5rem; background: url(/images/mo/ico_search_btn.png) no-repeat center; background-size:1.7rem;}
 
 
@@ -2147,7 +2155,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .shopping_bag .goods_dlvr_save {margin-top: 1.8rem; text-align: center;}
 .shopping_bag .goods_dlvr_save a.btn_popup_save {display:inline-block; padding-right:20px; text-align: center; color:#fd4802; font-size:1.1rem; font-weight:200; line-height:14px; text-decoration:underline; background:url('/images/mo/ico_go_save.png') no-repeat 98% 45%; background-size:1.1rem;}
 
-.shopping_bag .od_calc_wrap {font-size: 0; width: 100%;}
+.shopping_bag .od_calc_wrap {position: fixed; left: 0; bottom: 0; z-index: 99; font-size: 0; width: 100%;}
 .shopping_bag .od_calc_wrap button {width: 60%;}
 .shopping_bag .od_calc_wrap button:first-child {width: 40%;}
 
@@ -2185,7 +2193,7 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .shopping_bag .area_order .od_amount_box .btn_link {display:inline-block; padding:0px 13px; height:40px; line-height:38px; color:#222; font-size:14px; font-weight:300; border:1px solid #a7a7a7; box-sizing:border-box;}
 .shopping_bag .info_box .od_exinfo {margin-top: 0.9rem;}
 .shopping_bag .info_box .od_exinfo a {}
-.shopping_bag .info_box .od_exinfo a:after {content:''; border:2px solid transparent; border-left:2px solid #fd4802;} 
+.shopping_bag .info_box .od_exinfo a:after {content:''; display: inline-block; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; border-left: 0.3rem solid #fd4802; margin-left: 0.6rem;} 
 .shopping_bag .part_goods .goods_section > .od_calc {margin: 1rem 0 0 3rem; padding:1.3rem 0 0 0; position: relative; line-height: 1; border-top: 1px solid #ddd;}
 
 .od .area_order .od_amount_box .btn_link::after {display:none;}
@@ -2244,23 +2252,27 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .optModifyPop .area_order > div .color {}
 .optModifyPop .select_custom .combo .list {position: static;}
 .optModifyPop .opt_header:after {content:''; display: block; clear:both;}
-.optModifyPop .opt_header {margin-bottom: 1rem;}
+.optModifyPop .opt_header {margin-bottom: 1rem; position: relative;}
 .optModifyPop .opt_header > span {float:left;}
 .optModifyPop .opt_header .color {margin-left: 2rem; color: #666;}
+.optModifyPop .opt_header .form_field {position: absolute; top: 0; right: 0; width:auto;}
+.optModifyPop .area_order .opt_color::before {content: ''; display: block; width:100%;border-top: 1px solid #dddddd;position: relative;top: -1.2rem;left: auto;right: auto;}
 .optModifyPop .area_order .opt_color ul {font-size: 0; width: 100%; white-space: nowrap; overflow-x: auto;}
 .optModifyPop .area_order .opt_color ul li {display: inline-block; margin:0 3px; margin-top:6px}
 .optModifyPop .area_order .opt_color ul li a {display:block; box-sizing:border-box; width:70px; height:105px;}
 .optModifyPop .area_order .opt_color ul li a.on img {border:1px solid #fd4802}
 .optModifyPop .area_order .opt_size {padding-bottom:40px; border-bottom:1px solid #ddd;}
 .optModifyPop .area_order .opt_size .form_field {display:block; width:100%; font-size: 0;}
-.optModifyPop .area_order .opt_size .form_field > div {margin:6px 3px 0;}
-.optModifyPop .area_order .opt_size .form_field > div {float:none; width:auto; display: inline-block;}
+.optModifyPop .area_order .opt_size .form_field > div {float:none; width:20%; display: inline-block; margin:6px 0 0; padding:0 0.78%;}
+.optModifyPop .area_order .opt_size .form_field > div {}
 /* .optModifyPop .area_order .opt_size .form_field > div:nth-child(6n-5) {margin-left:0px;} */
-.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label {display:block; width:50px; height:40px; padding:0; line-height:40px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label {position: relative; display:block; width:100%; height:40px; padding:0; line-height:40px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ddd; color:#222; font-weight:200; font-size:14px;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"] + label span {position:absolute; top:50%; left:0%; width:100%; padding:0 6px; line-height:1.2; transform:translateY(-50%); display:inline-block; text-overflow:ellipsis; overflow:hidden;}
 .optModifyPop .area_order .opt_size .form_field input[type="radio"] + label::before,
 .optModifyPop .area_order .opt_size .form_field input[type="radio"] + label::after {display:none;}
 .optModifyPop .area_order .opt_size .form_field input[type="radio"]:checked + label {border:1px solid #fd4802;}
-.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label {text-decoration:line-through; background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label {background:#f5f5f5; border-color:#f5f5f5; color:#bbb; opacity:1;}
+.optModifyPop .area_order .opt_size .form_field input[type="radio"]:disabled + label span {text-decoration:line-through;}
 
 .optModifyPop .area_order .opt_select .select_custom .combo .select {height:45px; padding:15px;}
 .optModifyPop .area_order .opt_select .select_custom .combo .list > li {height:45px; padding:15px; font-size:14px; line-height:1;}
@@ -2282,22 +2294,28 @@ main.container .shopping_bag .inner:last-child {padding-bottom: 0;}
 .popup_box .part_goods .od_calc .price {position: static;}
 
 /* popup_다다익선 */
-.moresalePop .area_benefit {padding-top:4px; color:#fd4802; font-size:14px;}
+.moresalePop .area_benefit {padding-top:2.4rem; color:#fd4802; font-size:14px;}
 .moresalePop .area_benefit::after {content:''; clear:both; display:block;}
-.moresalePop .area_benefit .tag {float:left; width:55px; margin-top:-4px;}
+.moresalePop .area_benefit .tag {float:left; width:3.2rem; font-size: 1rem; padding: 0.5rem 0; text-align: center; height:auto;}
 .moresalePop .area_benefit p {float:left;}
-.moresalePop .area_benefit p span {float:left;  position:relative; padding:0px 12px;}
-.moresalePop .area_benefit p span::before {content:''; position:absolute; width:1px; height:14px; left:0px; top:50%; transform:translateY(-50%); background:#ddd;}
+.moresalePop .area_benefit p span {position:relative; display: block; padding:0px 1rem; display: block; line-height: 2.2rem;}
 .moresalePop .area_benefit p span:first-child::before {display:none;}
 .moresalePop .popup_con {padding:0 2rem;}
 .moresalePop .part_goods ul {border-top: 1px solid #eeeeee;}
 .moresalePop .part_goods li {border-bottom: 1px solid #eeeeee; padding:2rem 0;}
 .moresalePop .part_goods li:last-child {border-bottom: 0;}
+.moresalePop .part_goods .sale_price {margin-left: 1rem;}
+.moresalePop .part_goods .sale_percent {margin-left: 1.5rem;}
+.moresalePop .part_goods .od_shoppingbag {margin-top: 1rem;}
 
 /* popup_배송비 SAVE */
+.dlvrSavePop .popup_head {padding-bottom: 0;}
 .dlvrSavePop .popup_con {padding: 0 2rem;}
 .dlvrSavePop .part_goods li {border-bottom: 1px solid #eeeeee; padding:2rem 0;}
 .dlvrSavePop .part_goods li:last-child {border-bottom: 0;}
+.dlvrSavePop .part_goods .sale_price {margin-left: 1rem;}
+.dlvrSavePop .part_goods .sale_percent {margin-left: 1.5rem;}
+.dlvrSavePop .part_goods .od_shoppingbag {margin-top: 1rem;}
 
 /* od_gift_1 */
 main.container .od_gift .inner:last-child {padding-bottom: 0;}
@@ -2365,4 +2383,7 @@ main.container .od_extra .inner:last-child {padding-bottom: 0;}
 .couponSelectPop .list li {border:1px solid #eee; border-bottom: 1px solid transparent;}
 .couponSelectPop .list li:last-child {border-bottom: 1px solid #eee;}
 .couponSelectPop .list li:hover, .couponSelectPop01 .list li:active {border:1px solid #fd4802;}
-.couponSelectPop .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
+.couponSelectPop .list > li[aria-disabled="true"] .dlvr_coupon p {color:#888;}
+
+/* 다음우편번호 api */
+#daumZipcodePop .modal-content {margin-top:5rem;}